@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   OMBRA D'ORO — dizajn systém storefrontu (fáza 2, od nuly)

   Identita: atrament · zlato · krém · papier. Editoriál módneho magazínu —
   veľkorysé fotografie, serifové titulky (Playfair Display), pokojné plochy.
   Pohyb len decentný (fade-in pri scrolle, pomalé easing), žiadne kolotoče.

   Tokeny --olive/--moss/--cta si ponechávajú PÔVODNÉ MENÁ z jadra — siahajú
   na ne vnútorné stránky; hodnoty sú ale plne ombra.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* farby značky */
  --ink:      #15120C;   /* atrament — takmer čierna s teplým nádychom */
  --ink-soft: #2A251B;
  --gold:     #DAA520;   /* zlatá — akcenty, nikdy plochy textu */
  /* Tmavšie zlato — text na svetlom. #9C7211 dávalo 4,35:1 aj na čisto bielej,
     čo je pod hranicou 4,5:1 pre bežný text; neprešlo teda na žiadnom podklade
     webu. #8A6410 je ten istý odtieň o ~6 % tmavší: 5,37:1 na bielej, 5,19:1 na
     #FDFBF5, 5,06:1 na papieri. Ozdobná --gold ostáva na akcenty a tmavý podklad. */
  --gold-deep:#8A6410;
  --cream:    #F4EFE5;   /* krém — sekcie */
  --paper:    #FBF8F1;   /* papier — telo stránky */
  --white:    #FFFFFF;
  --line:       rgba(21,18,12,.14);
  --line-gold:  rgba(138,100,16,.40);
  /* Hranica ovládacieho prvku (polia, výbery). --line je zámerne jemná pre
     deliace čiary a rámy kariet, ale na poli je rám JEDINÉ, čo hovorí „sem sa
     píše" — a mal kontrast 1,34:1 pri norme 3:1 (WCAG 1.4.11). Alfa .48 dáva
     3,25:1 na papieri aj na bielej; pri .45 to bolo ešte len 2,97:1. */
  --line-field: rgba(21,18,12,.48);
  --muted:    #6B655A;
  --bad:      #A3352C;
  --ok:       #4A6741;

  /* aliasy pre staré názvy tokenov (vnútorné stránky) */
  --olive: var(--ink);
  --moss:  var(--gold-deep);
  --cta:   var(--gold);
  --line-olive: var(--line-gold);

  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans:  'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Na kódy, ktoré človek prepisuje alebo diktuje (partnerský kód, útržok HTML).
     Rovnaká šírka znakov odlíši nulu od O a jednotku od l. Systémové písmo,
     nič sa nesťahuje. */
  --mono:  ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --wrap: 1240px;
  --r: 2px;              /* luxus = ostré hrany, žiadne bublinky */
  --shadow: 0 10px 40px rgba(21,18,12,.10);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ── reset a základ ─────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip}   /* poistka proti „plávaniu": nič nesmie rozšíriť stránku */
/* Atribút hidden MUSÍ vyhrať nad akýmkoľvek display v triedach — UA štýl
   prehráva s autorským vždy, takže .x{display:flex} inak „zavreté" prvky
   ticho zobrazuje (stalo sa Dore aj nákupnej lište). */
[hidden]{display:none!important}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
p a,li a,.rte a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
p a:hover,li a:hover,.rte a:hover{color:var(--ink)}
button{font:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.15;
  letter-spacing:.01em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(30px,4.6vw,52px)}
h2{font-size:clamp(24px,3.2vw,36px)}
h3{font-size:clamp(18px,2.2vw,22px)}
h4{font:600 12px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 12px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.wrap--flush{padding-top:0}
main.wrap{padding-top:28px;padding-bottom:64px}
main.flow{padding:0 0 64px}
main.flow .wrap{padding-top:0}

.eyebrow{font:600 12px/1.4 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold-deep);margin:0 0 14px}
.muted{color:var(--muted)}
.mono{font-family:var(--sans);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.num{text-align:right;font-variant-numeric:tabular-nums}
.hint{font-size:13.5px;color:var(--muted);margin:6px 0}
.empty{padding:48px 24px;text-align:center;color:var(--muted);
  border:1px dashed var(--line);font-style:italic}

/* jemný scroll-reveal — bez JS sa nič neskrýva; shop.js dáva triedu `in`,
   v prehliadačoch so scroll-timeline to celé beží na compositore bez JS */
html.js .rv{opacity:0;transform:translateY(14px);
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
@supports (animation-timeline: view()){
  html.js .rv{opacity:1;transform:none;transition:none;
    animation:rv-in .8s var(--ease) both;animation-timeline:view();
    animation-range:entry 0% entry 42%}
  @keyframes rv-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  html.js .rv{opacity:1;transform:none;transition:none;animation:none}
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── lišty nad hlavičkou ────────────────────────────────────────────────── */
.testbar{background:#7A1F1F;color:#fff;text-align:center;font-size:13px;
  padding:8px 16px;letter-spacing:.04em}
.testbar--nahlad{background:#8a6d1a}
.topbar{background:var(--ink);color:var(--cream);text-align:center;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;padding:9px 16px}
.topbar strong{color:var(--gold);font-weight:600}

/* ── BEŽIACI PÁS S VÝHODAMI ──────────────────────────────────────────────
   Pás je zámerne POMALÝ. Rýchly text na okraji oka ťahá pozornosť preč od
   fotky produktu a z luxusnej stránky robí výpredajový leták; tempo je také,
   aby sa veta dala prečítať bez naháňania a aby sa pás dal aj ignorovať.

   `overflow:hidden` musí byť na páse, nie na stope — stopa je širšia než
   obrazovka (`width:max-content`) a bez orezania by roztiahla celú stránku
   do šírky a pridala vodorovný posuvník na každej podstránke.

   Zastavuje sa pri prejdení myšou a pri zameraní klávesnicou: text, ktorý
   uteká práve vtedy, keď si ho chce niekto prečítať, je horší než žiadny. */
.topbar--beh{padding-inline:0;overflow:hidden}
.topbar__stopa{display:flex;width:max-content;
  animation:pasBeh var(--pas-cas,60s) linear infinite}
.topbar--beh:hover .topbar__stopa,
.topbar--beh:focus-within .topbar__stopa{animation-play-state:paused}
@keyframes pasBeh{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Oddeľovač je vykreslený, nie napísaný — v texte položky by ho čítačka
   obrazovky prečítala ako slovo a pri poslednej položke by prebytočne visel. */
.topbar__i{flex:0 0 auto;padding:0 26px;white-space:nowrap;position:relative}
.topbar__i::after{content:'';position:absolute;right:0;top:50%;translate:0 -50%;
  width:3px;height:3px;border-radius:50%;background:var(--gold);opacity:.55}
/* Názov úrovne je to, čo mení sľub na pravdivý — musí byť čitateľný, nie
   schovaný, len tichší než samotná výhoda. */
.topbar__od{color:var(--gold);opacity:.85}

/* Bez animácií sa stopa nehýbe a všetko za prvou obrazovkou by zostalo
   navždy skryté za `overflow:hidden`. Preto sa z pásu stane posuvný riadok —
   obsah je dostupný, len si ho človek posunie sám. */
@media (prefers-reduced-motion:reduce){
  .topbar--beh{overflow-x:auto;scrollbar-width:none}
  .topbar--beh::-webkit-scrollbar{display:none}
  .topbar__stopa{animation:none}
  /* Zdvojenie má zmysel len pre plynulú slučku. Keď sa stopa nehýbe, je to
     len ten istý zoznam napísaný dvakrát za sebou. */
  .topbar__i[aria-hidden]{display:none}
}

/* ── hlavička ───────────────────────────────────────────────────────────── */
/* ── hlavička: DVA RIADKY ─────────────────────────────────────────────────
   Riadok 1 = značka + ovládače. Riadok 2 = CELÝ katalóg na plnú šírku okna.

   Prečo zalomenie flexu a nie nový <div> okolo prvého riadku: .srchd má
   position:static a kotví panel hľadania na .hdr ako na jediný pozicovaný
   predok; .mnav{order:-1} aj .hdr__right{margin-left:auto} zase počítajú
   s tým, že sú SÚRODENCI .brand. Obal by obe väzby prepísal — a s ním hrozí
   návrat chyby „mobilný panel vysoký ako hlavička". Wrap dá druhý riadok
   bez jediného prvku navyše. */
.hdr{--hdr-pad:clamp(16px,3vw,40px);   /* jediný zdroj pravdy pre bočné odsadenie */
  --hdr-row1:78px;                     /* výška PRVÉHO riadku, nie celej hlavičky */
  position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(14px,2.4vw,34px);row-gap:0; /* riadky delí vlások, nie medzera */
  padding:0 var(--hdr-pad);min-height:var(--hdr-row1);
  background:rgba(251,248,241,.92);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
@media (min-width:1101px){
  /* Hlavička dostala riadok navyše — prvý už nemusí niesť celú prezenciu sám. */
  .hdr{--hdr-row1:64px}
}
/* PASCA: backdrop-filter robí z hlavičky containing block pre position:fixed.
   Panel mobilného menu (fixed, inset:0) sa ňou zmenšil na pásik vysoký ako
   hlavička — menu sa „otvorilo", ale nebolo ho vidieť. Pri otvorenom menu sa
   preto filter vypína (:has + trieda z JS ako záloha pre staršie prehliadače). */
.hdr:has(.mnav[open]),.hdr.is-mnav{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:var(--paper)}
/* Výšku prvého riadku nesie .brand, NIE .hdr. Pri dvoch riadkoch by min-height
   na kontajneri platila obom dokopy a riadok so značkou by spadol na 34 px
   (= výška tlačidla lupy, najvyššieho prvku v tom riadku). */
.brand{display:flex;align-items:center;flex:none;min-height:var(--hdr-row1)}
.brand__wm{width:auto;height:clamp(22px,2.6vw,27px)}
.wordmark{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.4vw,25px);
  letter-spacing:.14em;color:var(--ink);white-space:nowrap}
.wordmark .wordmark__oro{color:var(--gold-deep)}
.wordmark--sm{font-size:21px}

/* Vizuálne poradie riadkov robí `order`, nie poradie v DOM: .nav zostáva
   v HTML hneď za značkou, aby ju čítačka obrazovky aj Tab našli PRED
   pomocnými ikonami. Navigácia je dôležitejšia než košík. */
.nav{order:2;
  /* Základ je o dve odsadenia širší než riadok a zápornými okrajmi sa .nav
     vysunie z odsadenia hlavičky — vlások medzi riadkami tak ide od kraja
     po kraj okna, nie „od textu po text". Nulový shrink = nikdy sa nestlačí,
     nulový grow + basis > šírka = flex ju VŽDY zalomí na vlastný riadok. */
  flex:0 0 calc(100% + var(--hdr-pad) * 2);
  margin-inline:calc(-1 * var(--hdr-pad));padding-inline:var(--hdr-pad);
  display:flex;align-items:center;justify-content:center;
  flex-wrap:wrap;          /* POISTKA: viac vetiev sa zalomí, nikdy nepretečie */
  gap:clamp(10px,1.6vw,26px);row-gap:0;
  border-top:1px solid var(--line);
  /* Pásmo 1101–1437 px: písmo sa plynulo stiahne z 12,5 na 11 px. Prestrkanie
     je v em, takže sa stiahne s ním — deväť vetiev sa vojde aj pri 1101 px.
     Žiadny skokový breakpoint, žiadne skracovanie názvov z administrácie. */
  font-size:clamp(11px,.87vw,12.5px)}
.nav>a,.nav__v>summary{font:600 1em/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);padding:12px 2px;cursor:pointer;
  border-bottom:1px solid transparent;transition:border-color .3s,color .3s;
  list-style:none;white-space:nowrap}
.nav>a:hover,.nav__v>summary:hover,.nav__v[open]>summary{border-bottom-color:var(--gold);color:var(--gold-deep)}
.nav__v{position:relative}
.nav__v>summary::-webkit-details-marker{display:none}
.nav__v>summary::after{content:'\203A ';display:inline-block;margin-left:6px;
  transform:rotate(90deg);font-size:12px;color:var(--gold-deep)}
/* Podmenu je SKRYTÉ VŽDY, kým ho niečo neotvorí — klik (details[open])
   alebo hover tam, kde hover existuje. Predtým bolo display:none len
   v @media (hover:hover): dotykové zariadenie so širokým viewportom
   (tablet, telefón v režime „verzia pre počítač") vykreslilo všetky
   podmenu naraz cez hľadanie, vlajky, prihlásenie aj košík. */
.nav__sub{position:absolute;left:-18px;top:100%;min-width:250px;padding:14px 0;
  background:var(--paper);border:1px solid var(--line);border-top:2px solid var(--gold);
  box-shadow:var(--shadow);display:none;flex-direction:column;z-index:70}
.nav__v[open]>.nav__sub{display:flex}
.nav__sub a{display:flex;justify-content:space-between;gap:18px;padding:9px 20px;
  font:400 14.5px/1.4 var(--sans);letter-spacing:.02em;text-transform:none}
.nav__sub a:hover{background:var(--cream);color:var(--gold-deep)}
.nav__sub a span{color:var(--muted);font-size:12px}
.nav__all{font-weight:600!important;border-bottom:1px solid var(--line);margin-bottom:6px}
/* Rozbalenie poslednej trojice vetiev sa otvára doľava: rad teraz siaha až
   k pravému okraju okna a panel široký 250 px by z neho vypadol. Dnes je to
   poistka do budúcna — jediná vetva s deťmi („Vrchné diely") je tretia zľava. */
.nav__v:nth-last-child(-n+3)>.nav__sub{left:auto;right:-18px}
@media (hover:hover){
  .nav__v:hover>.nav__sub{display:flex}
}

.hdr__right{display:flex;align-items:center;gap:clamp(8px,1.4vw,18px);
  margin-left:auto;order:1}

/* „Darčekové poukazy" a „Blog" NIE SÚ kategórie. Katalógový riadok má byť
   čistý katalóg, preto sedia pri ovládačoch — tichšie (muted, 11 px), ako
   servisné odkazy. Pod 1100 px ich nesie mobilné menu. */
.hdr__util{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);
  margin-right:clamp(4px,1vw,14px)}
.hdr__util a{font:600 11px/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
  transition:color .3s}
.hdr__util a:hover{color:var(--gold-deep)}
@media (max-width:1100px){.hdr__util{display:none}}

/* Odscrollovaná hlavička sa oddelí tieňom — dosiaľ NEVYUŽITÝ hook .is-scrolled
   zo shop.js. Druhý riadok sa ZÁMERNE NESKRÝVA: pri scrollY>8 by sa dokument
   skrátil o 38 px a obsah by poskočil, klávesnica by na odscrollovanej stránke
   stratila prístup ku katalógu a --hdr-h by sa rozišla so skutočnosťou. */
.hdr.is-scrolled{box-shadow:0 6px 18px rgba(21,18,12,.06)}

/* Konečne využitá --hdr-h zo shop.js — kotva #anchor už nezaletí pod lepkavú
   hlavičku, ktorá je teraz o 24 px vyššia. */
html{scroll-padding-top:calc(var(--hdr-h,102px) + 14px)}
/* hľadanie pod lupou — rozbalí panel pod hlavičkou */
.srchd{position:static}
.srchd>summary{list-style:none;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;cursor:pointer;color:var(--ink);border-radius:50%;
  transition:color .3s,background .3s}
.srchd>summary::-webkit-details-marker{display:none}
.srchd>summary:hover{color:var(--gold-deep);background:var(--cream)}
.srchd>summary svg{width:18px;height:18px}
.srchd__panel{position:absolute;left:0;right:0;top:100%;display:flex;gap:12px;
  align-items:center;padding:16px clamp(16px,4vw,40px);background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow);z-index:65}
.srchd__i{flex:1;border:0!important;border-bottom:1px solid var(--line-gold)!important;
  border-radius:0!important;background:none!important;box-shadow:none!important;
  font:400 17px/1.4 var(--serif)!important;padding:10px 2px!important}
.srchd__i:focus{border-bottom-color:var(--gold-deep)!important}
/* Stránka hľadania má vlastné veľké pole. Kontajner UŽ NEKRESLÍ spodnú linku:
   pole vnútri je .inp s vlastným rámom dookola, takže pod rámčekom bežala ešte
   jedna vodorovná čiara ťahaná aj popod tlačidlo. `align-items:stretch` zároveň
   dorovná tlačidlo na výšku poľa (predtým 42,6 vs 46,6 px v jednom riadku).
   Pravidlá .srch__i/.srch__b sú zmazané — ani jedna šablóna tie triedy nevydáva
   (pole v hlavičke je .srchd__i, pole na /hledani je .inp). */
.srch{display:flex;align-items:stretch;gap:10px}

.langsw{display:flex;gap:2px}
.langsw__i{display:flex;align-items:center;gap:5px;padding:6px 7px;
  border:1px solid transparent;font-size:12px;color:var(--muted)}
.langsw__i .flag{width:17px;height:12px;display:block}
.langsw__i.is-on{border-color:var(--line);color:var(--ink)}
.langsw__i:hover{color:var(--gold-deep)}

.acct,.cart{display:flex;align-items:center;gap:7px;color:var(--ink);
  font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.acct:hover,.cart:hover{color:var(--gold-deep)}
.acct__ico,.cart__ico{width:19px;height:19px}
.cart{position:relative}
.cart__n{display:flex;align-items:center;justify-content:center;min-width:18px;
  height:18px;padding:0 5px;background:var(--ink);color:var(--gold);
  border-radius:99px;font:700 10.5px/1 var(--sans);letter-spacing:0}
.cart.is-full .cart__n{background:var(--gold-deep);color:#fff}
@media (max-width:1279px){.acct__t,.cart__t{display:none}}

/* mobilné menu */
.mnav{display:none}
@media (max-width:1100px){
  .nav{display:none}
  .mnav{display:block;order:-1}
  .mnav>summary{list-style:none;display:flex;align-items:center;gap:8px;
    cursor:pointer;padding:10px 4px;font:600 11.5px/1 var(--sans);
    letter-spacing:.14em;text-transform:uppercase}
  .mnav>summary::-webkit-details-marker{display:none}
  .mnav__bars{width:20px;height:2px;background:var(--ink);position:relative;display:block}
  .mnav__bars::before,.mnav__bars::after{content:'';position:absolute;left:0;
    width:20px;height:2px;background:var(--ink)}
  .mnav__bars::before{top:-6px}.mnav__bars::after{top:6px}
  .mnav__panel{position:fixed;inset:0;top:0;padding:74px 26px 40px;overflow:auto;
    background:var(--paper);z-index:55;display:flex;flex-direction:column;gap:2px}
  /* Otvorené menu: ☰ sa PRIPNE vpravo hore ako ✕ — predtým zostávalo
     v hlavičke a pri odscrollovanej stránke plávalo cez položky zoznamu.
     Pozadie zamyká html.mnav-open (JS), zoznam scrolluje len panel. */
  .mnav[open]>summary{position:fixed;top:10px;right:12px;left:auto;z-index:57;
    padding:14px;background:var(--paper);border:1px solid var(--line-gold);
    border-radius:50%}
  .mnav[open] .mnav__t{display:none}
  .mnav[open] .mnav__bars{background:transparent}
  .mnav[open] .mnav__bars::before{top:0;transform:rotate(45deg)}
  .mnav[open] .mnav__bars::after{top:0;transform:rotate(-45deg)}
  html.mnav-open{overflow:hidden}
  .mnav__panel>a,.mnav__v>summary{display:flex;justify-content:space-between;
    padding:13px 2px;font-family:var(--serif);font-size:19px;color:var(--ink);
    border-bottom:1px solid var(--line);cursor:pointer;list-style:none}
  .mnav__v>summary::-webkit-details-marker{display:none}
  .mnav__v a{display:flex;justify-content:space-between;padding:10px 2px 10px 18px;
    font-size:15.5px;color:var(--ink-soft)}
  .mnav__n{color:var(--muted);font:400 12.5px/1.8 var(--sans)}
  .mnav__acct{margin-top:18px;font:600 12.5px/1 var(--sans)!important;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)!important;
    border-bottom:0!important}
}

/* ── tlačidlá ───────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border:1px solid var(--ink);background:none;color:var(--ink);
  font:600 12.5px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  border-radius:var(--r);transition:background .35s var(--ease),color .35s,border-color .35s;
  text-align:center;text-decoration:none!important}
.btn:hover{background:var(--ink);color:var(--gold)}
.btn--cta{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.btn--cta:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.btn--ghost{border-color:var(--line-gold);color:var(--gold-deep)}
.btn--ghost:hover{background:none;border-color:var(--gold-deep);color:var(--ink)}
.btn--lg{padding:16px 34px;font-size:13px}
.btn--sm{padding:9px 16px;font-size:11.5px;letter-spacing:.12em}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.lnkbtn,.linkish{background:none;border:0;color:var(--gold-deep);text-decoration:underline;
  text-underline-offset:3px;padding:0;font:inherit;cursor:pointer}

/* ── hero (domov) ───────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--ink);color:var(--cream);overflow:hidden}
.hero__in{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,10fr) minmax(0,9fr);align-items:stretch;
  min-height:min(78vh,720px)}
.hero__msg{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(40px,6vw,90px) clamp(20px,4vw,60px) clamp(40px,6vw,90px) clamp(16px,4vw,40px)}

/* ── otočné hero ──────────────────────────────────────────────────────────
   Modifikátor --multi sa nasadí LEN keď sú snímky aspoň dve. Pri jedinej
   snímke ostáva hero presne taký, aký bol — flex stĺpec bez mriežky, bez
   ovládania, bez skriptu. Menej stavov, menej ciest k chybe.

   Snímky ležia na sebe v jednej bunke mriežky, takže hero nemení výšku pri
   striedaní: bunku roztiahne najdlhší text a ostatné sa doň zmestia. Keby sa
   prepínalo cez display:none, stránka by pri každej obmene poskočila. */
/* DVA RIADKY: snímky hore, ovládanie dole. Nie prekryv v jednej bunke.
   Skúšal som to rezervou odsadenia a nefunguje to: snímky sú zvislo
   centrované, takže padding-bottom posunie obsah len o POLOVICU svojej
   hodnoty a najdlhšia snímka („Zaregistrujte sa" s tlačidlom 255 px, ktoré
   sa zalomí do dvoch riadkov) aj tak sadla na bodky o 6 px.
   S vlastným riadkom mriežky sa prekryv nemôže stať konštrukčne. */
/* align-items ostáva na predvolenom `stretch`: snímka musí VYPLNIŤ riadok.
   Pri `center` si držala výšku podľa obsahu, riadok vyšiel o 14 px nižší
   a najdlhšia snímka pretiekla presne o toľko — tlačidlá potom siahali pod
   svoju vlastnú snímku. Zvislé vycentrovanie rieši justify-content vnútri
   samotnej snímky, nie mriežka. */
.hero__msg--multi{display:grid;grid-template-rows:1fr auto;row-gap:24px}
.hero__msg--multi>.hslide{grid-area:1/1;display:flex;flex-direction:column;
  justify-content:center;
  /* visibility (nie len opacity) vyberá skrytú snímku z poradia tabulátora aj
     z čítačky obrazovky — inak by sa dalo tabom prejsť na neviditeľné tlačidlo. */
  opacity:0;visibility:hidden;
  transition:opacity .7s var(--ease),visibility 0s linear .7s}
.hero__msg--multi>.hslide.is-on{opacity:1;visibility:visible;transition-delay:0s}

/* Text neskočí, ale sa nadvihne. Drobnosť — ale práve ona odlíši „prepla sa
   stránka" od „niekto mi to ukázal". Posun je zámerne malý (14 px): väčší už
   pôsobí ako reklamný banner, nie ako editoriál. */
.hero__msg--multi>.hslide>*{opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
.hero__msg--multi>.hslide.is-on>*{opacity:1;transform:none}
/* Riadky nabiehajú za sebou, nie naraz — oko ich tak prečíta v poradí. */
.hero__msg--multi>.hslide.is-on>:nth-child(1){transition-delay:.10s}
.hero__msg--multi>.hslide.is-on>:nth-child(2){transition-delay:.18s}
.hero__msg--multi>.hslide.is-on>:nth-child(3){transition-delay:.26s}
.hero__msg--multi>.hslide.is-on>:nth-child(4){transition-delay:.34s}

.hero__shot .hshot{opacity:0;transition:opacity .9s var(--ease)}
.hero__shot .hshot.is-on{opacity:1}

/* Ovládanie: bodky. Terč má 44 px, viditeľná značka je drobná — pri luxusnej
   značke nemá ovládanie kričať, ale musí sa dať trafiť palcom. */
/* Bodky ležia v tej istej bunke mriežky ako snímky a sú zarovnané na spodok.
   Aby nesadli na tlačidlá, snímka si dole rezervuje pás (viď .hslide nižšie).
   Bez neho terč bodiek (44 px) prekrýval tlačidlo „Náš príbeh" — namerané
   903–947 px proti tlačidlu 873–915. */
/* Druhý riadok mriežky, nie prekryv nad snímkami — viď komentár pri
   .hero__msg--multi. Tým je vylúčené, že si terč sadne na tlačidlá. */
.hnav{grid-area:2/1;align-self:start;justify-self:start;
  display:flex;gap:2px;margin:0 0 0 -10px;z-index:2}
.hnav__d{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center}
.hnav__d>span{position:relative;display:block;width:26px;height:2px;
  background:rgba(244,239,229,.34);transition:background .4s var(--ease)}
.hnav__d:hover>span{background:rgba(244,239,229,.7)}
/* Zlatý priebeh na aktívnej čiarke: ukazuje, koľko času do ďalšej snímky.
   Šírku ženie CSS animácia, nie časovač v JS — prehliadač ju kreslí plynulo
   a nemusí sa s ničím synchronizovať. Trvanie musí sedieť s intervalom
   v shop.js (7 s); keď sa zmení tam, zmeňte ho aj tu. */
.hnav__d.is-on>span::after{content:'';position:absolute;inset:0 auto 0 0;
  background:var(--gold);width:0}
.hnav__d.is-on.bezi>span::after{animation:hnav-beh 7s linear forwards}
@keyframes hnav-beh{from{width:0}to{width:100%}}
/* Keď sa už netočí (zákazníčka klikla), priebeh sa nekreslí — čiarka len svieti. */
.hnav__d.is-on:not(.bezi)>span{background:var(--gold)}
.hnav__d:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
/* Bez skriptu sa nedá prepínať, tak nech ovládanie ani nesľubuje, že sa dá.
   Trieda pribúda v shop.js hneď po naviazaní obsluhy. */
.hnav:not(.je){visibility:hidden}
.hero__msg .eyebrow{color:var(--gold)}
.hero__msg h1,.hero__msg h2{font-size:clamp(34px,4.8vw,60px);font-weight:500;color:#fff;margin:0 0 20px}
.hero__msg em{font-style:italic;color:var(--gold)}
.hero__p{font-size:clamp(15.5px,1.6vw,18px);line-height:1.7;color:rgba(244,239,229,.82);
  max-width:52ch;margin:0 0 30px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.hero .btn{border-color:var(--gold);color:var(--gold)}
.hero .btn:hover{background:var(--gold);color:var(--ink)}
.hero .btn--cta{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.hero .btn--cta:hover{background:var(--cream);border-color:var(--cream)}
.hero__shot{position:relative;margin:0;min-height:420px;overflow:hidden}  /* Ken Burns nesmie pretiecť */
.hero__shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.hero__shot::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--ink) 0%,transparent 22%)}
/* `.hero__note` (pravý dolný roh hero) je zrušený — niesol tú istú vetu ako
   eyebrow nad nadpisom a Dorina bublina mu prekrývala koniec. Roh je odteraz
   vyhradený Dore. */
@media (max-width:860px){
  .hero__in{grid-template-columns:1fr;min-height:0}
  /* 56vw dávalo pri 375 px pás vysoký 210 px. Zdrojové fotky sú na výšku
     750×1000, takže po object-fit:cover z nich bolo vidieť horných 42 % —
     kúsok, ktorý banner ponúka, sa do záberu vôbec nezmestil. Vyššie okno
     ukáže ~78 % fotky a hero stále nezaberie celú obrazovku. */
  .hero__shot{order:-1;min-height:min(104vw,440px)}
  /* Ťažisko o kúsok nižšie než úplný vrch: hlava zostane v zábere, ale
     pribudne kus odevu, o ktorý pri móde ide. */
  .hero__shot img{object-position:50% 12%}
  .hero__shot::after{background:linear-gradient(180deg,transparent 55%,var(--ink) 100%)}
  .hero__msg{padding:26px 20px 44px;text-align:left}
}

/* ── sekčné hlavičky ────────────────────────────────────────────────────── */
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  margin:clamp(40px,7vw,84px) 0 26px}
/* Aj h1: sekčnú hlavičku používajú výpisy (/blog, /kategorie, /hledani,
   /darcekove-poukazy, /pre-vas, /vernostni-program, účet), a tie majú vnútri
   h1. Bez neho si h1 držal margin-bottom .5em, ktorý prebil `margin-top:6px`
   na podtitulku — medzera bola 15 px (390 px) až 26 px (1280 px) namiesto 6. */
.sec-h h1,.sec-h h2{margin:0}
.sec-h .muted{display:block;font-size:14.5px;margin-top:6px}
.sec-h__more{font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);white-space:nowrap;border-bottom:1px solid var(--line-gold);
  padding-bottom:4px}
.sec-h__more:hover{color:var(--ink);border-color:var(--ink)}
/* Terč mal 17 px na výšku. Rastie SAMOTNÝ odkaz, nie neviditeľný prekryv cez
   ::after — ten by síce nič neposunul, ale zároveň pohlcoval kliknutia v ploche,
   kde nič nie je, a pri dlhšom nadpise sekcie by prekryl jeho pravý koniec.
   Takto sa hlavička len o pár pixelov zvýši a klikateľné je presne to, čo vidno.
   POZOR: .sec-h musí zostať na align-items:baseline. Skúšal som center a pri
   hlavičke s podtitulom („Novinky z kolekcie") odkaz klesol o 15 px — centroval
   sa voči celému bloku nadpis+podtitul namiesto voči nadpisu. Pri baseline si
   inline-flex nesie účiaru svojho textu, takže sedí na účiare nadpisu a výška
   navyše sa rozloží nad a pod ňu. */
.sec-h__more{display:inline-flex;align-items:center;min-height:44px}

/* Podtitul pod nadpisom výpisu. Chýbal, takže na Obľúbených bol 16 px v plnej
   tmavej — teda ťažší než ten istý podtitul na sesterskej stránke Pre vás. */
.cat__sub{margin:6px 0 0;font-size:14.5px;line-height:1.65;color:var(--muted);max-width:62ch}

/* ── mriežka a karta produktu ───────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px) clamp(12px,1.6vw,20px)}
@media (max-width:1080px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid{grid-template-columns:repeat(2,1fr)}}

.card{display:flex;flex-direction:column;position:relative;background:none}
.card__link{display:flex;flex-direction:column;flex:1}
.card__img{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cream)}
.card__img img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1.1s var(--ease),opacity .5s}
.card:hover .card__img img{transform:scale(1.045)}
/* Druhá fotka pri prejdení myšou.
   PASCA: shop.js ju do rámu vkladal odjakživa, ale `.card__alt` nemalo v celom
   hárku ani jedno pravidlo — bol to teda obyčajný súrodenec v toku, vykreslený
   POD prvou fotkou, a rám s pevným pomerom a overflow:hidden ho odrezal.
   Súbor sa stiahol a nikto ho nikdy neuvidel. Stačí ho položiť na prvú fotku.
   z-index 1: nad hlavnú fotku, ale pod štítky (2) a srdiečko (3). */
.card__alt{position:absolute;inset:0;z-index:1;opacity:0;
  transition:opacity .55s var(--ease)}
.card:hover .card__alt{opacity:1}
@media (prefers-reduced-motion:reduce){.card__alt{transition:none}}
.card__img--wide{aspect-ratio:3/2}
.card__img--wide img{object-fit:contain;background:var(--cream)}
/* ── veľkosti a farby na karte ──────────────────────────────────────────────
   Sedia POD cenou, nie za prejdením myšou nad fotkou. Na telefóne prejdenie
   neexistuje a odpoveď na otázku „mám tu svoju veľkosť?" je príliš dôležitá
   na to, aby sa skrývala pred polovicou návštevníčok. */
.card__far{display:flex;align-items:center;gap:5px;margin-top:8px}
.card__fa{width:11px;height:11px;border-radius:50%;background:var(--fa);
  /* Obrys zvnútra, nie border: biela a krémová by inak na papieri zmizli. */
  box-shadow:inset 0 0 0 1px rgba(21,18,12,.22)}
.card__fviac{font:600 10px/1 var(--sans);font-style:normal;color:var(--muted);letter-spacing:.06em}

.card__vel{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.card__ve{font:600 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);border:1px solid var(--line);border-radius:2px;padding:4px 6px;
  background:none}

/* Rýchle pridanie: veľkosť JE tlačidlo. Jeden ťuk namiesto dvoch, takže
   výzva „Vybrať veľkosť" sa pod tým už nekreslí.
   Cieľ má aspoň 44 px na dotyk — chip s 10 px písmom by bol inak na telefóne
   neuhádnuteľný. */
.card__vel--kup{margin-top:10px}
.card__vel--kup .card__ve{cursor:pointer;min-width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  border-color:var(--line);
  transition:background .25s var(--ease),color .25s,border-color .25s}
.card__vel--kup button.card__ve:hover,
.card__vel--kup button.card__ve:focus-visible{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.card__vel--kup .card__ve.is-out{min-width:0;min-height:0;padding:4px 6px;cursor:default}
/* Vypredaná veľkosť sa NESKRÝVA: keď zmizne, zákazníčka si myslí, že sa kus
   v jej veľkosti nešije. Takto vidí, že existuje — len práve nie je. */
.card__ve.is-out{color:var(--muted);border-color:transparent;
  text-decoration:line-through;text-decoration-thickness:1px}

.badges{position:absolute;top:10px;left:10px;display:flex;flex-direction:column;
  gap:6px;align-items:flex-start;z-index:2}
.badge{background:var(--paper);color:var(--ink);font:600 10.5px/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;padding:6px 10px}
.badge--save{background:var(--ink);color:var(--gold)}
.badge--ship{background:var(--paper);color:var(--gold-deep);border:1px solid var(--gold)}
.badge--new{background:var(--gold-deep);color:#fff}
.card__b{display:flex;flex-direction:column;gap:4px;padding:14px 2px 6px;flex:1}
.card__t{font-family:var(--serif);font-size:16.5px;line-height:1.35;color:var(--ink)}
.card:hover .card__t{color:var(--gold-deep)}
.card__meta{font-size:12px;color:var(--muted);letter-spacing:.04em}
.card__meta b{font-weight:600;color:var(--ok)}
.card__meta .card__order{color:var(--gold-deep)}
.card__p{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.price{font:600 15.5px/1 var(--sans);letter-spacing:.02em}
.price--before{font-size:13px;color:var(--muted);text-decoration:line-through}
.price__unit{width:100%;font-size:11.5px;color:var(--muted)}
.card__buy{margin-top:10px}
.card__buy .btn{border-color:var(--line);color:var(--ink);width:100%}
.card__buy .btn:hover{border-color:var(--ink);background:var(--ink);color:var(--gold)}
.card__sizes{display:flex;flex-wrap:wrap;gap:4px;font-size:11px;color:var(--muted);
  letter-spacing:.06em;min-height:17px}

/* ── obsahový pás / banner ───────────────────────────────────────────────
   Používa ho pás darčekových poukazov na úvodnej stránke a oba bannerové
   sloty z administrácie (home_top, home_mid). Celá rodina .bnr* dovtedy
   nemala v tomto súbore ani jedno pravidlo, takže sa nadpis, text aj výzva
   zliali do jedného riadka v základnom písme — a rovnako by dopadol prvý
   banner, ktorý by obsluha v admine vložila. */
.bnrs{display:grid;gap:18px;margin:clamp(30px,5vw,54px) 0}
/* Dva bannery vedľa seba, nie pod sebou.
   Sú to krátke odkazy s dvoma riadkami textu; na plnú šírku 1160 px z nich
   boli dva takmer prázdne pásy a zaberali 300 px výšky. Vedľa seba zaberú
   polovicu a čítajú sa ako dve ponuky, nie ako dve oznámenia.

   `:has` je tu preto, že bannerov môže byť jeden, dva aj päť — a stĺpce majú
   zmysel len pri PÁRNOM krátkom počte. Pri jednom by polovičná šírka vyzerala
   ako chyba, pri troch by posledný osamel.

   Banner s fotkou zostáva na celú šírku: fotka + text v polovičnom stĺpci sa
   pod 600 px zlomí na dva riadky a vznikne presne ten úzky stĺpec, pred ktorým
   varuje komentár nižšie. */
@media (min-width:861px){
  .bnrs:has(> :nth-child(2)):not(:has(> :nth-child(3))):not(:has(.bnr__img)){
    grid-template-columns:1fr 1fr}
}
/* Flex, nie mriežka s dvoma stĺpcami: banner z administrácie sa smie uložiť aj
   BEZ fotky (admin to výslovne ponúka). Pri pevných stĺpcoch by text vtedy
   spadol do úzkeho prvého stĺpca. Takto si chýbajúci obrázok nikto nevšimne. */
.bnr{display:flex;flex-wrap:wrap;align-items:center;
  gap:clamp(18px,3vw,34px);
  padding:clamp(20px,3vw,32px) clamp(20px,4vw,40px);
  background:var(--cream);border:1px solid var(--line-gold);color:var(--ink);
  text-decoration:none!important;transition:border-color .35s,background .35s}
.bnr:hover{border-color:var(--gold-deep)}
.bnr__img{flex:0 0 auto;max-width:200px;display:flex;align-items:center;justify-content:center}
.bnr__img img{max-width:100%;height:auto;display:block}
/* :not(.bnr__img), nie :last-child — pri banneri LEN s fotkou je posledným
   potomkom práve obrázok a ten by si nárokoval 320 px šírky. */
.bnr>span:not(.bnr__img){flex:1 1 320px;display:flex;flex-direction:column;gap:8px}
.bnr__t{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);line-height:1.2}
.bnr__p{color:var(--muted);font-size:14.5px;line-height:1.7;max-width:52ch}
.bnr__cta{font:600 11.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep)}
/* Rám v tej istej farbe ako pozadie existuje len v boxe, nie na obrazovke.
   Zlatá vlásočnica drží tmavý variant konzistentný so svetlým, ktorý ju má. */
.bnr--deep{background:var(--ink);border-color:var(--line-gold);color:var(--cream)}
.bnr--deep .bnr__t{color:#fff}
.bnr--deep .bnr__p{color:rgba(244,239,229,.8)}
.bnr--deep .bnr__cta{color:var(--gold)}
@media (max-width:640px){
  .bnr{grid-template-columns:1fr;text-align:center}
  .bnr>span:last-child{align-items:center}}

/* ── kategórie (editorial dlaždice) ─────────────────────────────────────── */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.8vw,22px)}
@media (max-width:860px){.cats{grid-template-columns:repeat(2,1fr)}}

/* Editoriálne rozloženie: prvá kolekcia veľká, dve pri nej na výšku, tri pod
   nimi. Šesť rovnakých obdĺžnikov je katalóg; toto je výklad — oko dostane
   miesto, kde začať, namiesto šiestich rovnocenných ponúk naraz.

   Platí LEN pri presne šiestich dlaždiciach (`:has`). Pri piatich by ostala
   diera v poslednom rade a mriežka by vyzerala pokazene — vtedy zostáva
   pôvodné rovnomerné rozloženie. PHP viac než šesť nikdy nevypíše.
   Na mobile sa neuplatní vôbec: tam sú dlaždice dve v rade. */
@media (min-width:861px){
  /* Vyššie riadky. Pri 14,5vw mala dlaždica 225 px a z fotky na výšku (3:4)
     z nej ostalo 45 % postavy — nech už bol orez kdekoľvek, niečo podstatné
     vypadlo. Pri 21vw je to 294 px, teda zhruba 70 % postavy: hlava aj odev.
     Celú postavu široký pás ukázať nevie a žiadny orez to nespraví — na to by
     musela byť dlaždica na výšku. */
  .cats:has(> .cat:nth-child(6)){grid-auto-rows:clamp(220px,21vw,300px)}
  /* Pomer strán musí ustúpiť: dlaždica cez dva riadky si výšku určuje sama. */
  .cats:has(> .cat:nth-child(6)) > .cat{aspect-ratio:auto;height:100%}
  .cats:has(> .cat:nth-child(6)) > .cat:first-child{grid-column:span 2;grid-row:span 2}
  /* Vo veľkej dlaždici má názov väčšiu váhu — inak by sa v ploche stratil. */
  .cats:has(> .cat:nth-child(6)) > .cat:first-child .cat__t{font-size:clamp(24px,2.9vw,34px)}
  .cats:has(> .cat:nth-child(6)) > .cat:first-child .cat__b{padding:26px 26px 24px}

  /* Orez na stred, nie na vrch. Zdrojové fotky sú na výšku (667×1000) a
     dlaždica je široký pás — `object-position:top center` z nich vyrezal
     hlavu, takže odev, teda to jediné, čo predávame, zostal mimo záberu.
     Na mobile ostáva orez na vrch: tam je dlaždica na výšku a hlava do nej
     patrí.

     PASCA: `.cat__im img{}` by tu neplatilo. Tento blok stojí v hárku VYŠŠIE
     než pôvodné pravidlo s `top center` a pri rovnakej špecifickosti vyhráva
     to neskoršie. Preto `.cats .cat__im img` — o triedu viac.

     ORIENTÁCIA OREZU — dvakrát zmenená, tu je záver:
     `center` odrezal hlavy a bezhlavé postavy vyzerajú ako chyba, nie ako
     orez. 12 % zhora hlavu zachránilo pri záberoch zblízka, ale pri
     celopostavových (Šaty, Novinky) je 12 % už pod bradou — modelka tam stojí
     ďalej od objektívu, takže hlava je vyššie v snímke.
     Späť na vrch. Pôvodná námietka („orez zje odev") padla s vyššou
     dlaždicou: pri 300 px z 495 vidno 60 % postavy od hlavy po boky,
     čo je hlava AJ odev. */
  .cats .cat__im img{object-position:top center}
}
/* Pomer 3/2, nie 4/5. Šesť vysokých dlaždíc v troch stĺpcoch tvorilo dva rady
   po 480 px a celá sekcia merala 1 449 px — viac než príbeh značky. Širší
   pomer z nich spraví editoriálne pásy, kategórií zostane všetkých šesť a
   sekcia klesne zhruba o polovicu.
   Na mobile ostáva vyšší pomer: tam sú dlaždice dve v rade a nízky pás by
   z fotky ukázal len úzky prúžok. */
.cat{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ink)}
@media (max-width:860px){.cat{aspect-ratio:4/5}}
/* Podklad pod fotkou. `.cat` má atramentové pozadie kvôli bielemu názvu, lenže
   fotky sú lazy — kým doletia, je zo sekcie šesť čiernych obdĺžnikov a pôsobí
   to ako pokazená stránka, nie ako načítavanie. Teplý kamenný prechod v tóne
   značky vyzerá ako rozostrený záber a fotka naň potom sadne bez kontrastu. */
.cat__im{position:absolute;inset:0;
  background:linear-gradient(160deg,#4a4034 0%,#2b2620 60%,#1d1913 100%)}
.cat__im img{width:100%;height:100%;object-fit:cover;object-position:top center;
  opacity:.92;transition:transform 1.2s var(--ease),opacity .5s}
.cat:hover .cat__im img{transform:scale(1.05);opacity:1}
.cat::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 45%,rgba(21,18,12,.78) 100%)}
.cat__b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:3px}
.cat__t{font-family:var(--serif);font-size:clamp(19px,2.2vw,25px);color:#fff;letter-spacing:.02em}
.cat__n{font:600 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ── pás príbehu značky (tmavý) ─────────────────────────────────────────── */
.band{background:var(--ink);color:var(--cream);margin:clamp(48px,8vw,100px) 0;
  position:relative;overflow:hidden}
.band__in{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);
  align-items:center;padding:clamp(48px,7vw,96px) clamp(16px,4vw,40px)}
.band h2{color:#fff}
.band__lead{font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.8;color:rgba(244,239,229,.82);
  max-width:58ch}
.band__lead em{font-style:italic;color:var(--gold)}
.band .btn{border-color:var(--gold);color:var(--gold);margin-top:22px}
.band .btn:hover{background:var(--gold);color:var(--ink)}
.band__mono{margin:0;display:flex;justify-content:center}
.band__mono img{width:min(320px,70%);height:auto;filter:drop-shadow(0 18px 50px rgba(0,0,0,.45))}
.band__list{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.band__list li{display:flex;gap:16px;align-items:baseline}
.band__n{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:19px;flex:none}
.band__t{display:block;font-weight:600;letter-spacing:.04em}
.band__d{display:block;font-size:13.5px;color:rgba(244,239,229,.7);margin-top:2px}
@media (max-width:860px){.band__in{grid-template-columns:1fr}.band__mono{order:-1}}

/* ── pás dôvery: recenzie + istoty ──────────────────────────────────────── */
.trust{background:var(--cream);padding:clamp(44px,6vw,76px) 0;margin-top:clamp(48px,8vw,96px)}
.trust h2{text-align:center}
.trust__stars{display:flex;justify-content:center;gap:4px;color:var(--gold-deep);
  font-size:19px;letter-spacing:.28em;margin:0 0 8px}
.trust__sub{text-align:center;font-size:13.5px;color:var(--muted);margin:0 0 36px}
.trust__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);
  max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,40px)}
@media (max-width:860px){.trust__grid{grid-template-columns:1fr}}
.trev{background:var(--paper);padding:26px 26px 22px;display:flex;flex-direction:column;
  gap:10px;border-top:2px solid var(--gold)}
.trev__stars{color:var(--gold-deep);letter-spacing:.24em;font-size:14px}
.trev__txt{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.6}
.trev__who{font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-top:auto}
.trev__reply{font-size:12.5px;color:var(--muted);border-left:2px solid var(--line-gold);
  padding-left:12px}
.sure{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,4vw,64px);
  margin:40px auto 0;padding:0 20px;max-width:var(--wrap)}
.sure__i{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  font:600 11.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.sure__i small{font:400 12.5px/1.4 var(--sans);letter-spacing:.02em;text-transform:none;color:var(--muted)}
.sure__n{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--gold-deep);font-weight:500}

/* ── newsletter pás ─────────────────────────────────────────────────────── */
/* ── newsletter: krémový pás nad pätičkou ─────────────────────────────────
   PREČO SEM: prihlásenie k novinkám je pozvánka, nie drobné písmo. V tmavej
   mriežke bolo piatym stĺpcom — a bolo to práve ono, čo mriežku rozbíjalo
   (nestlačiteľné tlačidlo, viď komentár pri .ftr). Presunom sa príčina rieši
   pri koreni, nie väčším podielom.
   Vedľajší efekt, ktorý stojí za pomenovanie: `btn--cta` je atramentová
   plocha s krémovým textom — na tmavej pätičke bola prakticky neviditeľná.
   Na krémovom páse je to najsilnejší prvok na obrazovke a trieda je zrazu
   správna bez zásahu. */
.nlband{background:var(--cream);border-top:1px solid var(--line-gold);
  margin-top:clamp(56px,9vw,110px)}
/* minmax(0,1fr), nie 1fr — formulár vpravo obsahuje prvok, ktorý sa nedá
   stlačiť pod svoju min-content šírku. S holým `1fr` by si tú šírku vzal
   z podielu ľavého stĺpca, presne ako to roky robil v pätičke. */
.nlband__in{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);
  align-items:center;padding:clamp(26px,3.4vw,42px) clamp(16px,4vw,40px)}
.nlband h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 8px}
.nlband__p{color:var(--muted);font-size:14.5px;line-height:1.7;margin:0;max-width:46ch}
.nlform{display:flex;gap:0}
.nlform__i{flex:1 1 auto;min-width:0;background:var(--white);
  border:1px solid var(--line-gold);border-right:0;color:var(--ink);
  font:400 14px/1 var(--sans);padding:13px 14px;outline:none}
.nlform__i:focus{border-color:var(--gold-deep)}
.nlform__i::placeholder{color:var(--muted)}
/* flex:none bráni tomu, aby sa nápis ODOBERAŤ zalomil na dva riadky; užšie
   odsadenie a menšie písmo stiahnu tlačidlo zo ~136 px na ~108 px, takže pri
   390 px ostane na pole ~250 px namiesto 208 px. */
.nlform .btn{flex:none;margin:0;padding:13px 20px;font-size:11.5px;letter-spacing:.12em}
.nlform__gdpr{font-size:11.5px;color:var(--muted);line-height:1.6;margin:10px 0 0}
@media (max-width:760px){
  .nlband__in{grid-template-columns:minmax(0,1fr);gap:18px}
}

/* ── pätička ──────────────────────────────────────────────────────────────
   PREČO CELÁ PREROBENÁ: pätička nebola podpis značky, ale mapa webu — päť
   stĺpcov, dvadsať odkazov a všetkých dvadsať zalomených na dva riadky.
   Namerané v Chrome pri 1440 px: značka 155 · Kategórie 111 · Informácie 111
   · Kontakt 270 · Novinky 341 px; výška 761 px, pravá polovica od ~200 px
   nižšie prázdna.

   PRÍČINA: holé `1fr` je v skutočnosti `minmax(auto,1fr)` — „podiel, ale
   nikdy menej než min-content". Dva stĺpce mali nestlačiteľný obsah:
   tlačidlo ODOBERAŤ a rad štyroch sietí bez flex-wrap. Tých ~165 px si vzali
   na úkor stĺpcov s odkazmi: podľa podielov im patrilo 159 px, dostali 111.
   `minmax(0,1fr)` je preto nutná oprava — a NEPOSTAČUJÚCA: pri 159 px sa
   „Reklamácie a odstúpenie od zmluvy" (≈231 px) zalomí tak či tak. Skutočná
   oprava je v obsahu, nie v mriežke: z dvadsiatich odkazov ostáva päť
   a stĺpce si berú toľko, koľko meria ich najdlhší názov. */
.ftr{background:var(--ink);color:rgba(244,239,229,.8);margin-top:clamp(56px,9vw,110px)}
/* Keď je newsletter zapnutý, odstup od obsahu drží krémový pás. Dva odstupy
   za sebou by pod ním nechali prázdny pruh papiera. */
.nlband+.ftr{margin-top:0}
.ftr a{color:rgba(244,239,229,.8)}
.ftr a:hover{color:var(--gold)}

/* ── podpis značky: plná šírka, na stred ── */
.ftr__sig{max-width:var(--wrap);margin:0 auto;text-align:center;
  padding:clamp(44px,4.6vw,60px) clamp(16px,4vw,40px) 0}
/* Wordmark je 560\D7 59, teda pomer 9,49:1. V 155 px stĺpci ho globálne
   img{max-width:100%} orezalo na 155 px, kým .brand__wm--ftr držala výšku
   na 24 px — logo značky bolo vodorovne stlačené na 68 % správnej šírky.
   Tu si šírku určuje samo a height:auto ju dopočíta. */
.ftr__wm{display:block;width:min(228px,72%);height:auto;margin:0 auto}
/* Serifová kurzíva namiesto prestrkaných verzálok: pod wordmarkom má stáť
   veta značky, nie ďalší štítok. Dva prestrkané uppercase riadky nad sebou
   by splynuli do jednej šedej masy. */
.ftr__claim{font-family:var(--serif);font-style:italic;
  font-size:clamp(15px,1.7vw,18px);line-height:1.5;
  color:rgba(244,239,229,.72);margin:12px 0 0}

/* ── vlys kategórií: riadok, nie stĺpec ──
   V 111 px stĺpci sa lámalo všetkých deväť názvov na dva riadky. V riadku sa
   láme až zoznam, a to MEDZI položkami — názov ostane vždy celok. flex-wrap
   znesie 0 aj 15 položiek bez jediného zlomového bodu navyše. */
.ftr__cats{display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px clamp(16px,2.4vw,30px);margin-top:clamp(24px,2.8vw,34px)}
.ftr__cats a{font:600 11.5px/1.4 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(244,239,229,.78);padding:3px 0}
.ftr__cats a:hover{color:var(--gold)}
/* Sprievodca štýlom a vernostný program nie sú sortiment ani podmienka
   predaja — sú to nástroje. Zlatou na konci vlysu, vizuálne oddelené. */
.ftr__cats .is-tool{color:var(--gold)}
/* VLYS OSTÁVA AJ NA MOBILE — zámerne. Z pätičky je k hamburgeru celá
   obrazovka rolovania späť a pätička e-shopu bez jedinej cesty do obchodu je
   strata predaja, nie estetický detail. Bonus: pätička tým nie je viazaná
   na zlomový bod hlavičky. */

/* ── dva stĺpce, vycentrované ako dvojica ──
   Prečo flex a nie grid: stĺpce si majú vziať presne toľko, koľko meria ich
   najdlhší názov, a nie podiel z 1240 px — dve dráhy po ~578 px by boli späť
   pri prázdnej ploche, len inak rozloženej. Obsah tu už nemá ako prehlasovať
   podiel, lebo žiadny podiel neexistuje. */
.ftr__in{max-width:var(--wrap);margin:clamp(28px,3.4vw,42px) auto 0;
  border-top:1px solid rgba(244,239,229,.14);
  padding:clamp(28px,3.4vw,42px) clamp(16px,4vw,40px) clamp(34px,4vw,48px);
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(30px,6vw,86px)}
.ftr__col{max-width:100%;min-width:0}
.ftr h4{color:var(--gold);margin:0 0 14px}
/* Nadpis stĺpca KONTAKT je odkaz na stránku Kontakty (system_code 'contact').
   Tá tým prestala potrebovať vlastný riadok v zozname informácií. */
.ftr h4 a{color:inherit}
.ftr h4 a:hover{color:rgba(244,239,229,.85)}
/* display:block je zámerne až tu, na .ftr__col a, nie na .ftr a — vlys aj
   spodný pás potrebujú odkazy v riadku. Práve staré .ftr a{display:block}
   si vynútilo .soc__i{display:flex!important}; zúžením selektora oba
   !important zanikajú. */
.ftr__col a{display:block;padding:4px 0;font:400 14px/1.5 var(--sans)}
/* Štyri siete v nezlomiteľnom riadku mali min-content ≈262 px a práve ony —
   nie e-mailová adresa — rozťahovali stĺpec Kontakt na 270 px. */
.soc{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px}
/* .ftr__col a (0,2,1) je špecifickejšie než .soc__i (0,1,0), takže sem
   patrí .soc .soc__i — inak si siete berú 14 px z odkazov v stĺpci
   a verzálky pod kontaktom pôsobia rovnako ťažko ako samotné údaje. */
.soc .soc__i{display:flex;align-items:center;gap:7px;font:400 12.5px/1.4 var(--sans);
  letter-spacing:.08em;text-transform:uppercase;padding:4px 0}
/* Ikona nesmie zhrubnúť ani stenčieť, keď sa mení veľkosť písma — ťah drží
   non-scaling-stroke. flex-shrink:0, inak by ju úzky stĺpec stlačil na ovál. */
.soc__svg{flex:0 0 auto;overflow:visible}
.soc__svg *{vector-effect:non-scaling-stroke}
/* Ikona je o odtieň tichšia než text; pri prejdení sa zrovnajú. Bez toho
   štyri linkové značky vedľa seba prekrikujú vlastné názvy. */
.soc__i .soc__svg{opacity:.72;transition:opacity .18s ease}
.soc__i:hover .soc__svg,.soc__i:focus-visible .soc__svg{opacity:1}

/* ── spodný pás: identifikácia predávajúceho ──
   Linka je zarovnaná na tých istých 1240 px ako linka nad stĺpcami — stará
   .ftr__bot ju viedla cez celú šírku okna, takže dve vodorovné linky pätičky
   nesedeli. */
.ftr__bot{padding:0 clamp(16px,4vw,40px)}
.ftr__bot-in{max-width:var(--wrap);margin:0 auto;text-align:center;
  border-top:1px solid rgba(244,239,229,.14);padding:20px 0 28px}
.ftr__legal{font-size:12px;line-height:1.7;letter-spacing:.02em;
  color:rgba(244,239,229,.58);margin:0}
.ftr__cr{font-size:12px;line-height:1.7;letter-spacing:.05em;
  color:rgba(244,239,229,.58);margin:6px 0 0}
.ftr__cr a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ftr__cr a:hover{color:var(--gold)}

@media (max-width:560px){
  .ftr__in{flex-direction:column;align-items:stretch;gap:28px}
  /* Dotykový terč: 14 px riadok \D7  1,5 + 2\D7 7 px = 34 px. Pri 4 px odsadení mal
     25 px, čo je pod hranicou pohodlného ťuknutia palcom. */
  .ftr__col a{padding:7px 0}
  /* Rovnaká špecificita ako .soc .soc__i vyššie, inak by sa dotykový terč
     nezväčšil a mobil by zostal na 4 px. */
  .soc .soc__i{padding:7px 0}
  .ftr__cats a{font-size:11px;letter-spacing:.14em;padding:7px 0}
  .ftr__cats{gap:6px 16px}
}
@media (max-width:1000px){.ftr__in{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ftr__in{grid-template-columns:1fr}}

/* ── formuláre ──────────────────────────────────────────────────────────── */
/* Moderný základ platí pre KAŽDÉ pole — aj to, ktoré nemá triedu .inp.
   Jediná výnimka je pasca na roboty (.disk__hp), tá nesmie byť vidieť. */
input[type=text],input[type=email],input[type=tel],input[type=password],
input[type=search],input[type=number],input[type=date],input[type=time],
textarea,select{
  font:400 16px/1.4 var(--sans);color:var(--ink);background:#fff;
  border:1px solid var(--line-field);border-radius:var(--r);padding:12px 14px;
  outline:none;transition:border-color .3s,box-shadow .3s;max-width:100%}
input:focus-visible,textarea:focus-visible,select:focus-visible{
  /* rgba musí sedieť s --gold-deep #8A6410; premenná sa v rgba() použiť nedá */
  border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(138,100,16,.16);outline:none}
textarea{resize:vertical;min-height:96px}
label>span{display:block;font:600 11.5px/1.4 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px}
label>small{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.lbl{display:block;font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 7px}
/* Obal poľa. Nemal pravidlo, takže spodná hrana poľa Meno sa dotýkala menovky
   nasledujúceho poľa (0 px) a inde vznikalo náhodných 13 px z riadkovania —
   kým ostatné formuláre webu majú 18 px. Vnútri .grid-2 odstup rieši gap,
   preto sa tam ruší, inak by sa zdvojil. */
.f{display:block;margin:0 0 18px}
.f:last-child{margin-bottom:0}
/* Vnútri mriežky odstup rieši gap. Marginy sa v mriežke NEKOLABUJÚ — sčítali by
   sa s gapom (v recenzii by z 12 px vzniklo 30 px). Platí to pre každý grid
   obal poľa, preto sú tu vymenované všetky, nielen .grid-2. */
.grid-2>.f,.revf>.f{margin-bottom:0}
.grid-2{margin:0 0 18px}
/* To isté pre druhý obal poľa (.fld): v .grid2 a .disk__row sa jeho margin
   sčítal s gapom 22 px na 40 px, a pod posledným poľom zostávalo 18 px navyše
   k odsadeniu panela (v konfigurátore poukazu 42,8 px dole proti 24,8 hore). */
.grid2>.fld,.disk__row>.fld{margin-bottom:0}
.fld:last-child{margin-bottom:0}
/* Poznámka pod poľom patrí k poľu NAD sebou. Bez tohto ju .f odtlačil o 18 px
   hore a nechal 6 px dole, takže sedela bližšie k nasledujúcemu poľu. */
.f+.hint{margin-top:-10px;margin-bottom:18px}
/* 16px, nie 15: pod 16 px iOS Safari pri fokuse do poľa priblíži stránku
   (viewport nemá maximum-scale a ani ho mať nemá). Platí to pre KAŽDÉ pole
   webu — pokladňu, prihlásenie, kontakt aj chat s Dorou — preto sa mení
   základ, nie jednotlivé polia. */
.inp{width:100%;padding:13px 14px;border:1px solid var(--line-field);background:#fff;
  font:400 16px/1.4 var(--sans);color:var(--ink);border-radius:var(--r);
  transition:border-color .3s,box-shadow .3s;outline:none}
.inp:focus{border-color:var(--gold-deep);box-shadow:0 0 0 3px rgba(138,100,16,.16)}
.inp.is-bad{border-color:var(--bad)}
/* pasca na roboty — mimo obrazovky na každej stránke, kde sa objaví */
.disk__hp{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px;height:1px;overflow:hidden}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238A6410' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:12px;padding-right:38px}
.fld{margin:0 0 18px}
.fld--wide{grid-column:1/-1}
.fieldbad{color:var(--bad);font-size:13px;margin:6px 0 0}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.55;margin:12px 0}
/* Keď zákazníčka zabudne zaškrtnúť podmienky, šablóna pridá tieto dve triedy —
   dovtedy bez pravidla, takže políčko vyzeralo úplne rovnako ako predtým, hoci
   práve naň sa má pozrieť. Pri sekciách pokladne sa ten istý stav rieši
   viditeľným červeným rámom; tu má platiť to isté. */
.chk--tos{margin-top:16px}
.chk.is-bad{border-left:2px solid var(--bad);padding-left:10px}
.chk.is-bad>span{color:var(--bad)}
.chk input{width:17px;height:17px;margin-top:2px;accent-color:var(--gold-deep)}
.inp--sort{width:auto;padding:9px 34px 9px 12px;font-size:13.5px}

/* panely, karty obsahu */
.panelbox{background:#fff;border:1px solid var(--line);padding:26px}
.warnbox{background:#FBF3E2;border:1px solid var(--line-gold);padding:14px 18px;
  font-size:14px;margin:14px 0}
.okbox{background:#EFF3EA;border:1px solid rgba(74,103,65,.4);padding:14px 18px;
  font-size:14px;margin:14px 0}
.flash{padding:13px 18px;margin:0 0 18px;font-size:14.5px;border:1px solid}
.flash--ok{background:#EFF3EA;border-color:rgba(74,103,65,.4)}
.flash--bad{background:#F9ECEA;border-color:rgba(163,53,44,.4)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.sheet{background:#fff;border:1px solid var(--line);padding:clamp(20px,3vw,36px)}
.crumbs{font-size:12.5px;color:var(--muted);letter-spacing:.05em;margin:18px 0 8px;
  display:flex;flex-wrap:wrap;gap:6px;text-transform:uppercase}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold-deep)}
.pager{display:flex;justify-content:center;gap:8px;margin:36px 0 8px}
.pager a,.pager span{min-width:40px;padding:9px 12px;text-align:center;
  border:1px solid var(--line);font:600 13px/1 var(--sans)}
/* Šablóny označujú aktuálnu stranu cez aria-current="page", nie triedou —
   pravidlo pre `.is-on` nemalo v HTML náprotivok, takže sa aktuálne číslo
   nedalo od ostatných rozoznať (overené na /cela-ponuka). */
.pager [aria-current="page"]{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.pager a:hover{border-color:var(--gold-deep);color:var(--gold-deep)}

/* ── veľkosti na detaile ────────────────────────────────────────────────── */
.sizes{margin:20px 0 8px}
.sizes--need .sizes__err{display:block}
.sizes__lbl{font:600 11.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:10px}
.sizes__row{display:flex;flex-wrap:wrap;gap:8px}
.size{position:relative}
.size input{position:absolute;opacity:0;pointer-events:none}
.size span{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  min-width:64px;padding:10px 14px;border:1px solid var(--line);cursor:pointer;
  font:600 13px/1.3 var(--sans);letter-spacing:.04em;background:#fff;
  transition:border-color .25s,background .25s,color .25s}
.size span small{font-weight:400;font-size:10.5px;color:var(--gold-deep)}
.size:hover span{border-color:var(--ink)}
.size input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--gold)}
.size input:checked+span small{color:var(--gold)}
.size--out span{color:var(--muted);text-decoration:line-through;background:var(--cream);
  cursor:not-allowed;border-style:dashed}
.sizes__err{display:none;color:var(--bad);font-size:13.5px;margin-top:10px}
/* Chýbajúca voľba veľkosti musí byť VIDIEŤ, nielen napísaná pod tlačidlom.
   Jediné pravidlo, ktoré malo cenu zachrániť zo zmazaného <style> v produkt.php. */
.sizes--need .size span{border-color:var(--bad)}

/* ── košík, súhrn, pokladňa ────────────────────────────────────────────── */
.freebar{margin:0 0 22px;font-size:13.5px}
.freebar__rail{height:3px;background:var(--line);margin-top:8px;position:relative}
/* Šablóna vypisuje výplň ako <span>, pravidlo mierilo na <i> — zlatá výplň sa
   teda nevykreslila NIKDY a ostala len plochá sivá koľajnica, pri každom stave.
   Prístupnostný atribút pritom hlásil správne percento, takže čítačka obrazovky
   a oko hovorili niečo iné. Zacielené na obe značky, aby to prežilo aj zmenu
   šablóny opačným smerom. Šírku nesie inline style, preto tu nie je. */
.freebar__rail>span,.freebar__rail>i{position:absolute;left:0;top:0;bottom:0;
  background:var(--gold-deep);transition:width .6s var(--ease)}
.freebar--ok{color:var(--ok)}
.freebar--ok .freebar__rail>span,.freebar--ok .freebar__rail>i{background:var(--ok)}
.cartlay{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(20px,3vw,42px);
  align-items:start}
@media (max-width:900px){.cartlay{grid-template-columns:1fr}}
/* Riadok košíka: obrázok · popis · množstvo · suma · zmazať.

   PASCA: mriežka mala TRI stĺpce, ale riadok má PÄŤ priamych detí. Suma a „\D7 "
   sa preto automaticky preliali do druhého riadku — a keďže prvý stĺpec je
   obrázok, ocitli sa POD fotkou. Na názov tak zostalo 122 px a lámal sa po
   jednom slove. Počet stĺpcov musí sedieť s počtom detí; keď sa do riadku
   pridá ďalší prvok, treba pridať aj stĺpec. */
.ci{display:grid;grid-template-columns:88px 1fr auto auto auto;gap:16px;
  align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}
.ci__img img{width:88px;height:110px;object-fit:cover;background:var(--cream)}
.ci__t{font-family:var(--serif);font-size:16.5px;line-height:1.35}
.ci__t:hover{color:var(--gold-deep)}
.ci__meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.ci__unit{font-size:13px;color:var(--muted)}
.ci__line{font:600 15px/1.2 var(--sans);white-space:nowrap}
.ci__qty{display:flex;align-items:center;gap:2px}
/* POZOR: .qty je tu WRAPPER steppera [\2212  input +] — komponent si šírku riadi
   sám. Stará šírka 56px z čias obyčajného políčka tlačila „+" von z riadku. */
.ci__qty .qty{width:auto}
@media (max-width:560px){
  /* Na telefóne sa päť stĺpcov vedľa seba nezmestí — samotný stepper zaberie
     viac miesta než názov kúska. Riadok sa preto zlomí na dva: hore názov
     a suma, dole ovládanie. Obrázok drží oba riadky, takže text dostane celú
     zvyšnú šírku (214 px namiesto 122 px pri displeji 390 px). */
  .ci{grid-template-columns:64px 1fr auto;grid-template-rows:auto auto;
      gap:10px;align-items:start}
  .ci__img { grid-area:1/1/3/2 }
  .ci__main{ grid-area:1/2/2/3 }
  .ci__line{ grid-area:1/3/2/4 }
  .ci__qty { grid-area:2/2/3/3; margin-top:10px }
  .ci__del { grid-area:2/3/3/4; margin-top:10px }
  .ci__img img{width:64px;height:80px}
  .ci__t{font-size:15px}
  .qty button{width:32px}
  .qty input[type=number]{width:38px;padding:10px 1px}
}
.ci__line,.ci__del{justify-self:end}
.ci__del{background:none;border:0;color:var(--muted);font-size:12.5px;
  text-decoration:underline;text-underline-offset:3px;padding:0}
.ci__del:hover{color:var(--bad)}
.sum{background:#fff;border:1px solid var(--line);padding:26px}
/* 96 px bola ručná hodnota pre 78 px hlavičku. Pri dvojriadkovej (102 px) by
   sa súhrn pri scrollovaní zasunul pod ňu. Skutočnú výšku meria shop.js. */
.sum--sticky{position:sticky;top:calc(var(--hdr-h,102px) + 18px)}
.sum__r{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:14.5px}
.sum__r--disc{color:var(--ok)}
.sum__r--gift{color:var(--gold-deep)}
.sum__r--tot{border-top:1px solid var(--ink);margin-top:10px;padding-top:14px;
  font:600 17px/1.3 var(--sans)}
.sum__note{font-size:12.5px;color:var(--muted);margin:10px 0 0;line-height:1.6}
.sum__note--goal{color:var(--gold-deep)}
.sum__edit{font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
/* Riadok súhrnu má cenu vpravo ako každý iný peňažný riadok na stránke. Bez
   layoutu sa vykreslil ako plynulá veta „1\D7  Elegantné puzdrové šaty 129,00 €"
   a pri šírke súhrnu 361 px sa zalomil skoro pri každom názve. */
.sum__i{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:4px 0}
.sum__i b{white-space:nowrap}
.sum__edit{display:inline-block;margin:8px 0 12px}
.cko__main{min-width:0}
.pointbox{margin:16px 0 4px;padding:16px;border:1px solid var(--line-gold);background:#FDFBF5}
/* voľba dopravy/platby: label.opt > radio + .opt__b (názov+lehota) + .opt__p (cena) */
.opt{display:flex;gap:14px;align-items:center;padding:15px 16px;margin:0 0 10px;
  border:1px solid var(--line);background:#fff;cursor:pointer;
  transition:border-color .25s,background .25s}
.opt:hover{border-color:var(--gold-deep)}
.opt.is-on{border-color:var(--ink);background:#FDFBF5;box-shadow:inset 0 0 0 1px var(--ink)}
.opt input{accent-color:var(--gold-deep);flex:none;width:17px;height:17px}
.opt__b{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.opt__t{font-weight:600;font-size:14.5px;text-transform:none;letter-spacing:0}
.opt__s{font-size:12.5px;color:var(--muted)}
.opt__p{margin-left:auto;font:600 14px/1.4 var(--sans);white-space:nowrap;flex:none}

/* ── ďakovacia stránka ──────────────────────────────────────────────────── */
.thanks{max-width:720px;margin:0 auto;text-align:center}
.thanks__mark{width:74px;height:74px;margin:26px auto 18px;border:1px solid var(--gold-deep);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:30px;color:var(--gold-deep)}
.thanks__no{font-family:var(--serif);font-size:21px;margin:4px 0 14px}
.thanks__p{color:var(--muted)}
.thanks__card{background:#fff;border:1px solid var(--line);padding:26px;margin:26px 0;text-align:left}

/* ── kde je objednávka ────────────────────────────────────────────────────
   Priamka štyroch krokov. Kreslí sa vodorovne na širokej obrazovke a zvislo
   na telefóne — vodorovná priamka so štyrmi slovenskými názvami sa do 375 px
   nezmestí a lámala by sa v polovici slov.

   Spojnica medzi bodkami je ::before na položke, nie samostatný prvok: musí
   končiť presne v strede predchádzajúcej bodky a to sa inak nedá udržať. */
.ostav{background:#fff;border:1px solid var(--line);
  padding:clamp(18px,2.4vw,26px);margin:26px 0;text-align:left}
.ostav__h{font-size:clamp(17px,1.6vw,20px);margin:0 0 18px}
.ostav__l{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ostav__l>li{position:relative;display:flex;align-items:center;gap:12px;
  padding:6px 0 6px 0;color:var(--muted);font-size:14px}
.ostav__b{flex:none;width:11px;height:11px;border-radius:50%;
  border:1px solid var(--line);background:#fff;position:relative;z-index:1}
/* Spojnica k predchádzajúcemu kroku. Prvá položka ju nemá. */
.ostav__l>li+li::before{content:'';position:absolute;left:5px;top:-6px;height:18px;
  width:1px;background:var(--line)}
.ostav__l>li.is-done{color:var(--ink-soft)}
.ostav__l>li.is-done .ostav__b{background:var(--gold-deep);border-color:var(--gold-deep)}
.ostav__l>li.is-done+li::before{background:var(--gold-deep)}
.ostav__l>li.is-now{color:var(--ink);font-weight:600}
.ostav__l>li.is-now .ostav__b{background:var(--gold-deep);border-color:var(--gold-deep);
  box-shadow:0 0 0 4px rgba(138,100,16,.16)}
.ostav__eta{margin:14px 0 0;font-size:13.5px;color:var(--muted)}
.ostav__note{margin:0;font-size:15px}
.ostav__trk{margin:14px 0 0;display:flex;align-items:center;gap:10px;
  flex-wrap:wrap;font-size:13.5px}
.ostav__trk code{font-family:var(--sans);letter-spacing:.06em;
  background:var(--cream);padding:4px 9px;border:1px solid var(--line-gold)}
@media (min-width:761px){
  /* Vodorovne: štyri rovnaké stĺpce a spojnica vedie doľava k susedovi. */
  .ostav__l{grid-template-columns:repeat(4,1fr);gap:0}
  .ostav__l>li{flex-direction:column;align-items:flex-start;gap:8px;padding:0 12px 0 0}
  .ostav__l>li+li::before{left:auto;right:calc(100% - 5px);top:5px;
    width:calc(100% - 12px);height:1px}
}
@media (max-width:560px){
  /* Terč odkazu na sledovanie musí zniesť palec. */
  .ostav__trk .btn{min-height:44px}
}
.thanks__docs{margin-top:18px}

/* ── blog ───────────────────────────────────────────────────────────────── */
.arts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
@media (max-width:860px){.arts{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.arts{grid-template-columns:1fr}}
.art{display:flex;flex-direction:column;background:none}
.art__img{aspect-ratio:4/3;overflow:hidden;background:var(--cream)}
/* PASCA (druhýkrát tá istá): `object-fit:cover` z výšky fotky odreže rovnako
   hore aj dole. Na módnej fotke je hore hlava a dole nohy — a keďže hlava je
   pri hornom okraji tesnejšie, zmizne prvá. Presne to sa stalo pri dlaždiciach
   kategórií a opakuje sa to všade, kde sa portrét orezáva na šírku.
   `top center` drží tvár v zábere a obetuje dolný okraj sukne. */
.art__img img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1.1s var(--ease)}
.art:hover .art__img img{transform:scale(1.045)}
.art__b{display:flex;flex-direction:column;gap:6px;padding:16px 2px}
.art__d{font:600 11px/1.4 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep)}
.art__t{font-family:var(--serif);font-size:20px;line-height:1.3;margin:0}
.art:hover .art__t{color:var(--gold-deep)}
.art__p{font-size:14px;color:var(--muted);line-height:1.65}

/* Blog na telefóne.
   Kartička na celú šírku zaberala aj s textom takmer celú obrazovku, takže
   z troch článkov bolo vidieť jeden a zvyšok sa musel hľadať palcom. Tu sa
   z nej stáva riadok: náhľad vľavo, text vpravo. Na obrazovku sa zmestia
   tri a dajú sa preletieť očami — na to zoznam článkov slúži.

   Náhľad je zámerne NA VÝŠKU (3/4). Pri širokom náhľade sa portrét oreže
   cez hlavu; pri vysokom sa oreže po stranách, kde nič nie je. Ten istý
   súbor fotky, iný orez — a tvár zostane.

   `display:block` na .art__img nie je zbytočné: na úvodnej stránke je to
   <span> (aby sa dal vnoriť do <a>), a inline prvok pomer strán ignoruje. */
@media (max-width:560px){
  .arts{gap:0}
  .art{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:start;
    padding:16px 0;border-bottom:1px solid var(--line)}
  .arts > .art:first-child{padding-top:0}
  .arts > .art:last-child{border-bottom:0}
  .art__img{display:block;aspect-ratio:3/4}
  .art__b{padding:0;gap:5px}
  .art__t{font-size:17px}
  /* Dva riadky perexu stačia na to, aby bolo jasné, o čom článok je.
     Bez orezania má jedna karta tri riadky a druhá sedem, a zoznam sa
     rozpadne na nepravidelné bloky. */
  .art__p{font-size:13px;line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
}

.post{max-width:760px;margin:0 auto}
/* Deklarácia sedela na <header>, ale h1 vnútri si berie vlastné h1{...} — na
   nadpis teda nepôsobila ani pixelom. Zacielené na samotný nadpis: vyššia
   špecificita než holé h1, takže sa uplatní zamýšľaných 44 px namiesto 52. */
.post__h h1{font-size:clamp(28px,4vw,44px)}
/* Text sa drží na 580 px, obálka a tabuľky zostávajú na 760 px .post. Pri 760
   px mal riadok medián 96 znakov (17 zo 17 plných riadkov nad stropom 80);
   pri 580 px je medián 72 a ani jeden riadok neprekročí 80. Merané na
   /blog/kedy-sa-oplati-minut-viac; pod 760 px šírky okna sa nič nemení. */
.post__lead{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.6;
  color:var(--ink-soft);max-width:580px;margin-inline:auto}
.post__cover{margin:26px 0}
.post__cover img{width:100%;height:auto}
.post__body{font-size:16.5px;line-height:1.8;max-width:580px;margin-inline:auto}
.post__body h3{margin-top:1.6em}
.post__body .fig{margin:26px 0}
.post__body figcaption{font-size:12.5px;color:var(--muted);margin-top:8px}
.rte{line-height:1.8;color:var(--ink)}
/* Záchranná sieť pre popisy prevzaté z Upgates: nesú si inline zlatú #DAA520,
   ktorá dáva na svetlom kontrast 2,11:1. Inline štýl prebije čokoľvek v tomto
   súbore, preto !important. SPRÁVNE miesto opravy je import — kým sa popisy
   nečistia pri preberaní, ten istý problém sa vráti pri každom novom kúsku. */
/* Zacielené na FARBU TEXTU, nie na ľubovoľný výskyt zlatej v inline štýle.
   Široký selektor chytal aj background-color: pri zlatom tlačidle v článku tak
   stmavil text na zlatom pozadí a kontrast spadol na 2,40:1. Zlatý gombík má
   mať naopak atramentový text — #15120C na #DAA520 dáva 8,35:1. */
.rte [style*="color:#daa520" i],.rte [style*="color: #daa520" i],
.rte [style*="color:#d4af37" i],.rte [style*="color: #d4af37" i]{color:var(--gold-deep)!important}
.rte [style*="background-color:#daa520" i],.rte [style*="background-color: #daa520" i],
.rte [style*="background:#daa520" i],.rte [style*="background: #daa520" i]{color:var(--ink)!important}
/* ── medzinadpisy v texte ────────────────────────────────────────────────
   ZLATÉ, ako boli — ale v odtieni, ktorý sa dá prečítať. Pôvodné #DAA520
   z Upgates dávalo na svetlom 2,11:1; --gold-deep #8A6410 dáva 5,37:1 na
   bielej a opticky je to ten istý odtieň, len o niečo hlbší.

   Vlásočnica pod nadpisom nie je ozdoba: dlhý popis bez nej splýva do jednej
   plochy a oko nemá kde odpočívať. Nekreslí sa cez celú šírku — len po text,
   preto inline-block. */
.rte h2,.rte h3{font-family:var(--serif);color:var(--gold-deep);
  margin:2em 0 .6em;line-height:1.25;font-weight:500;letter-spacing:.005em}
.rte h2{font-size:clamp(21px,2.2vw,26px)}
.rte h3{font-size:clamp(17px,1.7vw,20px)}
.rte h2::after,.rte h3::after{content:'';display:block;width:44px;height:1px;
  margin-top:10px;background:var(--gold-deep);opacity:.55}
/* Prvý nadpis nemá odsadzovať od odseku, ktorý pred ním nie je. */
.rte>h2:first-child,.rte>h3:first-child{margin-top:0}

/* Úvodný odsek nesie hlas kúsku — dostane o kúsok viac priestoru než zvyšok.
   Editoriálny zvyk: text sa otvára, nezačína sa rovno technickým popisom. */
.rte>p:first-child{font-size:clamp(16px,1.5vw,17.5px);line-height:1.75;
  color:var(--ink);max-width:60ch}
/* Riadok dlhší než ~70 znakov sa zle číta — oko stratí začiatok nasledujúceho. */
.rte p,.rte ul{max-width:68ch}

.rte img{margin:16px 0}
/* Miesto na detailné zábery: fotka s popiskou, ktorá vysvetlí, čo je na nej
   vidieť. Bez <figure> sa obrázok v texte tvári ako preklep. */
.rte figure{margin:26px 0}
.rte figure img{margin:0;width:100%;display:block}
.rte figcaption{margin-top:8px;font:400 12.5px/1.6 var(--sans);color:var(--muted);
  border-left:2px solid var(--line-gold);padding-left:10px}

.rte ul{padding-left:22px}
.rte ul li{margin:8px 0}
/* Zlatá odrážka cez ::marker, NIE cez list-style:none + vlastný ::before.
   Safari zoznamu bez list-style odoberie sémantiku a čítačka prestane hlásiť
   „zoznam, 4 položky" — pri popise s výpočtom vlastností je to práve tá
   informácia, ktorú človek potrebuje. Takto sa mení len farba značky. */
.rte ul li::marker{color:var(--gold-deep)}
/* Tabuľky v článkoch a podmienkach. Generované (tabuľka úrovní klubu) si
   nesú inline štýly kvôli e-mailom; toto je záchranná sieť pre tabuľky,
   ktoré raz redakcia napíše rukou — bez nej ostane surový prehliadačový
   vzhľad: tučné vycentrované hlavičky, žiadne linky, žiadny vzduch. */
.rte table{border-collapse:collapse;margin:18px 0;font-size:14.5px;line-height:1.5;
  width:100%;max-width:60ch}
.rte th{padding:0 14px 8px 0;border-bottom:1px solid rgba(21,18,12,.28);text-align:left;
  vertical-align:bottom;font:600 11.5px/1.4 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.rte td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top}

/* Tabuľka bez hlavičkového riadka (materiál: vľavo názov údaja, vpravo
   hodnota) je iný tvar než tabuľka s dátami a zaslúži si iné zaobchádzanie:
   prvý stĺpec sa správa ako menovka — drobné verzálky v zlatej, ako všetky
   ostatné menovky na webe.

   `tr:has(td)` je tu nutné. Bez neho by pravidlo chytilo aj PRVÚ bunku
   hlavičkového riadka v tabuľke cookies (ochrana osobných údajov) a v
   obchodných podmienkach — jedna hlavička by bola zlatá a široká 34 %,
   ostatné tlmené. Riadok, ktorý obsahuje td, je vždy dátový, nie hlavičkový. */
.rte table tr:has(td)>th:first-child{width:34%;padding:11px 18px 11px 0;
  border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--gold-deep);letter-spacing:.12em}
.rte table tr:last-child>*{border-bottom:0}

/* ── recenzie na detaile ────────────────────────────────────────────────── */
.rev__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.rev__avg{font-family:var(--serif);font-size:34px}
.rev__stars,.revf__stars{color:var(--gold-deep);letter-spacing:.2em}
.rev__list{display:flex;flex-direction:column;gap:0;margin-top:14px}
.rev__i{padding:18px 0;border-top:1px solid var(--line)}
.rev__meta{font-size:12.5px;color:var(--muted);margin-top:4px}
.rev__t{font-weight:600}
.rev__b{margin:6px 0 0;font-size:14.5px;line-height:1.65}
.rev__verified{color:var(--ok);font-size:12px}

/* ── vyhľadávanie, účty, diskusia — zdedené panely ─────────────────────── */
/* .inp, nie .srch__i: HTML na stránke hľadania nesie .inp (a musí — .srch__i
   je pole v hlavičke a odoberá rám aj pozadie). Toto pravidlo dovtedy nemalo
   na čo sadnúť, preto pole vyzeralo inak, než sa myslelo. */
.srch--page .inp{width:100%;font-size:17px}
.auth{max-width:440px;margin:30px auto}
.auth__lead{color:var(--muted);margin:0 0 22px}
.auth__f{margin-bottom:16px}
.auth__alt{margin-top:20px;font-size:14px;color:var(--muted)}
.acct-page h1{margin-bottom:8px}
/* Mriežka sa riadi počtom panelov, nie pevnou trojkou. Pri natvrdo troch
   stĺpcoch a dvoch paneloch ostávala vpravo prázdna tretina riadku (393 px pri
   1440, 341 px pri 1100) a horná časť stránky opticky visela vľavo, kým panely
   pod ňou boli na plnú šírku. Prospeje to aj Vernostnému a Partnerskému
   programu — obe majú tiež po dva panely. */
.acct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:18px;margin-top:24px}
/* Pravidlo pre dlaždice-odkazy je tu ZÁMERNE ZMAZANÉ, nie zabudnuté. Pôvodné
   `.acct-grid a` bolo pozostatkom po starom návrhu, kde mriežka obsahovala
   priamo odkazy; dnes obsahuje <section class="panelbox"> a pravidlo už len
   prebíjalo štýl tlačidiel vnútri panelov — „Moje objednávky →" sa vykreslilo
   ako sivý blok cez celú šírku namiesto kompaktného tlačidla so zlatým rámom.
   Nenahrádzame ho zúženou verziou: tá by nesadla na nič a mýlila by ďalšieho
   čitateľa rovnako ako pôvodná. */
.tbl-acct,.ctbl,.tbl-mini{width:100%;border-collapse:collapse;font-size:14px}
.tbl-acct th,.ctbl th,.tbl-mini th{text-align:left;font:600 11px/1.4 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  border-bottom:1px solid var(--line);padding:10px 8px}
.tbl-acct td,.ctbl td,.tbl-mini td{padding:11px 8px;border-bottom:1px solid var(--line)}
.tblwrap,.tbl-wrap{overflow-x:auto}
/* „prečo u nás" pás pod výpisom — tri pokojné karty vedľa seba */
/* auto-fit, nie natvrdo tri stĺpce: /kategorie do pásu dáva tri karty, /blog
   len jednu (druhá visí na wholesale.url, ktoré je natrvalo prázdne), takže
   napravo od nej ostávalo 786 px prázdneho miesta. Počet stĺpcov sa teraz
   riadi počtom kariet. */
.rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(12px,1.6vw,20px);margin:clamp(36px,6vw,60px) 0 8px}
@media (max-width:860px){.rail{grid-template-columns:1fr}}
.rbn{display:flex;flex-direction:column;gap:6px;background:var(--cream);
  border-top:2px solid var(--gold);padding:22px 24px;margin:0}
.rbn--paper{background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold)}
.rbn h3{margin:0;font-size:19px}
.rbn p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.6}
.rbn a{margin-top:auto;padding-top:8px;font:600 11.5px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.rbn__k{font:600 10.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rbn__v{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--gold-deep)}
/* PASCA: .vspec / .vspec--cisla v CSS CHÝBALI (zdedené z iného návrhu),
   takže trojica čísel na /vernostni-program spadla na prehliadačové <dl> —
   názov, odsadená hodnota, riadok po riadku, „ako prekopírovaná tabuľka".
   Tri karty vedľa seba: číslo veľké serifom, popis drobným verzálkami. */
.vspec-pub{margin:22px 0 8px}
.vspec--cisla{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0}
.vspec--cisla>div{background:#fff;border:1px solid var(--line);border-top:2px solid var(--gold);
  padding:20px 16px;text-align:center}
.vspec--cisla dt{font:600 10.5px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin:0}
.vspec--cisla dd{margin:8px 0 0;font-family:var(--serif);font-size:clamp(26px,4.4vw,34px);
  line-height:1.1;color:var(--gold-deep)}
.vspec--cisla dd span{font-size:.5em;color:var(--muted);margin-left:.15em}
@media (max-width:640px){
  .vspec--cisla{grid-template-columns:1fr;gap:10px}
  .vspec--cisla>div{display:flex;align-items:baseline;justify-content:space-between;
    gap:14px;text-align:left;padding:14px 16px}
  .vspec--cisla dd{margin:0;font-size:26px}
}

/* Grafický rebrík úrovní — vizuálny sprievodca nad tabuľkou: päť stupňov,
   ktoré rastú, s vlastnou úrovňou zvýraznenou. Tabuľka pod ním zostáva ako
   presný rozpis; toto je obraz, ktorý sa dá prečítať za dve sekundy. */
.tstep{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;align-items:end;
  margin:18px 0 26px}
.tstep__i{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.tstep__bar{width:100%;background:linear-gradient(180deg,var(--gold) 0%,var(--gold-deep) 100%);
  opacity:.30;border-radius:2px 2px 0 0;transition:opacity .3s}
.tstep__i.je .tstep__bar{opacity:1;box-shadow:0 0 0 1px var(--gold-deep)}
.tstep__n{font:600 10px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted)}
.tstep__i.je .tstep__n{color:var(--gold-deep)}
.tstep__v{font-family:var(--serif);font-size:15px;color:var(--ink)}
.tstep__od{font-size:11px;color:var(--muted)}
@media (max-width:560px){
  .tstep{gap:5px}
  .tstep__n{font-size:8.5px;letter-spacing:.06em}
  .tstep__v{font-size:13px}
  .tstep__od{font-size:10px}
}

/* Rebrík úrovní klubu. Dovtedy tu bol päťstĺpcový grid z iného návrhu —
   `<section class="tiers">` sa ním menila na mriežku, do ktorej padal nadpis
   aj odseky ako samostatné bunky, a tabuľka sa tlačila do pätiny šírky. */
.tiers{margin:26px 0}
.tiers__wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:14px 0}
.tiers__t{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.tiers__t th{font:600 11px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:0 12px 8px 0;border-bottom:1px solid var(--line)}
.tiers__t td{padding:12px 12px 12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tiers__t tbody tr.je{background:#FDFBF5}
.tiers__t tbody tr.je td{border-bottom-color:var(--line-gold)}
.tiers__t td b{color:var(--gold-deep)}
.tiers__p{font-size:13.5px;color:var(--muted);margin:8px 0 0;line-height:1.6}
.tiers__vy{display:inline-block;margin-left:8px;font:600 10px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);
  border:1px solid var(--line-gold);padding:4px 7px;vertical-align:middle}
/* Výhody mojej úrovne v účte — zoznam, nie tabuľka: je to päť viet o mne. */
.klubvyh{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:7px;font-size:14px}
.klubvyh li{padding-left:20px;position:relative;line-height:1.5}
.klubvyh li::before{content:"◆";position:absolute;left:0;top:0;
  font-size:9px;line-height:1.9;color:var(--gold)}
/* Klubový pruh hore: rovnaký tvar ako verejný, len zlatý rám navyše, aby
   bolo na prvý pohľad vidieť, že to hovorí o TEJTO zákazníčke. */
.topbar--klub{background:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)}
/* Pás rozpracovaného košíka na homepage. */
.kpas{display:flex;gap:14px;align-items:center;padding:11px clamp(16px,3vw,40px);
  background:#FDFBF5;border-bottom:1px solid var(--line-gold);color:var(--ink);
  font-size:14px;text-decoration:none!important}
.kpas:hover .kpas__go{color:var(--ink)}
.kpas__t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kpas__t b{color:var(--gold-deep)}
.kpas__go{flex:none;font:600 11.5px/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep)}
.kpas__x{flex:none;width:30px;height:30px;border:0;background:none;color:var(--muted);
  font-size:18px;cursor:pointer;line-height:1}
.kpas__x:hover{color:var(--ink)}
@media (max-width:560px){
  /* Na telefóne si výzva („Dokončiť nákup") a krížik vezmú 171 z 358 px,
     takže na názov kúska zostane 159 px — a pás potom hlási len „V košíku
     v…", čo nehovorí nič. Práve názov je pritom to jediné, čo má pás
     povedať. Preto sa zalomí: text dostane celý prvý riadok, výzva
     a krížik idú pod neho. Pás narastie o 20 px a je zrazu čitateľný. */
  .kpas{flex-wrap:wrap;row-gap:2px;column-gap:10px;padding-top:9px;padding-bottom:9px}
  .kpas__t{flex:1 1 100%}
  .kpas__go{order:2}
  .kpas__x{order:3;margin-left:auto;height:24px}
}

/* Onboarding /vitajte — jedna obrazovka, ktorá spustí personalizáciu. */
.vita{max-width:620px;margin:0 auto;padding:10px 0 30px}
.vita__h{text-align:center;margin-bottom:26px}
.vita__h img{margin:0 auto 12px}
.vita__h h1{font-size:clamp(26px,4vw,34px)}
.vita__h p{color:var(--muted);max-width:46ch;margin:8px auto 0;line-height:1.65}
.vita__q{border:0;padding:0;margin:0 0 24px}
.vita__q legend{font:600 12px/1.4 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.vita__cta{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:30px}
.vita__skip{font-size:13.5px;color:var(--muted);text-decoration:underline}
.vita__skip:hover{color:var(--ink)}

/* Živé vyhľadávanie pod lupou.
   NEDÁVAJTE sem .srchd__panel{position:relative} — bolo tu a potichu rušilo
   position:absolute z hlavičky. Panel tým prestal byť prekryvom a stal sa
   prvkom v toku: po klepnutí na lupu narástla hlavička na mobile o 118 px
   a celý obsah stránky sa posunul nadol. */
/* right = padding panela, nie 0: absolútne dieťa sa pozicuje voči padding boxu,
   takže našepkávač visel na okraji okna, kým pole aj tlačidlo „Hľadať" v tom
   istom paneli končili o 16 px (mobil) až 40 px (desktop) skôr. */
.srchd__res{position:absolute;top:calc(100% + 6px);right:clamp(16px,4vw,40px);
  width:340px;max-width:calc(100vw - 2*clamp(16px,4vw,40px));
  background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);
  z-index:70;display:flex;flex-direction:column;padding:6px}
.srchd__it{display:flex;gap:10px;align-items:center;padding:8px;color:var(--ink)}
.srchd__it:hover,.srchd__it:focus{background:#F4EFE5}
.srchd__it img{flex:none;width:44px;height:59px;object-fit:cover;background:#EEE8DA}
.srchd__tt{flex:1;font-size:13.5px;line-height:1.35}
.srchd__it b{font-size:13px;color:var(--gold-deep);white-space:nowrap}
/* Posledný riadok našepkávača mal 28,5 px, kým položky nad ním majú 75 px.
   Je to plnohodnotná cesta ďalej, nie pätička zoznamu. */
.srchd__all{padding:0 8px;min-height:44px;display:flex;align-items:center;
  justify-content:center;text-align:center;font:600 11.5px/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);
  border-top:1px solid var(--line);margin-top:4px}
.srchd__none{padding:12px 10px;font-size:13px;color:var(--muted);margin:0}

/* ── Prázdny stav hľadania: ponuka namiesto prázdna ───────────────────────
   Panel po otvorení ukáže, čo sa dá hľadať (slová z reálnych názvov kúskov)
   a cesty do kategórií. Návrhy sú odkazy, nie tlačidlá — fungujú teda aj bez
   JavaScriptu a dajú sa otvoriť do nového panela. */
.srchd__lbl{margin:10px 8px 6px;font:600 10.5px/1 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.srchd__lbl:first-child{margin-top:4px}
.srchd__chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 8px}
.srchd__chip{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 12px;
  border:1px solid var(--line);font-size:13px;color:var(--ink);background:var(--paper);
  transition:border-color .25s var(--ease),color .25s var(--ease)}
.srchd__chip:hover,.srchd__chip:focus-visible{border-color:var(--gold);color:var(--gold-deep)}
.srchd__chip i{font-style:normal;font-size:11px;color:var(--muted)}
.srchd__chip--cat{background:var(--cream)}

/* Na telefóne je hľadanie celá obrazovka, nie rozbaľovacia škatuľka.
   Panel v hlavičke má na 375 px sotva 300 px na výsledky s fotkami — palcom
   sa v tom nedá pracovať. `position:fixed` funguje, lebo `.hdr` má
   `backdrop-filter` vypnutý pri otvorenom hľadaní (rovnaká pasca ako pri
   mobilnom menu: filter robí z hlavičky containing block pre fixed). */
@media (max-width:860px){
  .hdr:has(.srchd[open]){backdrop-filter:none}
  .srchd[open] .srchd__panel{position:fixed;inset:0;z-index:60;display:grid;
    grid-template-columns:1fr auto;align-content:start;gap:10px;
    background:var(--paper);padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .srchd[open] .srchd__res{position:fixed;left:0;right:0;top:72px;bottom:0;z-index:60;
    max-height:none;overflow-y:auto;border:0;box-shadow:none;
    background:var(--paper);padding:0 8px calc(24px + env(safe-area-inset-bottom))}
  .srchd[open] .srchd__i{font-size:16px}   /* < 16 px = iOS pri fokuse priblíži stránku */
  .srchd__it{padding:10px 8px}
  .srchd__it img{width:56px;height:75px}
  .srchd__chip{min-height:44px;font-size:14px}
}

/* Otázka Dore s kontextom (detail kúska, šatník). */
.doraask{display:inline-flex;gap:8px;align-items:center;margin-top:14px;
  /* Nepriehľadný --gold-deep, nie --line-gold: výplň #FDFBF5 je od papiera
     nerozoznateľná (1,03:1), takže rám je jediná hranica prvku — a mal
     kontrast 1,76:1 pri norme 3:1. #8A6410 na #FDFBF5 dáva 5,19:1. */
  padding:10px 16px;border:1px solid var(--gold-deep);background:#FDFBF5;
  color:var(--gold-deep);font:600 12px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer;border-radius:var(--r);
  transition:border-color .3s,color .3s}
.doraask:hover{border-color:var(--gold-deep);color:var(--ink)}

/* Personalizácia: rada s veľkosťou na detaile + osobný šatník na /pre-vas. */
.fitchip{display:inline-flex;gap:7px;align-items:center;margin:0 0 10px;
  padding:7px 12px;background:#FDFBF5;border:1px solid var(--line-gold);
  font-size:13px;color:var(--gold-deep)}
.pvklub{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin:14px 0 4px;
  font-size:14px;color:var(--ink-soft)}
.pvklub__t{font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);border:1px solid var(--line-gold);padding:6px 10px}
/* „Moje body →" je jediná cesta z klubového riadka do vernostného programu;
   ako holý <a> mal terč 84,3 × 23,1 px. align-self, lebo .pvklub zarovnáva
   na účiaru — inline-flex položka by inak riadok rozhodila. */
.pvklub a{color:var(--gold-deep);display:inline-flex;align-items:center;
  align-self:center;min-height:44px}
.pvsec{margin-top:36px}
.pvwl{position:relative}
.pvwl__drop{margin:6px 0 0;font:600 12.5px/1.4 var(--sans);color:var(--ok)}

/* Ako fungujú poukazy — tri kroky na /darcekove-poukazy. */
.gvhow__h{margin:44px 0 0;font-family:var(--serif);font-size:clamp(20px,2.4vw,26px)}
.gvhow__h+.gvhow{margin-top:18px}
.gvhow{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:44px 0 20px}
@media (max-width:760px){.gvhow{grid-template-columns:1fr;gap:18px}}
.gvhow__i{display:flex;gap:14px;align-items:flex-start}
.gvhow__i>b{flex:none;width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;border:1px solid var(--line-gold);border-radius:50%;
  font:600 14px/1 var(--sans);color:var(--gold-deep)}
.gvhow__i h3{font-size:16.5px;margin:6px 0 4px}
.gvhow__i p{font-size:13.5px;color:var(--muted);line-height:1.65;margin:0}
/* Pravidlá .rprog / .rprog i sú zmazané spolu s prvkom v clanek.php: `.rprog i`
   štýlovalo potomka, ktorý v HTML neexistoval, a žiadne animation-timeline
   pravidlo k tomu nikdy nepribudlo — na článku ležal 4px sivý pásik, ktorý sa
   nikdy nenaplnil. Dôvod, prečo sa nedoplnil: hlavička je sticky (103 px,
   z-index 60), takže umiestnenie ukazovateľa je návrhové rozhodnutie. */
.loyf{background:#FDFBF5;border:1px solid var(--line-gold);padding:14px 16px;margin:12px 0}
/* space-between tu bolo neúčinné: pole si nárokuje 100 % šírky, tlačidlo si
   pridá svoju, súčet je vždy väčší než kontajner, takže voľné miesto je záporné
   a rozostup sa neuplatní vôbec — číslo bodov a „Uplatniť" sa dotýkali. */
.loyf__r{display:flex;gap:10px;align-items:center;font-size:14px;padding:3px 0}
.loyf__r .inp{width:auto;flex:0 1 120px}

/* diskusia */
.disk{margin-top:34px}
.disk__head{display:flex;align-items:baseline;gap:12px}
.disk__list{display:flex;flex-direction:column}
.disk__i{padding:16px 0;border-top:1px solid var(--line)}
.disk__who{font-weight:600;font-size:14px}
.disk__meta{font-size:12px;color:var(--muted)}
.disk__b{font-size:14.5px;margin-top:6px;line-height:1.65}
.disk__reply{margin:10px 0 0 22px;padding-left:14px;border-left:2px solid var(--line-gold)}
.disk__form{margin-top:18px}
.disk__msg{font-size:13.5px;color:var(--muted)}
/* Formulár diskusie: štyri triedy bez pravidla. `.disk__row` mal byť dvojstĺpec,
   ale bežal na display:block, takže polia Meno aj E-mail boli 1160 px široké.
   Veta o súhlase a hláška „zatiaľ žiadne otázky" mali plnú veľkosť bežného
   textu namiesto drobnej poznámky. */
.disk__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){.disk__row{grid-template-columns:1fr}}
.disk__send{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
.disk__note{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.disk__empty{margin:14px 0 0;font-size:14px;color:var(--muted)}

/* darčekové poukazy — konfigurátor; samotná grafika poukazu je obrázok */
/* container-type: poukaz sa prispôsobuje ŠÍRKE OBALU, nie okna — tá istá
   šablóna žije v konfigurátore (úzky stĺpec) aj na vlastnej stránke. */
.gv-w{max-width:860px;margin:0 auto;container-type:inline-size}

/* ── TLAČ POUKAZU ─────────────────────────────────────────────────────────
   Tlačidlo „Vytlačiť" existovalo, ale @media print v CSS CHÝBALO — na papier
   šla celá stránka aj s hlavičkou, menu, pätičkou a chatom. Poukaz je darček:
   na papieri musí byť LEN on, na stred, v plnej farbe.
   `print-color-adjust` je nutné — prehliadače inak tmavé plochy pri tlači
   zahodia a z atramentového certifikátu ostane biely obdĺžnik. */
@media print{
  body{background:#fff!important}
  .topbar,.hdr,.ftr,.nlband,.dora,.kpas,.testbar,.gvpage__act,.crumbs,
  /* .cpill sa už neskrýva: kým bola plávajúcou pilulkou, na papieri prekážala.
     Dnes nesie obsah — riadky „Analytika: prijaté/odmietnuté" na stránke Cookies
     a značku „toto zariadenie" v účte. Vytlačený doklad o súhlase by bez nich
     stratil práve to, čo dokladá. Na poukaze sa nevyskytuje. */
  .breadcrumbs,#added,.cbar{display:none!important}
  main,.wrap,.gvpage{margin:0!important;padding:0!important;max-width:none!important}
  .gv-w{max-width:none}
  .gv{max-width:none;width:100%;box-shadow:none;
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    page-break-inside:avoid;break-inside:avoid}
  .gv *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{margin:14mm}
}
.gvcfg{background:#fff;border:1px solid var(--line);padding:24px}
.gvcfg__h{font-family:var(--serif);font-size:20px;margin-bottom:12px}
/* `.gvline` je <details> s formulárom venovania. Ako flex bez určeného smeru
   platilo „vedľa seba“, takže rozbaľovací nadpis aj celý trojpoľový formulár
   sa uložili do jedného riadka: formulár potrebuje ~380 px, k dispozícii má
   nanajvýš 317 px a vytiekol doprava cez stepper, sumu aj krížik. A dialo sa
   to hneď pri každom čerstvo pridanom poukaze, lebo blok je vtedy otvorený. */
.gvline{display:block;padding:9px 0;font-size:14.5px}
.gvline__f{margin-top:6px}
.gvpage{max-width:720px;margin:0 auto;text-align:center}
/* Centruje sa len samotný poukaz a lišta akcií pod ním. Bez tohto sa text-align
   dedil aj do formulára úpravy: menovky polí stáli vycentrované nad poľami,
   ktoré majú text vľavo — a každá na inej pozícii, lebo sa centrovala na
   vlastnú šírku. Hlášky .okbox/.warnbox to isté. */
.gvpage .panelbox,.gvpage .okbox,.gvpage .warnbox{text-align:left}
/* Tri tlačidlá bez mriežky stáli 4,2 px od seba (medzera medzi inline prvkami)
   a po zalomení sa druhý riadok dotýkal prvého. .btnrow sa použiť nedá —
   má margin:10px 0 0 a zarovnala by tlačidlá doľava. */
.gvpage__act{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:22px}
.gvpage__act .btn{min-height:44px}
/* KOLÍZIA MIEN, vyriešená zmazaním: `.pcode-row{display:flex}` a `.pcode{flex:1}`
   tu stáli pre uplatnenie poukazu v košíku, ale ten používa `.cpn__f`. Jediné
   miesta s triedou .pcode sú partnerské stránky, ktoré si ju štýlujú vlastným
   <style> — obe pravidlá na ne teda ticho dopadali a nič nerobili. */
.cpn__f{display:flex;gap:10px}

/* ── toast po pridaní do košíka ─────────────────────────────────────────── */
.added{position:fixed;right:20px;bottom:20px;z-index:90;background:var(--ink);
  color:var(--cream);padding:20px 22px;max-width:340px;box-shadow:var(--shadow);
  border-top:2px solid var(--gold)}
.added__h{margin:0 0 4px;font-family:var(--serif);font-size:17px;color:#fff}
.added__free{margin:0 0 6px;font-size:13px;color:var(--gold)}
.added__act{display:flex;align-items:center;gap:12px;margin-top:10px}
.added .btn{border-color:var(--gold);color:var(--gold)}
.added .btn:hover{background:var(--gold);color:var(--ink)}
.added__x{position:absolute;top:8px;right:8px;width:30px;height:30px;background:none;
  border:0;color:rgba(244,239,229,.6)}
.added__x::before{content:'\D7 ';font-size:20px}
.added__x:hover{color:#fff}

/* ── cookie lišta ───────────────────────────────────────────────────────── */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--ink);
  color:var(--cream);box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.cbar__in{max-width:var(--wrap);margin:0 auto;padding:18px clamp(16px,4vw,40px);
  display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cbar__txt{flex:1;min-width:260px}
.cbar__h{font-family:var(--serif);font-size:17px;margin:0 0 4px;color:#fff}
.cbar__p{font-size:13px;margin:0;color:rgba(244,239,229,.75);line-height:1.55}
.cbar__p a{color:var(--gold)}
.cbar__act{display:flex;gap:10px;flex-wrap:wrap}
.cbar .btn{border-color:rgba(244,239,229,.4);color:var(--cream)}
.cbar .btn--cta{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.cbar .btn--cta:hover{background:var(--cream);border-color:var(--cream)}
.cbar__more{font-size:12.5px;color:rgba(244,239,229,.6);text-decoration:underline}
.cbar__b{display:flex;gap:8px}
body.has-cbar{padding-bottom:140px}
/* Menovka „toto zariadenie" v účte a v nastaveniach cookies. Bola napísaná ako
   plávajúca pilulka ukotvená k rohu okna — takže nestála pri názve zariadenia,
   ale visela nad obsahom a putovala s rolovaním. Plávajúcu pilulku pritom nikto
   nevytvára: obe použitia v PHP sú vložené menovky. */
.cpill{display:inline-block;vertical-align:middle;margin-left:8px;
  background:var(--ink);color:var(--cream);border:1px solid rgba(244,239,229,.3);
  border-radius:99px;padding:3px 10px;font:600 10.5px/1.4 var(--sans);
  letter-spacing:.1em;text-transform:uppercase}
.cpill.is-on{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}

/* ── pomocné pre skeleton/carousel (JS) ─────────────────────────────────── */
.skel{display:block;aspect-ratio:3/4;background:linear-gradient(100deg,var(--cream) 40%,#fff 50%,var(--cream) 60%);
  background-size:200% 100%;animation:skel 1.4s infinite}
@keyframes skel{to{background-position:-200% 0}}
.carou{overflow-x:auto;scrollbar-width:none}
.carou::-webkit-scrollbar{display:none}
.carou__rail{display:flex;gap:18px;min-width:min-content}
.carou__nav{display:flex;gap:10px;align-items:center}

/* stránky CMS a texty */
.page-h{margin:26px 0 8px}
.lead{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink-soft);line-height:1.6}

/* tabuľky veľkostí a špecifikácií na detaile */
.specs{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
.specs th{text-align:left;font-weight:600;padding:9px 10px;border-bottom:1px solid var(--line);
  width:40%;color:var(--ink-soft)}
.specs td{padding:9px 10px;border-bottom:1px solid var(--line)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.grid-2{grid-template-columns:1fr}}

/* ═══ vnútorné stránky — pokračovanie systému ═══════════════════════════ */

/* detail produktu */
.pd{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);
  gap:clamp(24px,4vw,64px);align-items:start;margin-top:10px}
@media (max-width:900px){.pd{grid-template-columns:1fr}}
.gal__main{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--cream)}
.gal__main img{width:100%;height:100%;object-fit:cover;object-position:top center}
.gal__main--wide{aspect-ratio:3/2}
.gal__main--wide img{object-fit:contain}
/* Darčekový poukaz: jeden stĺpec bez galérie. Šírka je zámerne menšia než
   celá mriežka — formulár s venovaním sa cez 1160 px číta zle a náhľad karty
   by sa roztiahol do plagátu. */
.pd--gv{grid-template-columns:minmax(0,1fr);max-width:660px;margin-inline:auto}
.pd--gv .pd__media{display:none}
.gal__thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:8px}
.gal__thumbs a,.gal__thumbs button{display:block;aspect-ratio:3/4;overflow:hidden;
  border:1px solid var(--line);background:var(--cream);padding:0;cursor:pointer}
.gal__thumbs img{width:100%;height:100%;object-fit:cover;object-position:top center}
.gal__thumbs .is-on{border-color:var(--ink)}
.pd h1{font-size:clamp(24px,3vw,36px);margin-bottom:6px}
.pd__sku{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pd__price{display:flex;align-items:baseline;gap:14px;margin:16px 0 2px}
.pd__price .price{font-size:24px}
.pd__price .price--before{font-size:16px}
.pd__vat{font-size:12px;color:var(--muted)}
.buy{display:flex;gap:12px;align-items:stretch;margin:20px 0 8px;flex-wrap:wrap}
/* Elegantný počítadlový prvok: [\2212   1  +] v jednej linke, rovnako vysoký ako
   tlačidlo vedľa. Platí na detaile aj v košíku (rovnaká kostra .qty). */
.qty{display:flex;align-items:stretch;border:1px solid var(--line);background:#fff;
  border-radius:var(--r);overflow:hidden}
.qty button{width:46px;border:0;background:none;color:var(--ink);font-size:19px;
  line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .25s,color .25s}
.qty button:hover{background:var(--ink);color:var(--gold)}
.qty input[type=number]{width:52px;border:0!important;box-shadow:none!important;
  /* 16px z toho istého dôvodu ako pri ostatných poliach: pod 16 px iOS Safari
     pri fokuse priblíži stránku a v košíku sa už neoddiali. */
  border-radius:0;text-align:center;font:600 16px/1 var(--sans);padding:12px 2px;
  -moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0}
/* Hlavné CTA na detaile je plné — atrament so zlatým hoverom, žiadny drôtik. */
.buy .btn{flex:1;min-width:200px;background:var(--ink);color:var(--cream);
  border-color:var(--ink);padding:16px 30px;font-size:13px}
.buy .btn:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
/* \D7  na odobratie riadka v košíku */
.ci__del button[aria-label]{width:34px;height:34px;border:1px solid transparent;
  background:none;color:var(--muted);font-size:19px;line-height:1;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:all .25s}
.ci__del button[aria-label]:hover{border-color:var(--bad);color:var(--bad)}
.packs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.pack__u{padding:9px 14px;border:1px solid var(--line);font-size:13.5px;background:#fff}
.pack__u.is-on{border-color:var(--ink);background:var(--ink);color:var(--gold)}

/* krížový predaj / doplňte outfit */
.xsell{margin-top:clamp(40px,6vw,72px)}
.xsell__head{margin-bottom:4px}
.xsell__sub{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.xsell__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,20px)}
@media (max-width:1080px){.xsell__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.xsell__grid{grid-template-columns:repeat(2,1fr)}}
.xs{display:flex;flex-direction:column}
.xs__img{aspect-ratio:3/4;overflow:hidden;background:var(--cream)}
.xs__img img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 1.1s var(--ease)}
.xs:hover .xs__img img{transform:scale(1.045)}
.xs__body{padding:12px 2px}
.xs__t{font-family:var(--serif);font-size:15px;line-height:1.35}
.xs__p{font:600 14px/1.6 var(--sans)}
.xs__u,.xs__spec{font-size:12px;color:var(--muted)}

/* výpis kategórie: filtre a načítať ďalšie */
.catlay{margin-top:6px}
.tstrip{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;margin:14px 0 22px}
.fbar{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;margin:8px 0 20px;
  padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fgrp{display:flex;flex-direction:column;gap:8px}
/* Skupina je <details>. Na širokej obrazovke sa nemá tváriť ako rozbaľovadlo:
   summary vyzerá presne ako predtým obyčajný <span> — bez značky, bez kurzora.
   Zavrieť sa nedá, lebo shop.js na desktope žiadnu skupinu nezatvára. */
.fgrp__t{font:600 10.5px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);list-style:none}
.fgrp__t::-webkit-details-marker{display:none}
/* Zvolené hodnoty vedľa názvu skupiny — zmysel majú až pri zavretej skupine
   na telefóne, preto sú do 560 px skryté (inak by dublovali označené chipy). */
.fgrp__sum{display:none}
.fgrp__chips{display:flex;gap:6px;flex-wrap:wrap}
.fgrp__chips a{padding:7px 12px;border:1px solid var(--line);font-size:12.5px;background:#fff}
.fgrp__chips a.is-on{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.fgrp__chips a:hover{border-color:var(--gold-deep)}
.fchip__n{color:var(--muted);font-size:11px}
.fclear{align-self:center;font-size:12.5px;color:var(--muted);text-decoration:underline}
.more{text-align:center;margin:30px 0 6px}
.more__n{display:block;font-size:12.5px;color:var(--muted);margin-bottom:10px}

/* košík — zoznam */
.cartlist{list-style:none;margin:0;padding:0}
.cartlist__foot{display:flex;justify-content:space-between;align-items:center;
  gap:14px;margin-top:16px;flex-wrap:wrap}
.ci__main{min-width:0}
.cpn{margin:16px 0}
/* Zľavový kód a venovanie boli jediné dve rozbaľovadlá na webe bez vlastného
   štýlu — padli na predvoľbu prehliadača (čierny trojuholník ▶, 16 px text)
   v bielom paneli, kde je všetko ostatné 12,5–14,5 px. Každé iné rozbaľovadlo
   (menu, hľadanie, tabuľka veľkostí, časté otázky) má značku +/\2212  a verzálky.
   Zároveň to dvíha terč na 44 px, čo obom chýbalo. */
/* Spoločné je len usporiadanie a značka +/\2212 . */
.cpn>summary,.gvline>summary{list-style:none;cursor:pointer;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap;min-height:44px;padding:8px 0;
  color:var(--gold-deep)}
.cpn>summary::-webkit-details-marker,.gvline>summary::-webkit-details-marker{display:none}
.cpn>summary::after,.gvline>summary::after{content:'+';margin-left:auto;font-size:15px}
.cpn[open]>summary::after,.gvline[open]>summary::after{content:'\2212 '}

/* Verzálky a prestrkanie IBA na zľavovom kóde — tam je summary pevný štítok.
   POZOR, sem .gvline nepatrí: v jeho summary stojí meno obdarovanej a úryvok
   venovania, ktoré zákazníčka napísala. Verzálky by z „Pre Anna Nováková"
   spravili „PRE ANNA NOVÁKOVÁ" a osobný odkaz by stránka zakričala — pritom
   zmysel toho zhrnutia je, aby si ho vedela skontrolovať bez klikania. */
.cpn>summary{font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.gvline>summary{font-size:14.5px}
/* Šablóna sumu obaľuje do <strong>, nie <b> — kľúčové číslo „chýba 21,00 €"
   preto ostávalo v predvolenej čiernej namiesto zlatej. */
.freebar__t b,.freebar__t strong{color:var(--gold-deep)}
.rec{background:#fff;border:1px solid var(--line);padding:22px;margin:16px 0}
.rec__meta{font-size:13px;color:var(--muted)}
.rec__p{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding:5px 0}
.rec__tot{border-top:1px solid var(--ink);margin-top:8px;padding-top:12px;font-weight:600}

/* pokladňa */
.cko{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);
  gap:clamp(20px,3vw,42px);align-items:start}
@media (max-width:900px){.cko{grid-template-columns:1fr}}
.whoami{font-size:13.5px;background:var(--cream);padding:10px 14px;margin:0 0 14px}
.alert{padding:13px 16px;border:1px solid var(--line-gold);background:#FBF3E2;
  font-size:14px;margin:0 0 16px}
.alert--bad{border-color:rgba(163,53,44,.45);background:#F9ECEA}
.sum__note--loy{color:var(--gold-deep)}
/* Sekcie pokladne (Doprava, Platba, Vernostné body, Kontaktné údaje).
   Boli zabalené do triedy `.card`, čo je karta produktu v mriežke — a tá má
   výslovne background:none. Sekcie tak nedostali ani pozadie, ani rám, ani
   odsadenie: nadpis „Platba" stál 10 px pod poslednou možnosťou dopravy.
   Pokladňa bola jediná stránka s panelmi, ktorá ich nemala. Premenované na
   vlastnú triedu, aby sa meno nebilo s kartou produktu. */
.ckosec{background:#fff;border:1px solid var(--line);
  padding:clamp(18px,2.4vw,26px);margin:0 0 18px}
/* Nadpis súhrnu patrí do tej istej veľkosti: stojí v dvojstĺpci hneď vedľa
   sekcií a bez tohto by ho držal globálny h2 clamp(24px,3.2vw,36px), teda by
   bol na širokej obrazovke takmer o 60 % väčší než „Doprava" vedľa neho. */
.ckosec>h2,.sum>h2{font-size:clamp(19px,1.8vw,22px);margin:0 0 14px}
.ckosec--bad{outline:2px solid var(--bad);outline-offset:2px}

/* cookies nastavenia, drobné stránky */
.cform{margin:14px 0}
.cform__act{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.cbar__k{font-weight:600}
.box{background:#fff;border:1px solid var(--line);padding:26px;max-width:520px;margin:26px auto}
.bar{display:flex;gap:10px;justify-content:flex-end;margin:0 0 14px}
.snip{background:#fff;border:1px solid var(--line);padding:14px;font-size:13px}
.sub{color:var(--muted)}

/* ── darčekový poukaz (redizajn 9. 8. 2026) ───────────────────────────────
   Certifikát, nie lístok: hlboký atrament so zlatým dvojrámom, jeden veľký
   znak so ženskou siluetou (predtým tu bol DVAKRÁT a bil sa s wordmarkom),
   pod ním značka a linka. Venovanie je hlavný text — meno obdarovanej veľkým
   serifom, odkaz kurzívou. Kód má vlastný rám, aby sa dobre prepisoval. */
.gv{position:relative;color:var(--cream);padding:44px 40px 34px;max-width:560px;
  background:radial-gradient(120% 90% at 50% 0%, #2A251B 0%, #15120C 62%);
  border:1px solid var(--gold-deep);text-align:center}
/* dvojrám: vonkajší zlatý (na .gv), vnútorný vlasový — pôsobí rytý */
.gv__frame{position:absolute;inset:10px;border:1px solid rgba(218,165,32,.30);pointer-events:none}
.gv__frame::after{content:'';position:absolute;inset:5px;border:1px solid rgba(218,165,32,.14)}
.gv__in{position:relative}
.gv__top{display:flex;flex-direction:column;align-items:center;gap:0}
.gv__logo{width:clamp(120px,34%,168px);height:auto;margin:0 auto 12px;display:block}
.gv__brand{font-family:var(--serif);letter-spacing:.28em;font-size:17px;color:#fff;
  text-indent:.28em}
.gv__rule{display:block;width:64px;height:1px;margin:14px auto;
  background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.gv__kind{font:600 10px/1.4 var(--sans);letter-spacing:.34em;text-transform:uppercase;
  color:var(--gold);text-indent:.34em}
/* hodnota — najväčšie číslo na certifikáte */
.gv__value{margin:24px 0 6px}
.gv__amount{display:block;font-family:var(--serif);font-size:clamp(46px,11cqw,62px);
  line-height:1;color:var(--gold);letter-spacing:.02em}
.gv__rest{display:block;font-size:12px;color:rgba(244,239,229,.62);margin-top:8px}
/* venovanie — srdce darčeka */
.gv__ded{margin:26px auto 22px;padding:20px 6px;max-width:44ch;
  border-top:1px solid rgba(218,165,32,.22);border-bottom:1px solid rgba(218,165,32,.22)}
.gv__forL{display:block;font:600 9.5px/1.6 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:rgba(244,239,229,.55)}
.gv__for{margin:0}
.gv__for b{font-family:var(--serif);font-weight:400;font-size:clamp(24px,6cqw,32px);
  line-height:1.2;color:#fff}
.gv__msg{font-family:var(--serif);font-style:italic;font-size:clamp(15px,3.6cqw,18px);
  line-height:1.7;color:rgba(244,239,229,.94);margin:14px 0 0}
.gv__from{margin:16px 0 0;font-size:13px;color:rgba(244,239,229,.6)}
.gv__from b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px;
  color:var(--gold);letter-spacing:.02em}
/* kód — druhý najdôležitejší prvok, vo vlastnom ráme */
.gv__code{margin:0 auto;padding:12px 14px;display:inline-block;
  border:1px solid rgba(218,165,32,.32)}
.gv__codeL{display:block;font:600 9px/1.6 var(--sans);letter-spacing:.24em;
  text-transform:uppercase;color:rgba(244,239,229,.5)}
.gv__codeV{display:block;font:600 clamp(16px,4.4cqw,21px)/1.5 var(--sans);
  letter-spacing:.2em;color:#fff;white-space:nowrap}
.gv__foot{margin-top:20px;font-size:11.5px;line-height:1.7;color:rgba(244,239,229,.55)}
.gv__foot p{margin:0}
/* Alfa .55, nie .45: pri .45 mal riadok s platnosťou a adresou e-shopu na
   päte poukazu (#15120C) kontrast 4,10:1 pri norme 4,5:1. .55 dáva 5,55:1,
   teda presne toľko, čo .gv__foot o riadok vyššie. Poukaz je aj doklad. */
.gv__meta{margin-top:6px!important;font-size:11px;color:rgba(244,239,229,.55)}
.gv__meta b{color:rgba(244,239,229,.72);font-weight:600}
@container (max-width: 420px){
  .gv{padding:30px 22px 24px}
  .gv__ded{margin:20px auto 18px;padding:16px 2px}
}
/* Náhľad v konfigurátore stojí NAD poliami. Prázdne riadky venovania preto
   ostávajú v toku ako .is-ghost a celá plocha venovania má rezervovanú výšku —
   inak poukaz s každým znakom rástol a odsúval pole, do ktorého sa píše
   (namerané 46,4 px hneď pri prvom znaku, spolu 179 px za celé venovanie). */
.gvcfg__nahlad{margin:18px 0}
.gvcfg__nahlad .is-ghost{visibility:hidden}
.gvcfg__nahlad .gv__ded{min-height:213px}
.gvline__m{color:var(--muted);font-size:12.5px}
.pcode--link{font-size:13px}

/* drobnosti */
.langsw__cur{font-weight:600}
.mnav__t{font:inherit}
.acct__t{white-space:nowrap}
.band__img img{width:100%;height:auto}
.band__cap{font-size:12.5px;color:rgba(244,239,229,.6);margin-top:10px}

/* „Kde vám skončí lem" — os postavy so zlatou ryskou.
   Zámerne to NIE je kreslená postava: maskot značky je stuha a karikatúra ženy
   by do tejto reči nepatrila. Zvislá os s hlavičkou a ryskou sa prečíta na
   prvý pohľad a nesľubuje väčšiu presnosť, než tá úvaha má. */
.lem{display:flex;gap:16px;align-items:stretch;margin-top:18px;
  padding:16px 18px;background:var(--cream);border:1px solid var(--line)}
.lem__os{position:relative;flex:none;width:22px;min-height:96px}
.lem__os::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;
  margin-left:-.5px;background:var(--line-gold)}
.lem__hlava{position:absolute;left:50%;top:0;width:11px;height:11px;margin-left:-5.5px;
  border:1px solid var(--line-gold);border-radius:50%;background:var(--cream)}
/* Ryska sa umiestňuje zhora (top v %), lebo 100 % osi = zem. */
.lem__znak{position:absolute;left:0;right:0;height:2px;background:var(--gold);
  box-shadow:0 0 0 2px var(--cream)}
.lem__txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.lem__h{font:600 10.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep)}
.lem__veta{font-family:var(--serif);font-size:17px;line-height:1.35;color:var(--ink)}

/* Lepiaca nákupná lišta (.pdbar) odstránená zámerne — na telefóne
   zavadzala pri čítaní aj pri chate so Sofiou.

   Náhradou je LEPIVÝ BLOK V STĹPCI, len na desktope: cena, veľkosti a
   Do košíka zostanú na očiach, kým vľavo roluje galéria. Nič neprekrýva,
   na telefóne sa neuplatní vôbec, takže pôvodná výhrada trvá aj naďalej. */
/* Lepivý blok na detaile SKÚŠANÝ A VRÁTENÝ.
   `.pd__key` (názov → cena → veľkosti → Do košíka) mal na desktope zostať na
   očiach, kým vľavo roluje galéria. Nefunguje to a dôvod je principiálny:
   `position:sticky` posúva prvok VNÚTRI rodiča, ale obsah za ním zostáva na
   mieste — lem aj krátky popis sa preto pri rolovaní nasúvali cez tlačidlo.

   Aby to šlo čisto, musel by pravý stĺpec obsahovať LEN ten blok (lem a popis
   presunúť pod mriežku) a `.pd__info` by sa muselo naťahovať na výšku galérie.
   To je prestavba pravého stĺpca, nie doladenie — nechávam ju na samostatný
   krok. Lišta cez spodok obrazovky sem nepatrí: bola tu a šla preč zámerne.

   Trieda `.pd__key` zostáva ako obal; nič nerobí a značka je pripravená. */

/* ═══ zážitkové prvky ═══════════════════════════════════════════════════ */

/* Plynulý prechod medzi stránkami (View Transitions, MPA). Prehliadače bez
   podpory ignorujú — stránka sa načíta klasicky. Fotka z karty produktu sa
   MORFUJE do galérie detailu (rovnaké view-transition-name na oboch stranách). */
@view-transition{navigation:auto}
@supports (view-transition-name: none){
  ::view-transition-old(root){animation:vt-out .28s var(--ease) both}
  ::view-transition-new(root){animation:vt-in .34s var(--ease) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0}to{opacity:1}}
}

/* ── Nadpisy sa odkrývajú zdola ───────────────────────────────────────────
   Nadpis nevbehne, ale VYJDE spod hrany — starý typografický trik módnych
   magazínov. Robí to `clip-path`, ktorý sa odsúva zdola nahor, plus drobné
   nadvihnutie textu.

   Celé je to VNÚTRI @supports a viazané na `animation-timeline`. Dôvod je
   ten istý ako pri scroll-reveale: v tomto obchode sa trieda `.in` na
   moderných prehliadačoch nikdy nepridá, takže pravidlá na ňu viazané by
   boli mŕtve. A hlavne — keby sa efekt aplikoval bez fungujúceho časovania,
   nadpis by zostal navždy orezaný, teda neviditeľný. Bez podpory sa preto
   nesmie aplikovať vôbec. */
@supports (animation-timeline: view()){
  html.js .sec-h h2,
  html.js .igr__hd h2,
  html.js .trust h2,
  html.js .band h2{
    animation:nadpis-odkryv 1s var(--ease) both;
    animation-timeline:view();
    /* Rozsah bol `entry 4% → 46%`, teda nadpis bol odkrytý ešte pri spodnej
       hrane obrazovky — kým naň človek stihol pozrieť, bolo po efekte.
       Teraz sa odkrýva až keď je naozaj v zornom poli. */
    animation-range:entry 30% entry 92%;
  }
  @keyframes nadpis-odkryv{
    from{clip-path:inset(0 0 100% 0);transform:translateY(26px)}
    to{clip-path:inset(0 0 -12% 0);transform:none}
  }
  @media (prefers-reduced-motion:reduce){
    html.js .sec-h h2,html.js .igr__hd h2,html.js .trust h2,html.js .band h2{
      animation:none;clip-path:none}
  }
}

/* ── Zrnitosť na tmavých plochách ─────────────────────────────────────────
   Plochý atrament vyzerá digitálne. Veľmi jemné zrno z neho spraví tlačený
   papier alebo filmové políčko — je to najlacnejší rozdiel medzi „web" a
   „značka". Zrno je inline SVG šum, teda žiadny súbor navyše a žiadna ďalšia
   požiadavka na server.

   `pointer-events:none` je nutné: vrstva leží cez celú plochu a bez toho by
   pohltila kliknutia na tlačidlá v hero. */
.hero::before,.band::before,.igr::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  /* Režim `screen`, nie `overlay`. Overlay tmavý podklad NEZOSVETĽUJE —
     na atramentovej ploche teda nerobil doslova nič a zrno nebolo vidieť.
     `screen` podklad rozjasňuje, takže na tmavom vznikne jemný svetlý
     poprašok — presne to filmové zrno, o ktoré ide. */
  opacity:.13;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  background-size:140px 140px}
/* Obsah musí zostať nad zrnom. */
.hero__in,.band__in,.igr__hd,.igr__ram{position:relative;z-index:2}

/* ── Parallax vo fotkách kategórií — ODSTRÁNENÝ ───────────────────────────
   Fotka sa pri scrollovaní posúvala o kúsok pomalšie než dlaždica. Vyzeralo
   to dobre, ale malo to skrytú daň, ktorú si nikto nespojil s efektom:

   Obal fotky bol o 24 % vyšší a vytiahnutý 12 % NAD dlaždicu, aby sa pri
   posune neodkryl okraj. To znamená, že `object-position:top` nezarovnal vrch
   fotky s vrchom dlaždice — vrchná desatina fotky skončila nad viditeľnou
   plochou a orezala sa. Animácia to podľa polohy na stránke ešte posúvala.
   Výsledok: modelky prichádzali o vrchy hlavy a vyzeralo to ako chyba orezu.
   Menil som kvôli tomu `object-position` dvakrát a ani raz to nepomohlo,
   lebo príčina bola inde.

   Efekt, ktorý zje tvár, nestojí za to. Obal je odteraz zarovnaný
   s dlaždicou a fotka začína tam, kde má. Ak sa parallax niekedy vráti, musí
   posúvať smerom NADOL (obal zväčšený len pod dlaždicou), nie nahor. */

/* Hero dýcha: pomalé priblíženie à la Ken Burns. Compositor-only (transform),
   reduced-motion ho globálne vypína. */
/* Zväčšenie bolo 5,5 % za 16 s — technicky pohyb, prakticky ho nebolo vidno
   a pôsobilo to, akoby fotka stála. Teraz 9 % za 20 s a s jemným posunom do
   strany: pomalšie, no konečne badateľné. Stále je to len `transform`, takže
   to beží na compositore a nezaťažuje to vykresľovanie. */
.hero__shot img{animation:hero-kb 20s var(--ease) infinite alternate}
@keyframes hero-kb{from{transform:scale(1) translate3d(0,0,0)}
                   to{transform:scale(1.09) translate3d(-1.2%,0,0)}}
/* ── Video ako pozadie celého hero ────────────────────────────────────────
   Video bolo najprv v pravom stĺpci namiesto fotky, lenže hero potom zostalo
   rozdelené na „text | okno s videom“ a pri zábere na výšku sa to na mobile
   orezalo do nepoužiteľného pásu. Na šírku a cez celú plochu to funguje
   oveľa lepšie: text leží NA videu a hero konečne pôsobí ako jeden celok. */
.hero--video{isolation:isolate}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;pointer-events:none;opacity:0;transition:opacity 1.4s var(--ease)}
.hero__bg.is-on{opacity:1}
/* Jediné video = žiadne striedanie, nech nečaká na triedu z JavaScriptu. */
.hero--video:not([data-hero-bg]) .hero__bg{opacity:1}
/* Clona pod textom. Bez nej je biele písmo na svetlom zábere nečitateľné —
   a záber sa môže kedykoľvek vymeniť za svetlejší, takže clona musí byť
   súčasťou návrhu, nie vlastnosťou konkrétneho videa. Vľavo hustejšia
   (tam je text), vpravo takmer priehľadná. */
.hero--video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,18,12,.88) 0%,rgba(21,18,12,.62) 42%,rgba(21,18,12,.28) 100%)}
/* Mriežka je NAD clonou, takže clona stlmí len video za ňou — fotka bannera
   v pravom stĺpci zostáva plne sýta. Rozloženie stĺpcov sa nemení: banner je
   kampaň a video značkové pozadie, jedno druhé nenahrádza. */
.hero--video .hero__in{position:relative;z-index:2}

/* Fotka bannera sa NEOREZÁVA hranou, ale vplýva do videa.
   Predtým to bol ostrý obdĺžnik nalepený na pohyblivé pozadie a bolo to
   presne vidieť — dve nezlepené vrstvy. Maska rozpúšťa ľavý okraj (tam, kde
   susedí s textom) a jemne aj spodný, takže fotka a video pôsobia ako jeden
   záber. Fotka pritom zostáva plne čitateľná — pri banneri s darčekovými
   poukazmi musí byť poukaz vidieť, nie tušiť. */
.hero--video .hero__shot{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 12%,#000 34%,#000 74%,transparent 100%),
                     linear-gradient(0deg,transparent 0,#000 14%);
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 12%,#000 34%,#000 74%,transparent 100%),
             linear-gradient(0deg,transparent 0,#000 14%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
/* Pôvodný tmavý prechod na fotke by sa s maskou bil — maska rieši to isté
   jemnejšie, takže sa pri videu vypína. */
.hero--video .hero__shot::after{display:none}
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  /* Bez podpory masky sa vráti pôvodný prechod — radšej ostrejšia hrana než
     fotka, ktorá zmizne celá. */
  .hero--video .hero__shot::after{display:block}
}
@media (max-width:860px){
  /* Na mobile je fotka NAD textom cez celú šírku, takže sa rozpúšťa zdola,
     nie zľava — vodorovná maska by odrezala polovicu záberu. */
  .hero--video .hero__shot{
    -webkit-mask-image:linear-gradient(0deg,transparent 0,#000 22%);
    mask-image:linear-gradient(0deg,transparent 0,#000 22%)}
}
@media (max-width:860px){
  /* Na úzkej obrazovke text zaberá celú šírku, takže clona musí byť zvislá
     a rovnomernejšia — vodorovný prechod by spodok nechal nečitateľný. */
  .hero--video::after{background:linear-gradient(180deg,rgba(21,18,12,.62) 0%,rgba(21,18,12,.82) 100%)}
}

/* filter chips (markup .fchip) */
.fchip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid var(--line);background:#fff;font-size:13px;
  transition:border-color .25s,background .25s,color .25s}
.fchip:hover{border-color:var(--gold-deep)}
.fchip.je{background:var(--ink);color:var(--gold);border-color:var(--ink)}
.fchip.je .fchip__n{color:rgba(218,165,32,.7)}

/* veľkostná tabuľka a poznámka o modelke na detaile */
.fitnote{margin:12px 0 0;font-size:13.5px;color:var(--ink-soft);font-style:italic;
  font-family:var(--serif)}
.sguide{margin:14px 0 0;border:1px solid var(--line);background:#fff}
.sguide>summary{list-style:none;cursor:pointer;padding:12px 16px;
  font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);display:flex;justify-content:space-between;align-items:center}
.sguide>summary::-webkit-details-marker{display:none}
.sguide>summary::after{content:'+';font-size:16px;color:var(--gold-deep)}
.sguide[open]>summary::after{content:'\2212 '}
.sguide>summary:hover{background:var(--cream)}
.sguide .tblwrap,.sguide .hint{padding:0 16px}
.sguide[open]{padding-bottom:12px}
.sguide__t{margin-top:4px}
.sguide__t th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);width:auto}

/* video kúska pod galériou — rovnaký formát ako fotky, tenký zlatý rám */
.gal__video{display:block;width:100%;margin-top:10px;border:1px solid var(--gold);background:var(--ink)}

/* DORA — štylistka: zlatá iskra vpravo dole, panel v tónoch značky */
/* Dora v prázdnych stavoch (košík, 404) — tichá spoločníčka, nie ilustrácia
   navyše: stojí nad textom, decentne priesvitná, na mobile menšia. */
.empty--dora{text-align:center}
.empty__dora{display:block;margin:0 auto 18px;width:clamp(110px,18vw,160px);height:auto;opacity:.9}
@media (prefers-reduced-motion:reduce){.empty__dora{opacity:.75}}

.dora{position:fixed;right:18px;bottom:18px;z-index:60;font-family:var(--sans)}
/* Maskot ako tlačidlo: medailón nesie identitu, meno je len sprievod.
   Pohyb je pomalý a jemný — pravidlo značky: „nikdy rázne, nikdy cez produkt". */
.dora__fab{display:block;padding:0;border:0;background:none;cursor:pointer;line-height:0;
  border-radius:50%;box-shadow:0 8px 28px rgba(21,18,12,.28);
  transition:transform .3s var(--ease),box-shadow .3s}
.dora__fab:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 12px 34px rgba(21,18,12,.36)}
.dora__fab:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.dora__medailon{width:66px;height:66px;border-radius:50%;display:block}
@media (max-width:560px){.dora__medailon{width:58px;height:58px}}
.dora__av{width:34px;height:34px;border-radius:50%;flex:none;
  border:1px solid rgba(218,165,32,.45)}
.dora__hdt{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.dora.is-open .dora__fab{display:none}
.dora__panel{position:fixed;right:18px;bottom:18px;width:min(360px,calc(100vw - 24px));
  height:min(540px,calc(100dvh - 90px));display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--gold);box-shadow:0 18px 60px rgba(21,18,12,.30)}
/* center, NIE baseline: hlavička nesie 34px medailón a vedľa neho stĺpec textu.
   Obrázok má účiaru na svojej spodnej hrane, takže sa meno zarovnalo až pod
   neho — hlavička merala 84,78 px namiesto 62 a tých 22,78 px chýbalo správam
   v paneli vysokom 540 px. */
.dora__hd{display:flex;align-items:center;gap:8px;padding:14px 16px;background:var(--ink);color:var(--cream)}
.dora__hd b{font:600 13px/1 var(--sans);letter-spacing:.22em;color:var(--gold)}
.dora__hd span{font-size:11.5px;color:rgba(244,239,229,.75);letter-spacing:.05em;flex:1}
/* \D7  = minimalizovať: veľký dotykový terč (44 px), nie 20px znak */
.dora__x{background:none;border:0;color:var(--cream);font-size:22px;line-height:1;
  cursor:pointer;width:44px;height:44px;margin:-12px -12px -12px 0;flex:none;
  display:flex;align-items:center;justify-content:center;border-radius:50%}
.dora__x:hover{background:rgba(244,239,229,.12)}
.dora__msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
/* overflow-wrap:anywhere — bez neho dlhé nezalomiteľné slovo (URL, kód kúsku)
   pretieklo bublinu o ~145 px, kreslilo sa cez zlatý rám a celý stĺpec správ
   dostal vodorovné rolovanie. */
.dora__m{max-width:88%;padding:11px 14px;font-size:14px;line-height:1.55;border-radius:2px;
  white-space:pre-wrap;overflow-wrap:anywhere}
.dora__m--s{align-self:flex-start;background:#fff;border:1px solid var(--line);border-left:2px solid var(--gold)}
.dora__m--z{align-self:flex-end;background:var(--cream);border:1px solid var(--line)}
/* Stav „Dora premýšľa": v bubline je JEDEN animovaný SVG otáznik. Pravidlá pre
   tri pulzujúce bodky (.dora__m--pise i + @keyframes dora-dot) sú zmazané —
   shop.js ich nikdy nevytvoril, ostali po výmene za stuhu s otáznikom. */
.dora__m--pise{color:var(--muted);display:flex;align-items:center;padding:10px 14px}
/* „Dora premýšľa" — stuha kreslí otáznik (animácia vnútri SVG súboru). */
.dora__otaznik{width:34px;height:34px;display:block}
/* tlačidlo „prečítať" pod Sofiinou správou (Web Speech, bez API) */
/* Terč mal 82,9 × 23,0 px, teda polovicu normy. Text ostáva zvisle v strede
   (inline-flex + align-items), záporný margin sa zväčšil o tých istých 2 px,
   aby sa medzera pod bublinou opticky nezmenila. */
.dora__tts{align-self:flex-start;margin:-6px 0 0;background:none;border:0;cursor:pointer;
  font:600 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);
  padding:6px 2px;min-height:44px;display:inline-flex;align-items:center;gap:6px}
.dora__tts:hover{color:var(--ink)}
/* Karty v chate: VÝŠKY NATVRDO — aspect-ratio sa vnútri flex/overflow
   kontajnera na niektorých mobiloch zborí na čiaru. */
.dora__cards{display:flex;gap:10px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:thin;flex:none}
.dora__cards .card{flex:0 0 150px;width:150px;font-size:12px;min-height:250px}
.dora__cards .card__img{height:200px;aspect-ratio:auto;flex:none}
.dora__cards .card__img img{width:150px;height:200px}
.dora__cards .card__buy{display:none}
.dora__cards .wl{display:none}
.dora__cards .badges{display:none}
.dora__f{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:#fff;
  align-items:center}
.dora__f input{flex:1;min-width:0}
/* mikrofón: pokojný, kým počúva — dýchajúci zlatý krúžok, nie blikanie */
.dora__mic{flex:none;width:44px;height:44px;border:1px solid var(--line);background:#fff;
  border-radius:50%;cursor:pointer;color:var(--ink-soft);display:flex;align-items:center;
  justify-content:center;transition:.2s;padding:0}
.dora__mic svg{width:19px;height:19px}
.dora__mic:hover{border-color:var(--gold);color:var(--gold-deep)}
.dora__mic.is-on{background:var(--ink);border-color:var(--gold);color:var(--gold);
  animation:dora-mic 1.6s ease-in-out infinite}
@keyframes dora-mic{0%,100%{box-shadow:0 0 0 0 rgba(218,165,32,.45)}
  70%{box-shadow:0 0 0 8px rgba(218,165,32,0)}}
@media (prefers-reduced-motion:reduce){.dora__mic.is-on{animation:none}}
.dora__note{margin:0;padding:0 12px 10px;font-size:10.5px;color:var(--muted);background:#fff}
@media (max-width:560px){.dora{right:12px;bottom:12px}.dora__panel{right:12px;bottom:12px}}

/* pás sprievodcu na domove — tenká zlatá linka, nie banner */
.kvpas{display:flex;align-items:center;gap:14px;margin:26px 0 4px;padding:14px 18px;
  border:1px solid var(--gold);background:linear-gradient(90deg,var(--paper),var(--cream));
  text-decoration:none;color:var(--ink);transition:.18s;flex-wrap:wrap}
.kvpas:hover{box-shadow:0 6px 22px rgba(21,18,12,.08)}
.kvpas__t{font:600 12.5px/1.3 var(--sans);letter-spacing:.13em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}
.kvpas__p{color:var(--muted);font-size:14px;flex:1;min-width:220px}
.kvpas__go{font-size:18px;color:var(--gold-deep)}

/* Sprievodca štýlom (/vyber) — rímske kroky, chipové odpovede, palety. */
.kviz__uvod{text-align:center;max-width:560px;margin:26px auto 8px}
.kviz__uvod h1{font-family:var(--serif);font-size:clamp(26px,4vw,38px);margin:0 0 8px}
.kviz__uvod p{color:var(--muted);margin:0}
.kviz__f{max-width:760px;margin:18px auto 0}
.kviz__q{border:1px solid var(--line);background:#fff;padding:18px 20px 20px;margin:0 0 14px;border-radius:2px}
/* PASCA: <legend> prehliadač predvolene sadí OBKROČMO na rám fieldsetu —
   pri bielej karte na krémovej stránke tak viacriadková otázka na mobile
   stála na dvoch pozadiach. float:left + width:100% legendu vtiahne DOVNÚTRA
   karty ako obyčajný blok. */
.kviz__q legend{float:left;width:100%;margin:0 0 2px;
  font:600 12.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  padding:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kviz__q legend em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted);
  font-weight:400;font-size:12px;margin-left:auto}
.kviz__chips{clear:both}
@media (max-width:560px){
  /* „dá sa vybrať viac" na telefóne pod otázku, zarovnané s jej textom —
     vpravo hore sa lámalo do troch riadkov. */
  .kviz__q legend em{flex-basis:100%;margin-left:36px}
}
.kviz__n{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:26px;
  border:1px solid var(--gold);color:var(--gold-deep);font-family:var(--serif);font-size:13px;border-radius:50%}
.kviz__chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.kchip input{position:absolute;opacity:0;pointer-events:none}
.kchip{position:relative;cursor:pointer}
.kchip span{display:inline-flex;align-items:center;gap:7px;padding:10px 16px;border:1px solid var(--line);
  background:var(--paper);font-size:14px;border-radius:999px;transition:.15s;
  text-transform:none;letter-spacing:0;font-weight:500}
.kchip:hover span{border-color:var(--gold)}
.kchip input:checked+span{border-color:var(--gold-deep);background:var(--cream);
  box-shadow:inset 0 0 0 1px var(--gold-deep);color:var(--ink)}
.kchip input:focus-visible+span{outline:2px solid var(--gold-deep);outline-offset:2px}
.kviz__akcie{display:flex;gap:10px;align-items:center;margin:6px 0 4px}
.kviz__f .hint{margin-top:10px}
.kviz__vysledok{margin:36px 0}
/* h1 aj h2: záložný nadpis výsledku je od opravy „stránka výsledku nemá h1"
   <h1>. Meno archetypu (.karch__n) si vyššiu veľkosť berie o kus nižšie. */
.kviz__vysledok h1,.kviz__vysledok h2{font-family:var(--serif);font-size:clamp(20px,3vw,28px);
  border-top:1px solid var(--gold);padding-top:22px}
.kviz__viac{text-align:center;margin-top:22px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
@media (max-width:560px){.kviz__q{padding:14px 14px 16px}.kchip span{padding:9px 13px;font-size:13.5px}}

/* ── sprievodca v2: vizuálne dlaždice ─────────────────────────────────────
   Móda sa vyberá očami. Odpoveď je fotka skutočného kúska z katalógu —
   nie sivý rámik s textom. Zaškrtnutie je zlatý rám + fajka v rohu, aby
   bolo vidieť na prvý pohľad aj na telefóne. */
.kviz__uvod img{display:block;margin:0 auto 14px}
.kdlaz{clear:both;display:grid;gap:12px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:560px){.kdlaz{grid-template-columns:repeat(2,1fr);gap:9px}}
.kdl{position:relative;cursor:pointer;display:flex}
.kdl input{position:absolute;opacity:0;pointer-events:none}
/* margin/font/letter-spacing/text-transform sa nulujú zámerne: .kdl__in je
   <span> priamo v <label>, takže naň sadá formulárové `label>span` — odtiaľ
   mal margin-bottom 7px (v mriežke sa nezlial s rodičom a nechával pás
   prázdneho, ale stále klikateľného pozadia pod každou dlaždicou) a názvy
   dlaždíc dedili VERZÁLKY s prestrkom, kvôli ktorým sa lámali do dvoch riadkov. */
.kdl__in{display:block;flex:1 1 auto;min-width:0;margin:0;font:inherit;
  letter-spacing:normal;text-transform:none;color:inherit;
  border:1px solid var(--line);background:#fff;overflow:hidden;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.kdl:hover .kdl__in{border-color:var(--gold);transform:translateY(-2px)}
.kdl input:checked+.kdl__in{border-color:var(--gold-deep);
  box-shadow:inset 0 0 0 1px var(--gold-deep),0 6px 20px rgba(21,18,12,.10)}
.kdl input:focus-visible+.kdl__in{outline:2px solid var(--gold-deep);outline-offset:2px}
.kdl__img{display:block;aspect-ratio:3/4;overflow:hidden;background:#EEE8DA}
.kdl__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s var(--ease)}
.kdl:hover .kdl__img img{transform:scale(1.04)}
.kdl__t{display:block;padding:11px 12px;font-size:14px;line-height:1.35;color:var(--ink)}
.kdl input:checked+.kdl__in .kdl__t{color:var(--gold-deep);font-weight:600}
/* fajka sa objaví až po zaškrtnutí — inak by dlaždice pôsobili zaťažene */
.kdl__tick{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:var(--gold-deep);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:14px;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s var(--ease)}
.kdl input:checked+.kdl__in .kdl__tick{opacity:1;transform:scale(1)}
/* paleta: swatche cez spodok fotky, aby farba bola vidieť aj bez nej */
.kdl__pal{display:flex;gap:5px;padding:10px 12px 0}
.kdl__pal i{width:16px;height:16px;border-radius:50%;display:block;
  border:1px solid rgba(21,18,12,.18)}
.kdl--text .kdl__in{min-height:96px;display:flex;align-items:center}

/* progres — objaví sa len s JS (krokový režim) */
.kprog{max-width:760px;margin:18px auto 0}
.kprog__bar{height:2px;background:var(--line);overflow:hidden}
.kprog__bar i{display:block;height:100%;width:0;background:var(--gold-deep);
  transition:width .4s var(--ease)}
.kprog__t{margin:8px 0 0;font:600 10.5px/1.4 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.kviz--kroky .kprog__t{font-size:11px}

/* krokový režim: naraz je vidieť jedna otázka */
.kviz--kroky .kviz__q{display:none;border:0;background:none;padding:0;margin:22px 0 0;
  animation:kviz-in .45s var(--ease) both}
.kviz--kroky .kviz__q.je{display:block}
/* Názov otázky nesie v krokovom režime PROGRES — legenda by ho zopakovala
   druhýkrát hneď pod ním. Skryje sa preto text, nie celý prvok: `em`
   („dá sa vybrať viac“ / „nepovinné“) zostáva a čítačky legendu stále
   čítajú, lebo prvok v strome ostáva. */
/* Po prechode na ďalší krok dostane fieldset ohnisko (shop.js), aby k novej
   otázke viedol Tab dopredu. Rám sa kreslí len pri ovládaní klávesnicou. */
.kviz--kroky .kviz__q:focus{outline:none}
.kviz--kroky .kviz__q:focus-visible{outline:2px solid var(--gold-deep);outline-offset:4px}
.kviz--kroky .kviz__q legend{font-size:0;margin-bottom:8px;justify-content:flex-end}
/* Mobilné pravidlo odsádza „dá sa vybrať viac" o 36 px, aby text lícoval
   s rímskou číslicou otázky — lenže v krokovom režime je číslica skrytá
   (.kviz--kroky .kviz__n{display:none}), takže poznámka visela 36 px vpravo
   od všetkého ostatného. Späť na pôvodný zámer riadka 1840: vpravo. */
.kviz--kroky .kviz__q legend em{font-size:12px;flex-basis:auto;margin-left:auto}
.kviz--kroky .kviz__n{display:none}
@keyframes kviz-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.kviz__nav{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}
/* Zúžené na PRVÉ tlačidlo: do lišty pribudol presunutý odkaz „Začať odznova",
   ktorý je tiež .btn--ghost — s nezacieleným pravidlom by si margin-right:auto
   vzal aj on a lišta by sa rozpadla. */
.kviz__nav>.btn--ghost:first-child{margin-right:auto}
.kviz__reset{min-height:44px}
/* Na poslednom kroku má hlavné tlačidlo dlhý text („Ukázať môj výber") a pri
   390 px zostávalo 0,7 px rezervy — česká verzia ju prekročí tiež. Keď sa už
   riadok zalomí, hlavné tlačidlo musí ísť HORE; „Späť" nad ním vyzerá ako
   hlavná akcia. */
@media (max-width:560px){
  .kviz__nav{flex-wrap:wrap}
  .kviz__nav .btn{white-space:nowrap;flex:0 1 auto;min-height:44px}
  .kviz__nav .btn--cta{order:-1;flex:1 1 100%}
  /* Rovnaký selektor ako v základe, inak by ho základ (0-3-0) prebil. */
  .kviz__nav>.btn--ghost:first-child{margin-right:0}
}
@media (prefers-reduced-motion:reduce){
  .kviz--kroky .kviz__q{animation:none}
  .kdl:hover .kdl__in{transform:none}
  .kdl:hover .kdl__img img{transform:none}
}

/* ── pomenovanie štýlu (archetyp) ─────────────────────────────────────────
   To, čo si zákazníčka zapamätá a povie ďalej. Preto stojí nad výsledkom
   ako titul, nie ako poznámka. */
.karch{text-align:center;max-width:620px;margin:0 auto 30px;padding:30px 24px;
  background:linear-gradient(180deg,#FDFBF5 0%,#fff 100%);
  border:1px solid var(--line-gold)}
.karch__l{display:block;font:600 10px/1.4 var(--sans);letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold-deep)}
/* .kviz__vysledok .karch__n, nie len .karch__n: meno archetypu je nadpis
   v sekcii výsledku, takže ho prebíjalo pravidlo `.kviz__vysledok h1,h2`
   (rovnaká špecifickosť, ale stojí v súbore neskôr) a meno vychádzalo
   o 8–12 px menšie, než malo. `border`/`padding` na !important rušia rám
   a odsadenie, ktoré si to isté pravidlo pýta pre záložný nadpis. */
.kviz__vysledok .karch__n,
.karch__n{font-family:var(--serif);font-size:clamp(28px,5vw,40px);line-height:1.15;
  margin:10px 0 0;border:0!important;padding:0!important;color:var(--ink)}
.karch__p{color:var(--muted);margin:10px auto 0;max-width:46ch;line-height:1.7}
.karch__dora{display:flex;gap:11px;align-items:flex-start;text-align:left;
  max-width:46ch;margin:20px auto 0;padding:14px 16px;background:#fff;
  border:1px solid var(--line-gold);font-size:14.5px;line-height:1.65}
.karch__dora img{flex:none;margin-top:1px}
/* Zlúčené do jedného zacieleného pravidla. Predtým tu stálo nezacielené
   `.btn--sm{padding:9px 18px;font-size:11px}`, ktoré prebíjalo globálnu
   definíciu z riadku 317 na CELOM webe — tlačidlo „Hľadať" aj tlačidlá na
   všetkých kartách mali iné odsadenie a o pol pixela menšie písmo. */
.karch .btn--sm{margin-top:20px;padding:9px 18px;font-size:11px;min-height:44px}

/* ── Príbeh kúska: poznámka štylistky + taliansky pas ───────────────────────
   .story__grid a .story__b sú dnes NEPOUŽITÉ — tri boxy Strih/Materiál/Ako
   nosiť sa z produkt.php vypli, lebo dlhé popisy hovoria to isté (viď komentár
   tam). Pravidlá tu zostávajú, aby sa boxy dali zapnúť späť jedným ifom. */
.story{margin:34px 0;border-top:1px solid var(--gold);padding-top:24px}
.story>.story__note:first-child{margin-top:0}
.story__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:760px){.story__grid{grid-template-columns:1fr}}
.story__b h3{margin:0 0 6px;font:600 11.5px/1.4 var(--sans);letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-deep)}
.story__b p{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-soft)}
.story__note{margin:22px 0 0;padding:14px 18px;border-left:2px solid var(--gold);
  font-family:var(--serif);font-style:italic;font-size:16px;color:var(--ink)}
.story__note cite{display:block;margin-top:6px;font:600 10.5px/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--muted)}
.story__pas{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:18px;
  padding:10px 14px;border:1px solid var(--line);background:#fff;font-size:13.5px;width:fit-content}
.story__pas b{letter-spacing:.08em}
.story__flag{font-size:16px}

/* štýlové DNA — zlaté chipy pod príbehom */
.dna{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 30px}
.dna__l{font:600 10.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.dna__chip{padding:6px 13px;border:1px solid var(--gold);border-radius:999px;font-size:12.5px;
  color:var(--gold-deep);text-decoration:none;transition:.15s}
.dna__chip:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}

/* posledný kus — tichá zlatá veta z reálneho skladu */
.lastone{margin:10px 0 0;font-size:13px;color:var(--gold-deep)}
.lastone b{font-weight:600}

/* „Obliecť celý look" — modal so zoznamom kusov a veľkosťami */
.look{position:fixed;inset:0;z-index:90;background:rgba(21,18,12,.5);
  display:flex;align-items:center;justify-content:center;padding:16px}
.look__box{background:var(--paper);border:1px solid var(--gold);max-width:480px;width:100%;
  max-height:min(84vh,84dvh);overflow-y:auto;padding:20px 22px}
.look__box h3{margin:0 0 14px;font-family:var(--serif)}
.look__row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.look__row img{flex:none;object-fit:cover;background:var(--cream)}
.look__t{flex:1;font-size:13.5px;min-width:0}
.look__row select{max-width:150px}
.look__skip{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);white-space:nowrap}
.look__skip input{width:auto}
.look__act{display:flex;gap:10px;margin-top:16px}

/* živé karty: video sa rozohrá pri hoveri (len desktop s myšou, kreslí JS) */
.card__img video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}

/* Obľúbené — srdiečko na karte aj detaile; stav kreslí JS (localStorage/DB). */
.wl{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--line);background:rgba(251,248,241,.92);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:transform .18s,border-color .18s;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.wl svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.7;transition:.18s}
.wl:hover{transform:scale(1.08);border-color:var(--gold)}
.wl.is-on svg{fill:var(--gold-deep);stroke:var(--gold-deep)}
.wl.is-on{border-color:var(--gold)}
.wl--pd{top:14px;right:14px;width:40px;height:40px}
.wl--pd svg{width:21px;height:21px}
.hdr__wl{position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;color:var(--ink)}
.hdr__wl svg{width:20px;height:20px}
.hdr__wl:hover{color:var(--gold-deep)}
.hdr__wln{position:absolute;top:-2px;right:-4px;min-width:16px;height:16px;padding:0 4px;
  border-radius:8px;background:var(--gold-deep);color:#fff;font:700 10px/16px var(--sans);text-align:center}
/* Prázdne Obľúbené sú od opravy `.empty .empty--wl`, teda ten istý komponent,
   aký používa hľadanie — rám aj odsadenie sedia so zvyškom webu. Modifikátor
   len vypne kurzívu (je tu tlačidlo a znak, nie povzdych) a pridá vzduch. */
.empty--wl{font-style:normal;padding:52px 24px 56px}
/* --gold-deep, nie --gold: ozdobná zlatá má na papieri 2,11:1, čo nestačí ani
   pre veľký text, ani pre netextovú grafiku (norma 3:1). #8A6410 dáva 5,06:1.
   Samotný znak ♡ je v šablóne aria-hidden — vetu pod ním nesie text. */
.empty--wl p:first-child{font-size:42px;line-height:1;color:var(--gold-deep);margin:0 0 6px}
.empty--wl .btn{margin-top:18px}
.wl-hint{text-align:center;margin-top:18px}
@media (max-width:560px){.hdr__wl{width:30px;height:30px}}

/* Doplňte outfit — ručne poskladaná zostava zo štylistiky, plné karty. */
.outfit{margin:44px 0}
.outfit__head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px;
  border-top:1px solid var(--gold);padding-top:22px}
.outfit__head h2{margin:0;font-family:var(--serif);font-size:clamp(20px,2.6vw,26px)}
.outfit__sub{margin:0;color:var(--muted);font-size:.9rem;font-style:italic;font-family:var(--serif)}
.grid--outfit{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

/* Strážny pes — rovnaká reč ako veľkostná tabuľka, len s jemným zlatým
   akcentom: služba, nie reklama. */
.straznik{margin:14px 0 0;border:1px solid var(--gold);background:linear-gradient(180deg,#fff,var(--paper))}
.straznik>summary{list-style:none;cursor:pointer;padding:12px 16px;
  font:600 11.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);display:flex;justify-content:space-between;align-items:center}
.straznik>summary::-webkit-details-marker{display:none}
.straznik>summary::after{content:'+';font-size:16px;color:var(--gold-deep)}
.straznik[open]>summary::after{content:'\2212 '}
.straznik>summary:hover{background:var(--cream)}
.straznik__f{display:flex;gap:8px;flex-wrap:wrap;padding:2px 16px 4px;position:relative}
.straznik__f select{flex:0 1 150px}
.straznik__f input[type=email]{flex:1 1 180px}
.straznik__f .btn{flex:0 0 auto}
.straznik .hint{padding:0 16px}
.straznik[open]{padding-bottom:12px}
.straznik__ok{margin:0;padding:2px 16px 4px;font-size:14px;color:var(--gold-deep);font-weight:600}
@media (max-width:560px){
  .straznik__f{flex-direction:column}
  .straznik__f select,.straznik__f input[type=email]{flex:1 1 auto;width:100%}
}

/* ── mobilná hlavička: všetko sa musí zmestiť do 375 px ─────────────────── */
@media (max-width:560px){
  .hdr{gap:10px;--hdr-row1:64px;--hdr-pad:12px}   /* cez premenné, nech záporné okraje .nav sedia */
  .mnav>summary .mnav__t{display:none}          /* len ikona ☰ */
  .brand__wm{height:19px}
  .hdr__right{gap:6px}
  .langsw__cur{display:none}                    /* len vlajky */
  .langsw__i{padding:5px}
}
@media (max-width:430px){
  .hdr .langsw{display:none}                    /* jazyk je v mobilnom menu */
  .hdr .hdr__wl{display:none}                   /* Obľúbené sú v mobilnom menu */
  .hdr{gap:6px;--hdr-pad:10px}
  .hdr__right{gap:5px}
  .brand__wm{height:17px}
  .srchd>summary{width:30px}
}

/* ── Skúšobňa ─────────────────────────────────────────────────────────────
   Rozhodovacia obrazovka: dva kúsky vedľa seba a veta, ako sadnú.

   Zrkadlo drží DVA stĺpce na každej šírke — aj na 375 px. Nie je to lenivosť:
   pri 16 px odsadení a 10 px medzere vyjde stĺpec 166 px a fotka 144 px, čo
   sa dá čítať. Tri stĺpce by dali fotku 108 px, a to už je náhľad, nie
   rozhodovanie. Preto sa počet slotov nemení, mení sa len mierka.

   Obe karty musia byť rovnako vysoké, inak sa verdikty nedajú porovnať
   pohľadom — drží to min-height na jednotlivých riadkoch, nie subgrid
   (ten by sa v starších prehliadačoch ticho rozpadol). */
.sks__nadpis{font-family:var(--serif);font-size:clamp(17px,2vw,22px);
  margin:26px 0 10px;font-weight:500}
.sks__zrkadlo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,2vw,24px);
  align-items:start}
/* Horné odsadenie drží miesto pre stuhu — na OBOCH kartách, aj na tej bez nej.
   Keby si stuha miesto brala až keď je, posunula by obsah víťaznej karty
   nižšie a verdikty by neboli v jednej línii. Celý zmysel dvoch stĺpcov je
   porovnanie pohľadom; nezarovnané riadky ho rušia. */
.sks__kus{position:relative;display:flex;flex-direction:column;
  padding:clamp(10px,1.4vw,16px);padding-top:32px;
  border:1px solid var(--line);background:var(--paper)}
/* Kúsok, ktorý sadne lepšie, dostane zlatú linku na hornej hrane — nie odznak
   cez fotku. Maskot značky je stuha; toto je jej jediná stopa na tejto
   obrazovke a nesmie prekryť tovar. */
.sks__kus.is-lepsi{border-color:var(--line-gold)}
.sks__kus.is-lepsi::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;
  height:2px;background:var(--gold)}
.sks__stuha{position:absolute;top:11px;left:clamp(10px,1.4vw,16px);
  font:600 9.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep)}
.sks__foto{display:block;aspect-ratio:3/4;overflow:hidden;background:var(--cream)}
.sks__foto img{width:100%;height:100%;object-fit:cover;object-position:top center}
.sks__nazov{display:block;margin-top:10px;font-family:var(--serif);
  font-size:clamp(15px,1.6vw,17px);line-height:1.3;color:var(--ink);
  text-decoration:none;min-height:2.6em}
.sks__vel{font:600 10.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:6px 0 0}
.sks__cena{font-weight:600;margin:4px 0 0;min-height:1.5em}
/* Veta verdiktu je HLAVNÝ text obrazovky — na telefóne nikdy pod 16 px. */
.sks__verdikt{font-family:var(--serif);font-size:clamp(16px,1.8vw,19px);line-height:1.35;
  margin:12px 0 2px;min-height:2.7em}
.sks__zaklad{min-height:2.6em;margin:0}
.sks__akcie{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.sks__akcie form{margin:0}
.sks__zhoda{font-family:var(--serif);font-size:16px;color:var(--muted);margin:14px 0 0}
.sks__vyzva{display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:12px 14px;border:1px solid var(--line-gold);background:var(--cream);margin:16px 0 0}

/* Vešiak: zvyšok Skúšobne. Zvýrazňuje sa rámom a tieňom, NIKDY posunom —
   hover, ktorý dlaždicu pohne, rozkmitá obraz (tá istá pasca ako pri
   dlaždiciach v páse s reelami). */
.sks__vesiak{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));
  gap:10px}
.sks__mini{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;
  border:1px solid var(--line);background:var(--cream);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.sks__mini:hover{border-color:var(--gold);box-shadow:0 2px 14px rgba(21,18,12,.14)}
.sks__mini img{width:100%;height:100%;object-fit:cover;object-position:top center}
.sks__minivel{position:absolute;left:0;right:0;bottom:0;padding:4px 6px;
  background:rgba(21,18,12,.72);color:var(--cream);
  font:600 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.sks__pata{margin-top:22px}

/* „Do skúšobne" na detaile — tichý odkaz pod tlačidlom, nie druhé srdiečko. */
.pd__sks{margin-top:10px}
.pd__sks .lnkbtn{font:600 11.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}

@media (max-width:560px){
  /* Dotykové terče: odloženie aj „do skúšobne" sú textové odkazy, ktoré by
     inak mali sotva 16 px na výšku. */
  .sks__akcie .lnkbtn,.pd__sks .lnkbtn{min-height:44px;display:inline-flex;align-items:center}
  .sks__nazov{font-size:15px}
  .sks__verdikt{font-size:16px}
}

/* ── mobilná hlavička: JEDEN RIADOK namiesto dvoch ────────────────────────
   Nameraný stav na 375 px bol takýto:
     testovací pruh   80 px
     pás s dopravou   59 px  (veta sa zalomila na dva riadky)
     hlavička        115 px  (dva riadky)
     ─────────────────────
     spolu           254 px = 31 % obrazovky, kým sa ukáže čokoľvek z obchodu

   Druhý riadok hlavičky niesol len tri ikony s `margin-left:auto`, takže
   223 px naľavo od nich bolo prázdnych. To nie je dýchanie, to je diera.

   Riešenie: značka sa zmenší, ovládače sa vojdú vedľa nej a riadok je jeden.
   Dotykové ciele zostávajú 44 px — zmenšuje sa logo a medzery, nie terče. */
@media (max-width:860px){
  .hdr{--hdr-row1:56px;gap:8px}
  /* Značka do stredu, nie hneď vedľa ☰. Klasické mobilné rozloženie je
     ☰ vľavo · značka v strede · ovládače vpravo; keď logo sedí pri hamburgeri,
     hlavička vyzerá ako nedokončená lišta a stred zíva prázdnotou.

     Robí to `margin-inline:auto` na značke, nie `justify-content` na hlavičke:
     tá je flex s tromi rôzne širokými skupinami a centrovanie celku by značku
     posunulo mimo osi. Automatické okraje ju vycentrujú voči zvyšnému miestu
     bez ohľadu na to, aké široké sú ikony vpravo. */
  .brand{min-height:56px;margin-inline:auto}
  /* Wordmark je široký 560×59; na 19 px výšky mal 180 px šírky a spolu
     s ikonami sa do 343 px použiteľnej šírky nezmestil. */
  .brand__wm{height:17px}
  .hdr__right{gap:2px}
  /* Kresba v terči mala 18 px v 44 px ploche, čo pôsobí neisto. Terč sa
     nemení, rastie len to, čo je vidieť.
     PASCA: `.hdr__right svg` (0,1,1) neprejde — `.srchd>summary svg` na
     riadku 238 má (0,2,1) a vyhráva bez ohľadu na poradie v hárku.
     Preto o triedu viac. */
  .hdr .hdr__right svg{width:24px;height:24px}

  /* Pravá strana hlavičky ide CELÁ preč — hľadanie, srdiečko, vlajky aj
     košík teraz stoja v spodnej lište, kde majú 56 px a popisku. Zostáva
     ☰ vľavo a značka v strede.

     Prázdny priestor vpravo je zámerný: bez neho by `margin-inline:auto`
     na značke nemalo voči čomu centrovať a logo by sedelo natlačené pri
     hamburgeri. Preto sa hlavička na telefóne prepína na mriežku s tromi
     stĺpcami, kde tretí je rovnako široký ako ☰ — symetrická medzera, nie
     diera po presunutých ikonách. */
  .hdr__right{display:none}
  /* Protiváha k ☰. Hlavička zostáva flexom (prepnutie na mriežku by
     rozhodilo `order` a zalomenie do druhého riadku, na ktorých stojí celé
     jej rozloženie) — stačí prázdny prvok tej istej šírky na druhej strane.
     `flex:0 0 44px` je dôležité: bez toho by ho `flex-wrap` pri úzkom
     displeji poslal na vlastný riadok a hlavička by narástla. */
  .hdr::after{content:'';flex:0 0 44px;height:1px}

  /* Pás s dopravou na jeden riadok. */
  .topbar{font-size:11px;letter-spacing:.08em;padding:7px 14px}
  /* PASCA (opakovaná): `.topbar` a `.topbar--beh` majú rovnakú váhu, takže
     rozhoduje poradie v súbore — a tento riadok je nižšie. Bez toho by
     bežiaci pás dostal späť 14 px odsadenia po stranách a text by na
     telefóne vybiehal a vbiehal z prázdneho okraja. */
  .topbar--beh{padding-inline:0}
  .topbar__i{padding:0 18px}
}
/* ── SPODNÁ LIŠTA (telefón) ───────────────────────────────────────────────
   Nad 860 px neexistuje: na myši je palcová zóna nezmysel a hlavička má
   dosť miesta na všetko.

   Terč má 56 px na výšku a celú šírku svojho podielu — palec sa netrafí do
   ikony, trafí sa do stĺpca. Popiska pod ikonou nie je ozdoba: vešiak
   Skúšobne neuhádne nikto a srdiečko znamená v každom obchode niečo iné. */
.spodna{display:none}
@media (max-width:860px){
  .spodna{position:fixed;left:0;right:0;bottom:0;z-index:59;
    display:flex;background:rgba(251,248,241,.97);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);
    /* Spodný okraj iPhonu patrí systémovej čiarke. Bez `safe-area` by pod
       ňou skončili popisky a posledný riadok by sa nedal prečítať. */
    padding-bottom:env(safe-area-inset-bottom,0px)}
  .spodna__i{flex:1 1 0;min-width:0;position:relative;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    min-height:58px;padding:8px 2px 7px;color:var(--ink);
    /* 11 px, nie typických 10 px z mobilných aplikácií. Celá táto úprava
       vznikla z „malé ikonky, malé písmo" — držať sa spodnej hranice
       zvyklosti by ten problém zopakovalo o poschodie nižšie. */
    font:600 11px/1.1 var(--sans);letter-spacing:.04em;text-transform:uppercase;
    text-align:center;-webkit-tap-highlight-color:transparent}
  .spodna__i svg{width:25px;height:25px;flex:none}
  /* Na najužších telefónoch (320 px) by päť popisiek po 11 px pretieklo —
     tam sa zmenší písmo, nie terč. */
  @media (max-width:359px){
    .spodna__i{font-size:9.5px;letter-spacing:0}
    .spodna__i svg{width:23px;height:23px}
  }
  .spodna__i span:not(.spodna__n){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    max-width:100%}
  /* Stlačenie musí byť vidieť okamžite. Na dotyku niet hoveru a bez odozvy
     má človek pocit, že klik nechytil, a klikne druhý raz. */
  .spodna__i:active{background:rgba(21,18,12,.06)}
  /* Stránka, na ktorej práve stojím, sa označuje zlatým vláskom nad ikonou —
     nie plnou farbou. Farebné pole by z lišty spravilo najkrikľavejšiu vec
     na obrazovke, a to má byť fotka. */
  .spodna__i[aria-current]{color:var(--gold-deep)}
  .spodna__i[aria-current]::before{content:'';position:absolute;top:0;left:22%;right:22%;
    height:2px;background:var(--gold-deep)}
  .spodna__n{position:absolute;top:5px;left:50%;margin-left:4px;
    display:flex;align-items:center;justify-content:center;
    min-width:17px;height:17px;padding:0 4px;border-radius:9px;
    background:var(--gold-deep);color:#fff;font:600 10px/1 var(--sans);letter-spacing:0}
  .spodna__n[hidden]{display:none}

  /* Lišta prekrýva spodok stránky. Bez tejto medzery by pod ňou navždy
     zostal koniec pätičky — a na stránke košíka aj tlačidlo objednávky. */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  /* Dora, oznam „pridané do košíka" aj panel Dory sedeli 18 px nad spodkom
     obrazovky, teda presne v lište. Dvíhajú sa nad ňu. */
  .dora,.dora__panel{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  .added{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
  /* Kým visí cookie lišta, spodná navigácia sa nekreslí vôbec. Nie je to
     ústupok: cookie lišta je fixovaná na spodok, meria okolo 140 px a
     navigáciu by aj tak celú zakryla — takto sa aspoň nestohujú dva
     fixované pásy cez seba. Súhlas sa potvrdí jedným ťuknutím a
     `consent.js` triedu z <body> odoberie bez znovunačítania, takže sa
     lišta objaví hneď.
     Odsadenie tela drží medzitým `body.has-cbar{padding-bottom:140px}`
     (0,2,0), ktoré prebíja moje `body` (0,0,1) — poradie sedí samo. */
  body.has-cbar .spodna{display:none}
}

/* ── POZVÁNKA DO APLIKÁCIE ────────────────────────────────────────────────
   Tichý pás nad spodnou lištou. Nie okno cez obsah — značka hovorí
   „nikdy cez produkt" a vyskakovacie okno cez fotku šiat je presný opak.

   PASCA (tá istá, čo už raz zhodila panel Dory aj asistenta v admine):
   autorské `display` PREBÍJA atribút `hidden`. Bez pravidla nižšie by sa
   pás ukázal každému hneď, aj keď ho JavaScript ešte neodomkol. */
.pwa{position:fixed;left:0;right:0;bottom:0;z-index:58;
  background:var(--ink);color:var(--cream);
  box-shadow:0 -8px 30px rgba(21,18,12,.28);
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* ZÁMERNE BEZ `both`. S výplňou by pás pri nespustenej animácii držal
     stav `from`, teda posun o celú svoju výšku mimo obrazovky — a bol by
     neviditeľný napriek tomu, že sa „ukázal". Tá istá pasca ako pri
     odhaľovaní obsahu rolovaním: koncový stav musí byť ten základný. */
  animation:pwaHore .5s var(--ease)}
.pwa[hidden]{display:none}
/* Kým visí cookie lišta, pozvánka sa nekreslí. Cookie lišta je fixovaná
   na spodok, meria okolo 140 px a pozvánku by aj tak zakryla — dva pásy
   cez seba sú len neporiadok. Súhlas je aj tak rozhodnutie, ktoré sa má
   vyriešiť ako prvé. */
body.has-cbar .pwa{display:none}
@keyframes pwaHore{from{transform:translateY(100%)}to{transform:none}}
.pwa__in{display:flex;align-items:center;gap:12px;
  width:min(100% - 24px,700px);margin-inline:auto;padding:12px 0}
.pwa__ico{flex:none;width:40px;height:40px;border-radius:var(--r)}
.pwa__txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pwa__txt b{font:600 13px/1.3 var(--sans);letter-spacing:.02em}
.pwa__txt span{font-size:12px;line-height:1.45;color:rgba(244,239,229,.72)}
.pwa__ok{flex:none;background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.pwa__x{flex:none;width:34px;height:34px;border:0;background:none;cursor:pointer;
  color:rgba(244,239,229,.55);font-size:22px;line-height:1;padding:0}
.pwa__x:hover{color:var(--cream)}
/* Pás sedí NAD spodnou lištou, nie cez ňu. Prvá verzia mala oboje na
   `bottom:0` a lišta (z-index 59) pozvánku prekryla; skrývať kvôli ponuke
   navigáciu je horší nápad než ponuku posunúť. Dora ustúpi o obe. */
@media (max-width:860px){
  .pwa{bottom:calc(58px + env(safe-area-inset-bottom,0px))}
  body.ma-pwa .dora,body.ma-pwa .dora__panel{
    bottom:calc(58px + var(--pwa-h,68px) + 12px + env(safe-area-inset-bottom,0px))}
}
@media (min-width:861px){
  /* Na počítači nemá „pridať na plochu" zmysel ako pás cez celú šírku —
     tam si to človek spraví z adresného riadku. */
  .pwa{display:none}
}
@media (max-width:420px){
  .pwa__txt span{display:none}   /* na úzkom displeji stačí nadpis a tlačidlo */
}

/* jazykový prepínač v mobilnom paneli */
.mnav__lang{display:flex;gap:10px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line)}
.mnav__lang a{display:flex!important;align-items:center;gap:8px;padding:8px 12px!important;
  border:1px solid var(--line);font:600 12px/1 var(--sans)!important;
  letter-spacing:.08em;border-bottom:1px solid var(--line)!important}
.mnav__lang a.is-on{border-color:var(--gold-deep);color:var(--gold-deep)}
.mnav__lang .flag{width:18px;height:12px}

/* čip „Vo vašej veľkosti" — zlatý akcent nad filtrami */
.fchip--moja{border-color:var(--gold-deep);color:var(--gold-deep);font-weight:600}
.fchip--moja.je{background:var(--gold-deep);color:#fff;border-color:var(--gold-deep)}
.fchip--moja.je .fchip__n{color:rgba(255,255,255,.7)}

/* ── farebný filter: základná farba s krúžkom ─────────────────────────────
   POZOR NA ŠPECIFICITU: v tomto súbore sú DVA bloky pre chipy a v páse
   filtrov vyhráva `.fgrp__chips a` (0,1,1) nad `.fchip` (0,1,0). Pravidlá
   nižšie preto mieria do `.fgrp__chips a`, nie do `.fchip` — inak by
   neplatili. Zvolený stav `.fchip.je` (0,2,0) prebíja oboje. */

/* Krúžok robí z pásu paletu: oko ho prečíta skôr než text a na telefóne je
   farba jediné, čo sa dá spoľahlivo trafiť palcom. */
.fchip__d{width:14px;height:14px;border-radius:50%;flex:0 0 14px;
  border:1px solid rgba(21,18,12,.22);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}   /* aby biela nezmizla */
.fchip.je .fchip__d{border-color:rgba(218,165,32,.55)}
/* Vzor nie je farba — kosý ťah namiesto plochy to povie bez slova. */
.fchip__d--vzor{background:repeating-linear-gradient(45deg,
  #6B4A2B 0 3px,#E8DCC2 3px 6px)}

/* Druhá úroveň je PODRIADENÁ: bez krúžku, menším písmom, priehľadné pozadie.
   Dva rovnocenné rady chipov by boli ten istý problém, len o riadok nižšie. */
.fgrp--fo .fgrp__t{color:var(--gold-deep)}
.fgrp--fo .fgrp__chips a{padding:6px 11px;font-size:12px;background:transparent}

/* ── MOBIL ────────────────────────────────────────────────────────────────
   Pre filtračný pás dosiaľ neexistovala ANI JEDNA @media query — 22 chipov
   sa iba zalomilo cez flex-wrap do šiestich rôzne dlhých riadkov a cieľ
   palca mal ~34 px pri odporúčaných 44. To bola priama príčina problému.

   Mriežka je celý trik: rovnaký počet prvkov v zákrytoch sa číta ako paleta,
   v zalomenom flexe ako sutina. minmax si sám zvolí 3 alebo 4 stĺpce.

   Vodorovný pás so scrollom sme zámerne nepoužili: globálny overflow-x:clip
   na html/body by ho odrezal — a skrytý obsah znižuje šancu, že si
   zákazníčka filter vôbec všimne. */
@media (max-width:560px){
  .fbar{gap:16px;padding:14px 0}
  .fgrp{width:100%}
  .fgrp__chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
    gap:8px}
  .fgrp__chips a{min-height:44px;padding:6px 10px;font-size:12.5px;
    justify-content:flex-start}
  .fchip__n{margin-left:auto}                 /* čísla tvoria stĺpec vpravo */
  .fchip--moja{min-height:44px}
  .fclear{align-self:flex-start;min-height:44px;display:inline-flex;align-items:center}
}

/* ── zrolované filtre na telefóne ─────────────────────────────────────────
   Deväť veľkostí a jedenásť farieb zaberie nad výpisom takmer pol obrazovky
   a zákazníčka sa k tovaru prerolováva cez niečo, čo väčšina z nich nepoužije.
   Skupina bez zvoleného filtra sa preto zabalí; ktorá filter má, zostáva
   otvorená — nikto nesmie stratiť prehľad o tom, čo si už navolil.

   `open` je v HTML vždy, zatvára až shop.js. Bez JavaScriptu teda ostane
   všetko rozbalené ako doteraz: horší komfort, ale nič sa neschová. */
@media (max-width:560px){
  .fgrp{border-bottom:1px solid var(--line);padding-bottom:12px;gap:10px}
  .fgrp:last-of-type{border-bottom:0}
  /* Celý riadok je dotykový terč, nie len text. Šípka vpravo hovorí, že sa to
     dá otvoriť — v zavretom stave je to jediný signál, ktorý zákazníčka má. */
  .fgrp__t{display:flex;align-items:center;gap:10px;min-height:44px;
    cursor:pointer;font-size:11px;color:var(--ink)}
  .fgrp__t::after{content:'';flex:none;width:7px;height:7px;margin-left:auto;
    border-right:1.5px solid var(--gold-deep);border-bottom:1.5px solid var(--gold-deep);
    transform:rotate(45deg) translateY(-2px);transition:transform .2s}
  .fgrp[open]>.fgrp__t::after{transform:rotate(-135deg) translateY(-2px)}
  /* Zvolené hodnoty za názvom — zavretá skupina tak stále hovorí, čo je v nej.
     Zlatou, aby bolo na prvý pohľad vidieť, že filter je aktívny. */
  .fgrp__sum{display:block;font:400 12px/1.3 var(--sans);letter-spacing:0;
    text-transform:none;color:var(--gold-deep);overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;max-width:52%}
}

/* Lehota na vrátenie pod tlačidlom Do košíka.
   Tichšia než riadok dostupnosti — je to istota, nie výzva. Zlatá bodka
   pred textom ju odlíši od skladovej hlášky bez toho, aby s ňou súperila. */
/* Riadok dostupnosti nemal pravidlo, takže bežal na predvoľbe prehliadača:
   16 px v plnej tmavej. Susedné riadky pod tlačidlom majú 12 a 13 px v tlmenej
   farbe, takže najtichší údaj v bloku bol ten najhlasnejší. Stav „na objednávku"
   sa navyše ničím nelíšil od skladového. */
.stock{margin:8px 0 0;font-size:13px;color:var(--ink-soft);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.5}
.stock b{font-weight:600}
.stock--order{color:var(--gold-deep)}
.stock__ret{margin:6px 0 0;font-size:13px;color:var(--muted);
  display:flex;align-items:center;gap:8px}
.stock__ret::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;
  background:var(--gold-deep)}

/* ── Kontakty ─────────────────────────────────────────────────────────────
   Dva stĺpce: vľavo odpovede na tri otázky, ktoré tvoria väčšinu pošty,
   vpravo formulár a priame údaje. Poradie je zámerné — kto nájde odpoveď
   vľavo, nemusí písať, a to je pri jednom človeku na obsluhe cennejšie
   než pekný formulár. Na mobile ide formulár POD odpovede z rovnakého
   dôvodu. */
.kont{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);
  gap:clamp(28px,4vw,56px);align-items:start;margin-top:8px}
@media (max-width:860px){.kont{grid-template-columns:minmax(0,1fr)}}

.kont__faq h2,.kont__box h2{font-size:clamp(19px,2.2vw,23px);margin:0 0 14px}

/* Otázky sú <details> — bez JavaScriptu a bez toho, aby stránka na začiatku
   vyzerala ako stena textu. */
.kfaq{border-bottom:1px solid var(--line);padding:2px 0}
.kfaq>summary{list-style:none;cursor:pointer;padding:14px 0;
  font-family:var(--serif);font-size:16px;color:var(--ink);
  display:flex;align-items:center;gap:12px}
.kfaq>summary::-webkit-details-marker{display:none}
.kfaq>summary::after{content:'+';margin-left:auto;color:var(--gold-deep);font-size:17px}
.kfaq[open]>summary::after{content:'\2212 '}
.kfaq>summary:hover{color:var(--gold-deep)}
.kfaq p{margin:0 0 14px;font-size:14.5px;line-height:1.75;color:var(--ink-soft)}
.kfaq__klub{color:var(--gold-deep)!important}

.kont__box{background:#fff;border:1px solid var(--line);padding:clamp(20px,2.6vw,28px)}
.kont__lead{margin:0 0 16px;font-size:14px;color:var(--muted)}
.kont__f .fld{display:block;margin-bottom:12px}
.kont__f .lbl{display:block;margin-bottom:5px;font:600 11px/1.4 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.kont__f .inp{width:100%;box-sizing:border-box}
.kont__f .btn{width:100%;margin-top:4px}
.kont__gdpr{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--muted)}

.kont__priamo{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.kont__priamo p{margin:0 0 6px;font-size:14px}
.kont__odber{color:var(--ink-soft);line-height:1.7}
.kont__ico{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:12px;line-height:1.7;color:var(--muted)}

/* ══ DOTYKOVÉ TERČE A DROBNÉ DOROVNANIA ═══════════════════════════════════
   Zámerne na konci a v jednom kuse: sú to opravy z merania v prehliadači pri
   390 px, kde väčšina ovládania nedosahovala 44 \D7  44 px — hranicu, na ktorú sa
   dá spoľahlivo trafiť palcom. Pätička si ju na riadkoch 612–616 dorovnáva už
   dávno, hlavička, karty, detail, košík a pokladňa ju nedostali.

   Keď sa niečo z tohto bude meniť, meňte to TU, nie rozsypané po súbore. */

/* Menovka pre zoskupené tlačidlá. Bez deklarovanej medzery na seba orámovania
   na mobile nasadnú a spoja dve tlačidlá do jedného útvaru. */
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 0}

/* Súhrnný odkaz „Všetko v kategórii…" v mobilnom menu. Bez pravidla vyzeral
   presne ako bežná vetva menu nad ním, teda ako ďalšia podkategória. */
@media (max-width:1100px){
  .mnav__v .mnav__all{display:flex;align-items:center;min-height:44px;
    margin-top:4px;padding-top:12px;border-top:1px solid var(--line);
    font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold-deep)}
}

/* Jediná cesta z prázdnych Obľúbených k prihláseniu — terč mal 51 \D7  18 px,
   kým tlačidlo o riadok vyššie má 207 \D7  43 px. */
.wl-hint a{display:inline-block;min-height:44px;padding:12px 10px;
  color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}

/* Priradenie objednávok k účtu: úkon, ktorý sa robí raz za život účtu a nedá
   sa vrátiť — omylom zaškrtnutý riadok pripojí cudziu objednávku. Políčko malo
   13 \D7  13 px, lebo pravidlo, ktoré ich zväčšuje, vyžaduje obal, ktorý tu nie je. */
.ctbl input[type=checkbox]{width:22px;height:22px;accent-color:var(--gold-deep);margin:0}

/* Hlavička: „Kategórie" je na telefóne JEDINÁ cesta do katalógu a merala
   28 \D7  22 px. Mobilný zlom skrýva textové popisy vedľa ikon, takže terč sa
   nemá čím rozšíriť sám. */
@media (max-width:1100px){
  .mnav>summary{min-width:44px;min-height:44px;padding:11px;justify-content:center}
}
@media (max-width:1279px){
  .acct,.cart{min-width:44px;min-height:44px;justify-content:center}
}

/* Karty vo výpise: srdiečko a „Vybrať veľkosť" sa na stránke opakujú 13-krát. */
@media (max-width:760px){
  .wl{width:44px;height:44px}
  .wl svg{width:20px;height:20px}
}
.card__buy .btn{min-height:44px}

/* Detail produktu. */
/* Chip štýlového DNA je <a> (klikateľný filter), samotné odsadenie ho na 44 px
   nedotiahlo — meraný bol 37,9 px. Preto výslovná min-height a inline-flex,
   aby sa text zvisle vycentroval. */
.dna__chip{display:inline-flex;align-items:center;min-height:44px;padding:10px 15px;line-height:1.3}
.doraask{padding:14px 18px}
@media (max-width:900px){
  .wl--pd{width:44px;height:44px}
  .wl--pd svg{width:22px;height:22px}
}

/* Košík a pokladňa: stepper množstva je najčastejšie ťukaný prvok v košíku
   (32 \D7  35 px), krížik na odobratie riadku mal 34 \D7  34 px. */
@media (max-width:560px){
  .qty button{width:44px;min-height:44px}
  .qty input[type=number]{width:44px;padding:13px 1px}
  /* .ci__del je <form>; ťuká sa tlačidlo v ňom (inak 34 \D7  34 px). */
  .ci__del button[aria-label]{width:44px;height:44px}
  .chk{padding:6px 0}
  .cartlist__foot a,.cartlist__foot .linkish{display:inline-flex;align-items:center;min-height:44px}
}

/* Dvojstĺpec Meno/Priezvisko sa v účte zbalí skôr než mriežka panelov. Inak by
   v pásme 861–1000 px bežal vnútri panela širokého tretinu obrazovky a poľu by
   ostalo asi 65 px, teda päť znakov. */
@media (max-width:1080px){.acct-grid .grid-2{grid-template-columns:1fr}}

/* ── Čakáte na (strážené veľkosti na /pre-vas) ────────────────────────────
   Zoznam visí POD kartou, nie v nej: tlačidlo vnútri .card by kliknutím
   navigovalo na produkt namiesto zrušenia stráženia. */
.pvwl{display:flex;flex-direction:column}
.pvwatch{list-style:none;margin:8px 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px;font-size:12.5px}
.pvwatch>li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 0;border-top:1px solid var(--line)}
.pvwatch__v{font-weight:600;letter-spacing:.04em}
.pvwatch__in{color:var(--ok);font-weight:600}
.pvwatch__f{margin:0 0 0 auto}
/* Zrušenie je tichý odkaz, nie tlačidlo: nemá súťažiť s nákupom. Terč má
   napriek tomu 44 px, lebo sa naň ťuká palcom. */
.pvwatch__x{background:none;border:0;padding:6px 2px;min-height:44px;
  color:var(--muted);font:inherit;text-decoration:underline;
  text-underline-offset:3px;cursor:pointer}
.pvwatch__x:hover{color:var(--bad)}
.pvwatch__ok{margin:0 0 14px;color:var(--ok);font-size:14px}

/* ══ DRUHÉ KOLO AUDITU — plochy, ktoré prvý audit nevidel ═════════════════
   Poukazy, sprievodca štýlom, chat s Dorou, magazín, obľúbené a hľadanie.
   Rovnaké tri okruhy ako predtým: chýbajúce pravidlo, malý terč, kontrast. */

/* ── poukaz: hlavička konfigurátora ──────────────────────────────────────
   .gvcfg__h dedila 20 px Playfair na OBE deti, takže vysvetľujúca veta bežala
   ako nadpis a na tej istej účiare — líšila sa len hrúbkou písma. */
.gvcfg__h strong{display:block;font-family:var(--serif);font-size:17px;line-height:1.3;font-weight:500}
.gvcfg__h span{display:block;margin-top:5px;font:400 13.5px/1.65 var(--sans);color:var(--muted)}

/* ── poukaz: tlač ────────────────────────────────────────────────────────
   Na papier patrí poukaz, nie formulár na jeho úpravu a hláška „Uložené".
   Zúžené na .gvpage: .panelbox a .okbox sú aj v účte a v doklade o súhlase
   s cookies, kde sa tlačiť MAJÚ. */
@media print{
  .gvpage .panelbox,.gvpage .okbox{display:none!important}
  /* body.has-cbar drží 140 px pre cookie lištu. Tlačový blok vyššie nuluje
     odsadenie na main/.wrap/.gvpage, ale na body zabudol — pri venovaní
     zhruba 300–460 znakov sa poukaz na stranu ešte vojde, ale tých 140 px
     už nie, a z tlače vypadne druhá, úplne prázdna strana. */
  body.has-cbar{padding-bottom:0!important}
}

/* ── magazín: obrázky v článkoch ─────────────────────────────────────────
   Telá článkov nenesú width/height, takže sa obsah pri dočítaní posunie.
   aspect-ratio to drží aj bez atribútov v HTML. */
.rte img{max-width:100%;height:auto}

/* ── hľadanie: pole na stránke hľadania ──────────────────────────────────
   .sec-h je vodorovný flex; na telefóne v ňom ostalo poľu 77 px — a to práve
   na stránke, ktorej jediným zmyslom je napísať dopyt. */
@media (max-width:760px){
  .sec-h{flex-wrap:wrap}
  .srch--page{flex-wrap:wrap;width:100%}
  .srch--page .inp{flex:1 1 100%}
  .srch--page .btn{min-height:44px}
}

/* ── dotykové terče, druhé kolo ──────────────────────────────────────────
   Merané pri 390 px. Hranica je 44 px; nižšie sa palcom netrafí spoľahlivo. */
.srchd>summary{min-width:44px;min-height:44px}
.doraask{min-height:44px}
/* Odosielacie tlačidlo chatu je .btn--sm, teda 33,4 px — a je to hlavné
   tlačidlo celého chatu. Globálne .btn--sm sa nemení, používa sa aj inde;
   zvyšuje sa len v rámci formulára Dory. */
.dora__f .btn{min-height:44px}
@media (max-width:760px){
  /* Malé tlačidlá sú na telefóne často jedinou cestou ďalej — napríklad
     „Detail" pri objednávke v účte. */
  .btn--sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
}
/* „Moje body →" a podobné textové odkazy v paneloch účtu. */
.acct-page .linkish,.pvsec .linkish{display:inline-flex;align-items:center;min-height:44px}

/* ── panel hľadania nad mobilným menu ────────────────────────────────────
   Otvorené menu má vyššiu vrstvu než panel pod lupou; bez toho panel visel
   nad rozbaleným menu a prekrýval prvé položky. */
@media (max-width:1100px){
  .mnav[open]{position:relative;z-index:80}
}

/* Číslo objednávky vo výpise účtu je odkaz do detailu — tlačidlo v poslednom
   stĺpci je na telefóne mimo obrazovky. Pri ≤560 px sa ten stĺpec skryje, aby
   tabuľka prestala pretekať; cesta ďalej vedie cez číslo. */
.ordno{display:inline-flex;align-items:center;min-height:44px;
  color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px}
.ordno code{font-family:var(--mono);letter-spacing:.04em}
@media (max-width:560px){
  .ctbl--obj thead th:last-child,.ctbl--obj tbody td:last-child{display:none}
}

/* ── DRUHÉ KOLO AUDITU, DRUHÁ DÁVKA ───────────────────────────────────────
   Zvyšok nálezov z kola 2: terče, kontrasty a mŕtve pravidlá. */

/* Základné .btn malo 42,6–43 px, teda 1–1,4 px pod hranicou. Vyňaté je
   .btn--sm: to je zámerne drobný variant a na telefóne ho na 44 px dvíha
   pravidlo vyššie. Tým sa `.card__buy .btn` (tiež --sm) nemení. */
.btn:not(.btn--sm){min-height:44px}
/* Tlačidlo „Hľadať" v paneli pod lupou je .btn--sm, teda 33,4 px — a je to
   na KAŽDEJ stránke webu, aj na desktope, kde pravidlo pre mobil neplatí. */
.srchd__panel .btn{min-height:44px}
/* Chipy kategórií v prázdnom výsledku hľadania sú jediná ponúknutá cesta
   ďalej v tom bloku. Rám --line-gold má na papieri 1,74:1 pri norme 3:1
   pre hranicu ovládacieho prvku; nepriehľadný --gold-deep dáva 5,06:1.
   Rozostupy rieši flex v šablóne, nie inline style="margin:3px". */
.empty .btn--sm{min-height:44px}
.empty .btn--ghost{border-color:var(--gold-deep)}
.empty__chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px}

/* Drobčeková navigácia mala terč 20,6 px na výšku. Rozširuje sa LEN zásahová
   plocha cez ::after — .crumbs je v 16+ šablónach a zväčšenie riadka na 44 px
   by všade posunulo zvislý rytmus. Vodorovný gap 6 px sa neprekryje, lebo
   pás kopíruje šírku odkazu. */
.crumbs a{position:relative;z-index:1}
.crumbs a::after{content:"";position:absolute;left:0;right:0;top:50%;
  transform:translateY(-50%);height:44px}
/* z-index:1 nie je ozdoba: nasledujúci nadpis je v .sec-h.rv, ktorý má
   transform (scroll-reveal) a tým vlastný stohovací kontext — bez neho
   prekryl spodných 7 px pásu a z terča ostalo 37 px namiesto 44. */

/* Odkazy v paneloch partnerského programu sú obyčajné <a> v <p class="muted">
   a merali 21,6 / 18,4 px — pritom „Bannery a odkazy →" je JEDINÁ cesta na
   /ucet/partner/bannery. */
.panelbox p>a{display:inline-flex;align-items:center;min-height:44px}

/* ── Doladenie 2026-08: viac života bez zásahu do rozloženia ──────────────
   Všetko nižšie je čisto vizuálne — nemení sa poradie, rozmery ani správanie
   prvkov, takže to nemôže rozbiť funkcionalitu. Celý blok je pod `html.js`
   len tam, kde by bez JavaScriptu vznikol zlý stav; zvyšok platí vždy.
   Reduced-motion vypína pohyb globálnym pravidlom hore (riadok ~109). */

/* Nadpis sekcie dostane vlasovú zlatú linku. Je STATICKÁ zámerne.
   Prvý pokus ju kreslil zľava doprava pri odhalení a nefungoval — v tomto
   obchode platí pravidlo, ktoré si treba pamätať: keď prehliadač vie
   `animation-timeline: view()`, shop.js observer vôbec nezaloží a triedu
   `.in` NIKTO nepridá. Každé pravidlo viazané na `.in` je teda na moderných
   prehliadačoch mŕtve. Vlastný timeline na pseudo-prvku sa tiež nechytil,
   takže linka zostávala navždy na scaleX(0) — teda neviditeľná.
   Radšej pekná a vždy prítomná než animovaná a chýbajúca. */
.sec-h{position:relative}
.sec-h::after{content:"";position:absolute;left:0;bottom:-10px;height:1px;
  width:100%;background:linear-gradient(90deg,var(--gold),transparent)}

/* Hlavička po odscrollovaní zhustne: menší vnútorný priestor a mliečne
   pozadie namiesto plného. Doteraz pribudol len tieň, čo bolo sotva vidno. */
.hdr{transition:padding .35s var(--ease),background-color .35s var(--ease)}
.hdr.is-scrolled{background:rgba(253,251,247,.86);backdrop-filter:saturate(1.4) blur(10px)}
@supports not (backdrop-filter: blur(10px)){.hdr.is-scrolled{background:var(--paper)}}

/* Tlačidlá: výplň sa pri prejdení NASUNIE zľava, neprepne sa skokom.
   Predtým tu cez ::before prebehol len priehľadný zlatý záblesk, kým samotná
   farba tlačidla skákala cez `background`. Teraz je ::before samotná výplň
   a mení sa jej šírka — text ani rám sa nehýbu a na dotykových zariadeniach
   sa neudeje nič. Farbu nesie premenná, nech si ju každý variant určí sám. */
.btn{position:relative;overflow:hidden;isolation:isolate;--btn-fill:var(--ink);
  transition:color .35s var(--ease),border-color .35s var(--ease),transform .5s var(--ease)}
.btn--cta{--btn-fill:var(--gold-deep)}
.hero .btn{--btn-fill:var(--gold)}
.hero .btn--cta{--btn-fill:var(--cream)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--btn-fill);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--ease)}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1)}
/* Pôvodné skokové výplne sa rušia — farbu písma si každý variant ponecháva,
   len pozadie ostáva na základnej hodnote a prekryje ho nasúvaný pruh. */
.btn:hover{background:none}
.btn--cta:hover{background:var(--ink)}
.hero .btn:hover{background:none}
.hero .btn--cta:hover{background:var(--gold)}

/* Magnetické tlačidlo: kým sa po ňom pohybuje kurzor, prikloní sa oň pár
   pixelov. Triedu pridáva shop.js len na myši — počas ťahania sa transform
   nesmie plynúť, inak by sa vliekol za kurzorom. */
.btn.is-magnet{transition:color .35s var(--ease),border-color .35s var(--ease),transform 0s}
@media (prefers-reduced-motion:reduce){
  .btn,.btn::before{transition:none}
  .btn.is-magnet{transform:none!important}
}

/* Fotka v dlaždici sa pri prejdení nielen priblíži, ale aj jemne rozjasní —
   zväčšenie samo o sebe pôsobilo ploché. */
.card__img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(21,18,12,.14));
  opacity:0;transition:opacity .5s var(--ease)}
.card:hover .card__img::after{opacity:1}

/* Cena na detaile dosadne o kúsok neskôr než názov — drobnosť, ktorá dá
   pravému stĺpcu poradie čítania namiesto jedného bloku textu. */
.pd__info>.pd__price{transition-duration:.9s}

/* ── Rad reelov z Instagramu ──────────────────────────────────────────────
   Jeden rad, ktorý sa nekonečne posúva. Reely ležia u nás a hrajú priamo
   v dlaždici — žiadne prekrytie a žiadne cudzie okno.

   Pás ide cez celú šírku okna, nie v `wrap`: orezané dlaždice po stranách
   samy hovoria, že rad pokračuje ďalej. */
/* Bez horného okraja: pás nadväzuje priamo na tmavý príbeh značky a medzi
   nimi vznikala krémová štrbina, ktorá vyzerala ako chyba sadzby. Takto obe
   tmavé plochy splynú do jednej. Spodný okraj zostáva — pod ním už je svetlý
   obsah a ten sa oddeliť potrebuje. */
.igr{margin:0 0 72px;padding:44px 0 8px;background:var(--ink);color:var(--cream);
  overflow:hidden}
.igr__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  margin-bottom:26px}
.igr__hd h2{margin:2px 0 0;color:var(--cream)}
.igr__hd .eyebrow{color:var(--gold);margin:0}
.igr__hd .sec-h__more{color:var(--gold);border-bottom:1px solid transparent;padding-bottom:2px}
.igr__hd .sec-h__more:hover{border-bottom-color:var(--gold)}

/* Pás je SKUTOČNE posuvný kontajner, nie animovaný transform. Vďaka tomu ho
   ide chytiť myšou aj potiahnuť prstom — prst obsluhuje priamo prehliadač,
   nič sa naň nemusí programovať. Samočinný posun rieši skript posúvaním
   `scrollLeft`; keby JavaScript zlyhal, zostane obyčajný posuvný rad, ktorý
   sa dá ovládať rukou. */
/* Nadpis nad istotami. Je menší než nadpis recenzií — istoty sú podpora,
   nie hlavné slovo sekcie. */
.trust__sureh{margin:34px 0 18px;text-align:center;font-size:clamp(19px,2.2vw,25px)}

/* Rám drží šípky. Musia byť NAD pásom a nesmú sa s ním posúvať, preto
   potrebujú nepohyblivého rodiča. */
.igr__ram{position:relative}
.igr__sip{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(212,165,42,.4);border-radius:50%;cursor:pointer;
  color:var(--cream);background:rgba(21,18,12,.62);backdrop-filter:blur(6px);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.igr__sip svg{width:22px;height:22px}
.igr__sip:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.igr__sip:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.igr__sip--vlavo{left:clamp(10px,2vw,28px)}
.igr__sip--vpravo{right:clamp(10px,2vw,28px)}
/* Na dotyku sa neukazujú — tam sa posúva prstom a šípky by len prekrývali
   fotku. Rozhoduje schopnosť zariadenia, nie šírka okna: na dotykovom
   notebooku má prst prednosť rovnako ako na telefóne. */
@media (hover:none),(max-width:860px){.igr__sip{display:none}}

.igr__pas{position:relative;width:100%;overflow-x:auto;overflow-y:hidden;
  cursor:grab;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  /* Okraje sa strácajú do tmy, aby rad nikde „nezačínal" ani „nekončil". */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.igr__pas::-webkit-scrollbar{display:none}
.igr__pas.je-tah{cursor:grabbing;scroll-behavior:auto}
.igr__stopa{list-style:none;margin:0;padding:0;display:flex;gap:28px;width:max-content}

.igr__it{position:relative;flex:0 0 auto;width:clamp(200px,17vw,258px);aspect-ratio:9/16;
  overflow:hidden;background:#0F0D08;border:1px solid rgba(212,165,42,.28);
  box-shadow:0 18px 40px rgba(0,0,0,.38);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease)}
/* Dlaždica sa pri prejdení myšou ZÁMERNE nehýbe.
   Pôvodne sa nadvihla o 6 px — lenže tým ušla spod kurzora, prehliadač
   ohlásil opustenie, dlaždica spadla späť, kurzor bol zase na nej a celé sa
   to opakovalo desiatky ráz za sekundu. Obraz sa viditeľne triasol.
   Zvýraznenie preto robí len rám a tieň, ktoré s polohou nehýbu. */
.igr__it:hover{border-color:var(--gold);box-shadow:0 26px 56px rgba(0,0,0,.5)}
.igr__it:hover .igr__v{transform:scale(1.03)}
.igr__v{transition:transform .8s var(--ease)}
.igr__v{width:100%;height:100%;object-fit:cover;display:block}
.igr__znak{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-size:38px;letter-spacing:.08em;color:var(--gold);
  background:radial-gradient(120% 90% at 50% 0,rgba(212,165,42,.16),transparent 62%)}

/* Odkaz na príspevok leží cez celú dlaždicu, ale POD tlačidlom zvuku, aby
   ťuknutie na reproduktor neodnieslo zákazníčku preč zo stránky. */
.igr__odkaz{position:absolute;inset:0;z-index:1}
.igr__it:focus-within .igr__odkaz,
.igr__odkaz:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}

.igr__zvuk{position:absolute;right:10px;bottom:10px;z-index:2;
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;cursor:pointer;color:var(--cream);
  background:rgba(21,18,12,.6);backdrop-filter:blur(4px);
  transition:background .3s var(--ease),color .3s var(--ease)}
.igr__zvuk svg{width:20px;height:20px}
.igr__zvuk:hover{background:var(--gold-deep)}
/* Preškrtnutie = stlmené. Kreslí sa cez pseudo-prvok, takže na prepnutie
   stavu stačí trieda a nemení sa značka. */
.igr__skrt{position:absolute;left:9px;right:9px;top:50%;height:1.5px;background:currentColor;
  transform:rotate(-45deg);transform-origin:center}
.igr__zvuk.je-hlas .igr__skrt{display:none}

@media (max-width:860px){
  .igr{margin:52px 0;padding-top:34px}
  .igr__hd{flex-direction:column;align-items:flex-start;gap:8px;margin-bottom:18px}
  .igr__stopa{gap:16px;animation-duration:48s}
  .igr__it{width:min(58vw,230px)}
}

/* Zbalený zvyšok účtu. Súhrn vyzerá ako nadpis panela, aby bolo jasné, že
   sa pod ním niečo skrýva, a má 44 px na palec. */
.acct-more{margin-top:18px;border-top:1px solid var(--line);padding-top:14px}
.acct-more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  min-height:44px;font-family:var(--serif);font-size:20px;color:var(--ink)}
.acct-more>summary::-webkit-details-marker{display:none}
.acct-more>summary::after{content:"+";margin-left:auto;font:400 22px/1 var(--sans);color:var(--gold-deep)}
.acct-more[open]>summary::after{content:"–"}
.acct-more>summary:hover{color:var(--gold-deep)}
/* Zatvorený <details> obsah SÁM NESKRYL: `.panelbox` má vlastný `display`,
   ktorý prebije skrývanie prehliadača. Je to tá istá pasca ako pri atribúte
   `hidden` — vlastný `display` v triede vždy vyhrá. Preto sa skrýva ručne. */
.acct-more:not([open])>*:not(summary){display:none}

/* ── Miery v účte a označený riadok vo veľkostnej tabuľke ─────────────────
   Miery sú nepovinné a v účte nesmú pôsobiť ako ďalší povinný formulár —
   preto vlastný rámik a menšie polia, nie štyri plnohodnotné riadky. */
.miery{border:1px solid var(--line);padding:12px 14px 4px;margin:14px 0 0}
.miery>legend{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);padding:0 6px}
.miery__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.miery__grid .inp{text-align:center}
@media (max-width:620px){.miery__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Riadok, ktorý zodpovedá jej mieram. Zlatý podklad + hrubší ľavý okraj:
   farba sama by na tlačenej strane ani pri poruche farbocitu nestačila. */
.sguide__t tr.is-moja{background:rgba(212,165,42,.14);box-shadow:inset 3px 0 0 var(--gold-deep)}
.sguide__t tr.is-moja td{font-weight:600}
.sguide__vy{display:inline-block;margin-left:8px;font:600 10px/1.4 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep);white-space:nowrap}

/* Kód na kopírovanie je od opravy <button>, nie <div>: potrebuje teda dediť
   písmo a zarovnanie a mať viditeľné zaostrenie. Rám na 3:1 rieši šablóna. */
.pcode{font:inherit;text-align:left;width:100%;display:block}
.pcode:focus-visible{outline:2px solid var(--gold-deep);outline-offset:2px}
.pcode--static{cursor:default}

/* Cesta von zo záporného verdiktu. Zlatá, aby bola vidieť ako ponuka, nie
   ako ďalšia výhrada — je to jediné miesto na karte, ktoré hovorí „skúste
   toto" namiesto „toto nie". */
.sks__lepsia{margin:6px 0 0}
.sks__lepsia .lnkbtn{font:600 11.5px/1.3 var(--sans);letter-spacing:.06em;
  color:var(--gold-deep);text-align:left}
@media (max-width:560px){
  .sks__lepsia .lnkbtn{min-height:44px;display:inline-flex;align-items:center}
}

/* Poznámka o hraniciach verdiktu. Nie je to drobné písmo na skrytie —
   je to jediné miesto, kde Skúšobňa priznáva, čo nevie, tak má byť čitateľná. */
.sks__limit{max-width:62ch;margin-top:26px;padding-top:14px;border-top:1px solid var(--line)}

/* Podpis dodávateľa v pätičke. Najtichšie písmo na stránke — cudzia značka
   nesmie v luxusnom obchode súťažiť s tou, kvôli ktorej sem zákazníčka
   prišla. Preto sivá, nie zlatá: zlatá patrí Ombre. */
.ftr__made{margin-top:10px;font-size:11px;letter-spacing:.04em;color:var(--muted);opacity:.75}
.ftr__made a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.ftr__made a:hover{color:var(--cream);opacity:1}

/* Poznámka zákazníčky. Je to lístok pripnutý ku kúsku, nie formulár — preto
   bez rámu navyše, tichý podklad a bez nadpisu. */
.sks__pozn{margin:10px 0 0}
.sks__pozn-in{width:100%;min-height:56px;resize:vertical;font-size:14px;
  background:var(--cream);border:1px solid var(--line);padding:8px 10px}
.sks__pozn-in::placeholder{color:var(--muted);opacity:.8}
/* Tlačidlo je poistka pre prehliadač bez skriptu; s ním sa poznámka ukladá
   sama po opustení poľa a tlačidlo sa skryje (trieda z shop.js). */
.sks__pozn-ok{margin-top:4px;font:600 11px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase}
.sks__pozn.is-auto .sks__pozn-ok{display:none}
@media (max-width:560px){
  .sks__pozn-in{font-size:16px}   /* pod 16 px iOS pri fokuse priblíži stránku */
}

/* Keď o veľkosti nie je čo povedať ani pri jednej karte, miesto sa nevyhradzuje.
   Zarovnanie dvojice tým netrpí — mizne rovnako na oboch. */
.sks__zrkadlo--bezvety .sks__verdikt,
.sks__zrkadlo--bezvety .sks__zaklad{min-height:0;margin:0;font-size:0;line-height:0}