/* Zeezy — eshop frontend
   Bootstrap 5.3.2 (CDN) rieši grid/utility triedy; tento súbor len shop-špecifické komponenty.
   Paleta a typografia (28.9.2026) podľa schváleného Design-canvas prototypu
   (https://claude.ai/artifact/52x6hR61D1CCSEPyohz49i): biele pozadie + modrá primárna akcia
   #0068c8 + červená akciová cena — od 13.10.2026 farby podľa brand manuálu, od 20.10.2026 Zeezy 1.1
   (navy #17395A + limetková #C6F451 namiesto coral, viď :root, docs/zeezy-1.1-zadanie.md).
   Písmo cez --esh-font: Inter od 20.10.2026 (testovacie), predtým Google Sans; self-hosted assets/fonts/. */

:root {
  /* Písmo celého webu na jednom mieste (Zeezy 1.1: Inter je zatiaľ test, manuál uvádza Nunito Sans). */
  --esh-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Stupnica písma (3.11.2026, podľa kulina.sk — VX „Zeezy final módosítás“): text nikde pod 15 px (od 4.11.2026; predtým 14), 13 px len odznaky
     a nadtitulky. Veľkosti v CSS aj inline štýloch šablón sú len tieto premenné (nadpisy hero/ceny nad 21 px ostávajú). */
  --esh-fs-xs:   13px; /* 4.11.2026: z 12 px */
  --esh-fs-sm:   15px; /* 4.11.2026: z 14 px */
  --esh-fs-base: 16px;
  --esh-fs-md:   18px;
  --esh-fs-lg:   20px;

  --esh-bg:          #ffffff;
  --esh-surface:     #ffffff;
  --esh-surface-alt: #F7F7F5; /* zeezy offwhite (brand manuál) */
  --esh-ink:         #17395A; /* zeezy navy */
  --esh-ink-soft:    #5B6B82; /* navy-sivá, kontrast 5,4:1 na bielej */
  --esh-border:      #ebebeb;
  --esh-border-soft: #e5e5e5;

  /* Farby podľa brand manuálu Zeezy v1.1: accent = navy (odkazy, aktívne stavy, pruhy),
     limetková len ako plocha/CTA/akcent — nikdy text na bielej (1,3:1); na limetkovej vždy navy text (9,3:1). */
  --esh-accent:       #17395A;
  --esh-accent-ink:   #ffffff;
  --esh-accent-soft:  rgba(23,57,90,0.08);
  --esh-accent-dark:  #0E2741;

  --esh-sale:        #C8432F; /* červená pre text akciovej ceny (4,9:1) */
  --esh-sale-soft:   #FDE7E3;
  --esh-sale-badge:  #C6F451; /* štítok zľavy = limetková plocha + navy text (Zeezy 1.1) */

  /* Nákupné akcie (Do košíka, Pokračovať, Odoslať objednávku, Registrovať, Zaplatiť) = limetková
     plocha + navy text (Zeezy 1.1, bod 15; do 20.10.2026 smaragdová #16805F s bielym textom). */
  --esh-cart:        #C6F451;
  --esh-cart-ink:    #17395A;
  --esh-cart-dark:   #B3E43A;

  --esh-ok:          #2f8a4e; /* "Skladom" — zostáva zelená */

  --esh-radius: 5px;
  --esh-radius-sm: 5px;
  --esh-shadow: 0 12px 28px rgba(26,32,44,0.12);

  /* Brand manuál Zeezy v1.1 (15.10.2026) — navy = texty/nadpisy/tmavé pozadia, lime = úsmev, bodky,
     CTA akcenty, mikrodetaily (NIE text ani tenké linky na bielej). */
  --zeezy-navy:     #17395A;
  --zeezy-lime:     #C6F451;
  --zeezy-white:    #FFFFFF;
  --zeezy-offwhite: #F7F7F5;
  --zeezy-sky:      #EAF1F7; /* bledomodrý pás (newsletter, Zeezy 1.1 bod 14) */
}

body.esh {
  background: var(--esh-bg);
  color: var(--esh-ink);
  font-family: var(--esh-font);
  -webkit-font-smoothing: antialiased;
  /* Pásy na celú šírku (breadcrumb, newsletter, hero, recenzie…) majú width:100vw — 100vw zahŕňa aj zvislý
     posuvník, takže pretečú o jeho šírku a vznikne vodorovný posuvník (21.10.2026). clip (nie hidden) — hidden
     by z body urobil scroll kontajner a rozbil position:sticky (súhrn košíka/pokladne). */
  overflow-x: clip;
}
.esh a { color: var(--esh-accent); text-decoration: none; }
.esh a:hover { color: var(--esh-accent-dark); }
.esh h1, .esh h2, .esh h3, .esh h4 {
  font-family: var(--esh-font);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--esh-ink);
}
.esh .text-soft { color: var(--esh-ink-soft); }
.esh .eyebrow {
  font-size: var(--esh-fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--esh-ink-soft);
}

/* ── Top contact bar ─────────────────────────────────────────────── */
.esh-topbar {
  font-size: var(--esh-fs-sm); color: #ffffff; background: var(--esh-accent);
  border-bottom: 1px solid rgba(255,255,255,0.21);
}
.esh-topbar a { color: #ffffff; }
.esh-topbar a:hover { opacity: .8; color: #fff; }
.esh-topbar svg { vertical-align: -2px; margin-right: 4px; }
.esh-topbar-link { padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.21); }
/* 5.11.2026: WYSIWYG editor widgetu topbar-message vždy obalí text do <p> (aj po zmazaní) —
   margin z <p> robil topbar vyšší. Odseky v správe zobraziť inline bez okrajov. */
.esh-topbar-msg p { display: inline; margin: 0; }
.esh-topbar-msg p + p::before { content: " · "; }

/* ── Header ───────────────────────────────────────────────────────── */
.esh-header { background: var(--esh-surface); border-bottom: 1px solid var(--esh-border-soft); padding-top: 22px !important; padding-bottom: 22px !important; }
.esh-logo { display: flex; align-items: center; white-space: nowrap; }
/* Logo bez sloganu (zeezy-logo-with-smile.svg, pomer 2000:680) — 44px výška = 129px šírka, manuál min. 120px. */
.esh-logo img { height: 44px; width: auto; display: block; }
/* Riadok hlavičky (Zeezy 1.1 bod 6): desktop = logo | vyhľadávanie | ikony v jednom riadku; pod 992px
   ☰ + logo + ikony hore a vyhľadávanie pod nimi (viď @media nižšie). Hamburger je len pre mobil/tablet. */
.esh-header-row { display: flex; align-items: center; gap: 24px; }
/* Desktop (21.10.2026, spätná väzba kolegov): vyhľadávanie presne v strede hlavičky — mriežka 1fr | pole | 1fr,
   logo vľavo a ikony vpravo v rovnako širokých stĺpcoch, takže stred nezávisí od ich šírky. */
@media (min-width: 992px) {
  .esh-header-row { display: grid; grid-template-columns: 1fr minmax(0, 640px) 1fr; }
  .esh-header-row .esh-logo { justify-self: start; }
  .esh-header-row .esh-search { width: 100%; max-width: none; }
  .esh-header-row .esh-header-actions { justify-self: end; margin-left: 0 !important; }
}
.esh-header-burger {
  display: none; align-items: center; justify-content: center; flex-shrink: 0;
  background: none; border: 0; padding: 0; color: var(--esh-ink); cursor: pointer;
}
.esh-search { flex: 1 1 auto; max-width: 720px; position: relative; }
.esh-search .form-control {
  border-radius: var(--esh-radius-sm) 0 0 var(--esh-radius-sm);
  border: 1px solid var(--esh-border); border-right: none; height: 45px; font-size: var(--esh-fs-sm);
}
.esh-search .btn {
  border-radius: 0 var(--esh-radius-sm) var(--esh-radius-sm) 0;
  background: var(--zeezy-lime); border: 1px solid var(--esh-border); border-left: none; color: var(--zeezy-navy); width: 50px;
}
/* 3.11.2026: jemný rámik ako dlaždice kategórií; pri písaní tmavý rámik okolo CELÉHO poľa aj s lupou
   (predtým focus ring len okolo inputu — zelený na zelenom tlačidle neobtiekol lupu). */
.esh-search .form-control:focus { box-shadow: none; }
.esh-search:focus-within .form-control, .esh-search:focus-within .btn { border-color: var(--esh-accent); }
.esh-search .btn:hover { background: var(--esh-cart-dark); color: var(--zeezy-navy); }

/* ── Live vyhľadávacie návrhy (assets/js/search.js) ──────────────────────────────────── */
.esh-search-suggest {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 6px;
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  box-shadow: 0 10px 24px rgba(0,0,0,.12); z-index: 20; max-height: 70vh; overflow-y: auto; padding: 10px;
}
.esh-search-suggest-empty { padding: 8px 4px; color: var(--esh-ink-soft); font-size: var(--esh-fs-sm); }
.esh-search-suggest-cats { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--esh-border); }
.esh-search-suggest-badge {
  background: var(--esh-bg); border: 1px solid var(--esh-border); border-radius: 999px;
  padding: 4px 12px; font-size: var(--esh-fs-xs); color: var(--esh-ink); text-decoration: none;
}
.esh-search-suggest-badge:hover { border-color: var(--esh-accent); color: var(--esh-accent); }
.esh-search-suggest-products { display: flex; flex-direction: column; gap: 2px; }
.esh-search-suggest-item {
  display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--esh-radius-sm);
  text-decoration: none; color: var(--esh-ink);
}
.esh-search-suggest-item:hover { background: var(--esh-bg); }
.esh-search-suggest-thumb {
  width: 38px; height: 38px; border-radius: var(--esh-radius-sm); background: #fff;
  flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.esh-search-suggest-thumb img { width: 100%; height: 100%; object-fit: contain; }
.esh-search-suggest-name { font-size: var(--esh-fs-sm); line-height: 1.3; }
.esh-header-actions { gap: 22px; }
/* a.esh-icon-link (class+element), nie len .esh-icon-link — `.esh a { color: var(--esh-accent) }`
   vyššie v súbore má inak VYŠŠIU špecifickosť (trieda+element > samotná trieda) a farbu by
   prebilo bez ohľadu na poradie v súbore (nájdené 28.9.2026 — ikonky/"Prihlásiť sa" zostávali
   modré napriek nastavenej farbe tu). */
a.esh-icon-link, .esh-icon-link {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  color: var(--esh-ink); font-size: var(--esh-fs-sm); font-weight: 500; position: relative;
}
.esh-icon-link:first-child { padding-right: 22px; border-right: 1px solid var(--esh-border-soft); }
.esh-icon-link svg { width: 24px; height: 24px; }
a.esh-icon-link:hover, .esh-icon-link:hover { color: var(--esh-accent); }
/* Prepínač jazyka SK/CZ (2.10.2026) — v .esh-topbar (modrý pásik), vlajky assets/flags/*.svg */
.esh-lang-current { display: flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; color: #fff; font: inherit; }
.esh-lang-current:hover { opacity: .8; }
.esh-lang-current::after { content: ""; border: 4px solid transparent; border-top-color: currentColor; border-bottom: 0; margin-left: 2px; }
.esh-lang-flag { width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0; object-fit: cover; }
.esh-lang-menu { min-width: 0; font-size: var(--esh-fs-sm); }
/* .esh-topbar .esh-lang-menu — `.esh-topbar a { color: #fff }` vyššie by inak prebilo farbu
   položiek v bielom dropdowne (neaktívny jazyk bol biely na bielom, 4.10.2026). */
.esh-topbar .esh-lang-menu .dropdown-item { display: flex; align-items: center; gap: 8px; color: var(--esh-ink); }
.esh-topbar .esh-lang-menu .dropdown-item:hover { opacity: 1; color: var(--esh-ink); background: var(--esh-surface-alt); }
.esh-lang-menu .dropdown-item.active, .esh-lang-menu .dropdown-item:active { background: var(--esh-surface-alt); color: inherit; font-weight: 600; }
.esh-icon-badge-wrap { position: relative; display: inline-flex; }
.esh-badge-count {
  position: absolute; top: -7px; right: -9px;
  background: var(--zeezy-lime); color: var(--zeezy-navy); font-size: .62rem; font-weight: 700;
  width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
/* Skrytý, kým JS nezistí počet, aj natrvalo pri prázdnom košíku (žiadna "0" v badge) — bez tohto
   pravidla by `display: flex` vyššie prebilo predvolené `[hidden]{display:none}` (rovnaká
   špecifickosť, autorský štýl je v kaskáde za UA štýlom). */
.esh-badge-count[hidden] { display: none; }

/* ── Category nav ─────────────────────────────────────────────────── */
.esh-catnav { background: var(--esh-surface); border-bottom: 1px solid var(--esh-border-soft); }
/* Na mobile stále funguje ako skutočný toggle (klik rozbaľuje .esh-catnav-collapse — ten je na
   mobile skrytý predvolene, viď @media nižšie). Na desktope je to natrvalo viditeľný štítok
   ("PREHĽADAŤ KATEGÓRIE") vedľa už aj tak viditeľného zoznamu (.esh-catnav-collapse tam má
   `display:block !important`) — klik je tam neškodné no-op, panel je aj tak vždy otvorený.
   Predtým (do 28.9.2026) sa na desktope vôbec nezobrazoval — teraz podľa prototypu natrvalo áno. */
.esh-catnav .container { display: flex; align-items: stretch; flex-wrap: wrap; }
/* padding-left:0 — hamburger/label musí začínať na rovnakej ľavej hrane ako topbar/header/H1
   (container gutter), nie o ďalších 16px vpravo od nej (nájdené 28.9.2026 pri porovnaní s
   artefaktom, screenshot s vodiacou čiarou). */
.esh-catnav-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px 12px 0;
  background: none; border: none; font: inherit; font-size: var(--esh-fs-sm); font-weight: 600;
  color: var(--esh-ink); cursor: pointer;
}
.esh-catnav-toggle:hover { color: var(--esh-accent); }
/* 3.11.2026: na desktope oválny rámik (pill), hover = limetkové pozadie — rovnako ako „Zobraziť všetko“
   v off-canvas menu (.esh-ocmenu-showall). */
@media (min-width: 992px) {
  .esh-catnav-toggle {
    width: auto; align-self: center; margin-right: 8px; padding: 7px 14px; font-size: var(--esh-fs-sm);
    border: 1px solid var(--esh-ink); border-radius: 999px; transition: background .15s, border-color .15s;
  }
  .esh-catnav-toggle:hover { background: var(--zeezy-lime); border-color: var(--zeezy-lime); color: var(--zeezy-navy); }
}
.esh-catnav-deals {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; width: 100%;
  color: var(--esh-ink); font-size: var(--esh-fs-sm); font-weight: 600; flex-shrink: 0;
}

/* Hlavné (0-tá úroveň) kategórie sedia priamo na bielom pruhu esh-catnav → tmavý text, na
   rozdiel od .esh-cat-tree nižšie, ktoré je štýlované pre svetlý dropdown panel (rovnaké farby). */
.esh-catnav-tree > .esh-cat-node > a,
.esh-catnav-tree > .esh-cat-node > .esh-cat-toggle {
  padding: 16px; margin-left: 0; border-left: none;
  color: var(--esh-ink); font-size: var(--esh-fs-sm); font-weight: 500; white-space: nowrap;
}
.esh-catnav-tree > .esh-cat-node > a:hover,
.esh-catnav-tree > .esh-cat-node > a.active,
.esh-catnav-tree > .esh-cat-node > .esh-cat-toggle:hover,
.esh-catnav-tree > .esh-cat-node > .esh-cat-toggle.active { color: var(--esh-accent); }
/* Zeezy 1.1 (20.10.2026): limetkové podčiarknutie 3px na spodnej hrane pruhu. Aktívna kategória =
   užšia čiara (20px od okrajov odkazu); hover = čiara vyrastie zo stredu na celú šírku odkazu
   (aj na aktívnej sa rozšíri). */
.esh-catnav-tree > .esh-cat-node > a { position: relative; }
.esh-catnav-tree > .esh-cat-node > a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--zeezy-lime); border-radius: 3px 3px 0 0;
  transform: scaleX(0); transition: transform .2s ease, left .2s ease, right .2s ease;
}
.esh-catnav-tree > .esh-cat-node > a.active::after { left: 20px; right: 20px; transform: scaleX(1); }
.esh-catnav-tree > .esh-cat-node > a:hover::after { left: 0; right: 0; transform: scaleX(1); }

/* Rozbalené podkategórie (1. úroveň v esh-catnav) — vlastný svetlý panel (rovnaký princíp ako
   .esh-search-suggest), vnútri neho platia pôvodné svetlé farby .esh-cat-tree/.esh-cat-toggle
   nezmenené. Na mobile je to blok pod hlavnou kategóriou v hamburger menu, na desktope
   (≥768px, viď @media nižšie) dropdown position:absolute. */
.esh-catnav-tree > .esh-cat-node > ul {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  padding: 8px 12px; margin-top: 4px;
}

/* ── Off-canvas strom kategórií (zeezy, 1.10.2026) ──────────────────
   Podľa creactive .cr-ocmenu — zoznam hlavných kategórií, klik otvorí panel s podstromom, ktorý
   prekryje zoznam zboku; "Späť" sa vráti. Farby zeezy (accent namiesto farieb kategórií). */
.esh-ocmenu.offcanvas { width: 350px; max-width: 100%; border-right: 0; overflow: hidden; }
.esh-ocmenu-head {
  background: var(--esh-ink); color: #fff; font-weight: 700; font-size: var(--esh-fs-base); height: 50px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: space-between; padding: 0 20px;
}
.esh-ocmenu-head .btn-close { opacity: .8; }
.esh-ocmenu-head .btn-close:hover { opacity: 1; }
.esh-ocmenu-body { overflow-y: auto; flex: 1; padding-bottom: 40px; }
.esh-ocmenu-root { list-style: none; margin: 0; padding: 0; }
/* Zeezy 1.1 bod 12 (20.10.2026): ikona kategórie pred názvom, riadok min. 56px (pohodlné ťukanie),
   oddeľovač čiarou à la Kytary; hover/ťuk = svetlé pozadie namiesto plného navy. */
.esh-ocmenu-item {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px;
  text-align: left; background: #fff; border: 0; border-bottom: 1px solid var(--esh-border);
  color: var(--esh-ink); font: inherit; font-weight: 600; font-size: var(--esh-fs-base); padding: 10px 16px 10px 20px;
  cursor: pointer; text-decoration: none; transition: background-color .2s, color .2s;
}
.esh-ocmenu-label { flex: 1 1 auto; min-width: 0; }
.esh-ocmenu-item > svg { flex-shrink: 0; color: var(--esh-ink-soft); }
.esh-ocmenu-item:hover { background: var(--esh-surface-alt); color: var(--esh-ink); }
.esh-ocmenu-icon {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--esh-radius-sm);
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
}
.esh-ocmenu-icon img { width: 100%; height: 100%; object-fit: contain; }
.esh-ocmenu-icon.is-placeholder { background: var(--esh-surface-alt); color: var(--esh-ink-soft); }

/* Pod kategóriami (Zeezy 1.1 bod 12, à la creactive.sk): akcie z desktopu, stránky, kontakt. */
.esh-ocmenu-extra, .esh-ocmenu-links { list-style: none; margin: 0; padding: 0; }
.esh-ocmenu-extra { padding: 8px 0; border-bottom: 1px solid var(--esh-border); }
.esh .esh-ocmenu-extra a {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 6px 20px;
  color: var(--esh-ink); font-weight: 600; font-size: var(--esh-fs-base);
}
.esh .esh-ocmenu-extra a svg { width: 36px; flex-shrink: 0; color: var(--esh-ink-soft); }
.esh-ocmenu-links { padding: 12px 0 4px; }
.esh .esh-ocmenu-links a { display: block; padding: 9px 20px; color: var(--esh-ink-soft); font-weight: 600; font-size: var(--esh-fs-sm); }
.esh .esh-ocmenu-extra a:hover, .esh .esh-ocmenu-links a:hover { background: var(--esh-surface-alt); color: var(--esh-ink); }
.esh-ocmenu-contact { display: flex; flex-direction: column; gap: 4px; padding: 12px 20px 8px; border-top: 1px solid var(--esh-border); margin: 8px 20px 0; padding-left: 0; padding-right: 0; }
.esh .esh-ocmenu-contact a { display: flex; align-items: center; gap: 10px; padding: 6px 0; color: var(--esh-ink); font-weight: 600; font-size: var(--esh-fs-sm); }

.esh-ocmenu-panel {
  position: absolute; inset: 0; background: #fff; z-index: 2; overflow-y: auto; padding-bottom: 40px;
  transform: translateX(100%); transition: transform .3s ease-in-out; display: flex; flex-direction: column;
}
.esh-ocmenu-panel[hidden] { display: none; }
.esh-ocmenu-panel.is-open { transform: translateX(0); }
.esh-ocmenu-panel > .esh-ocmenu-head { position: sticky; top: 0; z-index: 1; padding-left: 0; }
.esh-ocmenu-back {
  flex: 1; display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 20px;
  background: none; border: 0; color: #fff; font: inherit; font-weight: 700; font-size: var(--esh-fs-base); cursor: pointer;
}
.esh-ocmenu-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* „Zobraziť všetko ›" (Zeezy 1.1 bod 12, à la Muziker) — obrysová pilulka pod hlavičkou panela,
   vedie do celej kategórie (do 20.10.2026 plný pruh s názvom kategórie). */
.esh-ocmenu-panel-body { padding: 14px 0 0; }
.esh a.esh-ocmenu-showall {
  display: inline-flex; align-items: center; gap: 4px; margin: 0 0 8px 20px; padding: 7px 14px;
  border: 1px solid var(--esh-ink); border-radius: 999px; color: var(--esh-ink); font-weight: 600; font-size: var(--esh-fs-sm);
}
.esh a.esh-ocmenu-showall:hover { background: var(--zeezy-lime); border-color: var(--zeezy-lime); color: var(--zeezy-navy); }
/* <a> položka prvej úrovne bez podkategórií — inak ju prebije .esh a (farba accent). */
.esh a.esh-ocmenu-item { color: var(--esh-ink); }
.esh a.esh-ocmenu-item:hover { color: var(--esh-ink); }
.esh-ocmenu-list { list-style: none; margin: 0; padding: 0; }
.esh-ocmenu-row { display: flex; justify-content: space-between; align-items: stretch; }
.esh-ocmenu-row a { flex: 1; display: block; color: var(--esh-ink); text-decoration: none; }
.esh-ocmenu-row a:hover, .esh-ocmenu-row a.active { color: var(--esh-accent); }
.esh-ocmenu-list--l2 > li { border-bottom: 1px solid var(--esh-border); }
/* 2. úroveň: ikona + názov, min. 52px na riadok (Zeezy 1.1 bod 12). */
.esh-ocmenu-list--l2 > li > .esh-ocmenu-row > a {
  display: flex; align-items: center; gap: 14px; min-height: 52px;
  padding: 8px 0 8px 20px; font-weight: 600; font-size: var(--esh-fs-sm);
}
.esh-ocmenu-list--l3 { padding-bottom: 8px; }
.esh-ocmenu-list--l3 a, .esh-ocmenu-list--l4 a, .esh-ocmenu-list--l5 a {
  color: var(--esh-ink-soft); padding: 5px 0 5px 36px; font-size: var(--esh-fs-sm);
}
.esh-ocmenu-list--l4 a, .esh-ocmenu-list--l5 a { padding-left: 52px; }
.esh-ocmenu-toggle {
  background: none; border: 0; padding: 0 14px; color: var(--esh-ink-soft); cursor: pointer;
  display: flex; align-items: center;
}
.esh-ocmenu-toggle:hover { background: var(--esh-surface-alt); color: var(--esh-accent); }
.esh-ocmenu-toggle svg { transition: transform .15s; }
.esh-ocmenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ── Hero ─────────────────────────────────────────────────────────── */
/* Plnošírkový pás (Main.dc.html), prvý element homepage — margin-top ruší horný padding main.py-4,
   nech sedí hneď pod .esh-catnav (rovnako ako .esh-breadcrumb-band). */
.esh-hero {
  background: linear-gradient(120deg, var(--zeezy-offwhite) 0%, var(--zeezy-offwhite) 55%, var(--zeezy-lime) 140%);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -1.5rem;
  overflow: hidden;
}
.esh-hero .container { padding-top: 72px; padding-bottom: 72px; display: flex; align-items: center; gap: 48px; }
.esh-hero-text { flex: 1 1 0; min-width: 0; }
.esh-hero .eyebrow {
  display: inline-block; background: var(--esh-accent-soft); color: var(--esh-accent);
  text-transform: none; letter-spacing: normal; font-weight: 600; font-size: var(--esh-fs-xs);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 18px;
}
.esh-hero h1 { color: var(--esh-ink); font-size: 2.4rem; line-height: 1.15; font-weight: 700; max-width: 16ch; margin: 0 0 18px; }
.esh-hero p { color: #3E4F68; font-size: var(--esh-fs-sm); line-height: 1.6; max-width: 440px; margin: 0 0 28px; }
.esh-hero-btns { display: flex; gap: 14px; flex-wrap: wrap; }
.esh-hero-btn {
  border-radius: 8px; padding: 14px 28px; font-size: var(--esh-fs-sm); font-weight: 600; text-decoration: none;
  border: 1px solid transparent; display: inline-block;
}
.esh .esh-hero-btn-primary { background: var(--esh-accent); color: #fff; }
.esh .esh-hero-btn-primary:hover { background: var(--esh-accent-dark); color: #fff; }
.esh .esh-hero-btn-outline { background: transparent; color: var(--esh-ink); border-color: rgba(26,32,44,.3); }
.esh .esh-hero-btn-outline:hover { background: var(--esh-ink); color: #fff; border-color: var(--esh-ink); }
.esh-hero-art { flex: 0 0 380px; display: flex; align-items: center; justify-content: center; color: var(--esh-accent); }
.esh-hero-glow {
  width: 320px; height: 320px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle, rgba(198,244,81,.35) 0%, rgba(198,244,81,0) 70%);
}
.esh-hero-glow svg { filter: drop-shadow(0 0 14px rgba(198,244,81,.6)); stroke-width: 1.1; }

/* ── Hero bannery (29.10.2026, includes/banners.php + assets/js/hero.js) — kostra slajdu z creactive
   (obrázok 1500×844 | textový panel), vzhľad Zeezy. Farby panelu nastavuje banner inline (paleta). */
.cr-hero { position: relative; }
.cr-hero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: var(--esh-radius); }
.cr-hero__track::-webkit-scrollbar { display: none; }
.cr-hero__item { flex: 0 0 100%; scroll-snap-align: start; }
.cr-hero__slide { display: flex; flex-direction: column; height: 100%; }
.cr-hero__img { aspect-ratio: 1500 / 844; overflow: hidden; }
.cr-hero__img picture { display: contents; }
.cr-hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.cr-hero__caption { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 28px 24px; background: var(--esh-surface-alt); }
.esh .cr-hero__caption h2 { color: var(--esh-ink); font-size: 1.7rem; line-height: 1.15; font-weight: 700; margin: 0 0 14px; }
.cr-hero__caption p { color: var(--esh-ink-soft); font-size: var(--esh-fs-base); line-height: 1.6; margin: 0 0 24px; max-width: 440px; }
.esh .cr-hero__btn {
  display: inline-block; padding: 12px 26px; border-radius: var(--esh-radius); background: var(--esh-cart); color: var(--esh-cart-ink);
  font-weight: 600; font-size: var(--esh-fs-sm); text-decoration: none; transition: background .15s;
}
.esh .cr-hero__btn:hover { background: var(--esh-cart-dark); color: var(--esh-cart-ink); }
.cr-bn-badge { display: inline-block; padding: 4px 10px; border-radius: var(--esh-radius-sm); color: #fff; font-size: var(--esh-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 14px; }
.cr-hero__dots { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }
.cr-hero__dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--esh-border); cursor: pointer; }
.cr-hero__dot.is-active { background: var(--esh-ink); }
@media (min-width: 992px) {
  .cr-hero__slide { flex-direction: row; }
  .cr-hero__img { width: 50%; aspect-ratio: auto; height: 460px; }
  .cr-hero__caption { width: 50%; height: 460px; padding: 48px 56px; }
  .cr-hero__slide--img-right .cr-hero__img { order: 2; }
  .esh .cr-hero__caption h2 { font-size: 2.4rem; max-width: 16ch; }
}

/* ── Trust badges ─────────────────────────────────────────────────── */
/* Plnošírkový pás (Main.dc.html USP strip) */
.esh-trust {
  background: var(--esh-surface-alt); border-top: 1px solid var(--esh-border); border-bottom: 1px solid var(--esh-border);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.esh-trust .container { padding-top: 28px; padding-bottom: 28px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
@media (min-width: 768px) { .esh-trust .container { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.esh-trust-item { display: flex; align-items: center; gap: 14px; }
.esh-trust-icon { color: var(--esh-accent); display: flex; flex-shrink: 0; }
.esh-trust-title { font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-ink); }
.esh-trust-sub { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); }

/* ── Product card ─────────────────────────────────────────────────── */
.esh-card {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius);
  overflow: hidden; height: 100%; display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* Zeezy 1.1 bod 11: aktívny (hover) rám limetkový — 1px border + 1px tieň = 2px bez posunu obsahu. */
.esh-card:hover { box-shadow: 0 0 0 1px var(--zeezy-lime), var(--esh-shadow); border-color: var(--zeezy-lime); transform: translateY(-2px); }
.esh-card-img {
  aspect-ratio: 1 / 1; background: #fff;
  color: var(--esh-ink-soft); position: relative; overflow: hidden;
}
.esh-card-img-link {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 24px; box-sizing: border-box;
}
.esh-card-img img { width: 100%; height: 100%; object-fit: contain; }
/* Obrázky produktov sú <picture> s WebP zdrojom (1.10.2026) — wrapper nesmie meniť layout,
   pravidlá typu `.x img { height:100% }` ostávajú platiť priamo pre <img>. */
picture { display: contents; }
.esh-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.esh-card-title {
  font-size: var(--esh-fs-sm); font-weight: 400; color: var(--esh-ink); line-height: 1.4; min-height: 2.8em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Hodnotenie na karte — sivé (zatiaľ bez recenzií, punch-list), rovnaký rozmer ako v prototype. */
.esh-card-rating { display: flex; align-items: center; gap: 5px; }
.esh-card-rating .esh-stars { color: var(--esh-border); }
.esh-card-rating-count { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); }
.esh-card-foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.esh-price { font-weight: 600; color: var(--esh-ink); font-variant-numeric: tabular-nums; font-size: var(--esh-fs-base); }
.esh-price-old { text-decoration: line-through; color: var(--esh-ink-soft); font-weight: 400; font-size: var(--esh-fs-sm); }
.esh-price-sale { color: var(--esh-sale); }
.esh-badge-sale {
  position: absolute; top: 10px; left: 10px; background: var(--esh-sale-badge); color: var(--zeezy-navy);
  font-size: var(--esh-fs-xs); font-weight: 600; text-transform: uppercase; padding: 4px 7px; border-radius: 3px; z-index: 1;
}
.esh-badges {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
}
.esh-badge-sale ~ .esh-badges { top: 36px; }
.esh-badge-pill {
  color: #fff; font-size: var(--esh-fs-xs); font-weight: 600; text-transform: uppercase; padding: 4px 7px; border-radius: 3px;
  white-space: nowrap;
}
.esh-add-cart {
  width: 100%; background: var(--esh-cart); color: var(--esh-cart-ink); border: none; border-radius: var(--esh-radius-sm);
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
  height: 38px; font-size: var(--esh-fs-sm); font-weight: 600;
}
.esh-add-cart:hover { background: var(--esh-cart-dark); color: var(--esh-cart-ink); }

/* Spodný riadok karty (21.10.2026, na žiadosť): krokovač „− 1 +" vľavo, hranatý limetkový košík len s ikonou
   vpravo, obe 40px vysoké. Porovnať na karte nie je, Obľúbené = srdiečko vpravo hore na obrázku. */
.esh-card-buy { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.esh-add-cart.esh-add-cart-icon { width: 40px; height: 40px; flex: 0 0 40px; padding: 0; }
.esh-add-cart.esh-add-cart-icon:disabled { background: var(--esh-border); color: var(--esh-ink-soft); cursor: not-allowed; }
.esh-qty.esh-qty-card { height: 40px; flex-shrink: 0; }
.esh-qty.esh-qty-card button { width: 30px; height: 100%; font-size: var(--esh-fs-base); padding: 0; }
.esh-qty.esh-qty-card button:hover { background: var(--esh-surface-alt); }
.esh-qty.esh-qty-card input { width: 34px; height: 100%; font-size: var(--esh-fs-sm); padding: 0; }

/* Srdiečko Obľúbené vpravo hore na obrázku karty (21.10.2026) — obrysové, plné po pridaní (.active z wishlist.js).
   Štítky (zľava, Novinka…) ostávajú vľavo hore. */
.esh-card .esh-card-wish {
  position: absolute; top: 8px; right: 8px; z-index: 2; width: 34px; height: 34px;
  background: rgba(255,255,255,.9); color: var(--esh-ink-soft); box-shadow: none; border: 0;
}
.esh-card .esh-card-wish:hover { background: var(--esh-surface-alt); color: var(--esh-ink); }
.esh-card .esh-card-wish.active { color: var(--esh-sale); }
.esh-card .esh-card-wish.active svg { fill: var(--esh-sale); }
.esh-card .esh-card-wish:disabled { cursor: default; }

/* Listovanie obrázkov v náhľade karty (Zeezy 1.1 bod 11, assets/js/card-gallery.js) — šípky po
   nabehnutí myšou (na dotykových zariadeniach natrvalo), bodky dole pod obrázkom. */
.esh-card-img-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--esh-border); background: rgba(255,255,255,.92);
  color: var(--esh-ink); display: flex; align-items: center; justify-content: center; padding: 0;
  opacity: 0; transition: opacity .15s ease, background-color .15s ease;
}
.esh-card-img-prev { left: 8px; }
.esh-card-img-next { right: 8px; }
.esh-card:hover .esh-card-img-nav, .esh-card-img-nav:focus-visible { opacity: 1; }
.esh-card-img-nav:hover { background: var(--zeezy-lime); border-color: var(--zeezy-lime); }
.esh-card-img-dots {
  position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; display: flex; justify-content: center; gap: 5px;
  pointer-events: none;
}
.esh-card-img-dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--esh-border); transition: background-color .15s ease; }
.esh-card-img-dots span.active { background: var(--esh-ink); }
@media (hover: none) { .esh-card-img-nav { opacity: 1; } }
.esh-wishlist-btn {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--esh-ink);
  display: flex; align-items: center; justify-content: center; border: none; flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.esh-wishlist-btn:hover { background: var(--esh-accent); color: #fff; }
.esh-wishlist-btn.active { color: var(--esh-accent); }
.esh-wishlist-btn.active svg { fill: var(--esh-accent); }
.esh-wishlist-tip {
  /* Vždy TESNE NAD tlačidlom (žiadosť používateľa) — position:fixed voči VIEWPORTU (nie voči
     karte produktu), pripojené priamo do <body> a umiestnené cez getBoundingClientRect() v
     assets/js/wishlist.js. Karty produktov majú overflow:hidden (zaoblené rohy), takže absolútne
     pozicovanie voči karte by hlášku pri okraji orezalo — fixed + body totiž obchádza tento
     problém úplne (14.9.2026 oprava orezanej hlášky v listingu). */
  position: fixed; z-index: 1000; transform: translate(-50%, -100%); margin-top: -8px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.esh-wishlist-hint {
  background: var(--esh-ink); color: #fff; font-size: var(--esh-fs-sm); padding: 6px 10px;
  border-radius: var(--esh-radius-sm); width: max-content; max-width: 220px; text-align: center;
}
.esh-wishlist-hint::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--esh-ink);
}
.esh-wishlist-hint a { color: #fff; text-decoration: underline; }

/* Výberový popup — keď má zákazník viac než 1 zoznam, klik na srdiečko namiesto okamžitého
   prepnutia ponúkne, do ktorého zoznamu (zoznamov) sa má produkt uložiť (14.9.2026). */
.esh-wishlist-picker {
  background: var(--esh-surface); color: var(--esh-ink); border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius-sm); padding: 10px 12px; width: 220px; text-align: left;
}
.esh-wishlist-picker::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--esh-surface);
}
.esh-wishlist-picker-heading {
  font-size: var(--esh-fs-sm); text-transform: uppercase; letter-spacing: .04em; color: var(--esh-ink-soft);
  margin-bottom: 6px;
}
.esh-wishlist-picker label {
  display: flex; align-items: center; gap: 8px; font-size: var(--esh-fs-sm); padding: 4px 0; cursor: pointer;
}
.esh-wishlist-picker .esh-wishlist-picker-link {
  display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--esh-border);
  font-size: var(--esh-fs-sm); color: var(--esh-accent); text-decoration: underline;
}

/* ── No-image placeholder (real "bez fotky" state, nie wireframe krížiky) ─ */
.esh-noimg { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--esh-ink-soft); }
.esh-noimg svg { opacity: .55; }
.esh-noimg span { font-size: var(--esh-fs-xs); letter-spacing: .04em; text-transform: uppercase; }

/* ── Tabs (Novinky / Akcie) ───────────────────────────────────────── */
.esh-tabs { border-bottom: 2px solid var(--esh-border-soft); gap: 4px; }
.esh-tabs .nav-link {
  border: none; border-bottom: 2px solid transparent; border-radius: 0; color: var(--esh-ink-soft);
  padding: 0 0 10px; margin-bottom: -2px; margin-right: 24px; font-size: var(--esh-fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .3px;
}
.esh-tabs .nav-link.active { background: none; color: var(--esh-ink); border-bottom-color: var(--esh-accent); }

/* ── Footer ───────────────────────────────────────────────────────── */
/* Tmavomodrá pätička (21.10.2026, spätná väzba kolegov; mockup Zeezy 1.1) — biele nadpisy, svetlé texty,
   limetkové podčiarknutie nadpisov a hover odkazov (limetková na navy má kontrast 9,3:1). */
.esh-footer { background: var(--zeezy-navy); color: rgba(255,255,255,.78); border-top: 0; }
.esh-footer h6 {
  color: #fff; font-family: var(--esh-font); font-weight: 500;
  font-size: var(--esh-fs-base); letter-spacing: normal; text-transform: none; position: relative;
  padding-bottom: 14px; margin-bottom: 18px;
}
.esh-footer h6::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 3px; background: var(--zeezy-lime);
}
.esh-footer a { color: rgba(255,255,255,.78); font-size: var(--esh-fs-sm); }
.esh-footer a:hover { color: var(--zeezy-lime); }
.esh-footer p { font-size: var(--esh-fs-sm); }
.esh-footer hr { border-color: rgba(255,255,255,.25); opacity: 1; }
.esh-footer .text-soft { color: rgba(255,255,255,.6); }
/* Pás Comgate (3.11.2026): na mobile na stred, na desktope pod stĺpcami Právne informácie → Kontakt — začína
   na 3. z 5 stĺpcov vpravo od loga (logo 3/12 = 25 % + 2 × 15 %). Záporný horný okraj ho vytiahne hneď pod
   „Cookies“ (Zákaznícky servis má o 2 odkazy viac — pri zmene počtu odkazov v Menu treba doladiť). */
.esh-footer-pay { text-align: center; }
@media (min-width: 992px) {
  .esh-footer-pay { margin-left: 55%; margin-top: -51px !important; text-align: left; }
}
.esh-footer .badge.text-bg-light { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.esh-footer a.esh-footer-logo { display: inline-block; }
.esh-footer-logo img { height: 48px; width: auto; display: block; }
.esh-footer .esh-footer-slogan { color: #fff; font-size: var(--esh-fs-base); font-weight: 600; margin: 10px 0 28px; }
.esh-footer .esh-social {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.esh-footer .esh-social:hover { border-color: var(--zeezy-lime); color: var(--zeezy-lime); }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.esh-breadcrumb {
  font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); background: var(--esh-surface-alt);
  border-radius: var(--esh-radius-sm); padding: 10px 16px; display: flex; align-items: center; gap: 6px;
}
.esh-breadcrumb a { color: var(--esh-ink-soft); display: inline-flex; align-items: center; }
.esh-breadcrumb a:hover { color: var(--esh-accent); }
.esh-breadcrumb .esh-crumb-sep { color: var(--esh-ink-soft); opacity: .6; }
.esh-breadcrumb .esh-crumb-current { color: var(--esh-ink); font-weight: 600; }

/* Full-width pás pre breadcrumb (category.php + product.php; search.php zatiaľ ostáva pôvodný
   kontajnerovaný .esh-breadcrumb, nemenený). Rovnaký princíp ako
   esh-topbar/esh-header/esh-catnav vyššie (vlastný <div class="container"> vnútri pre zarovnanie
   obsahu), len tu escapuje von z <main class="container py-4">, nie je priamym potomkom body.
   margin-top ruší presne 1.5rem horný padding main.py-4, nech pás sedí hneď pod .esh-catnav bez
   medzery. */
.esh-breadcrumb-band {
  background: var(--esh-surface-alt);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
  margin-top: -1.5rem;
}
.esh-breadcrumb-band .esh-breadcrumb { border-radius: 0; padding-left: 13px; padding-right: 0; }

/* ── Breadcrumb šípky à la Thomann (Zeezy 1.1 bod 8, 20.10.2026) ──
   Odkazy = sivé šípkové dlaždice (clip-path), domček je prvá dlaždica bez zárezu vľavo, aktuálna
   stránka na konci obyčajný text bez dlaždice. Oddeľovače "/" v markupe sa skryjú. Pás je biely
   (sivé dlaždice by na sivom pruhu zanikli). Hover = limetková dlaždica, navy text.
   Pod 768px sa celý rad neláme, ale posúva vodorovne. */
.esh-breadcrumb-band { background: var(--esh-surface); }
.esh-breadcrumb-band .esh-breadcrumb {
  background: none; padding: 12px 0; gap: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.esh-breadcrumb-band .esh-breadcrumb::-webkit-scrollbar { display: none; }
.esh-breadcrumb-band .esh-crumb-sep { display: none; }
.esh-breadcrumb-band .esh-breadcrumb > a {
  --crumb-tip: 10px;
  flex-shrink: 0; height: 34px; padding: 0 16px 0 calc(var(--crumb-tip) + 10px); margin-right: -6px;
  background: #EEF0F2; color: var(--esh-ink); white-space: nowrap;
  clip-path: polygon(0 0, calc(100% - var(--crumb-tip)) 0, 100% 50%, calc(100% - var(--crumb-tip)) 100%, 0 100%, var(--crumb-tip) 50%);
  transition: background-color .15s ease;
}
.esh-breadcrumb-band .esh-breadcrumb > a:first-child {
  padding-left: 12px; border-radius: var(--esh-radius-sm) 0 0 var(--esh-radius-sm);
  clip-path: polygon(0 0, calc(100% - var(--crumb-tip)) 0, 100% 50%, calc(100% - var(--crumb-tip)) 100%, 0 100%);
}
.esh-breadcrumb-band .esh-breadcrumb > a:hover { background: var(--zeezy-lime); color: var(--zeezy-navy); }
.esh-breadcrumb-band .esh-crumb-current {
  flex-shrink: 0; padding: 0 12px 0 20px; white-space: nowrap; color: var(--esh-ink); font-weight: 600;
}
.esh-crumb-back-icon { display: none; }

/* Produkt na mobile (Zeezy 1.1 bod 9): len nadradená kategória so šípkou doľava (à la Kytary). */
@media (max-width: 767.98px) {
  .esh-breadcrumb-band .esh-breadcrumb--product > a:not(.esh-crumb-parent) { display: none; }
  .esh-breadcrumb-band .esh-breadcrumb--product > a.esh-crumb-parent {
    background: none; clip-path: none; padding: 0; margin: 0; height: auto; gap: 6px; font-weight: 600;
  }
  .esh-breadcrumb-band .esh-breadcrumb--product > a.esh-crumb-parent:hover { background: none; color: var(--esh-accent); }
  .esh-breadcrumb--product .esh-crumb-back-icon { display: inline-flex; }
}

/* ── Category tree (esh-catnav) / sidebar filter / subcategory tiles ─
   Strom kategórií sa presunul do esh-catnav 28.9.2026 (pôvodne tu, pre sidebar) — tieto pravidlá
   sú teraz štýl vnútra svetlého dropdown/accordion panelu v hornom menu, nezmenené. .esh-sidebar
   nižšie obsahuje už len filter. */
.esh-sidebar { background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius); padding: 20px; }

.esh-cat-tree, .esh-cat-tree ul { list-style: none; margin: 0; padding: 0; }
.esh-cat-tree ul { padding-left: 16px; margin-top: 2px; }
.esh-cat-tree li { margin: 0; }
/* Kategória s podkategóriami nemá href, celý riadok (meno + šípka) je .esh-cat-toggle (28.9.2026,
   na žiadosť) — klik na ňu len rozbaľuje/zbaľuje, netreba samostatný odkaz na jej vlastnú
   stránku. Leaf kategória (bez potomkov) zostáva normálny <a href>. Rovnaká typografia pre oboje.
   Výnimka (30.9.2026): ROOT kategória s potomkami je <a href class="esh-cat-toggle"> — desktop klik
   naviguje, mobile klik len rozbaľuje (viď assets/js/category-nav.js). */
.esh-cat-tree a, .esh-cat-tree .esh-cat-toggle {
  display: block; width: 100%; padding: 6px 0; color: var(--esh-ink-soft); font-size: var(--esh-fs-sm);
  border-left: 2px solid transparent; padding-left: 8px; margin-left: -8px;
  background: none; border-top: none; border-right: none; border-bottom: none;
  font-family: inherit; text-align: left; cursor: pointer;
}
.esh-cat-tree > li > a, .esh-cat-tree > li > .esh-cat-toggle { font-weight: 700; color: var(--esh-ink); font-size: var(--esh-fs-base); }
.esh-cat-tree a:hover, .esh-cat-tree .esh-cat-toggle:hover { color: var(--esh-accent); }
.esh-cat-tree a.active, .esh-cat-tree .esh-cat-toggle.active {
  color: var(--esh-accent); font-weight: 700; border-left-color: var(--esh-accent);
}

/* Rozbaľovacia šípka — vpravo/dole podľa aria-expanded (mobile klik) alebo :hover (desktop),
   rovnaký rotačný vzor ako .esh-catnav-toggle. .esh-cat-node je flex s wrapom, aby sa vnorený
   <ul> (deti) zalomil na samostatný celý riadok pod tlačidlo, bez ďalšieho obaľujúceho <div>. */
.esh-cat-node { display: flex; flex-wrap: wrap; align-items: center; }
.esh-cat-node > a, .esh-cat-node > .esh-cat-toggle {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.esh-cat-toggle svg { flex-shrink: 0; transition: transform .15s; transform: rotate(-90deg); }
.esh-cat-toggle[aria-expanded="true"] svg { transform: rotate(0deg); }

/* Zbalené/rozbalené (28.9.2026) — bez server-side stavu (viď esh_render_category_tree()), vždy
   vykreslené zbalené. Klik (assets/js/category-nav.js prepína len aria-expanded) funguje na
   VŠETKÝCH úrovniach a všade (mobile aj desktop) — .esh-cat-node > ul je defaultne skryté,
   flex-basis:100% platí len keď je zobrazené (zalomí <ul> na vlastný riadok pod tlačidlom).
   Root kategória (priamy potomok .esh-catnav-tree) navyše na desktope reaguje aj na hover
   (29.9.2026, na žiadosť) — podkategórie vo vnútri panelu UŽ hoverom nereagujú, len klikom, nech
   sa panel nezatvára pri "netrafenom" prejazde myšou cez vnorené položky. */
.esh-cat-node > ul { display: none; flex-basis: 100%; }
.esh-cat-toggle[aria-expanded="true"] + ul { display: block; }
@media (min-width: 768px) {
  .esh-catnav-tree > .esh-cat-node:hover > ul { display: block; }
  .esh-catnav-tree > .esh-cat-node:hover > .esh-cat-toggle svg { transform: rotate(0deg); }
}

/* ── Filtre kategórie (parametre s "Do filtra") ──────────────────────── */
/* Toggle (28.9.2026) — na mobile zbalené predvolene (rovnaký vzor ako .esh-catnav-toggle, na
   desktope vynútene otvorené cez .esh-filter-collapse { display:block !important }, viď @media
   nižšie), Bootstrap collapse (data-bs-toggle), žiadny vlastný JS. */
.esh-filter-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; font: inherit; font-weight: 700; cursor: pointer;
  color: var(--esh-ink); padding: 0 0 12px; margin-bottom: 6px;
}
.esh-filter-toggle > svg:last-child { flex-shrink: 0; transition: transform .15s; }
.esh-filter-toggle[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.esh-filter-clear { font-size: var(--esh-fs-sm); font-weight: 600; }
.esh-filter-group { border-top: 1px solid var(--esh-border-soft); padding-top: 14px; margin-top: 14px; }
.esh-filter-group:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.esh-filter-group-title { font-weight: 700; font-size: var(--esh-fs-sm); color: var(--esh-ink); margin-bottom: 10px; }
.esh-filter-option {
  display: flex; align-items: center; gap: 8px; font-size: var(--esh-fs-sm); color: var(--esh-ink-soft);
  cursor: pointer; padding: 3px 0;
}
.esh-filter-option input { accent-color: var(--esh-accent); width: 15px; height: 15px; flex-shrink: 0; }
.esh-filter-count { margin-left: auto; color: var(--esh-ink-soft); font-size: var(--esh-fs-xs); }
/* "Zobraziť viac/menej" (30.9.2026) — Bootstrap collapse nad hodnotami za ESH_FILTER_VISIBLE_VALUES,
   text sa prepína cez aria-expanded, žiadny vlastný JS. */
.esh-filter-more {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 4px 0 0;
  font: inherit; font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-ink); cursor: pointer;
}
.esh-filter-more svg { transition: transform .15s; }
.esh-filter-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.esh-filter-more[aria-expanded="true"] .esh-filter-more-show,
.esh-filter-more[aria-expanded="false"] .esh-filter-more-hide { display: none; }

/* Statický (zástupný) cenový rozsah — vizuál z prototypu, bez reálneho min/max dotazu ani
   posúvateľných úchytiek (punch-list). */
/* Cenový posuvník (1.10.2026) — dva <input type=range> cez seba, klikateľné sú len guličky
   (pointer-events), výplň medzi nimi nastavuje assets/js/price-range.js cez --from/--to (%). */
.esh-price-range-track { position: relative; height: 4px; background: var(--esh-border); border-radius: 999px; margin: 14px 7px 16px; }
.esh-price-range-fill {
  position: absolute; left: var(--from, 0%); right: calc(100% - var(--to, 100%)); top: 0; bottom: 0;
  background: var(--zeezy-lime); border-radius: 999px;
}
.esh-price-range-track input[type=range] {
  position: absolute; left: -7px; width: calc(100% + 14px); top: 50%; transform: translateY(-50%);
  margin: 0; height: 14px; background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.esh-price-range-track input[type=range]::-webkit-slider-runnable-track { background: none; height: 14px; }
.esh-price-range-track input[type=range]::-moz-range-track { background: none; }
.esh-price-range-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; cursor: pointer; width: 16px; height: 16px;
  background: var(--zeezy-lime); border: 0; border-radius: 50%; box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(23,57,90,.35), 0 1px 3px rgba(23,57,90,.25);
}
.esh-price-range-track input[type=range]::-moz-range-thumb {
  pointer-events: auto; cursor: pointer; width: 16px; height: 16px;
  background: var(--zeezy-lime); border: 0; border-radius: 50%; box-sizing: border-box;
  box-shadow: 0 0 0 1px rgba(23,57,90,.35), 0 1px 3px rgba(23,57,90,.25);
}
.esh-price-range-track input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--esh-accent-soft); }

.esh-subcat-tile {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  padding: 8px 16px; display: inline-flex; align-items: center; color: var(--esh-ink); font-weight: 600; font-size: var(--esh-fs-sm);
  transition: border-color .15s, color .15s;
}
.esh-subcat-tile:hover { border-color: var(--esh-accent); color: var(--esh-accent); }

/* Podkategórie ako obrázkové dlaždice (Category.dc.html) — odlišné od okrúhlych
   .esh-cat-tile na homepage; tu štvorcová dlaždica s okrajom, väčšia. Ikony sú generické
   (žiadne obrázkové pole pri kategórii v DB, viď punch-list), rovnaký rotujúci set ako inde. */
.esh-subcat-imgtile { display: block; text-decoration: none; }
.esh-subcat-imgtile-img {
  width: 100%; max-width: 200px; aspect-ratio: 1/1; background: var(--esh-surface-alt);
  border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; color: var(--esh-accent);
  transition: border-color .15s;
}
.esh-subcat-imgtile:hover .esh-subcat-imgtile-img { border-color: var(--esh-accent); }
.esh-subcat-imgtile-img.has-img { background: #fff; overflow: hidden; }
.esh-subcat-imgtile-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.esh-subcat-imgtile-label {
  display: block; max-width: 200px; margin: 0 auto; text-align: center;
  font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-ink);
}
/* Homepage: na desktope všetky kategórie vedľa seba (4.11.2026, teraz 7); najviac šírka 1/6 riadku. */
@media (min-width: 992px) {
  .esh-home-cats > .col { flex: 1 0 0; max-width: calc(100% / 6); }
}

/* ── Top 3 najpredávanejšie (category page, highlighted band) — reálne produkty podľa
   produkty.sold_qty_60d od 1.10.2026, viď includes/eshop/category.php. ───────────────────────── */
/* Full-bleed pás (rovnaký princíp ako .esh-breadcrumb-band) — vlastný <div class="container">
   vnútri drží obsah zarovnaný, samotné pozadie ide cez celú šírku obrazovky. */
.esh-top3-band {
  background: var(--esh-surface-alt);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.esh-top3-band .container { padding-top: 24px; padding-bottom: 24px; }
.esh-top3-card {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  display: flex; align-items: stretch; overflow: hidden; height: 100%;
}
.esh-top3-card-img {
  flex: 0 0 100px; background: var(--esh-surface-alt); display: flex; align-items: center;
  justify-content: center; padding: 14px; box-sizing: border-box; color: var(--esh-accent);
}
.esh-top3-card-img.has-img { background: #fff; padding: 8px; }
.esh-top3-card-img picture, .esh-top3-card-img img { display: block; width: 100%; height: 84px; object-fit: contain; }
.esh-top3-card:hover { border-color: var(--esh-accent); }
.esh-top3-card-body { padding: 12px 14px; display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 4px; }
.esh-top3-card-title { font-size: var(--esh-fs-sm); color: var(--esh-ink); line-height: 1.4; }
.esh-top3-card-price { font-size: var(--esh-fs-sm); font-weight: 700; color: var(--esh-ink); }
.esh-top3-card-price.esh-price-sale { color: var(--esh-sale); }

/* ── Skladová dostupnosť ako pill vedľa ceny na karte (namiesto samostatného riadku textu) ──── */
.esh-stock-pill {
  display: inline-flex; align-items: center; gap: 3px; font-size: var(--esh-fs-xs); font-weight: 600;
  padding: 3px 7px; border-radius: 999px; flex-shrink: 0; white-space: nowrap;
  background: rgba(47,138,78,.1); color: var(--esh-ok);
}
.esh-stock-pill.out { background: var(--esh-sale-soft); color: var(--esh-sale); }
.esh-stock-pill.backorder { background: #fdf3dc; color: #9a6a0c; } /* nie je skladom, ale dodanie napr. "Do 3 dní" */

/* ── Článok pod zoznamom produktov, plná šírka pásu (Category.dc.html "SEO text") ───────────── */
.esh-cat-article-band {
  background: var(--esh-surface-alt); border-top: 1px solid var(--esh-border-soft);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 3rem;
}
.esh-cat-article-band .container { padding-top: 32px; padding-bottom: 32px; }
.esh-cat-article-inner { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: center; }
.esh-cat-article-img {
  width: 100%; aspect-ratio: 1/1; background: var(--esh-surface); border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius-sm); display: flex; align-items: center; justify-content: center;
  padding: 28px; box-sizing: border-box; color: var(--esh-accent);
}
.esh-cat-article-title { font-size: var(--esh-fs-base); font-weight: 700; color: var(--esh-ink); margin: 0 0 8px; }
.esh-cat-article-text { font-size: var(--esh-fs-sm); line-height: 1.7; color: var(--esh-ink-soft); margin: 0; }
@media (max-width: 767.98px) {
  .esh-cat-article-inner { grid-template-columns: 1fr; }
  .esh-cat-article-img { max-width: 160px; }
}

/* ── Odber noviniek — plná šírka, zdieľaný partial includes/eshop/_newsletter_band.php (home +
   category). Formulár zatiaľ nikam neposiela (action="#") — punch-list. ─────────────────────── */
/* Zeezy 1.1 (bod 14): bledomodrý pás s navy textom namiesto plného navy. */
.esh-newsletter-band {
  background: var(--zeezy-sky); color: var(--esh-ink);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.esh-newsletter-band .container {
  padding-top: 28px; padding-bottom: 28px; display: flex; align-items: center;
  justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.esh-newsletter-band h2 { color: var(--esh-ink); font-size: var(--esh-fs-md); font-weight: 700; margin: 0 0 6px; }
.esh-newsletter-band p { color: var(--esh-ink); opacity: .85; font-size: var(--esh-fs-sm); margin: 0; max-width: 420px; }
.esh-newsletter-band-text { flex: 1 1 320px; min-width: 0; }
.esh-newsletter-band-form {
  flex: 0 1 460px; min-width: 280px; display: flex; background: #fff;
  border: 1px solid rgba(23,57,90,.18); border-radius: var(--esh-radius-sm); overflow: hidden;
}
.esh-newsletter-band-form input {
  flex-grow: 1; min-width: 0; border: none; outline: none; padding: 12px 16px; font-size: var(--esh-fs-sm); color: var(--esh-ink);
}
.esh-newsletter-band-form button {
  background: var(--zeezy-lime); color: var(--zeezy-navy); border: none; padding: 12px 24px; font-size: var(--esh-fs-sm); font-weight: 600; flex-shrink: 0;
}
.esh-newsletter-band-form button:hover { background: var(--esh-cart-dark); color: var(--zeezy-navy); }

/* ── Sort / toolbar ───────────────────────────────────────────────── */
.esh-sort .form-select { border-color: var(--esh-border); font-size: var(--esh-fs-sm); }
.esh-sort-pill {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: 999px;
  padding: 7px 14px; font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-ink); text-decoration: none;
  display: inline-block; line-height: 1.2;
}
.esh-sort-pill:hover { border-color: var(--esh-accent); color: var(--esh-accent); }
.esh-sort-pill.active { background: var(--zeezy-lime); border-color: var(--zeezy-lime); color: var(--zeezy-navy); }
.esh-sort-pill.active:hover { color: var(--zeezy-navy); }
.esh-sort-pill.disabled { background: var(--esh-surface-alt); color: var(--esh-ink-soft); cursor: not-allowed; }

/* ── Pagination ───────────────────────────────────────────────────── */
.esh-pagination .page-link { color: var(--esh-ink); border-color: var(--esh-border); }
.esh-pagination .page-item.active .page-link { background: var(--esh-accent); border-color: var(--esh-accent); color: #fff; }
.esh-pagination .page-link:hover { border-color: var(--esh-accent); color: var(--esh-accent); }
.esh-pagination .page-item.active .page-link:hover { color: #fff; }
.esh-page-arrow {
  width: 36px; height: 36px; border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  background: #fff; color: var(--esh-ink); display: flex; align-items: center; justify-content: center;
}
.esh-page-arrow:hover { border-color: var(--esh-accent); color: var(--esh-accent); }
.esh-page-arrow.disabled { color: var(--esh-border); pointer-events: none; }

/* Ikonové tlačidlá v Mojom konte (Obľúbené — premenovať/presunúť/odstrániť) */
.esh-form-card .btn-sm > svg:only-child { display: block; }

/* ── Product page (Product.dc.html, 29.9.2026) ─────────────────────── */
/* 5.11.2026: minmax(0,1fr) — s holým 1fr (= minmax(auto,1fr)) pás náhľadov s veľa fotkami
   (napr. 14) roztiahol stĺpec nad šírku mobilu → stránka sa dala zoomovať, fotka nebola v strede. */
.esh-product-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.esh-product-main > * { min-width: 0; }
/* 13.10.2026 (stretnutie 8.10.): galéria 60 % : info 40 % (predtým 45 : 55). */
@media (min-width: 992px) { .esh-product-main { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); } }
.esh-product-title { font-size: var(--esh-fs-lg); font-weight: 700; color: var(--esh-ink); margin: 0 0 8px; line-height: 1.3; }
.esh-product-rating { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; }
.esh-product-rating .esh-stars svg { width: 13px; height: 13px; }
.esh-product-rating-label { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); }

.esh-product-price-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
/* pricing.js prepisuje innerHTML bloku v poradí "nová cena, stará cena" — order:-1 dá starú cenu
   vizuálne pred novú (ako v prototype) bez zásahu do JS. */
/* 13.10.2026: cena na detaile produktu väčšia (2.1rem → 3rem), preškrtnutá 1.4rem. */
.esh-product-price-row .esh-price-block { display: flex; align-items: baseline; gap: 12px; font-size: 3rem; }
.esh-product-price-row .esh-price-block .esh-price-old { font-size: 1.4rem; }
.esh-product-price-row .esh-price-old { order: -1; font-size: var(--esh-fs-base); margin-left: 0 !important; }
.esh-product-price-vat { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); }
.esh-product-sale-until { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); margin: -8px 0 14px; }
.esh-stock-pill-lg { font-size: var(--esh-fs-sm); padding: 5px 10px; gap: 6px; }

.esh-product-buy {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 20px; margin: 14px 0 16px; border-bottom: 1px solid var(--esh-border);
}
/* Krokovač ako v prototype: input vľavo, +/− nad sebou vpravo. Trieda .esh-qty ostáva kvôli
   cart.js (closest('.esh-qty')), vzhľad prebíja .esh-qty.esh-qty-v. */
.esh-qty.esh-qty-v { display: flex; align-items: stretch; height: 48px; }
.esh-qty.esh-qty-v input { width: 40px; height: 100%; border: none; text-align: center; font-size: var(--esh-fs-sm); }
.esh-qty-v-btns { display: flex; flex-direction: column; border-left: 1px solid var(--esh-border); }
.esh-qty.esh-qty-v .esh-qty-v-btns button {
  width: 22px; height: 24px; border: none; background: #fff; color: var(--esh-ink); font-size: var(--esh-fs-sm); line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.esh-qty.esh-qty-v .esh-qty-v-btns button:first-child { border-bottom: 1px solid var(--esh-border); }
.esh-btn-cart.esh-btn-cart-main {
  background: var(--esh-cart); width: 300px; max-width: 100%; height: 48px; font-size: var(--esh-fs-sm);
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.esh-btn-cart.esh-btn-cart-main { color: var(--esh-cart-ink); }
.esh-btn-cart.esh-btn-cart-main:hover { background: var(--esh-cart-dark); color: var(--esh-cart-ink); }

.esh-product-meta-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
/* Logo výrobcu na detaile produktu (1.10.2026) — rámček 200×30, logo zmenšené so zachovaním pomeru. */
.esh-brand-logo {
  width: 200px; height: 30px; display: flex; align-items: center; flex-shrink: 0; overflow: hidden;
}
.esh-brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.esh-brand-logo span { font-size: var(--esh-fs-sm); font-weight: 700; color: var(--esh-ink); text-transform: uppercase; letter-spacing: .5px; }
/* Výrobca ako odkaz na /manufacturer/{slug}/ (2.10.2026) + hlavička listingu výrobcu */
a.esh-brand-logo { text-decoration: none; }
a.esh-brand-logo:hover span { color: var(--esh-accent); }
.esh-manufacturer-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.esh-manufacturer-head .esh-brand-logo { height: 48px; width: auto; max-width: 200px; }
.esh-brand-logo-placeholder {
  width: 200px; height: 30px; background: var(--esh-surface-alt); border: 1px dashed #cbd5e0; border-radius: 4px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  font-size: var(--esh-fs-xs); color: #a0aec0; text-transform: uppercase; letter-spacing: .5px;
}
.esh-product-code { font-size: var(--esh-fs-sm); font-weight: 400; color: var(--esh-ink); }
.esh-product-subheading { font-size: var(--esh-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--esh-ink); margin-bottom: 12px; }
.esh-variant-swatches { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.esh-variant-swatch {
  width: 56px; height: 56px; background: var(--esh-surface-alt); border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--esh-ink-soft);
}
.esh-variant-swatch.active { border: 2px solid var(--esh-accent); color: var(--esh-accent); }
.esh-product-short { font-size: var(--esh-fs-sm); line-height: 1.6; color: var(--esh-ink-soft); margin: 0 0 22px; }

.esh-product-actions { display: flex; align-items: center; gap: 22px; }
.esh-product-action { display: flex; align-items: center; gap: 7px; color: var(--esh-ink-soft); font-size: var(--esh-fs-sm); }
/* "Pridať medzi obľúbené" — reálne srdiečko (wishlist.js hľadá .esh-wishlist-btn[data-produkt-id]),
   len bez okrúhleho vzhľadu tlačidla z karty produktu. */
.esh-wishlist-btn.esh-product-action {
  width: auto; height: auto; border-radius: 0; background: none; box-shadow: none; padding: 0; color: var(--esh-ink-soft);
}
.esh-wishlist-btn.esh-product-action:hover { background: none; color: var(--esh-accent); }
.esh-wishlist-btn.esh-product-action.active { color: var(--esh-accent); }

.esh-product-benefits {
  display: flex; flex-direction: column; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--esh-border);
}
.esh-product-benefit { display: flex; gap: 12px; align-items: flex-start; }
.esh-product-benefit svg { flex-shrink: 0; margin-top: 2px; color: var(--esh-accent); }
.esh-product-benefit-title { font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-ink); }
.esh-product-benefit-sub { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); margin-top: 2px; }
.esh-product-promo {
  border-radius: var(--esh-radius-sm); overflow: hidden; background: var(--zeezy-navy);
  padding: 18px 24px; min-height: 135px; margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.esh-product-promo h3 { color: #fff; font-size: var(--esh-fs-md); font-weight: 700; margin: 0; line-height: 1.25; }
.esh-product-promo svg { color: #ffd21d; opacity: .9; flex-shrink: 0; }
/* 5.11.2026: obsah z widgetu product-promo (TinyMCE obalí do <p>) — bez okrajov, biely text/odkazy. */
.esh-product-promo-body { color: #fff; min-width: 0; }
.esh-product-promo-body p { margin: 0; }
.esh-product-promo-body p + p, .esh-product-promo-body p + h2, .esh-product-promo-body p + h3 { margin-top: 0; }
.esh-product-promo-body h2 { color: #fff; font-size: var(--esh-fs-md); font-weight: 700; margin: 0; line-height: 1.25; }
.esh-product-promo-body a { color: #fff; }
.esh-product-promo-body a:hover { color: var(--zeezy-lime); }

.esh-gallery-main {
  background: #fff; border: 1px solid var(--esh-border); border-radius: var(--esh-radius);
  aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden;
  position: relative; padding: 15px; /* 4.11.2026: z 50px */ box-sizing: border-box; margin-top: 16px;
}
.esh-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
/* Badge na detaile — rovnaké ako na karte, len o stupeň väčšie */
.esh-gallery-main .esh-badge-sale { top: 10px; left: 10px; font-size: var(--esh-fs-xs); padding: 4px 8px; }
.esh-gallery-main .esh-badges { top: 10px; left: 10px; right: auto; gap: 6px; }
.esh-gallery-main .esh-badge-sale ~ .esh-badges { top: 40px; }
.esh-gallery-main .esh-badge-pill { font-size: var(--esh-fs-xs); padding: 4px 8px; }
.esh-gallery-zoom {
  width: 100%; height: 100%; border: none; background: none; padding: 0; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center;
}

/* ── Zväčšený náhľad na celú obrazovku (Zeezy 1.1 bod 10, 20.10.2026, à la Muziker) ──
   Stĺpec: hlavička (názov + X) | plocha s obrázkom a veľkými šípkami (flex:1) | počítadlo | pás náhľadov. */
.esh-image-modal .modal-content { background: #fff; border: none; display: flex; flex-direction: column; }
.esh-lightbox-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px 14px 24px; flex-shrink: 0;
}
.esh-lightbox-title {
  font-size: var(--esh-fs-base); font-weight: 600; color: var(--esh-ink); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.esh-lightbox-close {
  width: 48px; height: 48px; flex-shrink: 0; border: 0; border-radius: 50%; background: none; padding: 0;
  color: var(--esh-ink); display: flex; align-items: center; justify-content: center; transition: background-color .15s ease;
}
.esh-lightbox-close:hover, .esh-lightbox-close:focus-visible { background: var(--esh-surface-alt); }
.esh-lightbox-stage {
  position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center;
  padding: 0 88px;
}
.esh-lightbox-stage > img, .esh-lightbox-stage picture > img { max-width: 100%; max-height: 100%; object-fit: contain; }
.esh-image-modal #eshImageCarousel, .esh-image-modal .carousel-inner, .esh-image-modal .carousel-item { width: 100%; height: 100%; }
.esh-image-modal .carousel-item.active, .esh-image-modal .carousel-item-next, .esh-image-modal .carousel-item-prev { display: flex; align-items: center; justify-content: center; }
.esh-image-modal .carousel-item img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.esh-lightbox-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--esh-border); background: #fff;
  color: var(--esh-ink); display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background-color .15s ease, border-color .15s ease;
}
.esh-lightbox-prev { left: 20px; }
.esh-lightbox-next { right: 20px; }
.esh-lightbox-nav:hover, .esh-lightbox-nav:focus-visible { background: var(--zeezy-lime); border-color: var(--zeezy-lime); }
.esh-lightbox-counter { text-align: center; font-size: var(--esh-fs-xs); color: var(--esh-ink-soft); padding: 10px 0 6px; flex-shrink: 0; }
.esh-lightbox-thumbs {
  display: flex; gap: 8px; justify-content: safe center; overflow-x: auto; scrollbar-width: none;
  padding: 4px 16px 18px; flex-shrink: 0;
}
.esh-lightbox-thumbs::-webkit-scrollbar { display: none; }
.esh-lightbox-thumb {
  width: 64px; height: 64px; flex: 0 0 64px; padding: 4px; background: #fff; cursor: pointer;
  border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm); transition: border-color .15s ease;
}
.esh-lightbox-thumb img { width: 100%; height: 100%; object-fit: contain; }
.esh-lightbox-thumb:hover { border-color: var(--zeezy-lime); }
.esh-lightbox-thumb.active { border: 2px solid var(--zeezy-lime); padding: 3px; }
@media (max-width: 767.98px) {
  .esh-lightbox-head { padding: 8px 8px 8px 16px; }
  .esh-lightbox-stage { padding: 0 8px; }
  .esh-lightbox-nav { width: 44px; height: 44px; }
  .esh-lightbox-prev { left: 8px; }
  .esh-lightbox-next { right: 8px; }
  .esh-lightbox-thumb { width: 52px; height: 52px; flex-basis: 52px; }
}
/* Thumb pás — jeden riadok (4 viditeľné), posúvanie šípkami; šípky zapína gallery.js iba pri pretečení */
.esh-gallery-thumbs-wrap { position: relative; margin-top: 10px; }
.esh-gallery-thumbs {
  display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.esh-gallery-thumbs::-webkit-scrollbar { display: none; }
.esh-gallery-thumb {
  flex: 0 0 calc((100% - 30px) / 4); scroll-snap-align: start;
  aspect-ratio: 1 / 1; border-radius: var(--esh-radius-sm); border: 1px solid var(--esh-border);
  background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden;
  padding: 12px; cursor: pointer;
}
.esh-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--esh-border);
  background: #fff; color: var(--esh-ink); box-shadow: var(--esh-shadow);
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.esh-gallery-nav[hidden] { display: none; }
.esh-gallery-nav:disabled { opacity: .35; cursor: default; }
.esh-gallery-nav-prev { left: -12px; }
.esh-gallery-nav-next { right: -12px; }
.esh-gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }
/* Zeezy 1.1 (bod 15): rámček vybraného náhľadu limetkový. */
.esh-gallery-thumb:hover { border-color: var(--zeezy-lime); }
.esh-gallery-thumb.active { border-color: var(--zeezy-lime); border-width: 2px; }
.esh-price-lg { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.esh-price-lg .esh-price-old { font-size: var(--esh-fs-md); }
.esh-variant-chip {
  border: 1px solid var(--esh-border); border-radius: 999px; padding: 7px 18px; font-size: var(--esh-fs-sm);
  background: var(--esh-surface); color: var(--esh-ink); cursor: default;
}
.esh-variant-chip.active { background: var(--esh-ink); color: #fff; border-color: var(--esh-ink); }
.esh-stock-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: #3a9a5c; }
.esh-stock-dot.out { background: #c1701e; }
.esh-stock-dot.backorder { background: #e0a526; } /* nie je skladom, ale dodanie napr. "Do 3 dní" */
.esh-qty {
  display: inline-flex; align-items: center; border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm);
  overflow: hidden;
}
.esh-qty button {
  width: 38px; height: 42px; border: none; background: var(--esh-surface); color: var(--esh-ink); font-size: var(--esh-fs-base);
}
.esh-qty input {
  width: 46px; height: 42px; border: none; border-left: 1px solid var(--esh-border); border-right: 1px solid var(--esh-border);
  text-align: center; font-size: var(--esh-fs-sm);
}
.esh-btn-cart {
  background: var(--esh-ink); color: #fff; border: none; border-radius: var(--esh-radius-sm);
  height: 42px; font-weight: 600; padding: 0 22px;
}
.esh-btn-cart:hover { background: var(--zeezy-lime); color: var(--zeezy-navy); }
.esh-icon-btn {
  width: 42px; height: 42px; border-radius: var(--esh-radius-sm); border: 1px solid var(--esh-border);
  background: var(--esh-surface); color: var(--esh-ink); display: flex; align-items: center; justify-content: center;
}
.esh-icon-btn:hover { border-color: var(--esh-accent); color: var(--esh-accent); }

/* Recenzie (Product.dc.html) — plnošírkový sivý pás, zatiaľ statický zástupný obsah (punch-list) */
.esh-reviews-band {
  background: var(--esh-surface-alt);
  width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: 8px;
}
.esh-reviews-band .container { padding-top: 40px; padding-bottom: 48px; }
.esh-reviews-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; }
.esh-reviews-summary { display: flex; align-items: center; gap: 10px; }
.esh-reviews-score { font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-ink); }
.esh-reviews-count { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); }
.esh-stars-filled { display: inline-flex; gap: 1px; }
.esh-reviews-list { display: flex; flex-direction: column; gap: 16px; }
.esh-review-card {
  background: #fff; border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm); padding: 22px;
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 768px) { .esh-review-card { grid-template-columns: 150px 1fr; gap: 20px; } }
.esh-review-date { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); margin-top: 6px; }
.esh-review-author { font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-ink); margin-top: 2px; }
.esh-review-title { font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-ink); margin: 0 0 6px; }
.esh-review-text { font-size: var(--esh-fs-sm); color: #3E4F68; line-height: 1.6; margin: 0 0 12px; }
.esh-review-votes { display: flex; gap: 16px; }
.esh-review-votes span { display: flex; align-items: center; gap: 5px; font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); }

/* Popis + parametre (Product.dc.html) */
.esh-product-desc-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 28px; }
@media (min-width: 768px) { .esh-product-desc-grid { grid-template-columns: 320px 1fr; } }
.esh-product-desc-img {
  width: 100%; max-width: 320px; aspect-ratio: 1/1; background: #fff; border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius-sm); display: flex; align-items: center; justify-content: center;
  padding: 32px; box-sizing: border-box; color: var(--esh-accent); overflow: hidden;
}
.esh-product-desc-img img { width: 100%; height: 100%; object-fit: contain; }
.esh-spec-box { border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm); overflow: hidden; }
.esh-spec-table { width: 100%; border-collapse: collapse; font-size: var(--esh-fs-sm); }
.esh-spec-table th {
  text-align: left; background: var(--esh-surface-alt); color: var(--esh-ink); font-size: var(--esh-fs-sm);
  text-transform: uppercase; letter-spacing: .3px; padding: 10px 16px;
}
.esh-spec-table td { padding: 10px 16px; color: var(--esh-ink); }
.esh-spec-table td:first-child { color: var(--esh-ink-soft); width: 220px; }
.esh-spec-table tr + tr th, .esh-spec-table tr + tr td { border-top: 1px solid var(--esh-border); }

/* ── Košík — offcanvas panel ──────────────────────────────────────── */
.esh-cart-offcanvas { width: 400px; max-width: 100%; }
.esh-cart-offcanvas .offcanvas-header { border-bottom: 1px solid var(--esh-border); }
.esh-cart-offcanvas .offcanvas-title { display: flex; align-items: center; gap: 8px; font-size: var(--esh-fs-base); }
.esh-cart-empty svg { opacity: .4; }

.esh-cart-list { display: flex; flex-direction: column; gap: 14px; }
.esh-cart-item { display: flex; gap: 10px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--esh-border-soft); }
.esh-cart-item:last-child { border-bottom: none; padding-bottom: 0; }
.esh-cart-item-img {
  width: 56px; height: 56px; border-radius: var(--esh-radius-sm); background: #fff;
  border: 1px solid var(--esh-border); display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0; color: var(--esh-ink-soft);
}
.esh-cart-item-img img { width: 100%; height: 100%; object-fit: contain; }
.esh-cart-item-body { flex: 1; min-width: 0; }
.esh-cart-item-title { font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-ink); display: block; }
.esh-cart-item-unavailable { opacity: .6; }
.esh-cart-remove { border: none; background: none; color: var(--esh-ink-soft); flex-shrink: 0; padding: 4px; }
.esh-cart-remove:hover { color: var(--esh-sale); }

.esh-qty-sm button { width: 28px; height: 30px; }
.esh-qty-sm input { width: 34px; height: 30px; font-size: var(--esh-fs-sm); }

.esh-cart-total { border-top: 1px solid var(--esh-border); }

/* ── Animácie — pridanie do košíka ────────────────────────────────── */
@keyframes esh-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.esh-add-cart.esh-added, .esh-btn-cart.esh-added { animation: esh-pop .35s ease; background: var(--esh-accent) !important; }

@keyframes esh-bump { 0% { transform: scale(1); } 50% { transform: scale(1.45); } 100% { transform: scale(1); } }
.esh-badge-count.esh-bump { animation: esh-bump .4s ease; }

/* Nedá sa objednať (nie je skladom a objednávanie bez skladu je vypnuté, 9.10.2026): neutrálna sivá aj pri hoveri. */
.esh-add-cart:disabled, .esh-add-cart:disabled:hover,
.esh-btn-cart:disabled, .esh-btn-cart:disabled:hover { background: #e2e2e2; color: #8c8c8c; cursor: not-allowed; }

/* ── Formuláre (registrácia a ďalšie budúce, napr. prihlásenie) ──────────── */
.esh-form-card {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius);
  padding: 28px;
}
.esh-btn-primary {
  background: var(--esh-ink); color: #fff; border: none; border-radius: var(--esh-radius-sm);
  height: 44px; font-weight: 600; padding: 0 22px;
}
.esh-btn-primary:hover { background: var(--zeezy-lime); color: var(--zeezy-navy); }

.esh-review {
  display: flex; gap: 14px; padding-top: 16px; border-top: 1px solid var(--esh-border-soft);
}
.esh-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--esh-accent-soft); color: var(--esh-accent);
  display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0;
}

/* ── Section heading (underlined label, "Nakupujte podľa kategórie" / "Obľúbené produkty" style) ── */
.esh-section-heading {
  display: inline-block; font-size: var(--esh-fs-md); font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--esh-ink); padding-bottom: 10px; border-bottom: 2px solid var(--esh-accent);
}
.esh-section-head-row {
  display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--esh-border-soft);
  margin-top: -1px; margin-bottom: 24px;
}
/* Zeezy 1.1 (bod 15): podčiarknutie nadpisu sekcie (napr. "Popis") limetkové, 3px aby nebolo tenkou linkou. */
.esh-section-head-row .esh-section-heading { border-bottom: 3px solid var(--zeezy-lime); margin-bottom: -1px; }
.esh-section-head-link { font-size: var(--esh-fs-sm); font-weight: 600; color: var(--esh-accent); }
.esh-product-description { font-size: var(--esh-fs-base); /* 4.11.2026: z sm */ line-height: 1.7; color: #3E4F68; }

/* ── Shop-by-category icon tiles (homepage) ──────────────────────────── */
.esh-cat-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; color: var(--esh-ink); text-align: center; }
.esh-cat-tile-icon {
  width: 72px; height: 72px; border-radius: 50%; background: var(--esh-surface-alt); border: 1px solid var(--esh-border);
  display: flex; align-items: center; justify-content: center; color: var(--esh-accent); transition: background .15s;
}
.esh-cat-tile:hover .esh-cat-tile-icon { background: var(--esh-accent); color: #fff; }
.esh-cat-tile-icon.has-img, .esh-cat-tile:hover .esh-cat-tile-icon.has-img { background: #fff; overflow: hidden; padding: 10px; }
.esh-cat-tile:hover .esh-cat-tile-icon.has-img { border-color: var(--esh-accent); }
.esh-cat-tile-icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
.esh-cat-tile-label { font-size: var(--esh-fs-sm); font-weight: 600; }

/* ── Deal-of-the-day banner (homepage) ────────────────────────────────── */
.esh-deal-banner {
  background: linear-gradient(135deg, var(--esh-ink) 0%, var(--esh-accent) 130%); color: #fff;
  border-radius: var(--esh-radius); padding: 28px 32px; display: flex; align-items: center;
  justify-content: space-between; gap: 20px;
}
.esh-deal-banner h3 { color: #fff; margin: 0; }
.esh-deal-banner-badge {
  display: inline-block; background: #ffd21d; color: var(--esh-ink); font-size: var(--esh-fs-xs); font-weight: 700;
  padding: 4px 10px; border-radius: 999px; margin-bottom: 10px;
}

/* ── Testimonials (homepage) ──────────────────────────────────────────── */
.esh-testimonial {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: var(--esh-radius);
  padding: 22px; height: 100%; display: flex; flex-direction: column; gap: 12px;
}
.esh-testimonial-stars svg { margin-right: 1px; }
.esh-testimonial-name { font-weight: 600; font-size: var(--esh-fs-sm); color: var(--esh-ink); }

/* ── Static star rating (product card / product page — no reviews data yet, see punch-list) ── */
.esh-stars { display: inline-flex; gap: 1px; }
.esh-stars svg { width: 11px; height: 11px; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
  .esh-hero .container { padding-top: 40px; padding-bottom: 40px; }
  .esh-hero h1 { font-size: 1.7rem; }
  .esh-hero-art { display: none; }
  .esh-topbar { display: none; }

  /* Mobile: pruh hlavných kategórií skrytý, celý strom je v off-canvas #eshCatMenu */
  .esh-catnav-collapse { display: none; }
  .esh-catnav-tree > .esh-cat-node > a,
  .esh-catnav-tree > .esh-cat-node > .esh-cat-toggle { white-space: normal; }
  .esh-catnav-deals { border-top: 1px solid var(--esh-border-soft); }
}
@media (min-width: 768px) {
  .esh-catnav-collapse { display: block !important; flex: 1 1 auto; min-width: 0; padding-left: 8px; }
  .esh-filter-collapse { display: block !important; }

  .esh-catnav-toggle {
    width: 260px; flex-shrink: 0; border-right: 1px solid var(--esh-border-soft);
    text-transform: uppercase; letter-spacing: .5px;
  }
  .esh-catnav-deals { width: auto; margin-left: auto; }

  /* Hlavné kategórie vedľa seba (nahrádza pôvodné .nav.flex-nowrap), rozbalené podkategórie ako
     dropdown panel pod danou položkou — nie flyout do strany, vnorené hlbšie úrovne sú v tom
     istom paneli len odsadené (rovnaký princíp ako pôvodný sidebar strom). */
  .esh-catnav-tree { display: flex; flex-wrap: nowrap; }
  .esh-catnav-tree > .esh-cat-node { position: relative; }
  .esh-catnav-tree > .esh-cat-node > ul {
    position: absolute; top: 100%; left: 0; z-index: 20; min-width: 240px; margin-top: 0;
    max-height: 70vh; overflow-y: auto; box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }
  /* Panel musí byť vizuálne priľahlý k tlačidlu (margin-top:0 vyššie) — inak medzi tlačidlom a
     panelom vznikne "mŕtva zóna" bez elementu, myš z nej pri prechode nadol vypadne z :hover a
     menu sa zavrie skôr, než sa dá prejsť na podkategóriu (28.9.2026, nahlásené). */
}

/* Výber hviezdičiek (Môj účet → Hodnotenia) — radio 5..1 v DOM + row-reverse, aby `:checked ~ label`
   a `:hover ~ label` zafarbili aj všetky hviezdičky naľavo od vybranej, bez JS. */
.esh-rating-input { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
.esh-rating-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.esh-rating-input label { cursor: pointer; color: #e1e1e1; line-height: 0; }
.esh-rating-input label svg { fill: currentColor; }
.esh-rating-input input:checked ~ label,
.esh-rating-input label:hover,
.esh-rating-input label:hover ~ label { color: #ffab00; }
.esh-rating-input input:focus-visible + label { outline: 2px solid var(--esh-accent); outline-offset: 2px; border-radius: 4px; }

/* Listing bez reloadu (zeezy, 1.10.2026, assets/js/catalog-ajax.js) — počas načítania stlmený a
   neklikateľný, nech je vidieť, že sa niečo deje, a nedá sa spustiť ďalšia zmena naslepo. */
#eshCatalog { transition: opacity .15s; }
#eshCatalog.is-loading { opacity: .5; pointer-events: none; }

/* Doprava v pokladni + panel košíka (5.10.2026, prevzaté z creactive): logo dopravcu, odhad
   odoslania/doručenia (_checkout_shipping_options.php), widget doprava zadarmo pod tlačidlom
   pokladne (cart_promo_widget_html()). Farby z premenných značky. */
.esh-cart-promo { margin-top: 12px; padding: 12px 16px; background: var(--esh-border-soft); border-radius: var(--esh-radius-sm); display: flex; align-items: center; gap: 12px; color: var(--esh-ink-soft); font-size: var(--esh-fs-sm); font-weight: 600; line-height: 1.35; }
.esh-cart-promo > * { margin: 0; }
.esh-cart-promo img { width: 70px; height: auto; flex-shrink: 0; }
.esh-cart-promo strong, .esh-cart-promo b { color: var(--esh-ink); }
.esh-chk-carrier-logo { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.esh-chk-estimate { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); margin-top: 4px; padding-left: 1.5em; }
.esh-chk-estimate strong { color: var(--esh-ink); }

/* ── Rollout z creactive 8.10.2026: checkout v sekciách, modal „Pridané do košíka", tlačidlá ──
   Len nové triedy (includes/eshop/checkout.php, _checkout_*_options.php, _cart_added_modal.php, Môj účet →
   Zaplatiť). Farby a písmo z tokenov projektu (--esh-*), existujúce pravidlá sa nemenia.
   Stavy sekcie (assets/js/checkout.js): is-open (rozbalená), is-done (zbalená do zhrnutia + Zmeniť),
   is-locked (ešte nedostupná). Riadok dopravy/platby .esh-chk-option je klikateľný celý. */
.esh-chk-step { padding: 22px 24px; transition: opacity .2s; }
@media (max-width: 575.98px) { .esh-chk-step { padding: 16px 14px; } }
.esh-chk-step-head { display: flex; align-items: flex-start; gap: 14px; }
.esh-chk-step.is-done .esh-chk-step-head { cursor: pointer; }
.esh-chk-step-num {
  width: 32px; height: 32px; border-radius: 50%; background: var(--esh-ink); color: #fff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--esh-fs-sm);
}
.esh-chk-step-num svg { display: none; }
.esh-chk-step.is-done .esh-chk-step-num { background: var(--esh-accent); color: var(--esh-accent-ink); }
.esh-chk-step.is-done .esh-chk-step-num span { display: none; }
.esh-chk-step.is-done .esh-chk-step-num svg { display: block; }
.esh-chk-step.is-locked { opacity: .55; }
.esh-chk-step.is-locked .esh-chk-step-num { background: var(--esh-border); color: var(--esh-ink-soft); }
.esh-chk-step-main { flex: 1; min-width: 0; }
.esh-chk-step-title { font-weight: 700; font-size: var(--esh-fs-base); line-height: 32px; margin: 0; }
.esh-chk-step-summary { font-size: var(--esh-fs-sm); line-height: 1.45; }
.esh-chk-step-summary:empty { display: none; }
.esh-chk-step-edit { display: none; background: none; border: 0; padding: 6px 0; font-size: var(--esh-fs-sm); font-weight: 700; color: var(--esh-ink); text-decoration: underline; flex-shrink: 0; }
.esh-chk-step.is-done .esh-chk-step-edit { display: inline-block; }
.esh-chk-step-body { display: none; margin-top: 18px; }
.esh-chk-step.is-open .esh-chk-step-body { display: block; }

.esh-chk-option {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 8px; cursor: pointer;
  border: 1px solid var(--esh-border); border-radius: var(--esh-radius); transition: border-color .2s, background-color .2s;
}
.esh-chk-option:last-child { margin-bottom: 0; }
.esh-chk-option:hover { border-color: var(--esh-ink); }
.esh-chk-option:has(input:checked) { border-color: var(--esh-accent-dark); background: var(--esh-accent-soft); }
.esh-chk-option > .form-check-input { margin: 0; flex-shrink: 0; width: 1.2em; height: 1.2em; cursor: pointer; }
.esh-chk-option-main { flex: 1; min-width: 0; }
.esh-chk-option-name { font-weight: 700; font-size: var(--esh-fs-base); }
.esh-chk-option > .esh-price { white-space: nowrap; font-weight: 700; margin-left: auto; }
.esh-chk-option .esh-chk-pickup { cursor: default; }
@media (max-width: 575.98px) {
  .esh-chk-option { padding: 10px 12px; gap: 10px; }
  .esh-chk-option .esh-chk-carrier-logo { width: 44px; height: 44px; }
}

/* Bočné zhrnutie: na desktope pláva vpravo (hlavička tu nie je sticky). */
@media (min-width: 992px) { .esh-chk-summary { position: sticky; top: 24px; } }
.esh-chk-summary-items { max-height: 240px; overflow-y: auto; }
.esh-chk-sum-line { display: flex; justify-content: space-between; gap: 12px; font-size: var(--esh-fs-sm); margin-bottom: 6px; }
.esh-chk-sum-item { align-items: center; }
.esh-chk-sum-thumb { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm); background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden; color: var(--esh-ink-soft); }
.esh-chk-sum-thumb picture, .esh-chk-sum-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.esh-chk-coupon-toggle { background: none; border: 0; padding: 0; font-size: var(--esh-fs-sm); color: var(--esh-ink); text-decoration: underline; text-align: left; }
.esh-chk-coupon-toggle:hover { color: var(--esh-accent-dark); }

/* Veľkosti tlačidiel (.esh-btn-primary má inak pevnú výšku 44px). */
.esh-btn-primary.esh-btn-lg, .esh-btn-primary.esh-btn-sm, .esh-btn-primary.esh-btn-xs {
  display: inline-flex; align-items: center; justify-content: center; height: auto; text-decoration: none;
}
.esh-btn-primary.esh-btn-lg { min-height: 56px; font-size: var(--esh-fs-base); }
.esh-btn-primary.esh-btn-sm { min-height: 36px; padding: 0 16px; font-size: var(--esh-fs-sm); }
.esh-btn-primary.esh-btn-xs { min-height: 28px; padding: 0 12px; font-size: var(--esh-fs-sm); }
/* Tlačidlo Objednať: „s povinnosťou platby" menším písmom priamo na tlačidle (zákon o ochrane spotrebiteľa). */
.esh-btn-primary.esh-chk-finish-btn { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; padding-bottom: 8px; }
.esh-chk-finish-btn small { font-size: var(--esh-fs-sm); font-weight: 600; opacity: .9; }

/* Modal „Pridané do košíka" (includes/eshop/_cart_added_modal.php, zap./vyp. na značke). */
.esh-added-modal .modal-content { border: 0; border-radius: var(--esh-radius); }
.esh-added-modal .modal-header { border-bottom: 1px solid var(--esh-border); padding: 18px 24px; }
.esh-added-modal .modal-title { font-weight: 700; font-size: var(--esh-fs-md); display: flex; align-items: center; gap: 8px; margin: 0; }
.esh-added-modal .modal-title svg { color: var(--esh-accent); }
.esh-added-modal .modal-body { padding: 20px 24px; }
.esh-added-modal .modal-footer { border-top: 0; padding: 0 24px 24px; gap: 10px; justify-content: space-between; }
.esh-added-modal .modal-footer > * { margin: 0; flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.esh-added-item { display: flex; align-items: center; gap: 16px; }
.esh-added-img { width: 90px; height: 90px; flex-shrink: 0; border: 1px solid var(--esh-border); border-radius: var(--esh-radius-sm); background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.esh-added-img img { width: 100%; height: 100%; object-fit: contain; }
.esh-added-info { flex: 1; min-width: 0; }
.esh .esh-added-name { font-weight: 700; font-size: var(--esh-fs-base); line-height: 1.3; color: var(--esh-ink); text-decoration: none; display: block; }
.esh .esh-added-name[href]:hover { text-decoration: underline; }
.esh-added-qty { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); margin-top: 4px; }
.esh-added-price { font-weight: 700; font-size: var(--esh-fs-md); white-space: nowrap; }
/* Sivé tlačidlo (Zavrieť) — rovnaký tvar ako .esh-btn-primary. */
.esh-btn-secondary {
  background: var(--esh-border-soft); color: var(--esh-ink); border: none; border-radius: var(--esh-radius-sm);
  min-height: 44px; padding: 0 22px; font-weight: 600; transition: background-color .2s;
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.esh-btn-secondary:hover { background: var(--esh-border); color: var(--esh-ink); }
@media (max-width: 575.98px) {
  .esh-added-item { flex-wrap: wrap; }
  .esh-added-img { width: 70px; height: 70px; }
  .esh-added-price { width: 100%; text-align: right; }
  .esh-added-modal .modal-footer { flex-direction: column-reverse; }
  .esh-added-modal .modal-footer > * { width: 100%; }
}

/* Omnibus (8.10.2026) — vysvetlenie preškrtnutej ceny pod cenou na detaile produktu. */
.esh-price-omnibus { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft, #6c757d); }

/* ── Popis kategórie nad zoznamom (9.10.2026, includes/eshop/_category_description.php) ──
   Zbalené = 2 riadky plynulého textu (nadpisy a odstavce v riadku za sebou), rozbalené = celý článok. */
.esh-cat-desc { margin: 0 0 1.5rem; max-width: 1100px; }
.esh-cat-desc__text { line-height: 1.5; }
.esh-cat-desc__text img { max-width: 100%; height: auto; }
.esh-cat-desc:not(.is-open) .esh-cat-desc__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.esh-cat-desc:not(.is-open) .esh-cat-desc__text > * {
  display: inline; font-size: inherit; line-height: inherit; margin: 0; padding: 0; text-transform: none;
}
.esh-cat-desc:not(.is-open) .esh-cat-desc__text > :is(h1, h2, h3, h4, h5, h6) { font-weight: 700; }
.esh-cat-desc:not(.is-open) .esh-cat-desc__text > *::after { content: " "; }
.esh-cat-desc:not(.is-open) .esh-cat-desc__text :is(img, table, iframe, ul, ol) { display: none; }
.esh-cat-desc__toggle {
  background: none; border: 0; padding: 4px 0 0; font-size: var(--esh-fs-sm); font-weight: 600;
  color: var(--esh-accent, currentColor); text-decoration: underline; cursor: pointer;
}
.esh-cat-desc__toggle:hover { color: var(--esh-accent-dark, currentColor); }

/* ── Rollout z creactive 13.10.2026 — Môj účet (hodnotenia, klikateľné riadky) + hláška skladu ── */
/* Hviezdičky "Ohodnotiť" pri položke v detaile objednávky: sivé, pri hover žlté; hodnotené = žlté. */
.esh-review-stars { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; vertical-align: middle; text-decoration: none; }
.esh-review-stars__text { font-size: var(--esh-fs-sm); line-height: 1; }
.esh-review-stars:not(.is-rated):hover svg { fill: #ffab00; }
/* Môj účet → Hodnotenia: karta objednávky s produktmi. */
.esh-review-order__head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px; border-bottom: 1px solid var(--esh-border); background: #fafafa; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.esh-review-item { display: flex; align-items: center; gap: 14px; padding: 10px 16px; }
.esh-review-item + .esh-review-item { border-top: 1px solid var(--esh-border); }
.esh-review-item .min-w-0 { min-width: 0; }
/* Klikateľný riadok tabuľky — Môj účet → objednávky: každá bunka je odkaz na celú výšku. */
.esh-row-link { display: block; padding: .6rem .5rem; color: inherit; text-decoration: none; }
.esh a.esh-row-link { color: inherit; text-decoration: none; }
.esh-row-linked:hover > td { background: var(--esh-accent-soft); }
/* Hláška "Max. N ks – viac nemáme skladom" pod poľom množstva (assets/js/cart.js showStockHint).
   position: fixed — JS ju umiestni pod pole, nad kartou aj nad panelom košíka (offcanvas 1045). */
.esh-stock-hint { position: fixed; z-index: 1090; max-width: 240px; padding: 6px 10px; border-radius: 6px;
  background: #b42318; color: #fff; font-size: var(--esh-fs-sm); line-height: 1.35; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18); pointer-events: none; animation: esh-hint-in .15s ease; }
.esh-stock-hint::before { content: ""; position: absolute; top: -5px; left: var(--esh-hint-arrow, 50%); margin-left: -5px;
  border: 5px solid transparent; border-top: 0; border-bottom-color: #b42318; }
@keyframes esh-hint-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.esh-added-stock { margin-bottom: 14px; padding: 8px 12px; border-radius: 8px; background: #fef3f2; color: #b42318;
  border: 1px solid #fecdca; font-size: var(--esh-fs-sm); font-weight: 600; }

/* ── Tlačidlo "Kategórie" v pruhu kategórií ──
   Zeezy 1.1 bod 4 (20.10.2026): ☰ + text bez orámovania, bez podfarbenia a bez pevnej šírky
   (13.10.–20.10. podfarbený hranatý blok 260px). Bez hover efektu (podčiarknutie majú len kategórie).
   4.11.2026: oválne tlačidlo ako „Zobraziť všetko“ (.esh-ocmenu-showall), predvolene limetkové pozadie,
   hover tmavšia limetka. Táto špecifickejšia definícia prebíja aj pill z 3.11.2026 vyššie. */
.esh-catnav .esh-catnav-toggle {
  width: auto; align-self: center; margin-right: 20px; padding: 7px 14px;
  background: var(--zeezy-lime); color: var(--zeezy-navy); border: 1px solid var(--zeezy-lime); border-radius: 999px;
  font-weight: 600; font-size: var(--esh-fs-sm); text-transform: none; letter-spacing: 0; transition: background .15s, border-color .15s;
}
.esh-catnav .esh-catnav-toggle:hover,
.esh-catnav .esh-catnav-toggle:focus-visible { background: var(--esh-cart-dark); border-color: var(--esh-cart-dark); color: var(--zeezy-navy); }
@media (min-width: 768px) {
  .esh-catnav .esh-catnav-toggle { border-right: 0; }
}

/* ── Šírka stránky (Zeezy 1.1 bod 5, 20.10.2026) ──
   Bootstrap .container končí na 1320px — na veľkých monitoroch obsah „mizol" v strede. Širšie
   ako Bootstrap: 1440px od 1400px okna (ako Muziker) a nový breakpoint 1680px → 1600px. */
@media (min-width: 1400px) { body.esh .container { max-width: 1440px; } }
@media (min-width: 1680px) { body.esh .container { max-width: 1600px; } }

/* ── Mobil + tablet (< 992px, Zeezy 1.1 bod 6) ──
   Pruh kategórií skrytý (strom v off-canvas cez ☰ v hlavičke), ☰ vľavo pri logu, ikony účtu/košíka
   v riadku s logom, vyhľadávanie pod nimi na celú šírku. Porovnať (len vizuálne) sa na mobile neukazuje. */
@media (max-width: 991.98px) {
  .esh-header { padding-top: 12px !important; padding-bottom: 12px !important; }
  .esh-header-row { flex-wrap: wrap; gap: 12px 14px; }
  .esh-header-burger { display: flex; order: 1; }
  .esh-header-row .esh-logo { order: 2; }
  .esh-header-row .esh-header-actions { order: 3; gap: 16px; }
  .esh-header-row .esh-search { order: 4; flex: 1 1 100%; max-width: none; }
  .esh-header-compare { display: none; }
  .esh-header-actions .esh-icon-link:first-child { padding-right: 0; border-right: 0; }
  .esh-catnav { display: none; }
}
@media (max-width: 575.98px) {
  .esh-header-cart-total { display: none; }
}

/* ── Prekrytie pri vyhľadávaní (Zeezy 1.1 bod 7, assets/js/search-overlay.js) ──
   Sivá vrstva cez celú stránku, formulár vyhľadávania (aj s live návrhmi) zostáva nad ňou.
   .esh-header nemá vlastný z-index, takže z-index .esh-search sa porovnáva priamo s vrstvou. */
.esh-search-overlay {
  position: fixed; inset: 0; z-index: 1030; background: rgba(20, 24, 31, .5);
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease;
}
body.esh-search-open .esh-search-overlay { opacity: 1; visibility: visible; }
body.esh-search-open .esh-search { z-index: 1031; }
/* 4.11.2026: rámik okolo CELÉHO poľa aj s lupou v tmavej farbe (limetkový ring bol len okolo inputu, na limetkovom
   tlačidle sa strácal). Ring na formulári + tmavé okraje z :focus-within. */
body.esh-search-open .esh-search { border-radius: var(--esh-radius-sm); box-shadow: 0 0 0 1px var(--esh-accent); }

/* Tlačidlá ako <a> — inak ich prebije .esh a (farba accent = navy → navy text na navy tlačidle). */
.esh a.esh-btn-primary, .esh a.esh-btn-cart { color: #fff; }
/* Odkaz ako tlačidlo (13.10.2026): text zvisle aj vodorovne na stred pevnej výšky (<a> nie je flex ako <button>). */
.esh a.esh-btn-primary, .esh a.esh-btn-cart { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.esh a.esh-btn-primary:hover, .esh a.esh-btn-cart:hover { color: var(--zeezy-navy); }

/* ── Nákupné akcie = zelené tlačidlá .esh-btn-buy (13.10.2026) ──
   Pokračovať k objednávke (modal), Do pokladne (košík), Odoslať objednávku, Registrovať, Zaplatiť
   (poďakovanie, Môj účet, /order-pay/). "Do košíka" (.esh-add-cart, .esh-btn-cart-main) ide cez --esh-cart. */
.esh .esh-btn-buy, .esh a.esh-btn-buy { background: var(--esh-cart); color: var(--esh-cart-ink); }
.esh .esh-btn-buy:hover, .esh a.esh-btn-buy:hover { background: var(--esh-cart-dark); color: var(--esh-cart-ink); }
/* Čísla krokov pokladne zelené ako nákupné akcie (13.10.2026); uzamknutý krok ostáva sivý (.is-locked vyššie). */
.esh-chk-step:not(.is-locked) .esh-chk-step-num { background: var(--esh-cart); color: var(--esh-cart-ink); }
/* "Akcie dňa" v pruhu kategórií = odkaz na /akciove-produkty/ (13.10.2026); hover/aktívna = tmavšia coral (4,9:1). */
.esh a.esh-catnav-deals { color: var(--esh-ink); text-decoration: none; }
.esh a.esh-catnav-deals:hover, .esh a.esh-catnav-deals.active { color: var(--esh-sale); }

/* Newsletter pás — formulár + poznámka o súhlase + hláška výsledku (13.10.2026, assets/js/newsletter.js). */
.esh-newsletter-band-side { flex: 0 1 460px; min-width: 280px; }
.esh-newsletter-band-side .esh-newsletter-band-form { width: 100%; }
.esh-newsletter-band .esh-newsletter-band-note { font-size: var(--esh-fs-sm); opacity: .75; margin: 8px 0 0; max-width: none; }
.esh-newsletter-band .esh-newsletter-band-msg { font-size: var(--esh-fs-sm); font-weight: 600; opacity: 1; margin: 8px 0 0; max-width: none; }
.esh-newsletter-band .esh-newsletter-band-msg.is-error { color: var(--esh-sale); }
.esh-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Košík (13.10.2026): pravý súhrn s tlačidlom "Do pokladne" ostáva pri scrolle viditeľný (ako .esh-chk-summary). */
@media (min-width: 992px) { .esh-cart-summary { position: sticky; top: 24px; } }

/* ── Verzie produktu (19.10.2026, z creactive 16.10.) — textové prepínače na sesterské karty v detaile produktu
   (includes/eshop/product.php, blok .esh-variants). Farby z tokenov --esh-*, každý projekt má svoje. ── */
.esh-variants { display: grid; gap: 12px; }
.esh-variants-title { font-weight: 600; font-size: var(--esh-fs-sm); color: var(--esh-ink); }
.esh-variants-label { font-size: var(--esh-fs-sm); color: var(--esh-ink-soft); margin-bottom: 6px; }
.esh-variants-label strong { color: var(--esh-ink); }
.esh-variants-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.esh-variant, .esh a.esh-variant {
  display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border: 1px solid var(--esh-border);
  border-radius: var(--esh-radius-sm); background: #fff; color: var(--esh-ink); font-size: var(--esh-fs-sm); line-height: 1.2;
  text-decoration: none; transition: border-color .15s ease-in-out;
}
.esh a.esh-variant:hover { border-color: var(--esh-ink); color: var(--esh-ink); }
.esh-variant.is-active { border: 2px solid var(--esh-ink); padding: 5px 13px; font-weight: 600; }
.esh a.esh-variant--other { color: var(--esh-ink-soft); }
.esh a.esh-variant--out { color: var(--esh-ink-soft); text-decoration: line-through; }

/* ── Košík (19.10.2026, z creactive 15.10.) — produkt bez skladu ostáva v košíku vyblednutý, mimo súčtu aj objednávky;
   upozornenie na sklad nad 5 položiek zbalené (<details>). ── */
.esh-cart-item-oos > *:not(:last-child), tr.esh-cart-item-oos > td:not(:last-child) { opacity: .5; }
.esh-cart-item-oos .esh-cart-item-img img, .esh-cart-item-oos img { filter: grayscale(1); }
.esh-cart-oos-label { color: #b45309; }
.esh-cart-stock-more summary { cursor: pointer; text-decoration: underline; font-size: var(--esh-fs-sm); }

/* "Novinky" vedľa "Akcie dňa" v pruhu kategórií (20.10.2026) — na desktope len prvý odkaz odsadený doprava. */
@media (min-width: 768px) { .esh-catnav-deals + .esh-catnav-deals { margin-left: 0; } }
/* 5.11.2026: pruh kategórií vždy v JEDNOM riadku. Pri užšom okne (a po --esh-fs-sm 15 px) sa TOP kategórie
   zalamovali do 2–3 riadkov. Teraz: zoznam sa zalamuje, ale má výšku presne jedného riadku a overflow:hidden →
   kategórie, ktoré sa nezmestia, sa schovajú (všetky sú v off-canvas menu „Kategórie"). Akcie/Novinky vpravo
   sa nezalamujú. Bez JS. Hlavné položky v pruhu nemajú dropdown (<ul>), takže orezanie nič neskryje. */
@media (min-width: 768px) {
  .esh-catnav .container { flex-wrap: nowrap; }
  .esh-catnav-collapse { flex: 1 1 0; }
  .esh-catnav-deals { flex-shrink: 0; white-space: nowrap; }
  .esh-catnav-tree { flex-wrap: wrap; height: calc(var(--esh-fs-sm) * 1.5 + 32px); overflow: hidden; }
  .esh-catnav-tree > .esh-cat-node > a { line-height: 1.5; }
}

/* ── Obsahové stránky (mnemos_pages, index.php route 'page' → <article>), Zeezy 20.10.2026 ──
   Čitateľná šírka, slogan „veci, ktoré ťa bavia." s limetkovou bodkou (brand manuál: bodka = podpis
   značky), značky [DOPLNIŤ: …] v texte výrazne žlté, nech sa pred spustením nezabudnú. */
.esh main > article { max-width: 760px; }
.esh main > article h1 { margin-bottom: .75rem; }
.esh main > article h2 { font-size: var(--esh-fs-md); margin-top: 1.75rem; }
.esh-page-lead { font-size: var(--esh-fs-lg); font-weight: 700; color: var(--esh-ink); margin-bottom: 1rem; }
.esh-lime-dot { color: var(--zeezy-lime); }
.esh main > article mark { background: #fff3b0; color: var(--esh-ink); padding: 0 .25em; border-radius: 3px; }

/* Odkazy na SEO uzly kategória × výrobca (21.10.2026, includes/eshop/_landing_node_links.php) */
.esh-nodelinks { margin: 2rem 0 1rem; }
.esh-nodelinks-top { margin: 0 0 1.5rem; }
.esh-nodelinks-title { font-size: var(--esh-fs-sm); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--esh-ink-soft); margin: 0 0 .75rem; }
.esh-nodelinks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.esh-nodelinks a { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--esh-border); border-radius: 999px; background: var(--esh-bg); color: var(--esh-ink); font-size: var(--esh-fs-sm); line-height: 1.3; text-decoration: none; transition: border-color .15s, color .15s; }
.esh-nodelinks a:hover { border-color: var(--esh-accent); color: var(--esh-accent-dark); }
.esh-nodelinks small { color: var(--esh-ink-soft); }
.esh-nodelinks ul.is-collapsible:not(.is-expanded) li.is-more { display: none; }
.esh-nodelinks-more { margin-top: .6rem; padding: 0; border: 0; background: none; color: var(--esh-ink-soft); font-size: var(--esh-fs-sm); text-decoration: underline; cursor: pointer; }
.esh-nodelinks-more:hover { color: var(--esh-ink); }