/* selfcare.sk — vlastné CSS (produktové karty, kategórie, USP, FAQ accordion). */
/* Externý súbor = žiadny char limit, ostáva čitateľné. Edituj tu, nahraj do Shoptet Súbory. */

/* ===== POZADIE STRÁNKY = čistá biela (rozhodnutie Q 2026-07-15) ===== */
/* Theme dáva na body béžovú #F6F5F1 — prebíjame na #fff. Fotky sa odteraz generujú na čisto
   bielom pozadí → splynú bez prechodov. Krémová #FAF8F4 ostáva len ako akcent (karty, etikety). */
html, body { background: #ffffff !important; }

/* ===== SELFCARE — PRODUKTOVÉ KARTY ===== */
/* Karta aj foto zóna čisto biele (rozhodnutie Q 2026-07-20) — krémová robila
   žltkasté pruhy okolo fotiek (detail/ variant má priehľadné bočné pásy). */
.product.no-code {
  background: #ffffff !important;
  border: 1px solid #E8E4DD !important; /* jemný hairline rám (Q 2026-07-20 — ako na homepage); rušivý bol theme tieň na .p, nie border */
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  height: 100% !important;
  transition: transform .2s, border-color .2s !important;
}
.product.no-code:hover {
  border-color: #FF6E5C !important;
}
.product.no-code .p {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-shadow: none !important; /* theme dáva na .p tieň 0.08 — na čisto bielom layoute robil sivý rám */
}

/* Listing kategórií = rovnaká veľkosť kariet ako homepage slider (Q 2026-07-20).
   Theme pri malom počte produktov roztiahne karty na 1/2 šírky — grid drží
   homepage proporcie (~250px karta) bez ohľadu na počet produktov. */
.products-page.products-block {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)) !important;
  gap: 24px !important;
}
.products-page.products-block .product {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  float: none !important;
}
@media (max-width: 767px) {
  .products-page.products-block {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}
.product.no-code .image {
  flex: 0 0 auto !important;
  display: block !important;
  margin: 0 !important;
  padding: 24px 0 0 !important; /* vzduch navrch — uzáver nelepí na okraj, fľaša ostáva veľká */
  background: #ffffff !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.product.no-code .image img {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center bottom !important; /* fľaša sadne na spodok, vzduch pridáva padding boxu */
  display: block !important;
  box-sizing: border-box;
}
.product.no-code .p-in {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  padding: 18px 22px 0 !important;
}
.product.no-code .p-in-in {
  min-height: 0 !important;
  display: block !important;
}
.product.no-code .name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  letter-spacing: -.01em;
  margin: 0 0 4px !important;
}
.product.no-code .ratings-wrapper {
  display: none !important;
}
.product.no-code .short-description,
.product.no-code .p-desc {
  color: #8A857D !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  margin: 0 0 14px !important;
}
.product.no-code .p-bottom {
  margin: 0 !important;
}
.product.no-code .price-final {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
}
.product.no-code .product-btn {
  position: static !important;
  margin-top: auto !important;
  padding: 16px 22px 22px !important;
  text-align: left;
}
.product.no-code .product-btn .pr-action {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: block !important;
  margin: 0 !important;
}
.product.no-code .btn-cart,
.product.no-code .add-to-cart-button {
  background: #1A1A1A !important;
  color: #FAF8F4 !important;
  border: none !important;
  border-radius: 999px !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 13px 18px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  box-shadow: none !important;
}
.product.no-code .btn-cart:hover,
.product.no-code .add-to-cart-button:hover {
  background: #FF6E5C !important;
}
/* hero banner CTA (Chcem nájsť to svoje) — coral hover ako „Do košíka".
   Homepage <style> má vlastný #carousel ...:hover{background:#000} (1,3,0) → prebíjame
   vyššou špecificitou (zdvojená trieda = 1,4,0). */
#carousel .carousel-item-banner--has-text .extended-banner-link.extended-banner-link:hover {
  background: #FF6E5C !important;
}
/* carousel: slide-agnostický kicker (rovnaký eyebrow nad každým nadpisom).
   POZN.: komentár tu pôvodne tvrdil „ŽIADNY gradient" — to už neplatí od v29,
   gradienty sú nižšie a sú nutné, obrázky samy o sebe kontrast nedržia. */
#carousel .carousel-item-banner--has-text .extended-banner-title::before {
  content: 'Jedna značka · Celá polička' !important;
}
/* GRADIENT závoj pod textom — kvôli čitateľnosti, hlavne na mobile.
   ::before je priamo na .item (= .carousel-item-banner--has-text).

   v40 (7. 8.): PREPÍSANÉ z nth-child(1)/(2)/(3) na „default + výnimka".
   Pôvodné pravidlá boli písané pre 3 slidy, carousel má odvtedy 6 → slidy 4, 5 a 6
   cez ne prepadli na starý wellness-éra base gradient, ktorý mizne do priehľadna
   na 56 % šírky a NEMÁ mobilnú variantu. Na telefóne text zaberá skoro celú šírku,
   takže nadpis aj perex ležali na holej fotke (feedback z mobilu 7. 8., slidy 5 a 6).
   Teraz je cream závoj PREDVOLENÝ pre každý slide → pribudnutie ďalšieho slidu
   už nič nerozbije. Zmerané: jediný tmavý obrázok je slide 2 (SWEET DREAMS, jas 21
   z 255 na ľavej polovici), zvyšok 177–214 → svetlé. Preto navy len ako výnimka nižšie. */
#carousel .carousel-inner > .item::before {
  background: linear-gradient(90deg, rgba(242,232,219,0.96) 0%, rgba(242,232,219,0.9) 26%, rgba(242,232,219,0.5) 46%, rgba(242,232,219,0) 64%) !important;
}
#carousel .carousel-inner > .item:nth-child(2)::before {
  background: linear-gradient(90deg, rgba(13,22,38,0.96) 0%, rgba(13,22,38,0.9) 28%, rgba(13,22,38,0.5) 48%, rgba(13,22,38,0) 66%) !important;
}
/* MOBILE — text presahuje cez fľaše, tak gradient roztiahneme cez celú šírku
   (silný vľavo, stlmený vpravo → text číta, fľaše zostávajú viditeľné).
   v29: breakpoint 768 → 1024, lebo tablet (820 px) dostáva body.desktop a pôvodná
   query ho míňala → na iPade text ležal na fľašiach bez závoja. */
@media (max-width: 768px) {
  #carousel .carousel-inner > .item::before {
    background: linear-gradient(90deg, rgba(242,232,219,0.95) 0%, rgba(242,232,219,0.85) 45%, rgba(242,232,219,0.55) 100%) !important;
  }
  #carousel .carousel-inner > .item:nth-child(2)::before {
    background: linear-gradient(90deg, rgba(13,22,38,0.95) 0%, rgba(13,22,38,0.85) 45%, rgba(13,22,38,0.55) 100%) !important;
  }
}
/* TABLET (769–1024) — obrázok sa NEoreže (vidno ho celý), takže stačí jemnejší závoj:
   text číta, fľaše si nechajú sýtosť. */
@media (min-width: 768.01px) and (max-width: 1024px) {
  #carousel .carousel-inner > .item::before {
    background: linear-gradient(90deg, rgba(242,232,219,0.96) 0%, rgba(242,232,219,0.82) 34%, rgba(242,232,219,0.34) 58%, rgba(242,232,219,0) 76%) !important;
  }
  #carousel .carousel-inner > .item:nth-child(2)::before {
    background: linear-gradient(90deg, rgba(13,22,38,0.96) 0%, rgba(13,22,38,0.82) 34%, rgba(13,22,38,0.34) 58%, rgba(13,22,38,0) 76%) !important;
  }
}
/* TMAVÝ slide = 2. v poradí (SWEET DREAMS, nočná fotka) — čistý CSS cez nth-child.
   Farby sa nastavia hneď ako element existuje → ŽIADNY JS, žiadne preblikávanie.
   Tmavá ľavá strana → svetlý text + coral CTA.
   ⚠️ Ak sa zmení poradie slidov v adminovi, treba prečíslovať aj tu. */
#carousel .carousel-inner > .item:nth-child(2) .extended-banner-title { color: #FAF8F4 !important; }
#carousel .carousel-inner > .item:nth-child(2) .extended-banner-title::before { color: #FF6E5C !important; }
#carousel .carousel-inner > .item:nth-child(2) .extended-banner-text { color: rgba(250,248,244,0.85) !important; }
#carousel .carousel-inner > .item:nth-child(2) .extended-banner-link.extended-banner-link { background: #FF6E5C !important; color: #FAF8F4 !important; }
#carousel .carousel-inner > .item:nth-child(2) .extended-banner-link.extended-banner-link:hover { background: #E85A47 !important; }

/* ===== Carousel ŠÍPKY — glassy biely kruh + navy šípka, vyplnia coral pri hoveri (čisté CSS) =====
   Viditeľný kruh = .carousel-control::before (Apollo glyph, 50px biely → prebíjame).
   Ovládače sú JEDEN zdieľaný prvok nad všetkými slidmi → jeden univerzálny štýl (bez JS).
   Priehľadný outline by na svetlom (cream) aj tmavom (mužský) slide nečítal naraz, preto
   svetlé frosted sklo → navy šípka vždy sedí na svetlej ploche a číta na cream/navy/coral.
   Overené screenshotom na všetkých 3 slidoch + hover. */
#carousel .carousel-control { opacity: 1 !important; }
#carousel .carousel-control::before {
  width: 48px !important; height: 48px !important;
  line-height: 46px !important;
  font-size: 15px !important;
  background: rgba(255,255,255,.9) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  color: #0F2447 !important;
  box-shadow: 0 4px 14px rgba(15,36,71,.18) !important;
  transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease !important;
}
#carousel .carousel-control:hover::before {
  background: #FF6E5C !important;
  border-color: #FF6E5C !important;
  color: #FFFFFF !important;
  transform: scale(1.06) !important;
}

/* ===== Carousel BODKY — aktívna = coral pretiahnutá pilulka (čisté CSS) ===== */
#carousel .carousel-indicators { bottom: 22px !important; }
#carousel .carousel-indicators li {
  width: 8px !important; height: 8px !important;
  margin: 0 5px !important;
  border-radius: 4px !important;
  border: none !important;
  background: rgba(255,255,255,.6) !important;
  box-shadow: 0 1px 3px rgba(15,36,71,.18) !important;  /* jemný tieň → bodka číta aj na svetlom slide */
  transition: width .3s ease, background .3s ease !important;
}
#carousel .carousel-indicators li.active {
  width: 22px !important;
  background: #FF6E5C !important;
  box-shadow: none !important;
}

/* ===== Produktový slider (Swiper, .products-block) — rovnaký brand look ako hero =====
   Beží na svetlom pozadí → biely kruh + navy chevron, hover vyplní coral.
   Viditeľný kruh = .swiper-arrow-content; šípka = .icon-svg (apollo glyph).
   Disabled šípky (1 strana) majú pointer-events:none → :hover nezafarbí (správne).
   Bodky = .swiper-pagination-bullet::after; aktívna = coral pretiahnutá pilulka.
   Overené screenshotom (rest/hover/bodky) na 1 aj viac stranách. */
.products-block .swiper-arrow-content {
  background: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(15,36,71,.12) !important;
  transition: background .25s ease, transform .2s ease !important;
}
.products-block .swiper-arrow .icon-svg {
  color: #0F2447 !important;
  transition: color .25s ease !important;
}
.products-block .swiper-arrow:hover .swiper-arrow-content {
  background: #FF6E5C !important;
  transform: scale(1.06) !important;
}
.products-block .swiper-arrow:hover .icon-svg { color: #FFFFFF !important; }
/* bodky */
.products-block .swiper-pagination-bullet::after {
  background: rgba(15,36,71,.28) !important;
  width: 8px !important; height: 8px !important;
  transition: width .3s ease, background .3s ease !important;
}
.products-block .swiper-pagination-bullet-active::after {
  background: #FF6E5C !important;
  width: 22px !important; height: 8px !important;
  border-radius: 4px !important;
}

/* ===== KICKER nad názvom (Línia · Benefit) — mapovaný na ID produktu ===== */
.product.no-code .name::before {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A857D;
  line-height: 1;
  margin: 0 0 5px;
}
.product.no-code .p[data-micro-product-id="7411"] .name::before {
  content: "Pre mužov"; /* 2026-07-29: bolo „Testosterón" — rovnaký compliance dôvod ako sweep homepage */
}
.product.no-code .p[data-micro-product-id="7414"] .name::before {
  content: "Spaľovanie";
}
.product.no-code .p[data-micro-product-id="7417"] .name::before {
  content: "Spánok";
}
.product.no-code .p[data-micro-product-id="7420"] .name::before {
  content: "Pre ženy"; /* 2026-07-29: bolo „Hormóny" — vitex nemá povolené tvrdenie, slovo preč z celého webu */
}
.product.no-code .p[data-micro-product-id="7423"] .name::before {
  content: "Metabolizmus";
}
.product.no-code .p[data-micro-product-id="7426"] .name::before {
  content: "Multivitamín";
}
.product.no-code .p[data-micro-product-id="7429"] .name::before {
  content: "Imunita";
}
.product.no-code .p[data-micro-product-id="7432"] .name::before {
  content: "Podpora srdca"; /* opravené 2026-07-21: „a mozog" bola compliance chyba — DHA 220mg je pod 250mg prahom pre mozgový claim, viď selfcare_etikety.md */
}
.product.no-code .p[data-micro-product-id="7435"] .name::before {
  content: "Hydratácia";
}
.product.no-code .p[data-micro-product-id="7437"] .name::before {
  content: "Krása"; /* DAILY BEAUTY (ex BEAUTY GUMMIES, premenované 2026-07-20) */
}

/* ===== NADPIS SEKCIE "Naše bestsellery" — demo štýl ===== */
.homepage-products-heading-1 {
  font-size: 0 !important;
  text-align: left !important;
  max-width: 1418px;
  margin: 0 auto 34px !important;
  padding: 0 !important;
}
.homepage-products-heading-1::before {
  content: "Najpredávanejšie";
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FF6E5C;
  margin: 0 0 14px;
  font-family: "Inter", sans-serif;
}
.homepage-products-heading-1::after {
  content: "Naše bestsellery" !important;
  font-size: 42px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.05 !important;
  font-family: "Inter", sans-serif !important;
  color: #1A1A1A !important;
}

/* ===== KATEGÓRIE "Tri rady" — responsive grid (3 → 2+banner → 1) ===== */
div:has(> .sc-tile) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
  align-items: stretch !important;
}
.sc-tile {
  min-width: 0 !important;
}
@media (max-width: 900px) {
  div:has(> .sc-tile) {
    grid-template-columns: 1fr 1fr !important;
  }
  .sc-tile:nth-child(3) {
    grid-column: 1 / -1 !important;
    aspect-ratio: 16 / 6 !important;
  }
}
@media (max-width: 560px) {
  div:has(> .sc-tile) {
    grid-template-columns: 1fr !important;
  }
  .sc-tile,
  .sc-tile:nth-child(3) {
    aspect-ratio: 16 / 9 !important;
  }
}
/* B — nižšie kategórie karty (odstránenie prázdneho stredu), len desktop.
   3/4 (=tall) → 1/1; chceš vyššie? daj 9/10, nižšie? daj 6/5. Hover (-6px) je už v inline zdroji sekcie. */
@media (min-width: 901px) {
  .sc-tile { aspect-ratio: 1 / 1 !important; }
}

/* ===== HEADER — jemnejší search + coral nav hover ===== */
/* search: užší + biely s jemným navy outlinom; všetky stavy (rest/hover/focus/open/ESC) */
.search-form.compact-form { max-width: 360px !important; }
.search-form.compact-form fieldset { padding: 0 !important; margin: 0 !important; }

/* — REST — */
.search-input.js-search-input {
  background: #FFFFFF !important;
  border: 1px solid rgba(15, 36, 71, .16) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 58px 12px 20px !important; /* vnútorný padding: text vľavo, miesto na lupu vpravo */
  transition: border-color .18s ease, box-shadow .18s ease !important;
}
/* — HOVER (kým nie je fokus) — jemné stmavenie okraja */
.search-input.js-search-input:hover {
  border-color: rgba(15, 36, 71, .30) !important;
}
/* — FOCUS — coral okraj + mäkký coral ring */
.search-input.js-search-input:focus {
  border-color: #FF6E5C !important;
  box-shadow: 0 0 0 3px rgba(255, 110, 92, .12) !important;
}

/* Apollo dáva vlastný panel na FORM pri KAŽDOM is-searching (aj prázdny fokus, aj po ESC)
   → zneutralizujeme ho. Špecificita .search.is-searching .search-form.compact-form (0,4,0)
   prebíja Apollo .search.is-searching .search-form (0,3,0). */
.search.is-searching .search-form.compact-form {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  max-width: 360px !important; /* Apollo pri is-searching rozširuje form → držíme 360 */
}

/* — OPEN PANEL — len keď je dropdown reálne otvorený (:has .active).
   Musí byť PO neutralize (rovnaká špecificita → vyhráva poradím). NIE .is-searching,
   lebo tá po ESC ostáva visieť a input by zostal „odrezaný". */
.search-form.compact-form:has(.search-whisperer.active) {
  border: 1px solid rgba(15, 36, 71, .16) !important;
  border-bottom: none !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: none !important;
  background: #FFFFFF !important;
}
.search-form.compact-form:has(.search-whisperer.active) .search-input.js-search-input {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.search-whisperer.active {
  border: 1px solid rgba(15, 36, 71, .16) !important;
  border-top: none !important;
  border-radius: 0 0 12px 12px !important;
  box-shadow: 0 14px 30px rgba(15, 36, 71, .10) !important;
  margin-top: 0 !important;
}

/* lupa: priehľadná, text „Hľadať" skrytý (font-size:0), ikona navy → coral na hover */
.search-form.compact-form .btn.btn-default {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 0 !important;
  right: 16px !important; /* lupa odsadená od pravého okraja */
}
.search-form.compact-form .btn.btn-default::before {
  font-size: 18px !important;
  color: #0F2447 !important;
  transition: color .18s ease !important;
}
.search-form.compact-form .btn.btn-default:hover::before {
  color: #FF6E5C !important;
}
/* ===== HEADER TOOLS (PRIHLÁSENIE, košík) + menu — navy, coral hover/aktív, Inter ===== */
/* login + košík + ikony (apollo font ::before) + šípky → navy, hover coral.
   POZN.: viditeľné toggle-window sú v .navigation-buttons / .click-cart, nie v .top-navigation-tools
   → cielime .toggle-window priamo (všetky inštancie). */
.toggle-window, .toggle-window * { color: #0F2447 !important; transition: color .2s ease !important; }
.toggle-window::before, .toggle-window::after,
.toggle-window *::before, .toggle-window *::after { color: #0F2447 !important; }
.toggle-window:hover, .toggle-window:hover * { color: #FF6E5C !important; }
.toggle-window:hover::before, .toggle-window:hover::after,
.toggle-window:hover *::before, .toggle-window:hover *::after { color: #FF6E5C !important; }

/* font Inter v headeri (menu + tools) — Apollo default je Roboto */
.navigation-in.menu a, .toggle-window, .toggle-window * { font-family: 'Inter', sans-serif !important; }

/* menu: coral na hover + aktívnej položke (Apollo dáva a.active na anchor) */
/* menu: coral text + animované coral podčiarknutie na hover aj aktívnej položke.
   POZN.: linky sú .menu > ul.menu-level-1 > li > a (NIE priamo .menu > li > a — preto starý
   selektor nefungoval). Link má padding 22/15/22/20 → podčiarknutie pozicujeme pod text. */
.navigation-in.menu .menu-level-1 > li > a { position: relative !important; transition: color .2s ease !important; }
/* ⚠️ `top: auto` je NUTNÉ, nie kozmetika: Apollo používa ten istý `a::after` na šípku
   podmenu pri položkách s podkategóriami (li.ext) a nastavuje jej `top`. Deklarácie sa
   zlúčia, `top` prebije naše `bottom` a podčiarknutie skočí doprostred textu — vyzerá to
   ako preškrtnuté slovo. Prejavilo sa to 2026-07-30 po pridaní kategórie „Čo ťa zaujíma“. */
.navigation-in.menu .menu-level-1 > li > a::after {
  content: ''; position: absolute; left: 20px; right: 15px; bottom: 16px; top: auto; height: 2px;
  background: #FF6E5C; transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
/* prvá položka (MUŽI) má padding-left:0 (Apollo ju zarovnáva flush vľavo) → podčiarknutie od 0 */
.navigation-in.menu .menu-level-1 > li:first-child > a::after { left: 0 !important; }
.navigation-in.menu .menu-level-1 > li > a:hover::after,
.navigation-in.menu .menu-level-1 > li > a.active::after { transform: scaleX(1) !important; }
.navigation-in.menu .menu-level-1 > li > a:hover,
.navigation-in.menu .menu-level-1 > li > a.active,
.navigation-in.menu a.active { color: #FF6E5C !important; }

/* horný info pás (.top-navigation-bar) — Inter font + coral hover (base farby nechané) */
.top-navigation-bar, .top-navigation-bar a, .top-navigation-bar span { font-family: 'Inter', sans-serif !important; }
.top-navigation-bar a { transition: color .2s ease !important; }
.top-navigation-bar a:hover,
.top-navigation-bar a:hover::before,
.top-navigation-bar a:hover *::before { color: #FF6E5C !important; }

/* ===== KONKURENČNÉ VÝHODY (benefitBanner) — full-width pás ako demo trust strip ===== */
.benefitBanner {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 24px !important;
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 36px max(24px, calc(50vw - 640px)) !important;
  border-top: 1px solid #E8E4DD !important;
  border-bottom: 1px solid #E8E4DD !important;
}
/* kategórie — menšia medzera k nadpisu */
body.type-index .welcome {
  padding-bottom: 18px !important;
}
/* filozofia hneď za USP pásom (žiadna medzera) */
.content-wrapper.homepage-box:has(.sc-story-wrap) {
  margin-top: 0 !important;
}
.benefitBanner__item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  align-self: center !important;
  margin: 0 !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  justify-content: flex-start !important;
}
.benefitBanner__picture {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.benefitBanner__img {
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}
.benefitBanner__content {
  display: block !important;
  text-align: center !important;
}
.benefitBanner__title {
  display: block !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #0F2447 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.benefitBanner__data {
  display: none !important;
}
@media (max-width: 680px) {
  .benefitBanner {
    gap: 28px 24px !important;
    padding: 32px 24px !important;
  }
  .benefitBanner__item {
    flex: 1 1 40% !important;
  }
}

/* ===== FAQ ACCORDION ===== */
/* Aktivuje sa LEN keď footer JS pridá .js-faq (bez JS = odpovede viditeľné = fallback). */
/* Logika klikania je v JS súbore (selfcare_reorder.js.html). */
.sc-faq.js-faq .sc-faq-grid {
  column-count: 1; /* poistka: vždy 1 stĺpec aj keby banner mal column-count:2 */
}
.sc-faq.js-faq .sc-faq-item {
  padding: 0;
}
.sc-faq.js-faq .sc-faq-q {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 22px 0;
  line-height: 1.3;
  -webkit-user-select: none;
  user-select: none;
}
/* +/- kreslené cez CSS (presne vycentrované, žiadne glyf metriky) */
.sc-faq.js-faq .sc-faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background-image:
    linear-gradient(#FF6E5C, #FF6E5C),
    linear-gradient(#FF6E5C, #FF6E5C);
  background-position: center, center;
  background-size: 16px 2px, 2px 16px;
  background-repeat: no-repeat;
  transition: background-size 0.25s ease;
}
.sc-faq.js-faq .sc-faq-item.sc-open .sc-faq-q::after {
  background-size: 16px 2px, 2px 0; /* skry zvislú čiaru → mínus */
}
/* plynulé otváranie cez grid-template-rows (animuje na presnú výšku obsahu) */
.sc-faq.js-faq .sc-faq-a {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  transition: grid-template-rows 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sc-faq.js-faq .sc-faq-item.sc-open .sc-faq-a {
  grid-template-rows: 1fr;
}
.sc-faq.js-faq .sc-faq-a-in {
  overflow: hidden;
  min-height: 0;
}
.sc-faq.js-faq .sc-faq-a-pad {
  padding-bottom: 22px; /* padding vnútri collapse wrappera → klipne sa pri zatvorení */
}

/* ===== NEWSLETTER SEKCIA (sc-news) — navy full-width pás (v banneri „Prečo Selfcare") ===== */
/* HTML je v banneri (za FAQ). Submit handler je v JS (selfcare_reorder.js.html). Submit → Ecomail. */
/* full-bleed fix: rozšíriť Apollo banner-stĺpec na 100% aj keď je sc-news v ňom */
.banners-content:has(.sc-news) { display: block !important; }
.banners-content:has(.sc-news) > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
}
.banners-content:has(.sc-news) .banner-wrapper {
  overflow: visible !important;
  border-radius: 0 !important;
}
.sc-news {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #0F2447;
  color: #fff;
  padding: 80px 24px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
}
.sc-news::after {
  content: "";
  position: absolute;
  top: -140px;
  right: -100px;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255,110,92,0.20), transparent 70%);
  pointer-events: none;
}
.sc-news-inner {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 36px 64px;
}
.sc-news-copy {
  flex: 1 1 380px;
  text-align: left;
}
.sc-news-kicker {
  display: block;
  color: #FF6E5C;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.sc-news-title {
  /* font-family zámerne neforsírujeme → téma dá Cormorant serif ako ostatným sekčným nadpisom (konzistentné) */
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.07;
  margin: 0 0 14px;
  color: #fff;
}
.sc-news-title em {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  color: #FF6E5C;
}
.sc-news-sub {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin: 0;
  max-width: 460px;
}
.sc-news-cta {
  flex: 0 0 auto;
  width: min(440px, 100%);
  position: relative; /* súhlas visí pod formulárom → input ostáva centrovaný s textom */
}
.sc-news-form {
  display: flex;
  gap: 10px;
}
.sc-news-fine {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
}
.sc-news-form input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  padding: 0 20px;
  border: 2px solid transparent;
  border-radius: 999px;
  background: #fff;
  color: #1A1A1A;
  font-size: 15px;
  font-family: 'Inter', sans-serif;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.sc-news-form input[type="email"]::placeholder { color: #9a948c; }
.sc-news-form input[type="email"]:focus {
  border-color: #FF6E5C;
  box-shadow: 0 0 0 4px rgba(255,110,92,0.18);
}
.sc-news-form button {
  flex: 0 0 auto;
  height: 54px;
  padding: 0 26px;
  border: none;
  border-radius: 999px;
  background: #FF6E5C;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s, transform .1s;
  white-space: nowrap;
}
.sc-news-form button:hover { background: #ff5a45; }
.sc-news-form button:active { transform: scale(0.98); }
.sc-news-note {
  font-size: 12px;
  color: rgba(255,255,255,0.42);
  margin: 0;
  line-height: 1.5;
}
.sc-news-note a { color: rgba(255,255,255,0.6); text-decoration: underline; }
.sc-news-error {
  display: none;
  color: #ffb3a8;
  font-size: 13px;
  margin: 0 0 8px;
}
.sc-news.has-error .sc-news-error { display: block; }
.sc-news-success { display: none; }
.sc-news.is-done .sc-news-form,
.sc-news.is-done .sc-news-fine { display: none; }
.sc-news.is-done .sc-news-success { display: flex; align-items: flex-start; gap: 14px; }
.sc-news-success-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,110,92,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sc-news-success p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.sc-news-success strong { color: #fff; }
@media (max-width: 760px) {
  .sc-news { padding: 60px 20px; }
  .sc-news-inner { gap: 28px; }
  .sc-news-title { font-size: 30px; }
  .sc-news-cta { width: 100%; }
  .sc-news-fine { position: static; margin-top: 14px; }
}
@media (max-width: 480px) {
  .sc-news-form { flex-direction: column; }
  .sc-news-form button { width: 100%; }
}
/* tmavá päta plynulo: FAQ → newsletter → footer → copyright bez medzier (len homepage) */
body.type-index .footer { margin-top: 0 !important; } /* preč 60px medzera pod footrom */
.banners-benefits-block:has(.sc-news) { margin-top: -30px !important; margin-bottom: 0 !important; } /* newsletter blok: tesnejšie k FAQ, flush k footru */
.banners-benefits-block:has(.sc-footer) { margin-top: 0 !important; margin-bottom: 0 !important; } /* footer blok: flush k newsletteru aj copyrightu */
.banners-benefits-block:has(.sc-news) .container,
.banners-benefits-block:has(.sc-news) .footer-banners,
.banners-benefits-block:has(.sc-news) [class*="col-"],
.banners-benefits-block:has(.sc-footer) .container,
.banners-benefits-block:has(.sc-footer) .footer-banners,
.banners-benefits-block:has(.sc-footer) [class*="col-"] {
  /* full-bleed enabler: Apollo pri ≤992px zužuje stĺpec na 49% → prebiť na 100% + vynulovať gutter,
     inak sa 100vw bleed (calc 50%-50vw) počíta z úzkeho stĺpca a navy nesiaha po okraj */
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
  width: 100% !important;
}
.banners-benefits-block:has(.sc-news) .footer-banner > span,
.banners-benefits-block:has(.sc-footer) .footer-banner > span { display: block !important; }

/* ===== FOOTER (sc-footer) — 4 stĺpce, tmavší navy než newsletter (tonálny krok) ===== */
/* HTML je v Banner:Pätička za sc-news. Plný footer ako Apollo demo, v selfcare štýle. */
.sc-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #0A1830;
  color: #fff;
  padding: 56px 24px 48px;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.sc-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr;
  gap: 38px 48px;
}
.sc-footer-brand-name {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 10px;
}
.sc-footer-brand-tag {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
  margin: 0 0 18px;
  max-width: 230px;
}
.sc-footer-pay { display: flex; gap: 7px; flex-wrap: wrap; }
.sc-footer-pay span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 5px;
  padding: 5px 8px;
  line-height: 1;
  text-transform: uppercase;
}
.sc-footer-col h4 {
  font-family: 'Inter', sans-serif !important; /* téma inak môže pretlačiť h4 na serif */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FF6E5C;
  margin: 0 0 14px;
}
.sc-footer-col a,
.sc-footer-contact a {
  display: block;
  color: rgba(255,255,255,0.68);
  font-size: 14px;
  text-decoration: none;
  margin: 0 0 10px;
  transition: color 0.15s;
}
.sc-footer-col a:hover,
.sc-footer-contact a:hover { color: #fff; }
.sc-footer-social { display: flex; gap: 10px; margin-top: 6px; }
.sc-footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.sc-footer-social a:hover { background: #FF6E5C; border-color: #FF6E5C; }
.sc-footer-social svg { width: 17px; height: 17px; fill: #fff; }
@media (max-width: 860px) {
  .sc-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 480px) {
  .sc-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ===== CUSTOM FOOTER (sc-footer) je hlavný footer → skry natívny Odkazy riadok (duplicita) ===== */
/* sc-footer (4 stĺpce, variant A) je v combined Banner:Pätička. Natívny .footer = len copyright pruh. */
.footer .footer-links-icons { display: none !important; } /* skry Odkazy riadok — linky sú už v sc-footer Informácie */
.footer.is-white { background: #0A1830 !important; }       /* žiadne biele, zladiť s copyrightom */
.footer .footer-bottom { background: #0A1830 !important; }
/* copyright pozadie full-width: Apollo má `.footer-bottom-bg:before{left:calc(50% - 50vw - 10px)}` (≥768px) → ten -10px robil biely prúžok vpravo. Prebiť bez -10px. */
.footer .footer-bottom-bg:before { left: calc(50% - 50vw) !important; } /* farbu NEmeníme — ostáva Apollo var(--color-primary) */
.footer .footer-bottom,
.footer .footer-bottom a,
.footer .footer-bottom span { color: rgba(255,255,255,0.55) !important; }
/* kredity „Vytvoril Shoptet & APOLLO" sa ODSTRAŇUJÚ z DOM cez JS (selfcare_reorder.js.html), nie CSS — kvôli SEO */

/* ============================================================
   KATEGÓRIE (napr. /muzi/, /zeny/...) — zladenie s homepage.
   Apollo default = Roboto + ťažké tmavé UI (navy/čierne pilule, tmavá
   filter lišta). Prerábame na light/airy look: Inter, navy nadpisy,
   light chipy + coral akcent. Produktové karty už riadi .product.no-code.
   Overené naživo na /muzi/ (H1, triedenie, filter bar, hover).
   ============================================================ */
/* Nadpis kategórie + popis + breadcrumb → Inter, navy nadpis */
.category-title {
  font-family: 'Inter', sans-serif !important;
  color: #0F2447 !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
}
.category-perex, .category-perex p,
.category-description, .category-description p,
.breadcrumbs, .breadcrumbs a {
  font-family: 'Inter', sans-serif !important;
}

/* Triedenie (Najlacnejšie/Najdrahšie/...) — light chipy namiesto tmavých pilúl */
.listSorting, .listSorting__control { font-family: 'Inter', sans-serif !important; }
.listSorting__control {
  background: #FFFFFF !important;
  color: #0F2447 !important;
  border: 1px solid rgba(15,36,71,.16) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
  transition: border-color .2s ease, background .2s ease, color .2s ease !important;
}
.listSorting__control:hover { border-color: #FF6E5C !important; }   /* len okraj — text aktívneho ostáva biely */
.listSorting__control--current {
  background: #0F2447 !important;
  color: #FFFFFF !important;
  border-color: #0F2447 !important;
}
.listSorting__control--current:hover { border-color: #0F2447 !important; }

/* Filter unveil — z ťažkej tmavej navy lišty na light outlined button + coral hover */
.filters-unveil-button-wrapper a.unveil-button {
  background: #FFFFFF !important;
  color: #0F2447 !important;
  border: 1px solid rgba(15,36,71,.16) !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  transition: border-color .2s ease, color .2s ease !important;
}
.filters-unveil-button-wrapper a.unveil-button:hover { border-color: #FF6E5C !important; color: #FF6E5C !important; }

/* ============================================================
   KATEGÓRIE stránky (Muži / Ženy / Pre všetkých) — pridané 2026-07
   Predtým žilo ako <style> vložený do "Horný popis kategórie"
   v TinyMCE na všetkých 3 kategóriách — teraz jeden centrálny zdroj.
   ============================================================ */

/* Horný popis kategórie — typografia (2026-07-21: Cormorant serif → Montserrat,
   Q chcel jednotný font s .sc-pdp nadpismi typu „Ktorý produkt je pre teba?") */
.category-perex h2, .category-perex h3,
.category__secondDescription h2, .category__secondDescription h3 {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #0F2447;
}
.category-perex .sc-kicker {
  display: block;
  font-family: Roboto, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FF6E5C;
  margin: 0 0 8px 0;
}

/* Sidebar (Kategórie + Filtrovať) — transparentný moderný redizajn */
.box-categories, .box-filters {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.box-categories .pageElement__heading,
.box-filters > h4 {
  background: transparent !important;
  color: #0F2447 !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  font-size: 20px !important;
  padding: 0 0 12px 52px !important;
  border-bottom: 2px solid #FF6E5C;
  /* margin 0 — zrušiť theme -31px vľavo/vpravo, aby nadpis sedel s obsahom sekcie aj s KONTAKT */
  margin: 0 0 16px 0 !important;
  position: relative !important;
}
.box-categories .pageElement__heading::before,
.box-filters > h4::before {
  /* nahradiť theme icon-font glyph (@16px, apollo) za outline SVG @26px — zladené s KONTAKT chat ikonou */
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  border: none !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
}
/* Kategórie — outline list ikona */
.box-categories .pageElement__heading::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FF6E5C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><line x1="8.5" y1="4" x2="20" y2="4"/><line x1="8.5" y1="12" x2="20" y2="12"/><line x1="8.5" y1="20" x2="20" y2="20"/><line x1="4" y1="4" x2="4.01" y2="4"/><line x1="4" y1="12" x2="4.01" y2="12"/><line x1="4" y1="20" x2="4.01" y2="20"/></svg>') !important;
}
/* Filtrovať — outline funnel ikona */
.box-filters > h4::before {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FF6E5C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><polygon points="21 4 3 4 10.2 12.5 10.2 19.4 13.8 21 13.8 12.5 21 4"/></svg>') !important;
}
.box-categories { padding-top: 4px !important; }

/* Zarovnať obsah sidebaru s horným menu (nav „MUŽI" x=151) — zrušiť ĽAVÝ 30px padding
   boxov (Q 2026-07-20). Predtým bol obsah (Kategórie/Muži/Filtrovať) odsadený o +30px
   vpravo od menu; box.left už sedel na 151, len vnútorný padding to posúval. Pravý padding
   30px OSTÁVA (Q) — podčiarknutia končia na 441, ~30px medzera pred obsahom (471).
   KONTAKT box má vlastný padding nižšie (riadok „6px 30px 0 0"). */
.sidebar-left .box-categories,
.sidebar-left .box-filters {
  padding-left: 0 !important;
  padding-right: 30px !important;
}

/* Kategórie list — coral underline namiesto navy background bloku
   (musí mať rovnakú/vyššiu špecifickosť ako theme .categories-new-design #categories .topic.active>a) */
.categories-new-design #categories .topic {
  padding: 10px 0 !important;
  border-bottom: 1px solid rgba(15,36,71,0.1);
  background: transparent !important;
}
.categories-new-design #categories .topic:last-child { border-bottom: none; }
.categories-new-design #categories .topic > a, .categories-new-design #categories .topic > b {
  background: transparent !important;
  color: #0F2447 !important;
  font-weight: 500 !important;
  display: inline-block;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
  transition: color 0.25s ease;
}
.categories-new-design #categories .topic > a::after, .categories-new-design #categories .topic > b::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: #FF6E5C;
  transition: width 0.25s ease;
}
.categories-new-design #categories .topic > a:hover, .categories-new-design #categories .topic > b:hover {
  color: #FF6E5C !important;
  background: transparent !important;
}
.categories-new-design #categories .topic > a:hover::after, .categories-new-design #categories .topic > b:hover::after,
.categories-new-design #categories .topic.active > a::after, .categories-new-design #categories .topic.active > b::after { width: 100%; }
.categories-new-design #categories .topic.active > a, .categories-new-design #categories .topic.active > b {
  color: #FF6E5C !important;
  font-weight: 700 !important;
  background: transparent !important;
}
.categories-new-design #categories .topic.active > a:hover, .categories-new-design #categories .topic.active > b:hover {
  color: #FF6E5C !important;
  background: transparent !important;
}

/* Filtrovať box — nadpisy, popisky (CENA slider zámerne NEŠTÝLOVANÝ — stock look) */
.box-filters h4 { color: #0F2447 !important; font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; font-weight: 700 !important; }
.box-filters .slider-wrapper h4, .box-filters .filter-section-boolean h4 { font-size: 14px !important; border-bottom: none !important; padding: 0 !important; margin-bottom: 12px !important; }
.box-filters .filter-label { color: #0F2447 !important; }
.box-filters .slider-wrapper span { color: #0F2447 !important; font-weight: 600 !important; }
.filter-section-boolean input[type="checkbox"] { accent-color: #FF6E5C; }

/* ------------------------------------------------------------
   Kategórie — vyladenie so štýlom homepage (2026-07):
   1) skryť duplicitný bestseller pás navrchu (rovnaké SKU ako mriežka)
   2) KONTAKT box → priehľadný, nadpis zladený s Kategórie/Filtrovať (+chat ikona)
   3) sort pilulky → brand (navy aktívna / navy hairline neaktívne, plne zaoblené)
   ------------------------------------------------------------ */

/* 1) Skryť „Najpredávanejšie" pás na začiatku kategórie */
.category-top .products-top-wrapper { display: none !important; }

/* 2) KONTAKT sidebar box → priehľadný, zladený so zvyškom sidebaru */
.sidebar-left .box-common:has(> .box-contact) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 6px 30px 0 0 !important; /* ľavý 0 — obsah zarovnaný s menu (x=151); pravý 30px pre medzeru pred obsahom */
}
.sidebar-left .box-contact .pageElement__heading {
  position: relative !important;
  background: transparent !important;
  color: #0F2447 !important;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-weight: 800 !important;
  font-size: 20px !important;
  line-height: 1.1 !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  padding: 0 0 12px 52px !important;
  margin: 0 0 16px 0 !important;
  border-bottom: 2px solid #FF6E5C !important;
}
.sidebar-left .box-contact .pageElement__heading::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  border: none !important;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23FF6E5C" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>') no-repeat center center !important;
  background-size: contain !important;
}

/* 3) Sort — tiché textové taby (nie ťažké pilulky), aby nekradli focus od „DO KOŠÍKA" CTA.
   Aktívny = coral text + coral podčiarknutie (rovnaký „aktívny" motív ako horné menu a aktívna kategória). */
.category-header .listSorting__controls { gap: 28px !important; align-items: center !important; }
.category-header .listSorting__control {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
  margin: 0 !important;
  color: rgba(15, 36, 71, .42) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .09em !important;
  position: relative !important;
  transition: color .2s ease !important;
}
.category-header .listSorting__control::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 2px !important;
  background: #FF6E5C !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform .22s ease !important;
}
.category-header .listSorting__control:hover { color: #FF6E5C !important; }
.category-header .listSorting__control:hover::after { transform: scaleX(1) !important; }
.category-header .listSorting__control--current { color: #FF6E5C !important; }
.category-header .listSorting__control--current::after { transform: scaleX(1) !important; }

/* Produktové stránky (PDP) — pôvodné Cormorant pravidlo pre .basic-description h2/h3 ZRUŠENÉ
   (2026-07-16, Q chce v PDP sekciách sans ako v preview). Font rieši .sc-pdp blok nižšie. */

/* ==========================================================
   selfcare — PDP obsahové sekcie (.sc-pdp)
   Na merge do selfcare.css pri deployi (v8).
   Všetko scopnuté pod .sc-pdp, aby sa nebilo s Apollo témou.
   ========================================================== */

.sc-pdp {
  --sc-navy: #0F2447;
  --sc-coral: #FF6E5C;
  --sc-cream: #FAF8F4;
  --sc-line: rgba(15, 36, 71, .08);
  /* plná šírka containeru (Q 2026-07-15: 960px pôsobilo stlačene) */
  max-width: none;
  margin: 0 auto;
  padding: 8px 0 24px 0;
  color: var(--sc-navy);
  text-align: left;
  /* font ako v preview (Q 2026-07-16) — Montserrat sa importuje v Hlavičke */
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.sc-pdp h2, .sc-pdp h3, .sc-pdp h4, .sc-pdp p, .sc-pdp li, .sc-pdp summary, .sc-pdp span {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* PDP tab s popisom: bez theme rámu/dividerov okolo obsahu */
.tab-content .tab-pane:has(.sc-pdp) { border: none !important; box-shadow: none !important; }
/* „Popis produktu" hlavička tabu — skrytá (obsah má vlastný hero nadpis); jediný tab na PDP.
   Poistka nižšie drží pane vždy rozbalený (mobil accordion). */
.shp-tab-link, ul.shp-tabs.p-detail-tabs { display: none !important; }
.tab-content .tab-pane:has(.sc-pdp) { display: block !important; opacity: 1 !important; }
.sc-pdp section { margin: 56px 0 0 0; }
.sc-pdp p { margin: 0; }

/* --- reveal animácie (sc-pdp.js pridáva .sc-in) --- */
.sc-pdp .sc-rev {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .8, .3, 1);
}
.sc-pdp .sc-rev.sc-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sc-pdp .sc-rev { opacity: 1; transform: none; transition: none; }
}

/* --- typografia --- */
.sc-pdp .sc-pdp-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sc-coral);
  margin: 0 0 14px 0;
}
.sc-pdp .sc-pdp-display {
  font-size: clamp(36px, 6vw, 58px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
  color: var(--sc-navy);
  margin: 0 0 18px 0;
}
/* akcentové slovo plnou koralovou — text-stroke obrys robil v Montserrate artefakty
   (prekrývajúce sa cesty glyfov → vnútorné švy v Ž/E/M), Q 2026-07-16 */
.sc-pdp .sc-pdp-display em {
  font-style: normal;
  color: var(--sc-coral);
  -webkit-text-stroke: 0;
}
.sc-pdp .sc-pdp-h3 {
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--sc-navy);
  margin: 0 0 12px 0;
}
.sc-pdp .sc-pdp-lead {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(15, 36, 71, .78);
  margin: 0 0 28px 0;
}
.sc-pdp .sc-pdp-note {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(15, 36, 71, .65);
  margin: 0 0 26px 0;
}

/* --- USP pills --- */
.sc-pdp .sc-pdp-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
.sc-pdp .sc-pdp-pills li {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sc-navy);
  background: #fff;
  border: 1px solid var(--sc-line);
  border-radius: 999px;
  padding: 9px 16px;
  margin: 0;
}
.sc-pdp .sc-pdp-pills li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sc-coral);
  margin-right: 8px;
  vertical-align: 2px;
}

/* --- obrázky sekcií --- */
.sc-pdp .sc-pdp-img {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(15, 36, 71, .05);
}
.sc-pdp .sc-pdp-img img {
  display: block;
  width: 100%;
  height: auto;
}
.sc-pdp .sc-pdp-img--dose { margin-top: 30px; }

/* --- spec karty (zloženie) --- */
.sc-pdp .sc-spec-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.sc-pdp .sc-spec-card {
  background: #fff;
  border: 1px solid var(--sc-line);
  border-radius: 18px;
  padding: 26px 24px 22px 24px;
  position: relative;
  transition: transform .35s ease, box-shadow .35s ease;
}
.sc-pdp .sc-spec-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 24px;
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--sc-coral);
}
.sc-pdp .sc-spec-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -18px rgba(15, 36, 71, .28);
}
.sc-pdp .sc-spec-num {
  font-size: 42px;
  font-weight: 800;
  line-height: 1;
  color: var(--sc-navy);
  letter-spacing: -.02em;
  margin: 0 0 10px 0;
  font-variant-numeric: tabular-nums;
}
.sc-pdp .sc-spec-unit {
  font-size: 15px;
  font-weight: 700;
  color: var(--sc-coral);
  margin-left: 4px;
}
.sc-pdp .sc-spec-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 6px 0;
}
.sc-pdp .sc-spec-std {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(15, 36, 71, .58);
}
.sc-pdp .sc-spec-role {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(15, 36, 71, .78);
  margin: 0 0 8px 0;
}
.sc-pdp .sc-spec-compare {
  font-size: 12px;
  line-height: 1.5;
  font-style: italic;
  color: rgba(15, 36, 71, .45);
  margin: 8px 0 0 0;
}
.sc-pdp .sc-spec-foot {
  font-size: 12.5px;
  color: rgba(15, 36, 71, .5);
  margin: 18px 0 0 0;
}

/* --- manifesto band --- */
.sc-pdp .sc-pdp-manifest {
  background: var(--sc-navy);
  border-radius: 24px;
  padding: clamp(36px, 6vw, 64px);
  color: var(--sc-cream);
}
.sc-pdp .sc-pdp-manifest-h {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--sc-cream);
  margin: 0 0 34px 0;
}
.sc-pdp .sc-pdp-manifest-h em {
  font-style: normal;
  color: var(--sc-coral);
}
.sc-pdp .sc-pdp-manifest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.sc-pdp .sc-pdp-manifest-grid > div {
  border-top: 1px solid rgba(250, 248, 244, .18);
  padding-top: 18px;
}
.sc-pdp .sc-pdp-manifest-grid h4 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--sc-cream);
  margin: 0 0 8px 0;
}
.sc-pdp .sc-pdp-manifest-grid p {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(250, 248, 244, .72);
}

/* --- pre koho --- */
.sc-pdp .sc-who-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.sc-pdp .sc-who-card {
  background: #fff;
  border: 1px solid var(--sc-line);
  border-radius: 18px;
  padding: 24px;
}
.sc-pdp .sc-who-card h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--sc-navy);
  margin: 0 0 8px 0;
}
.sc-pdp .sc-who-card p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(15, 36, 71, .65);
}
.sc-pdp .sc-who-card--not {
  background: transparent;
  border: 1px dashed rgba(15, 36, 71, .28);
}
.sc-pdp .sc-who-card--not h4 { color: var(--sc-coral); }

/* --- dávkovanie --- */
.sc-pdp .sc-dose-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0 0 0;
  padding: 0;
  counter-reset: none;
}
.sc-pdp .sc-dose-steps li {
  background: #fff;
  border: 1px solid var(--sc-line);
  border-radius: 18px;
  padding: 24px;
  margin: 0;
}
.sc-pdp .sc-dose-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--sc-coral);
  color: var(--sc-coral);
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
}
.sc-pdp .sc-dose-steps h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--sc-navy);
  margin: 0 0 6px 0;
}
.sc-pdp .sc-dose-steps p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(15, 36, 71, .65);
}
.sc-pdp .sc-dose-note {
  margin: 26px 0 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--sc-coral);
  background: rgba(255, 110, 92, .07);
  border-radius: 0 14px 14px 0;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(15, 36, 71, .78);
}

/* --- FAQ --- */
.sc-pdp .sc-pdp-faq details {
  border-bottom: 1px solid var(--sc-line);
  padding: 0;
}
.sc-pdp .sc-pdp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 2px;
  font-size: 16px;
  font-weight: 700;
  color: var(--sc-navy);
}
.sc-pdp .sc-pdp-faq summary::-webkit-details-marker { display: none; }
.sc-pdp .sc-pdp-faq summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 22px;
  font-weight: 400;
  color: var(--sc-coral);
  transition: transform .3s ease;
  line-height: 1;
}
.sc-pdp .sc-pdp-faq details[open] summary::after { transform: rotate(45deg); }
/* plynulé otváranie/zatváranie odpovede (native <details> animácia cez ::details-content;
   prehliadače bez podpory sa otvoria skokom ako doteraz — progresívne vylepšenie) */
.sc-pdp .sc-pdp-faq details { interpolate-size: allow-keywords; }
.sc-pdp .sc-pdp-faq details::details-content {
  opacity: 0;
  block-size: 0;
  overflow-y: clip;
  transition: content-visibility .35s allow-discrete, opacity .3s ease, block-size .35s cubic-bezier(.22, .8, .3, 1);
}
.sc-pdp .sc-pdp-faq details[open]::details-content {
  opacity: 1;
  block-size: auto;
}
@media (prefers-reduced-motion: reduce) {
  .sc-pdp .sc-pdp-faq details::details-content { transition: none; }
}
.sc-pdp .sc-pdp-faq .sc-faq-a {
  padding: 0 2px 20px 2px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(15, 36, 71, .68);
}

/* --- responzivita --- */
@media (max-width: 860px) {
  .sc-pdp .sc-spec-grid { grid-template-columns: repeat(2, 1fr); }
  .sc-pdp .sc-pdp-manifest-grid { grid-template-columns: 1fr; gap: 18px; }
  .sc-pdp .sc-dose-steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sc-pdp section { margin-top: 42px; }
  .sc-pdp .sc-spec-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .sc-pdp .sc-spec-card { padding: 20px 16px 16px 16px; }
  .sc-pdp .sc-spec-num { font-size: 32px; }
  .sc-pdp .sc-who-grid { grid-template-columns: 1fr; }
}

/* ===== Cenový slider vo filtri — jemnejší (Q 2026-07-15: plná navy „kričala") =====
   POZOR: geometriu témy nemeniť! .ui-slider box je 11px vysoký ale NEVIDITEĽNÝ (transparent);
   viditeľná je len 2px .ui-slider-range linka + 24px úchyty. Zafarbenie boxu = škaredá pilulka. */
.sidebar-left .slider-wrapper .ui-slider { background: transparent !important; }
.sidebar-left .slider-wrapper .ui-slider .ui-slider-range { background: rgba(15, 36, 71, .30) !important; }
.sidebar-left .slider-wrapper .ui-slider .ui-slider-handle {
  background: #fff !important;
  border: 2px solid rgba(15, 36, 71, .35) !important;
  box-shadow: none !important;
}
/* theme kreslí do úchytu biely 20px ::after kruh (pôvodný ring efekt) — prekrýval náš okraj
   a „odhrýzal" vrch kruhu → preč s ním, prstenec robí border vyššie */
.sidebar-left .slider-wrapper .ui-slider .ui-slider-handle::after { display: none !important; }
.sidebar-left .slider-wrapper .ui-slider .ui-slider-handle:hover,
.sidebar-left .slider-wrapper .ui-slider .ui-slider-handle:focus { border-color: #FF6E5C !important; }
.sidebar-left .slider-wrapper .slider-header .from,
.sidebar-left .slider-wrapper .slider-header .to { color: rgba(15, 36, 71, .55) !important; font-weight: 600 !important; }
/* čísla sú vo vnorenom spane — prebíja všeobecné .box-filters .slider-wrapper span (navy) vyššie */
.box-filters .slider-wrapper .slider-header .from span,
.box-filters .slider-wrapper .slider-header .to span { color: rgba(15, 36, 71, .55) !important; }

/* ===== Globálne mikro-overridy (kanonicky tu; v Pätičke boli dočasne) ===== */
.sc-faq { background: #ffffff !important; }           /* FAQ na bielej (banner má inline #FAF8F4) */
.benefitBanner { border-top: none !important; }        /* USP pás bez theme dividera */

/* Jednotný nadpisový font pre CELÝ web (Q 2026-07-21): theme dávala nadpisom Cormorant
   serif → všetky nadpisy teraz Montserrat ako .sc-pdp sekcie („Ktorý produkt je pre teba?").
   Zámerné serifové AKCENTY (kurzívne `em` v headlinoch — newsletter/homepage) ostávajú:
   ich vlastné `em { font-family: Cormorant }` pravidlá tento override na elemente nadpisu
   prebijú, lebo cielia priamo na `em`. */
h1, h2, h3, h4, .pageElement__heading {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ===== KATEGÓRIE — obsahové sekcie pod gridom (.sc-cat, recykluje .sc-pdp štýly) ===== */
.sc-pdp .sc-goal-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* 3-stĺpcový variant pre kategórie s 3+ produktmi (Ženy 5×, Pre všetkých 3×) — Q 2026-07-21 */
.sc-pdp .sc-goal-grid.sc-goal-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sc-pdp .sc-goal-card {
  display: block;
  background: #fff;
  border: 1px solid var(--sc-line);
  border-radius: 18px;
  padding: 28px;
  cursor: pointer; /* celá karta klikateľná cez sc-pdp.js delegovaný click (viď JS) */
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.sc-pdp .sc-goal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px -18px rgba(15, 36, 71, .28);
  border-color: rgba(255, 110, 92, .5);
}
.sc-pdp .sc-goal-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sc-coral);
  margin: 0 0 10px 0;
}
.sc-pdp .sc-goal-card h4 {
  font-size: 22px;
  font-weight: 800;
  color: var(--sc-navy);
  margin: 0 0 8px 0;
}
.sc-pdp .sc-goal-card p:not(.sc-goal-kicker) {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(15, 36, 71, .65);
  margin: 0 0 16px 0;
}
.sc-pdp .sc-goal-cta {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sc-coral);
  text-decoration: none;
}
.sc-pdp .sc-goal-card:hover .sc-goal-cta { text-decoration: underline; }
.sc-pdp .sc-cat-seo-cols { display: grid; grid-template-columns: 1fr; gap: 20px; }
.sc-pdp .sc-cat-seo-cols p { font-size: 15px; line-height: 1.75; color: rgba(15, 36, 71, .7); }
@media (max-width: 860px) {
  .sc-pdp .sc-goal-grid, .sc-pdp .sc-goal-grid.sc-goal-grid--3 { grid-template-columns: 1fr; }
}
/* ============================================================
   MOBILE POLISH (v20, 2026-07-23) — Q feedback z iPhone:
   1) menšia medzera banner→Tri rady + jednotný rytmus sekcií
   2) bestseller karty rovnako vysoké (2-riadkový podtitul kartu naťahoval)
   3) mobilné menu redesign; biela ikona zatvorenia (staršia .toggle-window
      rule ju robila navy na navy pozadí = neviditeľná)
   Scope: body.mobile (server-side UA trieda) — desktop bez zmeny.
   ============================================================ */

/* --- 1. medzera carousel → Tri rady: bolo 50px (#carousel mb) + 64px (.welcome pt) --- */
body.mobile.in-index #carousel { margin-bottom: 0 !important; }
body.mobile.type-index .welcome { padding-top: 44px !important; padding-bottom: 44px !important; }

/* jednotný 44px rytmus medzi sekciami homepage */
body.mobile.in-index .benefitBanner { margin-top: 44px !important; }
body.mobile.in-index #content-wrapper main > .banners-content { margin-top: 44px !important; margin-bottom: 44px !important; }
body.mobile .sc-faq { padding-top: 48px !important; padding-bottom: 48px !important; }

/* --- 2. produktové karty: podtitul má vždy 2-riadkový box → ceny aj CTA v jednej línii --- */
body.mobile .products .product .p-desc { min-height: 40px; }

/* --- 3. mobilné menu — panel --- */
body.mobile .navigation-in.menu { display: flex !important; flex-direction: column !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
body.mobile .navigation-in.menu > .menu-level-1 { padding: 4px 20px 6px !important; }
body.mobile .navigation-in.menu .menu-level-1 > li { border-bottom: 1px solid #ECEEF3 !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
body.mobile .navigation-in.menu .menu-level-1 > li:last-child { border-bottom: none !important; }
body.mobile .navigation-in.menu .menu-level-1 > li > a {
  padding: 18px 0 !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  color: #0F2447 !important;
}
/* desktopové coral podčiarknutie (animovaný ::after) nemá v paneli čo robiť */
body.mobile .navigation-in.menu .menu-level-1 > li > a::after { display: none !important; }
body.mobile .navigation-in.menu .menu-level-1 > li > a.active { color: #FF6E5C !important; }

/* spodný servisný blok vyplní panel až dole (žiadna biela diera pod ním) */
body.mobile .navigation-in.menu .navigation-in-bottom {
  flex: 1 0 auto !important;
  margin-top: 10px !important;
  background: #F5F6F8 !important;
  padding: 26px 20px 40px !important;
  text-align: left !important;
}
/* POZOR: .top-navigation-contacts existuje aj v headri (na mobile skrytý) —
   všetko scopovať na .navigation-in-bottom, inak sa header instancia odkryje cez logo */
body.mobile .navigation-in-bottom .top-navigation-contacts { display: block !important; padding: 0 !important; text-align: left !important; }
body.mobile .navigation-in-bottom .top-navigation-contacts strong {
  display: block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: #7C7E8F !important;
  margin: 0 0 8px !important;
}
body.mobile .navigation-in-bottom .top-navigation-contacts a {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important; /* Apollo centruje */
  gap: 8px !important;
  padding: 7px 0 !important;
  margin: 0 !important;
}
body.mobile .navigation-in-bottom .top-navigation-contacts a span { font-size: 15px !important; font-weight: 600 !important; color: #0F2447 !important; }
body.mobile .navigation-in-bottom .top-navigation-bar-menu {
  margin: 18px 0 0 !important;
  padding: 12px 0 0 !important;
  border-top: 1px solid #E3E6EC !important;
  text-align: left !important;
}
body.mobile .navigation-in-bottom .top-navigation-bar-menu li { display: block !important; margin-left: 0 !important; }
body.mobile .navigation-in-bottom .top-navigation-bar-menu li a {
  display: block !important;
  padding: 10px 0 !important;
  font-size: 14px !important;
  color: #5A6478 !important;
}

/* trigger v otvorenom stave: Apollo dáva navy bg — ikona a „Menu" label biele
   (prebíja všeobecnú .toggle-window navy rule vyššie v súbore) */
body.navigation-window-visible a.toggle-window[data-target="navigation"],
body.navigation-window-visible a.toggle-window[data-target="navigation"] *,
body.navigation-window-visible a.toggle-window[data-target="navigation"]::before,
body.navigation-window-visible a.toggle-window[data-target="navigation"]::after {
  color: #ffffff !important;
}

/* ============================================================
   TABLET / ÚZKE OKNO POLISH (v21, 2026-07-23)
   Shoptet dáva VŠETKÝM tabletom (iPad, iPad mini, Android tablet)
   desktop šablónu — ale Apollo pod 768px zbalí menu do rovnakého
   slide-in panela ako mobil. v20 menu pravidlá boli scopované na
   body.mobile → panel na úzkych desktop/tablet oknách ostal starý.
   Tu tie isté pravidlá pre body.desktop pod breakpointom ≤767px
   (overené: 768px = horizontálne menu, 767px = hamburger+panel).
   ============================================================ */
@media (max-width: 767.98px) {
  body.desktop .navigation-in.menu { display: flex !important; flex-direction: column !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
  body.desktop .navigation-in.menu > .menu-level-1 { padding: 4px 20px 6px !important; }
  body.desktop .navigation-in.menu .menu-level-1 > li { border-bottom: 1px solid #ECEEF3 !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; }
  body.desktop .navigation-in.menu .menu-level-1 > li:last-child { border-bottom: none !important; }
  body.desktop .navigation-in.menu .menu-level-1 > li > a {
    padding: 18px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color: #0F2447 !important;
  }
  body.desktop .navigation-in.menu .menu-level-1 > li > a::after { display: none !important; }
  body.desktop .navigation-in.menu .menu-level-1 > li > a.active { color: #FF6E5C !important; }
  body.desktop .navigation-in.menu .navigation-in-bottom {
    flex: 1 0 auto !important;
    margin-top: 10px !important;
    background: #F5F6F8 !important;
    padding: 26px 20px 40px !important;
    text-align: left !important;
  }
  body.desktop .navigation-in-bottom .top-navigation-contacts { display: block !important; padding: 0 !important; text-align: left !important; }
  body.desktop .navigation-in-bottom .top-navigation-contacts strong {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .1em !important;
    text-transform: uppercase !important;
    color: #7C7E8F !important;
    margin: 0 0 8px !important;
  }
  body.desktop .navigation-in-bottom .top-navigation-contacts a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 7px 0 !important;
    margin: 0 !important;
  }
  body.desktop .navigation-in-bottom .top-navigation-contacts a span { font-size: 15px !important; font-weight: 600 !important; color: #0F2447 !important; }
  body.desktop .navigation-in-bottom .top-navigation-bar-menu {
    margin: 18px 0 0 !important;
    padding: 12px 0 0 !important;
    border-top: 1px solid #E3E6EC !important;
    text-align: left !important;
  }
  body.desktop .navigation-in-bottom .top-navigation-bar-menu li { display: block !important; margin-left: 0 !important; }
  body.desktop .navigation-in-bottom .top-navigation-bar-menu li a {
    display: block !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    color: #5A6478 !important;
  }
  /* karty: rovnaké zarovnanie CTA aj v úzkom desktop/tablet gride */
  body.desktop .products .product .p-desc { min-height: 40px; }
}

/* ============================================================
   PDP MOBILE POLISH (v22, 2026-07-23) — Q feedback z iPhone:
   1) sociálny riadok: X/FB share preč, OPÝTAŤ SA + STRÁŽIŤ ako
      dve čisté outline pilulky
   2) USP 2×2 grid symetrický (align center + rôzne výšky titulkov
      = rozhádzané ikony; platí aj pre homepage — rovnaký pás)
   3) „Popis produktu" box: bez navy rámu/radiusu (Safari ho kreslí
      napriek :has() fixu — prebíjame všetkých kandidátov), čistá
      sekcia s hairline, normalizovaný vnútorný padding
   ============================================================ */

/* --- 1. sociálny riadok --- */
body.mobile .social-buttons-wrapper .social-buttons { display: none !important; }
body.mobile .social-buttons-wrapper { margin: 14px 0 0 !important; padding: 0 !important; border: 0 !important; }
body.mobile .social-buttons-wrapper .link-icons {
  margin: 0 !important;
  display: flex !important;
  gap: 10px !important;
}
body.mobile .social-buttons-wrapper .link-icons .link-icon.chat,
body.mobile .social-buttons-wrapper .link-icons .link-icon.watchdog {
  flex: 1 1 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: 1px solid #E3E6EC !important;
  border-radius: 999px !important;
  padding: 12px 10px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  color: #0F2447 !important;
  text-decoration: none !important;
  background: #fff !important;
}
body.mobile .social-buttons-wrapper .link-icons .link-icon.chat:hover,
body.mobile .social-buttons-wrapper .link-icons .link-icon.watchdog:hover { border-color: #FF6E5C !important; color: #FF6E5C !important; }
body.mobile .social-buttons-wrapper .link-icons .link-icon.chat span,
body.mobile .social-buttons-wrapper .link-icons .link-icon.watchdog span { text-decoration: none !important; border-bottom: 0 !important; }
/* medzera k USP pásu = 44: sused má margin 30 → collapse, preto priamo 44 (max vyhráva) */
body.mobile .benefitBanner.position--benefitProduct { margin-top: 44px !important; }

/* --- 2. USP pás: symetrická 2×2 mriežka na úzkych šírkach --- */
@media (max-width: 680px) {
  .benefitBanner { align-items: flex-start !important; }
  .benefitBanner__title { min-height: 36px !important; } /* 2×18px riadok — 1-riadkové titulky nezmenšujú bunku */
}

/* --- 3. Popis produktu: preč s rámom, čistá sekcia --- */
body.mobile #tab-content,
body.mobile #tab-content .tab-pane,
body.mobile .shp-tabs-wrapper,
body.mobile .shp-tabs-holder,
body.mobile .basic-description,
body.mobile .detail-tab-item {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  outline: none !important;
  background: transparent !important;
}
body.mobile #tab-content .tab-pane { background: #fff !important; }
body.mobile .detail-tab-item {
  border-bottom: 1px solid #ECEEF3 !important; /* deliaca linka pod nadpisom sekcie */
  padding: 20px 0 16px !important;
  margin: 0 !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  color: #0F2447 !important;
}
/* vnútro: menšia mŕtva medzera nadpis → pilulky */
body.mobile #tab-content .basic-description { padding-top: 0 !important; margin-top: 0 !important; }
body.mobile #tab-content .detail-tab-content { padding-top: 0 !important; margin-top: 0 !important; }
body.mobile #tab-content .sc-pdp { padding-top: 24px !important; }
/* rytmus pod boxom (k newsletteru) */
body.mobile .shp-tabs-wrapper { margin-bottom: 44px !important; }
body.mobile #tab-content .tab-pane { margin-bottom: 0 !important; }

/* --- tablet / úzke desktop okno: to isté pre body.desktop pod 768px --- */
@media (max-width: 767.98px) {
  body.desktop .social-buttons-wrapper .social-buttons { display: none !important; }
  body.desktop .social-buttons-wrapper { margin: 14px 0 0 !important; padding: 0 !important; border: 0 !important; }
  body.desktop .social-buttons-wrapper .link-icons { margin: 0 !important; display: flex !important; gap: 10px !important; }
  body.desktop .social-buttons-wrapper .link-icons .link-icon.chat,
  body.desktop .social-buttons-wrapper .link-icons .link-icon.watchdog {
    flex: 1 1 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #E3E6EC !important;
    border-radius: 999px !important;
    padding: 12px 10px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: .04em !important;
    color: #0F2447 !important;
    text-decoration: none !important;
    background: #fff !important;
  }
  body.desktop #tab-content,
  body.desktop #tab-content .tab-pane,
  body.desktop .shp-tabs-wrapper,
  body.desktop .shp-tabs-holder,
  body.desktop .basic-description,
  body.desktop .detail-tab-item {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    outline: none !important;
    background: transparent !important;
  }
  body.desktop #tab-content .tab-pane { background: #fff !important; }
  body.desktop .detail-tab-item {
    border-bottom: 1px solid #ECEEF3 !important;
    padding: 20px 0 16px !important;
    margin: 0 !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    color: #0F2447 !important;
  }
  body.desktop .social-buttons-wrapper .link-icons .link-icon.chat span,
  body.desktop .social-buttons-wrapper .link-icons .link-icon.watchdog span { text-decoration: none !important; border-bottom: 0 !important; }
  body.desktop #tab-content .basic-description { padding-top: 0 !important; margin-top: 0 !important; }
  body.desktop #tab-content .detail-tab-content { padding-top: 0 !important; margin-top: 0 !important; }
  body.desktop #tab-content .sc-pdp { padding-top: 24px !important; }
  body.desktop .shp-tabs-wrapper { margin-bottom: 44px !important; }
}

/* ============================================================
   MOBILE POLISH 3 (v23, 2026-07-23) — Q feedback z iPhone:
   1) kategórie: „Do košíka" pretekalo z pillu na úzkych 2-stĺpcových
      kartách (biely text mimo čierneho = nečitateľné)
   2) welcome blok (HIM·HER·UNI / Tri rady) na 40px vs 20px mriežka
      ostatných sekcií — kontajner nad .welcome drží 40, sťahujeme
      negatívnym marginom; USP pás z 24 na 20
   3) homepage: 50px biele miesto medzi navy footer bannerom a navy
      copyright pásom (#content-wrapper margin-bottom, len mobil)
   ============================================================ */

/* --- 1. Do košíka: kompaktný obsah, nikdy nepretečie --- */
body.mobile .product.no-code .product-btn { padding: 12px 14px 18px !important; }
body.mobile .product.no-code .btn-cart,
body.mobile .product.no-code .add-to-cart-button {
  font-size: 11px !important;
  letter-spacing: .03em !important;
  gap: 6px !important;
  padding: 12px 8px !important;
  white-space: nowrap !important;
  min-width: 0 !important;
}
body.mobile .product.no-code .btn-cart::before,
body.mobile .product.no-code .btn-cart::after,
body.mobile .product.no-code .add-to-cart-button::before,
body.mobile .product.no-code .add-to-cart-button::after { font-size: 16px !important; flex: 0 0 auto !important; }

/* --- 2. welcome na 20px mriežku --- */
body.mobile .welcome-wrapper .welcome { margin-left: -20px !important; margin-right: -20px !important; }
@media (max-width: 680px) {
  .benefitBanner { padding-left: 20px !important; padding-right: 20px !important; }
}

/* --- 3. homepage biela diera pod footer bannerom --- */
body.mobile.in-index #content-wrapper { margin-bottom: 0 !important; }

/* --- tablet (desktop šablóna ≤767px): rovnaký button fix --- */
@media (max-width: 767.98px) {
  body.desktop .product.no-code .product-btn { padding: 12px 14px 18px !important; }
  body.desktop .product.no-code .btn-cart,
  body.desktop .product.no-code .add-to-cart-button {
    font-size: 11px !important;
    letter-spacing: .03em !important;
    gap: 6px !important;
    padding: 12px 8px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
  }
  body.desktop .product.no-code .btn-cart::before,
  body.desktop .product.no-code .btn-cart::after,
  body.desktop .product.no-code .add-to-cart-button::before,
  body.desktop .product.no-code .add-to-cart-button::after { font-size: 16px !important; flex: 0 0 auto !important; }
}

/* ============================================================
   MOBILE POLISH 4 (v24, 2026-07-23) — Q feedback:
   1) Safari biele pozadie pri overscrolle pod navy footrom
      (pod footrom NIE JE element — je to rubber-band ukazujúci html
      bg) → dvojfarebný gradient: hore biela, dole navy
   2) Tri rady dlaždice full width — .container vo welcome má 20px
      padding a .welcome max-width:100% blokoval negatívny margin
      z v23 → padding preč, margin fix zrušený
   3) filter (Otvoriť/Zavrieť) — navy panel s čiernym textom
      nečitateľný → biela karta ako ostatné inputy
   ============================================================ */

/* --- 1. overscroll: hore biela, dole navy (farba footera) --- */
html { background: linear-gradient(to bottom, #ffffff 50%, #0A1830 50%) !important; }

/* --- 2. dlaždice na plnú šírku obsahu --- */
body.mobile .content-wrapper.welcome-wrapper .container { padding-left: 0 !important; padding-right: 0 !important; }
body.mobile .welcome-wrapper .welcome { margin-left: 0 !important; margin-right: 0 !important; } /* ruší v23 negatívny margin */

/* --- 3. mobilný filter panel: biela karta, navy text --- */
body.mobile #filters {
  background: #fff !important;
  border: 1px solid rgba(15, 36, 71, .16) !important;
  border-radius: 12px !important;
  margin-top: 10px !important;
  overflow: hidden !important;
}
body.mobile #filters .slider-wrapper,
body.mobile #filters .filter-section-boolean,
body.mobile #filters [class*="filter-section"] {
  background: #fff !important;
  padding: 0 20px !important;
}
body.mobile #filters h4,
body.mobile #filters h4 span { color: #0F2447 !important; font-weight: 700 !important; }
body.mobile #filters h4 { border-bottom: none !important; padding: 18px 30px 18px 0 !important; margin: 0 !important; }
body.mobile #filters > div + div { border-top: 1px solid #ECEEF3 !important; }
body.mobile #filters .filter-sections { padding: 0 !important; }
body.mobile #filters label { color: #3F4C63 !important; }
body.mobile #filters .slider-header .from,
body.mobile #filters .slider-header .to,
body.mobile #filters .slider-header span { color: rgba(15, 36, 71, .6) !important; }

/* --- tablet (desktop šablóna ≤767px): rovnaký filter fix --- */
@media (max-width: 767.98px) {
  body.desktop #filters {
    background: #fff !important;
    border: 1px solid rgba(15, 36, 71, .16) !important;
    border-radius: 12px !important;
    margin-top: 10px !important;
    overflow: hidden !important;
  }
  body.desktop #filters .slider-wrapper,
  body.desktop #filters .filter-section-boolean,
  body.desktop #filters [class*="filter-section"] {
    background: #fff !important;
    padding: 0 20px !important;
  }
  body.desktop #filters h4,
  body.desktop #filters h4 span { color: #0F2447 !important; font-weight: 700 !important; }
  body.desktop #filters h4 { border-bottom: none !important; padding: 18px 30px 18px 0 !important; margin: 0 !important; }
  body.desktop #filters > div + div { border-top: 1px solid #ECEEF3 !important; }
  body.desktop #filters .filter-sections { padding: 0 !important; }
  body.desktop #filters label { color: #3F4C63 !important; }
}

/* ============================================================
   MOBILE POLISH 5 (v25, 2026-07-23) — Q feedback:
   1) ALPHA-T/HARMONY spec grid pretekal z viewportu (408/404 vs 393):
      1fr = minmax(auto,1fr) a jednoslovné názvy zložiek
      („Hydroxypropylmetylcelulóza") tlačia min-content stĺpca na 218px
      → minmax(0,1fr) + overflow-wrap na textoch kariet
   2) kategórie: dlhý názov produktu (ELEKTROLYTY) orezaný na iOS
      → menší font názvu na mobile
   ============================================================ */

/* --- 1. spec grid: stĺpce sa smú zmenšiť, dlhé slová sa lámu --- */
.sc-pdp .sc-spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sc-pdp .sc-spec-card { min-width: 0; }
.sc-pdp .sc-spec-card p { overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .sc-pdp .sc-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .sc-pdp .sc-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 2. názvy produktových kariet: menší font, nič sa neoreže --- */
body.mobile .products .product .name,
body.mobile .products .product .name a {
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: -.01em !important;
}
@media (max-width: 767.98px) {
  body.desktop .products .product .name,
  body.desktop .products .product .name a {
    font-size: 16px !important;
    line-height: 1.3 !important;
    letter-spacing: -.01em !important;
  }
}

/* ============================================================
   KOŠÍK / PRIHLÁSENIE / 404 POLISH (v26, 2026-07-23) — Q:
   „uprav môj košík a prihlásenie/môj profil nech zodpovedá
   nášmu štýlu". Téma dáva navy (#0F2447) ako POZADIE boxov
   (.cart-inner.cart-empty, .cart-header__contact .cart-content,
   .content-inner na 404), text ostáva tmavý → neviditeľný.
   Riešenie: biele karty s hairline #E3E6EC, navy text, coral
   akcenty — rovnaký jazyk ako zvyšok webu.
   ============================================================ */

/* --- 1. help box „Potrebujete pomôcť?" (košík + všetky kroky) --- */
.cart-header__contact .cart-content {
  background: #ffffff !important;
  border: 1px solid #E3E6EC !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
.cart-header__contact .cart-content .h4,
.cart-header__contact .cart-content h2 {
  color: #0F2447 !important;
}
.cart-header__contact .contact-box,
.cart-header__contact .contact-box li,
.cart-header__contact .contact-box span {
  color: #0F2447 !important;
}
.cart-header__contact .contact-box .tel a {
  color: #FF6E5C !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* --- 2. prázdny košík: obrovský navy blok → čistá biela karta --- */
.cart-inner.cart-empty {
  background: #ffffff !important;
  border: 1px solid #E3E6EC !important;
  border-radius: 16px !important;
  padding: 56px 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.cart-inner.cart-empty .cart-heading,
.cart-inner.cart-empty h1 {
  color: #0F2447 !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
  text-align: center !important;
  margin: 0 !important;
  height: auto !important;
}

/* --- 3. login / registrácia / zabudnuté heslo: karta + linky ---
   v28: VŠETKO scopnuté na #content-wrapper — rovnaký form.login-form
   + .alternative-links žije aj v HEADER POPUPE (.popup-widget), kde
   téma štýluje „Nová registrácia" ako navy button s BIELYM textom;
   naše nescopnuté pravidlá mu prepísali text na navy (neviditeľný),
   flex rozbil layout popupu a rám formulára robil dvojitý box.
   Popup nechávame ČISTO téme (bez CSS vyzerá správne). */
#content-wrapper .login-form,
#content-wrapper .registration-form,
#content-wrapper .forgotten-password-form {
  border: 1px solid #E3E6EC !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px rgba(15, 36, 71, .06) !important;
}
#content-wrapper .login-form .btn-primary,
#content-wrapper .registration-form .btn-primary,
#content-wrapper .forgotten-password-form .btn-primary {
  background: #FF6E5C !important;
  border-color: #FF6E5C !important;
  color: #ffffff !important;
}
#content-wrapper .login-form .btn-primary:hover,
#content-wrapper .registration-form .btn-primary:hover,
#content-wrapper .forgotten-password-form .btn-primary:hover {
  background: #F25843 !important;
  border-color: #F25843 !important;
}
/* „Nová registrácia" + „Zabudnuté heslo" boli zlepené na sebe */
#content-wrapper .alternative-links {
  display: flex !important;
  justify-content: center !important;
  gap: 22px !important;
  margin: 18px 0 0 !important;
}
#content-wrapper .alternative-links a {
  color: #0F2447 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
#content-wrapper .alternative-links a:hover { color: #FF6E5C !important; }

/* --- 4. 404: navy podklad preč, obsah ako karta --- */
body.in-404 .content-inner {
  background: transparent !important;
}
body.in-404 .empty-content-404 {
  background: #ffffff !important;
  border: 1px solid #E3E6EC !important;
  border-radius: 16px !important;
  padding: 56px 24px !important;
  text-align: center !important;
}
body.in-404 .empty-content-404 h1 {
  color: #0F2447 !important;
  font-size: 72px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  height: auto !important;
  margin: 0 !important;
}
body.in-404 .empty-content-404 h2 { color: #0F2447 !important; }
body.in-404 .empty-content-404 p { color: #5A6474 !important; }

/* ============================================================
   KRÁTKE STRÁNKY — SPODNÁ BIELA DIERA (v27, 2026-07-23) — Q:
   „čo ten spodok, to biele?" (login). Telo stránky je theme-om
   roztiahnuté na výšku okna a je biele → na krátkych stránkach
   (login, 404, prázdny košík) ostáva pod copyright pásom biely
   pruh. Fix: body.desktop = navy #0A1830 (pokračovanie footra),
   obsah stojí na .overall-wrapper, ktorý dostane bielu EXPLICITNE
   (obsahové sekcie sú transparentné a doteraz stáli na bielom
   body). Mobil (body.mobile) nechávame — tam to rieši html
   gradient z v24 a správanie je odsúhlasené.
   ============================================================ */
body.desktop { background: #0A1830 !important; }
body.desktop .overall-wrapper { background: #ffffff; }

/* ============================================================
   HERO CAROUSEL — MOBILNÝ OREZ (v29, 2026-07-25)
   Nové bannery majú produkty v pravej polovici a ľavú polovicu
   zámerne prázdnu pre headline. Na mobile sa ale obrázok orezáva
   `object-fit: cover` OD STREDU → prázdna ľavá časť zmizne a fľaše
   vylezú priamo pod text. Orez od ľavého okraja zachová textovú
   zónu (overené puppeteer 393 px: prekryv 215 px → 92 px).
   Tablet obrázok neorezáva (zobrazí celý), tam rieši čitateľnosť
   gradient s rozšíreným breakpointom vyššie.
   ============================================================ */
body.mobile #carousel .item img { object-position: left center !important; }

/* ============================================================
   OZNAM O PLATBE (v30, 2026-07-28)
   SWEET DREAMS obsahuje melatonín, ktorý platobné brány
   nespracúvajú → produkt sa dá kúpiť len prevodom alebo
   dobierkou. Tlmené, nie výstražné: žiadna červená, žiadny
   výkričník. Má sa čítať ako údaj vedľa dopravy.
   ============================================================ */

/* blok pod tlačidlom „Do košíka" na PDP SWEET DREAMS
   (pole shortDescription sa vykresľuje hneď za add-to-cart) */
.sc-pay-note{
  margin: 18px 0 0;
  padding: 14px 16px;
  background: #F6F5F1;
  border: 1px solid #E7E3DC;
  border-radius: 10px;
}
.sc-pay-note strong{
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #0F2447;
}
.sc-pay-note p{
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: #6B7385;
}

/* riadok v cross-sell karte SWEET DREAMS na PDP HARMONY a DAILY HER */
.sc-pay-mini{
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.4;
  color: #6B7385;
}

/* ===== BOČNÝ PANEL: skrytie rozbaľovacieho triggera pri kategórii s podkategóriami =====
   Apollo vkladá do odkazu kategórie, ktorá má deti, `<span class="cat-trigger">` —
   absolútne umiestnený 30×30 box na left:-10px, ktorý sa vykreslí vľavo pod textom
   a orezáva sa o naše podčiarknutie aktívnej položky (vyzerá to ako artefakt).
   Vetva je u nás vždy `expanded` (podkategórie sú viditeľné aj z iných kategórií),
   takže trigger nemá čo rozbaľovať. Pridané 2026-07-30 s kategóriou „Čo ťa zaujíma". */
.sidebar .categories .topic > a > .cat-trigger { display: none !important; }

/* Podkategórie v bočnom paneli: téma im dáva na :hover aj na .active navy pozadie —
   pri hoveri ostáva text tiež navy, takže položka pri prejdení myšou úplne zmizne.
   Zjednocujeme s hlasom webu: bez bloku, coral text. `#categories` v selektore je
   nutné kvôli špecificite (téma ho má tiež cez ID, inak nás prebije). */
.sidebar #categories ul li > a:hover,
.sidebar #categories ul li > a:focus,
.sidebar #categories ul li.active > a {
  background: transparent !important;
  color: #FF6E5C !important;
}

/* ==========================================================
   VÝPIS BLOGU — /blog/ (2026-07-30)
   Shoptet nemá pri článkoch samostatné pole na perex, takže do výpisu
   vysype celé telo článku. Karta preto ukáže len prvý odsek a zvyšok skryje;
   odkaz „Zobraziť celý článok" tam téma dáva sama.

   ⚠️ Scope MUSÍ byť `body.type-posts-listing`. Trieda `.news-item` je aj na
   detaile článku (`body.type-post`) — scopovanie iba na ňu by skrylo celý
   článok aj tam. Skracuje sa cez -webkit-line-clamp (nie max-height), aby
   sa text nikdy nerozrezal v polovici riadku.
   ========================================================== */
/* `.sc-pdp-img` skrývame tiež: od 2026-07-30 je hrdinský obrázok v TELE článku (kvôli
   detailu) a zároveň je ten istý súbor nahratý v poli „Obrázok článku" (kvôli og:image).
   Téma vykreslí natívny náhľad do karty sama, takže bez tohto by bol v karte 2×. */
body.type-posts-listing .news-item .sc-pdp > section,
body.type-posts-listing .news-item .sc-pdp > .sc-pdp-img,
body.type-posts-listing .news-item .sc-pdp > .sc-pdp-note {
  display: none !important;
}
body.type-posts-listing .news-item .sc-pdp {
  padding: 0 !important;
}
body.type-posts-listing .news-item .sc-pdp > .sc-pdp-lead {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 !important;
  font-size: 15px;
}

/* Hrdinský obrázok článku (2026-07-30)
   Na DETAILE ho orežeme na pás — v plnej výške 3:2 mal pri šírke obsahu ~900 px a text
   by začínal až pod okrajom obrazovky (a LCP by bol zbytočne ťažký).
   Vo VÝPISE ho necháme v pôvodnom pomere 3:2, tam slúži ako náhľad karty, preto je
   pravidlo scopnuté na `body.type-post` a nie na `.sc-pdp-img` všeobecne. */
body.type-post .sc-pdp > .sc-pdp-img img {
  height: clamp(240px, 34vw, 440px);
  object-fit: cover;
}

/* Parametre produktu pod popis (2026-07-30)
   Téma dáva `.extended-description` (Parametre + Kategórie produktu) do pravého stĺpca vedľa
   popisu. Blok je nízky (~500 px), popis vysoký (~4800 px), takže vpravo ostávala obrovská
   prázdna plocha a popis bol zbytočne stlačený na 707 px.
   Riešenie: `.description-inner` prepnúť na stĺpec — popis dostane plnú šírku (1258 px, čo je
   bližšie k tomu, ako sú PDP navrhnuté) a parametre padnú úplne dole pod FAQ.
   `border-left` treba nulovať, inak po prehodení visí čiara cez celú šírku. */
.p-detail .description-inner { flex-direction: column; }
.p-detail .basic-description { width: 100% !important; }
.p-detail .extended-description {
  width: 100% !important;
  border-left: 0 !important;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid rgba(15, 36, 71, .10);
}

/* Dlaždica „Všetky kategórie" v rozbalenom menu (2026-07-31)
   Téma pridáva do druhej úrovne menu ešte jednu položku s hamburger ikonou, ktorá vedie
   na tú istú URL ako nadradená položka v menu — takže neponúka nič, čo by sa nedalo
   kliknúť o riadok vyššie, a pritom má ako jediná farebnú dlaždicu a ťahá na seba oko.
   Skryté je len `li.menu-item-category`, obsahové položky (`menu-item-<id>`) ostávajú. */
.navigation-in ul.menu-level-2 > li.menu-item-category { display: none !important; }

/* Košíkové okno v hlavičke — zosvetlenie spodného bloku (2026-07-31)
   Téma dávala bloku pod položkami navy pozadie (#0F2447) a text v ňom dedil
   takmer čiernu (#0F0F0F); `strong` mal dokonca presne tú istú navy ako pozadie.
   Suma do dopravy zadarmo, slovo „zadarmo", ikona dodávky aj vyplnená časť
   ukazovateľa boli navy na navy, teda úplne neviditeľné.
   Q zvolil biele pozadie: okno tak drží pohromade ako jedna karta (rovnako ako
   produktové dlaždice) a jediným sýtym prvkom ostáva coral CTA.
   Všetko je scopnuté pod #cart-widget — tá istá hláška na /kosik/ je na svetlom
   podklade a je v poriadku, tam sa nesmie nič zmeniť.
   Farby sú napísané priamo, nie cez --sc-coral: tie premenné sú deklarované až
   na .sc-pdp, takže v košíku by sa nerozvinuli. */
#cart-widget .cart-widget-button { background: #fff; color: #0F2447; }
#cart-widget .cart-free-shipping,
#cart-widget .cart-free-shipping div {
  color: rgba(15, 36, 71, .70);
  font-size: 14px;
  line-height: 1.55;
}
#cart-widget .cart-free-shipping strong { color: #0F2447; font-weight: 700; }
#cart-widget .cart-free-shipping .extra-delivery-price { color: #FF6E5C; }

/* Ukazovateľ postupu k doprave zadarmo: vyplnená časť je coral, dráha tlmená. */
#cart-widget .cart-free-shipping::before { background: #FF6E5C; }
#cart-widget .cart-free-shipping::after  { background: rgba(15, 36, 71, .10); }


/* ===== COOKIE LIŠTA — INFORMAČNÝ REŽIM (v44, 2026-08-19) =====
   Q 19. 8. prepol v `/admin/cookies/` možnosť znenia súhlasu z „Potrebný súhlas"
   na „Informácie o súboroch cookie". Tým sa vymenil CELÝ komponent:

       bolo:  .siteCookies.siteCookies--bottom.siteCookies--light
              (text + Nastavenie + Súhlasím)
       je:    .cookie-ag-wrap > .site-msg.cookies > form
              (text + jediné tlačidlo .CookiesOK „Rozumiem")

   ⚠️ Preto boli všetky predchádzajúce cookie bloky (v41–v43) MŔTVE a sú
   odstránené — cielili na `.siteCookies--*`, čo sa na stránke už nevyskytuje.
   Ak by sa režim niekedy vrátil na „Potrebný súhlas", tento blok prestane
   platiť a treba siahnuť do histórie v [[selfcare-cookie-listy-konkurencia]].

   Čo téma dávala a čo prepisujeme (merané na 402 px):
     .cookie-ag-wrap .site-msg{opacity:.8}   → cez lištu PRESVITALA stránka
     .site-msg{font-size:12px;text-align:center}
     .btn.btn-xs{font-size:12px;min-height:35px;padding:0 10px}
     tlačidlo malo zelené #66bf3a a pilulkový radius 25px — mimo značky
   Výsledok: 100 → 122 px. O 22 px vyššie, ale čitateľné a v našich farbách;
   pri 12 px texte pod priesvitným pruhom bola tá úspora bezcenná.

   🔴 PASCA PRI LADENÍ: ak `getComputedStyle` tvrdí, že pravidlá neplatia
   ani s `!important` ani s inline štýlom, NIE JE to kaskáda — je to zamrznutý
   renderer karty. Overiť tak, že si vytvoríš nový element s tými istými
   triedami; ak ten štýl chytí, kaskáda je v poriadku a stačí čerstvá karta. */

.cookie-ag-wrap .site-msg.cookies {
  opacity: 1;
  background: #F8FAFB;
  color: #252525;
  font-size: 16px;
  line-height: 1.45;
  text-align: left;
  padding: 12px;
  box-shadow: 0 -2px 12px rgba(15, 36, 71, .10);
}
.cookie-ag-wrap .site-msg.cookies form { display: block; margin: 0; }
.cookie-ag-wrap .site-msg.cookies a { color: #252525; text-decoration: underline; }
.cookie-ag-wrap .site-msg.cookies .CookiesOK {
  height: 44px;
  min-height: 44px;
  background-color: #252525;
  background-image: none;
  color: #F8FAFB;
  font-size: 16px;
  font-weight: 700;
  line-height: 44px;
  border: 0;
  border-radius: 4px;
  text-align: center;
}

/* MOBIL — tlačidlo cez celú šírku pod textom (Q 19. 8.: „nemôže byť full width?"). */
@media (max-width: 767px) {
  .cookie-ag-wrap .site-msg.cookies .CookiesOK {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 0;
  }
}

/* DESKTOP — text aj tlačidlo v jednom riadku, lišta ostáva nízka (82 px).
   ⛔ NEROBIŤ z `form` flex: `<a>tu</a>` je v ňom samostatný uzol a stal by sa
   vlastnou flex položkou → veta sa roztrhne na „Viac informácií · tu · .".
   Overené 19. 8. Preto `display:block` + `inline-block` na tlačidle. */
@media (min-width: 768px) {
  .cookie-ag-wrap .site-msg.cookies { text-align: center; padding: 14px 20px; }
  .cookie-ag-wrap .site-msg.cookies .CookiesOK {
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 24px;
    padding: 0 28px;
    min-width: 150px;
  }
}

/* ===== v45 (2026-08-19): .sc-pdp NA STATICKÝCH STRÁNKACH =====
   🔴 PROBLÉM: dizajnový systém .sc-pdp funguje na produktoch a kategóriách, ale na
   statických stránkach (body.type-page) sa rozsypal — čísla v kartách boli 16px
   namiesto 42px a display nadpis 24px namiesto clamp(36–58px).

   PRÍČINA: téma Apollo má `.type-page .content-inner article p` a `… h2` so
   ŠPECIFICITOU (0,2,2), ktorá prebíja naše `.sc-pdp .sc-spec-num` (0,2,0).
   Na PDP a kategóriách tie pravidlá neexistujú, preto tam problém nebol.

   RIEŠENIE: zdvojená trieda `.sc-pdp.sc-pdp` → (0,3,0) prebije (0,2,2) bez
   `!important`. Hodnoty sú zhodné s originálmi vyššie — keď meníš tam, zmeň aj tu.
   ⚠️ Bez tohto bloku sa NEDÁ použiť .sc-pdp na žiadnej novej statickej stránke. */

.sc-pdp.sc-pdp .sc-pdp-display {
  font-size: clamp(36px, 6vw, 58px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.015em;
  text-transform: uppercase;
}
.sc-pdp.sc-pdp .sc-pdp-lead    { font-size: 17px; line-height: 1.75; }
.sc-pdp.sc-pdp .sc-pdp-note    { font-size: 15px; line-height: 1.7; }
.sc-pdp.sc-pdp .sc-pdp-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; }

.sc-pdp.sc-pdp .sc-spec-num  { font-size: 42px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.sc-pdp.sc-pdp .sc-spec-unit { font-size: 15px; font-weight: 700; }
.sc-pdp.sc-pdp .sc-spec-name { font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.sc-pdp.sc-pdp .sc-spec-role { font-size: 14px; line-height: 1.55; }
.sc-pdp.sc-pdp .sc-spec-std  { font-size: 13px; line-height: 1.55; }

.sc-pdp.sc-pdp .sc-who-card h4 { font-size: 16px; font-weight: 800; }
.sc-pdp.sc-pdp .sc-who-card p  { font-size: 14px; line-height: 1.65; }

.sc-pdp.sc-pdp .sc-dose-n      { font-size: 13px; font-weight: 800; }
.sc-pdp.sc-pdp .sc-dose-steps h4 { font-size: 16px; font-weight: 800; }
.sc-pdp.sc-pdp .sc-dose-steps p  { font-size: 14px; line-height: 1.6; }

@media (max-width: 560px) {
  .sc-pdp.sc-pdp .sc-spec-num { font-size: 32px; }
}

/* ===== v46 (2026-08-19): ZAROVNANIE IKONIEK A TEXTU V USP PÁSE =====
   🔴 PROBLÉM: ikonky neboli na spoločnej mriežke — odsadenie 19 / 0 / 13 px podľa
   toho, aká dlhá bola veta. Dvojica ikonka+text bola v každej položke vycentrovaná,
   takže pri rôznych šírkach textu (180 vs 217 px) sa ikonka zakaždým posunula inam.

   PRÍČINA: blok vyššie (riadok ~530) je písaný pre rozloženie IKONKA NAD TEXTOM
   (`.benefitBanner__item { flex-direction: column }`). Téma ale vkladá medzi item
   a obsah `<a class="benefitBanner__link">`, ktorý je vlastný flex RIADOK — takže
   naše pravidlá na `__item` idú naprázdno a rozhoduje ten odkaz.
   ⚠️ Odkaz tam pribudol 19. 8., keď sme ikonky spravili preklikateľné.

   ⛔ NESKÚŠAŤ `white-space: nowrap` na titulok — text sa NEPRELIEVA, ale OREŽE
   (`overflow:hidden`), a to aj pri 1680 px. Meranie pretečenia to nezachytí,
   treba porovnať `scrollWidth > clientWidth`. Dvojriadkový titulok je menšie zlo.

   Overené na 402 / 560 / 768 / 992 / 1200 / 1680 px: ikonky vždy na odsadení 0,
   nič orezané, zvislé stredy ikonky a textu na tom istom pixeli. */
.benefitBanner .benefitBanner__link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  width: 100% !important;
}
.benefitBanner .benefitBanner__picture { margin: 0 !important; }
.benefitBanner .benefitBanner__content {
  text-align: left !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.benefitBanner .benefitBanner__title { text-align: left !important; }