/* barberdepot.css — Industrial Depot theme (port of the static prototype:
   css/main.css + css/pages.css merged; token bridge for engine templates). */

/* ==========================================================================
   BARBER DEPOT — Industrial Depot design system
   Tokens · base · header · footer · shared components
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* farby — originálna paleta barberdepot.sk: #212529 + #ffbe00, žiadny modrý nádych */
  --ink: #212529;
  --ink-2: #2a2e32;
  --coal: #2b3035;
  --steel: #343a40;
  --steel-2: #495057;
  --brand: #ffbe00;
  --brand-deep: #e5a800;
  --brand-text: #9a7100;
  --brand-glow: rgba(255, 190, 0, .14);
  --paper: #f6f6f4;
  --card: #ffffff;
  --line: #e8e7e3;
  --line-dark: #32383e;
  --text: #212529;
  --muted: #6e7276;
  --muted-2: #9c9fa3;
  --sale: #d63c2f;
  --stock: #1e9e5a;
  --star: #ffbe00;

  /* typografia — originálne fonty webu: Lexend (nadpisy) + Poppins (text) */
  --f-display: 'Lexend', 'Segoe UI', sans-serif;
  --f-body: 'Poppins', 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', Consolas, monospace;

  /* metriky */
  --container: 1280px;
  --gutter: 20px;
  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  /* Kto práve vlastní spodnú hranu obrazovky.
     Tri fixné lišty sa o ňu delia a na každej stránke inak: .mobile-bar (≤760),
     .pdp-buybar (≤900, a pod 760 STOJÍ NA nej), a lišta pokladne, ktorá
     .mobile-bar skrýva a nahrádza. Každá si predtým zapisovala vlastnú medzeru
     — .mobile-bar mala v jednom pravidle 58px a v druhom 62px, a plávajúce
     tlačidlo chatu nemalo žiadnu, takže viselo cez „Odoslať objednávku".
     Odteraz víťaza publikuje TENTO token a chat sa nemusí pýtať, kde je. */
  --bd-mobilebar-h: 58px;
  --bd-bottom-bar: 0px;
  --shadow-1: 0 1px 2px rgba(21, 23, 28, .06), 0 4px 14px rgba(21, 23, 28, .06);
  --shadow-2: 0 4px 10px rgba(21, 23, 28, .10), 0 16px 40px rgba(21, 23, 28, .14);
  --shadow-brand: 0 6px 22px rgba(255, 190, 0, .25);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --dur: .22s;

}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 15px/1.55 var(--f-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
svg { display: block; }
::selection { background: var(--brand); color: var(--ink); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); }
[hidden] { display: none !important; }

/* typografia */
.h-display {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.16;
}
h1.h-display { font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
h2.h-display { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.mono { font-family: var(--f-mono); letter-spacing: .08em; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }

/* sekčné hlavičky */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sec-label {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand-text);
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 8px;
}
/* Bez žltej čiarky pred textom. Bola pred každým z 28 štítkov na webe a čítala
   sa ako generická ozdoba, nie ako súčasť značky — štítok nesie mono rez,
   prestrkanie a farbu, to stačí. Ak sa niekedy vráti, musí sa vrátiť aj do
   dvoch inline kópií: templates/errors/500.php a partials/cookie-consent.php. */

/* Magazine eyebrow — mono/uppercase meta line used by /magazin/ (breadcrumbs,
   card headers, sidebar labels). Replaces the undefined `.eyebrow` the
   magazine inherited from the German shop, which silently fell back to body
   text. Deliberately quieter than .sec-label: no brand bar, no brand colour. */
.mag-eyebrow {
  font-family: var(--f-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.sec-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text); border-bottom: 2px solid var(--brand); padding-bottom: 3px; white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.sec-link svg { width: 14px; height: 14px; flex: none; transition: transform var(--dur) var(--ease); }
.sec-link:hover { color: var(--brand-deep); }
.sec-link:hover svg { transform: translateX(3px); }

/* akcentová linka (namiesto hazard pruhov — jemnejšia, profesionálnejšia) */
.hazard { height: 3px; background: linear-gradient(90deg, var(--brand-deep), var(--brand) 45%, var(--brand-deep)); }

/* ---------- Tlačidlá ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--f-body); font-weight: 700; font-size: 14.5px;
  letter-spacing: 0;
  padding: 12px 22px; border-radius: var(--r-pill);
  border: 2px solid transparent;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .12s var(--ease), box-shadow var(--dur) var(--ease);
  user-select: none; white-space: nowrap;
}
.btn:active { transform: scale(.965); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-primary { background: var(--brand); color: var(--ink); }
.btn-primary:hover { background: var(--brand-deep); box-shadow: var(--shadow-brand); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--coal); }
.btn-outline { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-outline-light { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn-outline-light:hover { border-color: var(--brand); color: var(--brand); }
.btn-ghost { color: var(--text); background: transparent; padding-inline: 12px; }
.btn-ghost:hover { color: var(--brand-deep); }
.btn-sm { padding: 9px 16px; font-size: 12.5px; }
.btn-lg { padding: 16px 32px; font-size: 14.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Odznaky ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; border-radius: var(--r-pill); line-height: 1.2;
}
.badge svg { width: 10px; height: 10px; flex: none; }
.badge-sale { background: var(--sale); color: #fff; }
.badge-new { background: var(--brand); color: var(--ink); }
.badge-top { background: var(--ink); color: var(--brand); }
.badge-last { background: #fff; color: var(--sale); border: 1px solid var(--sale); }
.badge-stock { color: var(--stock); }
.badge-club {
  background: var(--ink); color: var(--brand); gap: 5px;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%);
  padding-right: 14px;
}

/* ---------- Formuláre ---------- */
.field { display: grid; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.input, .select, textarea.input {
  width: 100%; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 12px 14px; font-size: 14.5px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand-glow); }
.input::placeholder { color: var(--muted-2); }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d1f24' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }

.check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; }
.check input { appearance: none; width: 18px; height: 18px; border: 2px solid var(--steel-2); border-radius: var(--r-sm); display: grid; place-items: center; transition: all var(--dur) var(--ease); flex: none; margin: 0; cursor: pointer; }
.check input:checked { background: var(--brand); border-color: var(--brand); }
.check input:checked::before { content: ""; width: 10px; height: 10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5.2 3.8 8 9 2' stroke='%2315171c' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; }

/* ---------- Hviezdičky ---------- */
.stars { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.stars-row { display: inline-flex; gap: 1px; }
.stars svg { width: 13px; height: 13px; fill: #d8d5cb; }
.stars svg.on { fill: var(--star); }

/* ---------- Ceny ---------- */
.price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.price-now { font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.price-now.is-sale { color: var(--sale); }
.price-old { color: var(--muted-2); text-decoration: line-through; font-size: 13.5px; }
.price-club { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 12px; color: var(--text); }
.price-club b { font-weight: 600; }
.price-club .tag { width: 13px; height: 13px; fill: var(--brand); }

/* ==========================================================================
   HLAVIČKA
   ========================================================================== */
.announce { background: var(--ink); border-bottom: 1px solid var(--line-dark); position: relative; z-index: 60; }
.announce-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 36px; }
.announce-msg { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); display: flex; align-items: center; gap: 9px; overflow: hidden; }
.announce-msg .dot { width: 6px; height: 6px; background: var(--brand); border-radius: 50%; flex: none; animation: pulse 2s infinite; }
.announce-msg .a-ic { display: inline-flex; flex: none; }
.announce-msg .a-ic svg { width: 14px; height: 14px; }
.announce-msg span { animation: fadeSlide .5s var(--ease); white-space: nowrap; }
.announce-links { display: flex; gap: 22px; }
.announce-links a { font-size: 12px; color: var(--muted-2); transition: color var(--dur); white-space: nowrap; }
.announce-links a:hover { color: var(--brand); }

/* Stacking: .site-header (50) je stacking context — .mega (65) aj našepkávač
   (70) sa voči zvyšku stránky správajú ako 50. Preto sa všetko mimo hlavičky
   (spodná lišta 120, šuflíky 140/145, modály 150/1000, toasty, PDP lightbox
   9500, cookie lišta a chat) porovnáva s 50, NIE so 65/70.
   POZOR: .header-main o riadok nižšie je DRUHÝ stacking context. */
.site-header { position: sticky; top: 0; z-index: 50; }
/* position+z-index sú POVINNÉ: backdrop-filter robí z .header-main vlastný
   stacking context, takže z-index:70 na .search-sugg sa rieši VNÚTRI neho.
   Bez tejto dvojice paintuje .nav-item (position:relative, z-index:auto,
   neskôr v strome) nad celým hlavným riadkom vrátane našepkávača — merané:
   elementsFromPoint v prekryve vrátil A.nav-link PRED DIV.search-sugg.
   Hodnota MUSÍ zostať > 65 (.mega nižšie) — inak našepkávač síce prekryje
   lištu kategórií, ale pri otvorenom mega-menu ho prekryje mega-menu.
   Samotné z-index bez position je na statickom boxe mŕtve. */
.header-main { position: relative; z-index: 70; background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--line); }
.header-main-in { display: flex; align-items: center; gap: 28px; height: 74px; }

/* logo — Lexend lockup, DEPOT na žltej plakete */
.logo { display: flex; align-items: center; flex: none; }
.logo-word { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.logo-word b, .logo-word em {
  font-family: var(--f-display); font-weight: 800; font-size: 23px; letter-spacing: -.02em;
  text-transform: uppercase; font-style: normal;
}
.logo-word b { color: var(--text); }
.logo-word em {
  background: var(--brand); color: var(--ink); padding: 4px 9px 5px; border-radius: 8px;
  transform: rotate(-3.5deg);
  box-shadow: 0 2px 6px rgba(255, 190, 0, .3);
  transition: background var(--dur) var(--ease), transform .25s var(--ease);
}
.logo:hover .logo-word em { background: var(--brand-deep); transform: rotate(0deg); }
.site-footer .logo-word b { color: #fff; }

/* vyhľadávanie */
.search { flex: 1; position: relative; max-width: 560px; }
.search-form { display: flex; }
.search-input {
  flex: 1; background: #f2f2ef; border: 1.5px solid var(--line); border-right: 0;
  color: var(--text); padding: 11px 16px; font-size: 14px; border-radius: var(--r-sm) 0 0 var(--r-sm); min-width: 0;
  transition: border-color var(--dur), background var(--dur), box-shadow var(--dur);
}
.search-input::placeholder { color: var(--muted-2); }
.search-input:focus { outline: none; border-color: var(--text); background: #fff; }
.search-btn { background: var(--brand); color: var(--ink); padding: 0 18px; border-radius: 0 var(--r-sm) var(--r-sm) 0; transition: background var(--dur); }
.search-btn:hover { background: var(--brand-deep); }
.search-btn svg { width: 18px; height: 18px; }

/* live návrhy */
.search-sugg {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: var(--r-md);
  box-shadow: var(--shadow-2); overflow: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); z-index: 70;
}
.search-sugg.open { opacity: 1; transform: none; pointer-events: auto; }
.search-sugg-head { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-2); padding: 12px 16px 6px; }
.sugg-item { display: flex; align-items: center; gap: 12px; padding: 9px 16px; transition: background var(--dur); }
.sugg-item:hover { background: var(--paper); }
.sugg-item img { width: 40px; height: 40px; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); flex: none; }
.sugg-item .s-name { font-size: 13.5px; font-weight: 500; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sugg-item .s-meta { font-size: 12px; color: var(--muted); }
.sugg-item .s-price { margin-left: auto; font-weight: 700; font-size: 13.5px; white-space: nowrap; }
.sugg-all { display: block; text-align: center; padding: 11px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; background: var(--ink); color: var(--brand); }

/* B2B pilulka v hlavnom riadku, hneď vpravo od hľadania. Nesie dva popisy:
   .pill-full (celé „Staň sa členom") a .pill-mini („KLUB") — pod 1120px sa
   vymenia. Nemý žltý krúžok s ikonou tu bol predtým a nikto nechápal, čo
   znamená; krátky nápis to rieši a pilulka ostáva kompaktná. */
.h-pill-b2b { flex: none; margin-left: 4px; }
.h-pill-b2b .pill-mini { display: none; }
@media (max-width: 1120px) {
  .h-pill-b2b { height: 44px; padding: 0 14px; border-radius: var(--r-pill); justify-content: center; }
  .h-pill-b2b .pill-full { display: none; }
  .h-pill-b2b .pill-mini {
    display: inline; font-family: var(--f-mono); font-size: 11.5px;
    letter-spacing: .08em; text-transform: uppercase;
  }
  .h-pill-b2b svg { width: 16px; height: 16px; }
}

/* akcie vpravo */
.h-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.h-act {
  position: relative; display: grid; justify-items: center; gap: 3px;
  color: #454b54; padding: 8px 10px; border-radius: var(--r-md); transition: color var(--dur), background var(--dur);
}
.h-act:hover { color: var(--brand-text); background: rgba(33,37,41,.045); }
.h-act svg { width: 21px; height: 21px; }
.h-act small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; max-width: 10ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-act .count {
  position: absolute; top: 2px; right: 4px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--brand); color: var(--ink); font-family: var(--f-mono); font-weight: 600; font-size: 10.5px;
  display: grid; place-items: center; border-radius: 9px; transition: transform .18s var(--ease);
}
.h-act .count.bump { animation: bump .4s var(--ease); }
/* Lupa je len pre úzke obrazovky — nad 900px je pole vedľa loga stále vidieť
   a druhý ovládač tej istej funkcie by len mýlil. Zapína ju media query nižšie. */
.h-act-search { display: none; background: none; border: 0; cursor: pointer; }

/* burger */
.burger { display: none; color: var(--text); padding: 10px; }
.burger svg { width: 24px; height: 24px; }

/* navigácia — pokojný register, väčšie položky, pilulky pre akcie */
.header-nav { background: #fff; box-shadow: 0 1px 0 var(--line), 0 6px 18px rgba(33,37,41,.04); }
.nav-in { display: flex; align-items: stretch; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 6px; padding: 0 15px; height: 54px; white-space: nowrap;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em; color: #343a40;
  border-bottom: 3px solid transparent; border-top: 3px solid transparent;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.nav-link svg { width: 11px; height: 11px; opacity: .5; transition: transform var(--dur) var(--ease); }
.nav-item:hover .nav-link, .nav-link.active { color: var(--text); border-bottom-color: var(--brand); background: rgba(255,190,0,.07); }
.nav-item:hover .nav-link svg { transform: rotate(180deg); }
.nav-spacer { flex: 1; }
.nav-item-pill { display: flex; align-items: center; padding: 0 4px; }
.nav-pill {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-size: 13.5px; font-weight: 600; padding: 8px 16px; border-radius: 20px;
  transition: background var(--dur), color var(--dur), border-color var(--dur), transform .12s var(--ease);
}
.nav-pill:active { transform: scale(.96); }
.nav-pill svg { width: 15px; height: 15px; flex: none; }
.nav-pill-sale { background: var(--sale); color: #fff; }
.nav-pill-sale:hover { background: #bf3226; }
.nav-pill-b2b { border: 1.5px solid var(--brand); color: var(--brand-text); }
.nav-pill-b2b:hover { background: var(--brand); color: var(--ink); }

/* mega menu — hlavička kategórie + stĺpce + top produkt */
.mega {
  position: absolute; top: 100%; left: 0; width: 780px; max-width: calc(100vw - 40px); background: #fff;
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 24px 48px rgba(33,37,41,.14);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .16s var(--ease) .14s, transform .16s var(--ease) .14s; /* oneskorené zatváranie — bez blikania */
  overflow: hidden; z-index: 65;
}
.nav-item:hover .mega, .nav-item:focus-within .mega,
.nav-item.mega-open .mega { opacity: 1; transform: none; pointer-events: auto; transition-delay: .05s; }
/* .mega-open is set by site.js on hover-less pointers (touch laptops, tablets
   in landscape) that sit above the 1120px burger breakpoint. */
.nav-item.mega-open .nav-link { color: var(--text); border-bottom-color: var(--brand); background: rgba(255,190,0,.07); }
.nav-item.mega-open .nav-link svg { transform: rotate(180deg); }
.mega.demo-open { opacity: 1 !important; transform: none !important; pointer-events: auto; }
.mega-head { display: flex; align-items: center; gap: 12px; padding: 14px 26px; border-bottom: 1px solid var(--line); background: #fcfcfa; }
.mega-ico { width: 36px; height: 36px; object-fit: contain; flex: none; }
.mega-head > b { font-family: var(--f-display); font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.mega-head .m-all { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--brand-text); transition: color var(--dur); white-space: nowrap; }
.mega-head .m-all:hover { color: var(--brand-deep); }
.mega-head .m-all svg { width: 14px; height: 14px; flex: none; }
.mega-body { display: grid; grid-template-columns: minmax(0, 1fr) 236px; }
/* Stĺpce mega-menu: NIE grid, ale CSS columns.
   Grid zarovnáva riadky na najvyššiu položku, takže jedna skupina s tromi
   podkategóriami roztiahla celý riadok a susedné skupiny (bez detí) mali
   pod sebou 200px prázdna. Columns skupiny naopak zabalia nahusto a
   `break-inside: avoid` zabráni rozseknutiu skupiny medzi dva stĺpce. */
.mega-cols { display: block; column-count: 3; column-gap: 26px; padding: 16px 26px 18px; }
.mega-group { break-inside: avoid; margin-bottom: 15px; }
.mega-group:last-child { margin-bottom: 0; }

/* Nadpis skupiny — tmavý a polotučný, aby čítal ako hlavička. */
.mega-title {
  display: block; font-size: 13.5px; font-weight: 700; color: var(--text);
  padding: 5px 9px; margin: 0 -9px 3px; border-radius: var(--r-sm);
  transition: background var(--dur), color var(--dur);
}
.mega-title:hover { background: var(--brand-glow); color: var(--brand-text); }

.mega a.m-link {
  display: block; padding: 5px 9px; margin: 0 -9px; font-size: 13px; color: var(--muted); border-radius: var(--r-sm);
  transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.mega a.m-link:hover { background: #f6f5f1; color: var(--text); }

/* Deti skupiny dostanú odsadenie + vlasovú linku, takže je na prvý pohľad
   vidno, čo pod ktorý nadpis patrí. Rovnaký vzor ako .mm-sub v mobilnom
   šuflíku — jeden jazyk na oboch miestach. */
.mega-group a.m-link:not(.m-link-solo) {
  margin-left: 3px; padding-left: 13px; border-left: 2px solid var(--line); border-radius: 0 var(--r-sm) var(--r-sm) 0;
}
.mega-group a.m-link:not(.m-link-solo):hover { border-left-color: var(--brand); }

/* Listová kategória bez detí je rovnocenná nadpisu, nie podpoložkou. */
.mega a.m-link-solo { color: var(--text); font-weight: 600; font-size: 13.5px; }
.mega-promo {
  display: grid; gap: 7px; justify-items: start; align-content: start;
  padding: 18px 20px; background: #faf9f6; border-left: 1px solid var(--line);
}
.mp-tag { font-family: var(--f-mono); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text); }
/* Biela kartička pod fotkou: produktové fotky majú tvrdo biele pozadie a na
   béžovom paneli #faf9f6 vyzerali ako orezaný štvorec. */
.mega-promo img {
  width: 122px; height: 122px; object-fit: contain; justify-self: center;
  margin: 4px 0 2px; padding: 8px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-md);
  transition: transform .3s var(--ease);
}
.mega-promo:hover img { transform: scale(1.05); }
.mp-name { font-size: 12.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); }
.mp-price { font-size: 16px; font-weight: 700; color: var(--text); }
.mega-promo .btn { margin-top: 2px; }

/* ==========================================================================
   PRODUKTOVÁ KARTA
   ========================================================================== */
.p-card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.p-card:hover { border-color: var(--ink); box-shadow: var(--shadow-2); transform: translateY(-3px); }
/* Médiá: pevný kvadrát pre KAŽDÚ kartu — obrázok vypĺňa presne rovnaký box,
   nezávisle od svojich vlastných proporcií (predtým `max-height` bez šírky
   spôsoboval, že vysoké fotky boli výrazne menšie ako široké). */
/* Médiá: pevný kvadrát pre KAŽDÚ kartu.
   POZOR na dve pasce, ktoré tu už raz zlomili rovnaké výšky:
   1) `.p-card` je flex-column, takže `.p-card-media` je flex-item s
      `min-height: auto` — jeho minimálna obsahová výška PREBIJE
      `aspect-ratio: 1`. Pri vysokých portrétových fotkách (flakóny,
      sprejové plechovky) tak box narástol aj o 200px a rad kariet mal
      rôzne vysoké obrázky. Preto `flex: none` + `min-height: 0`.
   2) Odkaz s obrázkom je vytiahnutý Z TOKU (`position: absolute`), takže
      do výšky rodiča nepríspieva vôbec nič a pomer strán riadi výhradne
      `aspect-ratio`. `inset` = pôvodný padding. */
.p-card-media {
  position: relative; aspect-ratio: 1; background: #fff; display: block;
  flex: none; min-height: 0; overflow: hidden;
}
.p-card-media > a { position: absolute; inset: 16px; display: block; }
.p-card-media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transition: transform .45s var(--ease); }
.p-card:hover .p-card-media img { transform: scale(1.06); }
.p-card-badges { position: absolute; top: 10px; left: 10px; display: grid; gap: 5px; justify-items: start; z-index: 2; }
.p-wish {
  position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line); display: grid; place-items: center; color: var(--steel-2);
  opacity: 0; transform: translateY(-4px); transition: all var(--dur) var(--ease);
}
.p-card:hover .p-wish { opacity: 1; transform: none; }
.p-wish:hover { color: var(--sale); border-color: var(--sale); }
.p-wish.on { opacity: 1; transform: none; color: var(--sale); border-color: var(--sale); background: #fff5f4; }
.p-wish svg { width: 16px; height: 16px; }
.p-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 5px; flex: 1; border-top: 1px solid var(--line); }
.p-brand { font-family: var(--f-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.p-name { font-size: 13px; font-weight: 600; line-height: 1.33; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.66em; overflow-wrap: anywhere; }
.p-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.p-card .price { margin-top: auto; padding-top: 2px; }
.p-card .price-now { font-size: 15.5px; }
.p-card .price-old { font-size: 12px; }
.p-card .price-club { font-size: 11px; }
.p-card .stars { font-size: 11.5px; }
.p-card .stars svg { width: 12px; height: 12px; }

/* riadok CTA — .p-card-foot je to, čo emituje product-card.php */
.p-card-foot, .p-card-cta { display: flex; gap: 8px; margin-top: 9px; position: relative; z-index: 2; }
.p-card-foot .btn, .p-card-cta .btn { flex: 1; min-width: 0; padding: 10px 14px; font-size: 12px; border-radius: var(--r-pill); }
.p-card-foot .btn svg, .p-card-cta .btn svg { width: 15px; height: 15px; }
.p-quick {
  flex: none; width: 38px; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%;
  color: var(--steel-2); transition: all var(--dur);
}
.p-quick:hover { border-color: var(--ink); color: var(--ink); }
.p-quick svg { width: 16px; height: 16px; }

/* Dostupnosť POD tlačidlom — urgencia presne v momente rozhodnutia.
   (Predtým to bol odznak v ľavom hornom rohu fotky.) */
.p-stock { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; color: var(--stock);
  font-family: var(--f-mono); letter-spacing: .06em; text-transform: uppercase; margin-top: 8px; line-height: 1; }
.p-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.p-stock.low { color: #b3541e; }
.p-stock.out { color: var(--muted-2); }

/* mriežky produktov */
.p-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.p-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(232px, 1fr); gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--steel-2) transparent; }
.p-rail > * { scroll-snap-align: start; }

/* ==========================================================================
   DROBNÉ KOMPONENTY
   ========================================================================== */
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); padding: 16px 0; }
.breadcrumbs a:hover { color: var(--brand-deep); }
.breadcrumbs .sep { color: var(--muted-2); font-family: var(--f-mono); }
.breadcrumbs b { color: var(--text); font-weight: 600; }
/* Dve omrvinkové navigácie, dve rôzne značky. Katalóg si skladá .breadcrumbs
   (plurál) inline v šablóne, obsahové stránky volajú render_breadcrumbs(),
   ktorá emituje .breadcrumb (singulár) ako <ol><li>. Singulár nemal žiadne
   pravidlo, takže z každej položky bol blok a omrvinky išli pod seba. */
.breadcrumb { font-size: 12.5px; color: var(--muted); padding: 16px 0; }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb a:hover { color: var(--brand-deep); }
.breadcrumb .sep { color: var(--muted-2); font-family: var(--f-mono); }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

.qty { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.qty button { width: 38px; display: grid; place-items: center; font-size: 17px; font-weight: 600; color: var(--steel-2); transition: color var(--dur), background var(--dur); }
.qty button:hover { color: var(--ink); background: var(--paper); }
.qty input { width: 44px; text-align: center; border: 0; border-inline: 1.5px solid var(--line); font-family: var(--f-mono); font-weight: 600; font-size: 14px; padding: 9px 0; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { appearance: none; }
.qty input:focus { outline: none; background: var(--brand-glow); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 34px; }
.page-btn {
  min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 8px;
  font-family: var(--f-mono); font-weight: 600; font-size: 13.5px; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: #fff; transition: all var(--dur);
}
.page-btn:hover { border-color: var(--ink); }
.page-btn.current { background: var(--ink); color: var(--brand); border-color: var(--ink); }
.page-btn.dots { border: 0; background: none; }

/* taby */
.tabs-nav { display: flex; gap: 4px; border-bottom: 2px solid var(--line); overflow-x: auto; }
.tab-btn {
  padding: 13px 20px; font-weight: 700; font-size: 13.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
  transition: color var(--dur), border-color var(--dur);
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--text); border-bottom-color: var(--brand); }
.tab-pane { display: none; padding: 24px 0; animation: fadeIn .3s var(--ease); }
.tab-pane.active { display: block; }

/* toast */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: grid; gap: 10px; }
.toast {
  display: flex; align-items: center; gap: 12px; background: var(--ink); color: #fff; border-left: 4px solid var(--brand);
  padding: 13px 18px; border-radius: var(--r-md); box-shadow: var(--shadow-2); font-size: 13.5px; font-weight: 500;
  animation: toastIn .35s var(--ease); max-width: 340px;
}
.toast svg { width: 18px; height: 18px; color: var(--brand); flex: none; }
.toast.out { animation: toastOut .3s var(--ease) forwards; }

/* modal */
.modal-back {
  position: fixed; inset: 0; background: rgba(21, 23, 28, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 150; display: grid; place-items: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s var(--ease);
}
.modal-back.open { opacity: 1; pointer-events: auto; }
.modal {
  background: #fff; border-radius: var(--r-lg); width: min(460px, 100%); max-height: 90vh; overflow: auto;
  transform: translateY(16px) scale(.98); transition: transform .25s var(--ease); box-shadow: var(--shadow-2);
}
.modal-back.open .modal { transform: none; }
.modal-wide { width: min(880px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 0; }
.modal-head h3 { font-family: var(--f-display); font-weight: 700; font-size: 22px; text-transform: uppercase; letter-spacing: .03em; }
.modal-x { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); transition: all var(--dur); }
.modal-x:hover { background: var(--paper); color: var(--text); }
.modal-x svg { width: 18px; height: 18px; }
.modal-body { padding: 20px 24px 26px; }

/* ---------- rýchly náhľad produktu (.qv-*) ----------
   Postavené na .modal-* triedach, ktoré v téme ležali odjakživa nevyužité.
   Obsah stavia assets/js/shop.js z /api/product-quick-view.php. */
.qv-modal .modal-head h3 { font-size: 18px; text-transform: none; letter-spacing: 0; line-height: 1.3; padding-right: 12px; }
.qv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.qv-note { color: var(--muted); font-size: 14px; margin: 0; padding: 18px 0; text-align: center; }

.qv-media { display: grid; gap: 10px; }
.qv-img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.qv-thumbs { display: flex; gap: 8px; }
.qv-thumb {
  width: 54px; height: 54px; padding: 4px; background: #fff; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--dur) var(--ease);
}
.qv-thumb img { width: 100%; height: 100%; object-fit: contain; }
.qv-thumb:hover { border-color: var(--muted-2); }
.qv-thumb.is-on { border-color: var(--brand); }

.qv-info { display: grid; gap: 12px; align-content: start; }
.qv-brand-logo { height: 30px; width: auto; max-width: 120px; object-fit: contain; object-position: left center; display: block; }
.qv-brand a, .qv-brand span { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-text); }
.qv-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qv-price-now { font-family: var(--f-display); font-weight: 800; font-size: 27px; color: var(--ink); }
.qv-price-old { font-size: 15px; color: var(--muted-2); text-decoration: line-through; }
.qv-club { font-size: 13px; color: var(--muted); }
.qv-club b { color: var(--brand-text); }
.qv-stock { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--stock); }
.qv-stock.low { color: var(--sale); }
.qv-stock.out { color: var(--muted-2); }
.qv-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.qv-sku { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted-2); }
.qv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.qv-actions .btn { flex: 1 1 150px; justify-content: center; }

@media (max-width: 620px) {
  .qv-grid { grid-template-columns: 1fr; gap: 16px; }
  .qv-img { max-width: 210px; margin-inline: auto; }
}

/* drawer (minikošík + mobilné menu) */
.drawer-back { position: fixed; inset: 0; background: rgba(21,23,28,.55); z-index: 140; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.drawer-back.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; bottom: 0; width: min(400px, 92vw); background: #fff; z-index: 145;
  display: flex; flex-direction: column; box-shadow: var(--shadow-2);
  transition: transform .32s var(--ease);
}
.drawer.right { right: 0; transform: translateX(105%); }
.drawer.left { left: 0; transform: translateX(-105%); }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.drawer-head b { font-family: var(--f-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
.drawer-foot { border-top: 1px solid var(--line); padding: 16px 20px; display: grid; gap: 10px; }

/* minikošík položky */
.mc-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: center; }
.mc-item img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; }
.mc-item .n { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mc-item .m { font-size: 12px; color: var(--muted); margin-top: 3px; }
.mc-item .x { color: var(--muted-2); transition: color var(--dur); align-self: start; }
.mc-item .x:hover { color: var(--sale); }
.mc-item .x svg { width: 15px; height: 15px; }
.mc-total { display: flex; justify-content: space-between; font-size: 15px; }
.mc-total b { font-size: 18px; }

/* progres dopravy zadarmo */
.ship-progress { display: grid; gap: 7px; padding: 12px 14px; background: var(--paper); border-radius: var(--r-md); border: 1px dashed var(--line); }
.ship-progress .t { font-size: 12.5px; }
.ship-progress .t b { color: var(--brand-deep); }
.ship-progress .t.done { color: var(--stock); font-weight: 600; }
.ship-bar { height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; }
.ship-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); border-radius: 4px; transition: width .5s var(--ease); }

/* mobilná spodná lišta */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; display: none;
  background: rgba(255,255,255,.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(33,37,41,.06); padding-bottom: env(safe-area-inset-bottom);
}
.mobile-bar-in { display: grid; grid-template-columns: repeat(4, 1fr); }
.mb-item { position: relative; display: grid; justify-items: center; gap: 3px; padding: 9px 0 8px; color: var(--muted); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.mb-item svg { width: 21px; height: 21px; }
.mb-item.active, .mb-item:hover { color: var(--brand-text); }
.mb-item .count { position: absolute; top: 4px; right: calc(50% - 20px); min-width: 16px; height: 16px; padding: 0 4px; background: var(--brand); color: var(--ink); font-family: var(--f-mono); font-size: 10px; font-weight: 600; display: grid; place-items: center; border-radius: 8px; }

/* mobilné menu obsah — svetlé, s ikonami kategórií */
.mm-cat { border-bottom: 1px solid var(--line); }
.mm-cat > button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 2px; font-weight: 600; font-size: 15px; color: var(--text); text-align: left; }
.mm-ico { width: 34px; height: 34px; object-fit: contain; flex: none; }
/* Kategórie majú vlastné obrázkové ikony, Značky sú odkaz z témy a dostanú
   glyf. Vlastné pravidlo je nutné: `.mm-cat > button svg` nižšie je mierené na
   šípku rozbaľovania (12px + rotácia), a bez toho by sa naň chytil aj tento. */
.mm-ico-glyph { display: grid; place-items: center; color: var(--muted); }
.mm-cat > button .mm-ico-glyph svg { width: 20px; height: 20px; transition: none; transform: none; }
.mm-name { flex: 1; min-width: 0; }
.mm-cat > button svg { width: 12px; height: 12px; flex: none; transition: transform var(--dur) var(--ease); color: var(--muted-2); }
.mm-cat.open > button svg { transform: rotate(180deg); color: var(--brand-deep); }
.mm-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.mm-cat.open .mm-sub { grid-template-rows: 1fr; }
.mm-sub > div { overflow: hidden; }
.mm-sub a { display: block; padding: 9px 2px 9px 14px; font-size: 14px; color: var(--muted); border-left: 2px solid var(--line); margin-left: 4px; }
.mm-sub a:hover { color: var(--brand-text); border-color: var(--brand); }
.mm-sub a.all { color: var(--brand-text); font-weight: 600; }
/* Servisné odkazy v šuflíku. Boli o stupeň drobnejšie než kategórie nad nimi
   (14px vs 15px/600), takže pôsobili ako pätička šuflíka — pritom je to jediná
   cesta k doprave, sledovaniu zásielky a vráteniu tovaru na telefóne. */
.mm-links { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 2px; }
.mm-links-head { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); padding: 0 2px 8px; }
.mm-links a { display: flex; align-items: center; gap: 13px; padding: 13px 2px; font-size: 16px; font-weight: 500; color: var(--text); }
.mm-links a:hover { color: var(--brand-text); }
.mm-links a svg { width: 20px; height: 20px; color: var(--muted-2); flex: none; }
.mm-links a:hover svg { color: var(--brand-text); }

/* ==========================================================================
   PÄTIČKA
   ========================================================================== */
.site-footer { background: var(--ink); color: #b9bdc3; margin-top: 70px; }
.footer-club { background: var(--coal); border-bottom: 1px solid var(--line-dark); }
.footer-club-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px var(--gutter); flex-wrap: wrap; }
.footer-club-in .txt b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 22px; letter-spacing: .03em; color: #fff; text-transform: uppercase; }
.footer-club-in .txt span { font-size: 13.5px; color: var(--muted-2); }
/* Scoped na .footer-club: rovnaký class name používa aj (nezapojená) sekcia
   templates/sections/newsletter.php s troma poľami — bez scope dedila
   odrezanú pravú hranu inputu. */
.footer-club .nl-form { display: flex; flex: 1; max-width: 440px; min-width: 260px; }
.footer-club .nl-form input { flex: 1; background: var(--ink); border: 1.5px solid var(--line-dark); border-right: 0; color: #fff; padding: 12px 16px; font-size: 14px; border-radius: var(--r-sm) 0 0 var(--r-sm); min-width: 0; }
.footer-club .nl-form input:focus { outline: none; border-color: var(--brand); }
/* border-width 1.5px = rovnaká hrúbka ako input, inak je gombík o 1px vyšší
   a spoj input+gombík nesedí. */
.footer-club .nl-form button { border-radius: 0 var(--r-sm) var(--r-sm) 0; border-width: 1.5px; }

/* 5 stĺpcov od 16.08.2026 — právne dokumenty majú vlastný stĺpec. */
.footer-main { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr 1.1fr; gap: 30px; padding: 44px var(--gutter) 38px; }
.f-about .logo-word b, .f-about .logo-word em { font-size: 19px; }
.f-about .logo-word em { padding: 3px 7px 4px; border-radius: 6px; }
.f-about p { font-size: 13.5px; line-height: 1.65; color: var(--muted-2); margin: 14px 0 18px; max-width: 300px; }
.f-col h4 { font-family: var(--f-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.f-col a { display: block; padding: 5.5px 0; font-size: 13.5px; color: var(--muted-2); transition: color var(--dur), padding-left var(--dur) var(--ease); }
.f-col a:hover { color: var(--brand); padding-left: 4px; }

/* Odkazové stĺpce päty ako natívny akordeón — rozbalený na desktope, zbalený
   na telefóne (footer.php ich zatvorí jedným riadkom pod 760px). Bez JS teda
   ostane päta v dnešnej podobe. */
.f-acc > summary { list-style: none; }
.f-acc > summary::-webkit-details-marker { display: none; }
.f-acc > summary h4 { margin-bottom: 16px; }
/* Nad 761px je summary len nadpis — klik nesmie stĺpec zavrieť. */
@media (min-width: 761px) { .f-acc > summary { pointer-events: none; } }
.f-contact li { display: flex; gap: 11px; padding: 6px 0; font-size: 13.5px; color: var(--muted-2); align-items: flex-start; }
.f-contact svg { width: 16px; height: 16px; color: var(--brand); flex: none; margin-top: 2px; }
.f-contact b { color: #fff; font-weight: 600; }

.footer-bottom { border-top: 1px solid var(--line-dark); }
.footer-bottom-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px var(--gutter); flex-wrap: wrap; }
/* Čipy platieb: ikona + názov metódy z databázy. Predtým to bol holý text
   v šiestich rámčekoch, ktorý sa čítal skôr ako značky než ako spôsoby
   platby. Ikona nesie význam, text ho potvrdzuje. */
.f-pay { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.f-pay-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); border: 1px solid var(--line-dark); border-radius: var(--r-sm); padding: 6px 11px;
}
.f-pay-chip svg { width: 17px; height: 17px; flex: none; color: var(--brand); stroke-width: 1.5; }
/* Oficiálne značky (Visa/Mastercard/Apple Pay/Google Pay) na bielej plaketke:
   čierny Apple bedž a sivý „Pay" wordmark by na tmavej päte zanikli. Súbory
   sú tie isté, čo používa pokladňa (assets/images/payment/). */
.f-pay-mark {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 5px 8px; background: #fff;
  border: 1px solid var(--line-dark); border-radius: var(--r-sm);
}
.f-pay-mark img { display: block; height: 100%; width: auto; }
.f-copy { font-size: 12.5px; color: var(--muted-2); }
.f-copy a { color: #fff; }
/* Predajca (§ 4 zák. 22/2004): meno, sídlo, IČO, registrová vložka — jeden
   tichý riadok pod copyrightom, fakty zo site_settings. */
.f-legal { flex-basis: 100%; font-size: 11.5px; line-height: 1.5; color: var(--muted-2); opacity: .8; }
/* .f-barcode odstránený 10.08.2026 — bol to obrázok čiarového kódu s
   vymysleným číslom pod ním. */

/* ---------- Animácie ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeSlide { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes toastIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateX(30px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

.reveal { opacity: 0; }
.reveal.in { animation: reveal .6s var(--ease) forwards; }

/* ---------- Responzívnosť ---------- */
/* Kategórie + pilulky sa do 1265px šírky kontejnera nezmestili — „Staň sa
   partnerom“ pretekala o 42px za pravý okraj. Nemôžeme dať .nav-in
   overflow-x: auto, pretože overflow vytvára klipovací kontext a odrezal by
   mega-menu (absolútne pozicované deti). Namiesto toho stupňovito uberáme
   vnútorné odsadenie, kým sa nezapne burger (≤900px). */
@media (max-width: 1300px) {
  .nav-link { padding: 0 10px; font-size: 14.5px; }
  .nav-item-pill { padding: 0 2px; }
  .nav-pill { padding: 8px 13px; font-size: 13px; }
}
@media (max-width: 1200px) {
  /* Šipka „má podmenu“ je len afordancia — mega-menu sa aj tak otvára na
     hover/focus. 6 šipiek = ~100px, čo je presne to, čo tu chýba. */
  .nav-link svg { display: none; }
  .nav-link { gap: 0; }
  .nav-pill { padding: 7px 11px; font-size: 12.5px; gap: 5px; }
  .nav-pill svg { width: 13px; height: 13px; }
}
@media (max-width: 1080px) {
  .p-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-main { grid-template-columns: 1fr 1fr; }
  /* `.announce-links a:nth-child(1) { display:none }` tu bolo, kým mal rad tri
     odkazy — skrývalo to práve „Kontakt", ktorý je zároveň v mobilnej šuflíku,
     takže v pásme 761–1080px z dvoch zostal jeden a jeden bol duplikát. Po
     odchode „BarberClub" sú v rade dva krátke odkazy a na 761px sa zmestia. */
}
/* Prepnutie lišty kategórií na burger je pri 1120px, nie 900px. Šesť dlhých
   slovenských názvov + „Výpredaj“ + „Staň sa partnerom“ potrebujú ~1100px;
   v celom pásme 900–1120px partnerská pilulka pretekala mimo obrazovku (a
   práve tá je vstup do BarberClubu, čiže B2B konverzia). Pod 1120px dostane
   užívateľ šuflík so VŠETKÝMI kategóriami vrátane ikon — lepšie ako
   stlačená lišta. Ostatné pravidlá hlavičky zostávajú na 900px. */
/* Keď sa lišta kategórií zbalí do burgera, hlavný riadok musí uniesť
   burger + logo + hľadanie + B2B pilulku + akcie. Preto ide do kompaktného
   režimu NARAZ s burgerom (predtým sa popisky ikon skrývali až na 900px a
   v pásme 901–1120px riadok pretekal o ~46px — „Košík“ vypadával z rámu). */
@media (max-width: 1120px) {
  .header-nav { display: none; }
  .burger { display: block; }
  .h-act small { display: none; }
  .h-act .count { top: 0; right: 0; }
  .header-main-in { height: 64px; gap: 14px; }
  .logo-word b, .logo-word em { font-size: 19px; }
  .logo-word em { padding: 3px 7px 4px; border-radius: 6px; }
}
/* Hľadanie na mobile: pole je SKRYTÉ a otvára ho lupa v akciách.
   História: pole tu bolo najprv trvale viditeľné ako vlastný riadok pod logom a
   lupa sa zmazala ako „duplicitný vstup“. Lenže ten riadok stál hlavičku ~60px
   navyše — s oznamovacou lištou vyšla na ~160px, čiže pätina obrazovky telefónu
   ešte pred obsahom. Pole sa preto vracia pod lupu a rozbalí sa ako vrstva NAD
   obsahom (position:absolute), takže riadok hlavičky nikdy nenarastie. */
@media (max-width: 900px) {
  .header-main-in { height: 56px; gap: 10px; }
  .h-act-search { display: inline-flex; }
  .search {
    position: absolute; left: var(--gutter); right: var(--gutter); top: 100%;
    max-width: none; z-index: 71;
    background: #fff; padding: 10px 0 12px;
    display: none;
  }
  .search.open { display: block; }
  /* Podklad pod rozbalené pole, aby nesplývalo s obsahom stránky. */
  .search.open::before {
    content: ""; position: absolute; inset: 0 calc(var(--gutter) * -1);
    background: #fff; border-bottom: 1px solid var(--line); z-index: -1;
  }
  .search-sugg { left: 0; right: 0; }
}
@media (max-width: 760px) {
  :root { --bd-bottom-bar: calc(var(--bd-mobilebar-h) + env(safe-area-inset-bottom)); }
  body { padding-bottom: var(--bd-bottom-bar); }
  .mobile-bar { display: block; }
  .p-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .announce-in { justify-content: center; }
  .announce-links { display: none; }
  .h-act.act-wish { display: none; }
  /* Účet a košík sú v spodnej lište — hore by boli tretí a štvrtý vstup do tej
     istej stránky. V hlavičke ostáva burger · logo · partnerstvo · lupa. */
  .h-act.act-user, #act-cart { display: none; }
  /* gap:0 — poradie a odstupy riadia `order` + margin na položkách, inak by sa
     medzera počítala dvakrát a akordeóny by od seba odskočili o 26px. */
  .footer-main { grid-template-columns: 1fr; gap: 0; padding: 32px var(--gutter); }
  /* Kontaktný stĺpec hore: telefón, e-mail a adresa odberu sú signál dôvery a
     nesú ťuky. Odkazové zoznamy sú adresár — patria pod ne, a zbalené. */
  .f-about { order: 1; margin-bottom: 20px; }
  .f-about p {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    line-clamp: 3; overflow: hidden;
  }
  .footer-main > .f-col:not(.f-acc) { order: 2; margin-bottom: 18px; }
  .f-acc { order: 3; border-bottom: 1px solid var(--line-dark); }
  .f-acc > summary {
    display: flex; align-items: center; justify-content: space-between;
    min-height: 44px; padding: 12px 0; cursor: pointer;   /* WCAG 2.5.8 */
  }
  .f-acc > summary h4 { margin-bottom: 0; }
  .f-acc > summary::after {
    content: ""; width: 8px; height: 8px; margin-right: 3px; flex: none;
    border-right: 1.5px solid var(--muted-2); border-bottom: 1.5px solid var(--muted-2);
    transform: rotate(45deg); transition: transform var(--dur) var(--ease);
  }
  .f-acc[open] > summary::after { transform: rotate(-135deg); }
  .f-acc > .f-acc-body { padding-bottom: 12px; }
  /* Platobné štítky do jedného posuvného riadku namiesto troch zalomených. */
  .f-pay { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .f-pay::-webkit-scrollbar { display: none; }
  .f-pay-chip, .f-pay-mark { flex: none; }
  .footer-bottom-in { justify-content: flex-start; gap: 12px; }
  .footer-club-in { flex-direction: column; align-items: stretch; text-align: center; }
  /* Na telefóne sa zložený input+gombík rozpadá: naskladať pod seba,
     inputu vrátiť pravú hranu a plný rádius, gombík na celú šírku. */
  .footer-club .nl-form { flex-direction: column; gap: 10px; max-width: none; min-width: 0; }
  .footer-club .nl-form input { border-right: 1.5px solid var(--line-dark); border-radius: var(--r-sm); }
  .footer-club .nl-form button { border-radius: var(--r-pill); width: 100%; }
  .sec-head { flex-wrap: wrap; }
  .p-card-foot .p-quick, .p-card-cta .p-quick { display: none; }
  .sale-wrap { padding: 18px 14px; }
}

/* ---------- Prístupnosť ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; }
}

/* ═══════════ PAGE-LEVEL STYLES (prototype pages.css) ═══════════ */

/* ==========================================================================
   BARBER DEPOT — štýly stránok
   home · katalóg · produkt · košík · pokladňa · účet
   ========================================================================== */

/* ==========================================================================
   DOMOV — bannerový slider so špeciálnymi ponukami
   ========================================================================== */
.hero-banners { padding: 22px 0 8px; }
.hb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; align-items: stretch; }

.hb-slider { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-1); }
.hb-track { display: flex; transition: transform .55s var(--ease); }
.hb-slide { position: relative; flex: 0 0 100%; min-height: 372px; display: flex; align-items: center; color: #fff; overflow: hidden; }
.hb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hb-slide::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(92deg, rgba(33,37,41,.92) 0%, rgba(33,37,41,.72) 44%, rgba(33,37,41,.18) 78%, rgba(33,37,41,.05) 100%);
}
/* ---------- popredie slidu: maskot ----------
   Vlastná vrstva NAD pozadím a POD textom (::after je z=1, .hb-content z=2).
   Prečo nie zapečený do pozadia: box hero je na desktope ~2,5:1, na telefóne
   naopak vyšší než širší — object-fit: cover by jednu z tých dvoch verzií
   orezal cez hlavu. Ako samostatná vrstva sa dá zmenšiť a prekotviť. */
/* Maskot stojí NA lište ponúk, nie za ňou. .hb-tabs je absolútny pás na dne
   slidu (z-index 4) — bez tohto odsadenia mu odreže nohy nad členkami a vyzerá
   to ako zle orezaný obrázok, nie ako zámer. --hb-tabs-h drží obe miesta v
   zhode; keď sa zmení sadzba lišty, mení sa jedna hodnota. */
.hb-slider { --hb-tabs-h: 68px; }
.hb-slide.has-fg .hb-fg {
  position: absolute; bottom: var(--hb-tabs-h); z-index: 1;
  height: calc(100% - var(--hb-tabs-h)); width: auto; max-width: 46%;
  object-fit: contain; pointer-events: none;
}
.hb-slide.fg-right .hb-fg { right: 0; object-position: bottom right; }
.hb-slide.fg-left  .hb-fg { left: 0;  object-position: bottom left; }
/* Prechod musí prekryť maskota na tej strane, kde je text, inak mu do neho
   zasahuje rameno. Preto sa pri ľavom maskotovi gradient zrkadlí. */
.hb-slide.fg-left::after {
  background: linear-gradient(268deg, rgba(33,37,41,.92) 0%, rgba(33,37,41,.72) 44%, rgba(33,37,41,.18) 78%, rgba(33,37,41,.05) 100%);
}
.hb-slide.fg-left .hb-content { margin-left: auto; text-align: right; }
.hb-content { position: relative; z-index: 2; padding: 40px 46px 78px; max-width: 560px; }
.hb-kicker {
  display: inline-block; background: var(--brand); color: var(--ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 20px; margin-bottom: 16px;
}
.hb-slide h1, .hb-slide h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); font-weight: 700; letter-spacing: -.015em; line-height: 1.14; margin-bottom: 12px; }
.hb-slide h1 em, .hb-slide h2 em { font-style: normal; color: var(--brand); }
.hb-slide p { font-size: 14.5px; line-height: 1.6; color: #d4d7db; max-width: 420px; margin-bottom: 22px; }
.hb-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hb-count { font-size: 12.5px; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: var(--r-sm); padding: 9px 13px; }
.hb-count b { color: var(--brand); font-weight: 600; font-variant-numeric: tabular-nums; }

.hb-arrow {
  position: absolute; top: 42%; z-index: 5; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--text); display: grid; place-items: center;
  box-shadow: var(--shadow-1); opacity: 0; transition: opacity var(--dur), background var(--dur), transform .12s var(--ease);
}
.hb-slider:hover .hb-arrow, .hb-arrow:focus-visible { opacity: 1; }
.hb-arrow:hover { background: #fff; }
.hb-arrow:active { transform: scale(.94); }
.hb-arrow svg { width: 18px; height: 18px; }
.hb-prev { left: 14px; }
.hb-next { right: 14px; }

.hb-tabs {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: rgba(33,37,41,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.08);
}
.hb-tab {
  padding: 11px 16px 13px; text-align: left; color: #b9bdc4; position: relative;
  border-left: 1px solid rgba(255,255,255,.08); transition: color var(--dur), background var(--dur);
}
.hb-tab:first-child { border-left: 0; }
.hb-tab::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.hb-tab.active { color: #fff; background: rgba(255,255,255,.05); }
.hb-tab.active::before { transform: scaleX(1); }
.hb-tab:hover { color: #fff; }
.hb-tab b { display: block; font-size: 13px; font-weight: 700; }
.hb-tab span { font-size: 11.5px; }

/* bočné mini bannery */
.hb-side { display: grid; grid-template-rows: 1fr 1fr; gap: 14px; }
.hb-mini {
  position: relative; border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px;
  overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hb-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.hb-mini > svg { width: 40px; height: 40px; }
.hbm-txt b { display: block; font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 4px; }
.hbm-txt span { font-size: 12.5px; line-height: 1.5; display: block; }
.hbm-arrow {
  position: absolute; right: 16px; bottom: 16px; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; transition: transform var(--dur) var(--ease);
}
.hb-mini:hover .hbm-arrow { transform: translateX(3px); }
.hbm-arrow svg { width: 15px; height: 15px; }
.hb-mini-gold { background: linear-gradient(150deg, #ffefc4, #fddf8e); color: #4a3a00; }
.hb-mini-gold > svg { color: #8a6a00; }
.hb-mini-gold .hbm-txt span { color: #6d5600; }
.hb-mini-gold .hbm-arrow { background: rgba(74,58,0,.1); color: #4a3a00; }
.hb-mini-dark { background: linear-gradient(150deg, var(--coal), var(--ink)); color: #fff; }
.hb-mini-dark > svg { color: var(--brand); }
.hb-mini-dark .hbm-txt span { color: #b9bdc4; }
.hb-mini-dark .hbm-arrow { background: rgba(255,255,255,.12); color: #fff; }

/* zľavnené — meta v hlavičke */
.sec-label-sale { color: var(--sale); }
/* Na tmavom podklade: --brand-text je tmavá okrová, čitateľná na papieri a
   takmer neviditeľná na grafite. Tam kde je pozadie tmavé, nesie štítok plnú
   značkovú žltú — rovnako ako pás v pätičke alebo klubová plaketa. */
.sec-label-invert { color: var(--brand); }
.sale-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.countdown-chip {
  display: inline-flex; align-items: center; font-size: 12px; color: var(--muted);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 13px;
}
.countdown-chip b { color: var(--sale); font-weight: 600; font-variant-numeric: tabular-nums; }

/* taby výberu produktov */
.rail-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.rt-pill {
  padding: 9px 18px; border-radius: 22px; font-size: 13.5px; font-weight: 600; color: var(--muted);
  background: #fff; border: 1.5px solid var(--line);
  transition: color var(--dur), background var(--dur), border-color var(--dur), transform .12s var(--ease);
}
.rt-pill:hover { color: var(--text); border-color: var(--muted-2); }
.rt-pill:active { transform: scale(.96); }
.rt-pill.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ikonové doplnky (SVG namiesto emoji) */
.flash-ic { width: 24px; height: 24px; flex: none; }
.sale-head .flash { display: inline-flex; align-items: center; gap: 9px; }
.ic-flip { transform: scaleX(-1); }
.ship-progress .t { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ship-progress .t svg { width: 15px; height: 15px; flex: none; }
.chip button svg { width: 10px; height: 10px; }
.f-reset { display: flex; align-items: center; justify-content: center; gap: 7px; }
.f-reset svg { width: 12px; height: 12px; }
.step .num svg { width: 12px; height: 12px; }
.mm-sub a.all { display: flex; align-items: center; gap: 8px; }
.mm-sub a.all svg { width: 13px; height: 13px; }

/* USP — tichý rad bez boxov (štýl kompava) */
.usp { padding: 6px 0 0; }
.usp-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 26px 0 8px; }
.usp-item { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 4px 10px; }
.usp-item svg { width: 34px; height: 34px; color: var(--text); stroke-width: 1.3; flex: none; }
.usp-item b { display: block; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.usp-item span { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

/* sekcie */
.section { padding: 54px 0 8px; }
.section-tight { padding: 34px 0 8px; }

/* kategórie — svetlé karty s ikonami na priehľadnom pozadí */
.cat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.cat-tile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 24px 14px 18px;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat-tile:hover { transform: translateY(-3px); border-color: var(--brand); box-shadow: var(--shadow-1); }
.ct-icon { width: 86px; height: 86px; object-fit: contain; margin-bottom: 10px; transition: transform .3s var(--ease); }
.cat-tile:hover .ct-icon { transform: scale(1.06); }
.ct-meta b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--text); line-height: 1.25; }
.ct-meta span { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

/* marquee promo — tmavý prémiový pás */
.marquee { background: var(--ink); border-block: 1px solid var(--line-dark); overflow: hidden; padding: 13px 0; position: relative; }
.marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 26s linear infinite; }
.marquee span {
  font-family: var(--f-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand); padding: 0 26px; white-space: nowrap; display: flex; align-items: center; gap: 26px;
}
.marquee span::after { content: ""; width: 6px; height: 6px; background: var(--brand); opacity: .55; transform: rotate(45deg); border-radius: 1px; flex: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* kategóriové bannery — obrázkový merchandising pás pod výberom produktov.
   Nahradil .promo-duo (textovú dvojicu), ktorej svetlá karta sľubovala dopravu
   zdarma po ŠTVRTÝ raz na jednej stránke a tmavá viedla na /barberclub/ po ÔSMY.
   Tu je karta obrázok kategórie s prekrytým názvom — merchandising, nie ďalší
   odsek toho istého sľubu.

   Zlom je na 900px, nie na 430px. Jediné responzívne pravidlo .promo-duo sedelo
   na 430px, takže od 431 do 1200px sa dve karty delili o riadok a nadpis sa
   lámal do štyroch riadkov. Na 900px sa už skladá aj .b2b aj .usp-in, čiže
   stránka mení mriežku na jednom mieste (pravidlá sú v bloku na konci súboru). */
.cat-banners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cat-banner {
  position: relative; display: block; overflow: hidden;
  border-radius: var(--r-lg); aspect-ratio: 16 / 9; background: var(--ink); color: #fff;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.cat-banner:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.cat-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Scrim, nie dôvera v generátor: aj keď model nechá ľavú spodnú časť tmavú,
   obrázok sa raz vymení z admina a text musí ostať čitateľný na čomkoľvek. */
.cat-banner::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(33,37,41,.94) 0%, rgba(33,37,41,.58) 46%, rgba(33,37,41,.06) 100%);
}
.cb-body { position: relative; z-index: 2; height: 100%; padding: 22px; display: grid; align-content: end; gap: 4px; }
.cb-body b { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.35rem); text-transform: uppercase; letter-spacing: .03em; line-height: 1.12; }
.cb-body > span { font-size: 12.5px; line-height: 1.45; color: #c7cad0; }
.cb-cta {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 8px;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand);
}
.cb-cta svg { width: 14px; height: 14px; transition: transform var(--dur) var(--ease); }
.cat-banner:hover .cb-cta svg { transform: translateX(4px); }

/* B2B blok */
.b2b { position: relative; background: var(--ink); border-radius: var(--r-lg); overflow: hidden; color: #fff; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 380px; }
.b2b-txt { padding: 46px 48px; display: grid; align-content: center; gap: 18px; position: relative; z-index: 2; }
.b2b-txt h2 { color: #fff; }
.b2b-txt h2 .yl { color: var(--brand); }
.b2b-list { display: grid; gap: 11px; }
.b2b-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: #c7cad0; }
.b2b-list svg { width: 18px; height: 18px; color: var(--brand); flex: none; margin-top: 1px; }
.b2b-list b { color: #fff; }
.b2b-cta { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.b2b-img { position: relative; min-height: 260px; }
.b2b-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.b2b-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--ink) 0%, transparent 40%); }
.b2b-badge {
  position: absolute; top: 22px; right: 22px; z-index: 3; background: var(--brand); color: var(--ink);
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px; border-radius: var(--r-sm); box-shadow: var(--shadow-brand);
}

/* Výpredaj sekcia */
.sale-wrap { background: var(--coal); border-radius: var(--r-lg); padding: 30px; color: #fff; position: relative; overflow: hidden; }
.sale-wrap::before { content: ""; position: absolute; inset: 0; background: url('../assets/img/gen/vypredaj.jpg') center/cover; opacity: .16; }
.sale-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.sale-head h2 { color: #fff; display: flex; align-items: center; gap: 14px; }
.sale-head h2 .flash { color: var(--brand); }
.countdown { display: flex; gap: 8px; align-items: center; }
.cd-cell { background: var(--ink); border: 1px solid var(--line-dark); border-radius: var(--r-sm); padding: 8px 10px; text-align: center; min-width: 56px; }
.cd-cell b { font-family: var(--f-mono); font-weight: 600; font-size: 19px; color: var(--brand); display: block; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cd-cell span { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.cd-sep { font-family: var(--f-mono); color: var(--brand); font-size: 18px; }
.sale-wrap .p-rail { position: relative; }

/* značky */
/* Matica značiek — 6 v riadku, vlasové linky medzi buňkami, vzdušné buňky
   s logami (ako na starom webe). Buňka má pevný pomer strán, takže mriežka
   čítala ako pravidelná matica aj keď sú logá rôzne vysoké/široké.
   Linky kreslí gap 1px nad podkladom vo farbe linky — žiadna nth-child
   aritmetika pri zmene počtu stĺpcov. Rebrík 6 → 3 → 2 (obe delia 6, takže
   doplnkové prázdne buňky z PHP vždy dorovnajú posledný riadok). */
.brands-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.brand-cell {
  display: grid; place-items: center; padding: 16px 14px; aspect-ratio: 1 / .78;
  background: #fff;
  font-family: var(--f-display); font-weight: 700; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-2);
  transition: color var(--dur) var(--ease); cursor: pointer; text-align: center;
}
/* Logá sú prevažne monochromatická grafika — v odtieňoch šedej sa matica
   drží pokope, na hover sa buňka rozsvieti a logo dostane plný kontrast. */
/* Zdrojové logá majú rôzne veľa vlastného prázdna okolo grafiky, takže
   jeden strop nikdy nezrovná ich vnímanú veľkosť úplne. Strop výšky je
   zámerne vysoký (88px), aby o šírke rozhodovala `max-width` — inak sa
   logá s pomerom ~0,7 zmenšia na polovicu buňky. */
.brand-cell img {
  max-width: 76%; max-height: 88px; width: auto; height: auto; object-fit: contain;
  filter: grayscale(1); opacity: .72;
  transition: filter var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Žiadne žlté podfarbenie buňky — v matici značiek z neho bola len blikajúca
   škvrna. Interakciu nesie samotné logo: zväčší sa a dostane plnú farbu. */
.brand-cell:hover, .brand-cell:focus-visible { color: var(--ink); }
.brand-cell:hover img, .brand-cell:focus-visible img { filter: grayscale(0); opacity: 1; transform: scale(1.14); }
/* Stránka /znacky/ je tá istá matica, len úplná — pás na titulke končí odkazom
   „Všetky značky", takže obe musia vyzerať ako jedna vec v dvoch hustotách.
   Jediný rozdiel je väčší polomer: na stránke je matica hlavný blok, nie
   doplnok sekcie. */
.brands-strip-page { border-radius: var(--r-lg); }
/* Doplnok neúplného posledného riadku — nie je to odkaz, nemá kurzor ani hover. */
.brand-cell-blank { cursor: default; }
.brands-empty { margin: 0; padding: 60px 0; text-align: center; color: var(--muted); font-size: 15px; }

/* recenzie — posuvník, tri karty naraz */
/* Rail postavený na scroll-snap, nie na translateX: natívne ťahanie prstom a
   klávesnica fungujú bez JS, arrowy sú len nadstavba (site.js ich odkryje). */
.rev-head-side { display: flex; align-items: center; gap: 14px; }
.rev-meta { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); white-space: nowrap; }
.rev-nav { display: flex; gap: 8px; }
/* display:flex prebíja `hidden` z UA štýlu — bez tohto by šípky svietili vždy. */
.rev-nav[hidden] { display: none; }
.rev-arrow {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: #fff; border: 1px solid var(--line); color: var(--text);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color var(--dur) var(--ease), color var(--dur), opacity var(--dur), transform .12s var(--ease);
}
.rev-arrow svg { width: 17px; height: 17px; }
.rev-prev svg { rotate: 180deg; }
.rev-arrow:hover { border-color: var(--ink); color: var(--ink); }
.rev-arrow:active { transform: scale(.94); }
.rev-arrow:disabled { opacity: .3; cursor: default; }
.rev-arrow:disabled:hover { border-color: var(--line); color: var(--text); }

.rev-slider { position: relative; }
.reviews-grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px) / 3);
  gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
}
.reviews-grid::-webkit-scrollbar { display: none; }
.reviews-grid > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .reviews-grid { scroll-behavior: auto; } }
/* Karty v jednom riadku gridu sú rovnako vysoké, takže odznak „Recenzia z
   Google“ zarovnáme na spodok — inak sa v rade troch rozbehne do troch výšok. */
.review-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.review-card .review-verified { margin-top: auto; align-self: flex-start; }
.review-card .stars svg { width: 15px; height: 15px; }
.review-card p { font-size: 14px; line-height: 1.6; color: var(--text); }
.review-who { display: flex; align-items: center; gap: 11px; margin-top: 4px; }
.review-who .av { width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--brand); display: grid; place-items: center; font-family: var(--f-display); font-size: 15px; }
.review-who b { display: block; font-size: 13.5px; }
.review-who span { font-size: 12px; color: var(--muted); }
.review-verified { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--stock); text-transform: uppercase; }
.review-verified svg { width: 13px; height: 13px; }
/* Zelené „Overený nákup“ ostáva pre recenzie k produktu (product-depot.php).
   Google sám píše „Recenzie nie sú overované“, tak tu nesľubujeme overenie. */
.review-verified--google { color: var(--muted); }
.review-verified--google svg { color: var(--brand-deep); }

/* ==========================================================================
   OBSAHOVÉ STRÁNKY  (templates/pages/default.php + contact.php)
   --------------------------------------------------------------------------
   O nás, Kontakt, Obchodné podmienky, Ochrana osobných údajov, Reklamačný
   poriadok, Odstúpenie od zmluvy, Doprava a platba — sedem stránok, ktoré do
   tejto chvíle nemali v téme ANI JEDNO pravidlo. Šablóna emituje .page-hero /
   .page-content / .page-body, ale po prechode na Industrial Depot sa tieto
   selektory nikam neportovali, takže sa právne texty sypali na plnú šírku
   okna bez odsadení a nadpisy lepili na odseky.
   ========================================================================== */
.page-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 26px 0 24px; }
.page-hero .breadcrumb, .page-hero .breadcrumbs { color: var(--muted); padding: 0 0 8px; }
.page-hero .breadcrumb [aria-current="page"], .page-hero .breadcrumbs b { color: var(--brand-text); }
.page-hero h1 { color: var(--text); font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 700; letter-spacing: -.015em; margin: 0; }
.page-hero p { color: var(--muted); max-width: 62ch; margin-top: 9px; font-size: 15px; }

/* padding-block, NIE skratka `padding`: .page-content nesie v šablóne aj triedu
   .container, ktorej `padding-inline: var(--gutter)` by skratka vynulovala a
   text by sa lepil na okraj okna. */
.page-content { padding-block: 34px 56px; }
/* Meranie na text, nie na mriežku: 68ch je pohodlný riadok pre dlhé čítanie.
   Právne stránky sú takmer čistý text, takže si radšej vezmú menej šírky. */
.page-body { max-width: 68ch; color: var(--text); font-size: 15.5px; line-height: 1.72; }
.page-body > :first-child { margin-top: 0; }
.page-body > :last-child { margin-bottom: 0; }
.page-body p { margin: 0 0 16px; }
.page-body h2 {
  margin: 38px 0 12px; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(1.18rem, 2.1vw, 1.5rem); line-height: 1.22; letter-spacing: -.01em; color: var(--text);
}
.page-body h3 { margin: 26px 0 8px; font-weight: 700; font-size: 1.06rem; line-height: 1.3; color: var(--text); }
.page-body h4 { margin: 20px 0 6px; font-weight: 700; font-size: .98rem; color: var(--text); }
/* Prvý nadpis nesmie od hlavičky odskočiť o 38px — tam už jeden odstup je. */
.page-body > h2:first-child, .page-body > h3:first-child { margin-top: 0; }
/* Reset na riadku 67 zhadzuje odrážky na VŠETKÝCH zoznamoch, takže v texte
   stránky ich treba vrátiť ručne — inak sú z bodov len zalomené odseky. */
.page-body ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; }
.page-body ol { margin: 0 0 16px; padding-left: 22px; list-style: decimal; }
.page-body li { margin-bottom: 7px; }
.page-body li::marker { color: var(--brand-text); }
.page-body a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.page-body a:hover { color: var(--ink); }
.page-body strong, .page-body b { font-weight: 700; color: var(--text); }
.page-body hr { margin: 30px 0; border: 0; border-top: 1px solid var(--line); }
.page-body blockquote {
  margin: 22px 0; padding: 14px 18px; background: var(--bg-2);
  border-left: 3px solid var(--brand); color: var(--muted); font-size: 15px;
}
.page-body img { max-width: 100%; height: auto; border-radius: var(--r-md); }
/* Tabuľky v podmienkach a v doprave: musia sa dať posúvať, nie tlačiť
   vodorovný posuvník na celú stránku. */
.page-body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; display: block; overflow-x: auto; }
.page-body th, .page-body td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.page-body th { background: var(--bg-2); font-weight: 700; }

@media (max-width: 760px) {
  .page-content { padding-block: 24px 40px; }
  .page-body { font-size: 15px; }
  .page-body h2 { margin-top: 30px; }
}

/* ==========================================================================
   KATALÓG
   ========================================================================== */
.cat-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 24px 0 22px; }
.cat-hero h1 { color: var(--text); font-size: clamp(1.55rem, 2.8vw, 2.1rem); font-weight: 700; letter-spacing: -.015em; }
.cat-hero .breadcrumbs { color: var(--muted); padding: 0 0 8px; }
/* /znacky/ uses the shared render_breadcrumbs() component (.breadcrumb, singular)
   rather than a third hand-rolled copy of the same trail; it ships 16px of its
   own vertical padding, which is right on a bare page and too much inside this
   band. */
.cat-hero .breadcrumb { padding: 0 0 8px; }
.cat-hero-count { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-top: 10px; }
.cat-hero .breadcrumbs b { color: var(--brand-text); }
.cat-hero p { color: var(--muted); max-width: 620px; margin-top: 7px; font-size: 14px; }
/* Logo značky nad H1 na /znacka/…/. Vyššie než na karte produktu — tu je to
   hlavička stránky, nie popisok. Plná farba: na bielom pozadí hlavičky nemá
   s čím súperiť. */
.cat-hero-logo { display: block; height: 46px; width: auto; max-width: 220px; object-fit: contain; object-position: left center; margin: 2px 0 12px; }

/* ---------- lišta kategórií (.subcat-bar) ----------
   Nahradila fotodlaždice. Tie stáli 418px hlavičky a prvá karta produktu
   začínala na y=689, teda pod ohybom pri 1280×720. Jeden riadok 44px pilúl
   spraví to isté za pätinu výšky a nestojí ani jeden dotaz navyše — dlaždice
   volali bd_category_tile_image(), čo bolo pri studenej cache 2 dotazy na
   dlaždicu priamo v renderi hlavičky.

   Na desktope sa ZALAMUJE, pod 760px sa POSÚVA. Zalomenie hore je zámer:
   vodorovný posuv bez viditeľného posuvníka sa myšou dá vyvolať len
   shift+kolieskom, takže siedma podkategória Stylingu by na monitore
   prakticky neexistovala. Pod 760px je šírka vzácnejšia než objaviteľnosť.

   Posuvník je VNÚTRI .container — žiadne calc(50% - 50vw) na plnú šírku.
   100vw ráta aj so zvislým posuvníkom okna, takže full-bleed pás je vo
   Windows Chrome o ~15px širší než viewport; `html,body{overflow-x:clip}`
   na konci súboru ten pretečený pás síce nezobrazí, ale layout ostane široký
   a pravý okraj sa odreže. Prvok s vlastným overflow-x spotrebuje pretečenie
   sám a na stránku ho neprenesie — presne ako .p-rail, .reviews-grid,
   .pdp-film a .acc-nav. */
.subcat-bar {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
  padding: 4px 0;              /* miesto pre 2px outline + 2px offset fokusu;
                                  pod 760px ho scrollport inak odreže */
}
.sc-pill {
  flex: 0 0 auto;              /* bez toho flex dlhé názvy stlačí a posuv nikdy nevznikne */
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 11px 16px;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; line-height: 1.25; color: var(--text);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), transform .12s var(--ease);
}
.sc-pill .cnt { font-family: var(--f-mono); font-size: 11px; font-weight: 500; color: var(--muted-2); }
.sc-pill:hover { border-color: var(--ink); }
.sc-pill:active { transform: scale(.97); }
.sc-pill.active { background: var(--ink); border-color: var(--ink); color: #fff; cursor: default; }
.sc-pill.active .cnt { color: var(--brand); }
/* Návrat o úroveň vyššie nesie tú istú funkciu ako zrušené „Všetky produkty"
   v paneli, tak sa aj odlišuje: bez výplne, čiarkovaný rám, šípka doľava. */
.sc-pill-up { background: transparent; border-style: dashed; color: var(--muted); font-weight: 500; }
.sc-pill-up:hover { color: var(--text); border-style: solid; border-color: var(--muted-2); }
.sc-up-ic { font-family: var(--f-mono); font-size: 14px; line-height: 1; }

@media (max-width: 760px) {
  .subcat-bar {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    scroll-padding-inline: 4px;
  }
  .subcat-bar::-webkit-scrollbar { display: none; }
  .sc-pill { padding: 11px 14px; font-size: 13px; }
}

.katalog-layout { display: grid; grid-template-columns: 260px 1fr; gap: 26px; padding-top: 26px; align-items: start; }

/* filtre */
/* Filtračný stĺpec má vlastný scroll — inak je aside vyšší než okno (1075px
   proti 900px) a keďže je sticky, „Použiť filtre“ visí 240px pod ohybom a
   NEHÝBE SA ~1800px scrollu; prvý bod, kde je celé vidieť, bol 78 % stránky.
   164 = 148 (sticky offset pod hlavičkou) + 16 dýchania pri spodnej hrane.
   overscroll-behavior tu ZÁMERNE nie je: na desktope má koliesko na konci
   zoznamu prejsť na stránku. */
.filters {
  display: grid; gap: 10px; align-content: start;
  position: sticky; top: 148px;
  max-height: calc(100vh - 164px);
  max-height: calc(100dvh - 164px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.f-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); }
.f-box > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
}
.f-box > summary::-webkit-details-marker { display: none; }
.f-box > summary svg { width: 12px; height: 12px; color: var(--muted-2); transition: transform var(--dur) var(--ease); }
.f-box[open] > summary svg { transform: rotate(180deg); }
.f-box-in { padding: 2px 16px 16px; display: grid; gap: 9px; }
.f-box .check { font-size: 13.5px; }
.f-box .check .lbl { display: flex; align-items: center; gap: 10px; flex: 1; }
.f-box .check .cnt { font-family: var(--f-mono); font-size: 11px; color: var(--muted-2); }
.f-cat-link { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0; color: var(--text); }
.f-cat-link:hover { color: var(--brand-deep); }
.f-cat-link.active { font-weight: 700; color: var(--brand-deep); }
.f-cat-link .cnt { font-family: var(--f-mono); font-size: 11px; color: var(--muted-2); }
.f-sub { padding-left: 14px; border-left: 2px solid var(--line); margin-left: 2px; display: grid; }

/* .price-slider (dva range inputy) odstránený 2026-08-09 — bočný panel
   rendruje .f-price-row s dvoma číselnými poľami a žiadny šablónový súbor
   ten posuvník nikdy neemitoval. .price-vals nižšie je ŽIVÝ (catalog.php
   ho používa pod cenovými poľami), nezmazať ho spolu s ním. */
.price-vals { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 12px; color: var(--muted); margin-top: 2px; }
.price-vals b { color: var(--text); font-weight: 600; }

/* Formulár je blokový wrapper — gap z .filters sa naň nevzťahuje, takže
   f-boxy vnútri neho sedeli na sebe a ich 1px rámy sa zdvojili. */
.filters form > .f-box + .f-box { margin-top: 10px; }

/* Spoločná prilepená lišta akcií pre OBA filtračné stĺpce (katalóg
   .f-apply/.f-reset aj hľadanie .filter-apply/.filter-reset).
   Sticky sa chytá najbližšieho scrollportu — preto MUSÍ mať .filters aj
   .shop-sidebar max-height + overflow-y (vyššie a nižšie v tomto súbore).
   Bez toho by sa lišta prilepila na spodok OKNA a plávala cez celú stránku.
   Bez tieňa zámerne: CSS nevie povedať „práve som prilepený“, takže pri
   krátkom zozname (úzka kategória, vysoké okno) by tieň visel v prázdne.
   var(--paper) je zároveň pozadie stránky aj šuflíka, takže neprilepená
   lišta je neviditeľná — 3 boxy a 12 boxov vyzerá rovnako. */
.f-actions {
  position: sticky; bottom: 0; z-index: 2;
  display: grid; gap: 2px;
  margin-top: 10px;
  padding: 10px 0 4px;
  background: var(--paper);
}
.f-apply { margin-top: 0; }
.f-reset { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 8px; }
.f-reset:hover { color: var(--sale); }

/* toolbar */
.toolbar { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 16px; flex-wrap: wrap; }
.toolbar .found { font-size: 13px; color: var(--muted); }
.toolbar .found b { color: var(--text); font-family: var(--f-mono); }
.toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.toolbar .select { padding: 9px 34px 9px 12px; font-size: 13px; width: auto; }
.view-toggle { display: flex; border: 1.5px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.view-toggle button { width: 36px; height: 36px; display: grid; place-items: center; color: var(--muted-2); transition: all var(--dur); }
.view-toggle button.active { background: var(--ink); color: var(--brand); }
.view-toggle svg { width: 15px; height: 15px; }

/* aktívne chips */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff;
  font-size: 12.5px; font-weight: 600; padding: 6px 8px 6px 12px; border-radius: 30px;
  animation: fadeSlide .25s var(--ease);
}
.chip button { width: 17px; height: 17px; display: grid; place-items: center; background: rgba(255,255,255,.14); border-radius: 50%; color: #fff; font-size: 11px; line-height: 1; transition: background var(--dur); }
.chip button:hover { background: var(--sale); }
.chip.clear-all { background: transparent; color: var(--muted); border: 1px dashed var(--line); cursor: pointer; }
.chip.clear-all:hover { color: var(--sale); border-color: var(--sale); }

/* list view */
.p-grid.list-view { grid-template-columns: 1fr; }
.p-grid.list-view .p-card { flex-direction: row; align-items: stretch; }
/* V zobrazení zoznamu určuje výšku riadok, nie pomer strán — obrázok je
   absolútny, takže bez minimálnej výšky by sa box zložil na nulu. */
.p-grid.list-view .p-card-media { width: 190px; flex: none; aspect-ratio: auto; min-height: 170px; }
.p-grid.list-view .p-card-body { border-top: 0; border-left: 1px solid var(--line); justify-content: center; }
.p-grid.list-view .p-name { min-height: 0; }
.p-grid.list-view .p-card-cta { max-width: 320px; }

/* seo text */
.seo-block { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 26px 28px; margin-top: 36px; }
.seo-block h2 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.seo-block p { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin-bottom: 10px; }
.seo-block.collapsed p:nth-of-type(n+3) { display: none; }
.seo-more { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); border-bottom: 1px solid currentColor; }

/* mobilné filtre tlačidlo */
.filters-fab { display: none; }

/* ==========================================================================
   PRODUKT - DEPOT (templates/shop/product-depot.php)
   ========================================================================== */
/* Replaces the dead "PRODUKT" block that styled a class-based PDP prototype
   which was superseded by an inline-styled template — none of its selectors
   were emitted by any template. This section styles templates/shop/product-depot.php.

   Shape rules (owner-fixed): graphite + brand yellow, radii 7/10/14 with a
   999px pill on everything interactive, Lexend 700 headings in normal case and
   never italic, IBM Plex Mono for micro-accents, red (--sale) reserved for
   discounts and errors — BarberClub is always yellow. */

.pdp { background: var(--paper); }
.pdp .num { font-variant-numeric: tabular-nums; }

/* ---------- A · identity band ---------- */
/* Path, maker, name — three lines, no fourth. The band used to stack five, of
   which the last crumb repeated the H1 verbatim, .pdp-cat-link repeated the
   crumb above it, and the rating announced that there was no rating. */
.pdp-head { background: #fff; border-bottom: 1px solid var(--line); padding: 20px 0 32px; }
.pdp-crumbs {
  display: flex; align-items: baseline; white-space: nowrap; min-width: 0;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px;
}
.pdp-crumbs a, .pdp-crumb-sep { flex: none; }
.pdp-crumbs a { color: inherit; }
.pdp-crumbs a:hover { color: var(--ink); }
/* The last crumb is the product name. It takes whatever is LEFT of the line
   and ellipsizes only when the line actually runs out — the old fixed 22ch cap
   chopped "Morgan's Pomáda na va…" while 700px of row sat empty next to it
   (owner, 13.08). Kept rather than dropped so "you are here" stays complete
   for screen readers; title= carries the full name. */
.pdp-crumbs [aria-current] {
  color: var(--ink); flex: 0 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdp-crumb-sep { margin: 0 7px; opacity: .45; }
.pdp-head-in { max-width: 900px; }
.pdp-eyebrow { margin: 0 0 10px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }
.pdp-eyebrow-brand { color: var(--brand-text); font-weight: 600; }
.pdp-eyebrow-brand:hover { color: var(--ink); }
/* The brand's LOGO is not here — it lives in band D (.pdp-brand). This band is
   three lines of type, and a 132x46 image in the middle of them made the eye
   choose between a picture and the H1 above the fold; on a phone it also cost
   34px of the space this band was deliberately squeezed to save (measured at
   375px: the price sits at 638px instead of 672px). */
.pdp-title { margin: 0; font-size: clamp(27px, 3.6vw, 46px); line-height: 1.06; letter-spacing: -.015em; overflow-wrap: anywhere; }

/* ---------- B · gallery + buy panel ---------- */
.pdp-bench { padding: 34px 0 44px; }
.pdp-bench-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); gap: 48px; align-items: start; }

.pdp-gallery { position: sticky; top: 140px; }
/* DEFINITE height, not aspect-ratio + max-height. With an auto grid row the
   image sized the row to its own intrinsic square, max-height clipped the box
   and overflow:hidden sliced up to 42% off the photo between ~610px and 1080px
   wide; the image's own max-height:86% had no definite height to resolve
   against either. A fixed height fixes both at once. */
.pdp-stage {
  position: relative; width: 100%; height: clamp(320px, 34vw, 470px);
  background: #fff; border-radius: var(--r-lg);
  /* An explicit 1fr row is what makes the image's max-height resolvable: with
     an implicit auto row the row grew to the photo's intrinsic square and the
     percentage had no definite height to measure against. */
  display: grid; grid-template-rows: minmax(0, 1fr); place-items: center;
  overflow: hidden; cursor: zoom-in;
  border: 1px solid var(--line); transition: border-color var(--dur) var(--ease);
}
.pdp-stage:hover { border-color: var(--ink); }
.pdp-stage:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
/* max-*, not width/height: as percentages the image sized the auto grid row
   to its own square height, max-height then clipped the row and up to 42%
   of the photo was cut off between roughly 610px and 1080px wide. */
.pdp-stage img { max-width: 86%; max-height: 86%; width: auto; height: auto; object-fit: contain; position: relative; z-index: 2; pointer-events: none; }
.pdp-stage.is-empty { border-style: dashed; cursor: default; }
.pdp-stage-empty { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
/* z-index 3: the photo carries z-index 2, without this the plaque paints under it */
.pdp-plaque {
  position: absolute; z-index: 3; top: 14px; left: 14px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill); line-height: 1;
}
.pdp-plaque.is-out  { background: var(--ink); color: var(--brand); }
.badge-club-save { background: var(--brand); color: var(--ink); }
.pdp-plaque.is-sale { background: var(--sale); color: #fff; }
.pdp-plaque.is-top  { background: var(--brand); color: var(--ink); }

.pdp-film { display: flex; gap: 9px; margin-top: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.pdp-film-item {
  flex: none; width: 74px; height: 74px; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); display: grid; place-items: center; cursor: pointer; padding: 6px;
  transition: border-color var(--dur) var(--ease);
}
.pdp-film-item img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pdp-film-item[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }

/* One panel whose rows are separated by hairlines — not a stack of cards. */
.pdp-buy { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); position: sticky; top: 140px; overflow: hidden; }
.pdp-buy-row { padding: 18px 22px; border-top: 1px solid var(--line); }
.pdp-buy-row:first-child { border-top: 0; }

.pdp-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 12px; }
.pdp-price-now { font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3vw, 42px); line-height: 1; letter-spacing: -.02em; }
.pdp-price-now.is-sale { color: var(--sale); }
.pdp-price-na { font-family: var(--f-display); font-weight: 700; font-size: 24px; color: var(--muted); }
.pdp-price-old { font-family: var(--f-mono); font-size: 15px; color: var(--muted); text-decoration: line-through; }
.pdp-price-reason { flex-basis: 100%; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--sale); }
.pdp-price-reason.is-club { color: var(--brand-text); }
.pdp-vat { flex-basis: 100%; font-size: 12.5px; color: var(--muted); }
/* Rating sits in the price row as its own line (like .pdp-vat) rather than in a
   .pdp-buy-row of its own — a hairline separator for one row of stars is heavy. */
.pdp-buy-rating { flex-basis: 100%; display: inline-flex; align-items: center; }
.pdp-buy-rating:hover .stars { color: var(--ink); }

/* ---------- BarberClub — graphite plaque, never a red notice ---------- */
/* Two parts — a shrinkable text column and a fixed pill. As five loose flex
   children the pill dropped onto its own line as soon as the price and the
   note together outgrew the panel. */
.pdp-club { display: flex; align-items: center; gap: 14px; border-radius: var(--r-md); padding: 13px 15px; }
.pdp-club-main { display: grid; gap: 3px; min-width: 0; }
.pdp-club--teaser { background: var(--ink); color: #fff; transition: background var(--dur) var(--ease); }
.pdp-club--teaser:hover { background: var(--coal); }
.pdp-club--teaser:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pdp-club-label { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); }
.pdp-club-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.pdp-club-price b { font-family: var(--f-display); font-size: 19px; font-weight: 700; color: var(--brand); }
.pdp-club-note, .pdp-club-pitch { font-size: 12.5px; color: #c8ccd0; }
.pdp-club-cta {
  margin-left: auto; flex: none; background: var(--brand); color: var(--ink);
  border-radius: var(--r-pill); padding: 8px 16px; font-size: 12.5px; font-weight: 600;
  white-space: nowrap; text-align: center;
}
.pdp-club--teaser:hover .pdp-club-cta { background: #fff; }
.pdp-club--member { background: var(--brand-glow); color: var(--ink); }
.pdp-club--member svg { width: 17px; height: 17px; color: var(--brand-text); flex: none; }
.pdp-club-txt { font-size: 13.5px; font-weight: 600; }
.pdp-club-saved { margin-left: auto; flex: none; font-family: var(--f-mono); font-size: 11.5px; color: var(--brand-text); white-space: nowrap; }

/* ---------- buy actions ---------- */
.pdp-act { display: flex; align-items: center; gap: 10px; }
.pdp-act .qty { flex: none; }
.pdp-cart { flex: 1; justify-content: center; }
.pdp-act .btn-block { flex: 1; }
.pdp-fav {
  flex: none; width: 48px; height: 48px; border-radius: var(--r-pill);
  border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center;
  color: var(--steel-2); cursor: pointer; transition: color var(--dur), border-color var(--dur);
}
.pdp-fav svg { width: 19px; height: 19px; }
.pdp-fav:hover { color: var(--ink); border-color: var(--ink); }
.pdp-fav.on, .pdp-fav.active { color: var(--sale); border-color: var(--sale); }
.pdp-fav.on svg, .pdp-fav.active svg { fill: currentColor; }
.pdp-avail { padding-top: 0; border-top: 0; }

/* ---------- delivery timeline (was a bordered info card) ---------- */
.pdp-ship-track { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.pdp-ship-node { position: relative; padding-top: 20px; padding-right: 8px; }
.pdp-ship-node::before {
  content: ""; position: absolute; top: 5px; left: 0; width: 9px; height: 9px;
  border-radius: 50%; background: var(--line); box-shadow: 0 0 0 3px #fff;
}
.pdp-ship-node::after { content: ""; position: absolute; top: 8.5px; left: 9px; right: 0; height: 2px; background: var(--line); }
.pdp-ship-node:last-child::after { display: none; }
.pdp-ship-node.is-done::before { background: var(--brand); }
.pdp-ship-node.is-done::after { background: var(--brand); }
.pdp-ship-node.is-goal::before { background: var(--ink); }
.pdp-ship-when { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.pdp-ship-what { display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pdp-ship-terms { margin: 0; font-size: 12px; color: var(--muted); }
.pdp-dot { margin: 0 5px; opacity: .5; }

/* ---------- C · collapsible sections ---------- */
/* Native <details>: no JS to open, content stays in the DOM for crawlers, and
   the keyboard/screen-reader behaviour is the browser's rather than ours.
   Each panel opens independently — <details name> would make them exclusive,
   but its support is uneven and inconsistent behaviour is worse than one rule. */
.pdp-deck { background: var(--paper); border-top: 1px solid var(--line); padding: 40px 0 44px; }
.pdp-deck-head { margin-bottom: 18px; }
.pdp-deck-head .h-display { margin: 4px 0 0; font-size: clamp(21px, 2.2vw, 27px); }
.pdp-acc { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.pdp-acc-item { scroll-margin-top: 140px; }
.pdp-acc-item + .pdp-acc-item { border-top: 1px solid var(--line); }
.pdp-acc-head {
  display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none;
  padding: 19px 22px; user-select: none;
}
.pdp-acc-head::-webkit-details-marker { display: none; }
.pdp-acc-head:hover .pdp-acc-title { color: var(--brand-text); }
.pdp-acc-head:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }
.pdp-acc-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); letter-spacing: -.01em; transition: color var(--dur); }
.pdp-acc-count {
  font-family: var(--f-mono); font-size: 10.5px; color: var(--muted);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 2px 9px;
}
/* Plus that becomes a minus — drawn, not a glyph, so it stays optically centred */
.pdp-acc-sign { position: relative; margin-left: auto; width: 34px; height: 34px; border-radius: var(--r-pill); border: 1.5px solid var(--line); flex: none; transition: border-color var(--dur), background var(--dur); }
.pdp-acc-sign::before, .pdp-acc-sign::after {
  content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  background: var(--ink); border-radius: 1px; transition: opacity var(--dur), rotate var(--dur) var(--ease);
}
.pdp-acc-sign::before { width: 13px; height: 2px; }
.pdp-acc-sign::after  { width: 2px; height: 13px; }
.pdp-acc-head:hover .pdp-acc-sign { border-color: var(--ink); }
.pdp-acc-item[open] .pdp-acc-sign { background: var(--brand); border-color: var(--brand); }
.pdp-acc-item[open] .pdp-acc-sign::after { opacity: 0; rotate: 90deg; }
.pdp-acc-body { padding: 0 22px 26px; }
@media (prefers-reduced-motion: reduce) { .pdp-acc-sign::before, .pdp-acc-sign::after { transition: none; } }

.pdp-prose { max-width: 72ch; font-size: 15px; line-height: 1.72; color: var(--steel-2); }
.pdp-prose p { margin: 0 0 14px; }
.pdp-prose p:last-child { margin-bottom: 0; }
.pdp-prose a { color: var(--brand-text); border-bottom: 1px solid var(--brand); }
/* One column, read top to bottom. Two columns split a short list into two
   unrelated halves and the eye had to guess whether to continue right or down.
   Narrow, though: a 720px rule under the value "Wahl" is mostly empty rule, and
   a 200px label column parks the value a third of the way across the panel. */
.pdp-specs { margin: 0; max-width: 520px; }
.pdp-spec { display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
/* Posledná linka nič neoddeľuje — visela by nad odsadením panela. */
.pdp-spec:last-child { border-bottom: 0; }

.pdp-spec dt { font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pdp-spec dd { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.pdp-inci { margin: 0; max-width: 78ch; font-family: var(--f-mono); font-size: 12px; line-height: 1.75; color: var(--steel-2); }
.pdp-steps { margin: 0; padding-left: 20px; max-width: 66ch; font-size: 15px; line-height: 1.8; color: var(--steel-2); }
.pdp-steps li { margin-bottom: 6px; }

/* ---------- D · the maker ---------- */
/* The brand's own band: the logo plate and that brand's other products. White,
   like the rails band below it, so the two read as one closing block under the
   paper-coloured deck — and, more to the point, because two of the eighteen
   logos on file (Wahl, Uppercut Deluxe) are JPEGs with the white background
   baked in. On any other surface those two sit in a grey rectangle. The plate
   is drawn with a hairline instead of a fill for the same reason. */
.pdp-brand { background: #fff; border-top: 1px solid var(--line); padding: 34px 0 30px; }
.pdp-brand-card {
  display: flex; align-items: center; gap: 18px 28px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px;
}
.pdp-brand-mark { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(21px, 2.2vw, 27px); line-height: 1; letter-spacing: -.01em; }
/* A shared AREA, not a fixed height, so no brand is bigger than another purely
   for having a wider file. The box is ~2:1 because that is the shape the files
   actually are: thirteen of the eighteen sit at 1.4:1, the two JPEGs are
   square, and only Slick Gorilla is a long wordmark at 4.6:1. The first box
   tried here was 3:1, which left almost every logo constrained by its height
   and looking half the size it should. width/height attributes mirror the box
   so the lazy image reserves its space before it loads — with height:auto a
   lazy image has a 0px box, never intersects the viewport, and so never
   loads. */
.pdp-brand-logo { display: block; height: 56px; width: 116px; object-fit: contain; object-position: left center; }
/* Reason to follow the link: a rail capped at ten reads as the whole range. */
.pdp-brand-count {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  border-left: 1px solid var(--line); padding-left: 22px;
}
.pdp-brand-go { margin-left: auto; }
.pdp-brand-rail { margin-top: 22px; }

/* ---------- reviews (a panel of band C, not a band) ---------- */
.pdp-rev-summary { display: flex; gap: 40px; align-items: center; flex-wrap: wrap; margin-bottom: 26px; }
.pdp-rev-score { display: grid; gap: 6px; justify-items: start; }
.pdp-rev-score b { font-family: var(--f-display); font-size: 46px; font-weight: 700; line-height: 1; }
.pdp-rev-count, .pdp-rev-verified { font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pdp-rev-verified { color: var(--stock); }
.rev-bars { flex: 1; min-width: 240px; max-width: 420px; display: grid; gap: 6px; }
.rev-bar { display: grid; grid-template-columns: 40px 1fr 28px; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.rev-bar-track { height: 7px; background: var(--line); border-radius: 4px; overflow: hidden; }
.rev-bar-track i { display: block; height: 100%; background: var(--brand); }
.rev-bar-n { text-align: right; }
.pdp-rev-list { display: grid; }
.rev-item { border-top: 1px solid var(--line); padding: 18px 0; display: grid; gap: 8px; }
.rev-item header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.rev-item header b { font-weight: 700; }
.rev-item time { color: var(--muted-2); font-size: 12px; margin-left: auto; }
.rev-item h3 { margin: 0; font-size: 15px; font-weight: 700; }
.rev-item p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.6; max-width: 700px; }
.pdp-rev-empty { font-size: 14px; color: var(--muted); margin: 0 0 24px; }
.pdp-rev-form { border-top: 1px solid var(--line); padding-top: 28px; margin-top: 26px; }
.pdp-rev-form-head { margin-bottom: 18px; }
.pdp-rev-form-head .h-display { margin: 4px 0 0; font-size: clamp(19px, 2vw, 24px); }
.pdp-rev-form form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; max-width: 720px; }
.pdp-rev-form .field-full { grid-column: 1 / -1; }
.field label.field-label, .field-label { font-family: var(--f-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 6px; }
.pdp-rev-submit { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pdp-rev-note { margin: 0; font-size: 12px; color: var(--muted); max-width: 420px; }
#bk-rev-feedback { font-size: 14px; }
#bk-rev-feedback.is-ok { color: var(--stock); padding: 10px 0; }
#bk-rev-feedback.is-err { color: var(--sale); padding: 10px 0; }
/* Star picker — RTL so :hover fills the stars to the left of the cursor */
.bk-star-picker { display: inline-flex; gap: 4px; direction: rtl; cursor: pointer; }
.bk-star-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.bk-star-picker label { color: var(--muted-2); cursor: pointer; transition: color var(--dur); }
.bk-star-picker label svg { fill: none; transition: fill var(--dur), color var(--dur); }
.bk-star-picker > label:hover, .bk-star-picker > label:hover ~ label,
.bk-star-picker > input:checked ~ label { color: var(--star); }
.bk-star-picker > label:hover svg, .bk-star-picker > label:hover ~ label svg,
.bk-star-picker > input:checked ~ label svg { fill: currentColor; }
.visually-hidden { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- E · rails ---------- */
.pdp-rails { border-top: 1px solid var(--line); background: #fff; }

/* ---------- mobile buy bar ---------- */
/* bottom 62px clears the global .mobile-bar (z-index 120, ~62px tall) */
.pdp-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 110; display: none;
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 24px rgba(21, 23, 28, .1);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
}
.pdp-buybar[hidden] { display: none; }
.pdp-buybar-in { display: flex; align-items: center; gap: 12px; }
.pdp-buybar img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); flex: none; }
.pdp-buybar-price { font-weight: 700; font-size: 16px; white-space: nowrap; }
.pdp-buybar .btn { flex: 1; padding-block: 12px; }

/* ---------- notify modal ---------- */
.pdp-modal { position: fixed; inset: 0; z-index: 1000; background: rgba(33, 37, 41, .5); display: grid; place-items: center; padding: 20px; }
.pdp-modal[hidden] { display: none; }
.pdp-modal-box { position: relative; width: 100%; max-width: 460px; background: #fff; border-radius: var(--r-lg); padding: 30px 28px 26px; box-shadow: var(--shadow-2); }
.pdp-modal-box .h-display { margin: 6px 0 8px; font-size: 25px; }
.pdp-modal-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: var(--r-pill); display: grid; place-items: center; color: var(--steel-2); cursor: pointer; }
.pdp-modal-x:hover { background: var(--paper); color: var(--ink); }
.pdp-modal-lede { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.pdp-modal form { display: grid; gap: 14px; }
.pdp-modal-msg { font-size: 13px; min-height: 18px; }
.pdp-modal-msg.is-ok { color: var(--stock); }
.pdp-modal-msg.is-err { color: var(--sale); }
.pdp-modal-fine { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.pdp-modal-fine a { text-decoration: underline; }

/* ---------- lightbox ---------- */
.pdp-lightbox { display: none; position: fixed; inset: 0; z-index: 9500; background: rgba(33, 37, 41, .93); padding: 32px; opacity: 0; transition: opacity .2s ease; }
.pdp-lightbox.is-open { display: block; opacity: 1; }
.pdp-lightbox-x { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border: 1.5px solid #f6f6f4; color: #f6f6f4; border-radius: var(--r-pill); display: grid; place-items: center; cursor: pointer; z-index: 2; }
.pdp-lightbox-x:hover { background: #f6f6f4; color: var(--ink); }
.pdp-lightbox img { display: block; max-width: 90vw; max-height: 90vh; object-fit: contain; position: absolute; inset: 0; margin: auto; background: #fff; padding: 24px; border-radius: var(--r-md); }
@media (prefers-reduced-motion: reduce) { .pdp-lightbox { transition: none; } }

/* ---------- responsive (existing ladder: 1120 / 1080 / 900 / 760 / 420) ---------- */
@media (max-width: 1120px) {
  /* 360px could not hold stepper + CTA + heart; the heart was clipped. */
  .pdp-bench-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 32px; }
}
@media (max-width: 1080px) {
  .pdp-bench-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pdp-gallery, .pdp-buy { position: static; }
  .pdp-stage { height: min(58vw, 420px); }
}
@media (max-width: 900px) {
  /* Reserve room so the fixed bar never covers the last rows of the footer,
     and publish the new bottom-edge owner so the chat FAB clears it too. */
  body:has(.pdp-buybar:not([hidden])) { --bd-bottom-bar: calc(76px + env(safe-area-inset-bottom)); }
  body:has(.pdp-buybar) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .pdp-head { padding-bottom: 24px; }
  .pdp-buybar { display: block; }
}
@media (max-width: 620px) {
  /* Stack the club plaque: at this width the price line and a nowrap pill
     cannot share a row without one of them being clipped. */
  .pdp-club { flex-direction: column; align-items: stretch; gap: 11px; }
  .pdp-club-cta { margin-left: 0; width: 100%; }
  .pdp-club--member { flex-direction: row; align-items: center; }
  .pdp-club-saved { margin-left: auto; }
  /* Same reason on the maker plate — and the pill drops its nowrap here, since
     "Všetko od Uppercut Deluxe" is a long label on a narrow button. Stacked,
     the count's divider has to move from its left edge to its top. */
  .pdp-brand-card { flex-direction: column; align-items: stretch; gap: 14px; }
  .pdp-brand-count { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 14px; }
  .pdp-brand-go { margin-left: 0; width: 100%; white-space: normal; }
}
@media (max-width: 760px) {
  /* Only below 760 does the global .mobile-bar exist — the buy bar stands ON
     it, so both heights stack. Driven off the token: this rule used to hardcode
     62px while the bar itself reserved 58px four hundred lines earlier. */
  .pdp-buybar { bottom: var(--bd-mobilebar-h); }
  body:has(.pdp-buybar:not([hidden])) { --bd-bottom-bar: calc(76px + var(--bd-mobilebar-h) + env(safe-area-inset-bottom)); }
  body:has(.pdp-buybar) { padding-bottom: calc(76px + var(--bd-mobilebar-h) + env(safe-area-inset-bottom)); }
  .pdp-acc-head { padding: 17px 16px; }
  .pdp-acc-body { padding: 0 16px 22px; }
  .pdp-deck { padding: 28px 0 34px; }
  /* Getting to the price took ~990px on a 375px phone, largely because the
     breadcrumbs wrapped to two lines. They scroll sideways instead; the lede
     that used to be hidden here no longer exists on any width. */
  .pdp-head { padding: 12px 0 18px; }
  .pdp-crumbs { margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
  .pdp-crumbs::-webkit-scrollbar { display: none; }
  /* Deep trails (5 úrovní + názov) sa na telefóne nezmestia ani so skratkou —
     názvu ostáva čitateľné minimum a zvyšok cesty sa dokrúti bokom. */
  .pdp-crumbs [aria-current] { min-width: 12ch; }
  .pdp-bench { padding: 16px 0 30px; }
  .pdp-buy-row { padding: 16px 18px; }
  .pdp-rev-form form { grid-template-columns: 1fr; }
  .pdp-spec { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .pdp-ship-track { grid-template-columns: 1fr; gap: 12px; }
  .pdp-ship-node { padding-top: 0; padding-left: 22px; }
  .pdp-ship-node::before { top: 4px; }
  .pdp-ship-node::after { top: 12px; left: 4px; right: auto; width: 2px; height: calc(100% + 4px); }
}
@media (max-width: 455px) {
  /* Below this the qty stepper + CTA + heart cannot share one row without the
     heart being clipped out of the panel. Covers the notify button too, so an
     out-of-stock page does not orphan the heart on a line of its own. */
  .pdp-act { flex-wrap: wrap; }
  .pdp-cart, .pdp-act .btn-block { order: 3; flex-basis: 100%; }
}
@media (max-width: 420px) {
  .pdp-stage { height: 300px; }
  .pdp-price-now { font-size: 30px; }
}


/* ==========================================================================
   MAGAZÍN  (journal.php, journal-post.php, journal-category.php)
   --------------------------------------------------------------------------
   Článok mal tri rôzne šírky nad sebou: obrázok cez celý kontajner (1240),
   stĺpec článku 1.5fr (~700) a v ňom text zastropovaný na 65ch (~480). Tri
   pravé okraje na jednej stránke — presne to, čo vyzerá „krivo".
   Teraz má telo aj obrázok jeden spoločný pás .mag-wrap, a mieru textu určuje
   mriežka, nie druhý strop vo vnútri stĺpca.
   ========================================================================== */
.mag-wrap { max-width: 1100px; margin-inline: auto; }

/* --- hlavička článku --- */
.mag-head { padding: 26px 0 0; }
.mag-head .breadcrumb { padding: 0 0 18px; }
.mag-post-title { margin: 0; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; letter-spacing: -.015em; }
.mag-post-lede { margin: 20px 0 0; max-width: 62ch; color: var(--steel-2); font-size: clamp(16px, 1.4vw, 18.5px); line-height: 1.6; }
.mag-post-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line);
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.mag-hero { margin: 26px 0 40px; border-radius: var(--r-lg); overflow: hidden; background: var(--line); aspect-ratio: 16 / 9; }
.mag-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- telo: článok + bočný stĺpec --- */
.mag-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 52px; align-items: start; padding-bottom: 72px; }

/* Sadzba článku. Bez iniciály: veľké písmeno na štyri riadky je ozdoba, ktorá
   sa nikde inde na webe nevyskytuje, a pri krátkom odseku vytláčala text do
   schodov. */
.mag-prose { font-size: 16.5px; line-height: 1.75; color: var(--steel-2); max-width: 68ch; }
.mag-prose > *:first-child { margin-top: 0; }
.mag-prose p { margin: 0 0 1.35em; }
.mag-prose h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(21px, 2.2vw, 27px); line-height: 1.2; letter-spacing: -.015em; margin: 1.9em 0 .55em; color: var(--text); }
.mag-prose h3 { font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.25; margin: 1.6em 0 .45em; color: var(--text); }
.mag-prose ul, .mag-prose ol { padding-left: 1.35em; margin: 0 0 1.35em; }
.mag-prose li { margin-bottom: .45em; }
.mag-prose strong { color: var(--text); font-weight: 700; }
.mag-prose a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 3px; }
.mag-prose a:hover { color: var(--ink); }
.mag-prose blockquote { margin: 1.7em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--brand); font-family: var(--f-display); font-size: 1.12em; line-height: 1.45; color: var(--text); }
.mag-prose img { max-width: 100%; height: auto; display: block; border-radius: var(--r-md); margin: 1.5em 0; }

/* --- bočný stĺpec --- */
.mag-side { position: sticky; top: 120px; display: grid; gap: 14px; }
.mag-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 20px; }
.mag-card h2 { margin: 0 0 12px; font-family: var(--f-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
/* Kategórie obchodu — magazín je súčasť obchodu, nie blog vedľa neho. */
.mag-cats { display: grid; }
.mag-cats a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; font-weight: 600; color: var(--text); }
.mag-cats a:first-child { border-top: 0; }
.mag-cats a:hover { color: var(--brand-text); }
.mag-cats span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted-2); }
.mag-cats svg { width: 13px; height: 13px; flex: none; color: var(--muted-2); }
.mag-share { display: flex; gap: 8px; }
.mag-share a, .mag-share button {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
  border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--text); background: #fff;
  cursor: pointer; transition: border-color var(--dur), color var(--dur), background var(--dur);
}
.mag-share a:hover, .mag-share button:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.mag-share svg { width: 15px; height: 15px; }

/* --- štítky, predchádzajúci/ďalší --- */
.mag-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 42px; padding-top: 20px; border-top: 1px solid var(--line); }
.mag-tags a { display: inline-flex; padding: 5px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 11px; color: var(--text); }
.mag-tags a:hover { border-color: var(--ink); }
.mag-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.mag-nav a { display: grid; gap: 6px; }
.mag-nav a:last-child:nth-child(2) { text-align: right; }
.mag-nav b { font-family: var(--f-display); font-size: 16px; line-height: 1.3; font-weight: 700; }
.mag-nav a:hover b { color: var(--brand-text); }

/* --- karty článkov (zoznam aj „podobné") --- */
.mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.mag-item { display: grid; gap: 12px; align-content: start; }
.mag-item-img { position: relative; aspect-ratio: 4 / 3; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.mag-item-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mag-item:hover .mag-item-img img { transform: scale(1.04); }
.mag-item-meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.mag-item h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.25; letter-spacing: -.01em; }
.mag-item:hover h3 { color: var(--brand-text); }
.mag-item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* --- lišta priebehu čítania --- */
.mag-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--brand); z-index: 999; transition: width .1s linear; }

/* --- stránkovanie zoznamu --- */
.mag-pager { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 48px; padding-top: 26px; border-top: 1px solid var(--line); }
.mag-pager .num { font-family: var(--f-mono); font-size: 12px; color: var(--muted); }

@media (max-width: 960px) {
  .mag-body { grid-template-columns: 1fr; gap: 34px; }
  .mag-side { position: static; }
  .mag-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .mag-prose { font-size: 16px; }
  .mag-grid { grid-template-columns: 1fr; }
  .mag-nav { grid-template-columns: 1fr; }
  .mag-nav a:last-child:nth-child(2) { text-align: left; }
}

/* ==========================================================================
   O NÁS  (templates/pages/o-nas.php)
   --------------------------------------------------------------------------
   Sedem pásov, šesť z nich sú hotové komponenty (.cat-hero, .usp, .cat-grid,
   .b2b, .wh-grid). Vlastné je len pásmo B — vyhlásenie vedľa troch čísel —
   a sadzba článku, ktorá zostala z pages.content.
   ========================================================================== */

/* --- pásmo B: vyhlásenie + čísla --- */
.about-lede { display: grid; grid-template-columns: 1.05fr 1fr; gap: 40px; align-items: center; }
.about-statement {
  margin: 6px 0 0; font-family: var(--f-display); font-weight: 700;
  font-size: clamp(21px, 2.6vw, 32px); line-height: 1.28; letter-spacing: -.015em;
  color: var(--text); text-wrap: balance;
}
/* Grafit so žltými číslicami — tvar .pdp-club, čiže „dôležité, nie zľava".
   Červená sa sem nedostane, tá je vyhradená pre zľavu a chybu. */
/* align-items: flex-end + nulový spodný padding — maskot stojí NA dne plakety.
   Predtým bol absolútne umiestnený a vysoký 118 % plakety, takže mu overflow
   odrezal 55 px hlavy a 8 px pleca. Teraz je to bežná položka flexu s pevným
   stropom výšky: menší nikdy nebude orezaný, a plaketa má min-height, aby sa
   pod neho nezmenšila. */
.about-figures {
  position: relative; overflow: hidden;
  background: var(--ink); border-radius: var(--r-lg); padding: 30px 32px 0;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  min-height: 330px;
}
.about-mascot {
  height: auto; width: auto; max-height: 288px; max-width: 46%;
  object-fit: contain; object-position: bottom center;
  display: block; flex: 0 1 auto; pointer-events: none;
}
.about-figs { margin: 0 0 30px; display: grid; gap: 18px; position: relative; z-index: 2; }
.about-fig dt {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 42px);
  line-height: 1; letter-spacing: -.02em; color: var(--brand);
}
.about-fig dd {
  margin: 5px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: rgba(255,255,255,.72); max-width: 22ch;
}

/* --- pásmo C: prečo my --- */
.about-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.about-why-item {
  display: flex; gap: 13px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px 22px;
}
.about-why-item svg { width: 20px; height: 20px; flex: none; color: var(--brand-deep); margin-top: 2px; }
.about-why-item b { display: block; font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.about-why-item span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* --- pásmo E: článok --- */
/* Sadzba článku, nie .seo-block: ten komponent je drobná poznámka pod
   katalógom (nadpisy 19px, text 13.5px v šedej) a príbeh firmy by v ňom
   vyzeral ako podmienky písané drobným písmom. */
.about-body { max-width: 74ch; }
.about-body h2 {
  font-family: var(--f-display); font-weight: 700; font-size: clamp(19px, 2vw, 24px);
  letter-spacing: -.015em; margin: 34px 0 10px;
}
.about-body h2:first-child { margin-top: 0; }
.about-body p, .about-body li { font-size: 15.5px; line-height: 1.75; color: var(--steel-2); }
.about-body p { margin: 0 0 14px; }
.about-body ul, .about-body ol { margin: 0 0 16px; padding-left: 20px; }
.about-body li { margin-bottom: 7px; }
.about-body strong { color: var(--text); font-weight: 700; }
.about-body a { color: var(--brand-text); text-decoration: underline; text-underline-offset: 2px; }
.about-body a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .about-lede { grid-template-columns: 1fr; gap: 24px; }
  .about-why { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* Maskot je dekorácia; na telefóne by čísla tlačil do polovice plochy.
     Bez neho plaketa nepotrebuje ani výšku, ani spodné zarovnanie. */
  .about-mascot { display: none; }
  .about-figures { padding: 24px 22px; min-height: 0; align-items: stretch; }
  .about-figs { margin-bottom: 0; }
}

/* ==========================================================================
   KOŠÍK
   ========================================================================== */
.page-head { padding: 30px 0 6px; }
.page-head h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.page-head .mono-sub { font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 26px; align-items: start; padding-top: 20px; }
.cart-items { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cart-row { display: grid; grid-template-columns: 96px minmax(0,1fr) auto auto auto; gap: 18px; align-items: center; padding: 18px 22px; border-top: 1px solid var(--line); animation: fadeIn .3s var(--ease); }
.cart-row:first-child { border-top: 0; }
.cart-row img { width: 96px; height: 96px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; padding: 6px; }
.cart-row .inf .b { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.cart-row .inf .n { font-size: 14.5px; font-weight: 600; line-height: 1.35; margin: 3px 0 6px; }
.cart-row .inf .club { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.cart-row .inf .club svg { width: 12px; height: 12px; fill: var(--brand); }
.cart-row .unit { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cart-row .sum { font-weight: 700; font-size: 16px; white-space: nowrap; min-width: 78px; text-align: right; }
.cart-row .x { color: var(--muted-2); transition: color var(--dur), transform .15s var(--ease); }
.cart-row .x:hover { color: var(--sale); transform: scale(1.1); }
.cart-row .x svg { width: 17px; height: 17px; }

.cart-empty { text-align: center; padding: 70px 20px; display: grid; gap: 14px; justify-items: center; }
.cart-empty svg { width: 60px; height: 60px; color: var(--muted-2); }
.cart-empty h2 { font-size: 22px; }
.cart-empty p { color: var(--muted); }

.cart-side { display: grid; gap: 14px; position: sticky; top: 150px; }
.summary-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 13px; }
.summary-box h3 { font-family: var(--f-display); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .03em; }
.sum-row { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.sum-row b { color: var(--text); }
.sum-row.disc { color: var(--stock); font-weight: 600; }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px solid var(--ink); padding-top: 13px; margin-top: 4px; }
.sum-total .lbl { font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.sum-total .val { font-size: 26px; font-weight: 700; }
.sum-total .vat { display: block; text-align: right; font-size: 11px; color: var(--muted-2); font-weight: 400; }

.coupon { display: flex; }
.coupon input { flex: 1; border: 1.5px dashed var(--line); border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); padding: 11px 13px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; min-width: 0; }
.coupon input:focus { outline: none; border-color: var(--brand-deep); }
.coupon .btn { border-radius: 0 var(--r-sm) var(--r-sm) 0; padding-inline: 16px; }
.coupon-ok { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--stock); font-weight: 600; }
.coupon-ok svg { width: 15px; height: 15px; }

.side-trust { display: grid; gap: 8px; font-size: 12.5px; color: var(--muted); }
.side-trust li { display: flex; gap: 9px; align-items: center; }
.side-trust svg { width: 15px; height: 15px; color: var(--brand-deep); flex: none; }

/* ==========================================================================
   POKLADŇA
   ========================================================================== */
.steps { display: flex; gap: 0; margin: 22px 0 8px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.step { flex: 1; display: flex; align-items: center; gap: 11px; padding: 14px 18px; font-size: 13px; font-weight: 600; color: var(--muted-2); border-left: 1px solid var(--line); }
.step:first-child { border-left: 0; }
.step .num { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; flex: none; }
.step.done { color: var(--stock); }
.step.done .num { background: var(--stock); border-color: var(--stock); color: #fff; }
.step.current { color: var(--text); }
.step.current .num { background: var(--ink); border-color: var(--ink); color: var(--brand); }

.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; padding: 16px 0 30px; }
.co-col { display: grid; gap: 16px; }
.co-box { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px; }
.co-box h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 18px; }
.co-box h3 .n { width: 24px; height: 24px; background: var(--ink); color: var(--brand); border-radius: 50%; display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid .wide { grid-column: 1 / -1; }

.b2b-toggle { display: flex; align-items: center; justify-content: space-between; background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 13px 16px; margin-bottom: 16px; }
.b2b-toggle .t { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.b2b-toggle .t svg { width: 17px; height: 17px; color: var(--brand); }
.switch { position: relative; width: 44px; height: 24px; flex: none; cursor: pointer; }
.switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.switch .sl { position: absolute; inset: 0; background: var(--steel); border-radius: 20px; transition: background var(--dur); }
.switch .sl::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform var(--dur) var(--ease); }
.switch input:checked + .sl { background: var(--brand); }
.switch input:checked + .sl::before { transform: translateX(20px); }
.b2b-fields { display: none; }
.b2b-fields.open { display: grid; animation: fadeSlide .3s var(--ease); }

.opt { display: flex; align-items: center; gap: 14px; border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; cursor: pointer; transition: border-color var(--dur), background var(--dur); margin-bottom: 10px; }
.opt:hover { border-color: var(--steel-2); }
.opt.sel { border-color: var(--ink); background: var(--brand-glow); box-shadow: 0 0 0 1px var(--ink); }
.opt input { appearance: none; width: 18px; height: 18px; border: 2px solid var(--steel-2); border-radius: 50%; display: grid; place-items: center; margin: 0; flex: none; transition: border-color var(--dur); }
.opt input:checked { border-color: var(--ink); }
.opt input:checked::before { content: ""; width: 9px; height: 9px; background: var(--brand); border-radius: 50%; box-shadow: 0 0 0 1px var(--ink) inset; }
.opt .ic { width: 34px; height: 34px; display: grid; place-items: center; background: var(--paper); border-radius: var(--r-sm); flex: none; }
.opt .ic svg { width: 19px; height: 19px; color: var(--steel); }
.opt .t { flex: 1; }
.opt .t b { display: block; font-size: 14px; }
.opt .t span { font-size: 12px; color: var(--muted); }
.opt .pr { font-family: var(--f-mono); font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.opt .pr.free { color: var(--stock); }

.co-summary { position: sticky; top: 150px; }
.co-mini { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: center; }
.co-mini img { width: 52px; height: 52px; object-fit: contain; border: 1px solid var(--line); border-radius: var(--r-sm); flex: none; }
.co-mini .n { font-size: 12.5px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.co-mini .q { font-family: var(--f-mono); font-size: 11.5px; color: var(--muted); }
.co-mini .s { margin-left: auto; font-weight: 700; font-size: 13px; white-space: nowrap; }

/* success */
.success-wrap { max-width: 640px; margin: 40px auto 20px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.success-ic { width: 84px; height: 84px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; animation: bump .6s var(--ease); }
.success-ic svg { width: 38px; height: 38px; color: var(--brand); }
.order-num { font-family: var(--f-mono); font-size: 13px; letter-spacing: .14em; background: #fff; border: 1px dashed var(--line); border-radius: var(--r-sm); padding: 10px 18px; }
.order-num b { color: var(--brand-deep); }

/* ==========================================================================
   ÚČET
   ========================================================================== */
.account-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: start; padding-top: 20px; }
.acc-side { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; position: sticky; top: 150px; }
.acc-user { display: flex; align-items: center; gap: 13px; padding: 20px; background: var(--ink); color: #fff; }
.acc-user .av { width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: var(--ink); display: grid; place-items: center; font-family: var(--f-display); font-size: 19px; flex: none; }
.acc-user b { display: block; font-size: 14.5px; }
.acc-user span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--brand); text-transform: uppercase; }
.acc-nav { padding: 8px; display: grid; gap: 2px; }
.acc-link { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; color: var(--muted); transition: all var(--dur); cursor: pointer; text-align: left; width: 100%; }
.acc-link svg { width: 18px; height: 18px; flex: none; }
.acc-link:hover { background: var(--paper); color: var(--text); }
.acc-link.active { background: var(--ink); color: #fff; }
.acc-link.active svg { color: var(--brand); }
.acc-link.logout { color: var(--sale); }
.acc-link .pill { margin-left: auto; font-family: var(--f-mono); font-size: 10.5px; background: var(--brand); color: var(--ink); border-radius: 10px; padding: 2px 8px; font-weight: 600; }

.acc-pane { display: none; }
.acc-pane.active { display: grid; gap: 16px; animation: fadeIn .3s var(--ease); }

.club-card { position: relative; background: linear-gradient(120deg, var(--ink), var(--coal) 60%, #2a2417); border-radius: var(--r-lg); color: #fff; padding: 26px; overflow: hidden; }
.club-card::after { content: "BARBERCLUB"; position: absolute; right: -14px; bottom: -22px; font-family: var(--f-display); font-size: 88px; color: transparent; -webkit-text-stroke: 1px rgba(255,190,0,.14); letter-spacing: .02em; pointer-events: none; }
.club-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.club-top .lvl { font-family: var(--f-display); font-weight: 700; font-size: 27px; text-transform: uppercase; letter-spacing: .03em; }
.club-top .lvl em { font-style: normal; color: var(--brand); }
.club-top .desc { font-size: 13px; color: var(--muted-2); max-width: 320px; }
.club-badge-lvl { background: var(--brand); color: var(--ink); font-family: var(--f-mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; padding: 7px 12px; border-radius: var(--r-sm); text-transform: uppercase; }
.club-progress { position: relative; z-index: 2; display: grid; gap: 9px; }
.club-progress .bar { height: 9px; background: rgba(255,255,255,.12); border-radius: 5px; overflow: hidden; }
.club-progress .bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-deep), var(--brand)); border-radius: 5px; transition: width 1s var(--ease) .3s; }
.club-progress .lbls { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; color: var(--muted-2); }
.club-progress .lbls b { color: var(--brand); }
.club-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; position: relative; z-index: 2; }
.club-tier { border: 1px solid var(--line-dark); border-radius: var(--r-md); padding: 12px 14px; font-size: 12px; color: var(--muted-2); }
.club-tier b { display: block; font-size: 13.5px; color: #fff; margin-bottom: 2px; }
.club-tier.on { border-color: var(--brand); background: rgba(255,190,0,.08); }
.club-tier.on b { color: var(--brand); }

.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.dash-stat { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px; }
.dash-stat b { font-family: var(--f-display); font-weight: 700; font-size: 28px; display: block; line-height: 1.1; }
.dash-stat span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }

.orders-tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; font-size: 13.5px; }
.orders-tbl th { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-weight: 600; background: var(--paper); }
.orders-tbl td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.orders-tbl tr:last-child td { border-bottom: 0; }
.orders-tbl .num { font-family: var(--f-mono); font-weight: 600; }
.status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.ok { color: var(--stock); }
.status.ship { color: #d78100; }
.status.proc { color: var(--steel-2); }
.reorder { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text); border: 1.5px solid var(--line); border-radius: var(--r-sm); padding: 7px 12px; transition: all var(--dur); white-space: nowrap; }
.reorder:hover { border-color: var(--ink); background: var(--ink); color: var(--brand); }
.reorder svg { width: 14px; height: 14px; }

.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.addr-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; font-size: 13.5px; line-height: 1.7; color: var(--muted); position: relative; }
.addr-card b { color: var(--text); font-size: 14.5px; }
.addr-card .tag { position: absolute; top: 14px; right: 14px; }
.addr-card .edit { display: inline-block; margin-top: 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-deep); border-bottom: 1px solid currentColor; }
.addr-add { display: grid; place-items: center; border: 1.5px dashed var(--line); border-radius: var(--r-md); color: var(--muted); min-height: 150px; gap: 8px; cursor: pointer; transition: all var(--dur); }
.addr-add:hover { border-color: var(--brand-deep); color: var(--brand-deep); }

/* ---------- výdajné miesto + mapa na klik (#kontakt, /kontakt/) ----------
   .addr-grid/.addr-card ostávajú — používa ich adresár v zákazníckom účte. */
.wh-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 14px; align-items: stretch; }
.wh-info {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px; font-size: 13.5px; line-height: 1.65; color: var(--muted);
}
.wh-info > b { display: block; color: var(--text); font-size: 15px; margin-bottom: 6px; }
.wh-info .tag { position: absolute; top: 14px; right: 14px; }
.wh-addr { color: var(--text); font-size: 14px; }
.wh-hours { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-family: var(--f-mono); font-size: 12px; color: var(--muted-2); }
.wh-hours svg { width: 15px; height: 15px; flex: none; }
.wh-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.wh-cta .btn { gap: 7px; }
.wh-cta .btn svg { width: 15px; height: 15px; }

/* Mapa sa načíta až po kliknutí — do vtedy na Google neodíde nič.
   Zástupný panel je čisto CSS: uložený výrez mapy by vyzeral lepšie, ale
   podmienky Google Maps obmedzujú ukladanie a preposielanie ich dlaždíc mimo
   živého embedu. Diagonálny šraf + žltá linka je jazyk .hazard a stojí 0 bajtov. */
.wh-map { position: relative; min-height: 260px; border-radius: var(--r-md); overflow: hidden; background: var(--ink); }
.wh-map-ph {
  position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
  gap: 10px; padding: 24px; text-align: center; color: #fff;
  background: repeating-linear-gradient(135deg, #23272c 0 14px, #1e2226 14px 28px);
}
.wh-map-ph::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--brand-deep), var(--brand) 45%, var(--brand-deep));
}
.wh-map-ph svg { width: 34px; height: 34px; color: var(--brand); }
.wh-map-ph b { font-size: 14px; }
.wh-map-ph small { font-size: 11px; line-height: 1.5; color: #9aa0a8; max-width: 34ch; }

/* ── Prihlásenie a registrácia ────────────────────────────────────────
   Jedna doska rozrezaná na polovice: svetlá s formulárom, tmavá s fotkou
   reálneho tovaru a s výzvou na druhú stránku (kto sa prihlasuje, vidí
   registráciu; kto sa registruje, vidí prihlásenie).

   Prihlásenie je JEDNO pre všetkých — klubové ceny nezapína iný formulár,
   ale schválenie b2b_status v administrácii. Preto tu nie sú žiadne
   B2C/B2B záložky, len vysvetlenie v tmavej polovici.

   Fotka je pozadím tmavej polovice (::before), nie <img>: gradient nad ňou
   drží kontrast textu hore a produkty necháva čitateľné dole. Formulár je
   v HTML VŽDY prvý — .auth-plate--flip ho na registrácii len vizuálne
   posunie doprava, takže poradie tabulátora aj mobilné poradie ostávajú
   správne. */
.auth { padding: 22px 0 66px; }
.auth-crumbs { font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; }
.auth-crumbs a { color: inherit; }
.auth-crumbs a:hover { color: var(--ink); }
.auth-crumbs .sep { margin: 0 7px; opacity: .45; }
.auth-crumbs [aria-current] { color: var(--text); }

.auth-plate {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-1);
}
.auth-plate--flip .auth-aside { order: -1; }

/* ---------- Svetlá polovica: formulár ---------- */
/* Flex stĺpec, aby sa riadok dôvery dal pritlačiť na dno (.auth-trust má
   margin-top: auto). Formulár je kratší ako tmavá polovica a bez toho
   ostávalo pod ním 200 px prázdnej bielej plochy. */
.auth-main { display: flex; flex-direction: column; padding: 44px 46px 46px; min-width: 0; }
.auth-eyebrow { display: flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 12px; }
/* Bez čiarky — rovnako ako .sec-label. */
.auth-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -.015em; margin: 0 0 10px; }
.auth-lede { margin: 0 0 26px; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 46ch; }

.auth-form { display: grid; gap: 17px; }
.auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth-hint { font-family: var(--f-mono); font-size: 11px; letter-spacing: .02em; color: var(--muted-2); margin-top: 2px; }
.auth-forgot { justify-self: end; margin-top: -8px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: color var(--dur), border-color var(--dur); }
.auth-forgot:hover { color: var(--text); border-bottom-color: var(--brand); }
.auth-trust { display: flex; align-items: center; gap: 9px; margin: auto 0 0; padding-top: 24px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; color: var(--muted-2); }
.auth-trust svg { width: 14px; height: 14px; color: var(--stock); flex: none; }

/* Firemné údaje sú nepovinné, preto zbalené (natívne <details>) */
.auth-details { border-top: 1px solid var(--line); padding-top: 17px; }
.auth-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.auth-details > summary::-webkit-details-marker { display: none; }
.auth-details > summary:hover { color: var(--text); }
.auth-details > summary svg { width: 12px; height: 12px; flex: none; transition: transform var(--dur) var(--ease); }
.auth-details[open] > summary svg { transform: rotate(180deg); }
.auth-details-body { display: grid; gap: 17px; padding-top: 17px; }
.auth-club-note { display: flex; gap: 10px; background: rgba(255,190,0,.1); border: 1px solid rgba(255,190,0,.42); border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--text); }
.auth-club-note svg { width: 16px; height: 16px; color: var(--brand-deep); flex: none; margin-top: 2px; }

/* Hlásenia nad formulárom */
.auth-note { border-radius: var(--r-md); padding: 13px 16px; font-size: 13.5px; line-height: 1.55; margin-bottom: 22px; }
.auth-note-err { background: #fdeceb; border: 1px solid rgba(214,60,47,.3); color: #8c2419; }
.auth-note-ok { background: #eaf7f0; border: 1px solid rgba(30,158,90,.3); color: #14603a; }
.auth-note p { margin: 0 0 12px; font-weight: 600; }
.auth-note-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Tmavá polovica: fotka + výzva ----------
   Fotka je samostatný pás, nie podklad pod textom. Prvá verzia mala text
   cez celú fotku a spodný blok dosadol presne na plechovky — na produktoch
   sa nedal prečítať a produkty nebolo vidieť. Takto sa nemôžu prekryť ani
   pri najdlhšom preklade: pás si vezme zvyšnú výšku (flex: 1), text sedí
   na plnom grafite pod ním. */
.auth-aside {
  display: flex; flex-direction: column; min-height: 560px;
  color: #fff; background: #101215;
}
.auth-aside-photo {
  position: relative; flex: 1 1 auto; min-height: 280px;
  background-size: cover; background-repeat: no-repeat;
}
/* Mäkký prechod fotky do grafitu, nech pás nekončí ostrou hranou. */
.auth-aside-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 74px;
  background: linear-gradient(180deg, rgba(16,18,21,0), #101215);
}
/* Výrez je pre každú fotku iný — pás je nižší než fotka, takže percento
   vyberá, ktorý kus kompozície ostane vidieť (nie stred, ale plechovky). */
.auth-photo-login { background-image: url("/assets/images/gen/auth-login.jpg"); background-position: center 84%; }
.auth-photo-register { background-image: url("/assets/images/gen/auth-register.jpg"); background-position: center 56%; }
.auth-aside-body { flex: none; padding: 4px 42px 44px; }

.auth-aside-eyebrow { display: flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
/* Bez čiarky — rovnako ako .sec-label. */
.auth-aside-title { font-family: var(--f-display); font-weight: 700; font-size: clamp(23px, 2.4vw, 28px); line-height: 1.15; letter-spacing: -.01em; margin: 0 0 18px; color: #fff; }
.auth-list { display: grid; gap: 11px; margin: 0 0 24px; padding: 0; list-style: none; }
.auth-list li { display: flex; gap: 11px; font-size: 14px; line-height: 1.5; color: #c7cad0; }
.auth-list svg { width: 17px; height: 17px; color: var(--brand); flex: none; margin-top: 2px; }
.auth-aside .btn { align-self: start; }

/* Spodný blok tmavej polovice — na prihlásení BarberClub, na registrácii
   odkaz späť na prihlásenie. */
.auth-aside-foot { padding-top: 24px; }
.auth-aside-foot::before { content: ""; display: block; height: 1px; background: rgba(255,255,255,.16); margin-bottom: 20px; }
.auth-aside-foot h3 { font-family: var(--f-body); font-weight: 700; font-size: 14.5px; margin: 0 0 6px; color: #fff; }
.auth-aside-foot p { margin: 0 0 16px; font-size: 13px; line-height: 1.55; color: #b6bac1; max-width: 40ch; }

/* ==========================================================================
   RESPONZÍVNOSŤ STRÁNOK
   ========================================================================== */
@media (max-width: 1080px) {
  .hb-grid { grid-template-columns: 1fr; }
  .hb-side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  /* 3 stĺpce (nie 4): delí šesť, takže doplnky z PHP dorovnajú riadok
     a gap-linky nikde nechýbajú. */
  .brands-strip { grid-template-columns: repeat(3, 1fr); }
  .reviews-grid { grid-auto-columns: calc((100% - 14px) / 2); }
  .checkout-layout, .cart-layout { grid-template-columns: 1fr; }
  .co-summary, .cart-side { position: static; }
  .account-layout { grid-template-columns: 1fr; }
  .acc-side { position: static; }
  .acc-nav { display: flex; overflow-x: auto; }
  .acc-link { white-space: nowrap; }
  .auth-main { padding: 36px 32px 38px; }
  /* Odsadenie patrí telu, nie .auth-aside — pás s fotkou musí ísť od kraja
     po kraj, inak sa fotka zúži o padding a v doske vznikne rám. */
  .auth-aside-body { padding: 4px 30px 40px; }
  .auth-aside { min-height: 500px; }
}
@media (max-width: 900px) {
  .katalog-layout { grid-template-columns: 1fr; }
  /* max-height: none je POVINNÝ reset — bez neho zdedí šuflík desktopový
     strop a skončí ~164px nad spodkom obrazovky s mŕtvou medzerou.
     overscroll-behavior: contain naopak patrí sem a nie na desktop: šuflík
     je modál nad zamknutou stránkou, takže dotyk na konci zoznamu nemá
     pokračovať pod prekrytím. */
  .filters { display: none; position: fixed; inset: 0 0 0 auto; width: min(340px, 90vw); background: var(--paper); z-index: 145; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 18px; box-shadow: var(--shadow-2); }
  .filters.open { display: grid; align-content: start; animation: fadeSlide .3s var(--ease); }
  .filters-fab { display: inline-flex; }
  /* V šuflíku ide lišta akcií od kraja po kraj (záporný margin ruší 18px
     padding šuflíka) a spodné odsadenie MUSÍ zaplatiť safe-area: stránka beží
     s viewport-fit=cover, takže bez env() padne „Zrušiť všetky filtre“ do
     34px pásu domovského indikátora iPhonu. Fallback `, 0px` vnútri calc()
     nie je voliteľný — holé env(), ktoré engine nepozná, zneplatní CELÚ
     deklaráciu aj s tými 12px. Tieň tu áno — šuflík je v praxi vždy
     scrollovateľný, takže lišta je vždy naozaj prilepená. */
  .f-actions {
    margin: 10px -18px 0;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    box-shadow: 0 -14px 18px -12px rgba(21, 23, 28, .28);
  }
  .usp-in { grid-template-columns: 1fr 1fr; }
  .usp-item:nth-child(3) { border-left: 0; }
  .usp-item { border-top: 1px solid var(--line); }
  .usp-item:nth-child(-n+2) { border-top: 0; }
  /* Bannery sa skladajú tu, spolu s .b2b a .usp-in — jeden bod, kde stránka
     mení mriežku. Na výšku sa sploštia, inak by tri 16:9 karty pod sebou
     zabrali celú obrazovku. */
  .cat-banners { grid-template-columns: 1fr; }
  .cat-banner { aspect-ratio: 21 / 9; }
  /* Mapa pod informácie, nie vedľa — na 900px by inak obe zliply na ~430px. */
  .wh-grid { grid-template-columns: 1fr; }
  .wh-map { min-height: 220px; }
  .b2b { grid-template-columns: 1fr; }
  .b2b-img { order: -1; min-height: 200px; }
  .b2b-img::after { background: linear-gradient(0deg, var(--ink) 0%, transparent 55%); }
  .b2b-txt { padding: 28px 24px 34px; }
  /* Doska sa zloží pod seba. Formulár je v HTML prvý, takže --flip musí
     pustiť poradie, inak by fotka na registrácii preskočila nad formulár. */
  .auth-plate { grid-template-columns: minmax(0, 1fr); }
  .auth-plate--flip .auth-aside { order: 0; }
  .auth-aside { min-height: 470px; }
}
@media (max-width: 760px) {
  .hero-banners { padding-top: 12px; }
  .hb-side { grid-template-columns: 1fr; }
  .hb-slide { min-height: 430px; align-items: flex-start; }
  .hb-content { padding: 30px 22px 120px; }
  .hb-slide::after { background: linear-gradient(180deg, rgba(33,37,41,.9) 0%, rgba(33,37,41,.65) 55%, rgba(33,37,41,.35) 100%); }
  /* Maskot na telefóne: text ide zhora cez celú šírku, tak sa maskot zmenší a
     zaparkuje vpravo dole pod ním. Na plnej výške by mu prekryl nadpis.
     Lišta ponúk je tu nižšia — skryje sa jej podtitulok (.hb-tab span). */
  .hb-slider { --hb-tabs-h: 46px; }
  .hb-slide.has-fg .hb-fg { height: 56%; max-width: 62%; right: 0; left: auto; object-position: bottom right; }
  /* Matica značiek na telefóne: 2 stĺpce (delí 6 → riadky ostávajú úplné),
     menší padding a strop loga, nech sa buňka nerozlieza. */
  .brands-strip { grid-template-columns: repeat(2, 1fr); }
  .brand-cell { padding: 12px 10px; font-size: 14px; }
  .brand-cell img { max-height: 72px; }
}
/* Na najužších telefónoch (iPhone SE/13 mini a spol.) siaha maskotova
   rozprestretá ruka až nad tlačidlo. Kryje ho síce text (z-index 2 nad 1) a
   klik prejde skrz (pointer-events: none), ale tesne za tlačidlom stojaca dlaň
   pôsobí ako chyba — radšej ho o kúsok zmenšíme. */
@media (max-width: 430px) {
  .hb-slide.has-fg .hb-fg { height: 48%; max-width: 52%; }
  .hb-slide.fg-left::after { background: linear-gradient(180deg, rgba(33,37,41,.9) 0%, rgba(33,37,41,.65) 55%, rgba(33,37,41,.35) 100%); }
  .hb-slide.fg-left .hb-content { margin-left: 0; text-align: left; }
  .hb-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hb-tab span { display: none; }
  .hb-tab { padding: 10px 10px 12px; }
  .hb-tab b { font-size: 11.5px; }
  .hb-arrow { display: none; }
  .cb-body { padding: 18px; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .rail-tabs { width: 100%; }
  /* Jedna karta a kúsok ďalšej — na mobile je to jediný signál, že sa dá ťahať. */
  .reviews-grid { grid-auto-columns: 87%; }
  /* Riadok „5,0 ★ · 10 recenzií na Google“ je nezalomiteľný (.sec-link má
     white-space: nowrap) a spolu so šípkami pretekal na 375px o 18px za pravý
     okraj — rozhýbal vodorovné skrolovanie celej stránky. Šípky preto necháme
     zalomiť pod riadok, nie zmiznúť: v úzkom okne na počítači sú jediný spôsob,
     ako sa k recenziám 2–8 dostať (rail má skrytý posuvník). */
  .rev-head-side { width: 100%; flex-wrap: wrap; row-gap: 10px; }
  .steps { flex-direction: column; }
  .step { border-left: 0; border-top: 1px solid var(--line); }
  .step:first-child { border-top: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .cart-row { grid-template-columns: 72px minmax(0,1fr); grid-template-areas: "img inf" "img qty" "img foot"; row-gap: 8px; padding: 14px 16px; }
  .cart-row img { grid-area: img; width: 72px; height: 72px; align-self: start; }
  .cart-row .inf { grid-area: inf; }
  .cart-row .qty { grid-area: qty; justify-self: start; }
  .cart-row .unit { display: none; }
  .cart-row .sum { grid-area: foot; text-align: left; align-self: center; }
  .cart-row .x { position: absolute; right: 14px; margin-top: 2px; }
  .cart-row { position: relative; }
  .dash-grid { grid-template-columns: 1fr; }
  .addr-grid { grid-template-columns: 1fr; }
  .club-tiers { grid-template-columns: 1fr; }
  .auth-row-2 { grid-template-columns: 1fr; }
  .auth-main { padding: 30px 20px 32px; }
  .auth-aside-body { padding: 4px 20px 36px; }
  .auth-aside { min-height: 430px; }
  .auth-aside-photo { min-height: 230px; }
}

/* ═══════════════════════════════════════════════════════════════════
   TOKEN BRIDGE — Bauhaus-era engine templates (PDP/cart/checkout/account,
   admin-agnostic partials) reference these var names in their inline
   styles. Mapping them onto the Industrial Depot tokens re-skins those
   templates without touching their markup. New code uses the prototype
   tokens above directly.
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg: var(--paper);
  --bg-2: #efeeeb;
  --bg-card: var(--card);
  --accent: var(--sale);
  --accent-light: #fdeceb;
  --mute: var(--muted);
  --muted-2-legacy: var(--muted-2);
  --hairline: var(--line);
  --ff-display: var(--f-display);
  --ff-body: var(--f-body);
  --ff-mono: var(--f-mono);
  --dur-legacy: var(--dur);

  /* --- POZOR: tieto boli POUŽÍVANÉ ale NIKDY NEDEFINOVANÉ ---------------
     `border: 1px solid var(--hairline-strong)` s nedefinovaným tokenom je
     neplatná deklarácia → border-style spadne na `none`, takže 57 rámov
     na PDP/checkoute bolo úplne neviditeľných. To isté pre var(--success)
     (22×), var(--brand-hover) (hover na „Do košíka“ na PDP černal!),
     var(--r-pill), var(--border), var(--primary), var(--dark), var(--font),
     var(--font-display), var(--tint-*) a celú rodinu var(--bk-*). */
  --hairline-strong: #d5d3cc;
  --success: var(--stock);
  --brand-hover: var(--brand-deep);
  --ease-out: var(--ease);

  /* najstaršia „zlatá“ vrstva (/porovnanie/, /zoznam-zelani/, komentáre) */
  --primary: var(--brand);
  --dark: var(--ink);
  --border: var(--line);
  --font: var(--f-body);
  --font-display: var(--f-display);

  /* jemné podklady pre obrázky v magazíne */
  --tint-1: #f1efe9;
  --tint-2: #eceae3;
  --tint-3: #f4f1ea;
  --tint-4: #e9e7e0;
  --tint-5: #f2f0ec;
  --tint-6: #edebe4;

  /* --bk-* rodina (chat widget, staršie partiály) */
  --bk-ink: var(--ink);
  --bk-bg: var(--paper);
  --bk-cream: #faf9f6;
  --bk-mute: var(--muted);
  --bk-accent: var(--brand);
  --bk-hairline: var(--line);
  --bk-hairline-2: var(--hairline-strong);
  --bk-ease: var(--ease);
  --bk-ff-body: var(--f-body);
  --bk-ff-display: var(--f-display);
  --bk-ff-mono: var(--f-mono);
}

/* Legacy engine helpers that survive the reskin */
.num { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════
   DE-BAUHAUS — vizuálny prepis inline-štýlovaných šablón (PDP, košík,
   pokladňa, účet). Nemeníme 1 100 inline `style=""` atribútov; namiesto
   toho prepíšeme ich TVAR (ostré 0–2px hrany → mäkké/pilulkové rádiusy),
   pretože práve tá hranatosť bola vizuálny podpis nemeckého webu.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Plochy a boxy: ostré hrany → mäkký rádius */
[data-bk-co-summary],
[data-bk-cart-summary],
[data-bk-mini-card],
[data-bk-pdp-main-image] { border-radius: var(--r-lg) !important; overflow: hidden; }

[data-bk-co-radio],
[data-bk-stepper],
[data-bk-pdp-qty],
[data-bk-pdp-thumb] { border-radius: var(--r-md) !important; }

/* 2. Interaktívne prvky: všetko, čo je „tlačidlo“, dostane pilulku —
      rovnaký jazyk ako .btn v hlavnej téme. */
[data-bk-page] button:not([data-bk-stepper] button):not([data-bk-pdp-qty] button):not(.p-quick):not([data-bk-pdp-thumb]):not(.js-co-qty),
[data-bk-pdp] button:not([data-bk-pdp-qty] button):not(.p-quick):not([data-bk-pdp-thumb]):not([data-bk-pdp-tab]),
[data-bk-co-mobile-bar] button,
.js-add-to-cart,
[data-bk-notify-open] { border-radius: var(--r-pill) !important; }

/* Ikonové tlačidlá (srdce/porovnanie na PDP) → krúžok */
[data-bk-pdp-iconbtn] { border-radius: 50% !important; }

/* 3. Vstupy: mäkký rádius */
[data-bk-page] input:not([type=radio]):not([type=checkbox]),
[data-bk-page] select,
[data-bk-page] textarea,
[data-bk-pdp] input:not([type=radio]):not([type=checkbox]),
[data-bk-pdp] textarea,
[data-bk-co-input] { border-radius: var(--r-sm) !important; }

/* 4. Typografia. Šablóny volali 'Fraunces' (serif) a 'Inter' — ani jeden sa
      NENAČÍTAVA (head.php ťahá len Lexend/Poppins/IBM Plex Mono), takže
      prehliadač padal na Georgia/serif. To bol najviditeľnejší zvyšok
      nemeckého webu. Všetkých 89 deklarácií je prepísaných priamo v
      šablónach; tieto dve pravidlá sú už len záchytná sieť, keby sa font
      niekedy vrátil cez import z DE vetvy. */
[style*="Fraunces"] { font-family: var(--f-display) !important; }
[style*="'Inter'"]  { font-family: var(--f-body) !important; }

/* Editoriálna kurzíva bola pár k serifu Fraunces. S Lexendom je to len
   šikmý sans — v jazyku Industrial Depot kurzíva v nadpisoch nie je
   (prototyp naopak `em` odkurzívuje a zafarbí na žlto). */
[data-bk-page] h1, [data-bk-page] h2, [data-bk-page] h3,
[data-bk-pdp] h1, [data-bk-pdp] h2, [data-bk-pdp] h3,
[data-bk-page] .display, [data-bk-pdp] .display { font-style: normal !important; }
.h-display em, .display em { font-style: normal; color: var(--brand-text); }

/* ═══════════════════════════════════════════════════════════════════
   MOBILE HARDENING — jedna vrstva na konci súboru, aby vyhrala kaskádu
   aj nad inline `style=""` v Bauhaus šablónach (preto `!important`).
   ═══════════════════════════════════════════════════════════════════ */

/* Žiadny vodorovný scroll na telefóne — bez tohto každý pretekajúci prvok
   (stránkovanie, tabuľka parametrov) roztiahol CELÚ stránku. */
html, body { overflow-x: clip; }

/* Zámok scrollu pre šuflíky (filtre v katalógu aj na /hladat/).
   Samotné body{overflow:hidden} tu NEFUNGUJE: `overflow-x: clip` o riadok
   vyššie robí z koreňa aj z body ne-visible overflow, čím zabíja propagáciu
   overflow na viewport — merané v desktopovom Chrome, stránka pod otvoreným
   šuflíkom doscrollovala na 400px. Preto zamykáme koreň a body držíme fixed
   na uloženej pozícii; JS ju po zatvorení vráti (behavior:'instant', lebo
   html{scroll-behavior:smooth} by návrat animoval). */
html.bd-locked, html.bd-locked > body { overflow: hidden; }
html.bd-locked > body { position: fixed; inset-inline: 0; width: 100%; }

@media (max-width: 900px) {
  /* --- 1. iOS Safari zoomuje pri fokuse na akýkoľvek vstup < 16px.
         Po zoome sa už nevráti → rozbitá pokladňa. Jedno pravidlo pre celý web. */
  input:not([type=radio]):not([type=checkbox]):not([type=range]),
  select, textarea { font-size: 16px !important; }

  /* --- 2. Dotykové cieľe min. 44 px (WCAG 2.5.8) --- */
  .h-act { padding: 11px 12px; }
  .modal-x { width: 44px; height: 44px; }
  .chip button { width: 26px; height: 26px; }
  .qty button { width: 44px; }
  .view-toggle button { width: 44px; height: 44px; }
  .toolbar .select { padding-block: 12px; }
  .btn-sm { padding: 12px 18px; }
  .mm-sub a { padding-block: 12px; }

  /* Krokovadlá množstva v pokladni boli 24×24 px — jediný spôsob, ako zmeniť
     množstvo bez opustenia pokladne. */
  .js-co-qty { width: 40px !important; height: 40px !important; }
  [data-bk-stepper] button { width: 42px !important; height: 42px !important; }
  [data-bk-stepper] { height: auto !important; }

  /* --- 3. Pokladňa: fixná CTA lišta bola POD spodnou navigáciou webu
         (z-index 40 vs 120) → z tlačidla „Odoslať objednávku“ vykúkalo ~15 px.
         Počas pokladne spodnú navigáciu skryjeme (menej výstupov z fleku)
         a CTA lište dáme prednosť. */
  [data-bk-co-mobile-bar] {
    z-index: 130 !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important;
  }
  body:has([data-bk-co-mobile-bar]) .mobile-bar { display: none !important; }
  /* Spodnú hranu tu vlastní CTA lišta pokladne. Bez tohto riadku ostal
     --bd-bottom-bar na hodnote .mobile-bar (alebo 0px nad 760px) a plávajúce
     tlačidlo chatu (z-index 9999) viselo priamo cez pravú časť tlačidla
     „Odoslať objednávku" (z-index 130) — cez jediné tlačidlo, na ktorom
     celému obchodu naozaj záleží. */
  body:has([data-bk-co-mobile-bar]) {
    padding-bottom: 0 !important;
    --bd-bottom-bar: calc(72px + env(safe-area-inset-bottom));
  }

  /* --- 4. Mriežky, ktoré nikdy nekolabovali --- */
  /* prázdny košík: cross-sell zostával 4-stĺpcový → karty 65 px široké */
  [data-bk-popular-grid] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  /* pokladňa: Firma / IČO / DIČ zostávali 3-stĺpcové → 102 px na stĺpec */
  [data-bk-co-company-row] { grid-template-columns: 1fr !important; }
  /* PDP hooks removed 2026-07-31: product-depot.php is class-based and
     collapses through its own breakpoints (section "PRODUKT - DEPOT"). */
}

@media (max-width: 760px) {
  /* Bauhaus sekcie mali fixné 96px/40px odsadenie. Scoped to [data-bk-page]
     only: the PDP is class-based since 2026-07-31 and sets its own rhythm. */
  [data-bk-page] > section { padding-block: 40px !important; padding-inline: 16px !important; }
  /* Tu sedel ŠTVRTÝ nezávislý odstup pre chat FAB: `bottom: calc(70px + …)
     !important`. Riešil presne jeden prípad (mobilná lišta na bežnej stránke),
     ale svojím !important prebil aj karty produktov, kde nad lištou stojí ešte
     .pdp-buybar, aj pokladňu, kde lištu nahrádza CTA pruh — takže tam FAB
     naďalej visel cez tlačidlo. Odstup teraz riadi --bd-bottom-bar, ktorý na
     každej z tých stránok publikuje ten blok, čo spodnú hranu naozaj vlastní. */
}

@media (max-width: 420px) {
  /* Karty na 360px: 2 stĺpce vychádzajú ~155px — stlačíme vnútorné odsadenie */
  .p-card-body { padding: 10px 11px 12px; }
  .p-card-media > a { inset: 11px; }   /* padding sa presunul na inset odkazu */
  .p-card-foot .btn, .p-card-cta .btn { padding-inline: 10px; font-size: 11.5px; }
  .page-btn { min-width: 40px; height: 40px; font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   STRÁNKA HĽADANIA (/hladat/, search.php)
   Šablóna používa 46 tried zo ZMAZANÉHO assets/css/shop.min.css, takže
   stránka sa vykresľovala úplne bez štýlu: systémové rádiá, neorámované
   polia, „Filtre“ ako čistý text, holý znak ×. Namiesto vymýšľania
   nového vzhľadu ich mapujeme na hotový jazyk katalógu (.katalog-layout,
   .filters, .f-box, .check, .toolbar, .pagination). Logika aj JS
   (shop.js initFilters: .shop-sidebar.open + .shop-overlay) už fungujú.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout: 260px sticky sidebar + obsah (ako .katalog-layout) ── */
.shop-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; padding-top: 26px; padding-bottom: 10px; align-items: start; }
.shop-main { min-width: 0; }
/* Rovnaký strop ako .filters — a tu je POVINNÝ, nie kozmetický: .f-actions
   je sticky a keby .shop-sidebar nebol scroll container, prilepilo by sa
   „Použiť filtre“ na spodok okna a plávalo cez celú stránku výsledkov. */
.shop-sidebar { display: grid; gap: 10px; align-content: start; position: sticky; top: 148px; max-height: calc(100vh - 164px); max-height: calc(100dvh - 164px); overflow-y: auto; scrollbar-width: thin; }
.shop-sidebar-header { display: none; align-items: center; justify-content: space-between; }
.shop-sidebar-header h3 { font-family: var(--f-display); font-weight: 700; font-size: 18px; }
.shop-sidebar-close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; line-height: 1; color: var(--muted); }
.shop-sidebar-close:hover { background: var(--paper); color: var(--text); }

/* ── Hero s vyhľadávacím poľom (ako .cat-hero) ── */
.page-hero.search-hero { background: #fff; border-bottom: 1px solid var(--line); padding: 26px 0 24px; }
.search-hero h1 { font-size: clamp(1.55rem, 2.8vw, 2.1rem); font-weight: 700; letter-spacing: -.015em; }
.search-page-form { margin-top: 16px; }
.search-page-input-wrap { display: flex; max-width: 560px; position: relative; }
.search-page-icon { display: none; }
.search-page-input-wrap input {
  flex: 1; min-width: 0; background: #f2f2ef; border: 1.5px solid var(--line); border-right: 0;
  padding: 12px 16px; font-size: 15px; border-radius: var(--r-sm) 0 0 var(--r-sm);
}
.search-page-input-wrap input:focus { outline: none; border-color: var(--text); background: #fff; }
.search-page-submit {
  flex: none; background: var(--brand); color: var(--ink); padding: 0 22px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0; font-weight: 700; font-size: 14px;
  transition: background var(--dur);
}
.search-page-submit:hover { background: var(--brand-deep); }
.search-page-summary { margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.search-page-summary b, .search-page-summary strong { color: var(--text); font-family: var(--f-mono); }

/* ── Skupiny filtrov (ako .f-box) ── */
.filter-group { background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 10px; }
.filter-group h4 { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text); }
.filter-list { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; }

/* ── Zaškrtávacie polia (ako .check) — rádiá dostanú krúžok ── */
.filter-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; line-height: 1.35; }
.filter-check input[type="checkbox"], .filter-check input[type="radio"] {
  appearance: none; width: 18px; height: 18px; flex: none; margin: 0; cursor: pointer;
  border: 2px solid var(--steel-2); display: grid; place-items: center;
  transition: background var(--dur), border-color var(--dur);
}
.filter-check input[type="checkbox"] { border-radius: var(--r-sm); }
.filter-check input[type="radio"] { border-radius: 50%; }
.filter-check input:checked { background: var(--brand); border-color: var(--brand); }
.filter-check input[type="checkbox"]:checked::before {
  content: ""; width: 10px; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5.2 3.8 8 9 2' stroke='%2315171c' stroke-width='2.2' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}
.filter-check input[type="radio"]:checked::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.filter-label { flex: 1; min-width: 0; }
.filter-count { font-family: var(--f-mono); font-size: 11px; color: var(--muted-2); margin-left: auto; }
.filter-check.is-empty { opacity: .45; }
.filter-color-swatch { width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--line); flex: none; }

/* ── Cenové polia ── */
.filter-price-inputs { display: flex; align-items: center; gap: 8px; }
.filter-price-inputs input {
  width: 100%; min-width: 0; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 11px; font-size: 14px;
}
.filter-price-inputs input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand-glow); }
.filter-price-currency { font-family: var(--f-mono); font-size: 13px; color: var(--muted); flex: none; }

/* ── Akcie filtra (pilulka ako .btn-primary + .f-reset) ── */
.filter-apply {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand); color: var(--ink); font-weight: 700; font-size: 14px;
  padding: 13px 20px; border-radius: var(--r-pill); transition: background var(--dur);
}
.filter-apply:hover { background: var(--brand-deep); box-shadow: var(--shadow-brand); }
.filter-reset { display: block; text-align: center; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 10px; }
.filter-reset:hover { color: var(--sale); }

/* ── Toolbar (ako .toolbar) ── */
.shop-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 16px; }
.shop-toolbar-left, .shop-toolbar-right { display: flex; align-items: center; gap: 10px; }
.shop-toolbar-right { margin-left: auto; }
.shop-count { font-size: 13px; color: var(--muted); }
.shop-sort {
  appearance: none; background: #fff; border: 1.5px solid var(--line); border-radius: var(--r-sm);
  padding: 10px 34px 10px 12px; font-size: 13.5px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231d1f24' stroke-width='2' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.shop-filter-toggle { display: none; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: var(--r-pill); padding: 10px 16px; font-size: 13px; font-weight: 700; }
.shop-filter-toggle:hover { border-color: var(--ink); }

/* ── Mriežka výsledkov ── */
.shop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1080px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .shop-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* ── Prázdny stav ── */
.shop-empty, .search-empty-state, .search-no-results {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(32px, 7vw, 64px) 24px; text-align: center; display: grid; gap: 12px; justify-items: center;
}
.shop-empty h2, .search-no-results h2 { font-family: var(--f-display); font-weight: 700; font-size: 20px; }
.shop-empty p, .search-no-results p { color: var(--muted); font-size: 14px; max-width: 52ch; }

/* ── Stránkovanie (ako .pagination / .page-btn) ── */
.shop-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 34px; }
.shop-page-link, .shop-page-dots {
  min-width: 44px; height: 44px; display: grid; place-items: center; padding: 0 10px;
  font-family: var(--f-mono); font-weight: 600; font-size: 13.5px;
  border: 1.5px solid var(--line); border-radius: var(--r-pill); background: #fff; transition: all var(--dur);
}
.shop-page-link:hover { border-color: var(--ink); }
.shop-page-link.active, .shop-page-link[aria-current="page"] { background: var(--ink); color: var(--brand); border-color: var(--ink); }
.shop-page-dots { border: 0; background: none; }

/* ── Nájdené články z magazínu ── */
.search-posts-block { margin-top: 44px; border-top: 1px solid var(--line); padding-top: 28px; }
.search-posts-heading { display: flex; align-items: baseline; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 20px; margin-bottom: 16px; }
.search-posts-count { font-family: var(--f-mono); font-size: 12px; color: var(--muted-2); font-weight: 400; }
.search-posts-list { display: grid; gap: 12px; }
.search-post-item { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; transition: border-color var(--dur), box-shadow var(--dur); }
/* Bez obrázka nech text nezačína v prázdnom prvom stĺpci. */
.search-post-item:not(:has(.search-post-thumb)) { grid-template-columns: minmax(0, 1fr); }
.search-post-item:hover { border-color: var(--ink); box-shadow: var(--shadow-1); }
/* .search-post-thumb je ODKAZ okolo obrázka, nie samotný <img> — pravidlá
   width/height/object-fit na ňom preto nerobili nič, inline <a> ich ignoruje
   a obrázok si držal svojich 140×105 z atribútov: trčal z karty von a rozbil
   riadok. Rozmer drží obal, obrázok ho vypĺňa. */
.search-post-thumb {
  display: block; width: 96px; height: 72px; overflow: hidden;
  border-radius: var(--r-sm); background: var(--paper);
}
.search-post-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.search-post-meta { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.search-post-title { font-size: 15px; font-weight: 600; line-height: 1.35; margin: 3px 0 4px; }
.search-post-excerpt { font-size: 13px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.search-posts-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text); border-bottom: 2px solid var(--brand); padding-bottom: 3px; }

/* ── „Mohlo by súvisieť“ — rozšírené (permisívne) zhody pod presnou mriežkou.
      Predel je zámerne SILNEJŠÍ než pri blogovom bloku (tam stačí vlásočnica):
      pod čiarou sú zase produktové karty, takže musí byť na prvý pohľad jasné,
      že mriežka výsledkov sa skončila. Značková linka je ten istý motív ako
      .hazard v pätičke — nie banner. Karty ostávajú .p-card, žiadny nový štýl,
      aby to nepôsobilo ako reklama. ── */
.search-related { margin-top: 52px; padding-top: 26px; border-top: 3px solid var(--brand); }
.search-related-head { margin-bottom: 18px; }
.search-related-heading {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--f-display); font-weight: 700; font-size: 20px; margin: 4px 0 6px;
}
.search-related-count { font-family: var(--f-mono); font-size: 12px; color: var(--muted-2); font-weight: 400; }
.search-related-note { font-size: 13.5px; color: var(--muted); line-height: 1.5; max-width: 68ch; }

/* Mäkký prázdny stav: presná zhoda nula, ale tipy nižšie existujú. Nie je to
   .shop-empty — ten má CTA „Prezrieť katalóg“, ktoré by zákazníka odviedlo
   preč od kariet hneď pod ním. */
.search-no-exact {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--r-md); padding: 14px 16px; display: grid; gap: 4px; margin-bottom: 18px;
}
.search-no-exact h2 { font-family: var(--f-display); font-weight: 700; font-size: 17px; }
.search-no-exact p { font-size: 13.5px; color: var(--muted); }

/* ── Mobil: sidebar sa stane šuflíkom (rovnako ako .filters v katalógu).
      shop.js prepína .open na .shop-sidebar a vytvára .shop-overlay. ── */
.shop-overlay { position: fixed; inset: 0; background: rgba(21,23,28,.55); z-index: 140; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.shop-overlay.open { opacity: 1; pointer-events: auto; }
@media (max-width: 900px) {
  .shop-layout { grid-template-columns: minmax(0, 1fr); }
  /* max-height: none — reset desktopového stropu (viď .filters vyššie). */
  .shop-sidebar {
    display: none; position: fixed; inset: 0 0 0 auto; width: min(340px, 90vw);
    background: var(--paper); z-index: 145; max-height: none; overflow-y: auto;
    overscroll-behavior: contain; padding: 18px; box-shadow: var(--shadow-2);
  }
  .search-related { margin-top: 36px; padding-top: 20px; }
  .shop-sidebar.open { display: grid; align-content: start; animation: fadeSlide .3s var(--ease); }
  .shop-sidebar-header { display: flex; }
  /* Toolbar /hladat/: pilulka Filtre ≥44px, select na plnú šírku druhého
     riadku (na tablete 761–900 ostáva v prvom, kým sa zmestí) — vizuálna
     paralela k .toolbar v katalógu. Globálne pravidlo nižšie mu aj tak
     vnúti 16px font, tak nech má okolo seba vzduch. */
  .shop-toolbar { row-gap: 10px; }
  .shop-toolbar-left { flex: 1 1 auto; min-width: 0; }
  .shop-filter-toggle { display: inline-flex; min-height: 44px; padding: 11px 18px; }
  .shop-toolbar-right { flex: 1 1 240px; margin-left: 0; }
  .shop-sort { width: 100%; padding-block: 11px; }
  .search-post-item { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .search-post-thumb { width: 72px; height: 60px; }
}

/* ==========================================================================
   ZOZNAM ŽELANÍ (/zoznam-zelani/) — hlavička zoznamu nad .shop-grid.
   Prázdny stav používa zdieľané .shop-empty vyššie.
   ========================================================================== */
.wl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.wl-count { font-size: 13px; color: var(--muted); }

/* ==========================================================================
   SLEDOVANIE OBJEDNÁVKY (/sledovanie-objednavky/) — karta výsledku.

   Stránka sama je .auth-plate, rovnaký komponent ako prihlásenie a
   registrácia: formulár vľavo, tmavý panel s pomocou vpravo. Vlastné je tu
   len to, čo pribudne PO overení — kartu vykresľuje JavaScript, preto sú to
   triedy a nie inline štýly (predtým si skript skladal style="" reťazce).
   ========================================================================== */
.auth-eyebrow svg { width: 14px; height: 14px; flex: none; }

.trk-result {
  margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--line);
}
.trk-result[hidden] { display: none; }
.trk-result-head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 14px;
  font-family: var(--f-mono); font-size: 13.5px; font-weight: 700;
  letter-spacing: .04em; color: var(--text);
}
.trk-result-head svg { width: 18px; height: 18px; color: var(--brand-deep); flex: none; }

/* Definičný zoznam: štítok vľavo, hodnota vpravo. Grid, nie flex na riadok —
   hodnoty sa tak zarovnajú medzi sebou aj keď je štítok dlhší. */
.trk-rows { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; }
.trk-rows dt,
.trk-rows dd {
  margin: 0; padding: 8px 0; font-size: 14px; line-height: 1.4;
  border-bottom: 1px solid var(--line);
}
.trk-rows dt { color: var(--muted); padding-right: 16px; }
.trk-rows dd { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

.trk-ctas { display: grid; gap: 10px; margin-top: 18px; }
/* Výzva na platbu je červená ako všade inde v kabinete — nie je to to isté
   ako "sledovať zásielku" a nesmie s ňou splynúť. */
.trk-pay { background: var(--sale); border-color: var(--sale); color: #fff; }
.trk-pay:hover { background: #b8291d; border-color: #b8291d; color: #fff; }

@media (max-width: 430px) {
  .trk-rows { grid-template-columns: 1fr; }
  .trk-rows dt { padding-bottom: 0; border-bottom: 0; }
  .trk-rows dd { text-align: left; padding-top: 2px; }
}