/* ==========================================================
   BeOrganic.sk - CMS preview only fixes
   Activates only inside ClickEshop CMS editor preview.
   ========================================================== */

body:has(#ce_panel) #pageHeaderContent {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

body:has(#ce_panel) #pageHeaderContent .bo-top-left,
body:has(#ce_panel) #pageHeaderContent .bo-top-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  width: auto !important;
  margin: 0 !important;
  float: none !important;
}

body:has(#ce_panel) #pageHeaderContent .bo-top-right {
  margin-left: auto !important;
  gap: 18px !important;
}

body:has(#ce_panel) .editContent .bo-super-wrap,
body:has(#ce_panel) .editContent .bo-sets-wrap,
body:has(#ce_panel) .editContent .bo-skin-container,
body:has(#ce_panel) .editContent .bo-why-clean-container,
body:has(#ce_panel) .editContent .bo-guide-wrap,
body:has(#ce_panel) .editContent .bo-blog-wrap,
body:has(#ce_panel) .editContent .bo-benefits-row,
body:has(#ce_panel) .editContent .bo-top-card {
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

body:has(#ce_panel) .editContent .bo-home-picked-center,
body:has(#ce_panel) .editContent .bo-why-clean-footer.bo-home-picked-center,
body:has(#ce_panel) .editContent .bo-why-clean-footer[style*="width: 900px"],
body:has(#ce_panel) .editContent .bo-why-clean-footer[style*="width:900px"],
body:has(#ce_panel) .editContent .bo-why-clean-footer[style*="translateX"] {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 40px auto 32px !important;
  padding: 0 24px !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

body:has(#ce_panel) .editContent .bo-home-picked-center .bo-why-clean-p-foot,
body:has(#ce_panel) .editContent .bo-home-picked-center .bo-why-clean-p-foot > span {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  white-space: normal !important;
}

body:has(#ce_panel) #page_home_out .bo-why-clean-footer .bo-why-clean-p-foot:nth-child(2),
body:has(#ce_panel) #page_home_out .bo-why-clean-footer .bo-why-clean-p-foot:nth-child(2) > span {
  color: #2b2b2b !important;
  font-family: var(--bo-font-display, var(--bo-font-body, "Montserrat", Arial, sans-serif)) !important;
  font-size: 36px !important;
  font-weight: 600 !important;
  line-height: 1.18 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

body:has(#ce_panel) #page_home_out .bo-why-clean-footer .bo-why-clean-p-foot:nth-child(2) > span::after {
  content: none !important;
  display: none !important;
}

body:has(#ce_panel) #page_home_out .bo-why-clean-footer .bo-why-clean-p-foot:nth-child(3),
body:has(#ce_panel) #page_home_out .bo-why-clean-footer .bo-why-clean-p-foot:nth-child(3) > span {
  color: #68645d !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

body:has(#ce_panel) .editContent .bo-sets-carousel-container {
  display: block !important;
}

body:has(#ce_panel) .editContent .bo-sets-carousel {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: auto !important;
  gap: 24px !important;
  width: 100% !important;
  overflow: visible !important;
  scroll-behavior: auto !important;
  scroll-snap-type: none !important;
}

body:has(#ce_panel) .editContent .bo-sets-item {
  flex: none !important;
  width: auto !important;
  max-width: 100% !important;
  scroll-snap-align: none !important;
}

body:has(#ce_panel) .editContent .bo-sets-arrow {
  display: none !important;
}

body:has(#ce_panel) .editContent .bo-super-list,
body:has(#ce_panel) .editContent .bo-blog-list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body:has(#ce_panel) .editContent .bo-why-clean-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 24px !important;
}

body:has(#ce_panel) .editContent .bo-super-item,
body:has(#ce_panel) .editContent .bo-blog-item,
body:has(#ce_panel) .editContent .bo-why-clean-card {
  width: auto !important;
  max-width: 100% !important;
}

body:has(#ce_panel) .editContent .bo-blog-item {
  display: flex !important;
  flex-direction: column !important;
}

body:has(#ce_panel) .editContent .bo-blog-img,
body:has(#ce_panel) .editContent .bo-blog-img img,
body:has(#ce_panel) .editContent .bo-super-img img,
body:has(#ce_panel) .editContent .bo-sets-img img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}