/* 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. Nadpisy Space Grotesk, telo Work Sans. */

:root {
  --esh-bg:          #ffffff;
  --esh-surface:     #ffffff;
  --esh-surface-alt: #f7fafc;
  --esh-ink:         #1a202c;
  --esh-ink-soft:    #718096;
  --esh-border:      #ebebeb;
  --esh-border-soft: #e5e5e5;

  --esh-accent:       #0068c8;
  --esh-accent-ink:   #ffffff;
  --esh-accent-soft:  rgba(0,104,200,0.1);
  --esh-accent-dark:  #00549e;

  --esh-sale:        #ef2d2d;
  --esh-sale-soft:   #fbe4e4;

  --esh-cart:        #2f8a4e;
  --esh-cart-dark:   #256b3c;

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

body.esh {
  background: var(--esh-bg);
  color: var(--esh-ink);
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.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: "Space Grotesk", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--esh-ink);
}
.esh .text-soft { color: var(--esh-ink-soft); }
.esh .eyebrow {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--esh-ink-soft);
}

/* ── Top contact bar ─────────────────────────────────────────────── */
.esh-topbar {
  font-size: .75rem; 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); }

/* ── 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; }
.esh-logo img { height: 40px; width: auto; display: block; }
.esh-search { flex: 1 1 auto; max-width: 640px; position: relative; }
.esh-search .form-control {
  border-radius: var(--esh-radius-sm) 0 0 var(--esh-radius-sm);
  border: 1px solid var(--esh-accent); border-right: none; height: 45px; font-size: .85rem;
}
.esh-search .btn {
  border-radius: 0 var(--esh-radius-sm) var(--esh-radius-sm) 0;
  background: var(--esh-accent); border: 1px solid var(--esh-accent); color: #fff; width: 50px;
}

/* ── 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: .85rem; }
.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: .78rem; 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: .85rem; 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: #1e1e1e; font-size: .8rem; 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); }
.esh-icon-badge-wrap { position: relative; display: inline-flex; }
.esh-badge-count {
  position: absolute; top: -7px; right: -9px;
  background: var(--esh-accent); color: #fff; 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: .85rem; font-weight: 600;
  color: var(--esh-ink); cursor: pointer;
}
.esh-catnav-toggle:hover { color: var(--esh-accent); }
.esh-catnav-deals {
  display: flex; align-items: center; gap: 8px; padding: 12px 16px; width: 100%;
  color: var(--esh-ink); font-size: .8rem; 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: 14px; 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); }

/* 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: 15px; 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; }
.esh-ocmenu-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  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: 15px; padding: 13px 16px 13px 20px;
  cursor: pointer; text-decoration: none; transition: background-color .2s, color .2s;
}
.esh-ocmenu-item svg { flex-shrink: 0; color: var(--esh-ink-soft); transition: color .2s; }
.esh-ocmenu-item:hover { background: var(--esh-accent); color: var(--esh-accent-ink); }
.esh-ocmenu-item:hover svg { color: var(--esh-accent-ink); }

.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: 15px; cursor: pointer;
}
.esh-ocmenu-panel-title {
  display: block; background: var(--esh-accent); color: var(--esh-accent-ink); font-weight: 700; font-size: 15px;
  padding: 13px 20px; text-transform: uppercase; text-decoration: none;
}
.esh-ocmenu-panel-title:hover { background: var(--esh-accent-dark); color: var(--esh-accent-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); }
.esh-ocmenu-list--l2 > li > .esh-ocmenu-row > a { padding: 11px 0 11px 20px; font-weight: 600; font-size: 14px; }
.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: 14px;
}
.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, #e6f2f1 0%, #e6f2f1 55%, var(--esh-accent) 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: .7rem;
  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: #4a5568; font-size: .9rem; 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: .82rem; 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(0,104,200,.25) 0%, rgba(0,104,200,0) 70%);
}
.esh-hero-glow svg { filter: drop-shadow(0 0 14px rgba(0,104,200,.45)); stroke-width: 1.1; }

/* ── 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: .75rem; font-weight: 600; color: var(--esh-ink); }
.esh-trust-sub { font-size: .65rem; 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;
}
.esh-card:hover { box-shadow: var(--esh-shadow); border-color: var(--esh-border); 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: .8rem; 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: .65rem; 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: .92rem; }
.esh-price-old { text-decoration: line-through; color: var(--esh-ink-soft); font-weight: 400; font-size: .78rem; }
.esh-price-sale { color: var(--esh-sale); }
.esh-badge-sale {
  position: absolute; top: 10px; left: 10px; background: var(--esh-sale); color: #fff;
  font-size: .68rem; 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: .68rem; font-weight: 600; text-transform: uppercase; padding: 4px 7px; border-radius: 3px;
  white-space: nowrap;
}
.esh-card-actions { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 8px; z-index: 1; opacity: 0; transition: opacity .18s ease; }
.esh-card:hover .esh-card-actions { opacity: 1; }
.esh-add-cart {
  width: 100%; background: var(--esh-cart); color: #fff; 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: .78rem; font-weight: 600;
}
.esh-add-cart:hover { background: var(--esh-cart-dark); }
.esh-add-cart:disabled { background: var(--esh-border); color: var(--esh-ink-soft); }

/* Množstvo + tlačidlo v jednom riadku na karte (28.9.2026, na žiadosť) — krokovač zdieľa
   .esh-qty/.esh-qty-sm s detailom produktu a košíkom (assets/js/cart.js rieši [data-qty-increase]/
   [data-qty-decrease] generický cez .closest('.esh-qty'), žiadny nový JS netreba). */
.esh-card-cart-row { display: flex; align-items: stretch; gap: 6px; }
.esh-card-cart-row .esh-add-cart { width: auto; flex: 1 1 auto; height: 36px; }
/* Menší zvislý krokovač na karte (prototyp: 36px, input 26px, +/− 16×18) */
.esh-qty.esh-qty-v.esh-qty-v-sm { height: 36px; flex-shrink: 0; }
.esh-qty.esh-qty-v.esh-qty-v-sm input { width: 26px; font-size: .7rem; padding: 0; }
.esh-qty.esh-qty-v.esh-qty-v-sm .esh-qty-v-btns button { width: 16px; height: 18px; font-size: .55rem; }
.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: .78rem; 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: .7rem; 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: .85rem; 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: .78rem; 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: .68rem; 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: .8rem; 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 ───────────────────────────────────────────────────────── */
.esh-footer { background: #ffffff; color: var(--esh-ink-soft); border-top: 1px solid var(--esh-border-soft); }
.esh-footer h6 {
  color: var(--esh-ink); font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 500;
  font-size: 1rem; 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: 2px; background: var(--esh-accent);
}
.esh-footer a { color: var(--esh-ink-soft); font-size: .8rem; }
.esh-footer a:hover { color: var(--esh-accent); }
.esh-footer p { font-size: .8rem; }
.esh-footer hr { border-color: var(--esh-border-soft); }
.esh-social {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--esh-border-soft);
  display: flex; align-items: center; justify-content: center; color: var(--esh-ink);
}
.esh-social:hover { border-color: var(--esh-accent); color: var(--esh-accent); }

/* ── Breadcrumb ───────────────────────────────────────────────────── */
.esh-breadcrumb {
  font-size: .82rem; 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; }

/* ── 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: .87rem;
  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: .92rem; }
.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: .76rem; 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: .82rem; color: var(--esh-ink); margin-bottom: 10px; }
.esh-filter-option {
  display: flex; align-items: center; gap: 8px; font-size: .85rem; 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: .78rem; }
/* "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: .78rem; 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(--esh-accent); 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: 14px; height: 14px;
  background: #fff; border: 2px solid var(--esh-accent); border-radius: 50%; box-sizing: border-box;
}
.esh-price-range-track input[type=range]::-moz-range-thumb {
  pointer-events: auto; cursor: pointer; width: 14px; height: 14px;
  background: #fff; border: 2px solid var(--esh-accent); border-radius: 50%; box-sizing: border-box;
}
.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: .85rem;
  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-label {
  display: block; max-width: 200px; margin: 0 auto; text-align: center;
  font-size: .8rem; font-weight: 600; color: var(--esh-ink);
}

/* ── 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: .78rem; color: var(--esh-ink); line-height: 1.4; }
.esh-top3-card-price { font-size: .9rem; 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: .68rem; font-weight: 600;
  padding: 3px 7px; border-radius: 999px; flex-shrink: 0; white-space: nowrap;
  background: rgba(47,138,78,.1); color: var(--esh-cart);
}
.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: .95rem; font-weight: 700; color: var(--esh-ink); margin: 0 0 8px; }
.esh-cat-article-text { font-size: .78rem; 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. ─────────────────────── */
.esh-newsletter-band {
  background: var(--esh-accent); color: #fff;
  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: #fff; font-size: 1.15rem; font-weight: 700; margin: 0 0 6px; }
.esh-newsletter-band p { color: #fff; opacity: .85; font-size: .78rem; 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-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: .78rem; color: var(--esh-ink);
}
.esh-newsletter-band-form button {
  background: #fff; color: #1e1e1e; border: none; padding: 12px 24px; font-size: .78rem; font-weight: 600; flex-shrink: 0;
}
.esh-newsletter-band-form button:hover { background: var(--esh-ink); color: #fff; }

/* ── Sort / toolbar ───────────────────────────────────────────────── */
.esh-sort .form-select { border-color: var(--esh-border); font-size: .85rem; }
.esh-sort-pill {
  background: var(--esh-surface); border: 1px solid var(--esh-border); border-radius: 999px;
  padding: 7px 14px; font-size: .78rem; 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(--esh-accent); border-color: var(--esh-accent); color: #fff; }
.esh-sort-pill.active:hover { color: #fff; }
.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) ─────────────────────── */
.esh-product-main { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 992px) { .esh-product-main { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); } }
.esh-product-title { font-size: 1.25rem; 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: .75rem; 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. */
.esh-product-price-row .esh-price-block { display: flex; align-items: baseline; gap: 12px; font-size: 2.1rem; }
.esh-product-price-row .esh-price-old { order: -1; font-size: 1.05rem; margin-left: 0 !important; }
.esh-product-price-vat { font-size: .75rem; color: var(--esh-ink-soft); }
.esh-product-sale-until { font-size: .72rem; color: var(--esh-ink-soft); margin: -8px 0 14px; }
.esh-stock-pill-lg { font-size: .75rem; 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: .82rem; }
.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: .7rem; 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: .82rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.esh-btn-cart.esh-btn-cart-main:hover { background: var(--esh-cart-dark); }

.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: .8rem; 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: .56rem; color: #a0aec0; text-transform: uppercase; letter-spacing: .5px;
}
.esh-product-code { font-size: .75rem; font-weight: 400; color: var(--esh-ink); }
.esh-product-subheading { font-size: .75rem; 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: .75rem; 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: .82rem; }
/* "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: .75rem; font-weight: 600; color: var(--esh-ink); }
.esh-product-benefit-sub { font-size: .68rem; color: var(--esh-ink-soft); margin-top: 2px; }
.esh-product-promo {
  border-radius: var(--esh-radius-sm); overflow: hidden; background: linear-gradient(135deg, #1a202c 0%, var(--esh-accent) 130%);
  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: 1.1rem; font-weight: 700; margin: 0; line-height: 1.25; }
.esh-product-promo svg { color: #ffd21d; opacity: .9; flex-shrink: 0; }

.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: 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: .7rem; 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: .7rem; 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 (modal) ──────────────────────────────────────── */
.esh-image-modal .modal-content { background: #fff; border: none; }
.esh-image-modal .modal-body {
  padding: 0; min-height: 200px; display: flex; align-items: center; justify-content: center;
}
.esh-image-modal .modal-body img { max-width: 100%; max-height: 85vh; width: auto; height: auto; object-fit: contain; }
.esh-image-modal .btn-close {
  position: absolute; top: 14px; right: 14px; z-index: 2; background-color: #fff;
  border-radius: 50%; padding: 8px; opacity: 1; box-shadow: var(--esh-shadow);
}
.esh-image-modal #eshImageCarousel { width: 100%; }
.esh-image-modal .carousel-item img { display: block; margin: 0 auto; }
.esh-image-modal .carousel-control-prev-icon,
.esh-image-modal .carousel-control-next-icon {
  background-color: rgba(38,38,38,.55); border-radius: 50%; padding: 18px; background-size: 50%;
}
/* 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; }
.esh-gallery-thumb:hover { border-color: var(--esh-accent); }
.esh-gallery-thumb.active { border-color: var(--esh-accent); 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: 1.1rem; }
.esh-variant-chip {
  border: 1px solid var(--esh-border); border-radius: 999px; padding: 7px 18px; font-size: .85rem;
  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: 1rem;
}
.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: .9rem;
}
.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(--esh-accent); color: #fff; }
.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: .82rem; font-weight: 600; color: var(--esh-ink); }
.esh-reviews-count { font-size: .75rem; 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: .7rem; color: var(--esh-ink-soft); margin-top: 6px; }
.esh-review-author { font-size: .75rem; font-weight: 600; color: var(--esh-ink); margin-top: 2px; }
.esh-review-title { font-size: .88rem; font-weight: 600; color: var(--esh-ink); margin: 0 0 6px; }
.esh-review-text { font-size: .82rem; color: #4a5568; 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: .75rem; 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: .82rem; }
.esh-spec-table th {
  text-align: left; background: var(--esh-surface-alt); color: var(--esh-ink); font-size: .75rem;
  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: 1.05rem; }
.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: .87rem; 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: .8rem; }

.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; }

.esh-add-cart:disabled { background: var(--esh-border); color: var(--esh-ink-soft); cursor: not-allowed; }
.esh-btn-cart:disabled { background: var(--esh-border); color: var(--esh-ink-soft); 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(--esh-accent); color: #fff; }

.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: 1.2rem; 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;
}
.esh-section-head-row .esh-section-heading { border-bottom: 2px solid var(--esh-accent); margin-bottom: -1px; }
.esh-section-head-link { font-size: .78rem; font-weight: 600; color: var(--esh-accent); }
.esh-product-description { font-size: .82rem; line-height: 1.7; color: #4a5568; }

/* ── 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-label { font-size: .72rem; 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: .72rem; 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: .85rem; 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; }

/* Karty na dotykových zariadeniach nemajú :hover — akcie nad obrázkom (obľúbené/náhľad/porovnať)
   musia byť viditeľné natrvalo, inak by bolo srdiečko (reálna funkcia) neprístupné. */
@media (hover: none) {
  .esh-card-actions { opacity: 1; }
}

/* ── 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; }