/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;

}
html,body {
  margin:0;
  padding:0;
  font-family: 'Clash Grotesk';
  font-weight:400;
  font-size:40px;
  line-height:30px;
  background-color:white;
  color:#311B92;
  -webkit-text-size-adjust:100%;
  width:100%;
  height:100%; 
}


html 		{ overflow-x:hidden;  }


h1, h2, h3, h4, h5, h6 { font-weight: normal; }
a           { }
a:focus		{ outline: none; -webkit-tap-highlight-color: transparent }

.clearboth  { clear: both; }
.floatleft  { float: left; }
.uppercase  { text-transform: uppercase; }
.capitalize { text-transform: capitalize; }
.black		{ color:black }
img         { border: none; }
p           { clear:both; }
ul          { margin:0; }
b           { font-weight:700 }
strong      { font-weight:700 }
hr          { height:1px; border:0; background-color: black; }
.tisic      { margin-left: 0.3em;	}
.nonselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; 
				 -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;}
.nopadding  { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
.border5   { -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
.border10  { -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;  }
.border35  { -webkit-border-radius:35px; -moz-border-radius:35px; border-radius:35px;  }
.borderRounded { -webkit-border-radius:100%; -moz-border-radius:100%; border-radius:100%; }

.table-cell	{ display: table-cell; vertical-align: middle;  }

li 			{ list-style-position:inside; }
hr 			{ padding:0; margin:0; background-color:#404040; }



main        { position: relative; display:block; width:100%; height:100%;  }
nav         { position: relative; width:100%; } 
.container  { position: relative; display:block; width:calc(100% - 48px); max-width:1280px; margin:auto; }


  :root{
    --ink:#14110f;
    --ink-soft:#4a443f;
    --muted:#8a827b;
    --line:#e6e1db;
    --paper:#faf8f5;
    --white:#ffffff;
    --red:#c8342b;
    --ok:#2e7d52;
    --red-dark:#a32922;
    --radius:2px;
    --maxw:1280px;
    --pad:clamp(20px,5vw,64px);
  }

  *,*::before,*::after{box-sizing:border-box;}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:var(--white);
    color:var(--ink);
    font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  img{max-width:100%;display:block;}
  a{color:inherit;text-decoration:none;}
  button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
  button:focus-visible{outline:none}

  h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-0.02em;line-height:1.12;}

  .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
  .eyebrow{
    font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
    color:var(--muted);font-weight:600;margin:0 0 14px;
  }

  /* ---------- Buttons ---------- */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:15px 32px;font-size:13px;font-weight:600;
    letter-spacing:0.09em;text-transform:uppercase;
    border-radius:var(--radius);transition:.22s ease;white-space:nowrap;
  }
  .btn-solid{background:var(--ink);color:#fff;}
  .btn-solid:hover{background:var(--red);}
  .btn-light{background:#fff;color:var(--ink);}
  .btn-light:hover{background:var(--red);color:#fff;}
  .btn-ghost{border:1px solid var(--ink);color:var(--ink);}

  /* Tlačítko po odeslání: dokud běží požadavek, točí se v něm kolečko.
     Třídu "loading" nasazoval JS už dřív, ale v CSS na ni nic nebylo,
     takže po kliknutí nebylo poznat, že se něco děje. */
  .btn.loading{position:relative;pointer-events:none;color:transparent !important;}
  .btn.loading::after{
    content:"";position:absolute;top:50%;left:50%;
    width:18px;height:18px;margin:-9px 0 0 -9px;
    border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
    border-radius:50%;animation:btn-toci .7s linear infinite;
  }
  /* Světlá tlačítka mají tmavý text, bílé kolečko by na nich zaniklo */
  .btn-ghost.loading::after,
  .btn-light.loading::after,
  .btn-outline.loading::after{
    border-color:rgba(20,17,15,.25);border-top-color:var(--ink);
  }
  @keyframes btn-toci{to{transform:rotate(360deg);}}

  @media (prefers-reduced-motion:reduce){
    .btn.loading::after{animation-duration:2.4s;}
  }
  .btn-ghost:hover{background:var(--ink);color:#fff;}
  .btn-outline-light{border:1px solid rgba(255,255,255,.6);color:#fff;}
  .btn-outline-light:hover{background:#fff;color:var(--ink);}
  .btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
    flex-shrink: 0;
  }

  /* ---------- Announcement ---------- */
  .announce{
    background:var(--ink);color:#fff;
    font-size:12px;letter-spacing:.06em;padding:9px 0;
  }
  .announce-inner{
    position:relative;display:flex;align-items:center;
    justify-content:center;min-height:24px;
  }
  .announce-msg{margin:0;text-align:center;}
  .announce strong{color:#fff;font-weight:600;}
  .announce .sep{opacity:.42;margin:0 12px;}
  /* language switch — pinned to the right of the bar */
  .lang{
    position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
    display:flex;align-items:center;gap:1px;
  }
  .lang-btn{
    color:rgba(255,255,255,.48);font-size:11px;font-weight:600;
    letter-spacing:.1em;padding:4px 6px;border-radius:2px;
    transition:color .2s;line-height:1;
  }
  .lang-btn:hover{color:#fff;}
  .lang-btn[aria-current="true"]{color:#fff;}
  .lang-div{color:rgba(255,255,255,.26);font-size:11px;line-height:1;}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);
    backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line);
  }
  .nav{display:flex;align-items:center;gap:36px;height:74px;}
  .logo{
    display:flex;align-items:center;gap:9px;flex-shrink:0;
  }
  .logo img{width:150px;}
  .menu{display:flex;gap:30px;flex:1;}
  .menu a{
    font-size:13.5px;font-weight:500;letter-spacing:.03em;
    padding:6px 0;position:relative;color:var(--ink-soft);transition:color .2s;
  }
  .menu a::after{
    content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;
    background:var(--red);transition:width .25s ease;
  }
  .menu a:hover{color:var(--ink);}
  .menu a:hover::after{width:100%;}
  .icons{display:flex;gap:8px;align-items:center;outline: none; -webkit-tap-highlight-color: transparent}
  .icon-btn{
    width:40px;height:40px;display:grid;place-items:center;
    border-radius:50%;transition:background .2s;position:relative;
  }
  .icon-btn:hover{background:var(--paper);}
  .icon-btn svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.6;fill:none;}
  .badge{
    position:absolute;top:5px;right:4px;background:var(--red);color:#fff;
    font-size:9.5px;font-weight:700;min-width:16px;height:16px;
    border-radius:8px;display:grid;place-items:center;padding:0 4px;
  }
  /* Prázdný košík = žádný odznak, ať v hlavičce nesvítí červená nula */
  .badge:empty{display:none;}
  .burger{display:none;}

  /* ---------- Mobilní menu ---------- */
  .mobil-menu{
    position:fixed;inset:0;z-index:200;
    width:100%;height:100vh;height:100dvh;      /* dvh kvůli liště prohlížeče */
    background:var(--white,#fff);
    display:flex;flex-direction:column;
    padding:0 var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
  }
  .mobil-menu[hidden]{display:none !important;}

  .mobil-menu-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 0;margin-bottom:10px;flex-shrink:0;
    border-bottom:1px solid var(--line);
  }
  .mobil-menu-head .logo img{height:26px;width:auto;display:block;}
  .mobil-menu-close svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.6;fill:none;}

  .mobil-menu-hlavni{display:flex;flex-direction:column;padding-top:10px;}
  .mobil-menu-hlavni a{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:17px 0;border-bottom:1px solid var(--line);
    font-size:20px;font-weight:600;color:var(--ink);text-decoration:none;
  }
  .mobil-menu-hlavni a svg{
    width:19px;height:19px;stroke:var(--muted);stroke-width:1.6;fill:none;flex-shrink:0;
  }
  .mobil-menu-hlavni a:active{opacity:.6;}

  .mobil-menu-vedlejsi{
    display:flex;flex-direction:column;gap:13px;
    margin-top:auto;padding-top:28px;
  }
  .mobil-menu-vedlejsi a{
    font-size:14px;color:var(--muted);text-decoration:none;
  }

  /* Burger se objevuje od 1023px níž (viz blok „Hranice mobilního menu"
     na konci souboru), panel tedy nad touhle hranicí nesmí být
     k dispozici vůbec. */
  @media (min-width:1024px){
    .mobil-menu{display:none !important;}
  }

  /* ---------- Hero ---------- */
  .hero{
    position:relative;min-height:clamp(560px,calc(100vh - 117px),1020px);
    display:flex;align-items:center;overflow:hidden;background:#221f1c;
  }
  .hero-media{position:absolute;inset:0;}
  .hero-media img{
    width:100%;height:100%;object-fit:cover;object-position:36% 30%;
  }
  /* right-side scrim so copy sits on the plain wall, subjects stay clear */
  .hero-media::after{
    content:"";position:absolute;inset:0;
    background:
      linear-gradient(to left,rgba(20,17,15,.94) 0%,rgba(20,17,15,.80) 26%,rgba(20,17,15,.42) 46%,rgba(20,17,15,.06) 62%,transparent 76%),
      linear-gradient(to top,rgba(20,17,15,.34),transparent 42%);
  }
  .hero-inner{
    position:relative;z-index:2;width:100%;
    display:flex;justify-content:flex-end;
    padding-top:clamp(56px,8vw,80px);padding-bottom:clamp(56px,8vw,80px);
  }
  .hero-copy{max-width:520px;}
  .hero-tag{
    display:inline-block;color:#fff;background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);
    font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    font-weight:600;padding:7px 15px;border-radius:99px;margin-bottom:26px;
  }
  .hero h1{
    color:#fff;font-size:clamp(40px,4.9vw,68px);
    font-weight:500;margin-bottom:22px;
  }
  .hero h1 em{font-style:normal;color:#ffb3ad;}
  .hero p{
    color:rgba(255,255,255,.82);font-size:clamp(15px,1.4vw,18px);
    max-width:44ch;margin:0 0 34px;line-height:1.55;
  }
  .hero-cta{display:flex;gap:14px;flex-wrap:wrap;}

  /* ---------- Trust bar ---------- */
  .trust{border-bottom:1px solid var(--line);background:var(--paper);}
  .trust-grid{
    display:grid;grid-template-columns:repeat(4,1fr);
    gap:1px;background:var(--line);
  }
  .trust-item{
    background:var(--paper);padding:26px 22px;
    display:flex;gap:14px;align-items:flex-start;
  }
  .trust-item svg{width:22px;height:22px;stroke:var(--red);stroke-width:1.5;fill:none;flex-shrink:0;margin-top:2px;}
  .trust-item strong{display:block;font-size:14px;font-weight:600;margin-bottom:2px;}
  .trust-item span{font-size:12.5px;color:var(--muted);line-height:1.45;}

  /* ---------- Section shell ---------- */
  section{padding:clamp(64px,8vw,110px) 0;}
  .sec-head{
    display:flex;align-items:flex-end;justify-content:space-between;
    gap:30px;margin-bottom:44px;flex-wrap:wrap;
  }
  .sec-head h2{font-size:clamp(28px,3.6vw,44px);}
  .sec-head p{color:var(--muted);margin:10px 0 0;font-size:15px;}
  .link-more{
    font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
    border-bottom:1.5px solid var(--ink);padding-bottom:4px;transition:.2s;white-space:nowrap;
  }
  .link-more:hover{color:var(--red);border-color:var(--red);}

  /* ---------- Categories ---------- */
  .cats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
  .cat{
    position:relative;aspect-ratio:3/4;border-radius:var(--radius);
    overflow:hidden;display:flex;align-items:flex-end;padding:26px;
    isolation:isolate;transition:transform .35s ease;
  }

  .cat::before{content:"";position:absolute;inset:0;z-index:-2;transition:transform .5s ease;}
  .cat:hover::before{transform:scale(1.06);}
  /* photo tiles sit at the same depth as the gradient placeholders */
  .cat img{
    position:absolute;inset:0;z-index:-2;
    width:100%;height:100%;object-fit:cover;
    transition:transform .5s ease;
  }
  .cat:hover img{transform:scale(1.06);}
  .cat::after{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.05) 62%);
  }
  .c1::before{background:linear-gradient(160deg,#3f3a35,#6b5c50);}
  .c2::before{background:linear-gradient(160deg,#2f3438,#59646b);}
  .c3::before{background:linear-gradient(160deg,#4a2b28,#8c4a42);}
  .c4::before{background:linear-gradient(160deg,#33352c,#6e7059);}
  .cat h3{color:#fff;font-size:22px;margin-bottom:4px;}
  .cat span{color:rgba(255,255,255,.7);font-size:12.5px;letter-spacing:.04em;}

  /* ---------- Products ---------- */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px 22px;}
  .card{position:relative;}
  .card-img{
    position:relative;aspect-ratio:4/5;background:var(--paper);
    border-radius:var(--radius);overflow:hidden;margin-bottom:14px;
  }
  .card-img img{
    width:100%;height:100%;object-fit:contain; background-color:#fff;
    transition:transform .5s ease;padding:10px;
  }
  .card:hover .card-img img{transform:scale(1.04);}
  .tag{
    position:absolute;top:12px;left:12px;z-index:2;
    font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    padding:5px 10px;border-radius:2px;background:var(--ink);color:#fff;
  }
  .tag.red{background:var(--red);}
  .tag.cream{background:#fff;color:var(--ink);border:1px solid var(--line);}
  .wish{
    position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
    border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;
    opacity:0;transform:translateY(-4px);transition:.25s;
  }
  .card:hover .wish{opacity:1;transform:none;}
  .wish svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.6;fill:none;}
  .quick{
    position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
    background:var(--ink);color:#fff;text-align:center;
    font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    padding:12px;border-radius:var(--radius);
    opacity:0;transform:translateY(10px);transition:.28s ease;
  }
  .card:hover .quick{opacity:1;transform:none;}
  .quick:hover{background:var(--red);}
  .card h3{font-size:15px;font-weight:500;margin-bottom:5px;}
  .card .meta{font-size:12.5px;color:var(--muted);margin-bottom:8px;}
  .price{display:flex;align-items:baseline;gap:9px;font-size:15px;font-weight:600;}
  .price .old{font-size:13px;font-weight:400;color:var(--muted);text-decoration:line-through;}
  .price .now{color:var(--red);}
  .produkt-home-cena-sleva	{ position:absolute; text-decoration:line-through; color:var(--red); bottom:0; right:40px}
  .swatches{display:flex;gap:5px;margin-top:10px;}
  .sw{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.16);}
  @media(max-width:1023px){
  .produkt-home-cena-sleva	{ right:20px}
  }

  /* ---------- Editorial split ---------- */
  .editorial{background:var(--paper);}
  .split{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:clamp(30px,6vw,80px);}
  .split-visual{
    aspect-ratio:5/4;border-radius:var(--radius);
    overflow:hidden;background:var(--paper);
  }
  .split-visual img{width:100%;height:100%;object-fit:cover;}
  .split-text h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:20px;max-width:16ch;}
  .split-text p{color:var(--ink-soft);font-size:16px;margin:0 0 18px;max-width:48ch;}
  .facts{display:flex;gap:40px;margin:32px 0 34px;flex-wrap:wrap;}
  .fact strong{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;}
  .fact span{font-size:12.5px;color:var(--muted);}

  /* ---------- Reviews ---------- */
  .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .review{border:1px solid var(--line);border-radius:var(--radius);padding:28px;}
  .stars{color:var(--red);letter-spacing:2px;font-size:14px;}
  .review p{font-size:15px;color:var(--ink-soft);margin:0 0 18px;line-height:1.65;}
  .review .who{font-size:13px;font-weight:600;}
  .review .who span{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:2px;}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0;}
  .fgrid{display:grid;grid-template-columns:1.6fr repeat(2,1fr);gap:40px;padding-bottom:48px;}
  .fbrand p{color:var(--muted);font-size:14px;max-width:34ch;margin:16px 0 20px;}
  .social{display:flex;gap:9px;}
  .social a{
    width:36px;height:36px;border:1px solid var(--line);border-radius:50%;
    display:grid;place-items:center;transition:.2s;
  }
  .social a:hover{background:var(--ink);border-color:var(--ink);}
  .social svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.6;fill:none;transition:stroke .2s;}
  .social a:hover svg{stroke:#fff;}
  .fcol h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--muted);font-weight:600;}
  .fcol a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0;transition:color .2s;}
  .fcol a:hover{color:var(--red);}
  .fbottom{
    border-top:1px solid var(--line);padding:22px 0;
    display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
    font-size:12.5px;color:var(--muted);
  }
  .pays{display:flex;gap:7px;flex-wrap:wrap;}
  /* Štítky platebních metod v patičce.

     Šířka byla pevných 40px, což stačilo na "VISA" a "MC", ale ne na
     "Dobírka" — a v němčině na "Nachnahme" teprve ne. Text z rámečku
     přetékal. Teď si každý štítek bere šířku podle svého slova, 40px
     je jen spodní hranice, aby zůstaly VISA a MC stejně široké jako
     dosud a řada se nerozdrobila. */
  .pay{
    min-width:40px;height:26px;padding:0 7px;
    border:1px solid var(--line);border-radius:3px;
    display:grid;place-items:center;font-size:8.5px;font-weight:700;
    letter-spacing:.04em;color:var(--muted);white-space:nowrap;
  }

  /* ---------- Responsive ---------- */
  @media(max-width:1080px){
    .menu{gap:22px;}
    /* .cats zůstávají tři vedle sebe až do mobilu — od té doby, co
       dlaždice nejsou čtyři ale tři, by tu dva sloupce udělaly řadu
       2 + 1 a vedle poslední dlaždice by zela díra. */
    .grid{grid-template-columns:repeat(2,1fr);}
    .trust-grid{grid-template-columns:repeat(2,1fr);}
  }
  /* Tablet na šířku a menší notebooky. Hero je tu ještě vedle sebe
     (nestohuje se jako na mobilu), ale 520px textu vedle fotky je moc —
     sloupec se přes ni roztahuje. Užší sloupec nechá fotku vyniknout.

     Rozsah je uzavřený z obou stran schválně: od 820px níž si hero
     řeší blok pod tímhle a tam má mít .hero-copy šířku bez omezení. */
  @media (min-width:821px) and (max-width:1024px){
    .hero-copy{max-width:335px;}
  }

  @media(max-width:820px){
    /* drop the third claim before it can reach the language switch */
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .menu{display:none;}
    .burger{display:grid;}
    .nav{height:64px;gap:16px;}
    .logo{flex:1;font-size:18px;}
    /* Hero stacks: subjects up top, copy over a bottom scrim */
    .hero{align-items:flex-end;min-height:min(112vw,760px);}
    .hero-media img{object-position:50% top;}
    .hero-media::after{
      background:linear-gradient(to top,rgba(20,17,15,.93) 0%,rgba(20,17,15,.80) 26%,rgba(20,17,15,.30) 70%,transparent 100%);
    }
    .hero-inner{justify-content:flex-start;padding-top:0;}
    .hero-copy{max-width:none;}
    .hero h1{font-size:clamp(34px,8vw,52px);}

    /* Na mobilu zůstává z hera jen štítek kolekce, nadpis a tlačítka.
       Odstavec pod nadpisem by na výšku ubral místo, které potřebuje
       fotka — hero se tu stejně zkracuje na min(112vw, 760px). */
    .hero p{display:none;}
    .hero-tag{margin-bottom:16px;}
    .split{grid-template-columns:1fr;}
    .split-visual{order:-1;aspect-ratio:16/11;}
    .reviews{grid-template-columns:1fr;}
    .reviews .review:nth-child(3){display:none;}
    .fgrid{grid-template-columns:1fr 1fr;gap:32px;}
    .fbrand{grid-column:1/-1;}
  }
  @media(max-width:620px){
    .grid{grid-template-columns:repeat(2,1fr);}
    /* Na mobilu jsou dva sloupce jako u produktů, a protože jsou
       dlaždice tři, poslední se roztáhne přes obě — jinak by vedle ní
       zůstalo prázdné místo. Na šířku je pak nízká, ať z ní na telefonu
       není věž přes celou obrazovku. */
    .cats{grid-template-columns:repeat(2,1fr);}
    .cats .cat:last-child{grid-column:1/-1;aspect-ratio:16/11;}
    .trust-grid{grid-template-columns:1fr;}
    .hero-cta .btn{flex:1;padding:15px 18px;}
    .sec-head{margin-bottom:30px;}
    /* keep only the headline claim so it can't run under the language switch */
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;}
    .announce-msg{padding-right:64px;}
    .facts{gap:26px;}
  }

  /* ---------- Scroll reveal ---------- */
  /* Hidden only when JS is available, so without JS nothing disappears.
     Classes are stripped after the animation so hover transforms keep working. */
  @media (prefers-reduced-motion:no-preference){
    .js [data-rv],
    .js [data-rv-group] > *{opacity:0;}
    .js [data-rv].rv-go,
    .js [data-rv-group].rv-go > *{
      animation:rvIn .7s cubic-bezier(.22,.61,.36,1) both;
    }
    .js [data-rv-group].rv-go > *:nth-child(2){animation-delay:70ms;}
    .js [data-rv-group].rv-go > *:nth-child(3){animation-delay:140ms;}
    .js [data-rv-group].rv-go > *:nth-child(4){animation-delay:210ms;}
    .js [data-rv-group].rv-go > *:nth-child(5){animation-delay:280ms;}
    .js [data-rv-group].rv-go > *:nth-child(6){animation-delay:350ms;}
    .js [data-rv-group].rv-go > *:nth-child(n+7){animation-delay:420ms;}
  }
  @keyframes rvIn{
    from{opacity:0;transform:translateY(24px);}
    to{opacity:1;transform:translateY(0);}
  }




  /* ---------- Head ---------- */
  .crumb{padding-top:20px;font-size:12.5px;color:var(--muted);}
  .crumb a:hover{color:var(--red);}
  .crumb span{margin:0 8px;opacity:.5;}

  .listing{display:grid;grid-template-columns:238px 1fr;gap:clamp(26px,3.5vw,52px);align-items:start;padding-top:26px;padding-bottom:clamp(56px,7vw,90px);}

  /* ---------- Sidebar ---------- */
  .side{position:sticky;top:96px;}
  .side-block{border-bottom:1px solid var(--line);padding-bottom:22px;margin-bottom:22px;}
  .side-block:last-child{border-bottom:none;margin-bottom:0;}
  .side h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px;}

  .tree{list-style:none;margin:0;padding:0;}
  .tree > li{margin-bottom:4px;}
  .tree-main{
    display:flex;align-items:center;gap:10px;width:100%;
    font-size:15px;font-weight:600;padding:8px 0;text-align:left;transition:color .2s;
  }
  .tree-main:hover{color:var(--red);}
  .tree-main[aria-current="true"]{color:var(--ink);}
  .tree-main[aria-current="true"]::before{
    content:"";width:3px;height:15px;background:var(--red);
    margin-left: 2px;border-radius:2px;
  }
  .tree-main svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .25s;flex-shrink:0;}
  .tree-main[aria-expanded="true"] svg{transform:rotate(180deg);}
  .tree-sub{list-style:none;margin:2px 0 10px;padding:0 0 0 2px;display:grid;gap:1px;}
  .tree-sub[hidden]{display:none;}
  .tree-sub a{
    display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
    font-size:14px;color:var(--ink-soft);padding:7px 10px;text-align:left;
    border-left:2px solid var(--line);transition:.18s;
  }
  .tree-sub a:hover{color:var(--ink);border-left-color:var(--muted);background:var(--paper);}
  .tree-sub a[aria-current="true"]{color:var(--ink);font-weight:600;border-left-color:var(--red);background:var(--paper);}
  .tree-sub .n{font-size:12px;color:var(--muted);font-weight:400;}

  .chips{display:flex;flex-wrap:wrap;gap:7px;}
  .chip{
    display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
    border-radius:99px;padding:6px 12px;font-size:12.5px;transition:.18s;background:#fff;
  }
  .chip:hover{border-color:var(--muted);}
  .chip[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:#fff;}
  .chip i{width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex-shrink:0;}
  .chip[aria-pressed="true"] i{border-color:rgba(255,255,255,.5);}
  .clear{font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);margin-top:14px;display:inline-block;transition:.2s;}
  .clear:hover{color:var(--red);border-color:var(--red);}

  /* ---------- Toolbar ---------- */
  .page-head{margin-bottom:22px;}
  .page-head h1{font-size:clamp(26px,3.2vw,38px);margin-bottom:8px;}
  .page-head p{color:var(--muted);font-size:14.5px;margin:0;max-width:62ch;}
  .toolbar{
    display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:14px 0;margin-bottom:26px;
  }
  .count{font-size:13.5px;color:var(--muted);}
  .count b{color:var(--ink);font-weight:600;}
  .sortwrap{display:flex;align-items:center;gap:10px;    flex-flow: wrap;}
  .sortwrap label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .sortwrap select{
    border:1px solid var(--line);border-radius:var(--radius);padding:9px 34px 9px 12px;
    font-size:13.5px;font-family:inherit;background:#fff;color:var(--ink);outline:none;appearance:none;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a827b' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 10px center;background-size:16px;transition:border-color .18s;

  }
  .sortwrap select:focus{border-color:var(--ink);}
  .filter-btn{display:none;}
  /*
  .sortwrap{display:block; }
  .sortwrap select{ max-width:calc(100% - 70px); }
      */

  /* ---------- Product grid (stejné karty jako na HP) ---------- */
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 22px;}
  #novinky .grid{grid-template-columns:repeat(4,1fr);}
  .card{position:relative;}
  .card-img{
    position:relative;aspect-ratio:4/5;background:#fff;
    border-radius:var(--radius);overflow:hidden;margin-bottom:14px;
  }
  .card-img img{width:100%;height:100%;object-fit:contain;transition:transform .5s ease;}
  .card:hover .card-img img{transform:scale(1.04);}
  .tag{
    position:absolute;top:12px;left:12px;z-index:2;
    font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
    padding:5px 10px;border-radius:2px;background:var(--ink);color:#fff;
  }
  .tag.red{background:var(--red);}
  .tag.cream{background:#fff;color:var(--ink);border:1px solid var(--line);}
  .wish{
    position:absolute;top:10px;right:10px;z-index:2;width:34px;height:34px;
    border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;
    opacity:0;transform:translateY(-4px);transition:.25s;
  }
  .card:hover .wish{opacity:1;transform:none;}
  .wish svg{width:16px;height:16px;stroke:var(--ink);stroke-width:1.6;fill:none;}
  .wish[aria-pressed="true"] svg{fill:var(--red);stroke:var(--red);}
  .quick{
    position:absolute;left:12px;right:12px;bottom:12px;z-index:2;
    background:var(--ink);color:#fff;text-align:center;
    font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    padding:12px;border-radius:var(--radius);
    opacity:0;transform:translateY(10px);transition:.28s ease;
  }
  .card:hover .quick{opacity:1;transform:none;}
  .quick:hover{background:var(--red);}
  .card h3{font-size:15px;font-weight:500;margin-bottom:5px;}
  .card h3 a:hover{color:var(--red);}
  .card .meta{font-size:12.5px;color:var(--muted);margin:0 0 8px;}
  .price{display:flex;align-items:baseline;gap:9px;font-size:15px;font-weight:600;}
  .swatches{display:flex;gap:5px;margin-top:10px;}
  .sw{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.16);}

  .more-wrap{text-align:center;padding-top:46px;outline: none; -webkit-tap-highlight-color: transparent}
  .more-note{font-size:13px;color:var(--muted);margin:0 0 16px;}
  .empty{text-align:center;padding:70px 20px;border:1px dashed var(--line);border-radius:var(--radius);}
  .empty svg{width:38px;height:38px;stroke:var(--muted);stroke-width:1.2;fill:none;margin:0 auto 18px;}
  .empty h3{font-size:19px;margin-bottom:8px;}
  .empty p{color:var(--muted);font-size:14px;margin:0 0 20px;}

  /* ---------- Scroll reveal ---------- */
  @media (prefers-reduced-motion:no-preference){
    .js .card.rv{animation:rvIn .55s cubic-bezier(.22,.61,.36,1) both;}
  }
  @keyframes rvIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0;}
  .fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:48px;}
  .fbrand p{color:var(--muted);font-size:14px;max-width:34ch;margin:16px 0 20px;}
  .fcol h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--muted);font-weight:600;}
  .fcol a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0;transition:color .2s;}
  .fcol a:hover{color:var(--red);}
  .fbottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}

  @media(max-width:1180px){ .grid{grid-template-columns:repeat(3,1fr);} #novinky .grid{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:900px){
    .listing{grid-template-columns:1fr;}
    .side{
      position:relative;top:0
    }

    .side-close{display:flex !important;}
    .filter-btn{
      display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
      border-radius:var(--radius);padding:9px 14px;font-size:12px;font-weight:600;
      letter-spacing:.08em;text-transform:uppercase;transition:.2s;
    }
    .filter-btn:hover{border-color:var(--ink);}
    .filter-btn svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;}
  }
  .side-close{
    display:none;align-items:center;justify-content:space-between;
    width:100%;margin-bottom:20px;font-size:16px;font-weight:600;
  }
  .side-close svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;}
  @media(max-width:820px){
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .menu{display:none;} .burger{display:grid;}
    .nav{height:64px;gap:16px;} .logo{flex:1;font-size:18px;}
    .fgrid{grid-template-columns:1fr 1fr;gap:32px;}
    .fbrand{grid-column:1/-1;}
  }
  @media(max-width:640px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .grid{grid-template-columns:repeat(2,1fr);gap:24px 14px;}
    .quick{display:none;}
    .wish{opacity:1;transform:none;}
  }
  @media(max-width:480px){
    .grid {
        grid-template-columns: repeat(1, 1fr);
    }
  }

  /* Detail produktu */


  /* ---------- Product ---------- */
  .product{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(28px,5vw,72px);padding-top:28px;padding-bottom:clamp(56px,7vw,90px);align-items:start;}

  .gallery{display:grid;grid-template-columns:84px 1fr;gap:14px;}
  .thumbs{display:flex;flex-direction:column;gap:10px;}
  .thumb{
    aspect-ratio:3/4;background:#fff;border:1px solid var(--line);padding: 5px;
    border-radius:var(--radius);overflow:hidden;transition:border-color .2s;
  }
  .thumb img{width:100%;height:100%;object-fit:contain;}
  .thumb:hover{border-color:var(--muted);}
  .thumb[aria-current="true"]{border-color:var(--ink);}
  /* Živá fotka (kod-live.webp) je nafocená na celou plochu — padding by
     ji jen zmenšil, proto ho u tohoto náhledu rušíme a fotku necháme
     rámeček vyplnit. */
  .thumb-ziva{padding:0;}
  .thumb-ziva img{object-fit:cover;}
  .stage{
    position:relative;aspect-ratio:3/4;background:#fff;
    border-radius:var(--radius);overflow:hidden;
  }
  .stage img{width:100%;height:100%;object-fit:contain;}

  /* Do velké fotky se dá kliknout — otevře se přes celou obrazovku
     (PhotoSwipe). Lupa v kurzoru je jediné, co to návštěvníkovi
     napoví, jinak vypadá obrázek jako obyčejná fotka. */
  .stage img{cursor:zoom-in;}
  .stage img:focus-visible{outline:2px solid var(--ink);outline-offset:3px;}

  /* Lightbox patří nad všechno ostatní — hlavička webu má z-index 100
     a bez tohohle by se přes otevřenou fotku kreslila. */
  .pswp{z-index:9999;}
  .stage-tag{
    position:absolute;top:14px;left:14px;background:var(--red);color:#fff;
    font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:2px;;z-index:10
  }
  .stage-dalsi{ position:absolute;aspect-ratio:3/4;background:#fff;border-radius:var(--radius);z-index:10}

  .buy h1{font-size:clamp(25px,2.9vw,34px);margin-bottom:10px;}
  .meta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin-bottom:22px;}
  .stars{color:var(--red);letter-spacing:1.5px;font-size:13px;}
  .meta-row a{border-bottom:1px solid var(--line);}
  .meta-row a:hover{color:var(--ink);border-color:var(--ink);}

  .price-row{position:relative; display:flex;align-items:baseline;gap:12px;margin-bottom:6px;}
  .price-detail{font-size:30px;font-weight:600;letter-spacing:-.02em;}

  .price-sleva-text	{font-size:20px;font-weight:600;letter-spacing:-.02em;text-decoration:line-through; color:var(--red);}
  .vat{font-size:12.5px;color:var(--muted);}
  .price-note{font-size:13px;color:var(--ok);font-weight:500;margin:0 0 26px;display:flex;align-items:center;gap:7px;}
  .price-note svg{width:15px;height:15px;stroke:var(--ok);stroke-width:2;fill:none;}

  .opt{margin-bottom:24px;}
  .opt-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:11px;}
  .opt-head h4{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .opt-head .chosen{font-size:13px;color:var(--ink);font-weight:500;}
  .opt-head a{font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);}
  .opt-head a:hover{color:var(--ink);border-color:var(--ink);}

  .colors{display:flex;gap:10px;}
  .color{
    width:58px;aspect-ratio:3/4;border:1px solid var(--line);border-radius:var(--radius);
    overflow:hidden;background:#fff;padding:3px;transition:border-color .2s;
  }
  .color img{width:100%;height:100%;object-fit:contain;}
  .color:hover{border-color:var(--muted);}
  .color[aria-current="true"]{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}

  .sizes{display:flex;gap:8px;flex-wrap:wrap;}
  .size{
    min-width:54px;padding:11px 8px;border:1px solid var(--line);border-radius:var(--radius);
    font-size:13px;font-weight:600;letter-spacing:.05em;background:#fff;transition:.18s;
  }
  .size:hover:not(:disabled){border-color:var(--ink);}
  .size[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink);}
  .size:disabled{
    color:var(--muted);cursor:not-allowed;background:var(--paper);
    text-decoration:line-through;text-decoration-color:var(--red);opacity:.7;
  }
  .size-hint{ font-size:12.5px;color:var(--red);margin:10px 0 0;min-height:20px;}
  #velikosti { scroll-margin-top: 40px;	}
  @media(max-width:1023px){
    #velikosti { scroll-margin-top: 0;	}
  }
  .cart-row{display:flex;gap:10px;align-items:stretch;margin:6px 0 18px;flex-wrap:wrap;}
  .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);}
  .qty button{width:42px;height:100%;font-size:17px;color:var(--ink-soft);transition:color .2s;}
  .qty button:hover{color:var(--red);}
  .qty input{
    width:44px;text-align:center;border:none;outline:none;font-size:14px;font-weight:600;
    background:transparent;-moz-appearance:textfield;
  }
  .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .btn-cart{flex:1;min-width:200px;}
  .wish-btn{
    width:52px;border:1px solid var(--line);border-radius:var(--radius);
    display:grid;place-items:center;transition:.2s;
  }
  .wish-btn:hover{border-color:var(--ink);}
  .wish-btn svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.6;fill:none;}
  .wish-btn[aria-pressed="true"] svg{fill:var(--red);stroke:var(--red);}

  .assure{border-top:1px solid var(--line);margin-top:22px;padding-top:20px;display:grid;gap:13px;}
  .assure div{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:var(--ink-soft);}
  .assure svg{width:17px;height:17px;stroke:var(--red);stroke-width:1.6;fill:none;flex-shrink:0;margin-top:3px;}
  .assure strong{color:var(--ink);font-weight:600;}

  /* ---------- Tabs ---------- */
  .info{border-top:1px solid var(--line);padding:clamp(44px,5vw,68px) 0;}
  .tabbar{display:flex;gap:32px;border-bottom:1px solid var(--line);margin-bottom:32px;flex-wrap:wrap;}
  .tab{
    padding:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);position:relative;transition:color .2s;
  }
  .tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transition:transform .25s;}
  .tab:hover{color:var(--ink);}
  .tab[aria-selected="true"]{color:var(--ink);}
  .tab[aria-selected="true"]::after{transform:scaleX(1);}
  .panel[hidden]{display:none;}
  .panel{max-width:820px;}
  .panel p{color:var(--ink-soft);margin:16px 0 0 16px;}
  .panel ul{color:var(--ink-soft);margin:0 0 16px;padding-left:20px;}
  .panel li{margin-bottom:7px;}

  table{border-collapse:collapse;width:100%;font-size:14px;}
  th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
  th{font-weight:600;color:var(--muted);font-size:12px;letter-spacing:.1em;text-transform:uppercase;}
  tbody th{color:var(--ink);font-size:14px;letter-spacing:0;text-transform:none;width:34%;}
  .tbl-note{font-size:12.5px;color:var(--muted);margin-top:14px;}



 /* ---------- množství pro velkoobchod ---------- */
  .qgrid{display:grid;gap:8px;}
  .qrow{display:grid;grid-template-columns:52px 94px 1fr;align-items:center;gap:14px;}
  .qsize{font-size:14px;font-weight:600;letter-spacing:.04em;text-align:right;}
  .qrow input{
    width:100%;border:1px solid var(--line);border-radius:var(--radius);
    padding:10px 12px;font-size:15px;font-family:inherit;text-align:center;
    color:var(--ink);background:#fff;outline:none;-moz-appearance:textfield;
    transition:border-color .18s,box-shadow .18s;
  }
  .qrow input::-webkit-outer-spin-button,.qrow input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .qrow input:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
  .qrow.has input{border-color:var(--ink);font-weight:600;}
  .qrow.is-off .qsize{color:var(--muted);}
  .qrow.is-off input{background:var(--paper);color:var(--muted);cursor:not-allowed;}
  .qnote{font-size:12.5px;color:var(--muted);}
  .qsum{
    display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
    border-top:1px solid var(--line);margin-top:16px;padding-top:14px;font-size:14px;color:var(--muted);
  }



  /* ---------- Related ---------- */
  .rel{border-top:1px solid var(--line);padding:clamp(44px,5vw,68px) 0;}
  .rel h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:30px;}
  .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .card-img{aspect-ratio:3/4;background:#fff;border-radius:var(--radius);overflow:hidden;margin-bottom:13px;}
  .card-img img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease;}
  .rel-card {position:relative;}
  .rel-card:hover .card-img img{transform:scale(1.04);}
  .rel-card h3{font-size:15px;font-weight:500;margin-bottom:5px;}
  .rel-card .p{font-size:15px;font-weight:600;}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0;}
  .fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:48px;}
  .fbrand p{color:var(--muted);font-size:14px;max-width:34ch;margin:16px 0 20px;}
  .fcol h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--muted);font-weight:600;}
  .fcol a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0;transition:color .2s;}
  .fcol a:hover{color:var(--red);}
  .fbottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}

  @media(max-width:1080px){
    .product{grid-template-columns:1fr 1fr;gap:32px;}
    .reviews,.rel-grid,.ship-grid{grid-template-columns:repeat(2,1fr);}
    .reviews .review:nth-child(3),.rel-grid .rel-card:nth-child(3){display:none;}
    .ship-grid{grid-template-columns:1fr;}
  }
  @media(max-width:820px){
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .menu{display:none;} .burger{display:grid;}
    .nav{height:64px;gap:16px;} .logo{flex:1;font-size:18px;}
    .product{grid-template-columns:1fr;}
    .gallery{grid-template-columns:1fr;}
    .thumbs{flex-direction:row;order:2;}
    .thumb{width:76px;}
    .reviews,.rel-grid{grid-template-columns:1fr;}
    .reviews .review:nth-child(3){display:none;}
    .fgrid{grid-template-columns:1fr 1fr;gap:32px;}
    .fbrand{grid-column:1/-1;}
  }
  @media(max-width:620px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .tabbar{gap:20px;}
    .btn-cart{min-width:0;}
  }

  /* ---------- Scroll reveal ---------- */
  /* Hidden only when JS is available, so without JS nothing disappears.
     Classes are stripped after the animation so hover transforms keep working. */
  @media (prefers-reduced-motion:no-preference){
    .js [data-rv],
    .js [data-rv-group] > *{opacity:0;}
    .js [data-rv].rv-go,
    .js [data-rv-group].rv-go > *{
      animation:rvIn .7s cubic-bezier(.22,.61,.36,1) both;
    }
    .js [data-rv-group].rv-go > *:nth-child(2){animation-delay:70ms;}
    .js [data-rv-group].rv-go > *:nth-child(3){animation-delay:140ms;}
    .js [data-rv-group].rv-go > *:nth-child(4){animation-delay:210ms;}
    .js [data-rv-group].rv-go > *:nth-child(5){animation-delay:280ms;}
    .js [data-rv-group].rv-go > *:nth-child(6){animation-delay:350ms;}
    .js [data-rv-group].rv-go > *:nth-child(n+7){animation-delay:420ms;}
  }
  @keyframes rvIn{
    from{opacity:0;transform:translateY(24px);}
    to{opacity:1;transform:translateY(0);}
  }



  /* Obchodní podmínky */


  /* ---------- Page head ---------- */
  .crumb{padding-top:20px;font-size:12.5px;color:var(--muted);}
  .crumb a:hover{color:var(--red);}
  .crumb span{margin:0 8px;opacity:.5;}
  .phead{padding-top:26px;padding-bottom:30px;}
  .phead h1{font-size:clamp(30px,4vw,46px);margin-bottom:12px;}
  .phead-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;}
  .phead-meta p{margin:0;font-size:14px;color:var(--muted);}
  .phead-meta p b{color:var(--ink);font-weight:600;}

  /* ---------- Quick facts ---------- */
  .facts-op{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
    margin:32px 0 0;overflow:hidden;
  }
  .fact-op{background:var(--paper);padding:22px 20px;}
  .fact-op svg{width:20px;height:20px;stroke:var(--red);stroke-width:1.6;fill:none;margin-bottom:12px;}
  .fact-op strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:3px;}
  .fact-op span{font-size:12.5px;color:var(--muted);line-height:1.45;display:block;}
  .fact-op a{border-bottom:1px solid var(--line);}
  .fact-op a:hover{color:var(--red);border-color:var(--red);}

  /* ---------- Layout ---------- */
  .doc{display:grid;grid-template-columns:262px 1fr;gap:clamp(28px,4vw,64px);align-items:start;padding-top:clamp(34px,4vw,52px);padding-bottom:clamp(56px,7vw,90px);}

  /* ---------- TOC ---------- */
  .toc{position:sticky;top:96px;max-height:calc(100vh - 130px);overflow-y:auto;padding-right:6px;}
  .toc h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px;}
  .toc ol{list-style:none;margin:0;padding:0;counter-reset:none;}
  .toc li{margin-bottom:1px;}
  .toc a{
    display:flex;gap:9px;font-size:13.5px;color:var(--ink-soft);
    padding:7px 10px;border-left:2px solid var(--line);transition:.18s;line-height:1.4;
  }
  .toc a:hover{color:var(--ink);border-left-color:var(--muted);background:var(--paper);}
  .toc a.active{color:var(--ink);font-weight:600;border-left-color:var(--red);background:var(--paper);}
  .toc a i{font-style:normal;color:var(--muted);font-weight:600;flex-shrink:0;min-width:24px;}
  .toc a.active i{color:var(--red);}
  .toc-sep{border-top:1px solid var(--line);margin:14px 0;}

  /* ---------- Content ---------- */
  .doc-body{max-width:72ch;}
  .doc-body section{scroll-margin-top:100px;padding-bottom:38px;}
  .doc-body h2{
    font-size:clamp(19px,2.2vw,25px);margin:0 0 18px;
    display:flex;gap:12px;align-items:baseline;
  }
  .doc-body h2 i{font-style:normal;color:var(--red);font-weight:600;font-size:.72em;letter-spacing:.04em;flex-shrink:0;}
  .doc-body h3{font-size:16px;margin:26px 0 12px;}
  .doc-body p{color:var(--ink-soft);margin:0 0 14px;}
  .doc-body a[href^="http"],.doc-body a[href^="mailto"],.doc-body a[href^="tel"]{
    color:var(--ink);border-bottom:1px solid var(--line);word-break:break-word;
  }
  .doc-body a[href^="http"]:hover,.doc-body a[href^="mailto"]:hover,.doc-body a[href^="tel"]:hover{color:var(--red);border-color:var(--red);}

  .doc-body ol.clauses{list-style:none;margin:0 0 14px;padding:0;counter-reset:c;}
  .doc-body ol.clauses > li{
    counter-increment:c;position:relative;padding-left:38px;margin-bottom:15px;color:var(--ink-soft);
  }
  .doc-body ol.clauses > li::before{
    content:counter(c) ".";position:absolute;left:0;top:0;
    font-size:13px;font-weight:600;color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .doc-body ul.bul{margin:10px 0 14px;padding-left:20px;color:var(--ink-soft);}
  .doc-body ul.bul li{margin-bottom:7px;}

  .callout{
    border:1px solid var(--line);border-left:3px solid var(--red);
    border-radius:var(--radius);background:var(--paper);
    padding:20px 22px;margin:0 0 22px;
  }
  .callout h3{margin:0 0 12px;font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .callout p{margin:0 0 8px;}
  .callout p:last-child{margin-bottom:0;}
  .callout address{font-style:normal;color:var(--ink-soft);line-height:1.7;}
  .callout b{color:var(--ink);font-weight:600;}

  table.rates{border-collapse:collapse;width:100%;margin:6px 0 18px;font-size:14.5px;}
  table.rates th,table.rates td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
  table.rates thead th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  table.rates td:last-child,table.rates th:last-child{text-align:right;font-weight:600;white-space:nowrap;}
  table.rates tfoot td{border-bottom:none;color:var(--ok);font-weight:600;}

  .doc-foot{border-top:1px solid var(--line);padding-top:26px;margin-top:8px;}
  .doc-foot p{font-size:13.5px;color:var(--muted);margin:0 0 18px;}
  .doc-links{display:flex;gap:10px;flex-wrap:wrap;}

  .totop{
    position:fixed;right:24px;bottom:24px;z-index:90;
    width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;
    display:grid;place-items:center;opacity:0;pointer-events:none;transition:.25s;
  }
  .totop.show{opacity:1;pointer-events:auto;}
  .totop:hover{background:var(--red);}
  .totop svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none;}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0;}
  .fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:48px;}
  .fbrand p{color:var(--muted);font-size:14px;max-width:34ch;margin:16px 0 20px;}
  .fcol h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--muted);font-weight:600;}
  .fcol a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0;transition:color .2s;}
  .fcol a:hover{color:var(--red);}
  .fbottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}

  @media(max-width:1000px){
    .doc{grid-template-columns:1fr;}
    .toc{
      position:static;max-height:none;border:1px solid var(--line);
      border-radius:var(--radius);padding:20px;background:var(--paper);
    }
    .toc ol{columns:2;column-gap:22px;}
    .toc li{break-inside:avoid;}
    .facts-op{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:820px){
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .menu{display:none;} .burger{display:grid;}
    .nav{height:64px;gap:16px;} .logo{flex:1;font-size:18px;}
    .fgrid{grid-template-columns:1fr 1fr;gap:32px;}
    .fbrand{grid-column:1/-1;}
  }
  @media(max-width:600px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .facts-op{grid-template-columns:1fr;}
    .toc ol{columns:1;}
    .doc-body ol.clauses > li{padding-left:30px;}
    .totop{right:14px;bottom:14px;}
  }

  @media print{
    .announce,header,.toc,.totop,footer,.doc-links,.crumb,.phead-meta .btn{display:none !important;}
    .doc{grid-template-columns:1fr;padding:0;}
    .doc-body{max-width:none;}
    body{font-size:11pt;}
    .doc-body section{page-break-inside:avoid;}
    a{color:#000;}
  }
  
  
  
  
  
  

  /* Reklamace */

  /* ---------- Choice cards ---------- */
  .choose{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:34px;}
  .pick{display:block;border:1px solid var(--line);border-radius:var(--radius);padding:28px;transition:.22s ease;background:#fff;
  		outline: none; -webkit-tap-highlight-color: transparent}
  .pick:hover{border-color:var(--ink);transform:translateY(-3px);}
  .pick .ico{float: left;width:26px;height:26px;stroke:var(--red);stroke-width:1.5;fill:none;margin-bottom:16px;}
  .pick .when{display:inline-block;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--muted);margin-left:8px;margin-bottom:8px;}
  .pick h2{font-size:clamp(20px,2.3vw,25px);margin-bottom:10px;clear:both;}
  .pick p{color:var(--ink-soft);font-size:14.5px;margin:0 0 18px;}
  .pick .go{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);padding-bottom:3px;}
  .pick:hover .go{color:var(--red);border-color:var(--red);}
  .pick .go svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;}

  /* ---------- Sections ---------- */
  section{padding-top:clamp(52px,6vw,84px);}
  section > .wrap > .sec-head{max-width:68ch;margin-bottom:34px;}
  .eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:600;margin:0 0 12px;}
  .sec-head h2{font-size:clamp(24px,3vw,34px);margin-bottom:12px;}
  .sec-head p{color:var(--ink-soft);margin:0;}

  .stepy{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
  .step{background:#fff;padding:26px 24px;}
  .step .n{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;margin-bottom:14px;}
  .step h3{font-size:16px;margin-bottom:8px;}
  .step p{font-size:14px;color:var(--ink-soft);margin:0 0 12px;}
  .step p:last-child{margin-bottom:0;}
  .step .mini{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;border-bottom:1px solid var(--line);padding-bottom:2px;transition:.2s;}
  .step .mini:hover{color:var(--red);border-color:var(--red);}
  .step .mini svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none;}

  .keys{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px;}
  .key{border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;background:var(--paper);}
  .key strong{display:block;font-size:18px;font-weight:600;letter-spacing:-.02em;margin-bottom:3px;}
  .key span{font-size:13px;color:var(--ink-soft);line-height:1.5;display:block;}

  .warn{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--radius);padding:20px 22px;margin-top:16px;background:#fff;}
  .warn h3{font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px;}
  .warn ul{margin:0;padding-left:20px;color:var(--ink-soft);font-size:14.5px;}
  .warn li{margin-bottom:6px;}

  /* ---------- Address ---------- */
  .addr-band{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(52px,6vw,84px);padding-top:clamp(44px,5vw,64px);padding-bottom:clamp(44px,5vw,64px);}
  .addr{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center;}
  .addr h2{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px;}
  .addr p{color:var(--ink-soft);margin:0 0 20px;max-width:46ch;}
  .addr-box{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:26px 28px;}
  .addr-box address{font-style:normal;font-size:17px;line-height:1.75;margin-bottom:18px;}
  .addr-box address b{font-weight:600;}
  .copy{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  		border:1px solid var(--line);border-radius:var(--radius);padding:10px 16px;transition:.2s;outline: none; -webkit-tap-highlight-color: transparent}
  .copy:hover{border-color:var(--ink);background:var(--ink);color:#fff;}
  .copy svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;}
  .copy.done{border-color:var(--ok);color:var(--ok);background:#fff;}

  /* ---------- FAQ ---------- */
  .faq{max-width:76ch;margin:auto}
  .q{border-bottom:1px solid var(--line);outline: none; -webkit-tap-highlight-color: transparent}
  .q:first-child{border-top:1px solid var(--line);}
  .q button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;padding:20px 0;font-size:16.5px;font-weight:500;transition:color .2s;}
  .q button:hover{color:var(--red);}
  .q button svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none;flex-shrink:0;transition:transform .25s;}
  .q button[aria-expanded="true"] svg{transform:rotate(45deg);}
  .q .a{padding:0 0 22px;color:var(--ink-soft);max-width:66ch;}
  .q .a[hidden]{display:none;}
  .q .a p{margin:0 0 10px;}
  .q .a p:last-child{margin-bottom:0;}
  .q .a a{border-bottom:1px solid var(--line);}
  .q .a a:hover{color:var(--red);border-color:var(--red);}

  /* ---------- Help ---------- */
  .help{margin-top:clamp(52px,6vw,84px);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(30px,4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;}
  .help h2{font-size:clamp(20px,2.3vw,26px);margin-bottom:8px;}
  .help p{color:var(--ink-soft);margin:0;font-size:14.5px;}
  .help-cta{display:flex;gap:10px;flex-wrap:wrap;}
  .tail{padding-top:clamp(44px,5vw,64px);padding-bottom:clamp(56px,7vw,90px);}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0;}
  .fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:48px;}
  .fbrand p{color:var(--muted);font-size:14px;max-width:34ch;margin:16px 0 20px;}
  .fcol h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--muted);font-weight:600;}
  .fcol a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0;transition:color .2s;}
  .fcol a:hover{color:var(--red);}
  .fbottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}

  @media(max-width:900px){
    .choose{grid-template-columns:1fr;}
    .stepy{grid-template-columns:1fr;}
    .keys{grid-template-columns:1fr;}
    .addr{grid-template-columns:1fr;}
  }
  @media(max-width:820px){
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .menu{display:none;} .burger{display:grid;}
    .nav{height:64px;gap:16px;} .logo{flex:1;font-size:18px;}
    .fgrid{grid-template-columns:1fr 1fr;gap:32px;}
    .fbrand{grid-column:1/-1;}
  }
  @media(max-width:600px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .help-cta,.help-cta .btn{width:100%;}
  }

/* Odběratelé */

  #map {
    position: relative;
    float: left;
    border: none;
    width: 100%;
    height: 700px;
  }


  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:var(--radius);margin-top:30px;overflow:hidden;}
  .stat{background:var(--paper);padding:20px 22px;}
  .stat strong{display:block;font-size:26px;font-weight:600;letter-spacing:-.03em;line-height:1.1;}
  .stat span{font-size:12.5px;color:var(--muted);}

  .finder{display:grid;grid-template-columns:360px 1fr;gap:20px;align-items:start;
    padding-top:clamp(28px,4vw,40px);padding-bottom:clamp(56px,7vw,90px);}

  .panel-finder{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;}
  .search{padding:18px;border-bottom:1px solid var(--line);}
  .search-row{position:relative;}
  .search input{width:100%;border:1px solid var(--line);border-radius:var(--radius);
    padding:13px 40px 13px 40px;font-size:15px;font-family:inherit;outline:none;transition:border-color .18s;}
  .search input:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
  .search .ico{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;stroke:var(--muted);stroke-width:1.8;fill:none;pointer-events:none;}
  .search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:26px;height:26px;display:none;place-items:center;border-radius:50%;}
  .search .clr:hover{background:var(--paper);}
  .search .clr svg{width:14px;height:14px;stroke:var(--muted);stroke-width:2;fill:none;}
  .search.has .clr{display:grid;}
  .sugg{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;background:#fff;
    border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.08);
    max-height:230px;overflow:auto;}
  .sugg[hidden]{display:none;}
  .sugg button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;
    padding:10px 14px;font-size:14px;transition:background .15s;}
  .sugg button:hover,.sugg button.hi{background:var(--paper);}
  .sugg button i{font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.08em;}
  .geo{margin-top:10px;width:100%;}
  .chips{display:flex;gap:7px;padding:14px 18px;border-bottom:1px solid var(--line);flex-wrap:wrap;}
  .chip{border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:12.5px;transition:.18s;background:#fff;}
  .chip:hover{border-color:var(--muted);}
  .chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink);}
  .list-head{padding:12px 18px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;border-bottom:1px solid var(--line);}
  .list{max-height:427px;overflow:auto;}
  .item{display:flex;gap:12px;width:100%;text-align:left;padding:14px 18px;border-bottom:1px solid var(--line);transition:background .15s;}
  .item:hover{background:var(--paper);}
  .item[aria-current="true"]{background:var(--paper);box-shadow:inset 3px 0 0 var(--red);}
  .item .n{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--paper);
    border:1px solid var(--line);font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:2px;}
  .item strong{display:block;font-size:14.5px;font-weight:500;}
  .item span{font-size:12.5px;color:var(--muted);}
  .item .d{margin-left:auto;font-size:12.5px;font-weight:600;white-space:nowrap;color:var(--ink);align-self:center;}

  .map-wrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;position:relative;}
  #map{height:min(74vh,680px);width:100%;background:var(--paper);z-index:1;}
  .map-note{position:absolute;left:12px;bottom:12px;z-index:500;background:rgba(255,255,255,.94);
    border:1px solid var(--line);border-radius:var(--radius);padding:7px 12px;font-size:12px;color:var(--ink-soft);}
  .leaflet-container{font-family:inherit;}
  .pop strong{display:block;font-size:14px;margin-bottom:2px;}
  .pop span{font-size:12.5px;color:var(--muted);display:block;}
  .pop a{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-bottom:1px solid var(--line);}
  .pop a:hover{color:var(--red);border-color:var(--red);}

  .f-in{position:relative;}
  .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
    display:grid;place-items:center;border-radius:50%;transition:background .18s;}
  .eye:hover{background:var(--paper);}
  .eye svg{width:17px;height:17px;stroke:var(--muted);stroke-width:1.7;fill:none;}
  .eye[aria-pressed="true"] svg{stroke:var(--ink);}

  .todo{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--radius);
    background:var(--paper);padding:16px 20px;margin-top:16px;font-size:13.5px;color:var(--ink-soft);}
  .todo b{color:var(--ink);font-weight:600;}

  .help{margin-top:6px;border:1px solid var(--line);border-radius:var(--radius);
    padding:clamp(26px,3vw,36px);display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
  .help h2{font-size:clamp(19px,2.2vw,24px);margin-bottom:8px;}
  .help p{color:var(--ink-soft);margin:0;font-size:14.5px;max-width:52ch;}
  .help-cta{display:flex;gap:10px;flex-wrap:wrap;}

  footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0;margin-top:clamp(48px,6vw,80px);}
  .fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:48px;}
  .fbrand p{color:var(--muted);font-size:14px;max-width:34ch;margin:16px 0 20px;}
  .fcol h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--muted);font-weight:600;}
  .fcol a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0;transition:color .2s;}
  .fcol a:hover{color:var(--red);}
  .fbottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}

  @media(max-width:980px){
    .finder{grid-template-columns:1fr;}
    .list{max-height:340px;}
    #map{height:56vh;}
  }
  @media(max-width:820px){
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .menu{display:none;} .burger{display:grid;}
    .nav{height:64px;gap:16px;} .logo{flex:1;font-size:18px;}
    .fgrid{grid-template-columns:1fr 1fr;gap:32px;}
    .fbrand{grid-column:1/-1;}
  }
  @media(max-width:600px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .stats{grid-template-columns:1fr;}
    .help-cta,.help-cta .btn{width:100%;}
  }






/* Košík */

  .btn-block { width: 100%; }

  /* ---------- Steps ---------- */
  .head{padding-top:clamp(28px,4vw,48px);}
  .steps{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--muted);flex-wrap:wrap;margin-bottom:22px;}
  .steps b,.steps a{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--muted);transition:color .2s;}
  .steps a:hover{color:var(--ink);}
  .steps .now{color:var(--ink);}
  .steps i{font-style:normal;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--line);color:var(--ink-soft);font-size:10.5px;letter-spacing:0;}
  .steps .now i{background:var(--ink);color:#fff;}
  .steps .done i{background:var(--ok);color:#fff;}
  .steps .done{color:var(--ink-soft);}
  .steps em{font-style:normal;opacity:.4;}
  .head h1{font-size:clamp(28px,3.6vw,42px);margin-bottom:6px;}
  .head .lede{color:var(--muted);font-size:14.5px;margin:0;}
  .title-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px;}
  .title-row h1{font-size:clamp(28px,3.6vw,42px);}
  .title-row span{font-size:14px;color:var(--muted);}

  /* ---------- Free-shipping meter ---------- */
  .meter-display{display:none;}
  .meter{border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin:22px 0 0;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .meter svg{width:20px;height:20px;stroke:var(--ok);stroke-width:1.7;fill:none;flex-shrink:0;}
  .meter.short svg{stroke:var(--muted);}
  .meter-txt{flex:1;min-width:220px;font-size:13.5px;}
  .meter-txt b{font-weight:600;}
  .meter-bar{height:4px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:9px;}
  .meter-fill{height:100%;background:var(--ok);border-radius:99px;transition:width .45s cubic-bezier(.22,.61,.36,1);}
  .meter.short .meter-fill{background:var(--ink);}

  /* ---------- Cart layout ---------- */
  .cart{display:grid;grid-template-columns:1.7fr 1fr;gap:clamp(26px,4vw,56px);align-items:start;padding-top:clamp(30px,4vw,46px);padding-bottom:clamp(56px,7vw,90px);}

  .lines{border-top:1px solid var(--line);}
  .line{display:grid;grid-template-columns:104px 1fr auto;gap:20px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start;}
  .line-img{aspect-ratio:3/4;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;padding: 5px;}
  .line-img img{width:100%;height:100%;object-fit:contain;}
  .line-main h3{font-size:16px;font-weight:500;margin-bottom:6px;}
  .line-main h3 a:hover{color:var(--red);}
  .line-attrs{font-size:13px;color:var(--muted);margin:0 0 4px;}
  .line-attrs span{margin-right:14px;}
  .stock{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ok);font-weight:500;}
  .stock svg{width:13px;height:13px;stroke:var(--ok);stroke-width:2.2;fill:none;}
  .line-tools{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap;margin-bottom:12px}
  .qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--radius);}
  .qty button{width:36px;height:38px;font-size:16px;color:var(--ink-soft);transition:color .2s;}
  .qty button:hover{color:var(--red);}
  .qty input{width:40px;text-align:center;border:none;outline:none;font-size:14px;font-weight:600;background:transparent;-moz-appearance:textfield;}
  .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .link-sm{font-size:12.5px;color:var(--muted);border-bottom:1px solid var(--line);transition:.2s;}
  .link-sm:hover{color:var(--red);border-color:var(--red);}
  .line-price{text-align:right;min-width:120px;}
  .line-total{font-size:17px;font-weight:600;letter-spacing:-.01em;}
  .line-unit{font-size:12.5px;color:var(--muted);margin-top:2px;}
  
  .nemame_skladem { display:none; color:var(--red);font-size:14px }

  .under{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:22px;}
  .back{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;transition:color .2s;}
  .back:hover{color:var(--red);}
  .back svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;}

  /* ---------- Summary ---------- */
  .summary{border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:sticky;top:96px;background:var(--paper);}
  .summary h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:20px;}
  .sum-row{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding:7px 0;color:var(--ink-soft);}
  .sum-row b{font-weight:500;color:var(--ink);}
  .sum-row.free b{color:var(--ok);font-weight:600;}
  .sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-top:1px solid var(--line);margin-top:14px;margin-bottom:14px;padding-top:16px;}
  .sum-total span{font-size:15px;font-weight:600;}
  .sum-total b{font-size:26px;font-weight:600;letter-spacing:-.02em;}
  .sum-vat{font-size:12px;color:var(--muted);text-align:right;margin:2px 0 20px;}
  .code-row{display:flex;gap:8px;margin:18px 0 4px;}
  .code-row input{
    flex:1;min-width:0;border:1px solid var(--line);border-radius:var(--radius);
    padding:12px 14px;font-size:13.5px;outline:none;background:#fff;transition:border-color .2s;
  }
  .code-row input:focus{border-color:var(--ink);}
  .code-row button{padding:12px 16px;border:1px solid var(--line);border-radius:var(--radius);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:#fff;transition:.2s;}
  .code-row button:hover{background:var(--ink);color:#fff;border-color:var(--ink);}
  .code-msg{font-size:12.5px;color:var(--red);min-height:19px;margin:6px 0 0;}
  .sum-assure{border-top:1px solid var(--line);margin-top:22px;padding-top:18px;display:grid;gap:11px;}
  .sum-assure div{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-soft);}
  .sum-assure svg{width:15px;height:15px;stroke:var(--red);stroke-width:1.7;fill:none;flex-shrink:0;margin-top:3px;}

  /* ---------- Empty state ---------- */
  .empty{display:none;text-align:center;padding:60px 20px 70px;border-top:1px solid var(--line);}
  .empty svg{width:44px;height:44px;stroke:var(--muted);stroke-width:1.2;fill:none;margin:0 auto 20px;}
  .empty h3{font-size:22px;margin-bottom:10px;}
  .empty p{color:var(--muted);margin:0 0 24px;font-size:14.5px;}
  body.is-empty .cart{grid-template-columns:1fr;}
  body.is-empty .summary,body.is-empty .lines,body.is-empty .under,body.is-empty .meter{display:none;}
  body.is-empty .empty{display:block;}

  /* ---------- Recommended ---------- */
  .rel{border-top:1px solid var(--line);padding:clamp(44px,5vw,68px) 0;}
  .rel h2{font-size:clamp(20px,2.4vw,28px);margin-bottom:28px;}
  .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .card-img{aspect-ratio:3/4;background:#fff;border-radius:var(--radius);overflow:hidden;margin-bottom:13px;}
  .card-img img{width:100%;height:100%;object-fit:contain;transition:transform .45s ease;}
  .rel-card:hover .card-img img{transform:scale(1.04);}
  .rel-card h3{font-size:15px;font-weight:500;margin-bottom:5px;}
  .rel-card .p{font-size:15px;font-weight:600;}

  /* ---------- Toast ---------- */
  .toast{
    position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
    background:var(--ink);color:#fff;border-radius:var(--radius);
    padding:14px 18px;display:flex;align-items:center;gap:16px;font-size:13.5px;
    opacity:0;pointer-events:none;transition:.28s ease;z-index:120;max-width:calc(100vw - 32px);
  }
  .toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
  .toast button{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;}
  .toast button:hover{border-color:#fff;}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0;}
  .fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px;padding-bottom:48px;}
  .fbrand p{color:var(--muted);font-size:14px;max-width:34ch;margin:16px 0 20px;}
  .fcol h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px;color:var(--muted);font-weight:600;}
  .fcol a{display:block;font-size:14px;color:var(--ink-soft);padding:5px 0;transition:color .2s;}
  .fcol a:hover{color:var(--red);}
  .fbottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}

  /* ---------- Scroll reveal ---------- */
  @media (prefers-reduced-motion:no-preference){
    .js [data-rv],
    .js [data-rv-group] > *{opacity:0;}
    .js [data-rv].rv-go,
    .js [data-rv-group].rv-go > *{animation:rvIn .7s cubic-bezier(.22,.61,.36,1) both;}
    .js [data-rv-group].rv-go > *:nth-child(2){animation-delay:70ms;}
    .js [data-rv-group].rv-go > *:nth-child(3){animation-delay:140ms;}
    .js [data-rv-group].rv-go > *:nth-child(n+4){animation-delay:210ms;}
  }
  @keyframes rvIn{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:translateY(0);}}

  @media(max-width:1080px){
    .cart{grid-template-columns:1fr;}
    .summary{position:static;}
    .rel-grid{grid-template-columns:repeat(3,1fr);}
  }
  @media(max-width:820px){
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .menu{display:none;} .burger{display:grid;}
    .nav{height:64px;gap:16px;} .logo{flex:1;font-size:18px;}
    .rel-grid{grid-template-columns:1fr 1fr;}
    .rel-grid .rel-card:nth-child(3){display:none;}
    .fgrid{grid-template-columns:1fr 1fr;gap:32px;}
    .fbrand{grid-column:1/-1;}
  }
  @media(max-width:560px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    /* line collapses to photo + details, price drops under the stepper */
    .line{grid-template-columns:80px 1fr;gap:16px;}
    .line-price{grid-column:2;text-align:left;margin-top:-6px;}
    .line-unit{display:inline;margin-left:10px;}
    .under{flex-direction:column-reverse;align-items:stretch;}
    .steps{font-size:11px;gap:7px;}
  }





/* Doprava */




  /* ---------- Layout ---------- */
  .co{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(26px,4vw,56px);align-items:start;padding-top:clamp(28px,4vw,44px);padding-bottom:clamp(56px,7vw,90px);}

  .block{border-top:1px solid var(--line);padding:26px 0 30px;}
  .block:first-child{border-top:none;padding-top:6px;}
  .block > h2{display:flex;align-items:center;gap:11px;font-size:17px;margin-bottom:20px;}
  .block > h2 i{
    font-style:normal;width:24px;height:24px;flex-shrink:0;border-radius:50%;
    background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;
    display:grid;place-items:center;letter-spacing:0;
  }

  /* ---------- Fields ---------- */
  .fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
  /* display:grid výš přebíjí výchozí [hidden]{display:none} prohlížeče,
     takže #companyFields i #billingFields byly vidět pořád, i když jim
     JS atribut hidden nastavil. */
  .fields[hidden]{display:none !important;}
  /* Firemní a fakturační údaje se rozbalují až po zaškrtnutí, takže
     se objeví těsně pod tím zaškrtávátkem. Kousek místa nad nimi
     oddělí nově otevřenou část od zbytku formuláře. */
  #companyFields, #billingFields{margin-top:18px;}
  .f{display:flex;flex-direction:column;gap:6px;}
  .f.wide{grid-column:1/-1;}
  .f label{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .f label .req{color:var(--red);}
  .f input,.f select,.f textarea{
    width:100%;border:1px solid var(--line);border-radius:var(--radius);
    padding:13px 14px;font-size:15px;font-family:inherit;color:var(--ink);
    background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;
  }
  .f textarea{min-height:96px;resize:vertical;}
  .f select{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a827b' stroke-width='1.8'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:17px;padding-right:38px;}
  .f input:focus,.f select:focus,.f textarea:focus{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);}
  .f input::placeholder{color:#c9c2bb;}
  .f .err{font-size:12.5px;color:var(--red);min-height:0;display:none;}
  .f.invalid input,.f.invalid select{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
  .f.invalid .err{display:block;}
  .f .hint{font-size:12.5px;color:var(--muted);}


  /* ---------- Option cards (doprava / platba) ---------- */
  .opts{display:grid;gap:10px;}
  .picka{
    display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;
    border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
    cursor:pointer;transition:border-color .18s,background .18s;background:#fff;
  }
  .picka:hover{border-color:var(--muted);}
  .picka input{position:absolute;opacity:0;width:0;height:0;}
  .picka .dot{
    width:19px;height:19px;border-radius:50%;border:1px solid var(--line);
    display:grid;place-items:center;transition:.18s;flex-shrink:0;
  }
  .picka .dot::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .18s;}
  .picka input:checked ~ .dot{border-color:var(--ink);}
  .picka input:checked ~ .dot::after{transform:scale(1);}
  .picka:has(input:checked){border-color:var(--ink);box-shadow:0 0 0 1px var(--ink);background:var(--paper);}
  .picka input:focus-visible ~ .dot{box-shadow:0 0 0 2px var(--ink);}
  .pick-txt strong{display:block;font-size:15px;font-weight:600;}
  .pick-txt span{display:block;font-size:13px;color:var(--muted);margin-top:1px;}
  .pick-cost{font-size:14px;font-weight:600;text-align:right;white-space:nowrap;}
  .pick-cost .was{display:block;font-size:12px;font-weight:400;color:var(--muted);text-decoration:line-through;}
  .pick-cost .free{color:var(--ok);}

  /* ---------- DPD výdejní místo ---------- */
  .pickup{margin-top:14px;}
  .pickup[hidden]{display:none !important;}

  .pickup-chosen{
    display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
    border:1px solid var(--ink);border-radius:var(--radius);
    padding:14px 16px;background:var(--paper);
  }
  .pickup-chosen[hidden]{display:none !important;}
  .pickup-chosen > svg{width:20px;height:20px;stroke:var(--ink);stroke-width:1.5;fill:none;}
  .pickup-chosen strong{display:block;font-size:15px;font-weight:600;}
  .pickup-chosen span{display:block;font-size:13px;color:var(--muted);margin-top:1px;}
  .pickup-change{
    border:0;background:none;padding:0;cursor:pointer;
    font-size:13px;color:var(--muted);text-decoration:underline;white-space:nowrap;
  }
  .pickup-change:hover{color:var(--ink);}

  .pickup .err{display:none;margin-top:9px;font-size:13px;color:var(--red);}
  .pickup .err.show{display:block;}

  .pickup-modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;}
  .pickup-modal[hidden]{display:none !important;}
  .pickup-modal-back{position:absolute;inset:0;background:rgba(20,17,15,.55);}
  .pickup-modal-box{
    position:relative;width:min(980px,100%);height:min(680px,88vh);
    background:#fff;border-radius:var(--radius);overflow:hidden;
    display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.28);
  }
  .pickup-modal-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px;border-bottom:1px solid var(--line);flex-shrink:0;
  }
  .pickup-modal-head strong{font-size:15px;font-weight:600;}
  .pickup-modal-close{
    border:0;background:none;padding:6px;cursor:pointer;line-height:0;border-radius:50%;
  }
  .pickup-modal-close:hover{background:var(--paper);}
  .pickup-modal-close svg{width:19px;height:19px;stroke:var(--ink);stroke-width:1.6;fill:none;}
  .pickup-modal-load{
    position:absolute;top:50%;left:0;right:0;text-align:center;
    font-size:14px;color:var(--muted);margin:0;
  }
  .pickup-modal iframe{flex:1;width:100%;border:0;position:relative;background:#fff;}

  body.no-scroll{overflow:hidden;}

  @media (max-width:700px){
    .pickup-modal{padding:0;}
    .pickup-modal-box{width:100%;height:100%;border-radius:0;}
    .pickup-chosen{grid-template-columns:auto 1fr;row-gap:8px;}
    .pickup-change{grid-column:2;justify-self:start;}
  }

  .note-toggle{
    margin-top:6px;font-size:13px;color:var(--muted);
    display:inline-flex;align-items:center;gap:8px;transition:color .2s;
  }
  .note-toggle:hover{color:var(--ink);}
  .note-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .2s;}
  .note-toggle[aria-expanded="true"] svg{transform:rotate(45deg);}

  .actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line);}
  .back{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;transition:color .2s;}
  .back:hover{color:var(--red);}
  .back svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;}
  .form-msg{font-size:13px;color:var(--red);margin:14px 0 0;min-height:20px;}

  /* ---------- Summary ---------- */
  .summary{border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:96px;background:var(--paper);}
  .summary h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:18px;}
  .mini{display:flex;gap:13px;padding:12px 0;border-bottom:1px solid var(--line);}
  .mini:first-of-type{padding-top:0;}
  .mini-img{width:56px;flex-shrink:0;aspect-ratio:3/4;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;padding:3px}
  .mini-img img{width:100%;height:100%;object-fit:contain;}
  .mini-txt{flex:1;min-width:0;}
  .mini-txt strong{display:block;font-size:13.5px;font-weight:500;line-height:1.35;}
  .mini-txt span{font-size:12px;color:var(--muted);}
  .mini-price{font-size:13.5px;font-weight:600;white-space:nowrap;}
  .sum-row{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding:7px 0;color:var(--ink-soft);}
  .sum-row:first-of-type{padding-top:16px;}
  .sum-row b{font-weight:500;color:var(--ink);}
  .sum-row.free b{color:var(--ok);font-weight:600;}
  .sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-top:1px solid var(--line);margin-top:12px;padding-top:16px;}
  .sum-total span{font-size:15px;font-weight:600;}
  .sum-total b{font-size:26px;font-weight:600;letter-spacing:-.02em;}
  .sum-vat{font-size:12px;color:var(--muted);text-align:right;margin:2px 0 0;}
  .sum-assure{border-top:1px solid var(--line);margin-top:20px;padding-top:18px;display:grid;gap:11px;}
  .sum-assure div{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-soft);}
  .sum-assure svg{width:15px;height:15px;stroke:var(--red);stroke-width:1.7;fill:none;flex-shrink:0;margin-top:3px;}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:34px 0;}
  .fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
  .fbottom a{border-bottom:1px solid var(--line);}
  .fbottom a:hover{color:var(--red);border-color:var(--red);}
  .flinks{display:flex;gap:20px;flex-wrap:wrap;}

  @media(max-width:1080px){
    .co{grid-template-columns:1fr;}
    /* order:-1 tu vytahovalo souhrn objednávky nad formulář, takže
       zákazník na mobilu viděl závěrečné tlačítko dřív, než cokoli
       vyplnil (bod 12.2 německé analýzy). Teď platí pořadí z HTML:
       nejdřív údaje, potom souhrn. */
    .summary{position:static;}
  }
  @media(max-width:820px){
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .nav{height:64px;} .logo{font-size:18px;}
    .secure span{display:none;}
  }
  @media(max-width:560px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .fields{grid-template-columns:1fr;}
    .steps{font-size:11px;gap:7px;}
    .picka{grid-template-columns:auto 1fr;row-gap:6px;}
    .pick-cost{grid-column:2;text-align:left;}
    .actions{flex-direction:column-reverse;align-items:stretch;}
    .actions .btn{width:100%;}
    .back{justify-content:center;}
  }
  
  
  
  
  
  
  
/* Souhrn */  

  .block-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:16px;}
  .block-head h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .edit{font-size:12.5px;font-weight:500;color:var(--ink-soft);border-bottom:1px solid var(--line);transition:.2s;}
  .edit:hover{color:var(--red);border-color:var(--red);}
  
  
  /* review lines */
  .rline{display:grid;grid-template-columns:72px 1fr auto;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:center;}
  .rline:last-of-type{border-bottom:none;}
  .rline-img{aspect-ratio:3/4;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;padding:3px}
  .rline-img img{width:100%;height:100%;object-fit:contain;}
  .rline-txt strong{display:block;font-size:15px;font-weight:500;}
  .rline-txt span{font-size:13px;color:var(--muted);}
  .rline-price{font-size:15px;font-weight:600;white-space:nowrap;}

  /* fact rows */
  /* Odsazení shora, ať bloky nelepí na nadpis sekce nad sebou. */
  .fakta{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:18px;}
  .fakt strong{display:block;font-size:15px;font-weight:500;margin-bottom:2px;}
  .fakt p{margin:0;font-size:14px;color:var(--ink-soft);line-height:1.55;}
  .fakt .faktum{
    display:inline-flex;align-items:center;gap:6px;margin-top:8px;
    font-size:12.5px;font-weight:600;color:var(--ok);
  }
  .fakt .faktum svg{width:14px;height:14px;stroke:var(--ok);stroke-width:2;fill:none;}
  .eta{margin-top:10px;font-size:13.5px;color:var(--ink-soft);}
  .eta b{font-weight:600;color:var(--ink);}

  /* what happens next */
  .next{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-top:4px;}
  .next h3{font-size:14px;margin-bottom:14px;}
  .next ol{margin:0;padding-left:0;list-style:none;counter-reset:n;display:grid;gap:11px;}
  .next li{counter-increment:n;display:flex;gap:12px;font-size:13.5px;color:var(--ink-soft);}
  .next li::before{
    content:counter(n);flex-shrink:0;width:20px;height:20px;border-radius:50%;
    background:#fff;border:1px solid var(--line);color:var(--ink);
    font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:2px;
  }

  /* ---------- Checkbox ---------- */
  .check{display:flex;gap:11px;align-items:flex-start;margin-top:20px;cursor:pointer;font-size:14px;color:var(--ink-soft);}
  .check input{position:absolute;opacity:0;width:0;height:0;}
  .check .box{
    width:19px;height:19px;flex-shrink:0;margin-top:1px;border:1px solid var(--line);
    border-radius:2px;background:#fff;display:grid;place-items:center;transition:.18s;
  }
  .check .box svg{width:12px;height:12px;stroke:#fff;stroke-width:2.6;fill:none;opacity:0;transition:opacity .15s;}
  .check input:checked + .box{background:var(--ink);border-color:var(--ink);}
  .check input:checked + .box svg{opacity:1;}
  .check input:focus-visible + .box{box-shadow:0 0 0 2px var(--ink);}
  /* Chybu na souhlasu s podmínkami značí JS třídou "bad" (stejně jako
     u polí .f.bad). V CSS byla jen .check.invalid, kterou nikdo
     nenastavuje, takže neoznačené zaškrtávátko nedalo po odeslání
     najevo vůbec nic. Text se barví taky, ne jen rámeček. */
  .check.bad,
  .check.invalid{color:var(--red);}
  .check.bad .box,
  .check.invalid .box{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
  .check.bad a,
  .check.invalid a{color:var(--red);border-color:var(--red);}
  .check a{border-bottom:1px solid var(--line);}
  .check a:hover{color:var(--red);border-color:var(--red);}

  .actions{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-top:24px;}
  .back{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;display:inline-flex;align-items:center;gap:9px;transition:color .2s;}
  .back:hover{color:var(--red);}
  .back svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;}
  .form-msg{font-size:13px;color:var(--red);margin:12px 0 0;min-height:20px;}
  .odesilani{font-size:13px;color:var(--ink-soft);margin:12px 0 0;text-align:center;}
  .odesilani[hidden]{display:none !important;}

  /* ---------- Summary ---------- */
  .summary{border:1px solid var(--line);border-radius:var(--radius);padding:24px;position:sticky;top:96px;background:var(--paper);}
  .summary h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:16px;}
  .sum-row{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding:7px 0;color:var(--ink-soft);}
  .sum-row b{font-weight:500;color:var(--ink);}
  .sum-row.free b{color:var(--ok);font-weight:600;}
  .sum-total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;border-top:1px solid var(--line);margin-top:12px;padding-top:16px;}
  .sum-total span{font-size:15px;font-weight:600;}
  .sum-total b{font-size:28px;font-weight:600;letter-spacing:-.02em;}
  .sum-vat{font-size:12px;color:var(--muted);text-align:right;margin:2px 0 20px;}
  .pay-note{font-size:12.5px;color:var(--ink-soft);text-align:center;margin:14px 0 0;display:flex;align-items:center;justify-content:center;gap:7px;}
  .pay-note svg{width:14px;height:14px;stroke:var(--ok);stroke-width:1.8;fill:none;}
  .sum-assure{border-top:1px solid var(--line);margin-top:20px;padding-top:18px;display:grid;gap:11px;}
  .sum-assure div{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--ink-soft);}
  .sum-assure svg{width:15px;height:15px;stroke:var(--red);stroke-width:1.7;fill:none;flex-shrink:0;margin-top:3px;}

  /* ---------- Confirmation ---------- */
  /* padding-block, ne zkratka padding — ta by nulou v horizontální
     pozici přebila padding-left/right, který sem dává .wrap, a na mobilu
     by text lepil na okraj displeje. */
  .thanks{display:none;padding-block:clamp(48px,7vw,90px) clamp(60px,8vw,110px);}
  body.is-sent .co,body.is-sent .head{display:none;}
  body.is-sent .thanks{display:block;}
  .thanks-inner{max-width:660px;}
  .tick{
    width:52px;height:52px;border-radius:50%;background:var(--ok);
    display:grid;place-items:center;margin-bottom:26px;
    animation:pop .45s cubic-bezier(.34,1.56,.64,1) both;
  }
  .tick svg{width:26px;height:26px;stroke:#fff;stroke-width:2.6;fill:none;}
  @keyframes pop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}
  .thanks h1{font-size:clamp(28px,3.8vw,44px);margin-bottom:14px;}
  .thanks .lede{font-size:16px;color:var(--ink-soft);margin:0 0 30px;}
  .order-box{border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:30px;}
  .order-box div span{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:3px;}
  .order-box div b{font-size:16px;font-weight:600;}
  .thanks-cta{display:flex;gap:12px;flex-wrap:wrap;}

  /* ---------- Footer ---------- */
  footer{border-top:1px solid var(--line);padding:34px 0;}
  .fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
  .fbottom a{border-bottom:1px solid var(--line);}
  .fbottom a:hover{color:var(--red);border-color:var(--red);}
  .flinks{display:flex;gap:20px;flex-wrap:wrap;}

  @media(max-width:1080px){
    .co{grid-template-columns:1fr;}
    .summary{position:static;}
  }
  @media(max-width:820px){
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .nav{height:64px;} .logo{font-size:18px;}
    .secure span{display:none;}
  }
  @media(max-width:560px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .fakta,.order-box{grid-template-columns:1fr;}
    .steps{font-size:11px;gap:7px;}
    .rline{grid-template-columns:60px 1fr;row-gap:4px;}
    .rline-price{grid-column:2;}
    .actions{flex-direction:column-reverse;align-items:stretch;}
    .actions .btn{width:100%;}
    .back{justify-content:center;}
    .thanks-cta .btn{width:100%;}
  }
  
  
  
  /* GDPR */
  

  /* ---------- Page head ---------- */


  .draft{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--radius);
    background:var(--paper);padding:18px 22px;margin-top:24px;font-size:14px;color:var(--ink-soft);}
  .draft b{color:var(--ink);font-weight:600;}
  .draft ul{margin:10px 0 0;padding-left:20px;}
  .draft li{margin-bottom:5px;}

  /* ---------- značka „ověřit" ---------- */
  .tbc{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
    border:1px solid var(--line);border-radius:99px;padding:2px 8px;
    vertical-align:middle;margin-left:7px;white-space:nowrap;background:#fff;}
  .tbc::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red);}

  /* ---------- Quick facts ---------- */
  .facts2{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:var(--radius);margin:26px 0 0;overflow:hidden;}
  .fact2{background:var(--paper);padding:22px 20px;}
  .fact2 svg{width:20px;height:20px;stroke:var(--red);stroke-width:1.6;fill:none;margin-bottom:12px;}
  .fact2 strong{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:3px;}
  .fact2 span{font-size:12.5px;color:var(--muted);line-height:1.45;display:block;}
  .fact2 a{border-bottom:1px solid var(--line);}
  .fact2 a:hover{color:var(--red);border-color:var(--red);}

  /* ---------- Layout ---------- */
  .doc{display:grid;grid-template-columns:274px 1fr;gap:clamp(28px,4vw,64px);align-items:start;
    padding-top:clamp(34px,4vw,52px);padding-bottom:clamp(56px,7vw,90px);}

  .toc{position:sticky;top:96px;max-height:calc(100vh - 130px);overflow-y:auto;padding-right:6px;}
  .toc h2{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px;}
  .toc ol{list-style:none;margin:0;padding:0;}
  .toc li{margin-bottom:1px;}
  .toc a{display:flex;gap:9px;font-size:13.5px;color:var(--ink-soft);
    padding:7px 10px;border-left:2px solid var(--line);transition:.18s;line-height:1.4;}
  .toc a:hover{color:var(--ink);border-left-color:var(--muted);background:var(--paper);}
  .toc a.active{color:var(--ink);font-weight:600;border-left-color:var(--red);background:var(--paper);}
  .toc a i{font-style:normal;color:var(--muted);font-weight:600;flex-shrink:0;min-width:20px;}
  .toc a.active i{color:var(--red);}

  /* ---------- Content ---------- */
  .doc-body{max-width:72ch;}
  .doc-body section{scroll-margin-top:100px;padding-bottom:40px;}
  .doc-body h2{font-size:clamp(19px,2.2vw,25px);margin:0 0 16px;display:flex;gap:12px;align-items:baseline;}
  .doc-body h2 i{font-style:normal;color:var(--red);font-weight:600;font-size:.72em;flex-shrink:0;}
  .doc-body h3{font-size:15.5px;margin:24px 0 10px;}
  .doc-body p{color:var(--ink-soft);margin:0 0 14px;}
  .doc-body a[href^="http"],.doc-body a[href^="mailto"],.doc-body a[href^="tel"]{
    color:var(--ink);border-bottom:1px solid var(--line);word-break:break-word;}
  .doc-body a[href^="http"]:hover,.doc-body a[href^="mailto"]:hover,.doc-body a[href^="tel"]:hover{color:var(--red);border-color:var(--red);}
  .doc-body ul.bul{margin:10px 0 16px;padding-left:20px;color:var(--ink-soft);}
  .doc-body ul.bul li{margin-bottom:7px;}

  .callout{border:1px solid var(--line);border-left:3px solid var(--red);border-radius:var(--radius);
    background:var(--paper);padding:20px 22px;margin:0 0 24px;}
  .callout h3{margin:0 0 12px;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  .callout address{font-style:normal;color:var(--ink-soft);line-height:1.7;}
  .callout b{color:var(--ink);font-weight:600;}
  .callout p{margin:12px 0 0;}
  .callout p:first-of-type{margin-top:12px;}

  table{border-collapse:collapse;width:100%;font-size:14px;margin:6px 0 18px;}
  th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top;}
  thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;}
  tbody th{font-weight:600;color:var(--ink);width:38%;}
  .tnote{font-size:12.5px;color:var(--muted);margin:-8px 0 20px;}

  /* práva */
  .rights{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
    border-radius:var(--radius);overflow:hidden;margin:6px 0 20px;}
  .right{background:#fff;padding:18px 20px;display:flex;gap:14px;}
  .right svg{width:18px;height:18px;stroke:var(--red);stroke-width:1.7;fill:none;flex-shrink:0;margin-top:3px;}
  .right b{display:block;font-size:15px;font-weight:600;margin-bottom:3px;}
  .right span{font-size:13.5px;color:var(--ink-soft);}

  .doc-foot{border-top:1px solid var(--line);padding-top:26px;}
  .doc-foot p{font-size:13.5px;color:var(--muted);margin:0 0 18px;}
  .doc-links{display:flex;gap:10px;flex-wrap:wrap;}

  .totop{position:fixed;right:24px;bottom:24px;z-index:90;width:44px;height:44px;border-radius:50%;
    background:var(--ink);color:#fff;display:grid;place-items:center;opacity:0;pointer-events:none;transition:.25s;}
  .totop.show{opacity:1;pointer-events:auto;}
  .totop:hover{background:var(--red);}
  .totop svg{width:18px;height:18px;stroke:#fff;stroke-width:2;fill:none;}

  footer{border-top:1px solid var(--line);padding:30px 0;}
  .fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
  .flinks{display:flex;gap:20px;flex-wrap:wrap;}
  .flinks a{border-bottom:1px solid var(--line);}
  .flinks a:hover{color:var(--red);border-color:var(--red);}

  @media(max-width:1000px){
    .doc{grid-template-columns:1fr;}
    .toc{position:static;max-height:none;border:1px solid var(--line);border-radius:var(--radius);padding:20px;background:var(--paper);}
    .toc ol{columns:2;column-gap:22px;} .toc li{break-inside:avoid;}
    .facts2{grid-template-columns:repeat(2,1fr);}
  }
  @media(max-width:820px){
    .announce .sep:last-of-type,.announce .opt:last-of-type{display:none;}
    .menu{display:none;} .burger{display:grid;}
    .nav{height:64px;gap:16px;} .logo{flex:1;font-size:18px;}
  }
  @media(max-width:600px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .facts2{grid-template-columns:1fr;} .toc ol{columns:1;}
    tbody th{width:auto;} table,thead,tbody,th,td,tr{display:block;}
    thead{display:none;} td{border:none;padding:0 14px 12px;}
    tbody th{border:none;padding:14px 14px 4px;}
    tbody tr{border-bottom:1px solid var(--line);}
    .totop{right:14px;bottom:14px;}
  }
  @media print{
    .announce,header,.toc,.totop,footer,.doc-links,.crumb,.phead-meta .btn,.draft{display:none !important;}
    .doc{grid-template-columns:1fr;padding:0;}
    .doc-body{max-width:none;} body{font-size:11pt;}
    .doc-body section{page-break-inside:avoid;} a{color:#000;}
  }
  
  
  
/* Přihlášení */

  .acct{position:relative;}
  .icon-btn[aria-expanded="true"]{background:var(--ink);}
  .icon-btn[aria-expanded="true"] svg{stroke:#fff;}
  
  .icon-btn-prihlasit.active {background-color:var(--red); }
  .icon-btn-prihlasit.active svg{stroke:#fff;}
  
  
  /* ---------- Panel ---------- */
  .pop{
    position:absolute;top:calc(100% + 25px);right:0;width:342px;z-index:210;
    background:#fff;border:1px solid var(--line);border-radius:var(--radius);
    box-shadow:0 14px 40px rgba(20,17,15,.14);
    padding:24px;
    opacity:0;transform:translateY(-8px);pointer-events:none;transition:.2s ease;
  }
  .pop.open{opacity:1;pointer-events:auto;}
  .pop::before{
    content:"";position:absolute;top:-7px;right:14px;width:12px;height:12px;
    background:#fff;border-left:1px solid var(--line);border-top:1px solid var(--line);
    transform:rotate(45deg);
  }
  .pop-head{margin-bottom:18px;}
  .pop-head .eyebrow{
    display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:7px;
  }
  .pop-head .eyebrow svg{width:13px;height:13px;stroke:var(--red);stroke-width:2;fill:none;}
  .pop-head h2{font-size:19px;margin-top:12px;margin-bottom:5px;}
  .pop-head p{margin:0;font-size:13px;color:var(--muted);line-height:1.45;}


  .row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 16px;flex-wrap:wrap;}
  .chk{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft);cursor:pointer;}
  .chk input{position:absolute;opacity:0;width:0;height:0;}
  .chk .box{width:17px;height:17px;border:1px solid var(--line);border-radius:2px;background:#fff;
    display:grid;place-items:center;transition:.18s;flex-shrink:0;}
  .chk .box svg{width:11px;height:11px;stroke:#fff;stroke-width:3;fill:none;opacity:0;transition:opacity .15s;}
  .chk input:checked + .box{background:var(--ink);border-color:var(--ink);}
  .chk input:checked + .box svg{opacity:1;}
  .chk input:focus-visible + .box{box-shadow:0 0 0 2px var(--ink);}
  .link-sm{font-size:13px;color:var(--ink-soft);border-bottom:1px solid var(--line);transition:.2s;}
  .link-sm:hover{color:var(--red);border-color:var(--red);}

  .pop-foot{border-top:1px solid var(--line);margin-top:18px;padding-top:16px;}
  .pop-foot p{margin:0 0 10px;font-size:13px;color:var(--muted);}
  .pop-foot a.reg{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid var(--ink);padding-bottom:2px;transition:.2s;}
  .pop-foot a.reg:hover{color:var(--red);border-color:var(--red);}
  .pop-foot a.reg svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;}

  .msg{display:none;align-items:flex-start;gap:9px;border:1px solid var(--line);border-left:3px solid var(--red);
    background:var(--paper);border-radius:var(--radius);padding:11px 13px;font-size:12.5px;color:var(--ink-soft);margin-bottom:16px;}
  .msg.show{display:flex;}
  .msg svg{width:15px;height:15px;stroke:var(--red);stroke-width:2;fill:none;flex-shrink:0;margin-top:2px;}

  .sheet-head{display:none;}
  .scrim{position:fixed;inset:0;background:rgba(20,17,15,.4);opacity:0;pointer-events:none;
    transition:opacity .25s;z-index:190;}
  .scrim.open{opacity:1;pointer-events:auto;}
  
  .uspech { display:none;font-size:24px;margin-top:40px }

  /* ---------- demo pozadí ---------- */
  .demo{padding:clamp(50px,8vw,96px) 0;}
  .demo h1{font-size:clamp(28px,3.6vw,42px);max-width:18ch;margin-bottom:16px;}
  .demo p{color:var(--ink-soft);max-width:56ch;margin:0 0 26px;}
  .hint{display:inline-flex;align-items:center;gap:10px;border:1px dashed var(--line);
    border-radius:var(--radius);padding:12px 16px;font-size:13.5px;color:var(--muted);}
  .hint svg{width:16px;height:16px;stroke:var(--red);stroke-width:1.8;fill:none;}

  @media(max-width:820px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .menu{display:none;} .burger{display:grid;}
    .nav{height:64px;gap:16px;} .logo{flex:1;font-size:18px;}
    /* z rozbalovacího panelu se na mobilu stane spodní panel */
    .pop{
      position:fixed;top:auto;bottom:0;left:0;right:0;width:auto;
      border-radius:14px 14px 0 0;border-bottom:none;padding:8px 20px 26px;
      transform:translateY(100%);box-shadow:0 -10px 40px rgba(20,17,15,.18);
      max-height:88vh;overflow:auto;
    }

    .pop::before{display:none;}
    .sheet-head{display:flex;align-items:center;justify-content:space-between;
      padding:10px 0 14px;margin-bottom:4px;}
    .sheet-head .grab{position:absolute;left:50%;transform:translateX(-50%);top:8px;
      width:38px;height:4px;border-radius:2px;background:var(--line);}
    .sheet-close{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;margin-left:auto;}
    .sheet-close:hover{background:var(--paper);}
    .sheet-close svg{width:18px;height:18px;stroke:var(--ink);stroke-width:2;fill:none;}
  }
  
  
  
  /* Vygenerovat */
  
  .karta .fields,
  .pop .fields{grid-template-columns:1fr;}


  .page{display:grid;grid-template-columns:1fr 380px;gap:clamp(30px,5vw,72px);
    align-items:start;padding-top:clamp(30px,4vw,48px);padding-bottom:clamp(56px,7vw,90px);}

  .karta{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3.4vw,40px);max-width:560px;margin:auto;margin-top:40px;}
  .eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:12px;}
  .eyebrow svg{width:13px;height:13px;stroke:var(--red);stroke-width:2;fill:none;}
  .karta h1{font-size:clamp(26px,3.2vw,36px);margin-bottom:12px;}
  .lede{color:var(--ink-soft);margin:0 0 26px;font-size:16px;}

  .f .ok-mark{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;
    stroke:var(--ok);stroke-width:2.5;fill:none;opacity:0;transition:opacity .2s;}
  .f.good .ok-mark{opacity:1;}
  .f.good input{border-color:var(--ok);}
  .f.bad input{border-color:var(--red);box-shadow:0 0 0 1px var(--red);}
  .hinit{font-size:12.5px;color:var(--muted);margin:8px 0 0;min-height:20px;}
  .hinit.err{color:var(--red);}

  .akce{margin-top:22px;}
  .back{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;
    letter-spacing:.06em;text-transform:uppercase;margin-top:18px;transition:color .2s;}
  .back:hover{color:var(--red);}
  .back svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;}

  /* ---------- kroky ---------- */
  .kroky2{list-style:none;margin:28px 0 0;padding:0;counter-reset:s;display:grid;gap:14px;}
  .kroky2 li{counter-increment:s;display:flex;gap:13px;font-size:14px;color:var(--ink-soft);}
  .kroky2 li::before{content:counter(s);flex-shrink:0;width:23px;height:23px;border-radius:50%;
    background:var(--paper);border:1px solid var(--line);color:var(--ink);
    font-size:11.5px;font-weight:700;display:grid;place-items:center;margin-top:-1px;}

  /* ---------- potvrzení ---------- */
  .done{display:none;}
  body.sent .form-view{display:none;}
  body.sent .done{display:block;}
  .tick{width:46px;height:46px;border-radius:50%;background:var(--ok);display:grid;place-items:center;
    margin-bottom:22px;animation:pop .45s cubic-bezier(.34,1.56,.64,1) both;}
  .tick svg{width:23px;height:23px;stroke:#fff;stroke-width:2.6;fill:none;}
  @keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
  .done h1{margin-bottom:12px;}
  .mailbox{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
    padding:16px 18px;margin:20px 0 6px;font-size:14px;color:var(--ink-soft);}
  .mailbox b{color:var(--ink);font-weight:600;}
  .resend{font-size:13px;color:var(--muted);margin-top:16px;}
  .resend button{border-bottom:1px solid var(--line);font-size:13px;transition:.2s;}
  .resend button:hover:not(:disabled){color:var(--red);border-color:var(--red);}
  .resend button:disabled{opacity:.5;cursor:not-allowed;}

  /* ---------- postranní panel ---------- */
  .sider{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
    padding:26px;position:sticky;top:96px;}
  .sider h2{font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
    font-weight:600;margin-bottom:16px;}
  .side-item{display:flex;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-soft);}
  .side-item:last-of-type{border-bottom:none;}
  .side-item svg{width:17px;height:17px;stroke:var(--red);stroke-width:1.7;fill:none;flex-shrink:0;margin-top:2px;}
  .side-item b{color:var(--ink);font-weight:600;display:block;margin-bottom:1px;}
  .side-item a{border-bottom:1px solid var(--line);}
  .side-item a:hover{color:var(--red);border-color:var(--red);}

  footer{border-top:1px solid var(--line);padding:30px 0;}
  .fbottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);}
  .flinks{display:flex;gap:20px;flex-wrap:wrap;}
  .flinks a{border-bottom:1px solid var(--line);}
  .flinks a:hover{color:var(--red);border-color:var(--red);}

  @media(max-width:960px){ .page{grid-template-columns:1fr;} .sider{position:static;} }
  @media(max-width:820px){
    .announce .sep,.announce .opt{display:none;}
    .announce{font-size:11px;} .announce-msg{padding-right:64px;}
    .menu{display:none;} .burger{display:grid;}
    .nav{height:64px;gap:16px;} .logo{flex:1;font-size:18px;}
  }
  
  
  
  
  

/* Cookies */
.about-cookies-left  { float:left;  }



.gdpr				{ position:fixed; bottom: 24px; width:calc(100% - 48px); right:24px;  margin:auto; z-index:101; }
.gdpr-y				{ position:relative; max-height:calc(100vh - 160px); background: #12110D; color:#FEF7E7; padding:24px 24px; text-align: center; overflow:hidden; box-shadow: 0 10px 30px rgba(2,2,3,.28); }
.gdpr-close			{ position:absolute; top:0; right:0; background:url(../images/zavrit.svg); width:30px; height:28px; background-size:30px 28px; cursor:pointer; margin:24px; }
.gdpr-nadpis		{ width:calc(100% - 80px) }
.gdpr-text			{ text-align:left; margin-bottom:40px; padding-right:40px; max-width:902px; }
.gdpr-text a		{ color: #FEF7E7; border-bottom:1px solid #FEF7E7; }
.gdpr .button 		{ color: #FEF7E7; margin-left:12px; cursor:pointer; padding: 0;  text-shadow:none;
					 text-transform:uppercase; font-weight: 600; }


.gdpr-button		{ float:right; margin-top:20px!important; cursor:pointer}

.gdpr-nastaveni 	{ float:left; border-bottom:solid 2px #FEF7E7; cursor:pointer; margin-top:30px }
.gdpr-odmitnout		{ margin-right:24px; }

.overlay		{ display:none; position:fixed; width:100%; height:100vh; z-index:101;    }
.overlay-gdpr 	{ top:0; background:rgba(0,0,0,0.75); }



.gdpr-info			{ position:fixed; top:0; width:100%; max-width:500px; height:100%; right:-500px; background:#12110D;
					  color:#FEF7E7; overflow-y:auto; z-index:100000000; }
.gdpr-info-prostor  { position: relative; width: 100%; padding:24px; min-height:calc(100% - 93px); } 

.gdpr-info-close	{ position:absolute; right:24px; margin-left:24px; width:40px; margin-top:16px; cursor:pointer; z-index:10000;
				  	  transform: rotate(0deg); transition: .5s ease-in-out; pointer-events:auto; } 
.gdpr-info-close span { position:absolute; display:block; height:2px; width:100%; background:#FEF7E7; opacity:1; left:0;  
				  	 	transition: width 0.25s ease-in-out, height 0.25s ease-in-out, left 0.25s ease-in-out, top 0.25s ease-in-out, transform 0.25s ease-in-out; }

.gdpr-info-close span:nth-child(1) { top: 0; left: 3px; transform: rotate(45deg);}
.gdpr-info-close span:nth-child(2) { top: 0; left: 3px; transform: rotate(-45deg);}
.gdpr-info hr		{ background:#FEF7E7; margin-top:10px; height:1px }
.gdpr-info-nadpis	{ margin-top:20px;  }

.gdpr-subnadpis		{ margin:30px 0 20px 0 }
.gdpr-info-uvod-text{ margin:24px 70px 30px 0; }
.gdpr-info-polozka	{ background: #12110D; border-bottom:1px solid #FEF7E7; border-top:1px solid #FEF7E7; margin-bottom:16px }
.gdpr-info-button	{ margin:0 0 30px 0  }
.gdpr-info-checkbox input[type="checkbox"]  { position:absolute; opacity:0; cursor:pointer; border:0; width:0; height:0; padding:0; outline: none; }
.gdpr-info-checkbox input[type="checkbox"] + label	{ float:right; cursor:pointer; width:48px; height:24px; margin-top:20px; margin-right:20px; background:url(../images/checkbox.svg?rand=1); 
													  background-size:96px 24px; outline: none;  } 
.gdpr-info-checkbox input[type="checkbox"]:checked + label  { background-position: -48px  }
.gdpr-info-click	{ float:left; width:calc(100% - 135px); cursor:pointer; margin-bottom:18px}
.gdpr-info-click-aktivni	{ width:calc(100% - 150px); }
.gdpr-info-minus	{ display:none; float:left; background:url(../images/arrow-cookie.svg); background-size:18px 18px; width:18px; height:18px; margin-left:12px; transform: rotate(-180deg); margin-top:20px }
.gdpr-info-plus		{ float:left; background:url(../images/arrow-cookie.svg); background-size:18px 18px; width:18px; height:18px; margin-left:12px; margin-top:23px; }
.gdpr-info-cookies	{ float:left; width:calc(100% - 70px); margin:20px 0 0 20px;}

.gdpr-info-vyp-zap	{ float:right; margin:24px 8px 0 0 }
.gdpr-info-zap		{ display:none;  }

.gdpr-info-aktivni	{ float:right; margin-top:24px; margin-right:20px; color: #FEF7E7;}
.gdpr-info-text		{ display:none; margin:10px 0 30px 0; padding:12px }
.gdpr-info-text.font18		{ line-height:1.35em }
.gdpr-info hr		{ margin-bottom:16px }
.gdpr-info-potvrdit { float:none; margin:50px auto 30px auto; width:180px; text-align:center;}

.gdpr-souhlas-desktop	{ position: sticky; width:100%; height: 93px; bottom:0px; padding: 24px 0; background:#12110D; text-align:center; }

.gdpr-info .button {  margin-right:12px; cursor:pointer; padding:0; text-shadow:none; color:#FEF7E7 }

.gdpr-prijmout2	{ background:#FEF7E7; border:solid 1px #FEF7E7; color:#fff; margin-left:12px;}
.gdpr-potvrdit	{ float:none; display:inline-block; font-weight: 600;  }





/* =====================================================================
   Cookie lišta — doplnění pro nový design.
   Původní markup počítal s utilitami font16/font18/font30 a ramecek10
   ze starého webu, které tady nejsou. Tohle je dorovnává a opravuje
   .gdpr-prijmout2, kde byl krémový podklad a bílý text (nečitelné).
   ===================================================================== */

.gdpr, .gdpr-info          { font-family:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:15px; line-height:1.6; }
.gdpr-y                    { max-width:var(--maxw); margin:0 auto; border-radius:var(--radius); }

.gdpr-nadpis               { font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.01em; text-align:left; }
.gdpr-subnadpis            { font-size:17px; font-weight:600; }
.gdpr-text                 { font-size:14.5px; }
.gdpr-text b               { font-weight:600; }
.gdpr-nastaveni            { font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding-bottom:2px; }

.gdpr .button,
.gdpr-info .button         { display:inline-flex; align-items:center; justify-content:center;
                             padding:13px 26px; font-size:13px; font-weight:600; letter-spacing:.09em;
                             text-transform:uppercase; border:1px solid #FEF7E7; border-radius:var(--radius);
                             transition:.22s ease; white-space:nowrap; }
.gdpr .button:hover,
.gdpr-info .button:hover   { background:var(--red); border-color:var(--red); color:#fff; }

/* Přijmout a Odmítnout musí být stejně dostupné.

   „Alle akzeptieren" bylo plné krémové tlačítko, „Ablehnen" jen obrys
   ve stejné řadě — opticky nabídka a poznámka pod čarou, ne dvě
   rovnocenné volby. Evropská komise na tenhle vzor upozorňuje přímo:
   odmítnutí nemá být záměrně obtížnější ani nenápadnější než přijetí.
   Obě tlačítka teď mají stejný podklad, stejnou velikost i stejné
   místo; liší se jen textem. Nastavení cookies zůstává odkazem vedle,
   ta třetí možnost nenápadná být smí. */
.gdpr-prijmout,
.gdpr-odmitnout            { background:#FEF7E7; border-color:#FEF7E7; color:#12110D!important; }

/* Text na hover. Barva textu obou tlačítek je nastavená s !important
   (jinak by ji přebilo obecné pravidlo pro .button výš), jenže tím
   přebíjela i hover stav — podklad zčervenal a písmo zůstalo tmavé,
   takže na červené nebylo pořádně vidět. Hover proto potřebuje stejnou
   váhu. */
.gdpr .button.gdpr-prijmout:hover,
.gdpr .button.gdpr-odmitnout:hover,
.gdpr-info .button.gdpr-prijmout:hover,
.gdpr-info .button.gdpr-prijmout2:hover,
.gdpr-info .button.gdpr-info-potvrdit:hover { color:#fff!important; }
.gdpr-prijmout2            { background:#FEF7E7; border:solid 1px #FEF7E7; color:#12110D!important; float:left; margin-left:0; }

.gdpr-info-uvod-text       { font-size:14px; }
.gdpr-info-cookies         { font-size:16px; font-weight:600; }
.gdpr-info-text            { font-size:14px; line-height:1.55; }
.gdpr-info-aktivni,
.gdpr-info-vyp-zap         { font-size:13px; }
.gdpr-info-minus,
.gdpr-info-plus            { font-size:0; }

.gdpr-info-close           { height:40px; }
.gdpr-info-close span      { top:19px; }

/* Mobil — lišta i panel přes celou šířku */
@media (max-width:860px) {
  .gdpr                    { bottom:0; right:0; width:100%; }
  .gdpr-y                  { padding:20px 18px; max-height:calc(100vh - 40px); overflow-y:auto; }
  .gdpr-nadpis             { width:calc(100% - 50px); font-size:19px; }
  .gdpr-text               { padding-right:0; margin-bottom:24px; }
  .gdpr-close              { margin:18px; }
  .gdpr-nastaveni          { float:none; display:block; margin:0 0 18px 0; text-align:left; }
  .gdpr-button             { float:none!important; width:100%; margin:0 0 10px 0!important; }
  .gdpr-odmitnout          { margin-right:0; }
  .gdpr .button            { margin-left:0; }
  .gdpr-info               { max-width:100%; right:-100%; }
  .gdpr-info-uvod-text     { margin-right:0; }
  .gdpr-prijmout2          { float:none; width:100%; }
}


/* Potvrzovací tlačítko v nastavení cookies.

   Lišta .gdpr-souhlas-desktop je vysoká přesně 93px (na tom čísle visí
   i min-height panelu nad ní) a má 24px svislého odsazení. Tlačítko
   v ní mělo margin 50px nahoře a 30px dole — dohromady 153px obsahu
   ve 93px vysokém pruhu, takže z něj dole trčelo ven a na kratších
   obrazovkách se uřízlo.

   Svislé odsazení teď dělá lišta sama (22 + 49 + 22 = 93) a tlačítko
   žádné vlastní margin nemá. Boční 24px přibylo proto, aby se tlačítko
   na úzkém displeji nedotýkalo okraje.

   Selektor je dvojitý schválně: .gdpr-info .button výš v souboru dává
   margin-right:12px a je specifičtější než samotná třída tlačítka —
   kvůli tomu se tlačítko nedalo vystředit, viselo o 12px vlevo.

   Šířka je auto, ne pevných 180px. Uvnitř je "Potvrdit moje volby"
   (německy "Meine Auswahl bestätigen"), verzálkami a s prostrkáním —
   do 180px se text nevešel a roztlačil si odsazení, takže se lepil na
   obě hrany. Teď si tlačítko šířku bere podle textu a 32px po stranách
   zůstane odsazení i u delší německé verze. */
.gdpr-souhlas-desktop        { min-height:93px; height:auto; padding:22px 24px; }
.gdpr-info .gdpr-info-potvrdit { margin:0 auto; width:auto; max-width:100%;
                                 padding-left:32px; padding-right:32px; }


/* Stav vyprodáno na detailu produktu — místo příslibu expedice.
   Dřív se řádek "skladem" tiskl vždy, i u vyprodané barvy. */
.price-note-vyprodano{color:var(--red);font-weight:600;}
.price-note-vyprodano svg{display:none;}


/* =====================================================================
   Filtry ve výpisu kategorie
   Navazuje na .side / .side-block, které už v návrhu byly.
   ===================================================================== */

.filtr-hlava{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:14px;}
.filtr-hlava h2{margin:0;}
.filtr-zrusit{
  border:0;background:none;padding:0;cursor:pointer;
  font:inherit;font-size:11.5px;letter-spacing:.04em;color:var(--red);
  border-bottom:1px solid currentColor;
}
.filtr-zrusit:hover{color:var(--ink);}

.filtr-skupina{margin-bottom:20px;}
.filtr-skupina:last-child{margin-bottom:0;}
.filtr-skupina h3{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0 0 9px;
}

/* velikosti jako dlaždice */
.filtr-velikosti{display:flex;flex-wrap:wrap;gap:6px;}
.filtr-velikost{cursor:pointer;}
.filtr-velikost input{position:absolute;opacity:0;width:0;height:0;}
.filtr-velikost span{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;padding:7px 9px;
  border:1px solid var(--line);border-radius:var(--radius);
  font-size:12.5px;font-weight:600;line-height:1;
  transition:.16s ease;
}
.filtr-velikost:hover span{border-color:var(--ink);}
.filtr-velikost input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink);}
.filtr-velikost input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px;}

/* barvy a "jen skladem" jako řádky se zaškrtávátkem */
.filtr-barvy{display:grid;gap:2px;max-height:250px;overflow-y:auto;}
/* Názvy barev jsou v databázi psané různě ("Rot" i "gelb"). Hodnota
   se nikde nemění, jen se zobrazí s velkým prvním písmenem, ať seznam
   nevypadá rozházeně. */
.filtr-barvy .filtr-nazev::first-letter{text-transform:uppercase;}
.filtr-radek{
  display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:5px 0;font-size:14px;line-height:1.3;
}
.filtr-radek input{
  appearance:none;-webkit-appearance:none;flex:none;
  width:15px;height:15px;margin:0;
  border:1px solid var(--line);border-radius:2px;background:#fff;
  cursor:pointer;transition:.16s ease;
}
.filtr-radek input:checked{
  background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color:var(--ink);
}
.filtr-radek input:focus-visible{outline:2px solid var(--red);outline-offset:2px;}
.filtr-radek:hover .filtr-nazev{color:var(--red);}
.filtr-nazev{flex:1;transition:.16s ease;}
.filtr-radek .n{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}

/* rozpětí ceny */
.filtr-cena{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap;}
.filtr-cena-pole{display:flex;flex-direction:column;gap:4px;flex:1;min-width:72px;}
.filtr-cena-pole span{font-size:11px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;}
.filtr-cena input{
  width:100%;padding:8px 9px;font:inherit;font-size:13.5px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
}
.filtr-cena input:focus{outline:none;border-color:var(--ink);}
.filtr-mena{font-size:12px;color:var(--muted);padding-bottom:9px;}

/* prázdný výsledek */
.vypis-prazdno{padding:48px 0;text-align:center;color:var(--muted);}
.vypis-prazdno-nadpis{font-size:18px;color:var(--ink);margin-bottom:6px;}

/* mobil — filtry pod kategoriemi, ne v úzkém sloupci */
@media(max-width:900px){
  .filtr-barvy{max-height:none;}
  .filtr-velikosti{gap:7px;}
  .filtr-velikost span{min-width:44px;padding:9px 11px;}
  .filtr-radek{padding:8px 0;}
}


/* Vyhledávání — pole v hlavičce a stránka s výsledky */
.hledani-hlavicka{display:flex;align-items:center;gap:2px;}
.hledani-hlavicka input{
  width:0;padding:0;border:0;background:none;font:inherit;font-size:14px;color:var(--ink);
  opacity:0;transition:width .22s ease,opacity .18s ease,padding .22s ease;
}
.hledani-hlavicka input::placeholder{color:var(--muted);}
/* Rozbalení myší jen tam, kde myš opravdu je. Na dotyku žádný hover
   nenastane a pole široké 0 px nejde ťuknout — tam se otevírá
   kliknutím na lupu (třída .otevreno, viz js/page.js). */
@media (hover:hover){
  .hledani-hlavicka:hover input{
    width:clamp(120px,14vw,190px);padding:8px 10px;opacity:1;
    border-bottom:1px solid var(--line);
  }
}
.hledani-hlavicka.otevreno input,
.hledani-hlavicka:focus-within input,
.hledani-hlavicka input:not(:placeholder-shown){
  width:clamp(120px,14vw,190px);padding:8px 10px;opacity:1;
  border-bottom:1px solid var(--line);
}
.hledani-hlavicka input:focus{outline:none;border-bottom-color:var(--ink);}

/* Na mobilu se pole v hlavičce nerozbaluje vůbec — na to tam není místo
   a psát do proužku vedle loga se špatně. Zůstává jen lupa a ta vede
   rovnou na stránku vyhledávání, kde je pole přes celou šířku. */
@media(max-width:820px){
  .hledani-hlavicka input{display:none;}
}

.hledani-form{display:flex;gap:10px;margin:0 0 28px;flex-wrap:wrap;}
.hledani-form input{
  flex:1;min-width:200px;padding:14px 16px;font:inherit;font-size:15px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);
}
.hledani-form input:focus{outline:none;border-color:var(--ink);}
.hledani-pocet{margin:0 0 20px;color:var(--muted);font-size:14.5px;}
.hledani-vice{margin:24px 0 0;color:var(--muted);font-size:14px;text-align:center;}

@media(max-width:820px){
  /* Na mobilu se pole neschovává — schované vyhledávání nikdo nenajde. */
  .hledani-hlavicka input,
  .hledani-hlavicka:hover input,
  .hledani-hlavicka:focus-within input{width:100%;opacity:1;padding:8px 10px;}
  .hledani-hlavicka{flex:1;max-width:190px;margin-right:4px;}
}


/* =====================================================================
   FILTRY NA MOBILU

   Na desktopu je panel součástí postranního sloupce a nic z tohohle
   bloku se neuplatní. Pod 900 px se z něj stane vysouvací panel zdola:
   seznam barev bývá dlouhý a takhle ho jde procházet palcem, aniž by
   filtry tlačily celý výpis pod ohyb stránky.
   ===================================================================== */

.filtr-otevrit{display:none;}
.filtr-zavrit{display:none;}
.filtr-patka{display:none;}

@media(max-width:900px){

  .filtr-otevrit{
    display:inline-flex;align-items:center;gap:9px;
    border:1px solid var(--line);border-radius:var(--radius);
    padding:9px 14px;font:inherit;font-size:12px;font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;
    background:#fff;color:var(--ink);cursor:pointer;transition:border-color .18s;
  }
  .filtr-otevrit:hover{border-color:var(--ink);}
  .filtr-otevrit svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;}
  .filtr-pocet{
    display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;
    border-radius:9px;background:var(--ink);color:#fff;font-size:11px;letter-spacing:0;
  }

  /* Panel mimo obrazovku, dokud ho zákazník neotevře. */
  .filtr-panel{
    position:fixed;left:0;right:0;bottom:0;z-index:1200;
    display:flex;flex-direction:column;
    max-height:86vh;
    margin:0;padding:0;border:none;border-radius:16px 16px 0 0;
    background:#fff;box-shadow:0 -6px 30px rgba(0,0,0,.18);
    transform:translateY(101%);
    /* visibility drží zavřený panel mimo pořadí tabulátoru — jinak by
       se do něj dalo zatabovat, i když ho není vidět. */
    visibility:hidden;
    transition:transform .26s ease, visibility 0s linear .26s;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .filtr-panel.otevreno{
    transform:translateY(0);
    visibility:visible;
    transition:transform .26s ease, visibility 0s;
  }

  .filtr-plachta{
    position:fixed;inset:0;z-index:1150;background:rgba(20,17,15,.45);
    opacity:0;transition:opacity .26s ease;
  }
  .filtr-plachta.otevreno{opacity:1;}

  .filtr-hlava{
    display:flex;align-items:center;gap:12px;
    padding:16px 18px;border-bottom:1px solid var(--line);
    margin:0;flex:0 0 auto;
  }
  .filtr-hlava h2{margin:0;flex:1;}

  .filtr-zavrit{
    display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
    border:none;background:none;color:var(--ink);cursor:pointer;padding:0;
  }
  .filtr-zavrit svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;}

  /* Posouvá se jen obsah panelu, ne stránka pod ním. */
  .filtr-telo{
    flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:18px;overscroll-behavior:contain;
  }
  .filtr-barvy{max-height:none;}

  .filtr-patka{
    display:block;flex:0 0 auto;
    padding:14px 18px;border-top:1px solid var(--line);
  }
  .filtr-hotovo{width:100%;justify-content:center;}

  /* Dokud je panel otevřený, stránka pod ním nikam neuteče. */
  body.filtr-otevreny{overflow:hidden;}
}


/* =====================================================================
   TABULKA MĚR NA MOBILU

   Globální pravidlo v @media(max-width:600px) rozkládá všechny tabulky
   na bloky pod sebou. U dvousloupcových parametrů to dává smysl,
   u tabulky měr ne — zákazník tam porovnává velikosti mezi sebou
   a potřebuje je vedle sebe jako na desktopu.

   Tahle tabulka si proto tvar drží a když se nevejde, posouvá se
   do strany sama, ne s celou stránkou.
   ===================================================================== */

.tbl-posuv{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  /* Posouvání skončí na kraji tabulky a nepřelije se na stránku. */
  overscroll-behavior-x:contain;
}

@media(max-width:600px){

  /* Zpátky na tabulku — přebíjí společné pravidlo výš. */
  .tbl-velikosti,
  .tbl-velikosti tbody,
  .tbl-velikosti thead,
  .tbl-velikosti tr,
  .tbl-velikosti th,
  .tbl-velikosti td{display:revert;}

  .tbl-velikosti{
    display:table;
    width:auto;
    /* Aby se sloupce nesmrskly na nečitelnou šířku a vznikl důvod
       k posunu do strany. */
    min-width:100%;
    /* Se slitými okraji se první sloupec při posouvání nepřekresluje
       spolehlivě a zpod něj vykukovaly číslice z odsunutého sloupce.
       Oddělené okraje to spraví, čáry pak dělá samotná buňka. */
    border-collapse:separate;
    border-spacing:0;
  }
  .tbl-velikosti thead{display:table-header-group;}
  .tbl-velikosti tbody{display:table-row-group;}
  .tbl-velikosti tr{display:table-row;border-bottom:none;}

  .tbl-velikosti th,
  .tbl-velikosti td{
    display:table-cell;
    white-space:nowrap;
    padding:10px 8px;
    border-bottom:1px solid var(--line);
    width:auto;
  }

  /* Sloupce s mírami potřebují jistotu, že se do nich hodnota vejde.
     Bez toho si prohlížeč u delších čísel (21,8) utáhl buňku pod šířku
     textu, ten přetekl ven a při posunutí se otiskl přes zamrzlý
     první sloupec. Na střed proto, že se čísla líp porovnávají. */
  .tbl-velikosti td:not(:first-child),
  .tbl-velikosti th:not(:first-child){
    min-width:54px;
    text-align:center;
  }

  /* Ostatní buňky dostanou vlastní vrstvu pod prvním sloupcem. Bez toho
     se jim delší hodnoty (21,8) přemalovávaly přes zamrzlý popisek. */
  .tbl-velikosti td,
  .tbl-velikosti th{position:relative;z-index:0;}

  /* První sloupec je popis míry a zůstává vidět i po odsunutí. */
  .tbl-velikosti tr > td:first-child,
  .tbl-velikosti tr > th:first-child{
    position:sticky;left:0;z-index:2;
    background:#fff;
    box-shadow:1px 0 0 var(--line);
  }

  .tbl-posuv{scrollbar-width:thin;}
}


/* =====================================================================
   Právní stránka bez obsahu v postranním sloupci (Impressum).

   .doc je mřížka 274px + zbytek a počítá s <nav class="toc"> jako
   prvním dítětem. Stránka, která obsah nemá, spadla celá do té úzké
   kolonky a zbytek šířky zůstal prázdný.

   Pravidlo je až tady na konci schválně: .doc je v souboru dvakrát
   (kolem řádku 945 a 1832) a vyhrává ta pozdější definice. Kdyby se
   duplicita někdy uklidila, tohle bude platit dál.
   ===================================================================== */
.doc-uzky{grid-template-columns:1fr;}

/* Hláška u velkoobchodního přihlášení. */
.prihlaseni-chyba{
  margin:0 0 12px;padding:10px 12px;
  border:1px solid var(--red);border-radius:var(--radius);
  background:#fff4f2;color:var(--ink);
  font-size:13px;line-height:1.45;
}


/* =====================================================================
   Odkazy a klikací prvky — bez rámečku a bez modrého bliknutí

   Prohlížeč kreslí kolem klikacího prvku rámeček (outline) a mobilní
   Safari s Chromem k tomu při doteku blikne šedomodrým obdélníkem.
   Na designu webu to působí jako chyba, zvlášť u dlaždic kategorií
   a tlačítek v košíku. V souboru se to už řešilo, ale po jednom
   u konkrétních prvků (.icons, .more-wrap, .q a další) — tohle to
   sjednocuje na jednom místě.

   Rámeček se přitom neruší úplně: :focus-visible ho vrátí tomu, kdo
   se po stránce pohybuje tabulátorem. Prohlížeč tenhle stav nasazuje
   jen při ovládání z klávesnice, ne po kliknutí myší ani po doteku,
   takže návštěvník, kterému ten rámeček vadil, ho neuvidí — a kdo se
   bez něj neobejde, pozná, kde na stránce je.
   ===================================================================== */
a,
button,
summary,
.btn,
.button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
.btn:focus-visible,
.button:focus-visible,
[role="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}


/* =====================================================================
   Stránka 404

   Stejný rytmus jako prázdný košík (.empty) — velký klidný blok na
   střed, ne poplašná hláška. Číslo 404 je jen tichý podtitulek nad
   nadpisem, aby bylo jasné, co se stalo, ale nekřičelo to.
   ===================================================================== */
.ctyristovka{
  max-width:620px;margin:0 auto;
  padding-block:clamp(56px,9vw,120px);
  text-align:center;
}
.ctyristovka-kod{
  display:block;font-size:13px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px;
}
.ctyristovka h1{
  font-size:clamp(28px,4.2vw,44px);margin:0 0 14px;
}
.ctyristovka .lede{
  color:var(--ink-soft);margin:0 auto 32px;max-width:460px;
}

/* Vyhledávání. Na mobilu se pole s tlačítkem staví pod sebe — vedle
   sebe by na 390px zbylo na text pár znaků. */
.ctyristovka-hledani{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-bottom:38px;
}
.ctyristovka-hledani input{
  flex:1;min-width:220px;max-width:340px;
  border:1px solid var(--line);border-radius:var(--radius);
  padding:13px 16px;font-size:14px;font-family:inherit;
  background:#fff;color:var(--ink);outline:none;
  transition:border-color .18s;
}
.ctyristovka-hledani input:focus{border-color:var(--ink);}
.ctyristovka-hledani input::-webkit-search-cancel-button{-webkit-appearance:none;}
.ctyristovka-hledani .btn{flex:0 0 auto;}

.ctyristovka-nebo{
  font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;
}
.ctyristovka-kat{
  display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
  margin-bottom:38px;
}
.ctyristovka-kat a{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:10px 18px;font-size:14px;transition:.2s ease;
}
.ctyristovka-kat a:hover{border-color:var(--ink);background:var(--ink);color:#fff;}

.ctyristovka-domu{display:inline-flex;}

@media(max-width:520px){
  .ctyristovka-hledani input{max-width:none;flex-basis:100%;}
  .ctyristovka-hledani .btn{flex:1 1 100%;}
}

/* =====================================================================
   Cesta k dokončení nákupu z detailu produktu

   Objeví se pod tlačítkem „Do košíku" až po úspěšném přidání. Hlavní
   tlačítko zůstává plné a tmavé, tohle je ohraničené — ať je poznat,
   které z nich je hlavní akce a které nabídka, kam pokračovat.
   ===================================================================== */
.btn-do-kosiku{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;margin-top:10px;
  animation:doKosikuDovnitr .28s ease both;
}
.btn-do-kosiku svg{
  width:16px;height:16px;flex-shrink:0;
  stroke:currentColor;stroke-width:1.8;fill:none;
}
.btn-do-kosiku[hidden]{display:none !important;}

@keyframes doKosikuDovnitr{
  from{opacity:0;transform:translateY(-4px);}
  to  {opacity:1;transform:none;}
}

/* Kdo má vypnuté animace, dostane tlačítko rovnou. */
@media (prefers-reduced-motion: reduce){
  .btn-do-kosiku{animation:none;}
}

  /* ---------- Živá fotka ve výpisu ----------
     Ve výpisu je produktový střih — mřížka tak zůstane čistá
     a porovnatelná. Živá fotka (kod-live.webp) je nafocená na ulici,
     ne na bílém pozadí, takže se po najetí myší prolne přes střih,
     vyplní dlaždici do krajů a je přiblížená na oděv, aby plochu
     držela bunda a ne obličej ani ulice.

     Markup dělá foto_vypis_html() v libs/funkce.php. Zboží bez živé
     fotky sem nespadne a zůstává beze změny. */
  .card-img-ziva img.foto-ziva{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 36%;
    transform:scale(1.3);transform-origin:50% 36%;
    opacity:0;transition:opacity .4s ease, transform .5s ease;
  }
  .card:hover .card-img-ziva img.foto-ziva,
  .rel-card:hover .card-img-ziva img.foto-ziva{opacity:1;transform:scale(1.37);}

  /* Na dotyku se nehoveruje — zůstane jen produktový střih, živou
     fotku si zákazník prohlédne na detailu. */
  @media (hover:none){
    .card-img-ziva img.foto-ziva{display:none;}
  }

  @media (prefers-reduced-motion:reduce){
    .card-img-ziva img.foto-ziva{transition:opacity .4s ease;}
    .card:hover .card-img-ziva img.foto-ziva,
    .rel-card:hover .card-img-ziva img.foto-ziva{transform:scale(1.3);}
  }

  /* ---------- Kontakt ----------
     Stránka kontakt.php. Dlaždice s údaji jsou na desktopu ve dvou
     sloupcích, na mobilu pod sebou. Ikony jsou ve stejném stylu jako
     zbytek webu — tenká linka, bez výplně. */
  .phead-lede{color:var(--ink-soft);font-size:16px;line-height:1.65;margin:0;max-width:58ch;}

  .kontakt{padding-bottom:clamp(56px,7vw,90px);}

  .kontakt-seznam{
    list-style:none;margin:0 0 clamp(40px,5vw,60px);padding:0;
    display:grid;grid-template-columns:repeat(2,1fr);gap:28px 40px;max-width:860px;
  }
  .kontakt-polozka{display:flex;gap:16px;align-items:flex-start;}

  .kontakt-ikona{
    flex-shrink:0;width:44px;height:44px;border-radius:var(--radius);
    background:var(--paper);display:grid;place-items:center;
  }
  .kontakt-ikona svg{width:20px;height:20px;stroke:var(--red);stroke-width:1.6;fill:none;}

  .kontakt-text h2{
    font-size:13px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--muted);font-weight:600;margin:0 0 7px;
  }
  .kontakt-text p,.kontakt-text address{
    font-style:normal;font-size:16px;color:var(--ink);line-height:1.6;margin:0;
  }
  .kontakt-text a{border-bottom:1px solid var(--line);transition:color .2s,border-color .2s;}
  .kontakt-text a:hover{color:var(--red);border-color:var(--red);}
  .kontakt-doba{color:var(--ink-soft);}
  .kontakt-pozn{margin-top:6px!important;font-size:13.5px;color:var(--muted);}

  .kontakt-kde{border-top:1px solid var(--line);padding-top:clamp(30px,4vw,44px);max-width:860px;}
  .kontakt-kde h2{font-size:clamp(20px,2.4vw,26px);margin:0 0 14px;}
  .kontakt-kde address{
    font-style:normal;font-size:16px;color:var(--ink);line-height:1.7;margin:0 0 10px;
  }
  .kontakt-kde p{color:var(--ink-soft);font-size:14.5px;line-height:1.7;margin:0 0 22px;max-width:58ch;}

  .kontakt-mapy{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
  .kontakt-odkaz{
    font-size:14px;color:var(--ink-soft);border-bottom:1px solid var(--line);
    transition:color .2s,border-color .2s;
  }
  .kontakt-odkaz:hover{color:var(--red);border-color:var(--red);}

  @media(max-width:820px){
    .kontakt-seznam{grid-template-columns:1fr;gap:24px;}
    .phead-lede{font-size:15px;}
    .kontakt-mapy .btn{width:100%;}
  }

  /* Oprava: .doc-uzky používá impressum.php, ale pravidlo pro něj
     v CSS nikdy nebylo — .doc tak zůstal dvousloupcový a text se
     odsouval o prázdný 262px sloupec doprava. */
  .doc-uzky{grid-template-columns:1fr;}


  /* ---------- Hranice mobilního menu ----------
     Vodorovné menu se do hlavičky přestávalo vejít dřív, než se
     objevil burger: mezi 1024 a 821 px se položky lepily na ikony.
     Burger proto nastupuje už pod 1024 px.

     Hranice se nedá posunout v těch deseti blocích @media(max-width:820px)
     po souboru — každý z nich nese i spoustu dalších pravidel, která
     na 820 px patří. Tenhle blok stojí schválně až úplně na konci,
     takže platí nad všemi a jen rozšiřuje rozsah nahoru; co dělají
     ony pod 820 px, nechává být.

     .logo dostane flex:1, aby ikony zůstaly vpravo — bez vodorovného
     menu by se jinak přisunuly k logu. Pod 820 px to samé nastavují
     bloky výš, hodnota je stejná, takže se nic nepere. */
  @media (max-width:1023px){
    .menu{display:none;}
    .burger{display:grid;}
    .logo{flex:1;}
  }


  /* ---------- Aktivní kategorie v hlavním menu ----------
     Podtržení dosud jelo jen na :hover a po odjetí myši zmizelo —
     z menu tedy nešlo poznat, v jaké kategorii návštěvník je.
     Položka odpovídající právě otevřené kategorii má teď
     aria-current="page" (nastavuje libs/hlavicka.php) a podtržení
     si drží. Platí i na detailu produktu, kategorie je tam známá.

     Blok stojí na konci souboru, aby přebil .menu a::after{width:0}
     z bloku výš bez zvyšování specificity a souboj o !important. */
  .menu a[aria-current="page"]{color:var(--ink);}
  .menu a[aria-current="page"]::after{width:100%;}

  /* V mobilním panelu se podtržení nekreslí — položky jsou tam pod
     sebou přes celou šířku. Aktivní se proto jen ztmaví. */
  .mobil-menu-hlavni a[aria-current="page"]{color:var(--ink);font-weight:600;}