/* ==========================================================================
   nejmasiv.cz — VERZE B, směr „Výkladní skříň" (showroom za denního světla)
   Viz instructions/design-direction-b.md. Jedno písmo: Schibsted Grotesk.
   Figura/pozadí: stránka je šalvějová, bílá plocha znamená „tady je zboží".
   ========================================================================== */

:root{
  /* barvy — borová zeleň, šalvějové denní světlo, medová jako PLOCHA.
     Medová nikdy nenese drobný text: na bílé má 3,4:1. Text na medové je zeleň. */
  --ink:#1e3628;
  --ink-2:#14241a;
  --ink-70:#41604f;
  --ink-45:#54685c;
  --line:#d5dcd0;
  --line-2:#bcc7b6;
  --ground:#eaeee6;
  --surface:#f3f5ef;
  --surface-2:#f7f9f4;
  --paper:#ffffff;
  --honey:#e8b566;
  --honey-deep:#d69f47;
  --honey-soft:#f6e3c4;
  /* akcentní inkoust — světlejší zeleň (7,9:1 na bílé). Drží jméno --ochre,
     protože na něj odkazují všechny stránky; hodnota je ale zelená verze B. */
  --ochre:#2c5a3c;
  --ochre-deep:#1e3628;

  /* prostorový rytmus — jedna škála */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* dvě hodnoty rádiusu: ovládací prvky 8, plochy 14 */
  --r:8px;
  --r-lg:14px;
  --shadow:0 2px 6px rgba(20,36,26,.05), 0 22px 44px -24px rgba(20,36,26,.34);
  --ease:cubic-bezier(.22,.61,.24,1);
  /* výška ukotvené hlavičky (horní proužek + lišta + pás kategorií) */
  --stack:104px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:'Schibsted Grotesk',system-ui,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
@media (min-width:1024px){ body{font-size:17px} :root{--stack:175px} }

img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
input,select,textarea{font:inherit}

/* ---------------------------------------------------------------- ohnisko */
:focus{outline:none}
:focus-visible{
  outline:2px solid var(--ochre);
  outline-offset:2px;
  border-radius:var(--r);
}
.on-dark :focus-visible,.hero__dark :focus-visible,.band--ink :focus-visible,.topbar :focus-visible{outline-color:var(--honey)}

/* ------------------------------------------------------------- typografie */
/* Hierarchie stojí na VÁZE (400 → 800), ne na záporné mezeře jako verze A. */
h1,h2,h3,h4,.t-hero,.t-h2,.t-h3,.t-h4{margin:0;font-weight:800;line-height:1.12;letter-spacing:-.018em}
p{margin:0}

.t-hero{font-size:clamp(2.15rem,3.6vw,3.4rem);letter-spacing:-.024em;line-height:1.08}
/* text-wrap:balance drží nadpisy sekcí bez osiřelého slova na posledním řádku */
.t-h2{font-size:clamp(1.7rem,2.7vw,2.6rem);letter-spacing:-.018em;line-height:1.12;text-wrap:balance}
.t-h3{font-size:clamp(1.3rem,1.9vw,1.75rem);letter-spacing:-.015em;line-height:1.2;text-wrap:balance}
.t-h4{font-size:1.125rem;font-weight:800;letter-spacing:-.012em;line-height:1.3}
.t-lead{font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.6;font-weight:400;color:var(--ink-70)}
.t-small{font-size:.875rem;line-height:1.6}
.t-micro{font-size:.75rem;line-height:1.5}

.label{
  font-size:.8125rem;font-weight:500;letter-spacing:.005em;
  line-height:1.4;color:var(--ink-70);
  display:inline-flex;align-items:center;gap:10px;
}
.label--ochre{color:var(--ochre)}
.label--light{color:rgba(255,255,255,.78)}

.sku{font-size:.75rem;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink-45)}

/* čtecí blok — široký kontejner není šířka textu */
.prose{max-width:64ch}
.prose p+p{margin-top:var(--s5)}
.prose h3{margin:var(--s7) 0 var(--s3)}
.prose ul{margin:var(--s4) 0 0;padding:0;list-style:none}
.prose ul li{position:relative;padding-left:22px;margin-top:var(--s3);color:var(--ink-70)}
.prose ul li::before{
  content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--ochre);
}
.prose strong{font-weight:500;color:var(--ink)}
/* Tailwind preflight shazuje podtržení odkazů; zelený odkaz v zeleném textu
   by se bez něj nepoznal, proto ho inline odkazům vracíme. */
.prose a,.link{
  color:var(--ochre);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:3px;text-decoration-color:var(--line-2);
  transition:text-decoration-color .18s var(--ease);
}
.prose a:hover,.link:hover{text-decoration-color:var(--ochre)}

/* --------------------------------------------------------------- kontejner */
.wrap{width:100%;max-width:1760px;margin-inline:auto;padding-inline:16px}
@media (min-width:768px){ .wrap{padding-inline:24px} }
@media (min-width:1280px){ .wrap{padding-inline:40px} }
.wrap--narrow{max-width:1180px}

.rule{height:1px;background:var(--line);border:0;margin:0}

/* --------------------------------------------------------------- lamela */
/* Signature prvek verze B: masivní deska se lepí ze svislých lamel.
   Tři měřítka — značka sekce, vzorník úprav, textura na pozadí. */
.ring{display:block;flex:none}
.ring rect{fill:currentColor}
.ring--mark{width:14px;height:12px;color:var(--ochre)}
.label--light .ring--mark,.band--ink .ring--mark{color:var(--honey)}

/* terč povrchové úpravy — dlaždice s kresbou lamel, ne kolečko */
.swatch{
  position:relative;width:38px;height:44px;border-radius:var(--r);
  display:block;flex:none;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(20,36,26,.16);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease);
}
.swatch__lam{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.20) 0 3px, rgba(255,255,255,0) 3px 7px,
    rgba(20,36,26,.10) 7px 8px, rgba(255,255,255,0) 8px 13px);
}
.swatch--sm{width:24px;height:30px}
.swatch--lg{width:64px;height:84px}

/* Lamelový vodoznak v tmavých pásech — místo letokruhu verze A.
   Kryje celý pás a dolů se vytrácí: pevná dolní hrana pásků vypadala
   jako chyba vykreslení, kdežto u kruhu verze A hrana nevadila. */
.watermark{
  position:absolute;inset:0;pointer-events:none;color:var(--honey);opacity:.10;
  width:100%;height:100%;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 58%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.35) 58%,transparent 100%);
}

/* -------------------------------------------------------------- tlačítka */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:14px 26px;border:1px solid transparent;border-radius:var(--r);
  font-size:.9375rem;font-weight:500;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),transform .18s var(--ease);
}
.btn:active{background-image:linear-gradient(rgba(20,36,26,.09),rgba(20,36,26,.09))}
.btn--primary{background:var(--ink);color:#fff}
.btn--primary:hover{background:var(--ink-2)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--ink-2)}
/* medová je plocha — text na ní je vždycky zeleň (7:1) */
.btn--honey{background:var(--honey);color:var(--ink)}
.btn--honey:hover{background:var(--honey-deep)}
.btn--line{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--line:hover{border-color:var(--ink);background:var(--surface-2)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:var(--surface)}
.btn--onink{background:transparent;border-color:rgba(255,255,255,.34);color:#fff}
.btn--onink:hover{border-color:#fff;background:rgba(255,255,255,.1)}
.btn--sm{padding:9px 16px;font-size:.8125rem}
.btn--block{width:100%}
.btn--lg{padding:17px 34px;font-size:1rem}

/* textový odkaz — medový zvýrazňovač vyroste zpod textu (verze A má linku) */
.tlink{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-weight:500;font-size:.9375rem;position:relative;padding:2px 4px 3px;
  margin-inline:-4px;isolation:isolate;
}
.tlink::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;z-index:-1;
  background:var(--honey);border-radius:2px;transform-origin:bottom;
  transition:transform .2s var(--ease);
}
.tlink:hover::after,.tlink:focus-visible::after{transform:scaleY(11)}
.band--ink .tlink::after,.hero__dark .tlink::after{background:var(--honey)}
.tlink svg{transition:transform .22s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

/* ---------------------------------------------------------------- hlavička */
/* Shop-first: proužek se sdělením → lišta, kde dominuje hledání → pás kategorií.
   Verze A má obráceně: fakta → hlavička → lišta stránek. */
.topbar{
  background:var(--ink-2);color:rgba(255,255,255,.72);
  font-size:.75rem;font-weight:500;
}
.topbar__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:36px}
.topbar a{text-decoration:none}
.topbar a:hover{color:#fff}
/* medová na tmavém podkladu textem být smí — 8,7:1 */
.topbar__promo{display:flex;align-items:center;gap:9px;min-width:0;color:var(--honey);white-space:nowrap}
.topbar__promo b{font-weight:500;flex:none}
.topbar__promo span{color:rgba(255,255,255,.72);overflow:hidden;text-overflow:ellipsis}
/* Na úzkých displejích zbyde ze sdělení jen částka slevy — delší chvost by
   vytlačil telefon a přepínač jazyka z obrazovky. */
@media (max-width:899px){ .topbar__promo span{display:none} }
.topbar__links{display:none;align-items:center;gap:var(--s5);list-style:none;margin:0;padding:0}
@media (min-width:1100px){ .topbar__links{display:flex} }
.topbar__right{display:flex;align-items:center;gap:var(--s4);margin-left:auto;flex:none}

.lang{display:flex;align-items:center;gap:2px}
.lang__btn{
  border:0;background:none;padding:3px 7px;border-radius:5px;cursor:pointer;
  font-size:.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;
  color:rgba(255,255,255,.6);transition:background-color .18s var(--ease),color .18s var(--ease);
}
.lang__btn[aria-current="true"]{color:var(--ink);background:var(--honey)}
.lang__btn[disabled]{cursor:not-allowed;opacity:.5}
.lang__btn:not([disabled]):hover{color:#fff}

.head{position:sticky;top:0;z-index:60;background:var(--paper);transition:box-shadow .22s var(--ease)}
.head.is-stuck{box-shadow:var(--shadow)}
.head__inner{display:flex;align-items:center;gap:var(--s5);min-height:78px;transition:min-height .22s var(--ease)}
.head.is-stuck .head__inner{min-height:66px}
@media (max-width:1023px){ .head__inner{min-height:64px;gap:var(--s3)} }

.brand{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.brand img{width:42px;height:42px;object-fit:contain;mix-blend-mode:multiply}
.brand--foot img{mix-blend-mode:normal;background:#fff;padding:3px;border-radius:var(--r)}
.brand__text{display:flex;flex-direction:column;gap:1px}
.brand__name{font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.brand__sub{font-size:.6875rem;font-weight:500;color:var(--ink-45);line-height:1.4}
/* Na mobilu se značka nesmí ztratit — místo skrytí se jen stáhne
   a z hlavičky zmizí popisek pod ní a slovo „Menu" u tlačítka. */
@media (max-width:560px){
  .brand{gap:9px}
  .brand img{width:36px;height:36px}
  .brand__name{font-size:.9375rem}
  .brand__sub{display:none}
}
@media (max-width:420px){ .burger span:last-child{display:none} .burger{padding:10px} }

/* hledání je v hlavičce dominanta, ne doplněk */
.search{flex:1;min-width:0;position:relative;display:none}
@media (min-width:900px){ .search{display:block} }
.search input{
  width:100%;height:52px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);padding:0 60px 0 46px;font-size:.9375rem;
  transition:border-color .18s var(--ease),background-color .18s var(--ease);
}
.head.is-stuck .search input{height:46px}
.search input::placeholder{color:var(--ink-45)}
.search input:focus{border-color:var(--ink);background:#fff}
.search__icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-45);pointer-events:none}
.search__go{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:42px;height:40px;display:grid;place-items:center;cursor:pointer;
  border:0;border-radius:6px;background:var(--ink);color:#fff;
  transition:background-color .18s var(--ease);
}
.search__go:hover{background:var(--ink-2)}

.headtools{display:flex;align-items:center;gap:var(--s2);margin-left:auto;flex:none}
.tool{
  position:relative;display:flex;align-items:center;gap:10px;padding:9px 13px;
  border-radius:var(--r);text-decoration:none;color:var(--ink);
  transition:background-color .18s var(--ease);
}
.tool:hover{background:var(--surface)}
.tool--cart{background:var(--surface)}
.tool--cart:hover{background:var(--honey-soft)}
.tool__txt{display:none;line-height:1.25}
@media (min-width:1180px){ .tool__txt{display:block} }
.tool__lbl{font-size:.6875rem;font-weight:400;color:var(--ink-45);display:block}
.tool__val{font-size:.875rem;font-weight:500;letter-spacing:-.01em}
.tool__count{
  position:absolute;left:26px;top:4px;min-width:18px;height:18px;padding:0 5px;
  display:grid;place-items:center;border-radius:9px;background:var(--honey);
  color:var(--ink);font-size:.625rem;font-weight:800;font-variant-numeric:tabular-nums;
}
@media (min-width:1180px){ .tool__count{left:23px;top:2px} }

.burger{
  display:flex;align-items:center;gap:8px;padding:10px 13px;border:0;
  background:var(--surface);border-radius:var(--r);cursor:pointer;font-weight:500;
}
@media (min-width:1024px){ .burger{display:none} }

/* ------------------------------------------------- pás kategorií (rail) */
.rail{background:var(--ground);position:relative;z-index:55}
.rail__inner{display:flex;align-items:center;gap:var(--s2);min-height:58px;overflow-x:auto;scrollbar-width:none}
.rail__inner::-webkit-scrollbar{display:none}
@media (max-width:1023px){ .rail{display:none} }
.chip{
  display:inline-flex;align-items:baseline;gap:7px;flex:none;
  padding:9px 15px;border-radius:var(--r);text-decoration:none;
  font-size:.875rem;font-weight:500;color:var(--ink);background:transparent;
  transition:background-color .18s var(--ease),color .18s var(--ease);
}
.chip span{font-size:.75rem;color:var(--ink-45);font-variant-numeric:tabular-nums;transition:color .18s var(--ease)}
.chip:hover{background:var(--honey)}
.chip:hover span{color:var(--ink)}
.chip[aria-current="page"]{background:var(--honey)}
.chip--all{background:var(--ink);color:#fff;font-weight:500}
.chip--all:hover,.chip--all[aria-current="page"]{background:var(--ink-2)}
.chip--all svg{transition:transform .18s var(--ease)}
.chip--all[aria-expanded="true"] svg{transform:rotate(180deg)}
.rail__end{margin-left:auto;padding-left:var(--s5);flex:none}

/* rozbalený panel sortimentu */
.panel{
  position:absolute;left:0;right:0;top:100%;z-index:55;
  background:var(--paper);box-shadow:var(--shadow);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}
.panel__grid{display:grid;grid-template-columns:1.25fr 1fr 1fr 1.15fr;gap:var(--s7);padding-block:var(--s6) var(--s7)}
.panel__col h3{font-size:.8125rem;font-weight:500;color:var(--ink-45);margin-bottom:var(--s3)}
.panel__list{list-style:none;margin:0;padding:0}
.panel__item{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:8px 10px;margin-inline:-10px;border-radius:6px;text-decoration:none;
  transition:background-color .16s var(--ease);
}
.panel__item:hover{background:var(--surface)}
.panel__item b{font-weight:500;font-size:.9375rem}
.panel__item span{font-size:.75rem;color:var(--ink-45);font-variant-numeric:tabular-nums}
.panel__note{font-size:.875rem;color:var(--ink-70);line-height:1.6}

/* mobilní šuplík */
.drawer{position:fixed;inset:0;z-index:90;display:flex}
.drawer__veil{position:absolute;inset:0;background:rgba(20,36,26,.55)}
.drawer__panel{
  position:relative;margin-left:auto;width:min(420px,92vw);height:100%;
  background:var(--paper);overflow-y:auto;padding:var(--s5) var(--s5) var(--s8);
}
.drawer__row{display:flex;align-items:center;justify-content:space-between;padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.drawer__group{padding:var(--s5) 0;border-bottom:1px solid var(--line)}
.drawer__link{display:flex;justify-content:space-between;gap:var(--s3);padding:10px 0;text-decoration:none;font-size:.9375rem;font-weight:500}
.drawer__link span{color:var(--ink-45);font-size:.75rem;font-variant-numeric:tabular-nums}
.iconbtn{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:var(--r);cursor:pointer}

/* ------------------------------------------------------------------ hero */
/* Výkladní skříň: vlevo sdělení, vpravo skutečný kus na bílé ploše.
   Výška podle obsahu — hero verze B není plakát přes celý viewport. */
.hero{position:relative;overflow:hidden;background:var(--ground)}
.hero__bg{
  position:absolute;inset:0;pointer-events:none;
  background:
    /* denní světlo z pravého horního rohu — okno vzorkovny */
    radial-gradient(118% 88% at 86% -10%, rgba(255,253,245,.96), rgba(255,253,245,0) 62%),
    /* horizont: stěna nahoře, o tón tmavší podlaha dole */
    linear-gradient(180deg,#eff2ea 0 78%, #e2e8dc 78%, #dde4d6 100%);
}
/* lamelová textura — svislé pásky masivu, signature prvek na pozadí */
.hero__bg::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(20,36,26,.05) 0 1px,transparent 1px 54px);
}
.hero__inner{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7);
  padding-block:var(--s7) var(--s8);align-items:center;
}
@media (min-width:1100px){
  .hero__inner{
    grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6);
    padding-block:var(--s8) var(--s9);
  }
  /* asymetrické dělení — text 5 sloupců, výkladní skříň 7 */
  .hero__copy{grid-column:1/6}
  .vitrina{grid-column:6/13}
}
.hero__copy h1{margin-top:var(--s4)}
.hero__sub{max-width:46ch;color:var(--ink-70);font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.6;margin-top:var(--s5)}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
/* jedna tichá řádka faktů — verze A tu má čtyřsloupcovou mřížku */
.hero__fakta{
  margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line-2);
  font-size:.8125rem;color:var(--ink-45);line-height:1.7;max-width:52ch;
}
.hero__fakta b{font-weight:500;color:var(--ink-70)}

/* -------------------------------------------------------- výkladní skříň */
.vitrina{
  position:relative;background:var(--paper);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:0 30px 60px -34px rgba(20,36,26,.45);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);
}
@media (min-width:760px){
  .vitrina{grid-template-columns:minmax(0,1.14fr) minmax(0,1fr);gap:var(--s6);padding:var(--s6)}
}
.vitrina__foto{
  display:block;border-radius:var(--r);overflow:hidden;background:#fff;
  align-self:center;
}
.vitrina__foto img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .32s var(--ease)}
.vitrina__foto:hover img{transform:scale(1.02)}
.vitrina__body{display:flex;flex-direction:column;min-width:0}
.vitrina__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.vitrina__nazev{font-size:clamp(1.25rem,1.6vw,1.6rem);font-weight:800;margin-top:var(--s3)}
.vitrina__nazev a{text-decoration:none}
.vitrina__param{font-size:.8125rem;color:var(--ink-45);margin-top:8px;line-height:1.6}
.vitrina__volba{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);margin-top:var(--s5);flex-wrap:wrap}
.vitrina__volba b{font-weight:500;color:var(--ink)}
.vitrina__pozn{font-size:.75rem;color:var(--ink-45);margin-top:10px}
.vitrina__cena{
  margin-top:auto;padding-top:var(--s5);
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
}
.vitrina__cena b{font-size:clamp(1.6rem,2.2vw,2.1rem);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}
.vitrina__cena span{font-size:.8125rem;color:var(--ink-45);font-variant-numeric:tabular-nums}
.vitrina__akce{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s4)}

/* vzorník — deska slepená ze sedmi lamel (signature prvek) */
.vzornik{display:flex;gap:3px;margin-top:var(--s3);padding:5px;background:var(--surface);border-radius:var(--r)}
.lam{
  flex:1;min-width:0;height:62px;padding:0;border:0;cursor:pointer;border-radius:5px;
  background:linear-gradient(180deg,var(--t) 0%,var(--t2) 100%);
  position:relative;overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(20,36,26,.12);
  transition:box-shadow .2s var(--ease),height .2s var(--ease);
}
.lam__ton{
  position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.22) 0 2px, rgba(255,255,255,0) 2px 6px,
    rgba(20,36,26,.09) 6px 7px, rgba(255,255,255,0) 7px 12px);
}
.lam:hover{box-shadow:inset 0 0 0 1px rgba(20,36,26,.3)}
.lam.is-on{box-shadow:0 0 0 2px var(--ink);height:74px}
@media (max-width:520px){ .lam{height:52px} .lam.is-on{height:60px} }

@media (max-width:1099px){
  .hero__inner{padding-block:var(--s6) var(--s7)}
  .hero__sub{max-width:56ch}
}
@media (max-width:759px){
  .hero__inner{gap:var(--s6)}
  .vitrina{padding:var(--s4)}
  /* fotka se na mobilu stahuje — celý čtverec by hero natáhl na dvě obrazovky */
  .vitrina__foto img{aspect-ratio:4/3}
  .hero__cta{margin-top:var(--s5)}
  .hero__cta .btn{flex:1 1 auto;justify-content:center}
  .hero__fakta{margin-top:var(--s5)}
}

/* ================================================= hlavička podstránky
   Podstránka nemá hero, ale musí se poznat jako táž vzorkovna. Nese proto
   týž denní svit z pravého horního rohu i lamelovou texturu jako hero,
   jen slabší — je to předsíň, ne výkladní skříň. */
.phead{position:relative;overflow:hidden;background:var(--ground)}
.phead::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(76% 150% at 97% -34%, rgba(255,253,245,.9), rgba(255,253,245,0) 62%),
    linear-gradient(180deg,#edf1e8 0%, #e5eae0 100%);
}
/* Lamelová textura se dolů vytrácí — na úzkém proužku drobečků by pevná
   dolní hrana vypadala jako chyba vykreslení. */
.phead::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(20,36,26,.035) 0 1px,transparent 1px 54px);
  -webkit-mask-image:linear-gradient(180deg,#000 0 34%,transparent 96%);
          mask-image:linear-gradient(180deg,#000 0 34%,transparent 96%);
}
.phead__in{position:relative;padding-block:var(--s5) var(--s7)}
@media (min-width:1024px){ .phead__in{padding-block:var(--s5) var(--s8)} }
/* asymetrie verze B: sdělení vlevo, tichý sloupec s čísly a akcí vpravo */
.phead__grid{display:grid;gap:var(--s6);align-items:end;margin-top:var(--s5)}
@media (min-width:1024px){ .phead__grid{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:var(--s9)} }
/* Na stránkách bez pravého sloupce jde sdělení rovnou za drobečky — musí
   od nich odsadit stejně jako .phead__grid. */
.phead__in>.crumbs+.phead__copy{margin-top:var(--s5)}
.phead__copy{max-width:64ch}
.phead__copy h1{margin-top:var(--s4)}
.phead__copy .t-lead{margin-top:var(--s5);max-width:60ch}
/* řádka tvrdých čísel — týž tvar jako .hero__fakta, jen bez horní linky */
.phead__fakta{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  font-size:.8125rem;color:var(--ink-45);line-height:1.7;
}
.phead__fakta b{font-weight:500;color:var(--ink-70)}
.phead__akce{display:flex;flex-wrap:wrap;gap:var(--s3)}

/* Čtyři tvrdá čísla vedle nadpisu — bílé plošky s mezerou, ne mřížka z linek. */
.cislarna{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin:0}
@media (min-width:1024px){ .cislarna{width:440px} }
.cislarna>div{background:var(--paper);border-radius:var(--r);padding:var(--s4) var(--s5)}
.cislarna dt{font-size:.8125rem;font-weight:500;color:var(--ink-70)}
.cislarna dd{
  margin:6px 0 0;font-size:1.75rem;font-weight:800;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.cislarna__mensi{font-size:1.125rem !important}

/* Klíč k ceníku: vlevo vysvětlení, vpravo vzorník sedmi úprav s přirážkou. */
.prirazky{display:grid;gap:var(--s5)}
@media (min-width:1100px){ .prirazky{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--s8);align-items:center} }
/* Sedm plošek vedle sebe v jedné řadě — týž tvar jako vzorník v heru.
   Řada se nesmí zalomit na „4 + 3", proto pevný počet sloupců, ne flex-wrap. */
.prirazky__rada{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:560px){ .prirazky__rada{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1100px){ .prirazky__rada{grid-template-columns:repeat(7,minmax(0,1fr))} }
.prirazky__rada li{
  display:flex;flex-direction:column;align-items:flex-start;gap:9px;
  background:var(--surface);border-radius:var(--r);padding:var(--s3);
}
.prirazky__rada b{display:block;font-size:.8125rem;font-weight:500;line-height:1.3}
.prirazky__rada span span{font-size:.75rem;color:var(--ink-45);font-variant-numeric:tabular-nums}

/* Řada plošek. Verze A tu měla mřížku slepenou z 1px linek — jednu plochu
   rozříznutou vlásečnicemi. Verze B ji rozpojí na samostatné bílé plochy
   s mezerou: hranu dělá podklad, ne linka. */
.plosky{display:grid;gap:var(--s2)}
.plosky>*{background:var(--paper);border-radius:var(--r);padding:var(--s5)}
@media (min-width:560px){ .plosky--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .plosky--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)} }
/* uvnitř bílého pultu musí ploška změnit tón, jinak by zmizela */
.pult .plosky>*{background:var(--surface)}
/* ploška, která má v řadě vyčnívat — nese výhradu, ne běžnou informaci */
.plosky__duraz{background:var(--honey-soft) !important}
/* Hláška formuláře. Verze A ji značila okrovou linkou zleva; verze B plochou —
   medová je tu nositelka významu „tohle si přečti\", ne dekorace. */
.hlaska{background:var(--honey-soft);border-radius:var(--r);padding:var(--s4);color:var(--ink)}
.hlaska--velka{padding:var(--s5)}
.hlaska--velka .label{color:var(--ink)}

/* Řádky uvnitř pultu — čtyři výhody nebo kroky. Ikona vlevo, název, popis.
   Nahrazuje čtyři stejné karty s ikonou nahoře. */
.radky{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
@media (min-width:900px){ .radky{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s6)} }
.radky li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px var(--s4);align-items:baseline;background:var(--surface);border-radius:var(--r);padding:var(--s4) var(--s5)}
.radky__ikona{grid-row:span 2;color:var(--ochre);display:flex;align-self:start;margin-top:3px}
.radky b{font-size:1rem;font-weight:500;letter-spacing:-.01em}
.radky li>span:last-child{font-size:.875rem;color:var(--ink-70);line-height:1.55}

/* Seznam oborů v tmavém pásu — plošky s mezerou, ne řádky mezi linkami. */
.oborove{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.oborove li{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  background:rgba(255,255,255,.06);border-radius:var(--r);padding:var(--s4) var(--s5);
}
.oborove li>span{display:flex;align-items:center;gap:var(--s4);color:#fff;font-size:.9375rem;font-weight:500}
.oborove__fajfka{color:var(--honey);flex:none;display:flex}
.oborove b{color:var(--honey);white-space:nowrap;font-weight:500;font-size:.875rem}

/* Postup v tmavém pásu — prosvětlené plošky s mezerou. Verze A tu měla
   čtyři sloupce oddělené vlásečnicí s odznakem přes ni. */
.postup{list-style:none;margin:var(--s8) 0 0;padding:0;display:grid;gap:var(--s3)}
@media (min-width:560px){ .postup{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .postup{grid-template-columns:repeat(4,minmax(0,1fr))} }
.postup li{background:rgba(255,255,255,.06);border-radius:var(--r-lg);padding:var(--s5)}
.postup__znacka{display:flex;color:var(--honey);margin-bottom:var(--s4)}
.postup b{display:block;font-size:1.0625rem;font-weight:500;color:#fff;letter-spacing:-.015em}
.postup p{font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.66);margin-top:var(--s3)}
/* Číslované kroky postupu — bílé plošky s mezerou. Verze A je měla jako
   řádky mezi vlásečnicemi. */
.kroky{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.kroky li{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);
  background:var(--paper);border-radius:var(--r);padding:var(--s5);
}
.kroky__cislo{
  display:grid;place-items:center;width:30px;height:30px;flex:none;
  background:var(--honey);border-radius:var(--r);
  font-size:.9375rem;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;
}
/* ploška, která nese sdělení — medová je ve verzi B plocha, ne linka */
.tile--medovy{background:var(--honey-soft)}
.tile--medovy .label,.tile--medovy .label--ochre{color:var(--ink)}

/* ---------------------------------------------------------------- sekce */
.band{position:relative;overflow:hidden}
.band--surface{background:var(--surface)}
.band--ink{background:var(--ink-2);color:#fff}
.band--ink .t-lead{color:rgba(255,255,255,.74)}
.band--ink .label{color:rgba(255,255,255,.7)}
/* bílá plocha na šalvějovém podkladu — figura verze B */
.band--paper{background:var(--paper)}

.sechead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s5)}
.sechead__txt{max-width:60ch}
.sechead h2{margin-top:var(--s3)}
.sechead p{margin-top:var(--s4)}

/* --------------------------------------------------- dlaždice kategorií */
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
@media (min-width:700px){ .cats{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (min-width:1280px){ .cats{grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--s4)} }
.cat{
  background:var(--paper);padding:var(--s5) var(--s4) var(--s4);text-decoration:none;
  border-radius:var(--r-lg);
  display:flex;flex-direction:column;gap:var(--s3);min-height:200px;
  transition:box-shadow .22s var(--ease);
}
.cat:hover{box-shadow:0 18px 36px -24px rgba(20,36,26,.45)}
.cat__img{aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.cat__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .32s var(--ease)}
.cat:hover .cat__img img{transform:scale(1.05)}
.cat__foot{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2)}
.cat__name{font-size:.9375rem;font-weight:500;letter-spacing:-.01em}
.cat__n{font-size:.75rem;color:var(--ink-45);font-variant-numeric:tabular-nums}
/* Sedm kategorií nevyjde na dva ani na čtyři sloupce. Verze A tu musela
   dopravovat prázdnou bílou buňku, aby neprosvítala mřížka; verze B žádnou
   mřížku nemá, takže se zbylé místo prostě nechá být. */

/* --------------------------------------------------------- karta produktu */
/* Verze B: bílá plocha bez rámu plave na šalvějovém podkladu — hranu dělá
   kontrast, ne vlásečnice jako ve verzi A. Pořadí síly uvnitř dlaždice je
   fotka → cena → název; proto je cena 800 a mikropopisky nejsou verzálkami.
   minmax(0,…) je tu nutnost: bez něj roztáhne řada lamel sloupec na svou
   min-content šířku a celá mřížka přeteče z mobilu ven. */
.grid-prod{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:760px){ .grid-prod{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)} }
@media (min-width:1500px){ .grid-prod--4{grid-template-columns:repeat(4,minmax(0,1fr))} }

.card{
  display:flex;flex-direction:column;background:var(--paper);
  border-radius:var(--r-lg);height:100%;overflow:hidden;
  transition:box-shadow .22s var(--ease);
}
/* jediná úroveň stínu, a jen při najetí: karta se zvedne nad podklad */
.card:hover{box-shadow:0 18px 36px -24px rgba(20,36,26,.45)}
.card__media{display:block;padding:var(--s5) var(--s5) 0;background:#fff;overflow:hidden}
.card__media img{width:100%;aspect-ratio:1;object-fit:contain;transition:transform .38s var(--ease)}
.card:hover .card__media img{transform:scale(1.035)}
.card__body{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;flex:1;gap:var(--s3)}
/* tichá řádka meta — kolekce vlevo, dodací lhůta vpravo. Verze A měla tmavý
   štítek přes fotku; ten soupeřil s cenou o druhé místo a kazil bílou fotku. */
.card__meta{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  font-size:.75rem;line-height:1.4;color:var(--ink-45);
}
.card__meta b{font-weight:500;color:var(--ink-70)}
.card__name{
  font-size:1.0625rem;font-weight:500;letter-spacing:-.005em;line-height:1.35;
  text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.7em;position:relative;isolation:isolate;
}
/* medový zvýrazňovač jako u ostatních odkazů — ne dokreslovaná linka verze A */
.card__name::after{
  content:"";position:absolute;left:-3px;right:-3px;bottom:1px;height:2px;z-index:-1;
  background:var(--honey);border-radius:2px;transform:scaleY(0);transform-origin:bottom;
  transition:transform .24s var(--ease);
}
.card:hover .card__name::after,.card__name:focus-visible::after{transform:scaleY(9)}
/* vzorník v nejmenším měřítku — lamely slepené do proužku, ne rozsypané terče */
.card__uprav{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap}
.card__uprav>span:last-child{font-size:.75rem;color:var(--ink-45);font-variant-numeric:tabular-nums}
.card__swatches{display:flex;gap:2px;padding:3px;background:var(--surface);border-radius:6px;width:max-content;max-width:100%}
.card__swatches .swatch{border-radius:4px}
@media (max-width:560px){ .card__swatches .swatch--sm{width:18px;height:26px} }
.card__price{margin-top:auto;padding-top:var(--s3);display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.card__from{font-size:.75rem;font-weight:400;color:var(--ink-45);flex:none}
.card__amount{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.card__vat{flex-basis:100%;font-size:.6875rem;color:var(--ink-45);font-variant-numeric:tabular-nums}
.card__actions{display:flex;gap:8px;margin-top:var(--s1)}
.card__actions .btn{flex:1 1 auto;min-width:0}
/* Kusy bez postaveného detailu nemají kam odkazovat — místo druhého tlačítka
   ukážeme kód zboží. Drží řádku akcí, ale nepředstírá, že se dá kliknout.
   Bez nowrap: dlouhý kód by přes min-content roztáhl sloupec mřížky. */
.card__sku{flex:1 1 auto;min-width:0;align-self:center;
  padding:9px 4px;font-size:.8125rem;line-height:1.3;color:var(--ink-45);
  text-align:center;overflow-wrap:anywhere}
.card__sku b{font-weight:500;color:var(--ink-70)}
/* Na úzké dlaždici se dvě textová tlačítka vedle sebe nevejdou — pod sebou
   zůstane „do košíku" dostupné i na dotykovém displeji, bez najetí myší. */
@media (max-width:620px){
  .card__meta{flex-direction:column;align-items:flex-start;gap:2px}
  .card__body{padding:var(--s4)}
  .card__media{padding:var(--s4) var(--s4) 0}
  .card__actions{flex-direction:column}
  .card__actions .btn{width:100%}
}

/* -------------------------------------------------------------- cena */
.price-big{font-size:clamp(2rem,3vw,2.75rem);font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.05}

/* --------------------------------------------------------------- výpis */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.75rem;color:var(--ink-45);list-style:none;margin:0;padding:0}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--ochre)}

.listgrid{display:grid;gap:var(--s7)}
@media (min-width:1100px){ .listgrid{grid-template-columns:300px minmax(0,1fr);gap:var(--s7)} }
@media (min-width:1440px){ .listgrid{grid-template-columns:324px minmax(0,1fr);gap:var(--s8)} }

/* Sloupec filtrů je bílá plocha — pult, u kterého se vybírá. Verze A ho měla
   jako sloupec vlásečnic s popisky VERZÁLKAMI; obojí je tady pryč. */
.filters{background:var(--paper);border-radius:var(--r-lg);padding:var(--s5)}
@media (min-width:1280px){ .filters{padding:var(--s6)} }
.facet{padding-top:var(--s6)}
.facet:first-child{padding-top:0}
.facet__head{
  display:inline-flex;align-items:center;gap:10px;width:100%;
  background:none;border:0;padding:0;text-align:left;
  font-size:.8125rem;font-weight:500;letter-spacing:.005em;line-height:1.4;color:var(--ink-70);
}
.facet__body{padding-top:var(--s3);display:flex;flex-direction:column;gap:1px}
/* Volba filtru je řádek-ploška: hover ji podloží tichým tónem, zvolený stav
   medovou. Medová tu má přesně tu roli, kterou jí směr B dává — plochu. */
.facet__opt{
  display:flex;align-items:center;gap:10px;padding:8px 10px;margin-inline:-10px;
  border-radius:var(--r);text-decoration:none;
  font-size:.875rem;color:var(--ink-70);
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.facet__opt:hover{background:var(--surface);color:var(--ink)}
.facet__opt[aria-current="true"]{background:var(--honey-soft);color:var(--ink);font-weight:500}
.facet__box{width:16px;height:16px;border:1px solid var(--line-2);border-radius:3px;background:#fff;flex:none;display:grid;place-items:center;transition:border-color .16s var(--ease),background-color .16s var(--ease)}
.facet__opt[aria-current="true"] .facet__box{background:var(--honey);border-color:var(--honey-deep)}
.facet__opt[aria-current="true"] .facet__box svg{opacity:1}
.facet__box svg{opacity:0;color:var(--ink)}
.facet__n{margin-left:auto;font-size:.75rem;color:var(--ink-45);font-variant-numeric:tabular-nums}
/* vzorník úprav ve filtru — týž motiv jako v heru, jen v nejmenším měřítku */
.facet__upravy{display:flex;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s2)}
.facet__uprava{display:flex;flex-direction:column;align-items:center;gap:6px;width:52px;text-decoration:none;padding:6px 2px;border-radius:var(--r);transition:background-color .16s var(--ease)}
.facet__uprava:hover{background:var(--surface)}
.facet__uprava[aria-current="true"]{background:var(--honey-soft)}
.facet__uprava span{font-size:.6875rem;line-height:1.25;text-align:center;color:var(--ink-45)}
.facet__uprava[aria-current="true"] span{color:var(--ink);font-weight:500}
/* Prstenec zvolené úpravy musí mít mezikruží v barvě plošky, na které leží,
   jinak kolem terče svítí bílý pruh. */
.facet__uprava[aria-current="true"] .swatch--sel{box-shadow:inset 0 0 0 1px rgba(20,36,26,.16),0 0 0 2px var(--honey-soft),0 0 0 4px var(--ink)}

.listbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s4)}
/* Na mobilu se hledání v ceníku vedle počtu položek scvrkne na dvě slova —
   lišta se proto skládá pod sebe a pole zabere celou šířku. */
@media (max-width:560px){
  .listbar{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .listbar .field{max-width:none}
}
.select{
  appearance:none;border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:10px 38px 10px 14px;font-size:.875rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%2354685c' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;
  transition:border-color .18s var(--ease);
}
.select:hover{border-color:var(--line-2)}

.emptycat{border-radius:var(--r-lg);padding:var(--s9) var(--s5);text-align:center;background:var(--paper)}

/* --------------------------------------------------------- detail produktu */
.pdp{display:grid;gap:var(--s7)}
@media (min-width:1000px){ .pdp{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--s8)} }
@media (min-width:1500px){ .pdp{grid-template-columns:minmax(0,1.25fr) minmax(0,620px)} }

.gallery{display:grid;gap:var(--s3)}
@media (min-width:640px){ .gallery{grid-template-columns:92px 1fr;align-items:start} }
/* jediná fotka = žádný sloupec náhledů, jinak by se hlavní fotka scvrkla */
.gallery--sama{grid-template-columns:1fr !important}
.gallery__thumbs{display:flex;gap:var(--s2);order:2;overflow-x:auto;padding-bottom:4px}
@media (min-width:640px){ .gallery__thumbs{order:0;flex-direction:column;overflow:visible} }
.thumb{
  width:74px;height:74px;flex:none;border:0;border-radius:var(--r);
  background:var(--paper);padding:6px;cursor:pointer;
  box-shadow:0 0 0 1px rgba(20,36,26,.06);
  transition:box-shadow .18s var(--ease);
}
@media (min-width:640px){ .thumb{width:92px;height:92px} }
.thumb img{width:100%;height:100%;object-fit:contain}
.thumb[aria-current="true"]{box-shadow:0 0 0 2px var(--ink)}
.thumb:hover{box-shadow:0 0 0 2px var(--line-2)}
/* hlavní fotka je bílá plocha bez rámu — v katalogu jsou výřezy na bílé,
   takže plocha a fotka splynou a zboží stojí přímo na šalvějovém podkladu */
.gallery__main{border-radius:var(--r-lg);background:var(--paper);padding:var(--s6);position:relative}
@media (min-width:1024px){ .gallery__main{padding:var(--s7)} }
.gallery__main img{width:100%;aspect-ratio:1;object-fit:contain}
.gallery__hint{position:absolute;right:var(--s5);bottom:var(--s5);font-size:.6875rem;color:var(--ink-45);font-variant-numeric:tabular-nums;letter-spacing:.04em}

/* Sloupec s cenou a volbou je bílý pult — u něj se zboží kupuje. Uvnitř
   pultu se vymezuje tichým tónem, nikdy linkou. */
.pdp__aside{
  display:flex;flex-direction:column;gap:var(--s5);
  background:var(--paper);border-radius:var(--r-lg);padding:var(--s5);align-self:start;
}
@media (min-width:760px){ .pdp__aside{padding:var(--s6)} }
@media (min-width:1500px){ .pdp__aside{padding:var(--s7)} }
/* cena sedí na medové plošce — v paletě verze B je to přímo její role */
.pdp__cena{background:var(--honey-soft);border-radius:var(--r);padding:var(--s5)}
.pdp__blok{background:var(--surface);border-radius:var(--r);padding:var(--s4) var(--s5)}


.sizerow{display:flex;flex-wrap:wrap;gap:8px}
.size{
  padding:10px 15px;border:0;background:var(--surface);border-radius:var(--r);
  font-size:.875rem;font-weight:500;color:var(--ink-70);cursor:pointer;font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1px transparent;
  transition:background-color .18s var(--ease),color .18s var(--ease),box-shadow .18s var(--ease);
}
.size:hover{background:var(--honey-soft);color:var(--ink)}
.size[aria-pressed="true"]{background:var(--honey-soft);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}

.qty{display:flex;align-items:center;background:var(--surface);border-radius:var(--r);height:52px;flex:none}
.qty button{width:46px;height:100%;background:none;border:0;cursor:pointer;color:var(--ink-70);font-size:1.125rem;transition:color .18s var(--ease)}
.qty button:hover{color:var(--ochre)}
.qty input{width:46px;height:100%;border:0;text-align:center;font-weight:500;font-variant-numeric:tabular-nums;background:none}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{appearance:none;margin:0}

/* jistoty obchodu — tři tiché plošky uvnitř bílého pultu, ne mřížka z vlásečnic */
.assure{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.assure div{background:var(--surface);border-radius:var(--r);padding:var(--s4);display:flex;flex-direction:column;gap:6px}
.assure b{font-size:.8125rem;font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.assure span{font-size:.75rem;color:var(--ink-45);line-height:1.5}
@media (max-width:479px){ .assure{grid-template-columns:1fr} }

/* ------------------------------------------------------------- tabulky */
/* Tabulka je ve verzi B pruhovaná plocha, ne mřížka z vlásečnic: řádky odděluje
   tón (--surface je v paletě přímo určený na „pruhy tabulek"), ne linka.
   Hlavička ztratila verzálky — ty verze B nemá nikde. */
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl th,.tbl td{text-align:left;padding:13px 16px;vertical-align:top}
.tbl thead th{
  font-size:.8125rem;font-weight:500;letter-spacing:.005em;
  color:var(--ink-45);white-space:nowrap;padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
.tbl th.num{text-align:right}
.tbl tbody tr:nth-child(odd){background:var(--surface)}
.tbl tbody tr:hover{background:var(--honey-soft)}
.tbl--params td:first-child{color:var(--ink-45);width:44%}
.tbl--params td:last-child{font-weight:500}
.tblwrap{overflow-x:auto;border-radius:var(--r-lg);background:var(--paper)}
/* Tabulka v tmavém pásu — pruh dělá prosvětlená bílá, ne tichý zelený tón. */
.tblwrap--dark{background:transparent}
.tbl--dark{color:rgba(255,255,255,.82)}
.tbl--dark thead th{color:rgba(255,255,255,.55);border-bottom-color:rgba(255,255,255,.2)}
.tbl--dark tbody tr:nth-child(odd){background:rgba(255,255,255,.06)}
.tbl--dark tbody tr:hover{background:rgba(255,255,255,.1)}
.tbl--dark tbody td:first-child{font-weight:500;color:#fff}
/* Tabulka v bílém pultu už plochu má — nesmí si přidávat druhou. */
.pult>.tblwrap,.pult .tblwrap{background:transparent;border-radius:0}

/* ------------------------------------------------------------ akordeon */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;background:none;border:0;cursor:pointer;text-align:left;
  font-size:1.0625rem;font-weight:500;letter-spacing:-.015em;
  transition:color .18s var(--ease);
}
.acc__btn:hover{color:var(--ochre)}
.acc__sign{position:relative;width:14px;height:14px;flex:none}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;background:currentColor;transition:transform .24s var(--ease)}
.acc__sign::before{left:0;top:6.5px;width:14px;height:1px}
.acc__sign::after{left:6.5px;top:0;width:1px;height:14px}
.acc__item.is-open .acc__sign::after{transform:scaleY(0)}
.acc__body{padding:0 0 var(--s5);color:var(--ink-70);max-width:70ch}

/* --------------------------------------------------------------- karty */
/* Obecná plocha na šalvějovém podkladu — menší sestra .pult. Rám nemá:
   ve verzi B hranu dělá barevný rozdíl, ne vlásečnice. */
.tile{border-radius:var(--r-lg);padding:var(--s5);background:var(--paper);display:flex;flex-direction:column;gap:var(--s3)}
@media (min-width:1024px){ .tile{padding:var(--s6)} }
.tile--ink{background:rgba(255,255,255,.06)}
.tile--tichy{background:var(--surface)}

/* velké dvojkarty kolekcí */
.coll{
  position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:460px;padding:var(--s7);text-decoration:none;overflow:hidden;
  border-radius:var(--r-lg);background:var(--paper);
  transition:box-shadow .22s var(--ease);
}
.coll:hover{box-shadow:0 26px 50px -30px rgba(20,36,26,.48)}
.coll__img{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:74%;max-width:520px;transition:transform .5s var(--ease)}
.coll:hover .coll__img{transform:translateY(-50%) scale(1.04)}
.coll__body{position:relative;max-width:24ch}
.coll::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,.75) 52%,rgba(255,255,255,0) 78%);
}
/* Na úzké dlaždici by popis ležel na fotce a nedal se přečíst —
   fotka jde nahoru a přechod se otočí svisle, text stojí na bílé. */
@media (max-width:700px){
  .coll{min-height:460px;padding:var(--s5)}
  .coll__img{right:-6%;top:0;transform:none;width:68%}
  .coll:hover .coll__img{transform:scale(1.04)}
  /* přechod musí ležet NAD fotkou, jinak ji nepřekryje (::before se kreslí dřív);
     drží se při zemi, aby fotka nahoře zůstala sytá */
  .coll::before{
    z-index:1;
    background:linear-gradient(180deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.92) 52%,#fff 57%);
  }
  .coll__body{max-width:none;z-index:2}
}

/* ============================================ homepage pod herem (verze B)
   Jedno pravidlo drží celou stránku: podklad je šalvějový, bílá plocha bez rámu
   znamená „tady je zboží". Rytmus ploch je záměrně nestejný — hodně malých
   dlaždic → střední → tmavý pás → jedna velká plocha → dvě velké → text přímo
   na podkladu → jedna plocha. Viz design-direction-b.md §5.
   ====================================================================== */

/* bílá plocha, na které něco stojí — sdílený tvar všech figur pod herem */
.pult{background:var(--paper);border-radius:var(--r-lg);padding:var(--s5)}
@media (min-width:760px){ .pult{padding:var(--s6)} }
@media (min-width:1100px){ .pult{padding:var(--s7)} }

/* -------------------------------------------- vstup do sortimentu (kategorie) */
/* Osm dlaždic: sedm typů nábytku a medová plocha do ceníku. Vodorovný tvar
   (fotka vlevo, text vpravo) drží sekci nízko — hned pod herem nemá cenu
   stavět další metr vysokou mřížku, tohle je rozcestník do zboží. */
.kats{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3)}
@media (min-width:620px){ .kats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .kats{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1400px){ .kats{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)} }

.kat{
  display:flex;align-items:center;gap:var(--s4);text-decoration:none;
  background:var(--paper);border-radius:var(--r-lg);padding:var(--s4);
  transition:box-shadow .22s var(--ease),background-color .22s var(--ease);
}
.kat:hover{box-shadow:0 18px 36px -24px rgba(20,36,26,.45)}
.kat__img{flex:none;width:92px;height:92px;display:grid;place-items:center;overflow:hidden}
.kat__img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform .32s var(--ease)}
.kat:hover .kat__img img{transform:scale(1.06)}
.kat__txt{min-width:0;display:flex;flex-direction:column;gap:5px;flex:1}
.kat__head{display:flex;align-items:baseline;gap:var(--s3)}
.kat__name{font-size:1.0625rem;font-weight:800;letter-spacing:-.015em;line-height:1.2}
/* počet je medová ploška — akcent nese význam (kolik toho je), nedekoruje */
.kat__n{
  margin-left:auto;flex:none;font-size:.75rem;font-weight:500;color:var(--ink);
  background:var(--honey-soft);border-radius:6px;padding:2px 8px;
  font-variant-numeric:tabular-nums;transition:background-color .2s var(--ease);
}
.kat:hover .kat__n{background:var(--honey)}
.kat__desc{font-size:.8125rem;color:var(--ink-45);line-height:1.5}
/* poslední dlaždice je medová plocha — jediné místo v sekci, kde je akcent */
.kat--vse{background:var(--honey);padding:var(--s5)}
.kat--vse:hover{background:var(--honey-deep);box-shadow:none}
.kat--vse .kat__name,.kat--vse .kat__desc{color:var(--ink)}
.kat--sipka{flex:none;color:var(--ink);transition:transform .2s var(--ease)}
.kat--vse:hover .kat--sipka{transform:translateX(5px)}

/* ------------------------------------------------------------- velkoobchod */
.velko{display:grid;gap:var(--s7)}
@media (min-width:1024px){
  .velko{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6);align-items:start}
  .velko__copy{grid-column:1/7}
  .velko__box{grid-column:8/13}
}
/* medová plocha nese velkoobchodní sdělení — přesně její role ve verzi B */
.velko__karta{background:var(--honey);color:var(--ink);border-radius:var(--r-lg);padding:var(--s6)}
/* uvnitř medové plochy platí opačné pravidlo než ve zbytku tmavého pásu:
   text i značka lamely jsou zeleň, protože medová na medové nemá kontrast */
.velko__karta .label,.velko__karta .ring--mark{color:var(--ink)}
.velko__cislo{font-size:clamp(2.6rem,4vw,3.6rem);font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.velko__text{color:var(--ink);opacity:.82;font-size:.9375rem;line-height:1.6;margin-top:var(--s3);max-width:38ch}
.velko__list{list-style:none;margin:var(--s6) 0 0;padding:0}
.velko__list li{display:flex;gap:var(--s4);padding:var(--s3) 0}
.velko__list .ring--mark{margin-top:.5em}
.velko__list b{display:block;font-weight:500;color:#fff;font-size:.9375rem}
.velko__list span{display:block;margin-top:3px;color:rgba(255,255,255,.62);font-size:.8125rem;line-height:1.55}

/* ------------------------------------------- vzorník úprav (signature prvek) */
.uprava{display:grid;gap:var(--s6)}
@media (min-width:1000px){
  .uprava{grid-template-columns:minmax(0,330px) minmax(0,1fr);gap:var(--s8);align-items:stretch}
  /* fotka roste s výškou plochy — jinak pod ní zbyde metr prázdné bílé */
  .uprava__foto{display:flex;flex-direction:column}
  .uprava__foto img{flex:1;min-height:0;height:100%;aspect-ratio:auto}
}
@media (min-width:1500px){ .uprava{grid-template-columns:minmax(0,420px) minmax(0,1fr)} }
.uprava__foto{margin:0}
.uprava__foto img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:52% 50%;border-radius:var(--r)}
.uprava__foto figcaption{font-size:.75rem;color:var(--ink-45);line-height:1.5;margin-top:var(--s3)}

/* deska slepená ze sedmi lamel — týž motiv jako vzorník v heru, jen ve velkém
   a s viditelnými popisky. Kliknutí volí provedení a přepočítá reálné ceny. */
.deska{display:flex;gap:3px;padding:6px;background:var(--surface);border-radius:var(--r);margin-top:var(--s6)}
.deska__kus{
  flex:1;min-width:0;padding:0 0 8px;border:0;background:none;cursor:pointer;
  display:flex;flex-direction:column;gap:11px;text-align:left;border-radius:6px;
}
.deska__lam{
  display:block;height:158px;border-radius:5px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--t) 0%,var(--t2) 100%);
  box-shadow:inset 0 0 0 1px rgba(20,36,26,.12);
  transition:box-shadow .2s var(--ease),translate .2s var(--ease);
}
.deska__lam::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(255,255,255,.22) 0 2px, rgba(255,255,255,0) 2px 6px,
    rgba(20,36,26,.09) 6px 7px, rgba(255,255,255,0) 7px 12px);
}
.deska__kus:hover .deska__lam{box-shadow:inset 0 0 0 1px rgba(20,36,26,.34)}
/* zvolená lamela se vysune z desky ven — popisky pod deskou zůstanou v řádce */
.deska__kus[aria-checked="true"] .deska__lam{box-shadow:0 0 0 2px var(--ink);translate:0 -11px}
.deska__jm{font-size:.8125rem;font-weight:400;line-height:1.25;color:var(--ink-70);padding-inline:2px}
.deska__kus[aria-checked="true"] .deska__jm{font-weight:500;color:var(--ink)}
.deska__pr{font-size:.6875rem;color:var(--ink-45);padding-inline:2px;font-variant-numeric:tabular-nums}
/* Detail má desku v užším sloupci — lamely jsou nižší, popisky menší,
   ale motiv i chování zůstávají tytéž jako v heru. */
.deska--pdp{margin-top:0}
.deska--pdp .deska__lam{height:104px}
.deska--pdp .deska__jm{font-size:.75rem}
.deska--pdp .deska__kus[aria-checked="true"] .deska__lam{translate:0 -8px}
@media (max-width:900px){
  .deska__lam{height:110px}
  .deska__jm{font-size:.75rem}
}
@media (max-width:639px){
  .deska__kus{gap:0;padding-bottom:0}
  .deska__jm,.deska__pr{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;
  }
}
@media (max-width:560px){
  .deska{gap:2px;padding:4px}
  .deska__lam{height:80px}
  .deska__kus[aria-checked="true"] .deska__lam{translate:0 -8px}
  .deska__jm{font-size:.6875rem;line-height:1.2}
  .deska__pr{font-size:.625rem}
}
/* lamely vyrostou odspodu po 60 ms — signature pohyb webu. Na homepage se
   spouští až s odkrytím sekce (.reveal); na detailu je deska hned nahoře,
   takže roste po načtení jako vzorník v heru. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal .deska__lam{scale:1 .06;transform-origin:bottom;transition:scale .5s var(--ease),translate .2s var(--ease),box-shadow .2s var(--ease)}
  .js .reveal.is-in .deska__lam{scale:none}
  .js .deska--pdp .deska__lam{scale:1 .06;transform-origin:bottom;animation:deskalam .5s var(--ease) forwards}
  @keyframes deskalam{to{scale:none}}
}

.uprava__stav{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s4);margin-top:var(--s6)}
.uprava__stav b{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.uprava__stav span{font-size:.875rem;color:var(--ink-45)}
.ceny{list-style:none;margin:var(--s4) 0 0;padding:0;max-width:52rem}
.ceny li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);padding:12px 0;border-bottom:1px solid var(--line)}
.ceny li:last-child{border-bottom:0}
.ceny span{font-size:.9375rem;color:var(--ink-70);min-width:0}
.ceny b{flex:none;font-size:1.125rem;font-weight:800;letter-spacing:-.018em;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- řemeslo */
.remeslo{display:grid;gap:var(--s7)}
@media (min-width:1100px){
  .remeslo{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s6);align-items:start}
  .remeslo__copy{grid-column:1/6}
  .remeslo__fotky{grid-column:7/13}
}
/* tři reálné detaily z dílny — žádná ikona v zaobleném čtverečku */
.detaily{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
@media (min-width:620px){ .detaily{grid-template-columns:repeat(3,minmax(0,1fr))} }
.detail{margin:0;background:var(--paper);border-radius:var(--r-lg);padding:var(--s4);display:flex;flex-direction:column}
.detail img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.detail figcaption{padding:var(--s4) var(--s1) var(--s1)}
.detail b{display:block;font-size:.9375rem;font-weight:800;letter-spacing:-.012em;line-height:1.3}
.detail span{display:block;margin-top:6px;font-size:.8125rem;color:var(--ink-45);line-height:1.55}
/* Na mobilu se detail otáčí naležato — tři fotky na výšku pod sebou by ze
   sekce udělaly půl metru scrollování. Týž tvar jako dlaždice kategorií. */
@media (max-width:619px){
  .detail{flex-direction:row;align-items:center;gap:var(--s4)}
  .detail img{width:38%;flex:none;aspect-ratio:1}
  .detail figcaption{padding:0;min-width:0}
}
/* tichá řádka faktů — týž tvar jako pod herem, aby stránka držela pohromadě */
.fakta{
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line-2);
  font-size:.8125rem;color:var(--ink-45);line-height:1.7;
}
.fakta b{font-weight:500;color:var(--ink-70)}

/* ----------------------------------------------------------------- dotazy */
.dotazy{display:grid;gap:var(--s6)}
@media (min-width:1100px){
  .dotazy{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s7);align-items:start}
  .dotazy__copy{grid-column:1/4}
  .dotazy__acc{grid-column:5/13}
}

/* -------------------------------------------------------------- patička */
.foot{background:var(--ink);color:rgba(255,255,255,.68);position:relative;overflow:hidden}
.foot a{text-decoration:none;transition:color .18s var(--ease)}
.foot a:hover{color:#fff}
.foot__grid{position:relative;display:grid;gap:var(--s7);padding-block:var(--s8) var(--s7)}
@media (min-width:700px){ .foot__grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1100px){ .foot__grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:var(--s7)} }
/* Verze B: popisky sloupců nejsou verzálkami, nese je značka lamely — týž
   tvar jako popisky sekcí na stránce, ať patička patří ke stejnému webu. */
.foot h3{
  display:flex;align-items:center;gap:10px;
  font-size:.8125rem;font-weight:500;letter-spacing:.005em;
  color:rgba(255,255,255,.5);margin-bottom:var(--s4);
}
.foot .ring--mark{color:var(--honey)}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{padding:5px 0;font-size:.875rem}
.foot__bottom{
  position:relative;border-top:1px solid rgba(255,255,255,.14);
  padding:var(--s5) 0;display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);
  align-items:center;justify-content:space-between;font-size:.75rem;color:rgba(255,255,255,.5);
}

/* --------------------------------------------------------------- formuláře */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:.8125rem;font-weight:500;color:var(--ink-70)}
.field input,.field textarea,.field select{
  border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;background-color:var(--surface-2);
  transition:border-color .18s var(--ease),background-color .18s var(--ease);width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ink);background-color:#fff}
/* výběr má stejnou šipku jako řazení ve výpisu, ne výchozí prohlížečovou */
.field select{
  appearance:none;padding-right:42px;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%2354685c' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;cursor:pointer;
}
.field textarea{resize:vertical;min-height:120px}
.field__hint{font-size:.75rem;color:var(--ink-45)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.8125rem;color:var(--ink-70);line-height:1.55}
.check input{margin-top:4px;accent-color:var(--ochre);flex:none}

/* -------------------------------------------------------------- košík */
/* Řádek košíku je vlastní ploška v pultu — mezi řádky je mezera, ne linka.
   Fotka sedí na tichém tónu, aby bílý výřez zboží nesplynul s pultem. */
.cartrow{
  display:grid;grid-template-columns:88px 1fr;gap:var(--s4);align-items:start;
  padding:var(--s4);border-radius:var(--r);background:var(--paper);
}
.cartrow+.cartrow{margin-top:var(--s2)}
@media (min-width:900px){ .cartrow{grid-template-columns:104px 1fr auto auto;gap:var(--s5);align-items:center;padding:var(--s4) var(--s5)} }
.cartrow__img{border-radius:var(--r);padding:8px;background:var(--surface);display:block}
.cartrow__img img{aspect-ratio:1;object-fit:contain;width:100%}
/* souhrn objednávky — ukotvený sloupec vpravo */
.souhrn{background:var(--paper);border-radius:var(--r-lg);padding:var(--s5)}
@media (min-width:1024px){ .souhrn{padding:var(--s6);position:sticky;top:calc(var(--stack) + var(--s4))} }
.souhrn__radek{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);font-size:.9375rem;color:var(--ink-70);padding:7px 0}
.souhrn__radek b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.souhrn__soucet{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);
  background:var(--honey-soft);border-radius:var(--r);padding:var(--s4);margin-top:var(--s4);
}
.souhrn__soucet span{font-size:.875rem;font-weight:500}
.souhrn__soucet dt,.souhrn__soucet dd{margin:0}
/* tři jistoty pod souhrnem — bílé plošky s mezerou */
.jistoty{display:grid;gap:var(--s2);margin-top:var(--s3)}
.jistoty>div{background:var(--paper);border-radius:var(--r);padding:var(--s4) var(--s5);display:flex;gap:var(--s4);align-items:flex-start}
.jistoty b{display:block;font-size:.875rem;font-weight:500;color:var(--ink)}
.jistoty span span{display:block;font-size:.75rem;color:var(--ink-45);margin-top:2px;line-height:1.5}
.souhrn__soucet b{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1}

/* ------------------------------------------------------------- nástup */
@media (prefers-reduced-motion:no-preference){
  /* Nástup verze B: setření zleva + posun do strany — pohyb prkna
     zasouvaného na místo. Verze A vyjíždí zezdola nahoru. */
  .js .rise{
    opacity:0;transform:translateX(-18px);clip-path:inset(0 100% 0 0);
    animation:rise .52s var(--ease) forwards;
  }
  @keyframes rise{to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
  /* Setření dělá MASKA, ne clip-path: clip-path nuluje intersectionRatio,
     takže by IntersectionObserver sekce nikdy neodkryl (ověřeno v prohlížeči).
     Maska je jen malování, geometrii pro pozorovatele nemění. */
  .js .reveal{
    opacity:0;transform:translateX(-18px);
    -webkit-mask-image:linear-gradient(90deg,#000 0 50%,transparent 50%);
            mask-image:linear-gradient(90deg,#000 0 50%,transparent 50%);
    -webkit-mask-size:200% 100%;         mask-size:200% 100%;
    -webkit-mask-position:100% 0;        mask-position:100% 0;
    -webkit-mask-repeat:no-repeat;       mask-repeat:no-repeat;
    transition:opacity .5s var(--ease),transform .55s var(--ease),
               -webkit-mask-position .62s var(--ease),mask-position .62s var(--ease);
  }
  .js .reveal.is-in{
    opacity:1;transform:none;
    -webkit-mask-position:0 0;           mask-position:0 0;
  }
  /* vzorník má vlastní choreografii — lamely vyrostou odspodu po 60 ms */
  .js .lam{transform:scaleY(.06);transform-origin:bottom;animation:lam .5s var(--ease) forwards}
  @keyframes lam{to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* jemný šum na tmavých plochách */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[x-cloak]{display:none !important}

/* --------------------------------------------- mobilní menu (bez JS: details) */
.mnav{position:static}
@media (min-width:1024px){ .mnav{display:none} }
.mnav>summary{list-style:none;user-select:none}
.mnav>summary::-webkit-details-marker{display:none}
.mnav__close{display:none}
.mnav[open] .mnav__open{display:none}
.mnav[open] .mnav__close{display:block}
.mnav__panel{
  /* Panel začíná pod hlavičkou, ne přes ni — jinak zmizí i tlačítko, kterým
     se zavírá. Odsazení shora dopočítá JS podle skutečné pozice hlavičky,
     fallback 100 px platí pro nescrollovanou stránku. */
  position:fixed;left:0;right:0;top:var(--mnav-top,100px);bottom:0;z-index:80;
  background:var(--paper);overflow-y:auto;
  padding:var(--s5) 0 var(--s9);
  border-top:1px solid var(--line);
}
.mnav__search{display:flex;gap:8px;margin-bottom:var(--s5)}
.mnav__search input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  background:var(--surface-2);font-size:.9375rem;
}
.mnav__search input:focus{border-color:var(--ink);background:#fff}
.mnav__cols{display:grid;gap:var(--s6)}
@media (min-width:640px){ .mnav__cols{grid-template-columns:repeat(2,1fr);gap:var(--s7)} }
.mnav__list{list-style:none;margin:var(--s3) 0 0;padding:0}
.mnav__list li{border-bottom:1px solid var(--line)}

/* --------------------------------------- akordeon na <details> (bez JS) */
details.acc__item>summary{list-style:none}
details.acc__item>summary::-webkit-details-marker{display:none}
details.acc__item[open] .acc__sign::after{transform:scaleY(0)}

/* ----------------------------------------------- filtry na mobilu (details) */
.mfilter{display:block;margin-bottom:var(--s5)}
@media (min-width:1100px){ .mfilter{display:none} }
.mfilter>summary{list-style:none}
.mfilter>summary::-webkit-details-marker{display:none}
.mfilter[open]>summary{border-radius:var(--r) var(--r) 0 0}
.mfilter__panel{background:var(--paper);border-radius:0 0 var(--r-lg) var(--r-lg);padding:var(--s5)}
.filters--desk{display:none}
@media (min-width:1100px){ .filters--desk{display:block;position:sticky;top:calc(var(--stack) + var(--s4));align-self:start} }
.swatch--sel{box-shadow:inset 0 0 0 1px rgba(20,36,26,.16),0 0 0 2px var(--paper),0 0 0 4px var(--ink)}


/* ------------------------------------------------ obchodní podmínky */
.op{max-width:72ch;font-size:.9375rem;line-height:1.75;color:var(--ink-70)}
.op__intro{background:var(--surface);border-radius:var(--r);padding:var(--s5)}
.op__p{margin-top:var(--s4)}
.op__intro .op__p:first-child{margin-top:0}
.op__odrazka{position:relative;margin-top:var(--s3);padding-left:22px}
.op__odrazka::before{content:"";position:absolute;left:0;top:.85em;width:10px;height:1px;background:var(--ochre)}
.op__sekce{padding-top:var(--s8);scroll-margin-top:calc(var(--stack) + var(--s4))}
.op__h2{
  display:flex;align-items:baseline;gap:var(--s4);
  font-size:clamp(1.2rem,1.7vw,1.5rem);letter-spacing:-.025em;line-height:1.2;color:var(--ink);
  padding-bottom:var(--s4);border-bottom:1px solid var(--line);
}
.op__cislo{flex:none;color:var(--ochre);font-variant-numeric:tabular-nums;display:flex;align-items:center}
/* Článek je pruh, ne buňka v mřížce — sudé podloží tichý tón, jako v tabulce. */
.op__clanek{display:grid;grid-template-columns:66px 1fr;gap:var(--s4);padding:var(--s4);border-radius:var(--r)}
.op__clanek:nth-of-type(odd){background:var(--surface)}
.op__clanek p{margin:0}
.op__znacka{
  font-size:.75rem;font-weight:500;letter-spacing:.04em;color:var(--ochre);
  font-variant-numeric:tabular-nums;padding-top:.3em;
}
@media (max-width:560px){ .op__clanek{grid-template-columns:1fr;gap:var(--s2)} }
/* boční rejstřík obchodních podmínek */
.oprejstrik{background:var(--paper);border-radius:var(--r-lg);padding:var(--s5)}
.op.pult{max-width:none}
.op.pult .prose,.op.pult>*{max-width:none}
.op__sekce>*,.op__intro>*{max-width:74ch}
.op__clanek{max-width:none}
.op__clanek p{max-width:70ch}
@media (min-width:1100px){ .oprejstrik{position:sticky;top:calc(var(--stack) + var(--s4))} }
.opgrid{display:grid;gap:var(--s6)}
@media (min-width:1100px){ .opgrid{grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:var(--s8);align-items:start} }