/* ============================================================
   SALES — vlastní vrstva prodejní stránky

   Načítá se AŽ ZA styles.css a kabat.css, takže z nich dědí písma,
   stupnici a barvy. Sahat na ně nesmím (pracuje v nich druhý Code),
   takže všechno nové je tady.

   Hodnoty, které v načtených souborech nejsou, mají náhradu přímo
   z battswap-design-system.css — proto ta dvojice var(--x, hodnota).
   ============================================================ */

/* ---------- TOKENY: domácí, ne vlastní ----------
   Stránka si tu dřív držela vlastní kopie barev opsané z domovské.
   Kopie se rozejdou; tyhle už jen ukazují na to, co má domovská
   v kabat.css a styles.css, plus barvy ze zadání. Když se domovská
   změní, změní se i tahle stránka — o to jde. */
.s2 {
  --s-ink:      #050505;
  --s-ink2:     #383E42;
  --s-mute:     #383E42;
  --s-line:     rgba(5,5,5,.12);
  --s-paper:    #FFFFFF;
  --s-paper2:   #F0F0F0;
  --s-pink:     #FB5494;
  /* Druhá růžová na webu od 31. 8. není (kabat.css: „--pink-ink míří
     na značkovou; kde nesedí kontrast, mění se VELIKOST písma nebo
     PODKLAD, ne ta barva"). Tahle vrstva se tím řídí: růžová nese jen
     velký tučný text, drobný popisek je inkoustový. */
  --s-glow:     rgba(251,84,148,.14);
  --s-r:        var(--r-karta, 16px);
  --s-rl:       var(--r-karta, 16px);
  --s-e1:       var(--stin, 0 0 40px rgba(168,166,160,.28));
  --s-e2:       var(--stin, 0 0 40px rgba(168,166,160,.28));
  --s-t:        var(--doba, 400ms);
  --s-ease:     var(--krivka, cubic-bezier(.33,1,.68,1));

  /* tmavá plocha — tatáž, jakou má domovská pod technickými daty */
  --s-uhel:     #050505;
  --s-uhel-ink: #F4F4F2;
  --s-uhel-mut: rgba(244,244,242,.66);
  --s-uhel-line:rgba(244,244,242,.14);
  --s-uhel-karta:rgba(244,244,242,.05);
}

/* ---------- JEDNA SEKCE = JEDNA OBRAZOVKA ----------
   Zadání: každá část se musí vejít na 1440 × 900 i 1920 × 1080.
   Výška se proto nebere z pevných čísel, ale z okna: sekce je vysoká
   jako okno, obsah stojí svisle na středu a vnitřní mezery jsou
   omezené `vh`, ne jen `vw`. Kde se to nevejde, ustupují popisky,
   ne údaje. */
.s2 > .section {
  min-height: 100svh;
  display: flex;
  align-items: center;
  /* Nahoře se počítá s lištou. Bez toho se obsah vystředil do celého
     okna a horních čtyřicet pixelů sekce zůstalo pod lištou schované —
     přesně to „nacpané záhlaví", které zadání zakazuje. */
  padding-top: calc(var(--lista-v, 87px) + clamp(8px, 1.5vh, 24px));
  padding-bottom: clamp(18px, 2.6vh, 52px);
}
.s2 > .section > .wrap { width: 100%; }

/* Hlavička sekce: verzálkový popisek s růžovou čárkou, nadpis, perex.
   Mezery z osmičkové stupnice, ne vlastní čísla. */
.s2 .sec-head { margin-bottom: clamp(20px, 3.4vh, 40px); max-width: 62ch; }
.s2 .sec-head .h { margin: var(--m1) 0 0; }
.s2 .sec-head .lead { margin: var(--m2) 0 0; color: var(--s-mute); max-width: 56ch; }
.s2 .eyebrow {
  display: inline-block; padding-left: var(--m2);
  border-left: 3px solid var(--s-pink); line-height: 1.1;
  color: var(--s-mute);
}

/* ---------- TMAVÉ PLOCHY ----------
   Domovská střídá celoobrazovkové plochy světlé a tmavé. Tady vede
   řez tam, kde se mění argument: konec počítání, začátek důvodů. */
.s2 #savings { background: var(--s-paper2); }
.s2 #configure { background: var(--s-paper); }

/* Šev mezi dvěma plochami řeší barva plochy, ne menší padding:
   nahoře musí zůstat místo na lištu, jinak se pod ni obsah schová. */

/* ---------- konfigurátor ---------- */
/* Tři sloupce podle Radkova plánku: text | cena a vůz | karta.
   Hlídá AKTUALNI-sales-rozvrzeni.py na 1440 i 1920. */
.s2-cfg{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.12fr) minmax(0,.86fr);
  gap:clamp(24px,4vw,64px);align-items:start}
@media(max-width:1180px){.s2-cfg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .s2-col--karta{grid-column:1/-1}}
@media(max-width:900px){.s2-cfg{grid-template-columns:1fr}
  .s2-col--karta{grid-column:auto}}

/* přepínač obchodního modelu — má vypadat jako pozvánka si s ním hnout */
.s2-prep{display:inline-flex;padding:4px;gap:4px;border-radius:var(--r-pill,999px);
  background:var(--s-paper2);border:1px solid var(--s-line);margin-bottom:clamp(18px,2.4vw,28px)}
.s2-prep button{border:0;cursor:pointer;font:inherit;font-weight:600;
  padding:.62em 1.15em;border-radius:var(--r-pill,999px);background:transparent;
  color:var(--s-mute);transition:background var(--s-t) var(--s-ease),color var(--s-t) var(--s-ease)}
.s2-prep button[data-on]{background:var(--s-pink);color:#050505}
.s2-prep button:not([data-on]):hover{color:var(--s-ink)}

/* velké růžové číslo */
.s2-cena{line-height:1}
.s2-cena b{display:block;font-family:var(--font-display,inherit);font-weight:700;
  color:var(--s-pink);letter-spacing:-.03em;
  font-size:clamp(3.2rem,8vw,6.4rem);font-variant-numeric:tabular-nums}
.s2-cena .lab{display:block;margin-top:.5em;color:var(--s-mute);
  font-size:clamp(.86rem,1.05vw,.98rem)}
.s2-cena .pod{display:block;margin-top:.7em;font-size:.92rem;color:var(--s-ink2)}
/* Atribut hidden musi prebit display:block vys, jinak u pay-as-you-go
   sviti prazdna veta o priplatku za kilometr. */
.s2-cena .pod[hidden],.s2-varovani[hidden],.s2-uspora[hidden]{display:none}
.s2-cena .pod b{display:inline;font-size:1em;color:var(--s-ink)}

/* vůz a jeho scéna */
.s2-scena{position:relative;border-radius:var(--s-rl);overflow:hidden;
  background:var(--s-paper2);box-shadow:var(--s-e1)}
.s2-scena img{display:block;width:100%;height:auto}
.s2-scena[data-model3d="nacteno"] .s2-nahled{opacity:0}

/* pruh parametrů pod vozem */
.s2-param{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);margin-top:clamp(12px,1.6vw,18px)}
@media(max-width:700px){.s2-param{grid-template-columns:repeat(2,1fr)}}
.s2-param div{background:var(--s-paper);border:1px solid var(--s-line);
  border-radius:var(--s-r);padding:clamp(11px,1.2vw,15px)}
.s2-param b{display:block;font-family:var(--font-display,inherit);font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--s-ink);letter-spacing:-.02em}
/* Popis nastavby je z modelu cela veta, ne cislo — v displejovem rezu
   by kartu roztrhal na ctyri radky. */
.s2-param--text b{font-family:var(--font-text,inherit);font-weight:600;
  font-size:clamp(.82rem,1vw,.95rem);line-height:1.3;letter-spacing:0}
.s2-param span{display:block;margin-top:.35em;font-size:.74rem;color:var(--s-mute);line-height:1.35}
.s2-param sup{color:var(--s-ink2);font-weight:700}

/* karty variant */
.s2-var{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);margin-top:clamp(14px,2vw,22px)}
@media(max-width:700px){.s2-var{grid-template-columns:repeat(2,1fr)}}
.s2-var .var{cursor:pointer;font:inherit;text-align:left;padding:0;overflow:hidden;
  background:var(--s-paper);border:1px solid var(--s-line);border-radius:var(--s-r);
  transition:border-color var(--s-t) var(--s-ease),box-shadow var(--s-t) var(--s-ease),
             transform var(--s-t) var(--s-ease)}
/* 10. 9. večer. Michaela: „ty fotky přijdou moc velké." Měla pravdu
   a je to důsledek výměny obrázků: brožurové rendery měly poměr
   940/520 = 1,808, rendery od Naty mají 1550/1015 = 1,527. Při stejné
   šířce kartičky je tedy nový obrázek o 18 % vyšší a celý pruh
   s výběrem nástavby povyrostl. Kartička si proto drží PŮVODNÍ poměr
   a obrázek se do ní ořízne. Svislé usazení 45 % je změřené — na
   renderu od Naty leží střed vozu v 45 % výšky snímku. */
.s2-var .var img{display:block;width:100%;height:auto;
  aspect-ratio:940/520;object-fit:cover;object-position:50% 45%}
.s2-var .var span{display:block;padding:.6em .8em .75em;font-size:.8rem;font-weight:600;
  color:var(--s-ink2);line-height:1.25}
.s2-var .var:hover{border-color:var(--s-pink);transform:translateY(-2px)}
.s2-var .var[data-on]{border-color:var(--s-pink);box-shadow:var(--s-e1)}
.s2-var .var[data-on] span{color:var(--s-ink)}

/* ---------- kalkulačka ---------- */
.s2-kalk{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(24px,4vw,56px);align-items:start}
@media(max-width:900px){.s2-kalk{grid-template-columns:1fr}}

.s2-pole{margin-bottom:clamp(22px,3vh,34px)}
.s2-pole label{display:flex;justify-content:space-between;align-items:baseline;
  gap:1em;margin-bottom:.55em;font-weight:600;color:var(--s-ink2)}
.s2-pole label b{font-family:var(--font-display,inherit);font-size:1.15rem;color:var(--s-ink);
  font-variant-numeric:tabular-nums}
.s2-pole input[type=range]{width:100%}
.s2-meze{display:flex;justify-content:space-between;margin-top:.4em;
  font-size:.72rem;color:var(--s-mute)}

/* energetický štítek — tři technologie pod sebou */
.s2-stitek{display:flex;flex-direction:column;gap:10px}
.s2-radek{position:relative;border:1px solid var(--s-line);border-radius:var(--s-r);
  padding:clamp(12px,1.4vw,17px) clamp(14px,1.6vw,19px) clamp(15px,1.7vw,21px);
  background:var(--s-paper);overflow:hidden}
/* Pruh je proužek u dolní hrany, ne výplň celé karty. Když se plnila
   celá karta, zbytek za koncem pruhu vypadal jako bílý ulomený kus. */
.s2-radek::before{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:var(--s-line)}
.s2-radek::after{content:"";position:absolute;left:0;bottom:0;height:5px;
  width:var(--podil,0%);background:var(--s-mute);
  transition:width var(--s-t) var(--s-ease)}
.s2-radek > *{position:relative}
.s2-radek .kdo{font-size:.76rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--s-mute)}
.s2-radek .kolik{display:block;margin-top:.2em;font-family:var(--font-display,inherit);
  font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--s-ink2)}
.s2-radek .za{font-size:.72rem;color:var(--s-mute)}
/* dražší dvě jsou schválně nudné a šedé, jak to chtěl Radek */
.s2-radek--drahy .kolik{color:var(--s-mute)}
.s2-radek--nas{border-color:var(--s-pink);box-shadow:var(--s-e1)}
.s2-radek--nas::after{background:var(--s-pink)}
.s2-radek--nas .kdo{color:var(--s-ink2)}
.s2-radek--nas .kolik{color:var(--s-pink);font-size:clamp(1.8rem,3.2vw,2.6rem)}

/* úspora */
.s2-uspora{margin-top:clamp(14px,2vw,20px);padding:clamp(13px,1.5vw,18px);
  border-radius:var(--s-r);background:var(--s-paper);
  border:1px solid var(--s-line);border-left:3px solid var(--s-pink);
  font-size:.92rem;color:var(--s-mute)}
/* Číslo musí být velké a tučné, aby na bílé stačila značkové růžové
   trojka podle normy — proto nejmíň 24 px, ne kvůli efektu. */
.s2-uspora b{display:block;font-family:var(--font-display,inherit);font-weight:700;
  color:var(--s-pink);letter-spacing:-.02em;line-height:1.05;margin-bottom:.15em;
  font-size:clamp(1.55rem,2.6vw,2.15rem)}
.s2-uspora[data-stav="review"] b{color:var(--s-mute)}

/* smlouva a proběh */
.s2-shrnuti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;
  margin-top:clamp(14px,2vw,20px)}
@media(max-width:600px){.s2-shrnuti{grid-template-columns:1fr}}
.s2-shrnuti div{border:1px solid var(--s-line);border-radius:var(--s-r);
  padding:clamp(11px,1.2vw,15px);background:var(--s-paper)}
.s2-shrnuti b{display:block;font-family:var(--font-display,inherit);font-weight:700;
  font-size:clamp(.92rem,1.15vw,1.05rem);color:var(--s-ink);font-variant-numeric:tabular-nums;
  white-space:nowrap;letter-spacing:-.025em}
.s2-shrnuti span{display:block;margin-top:.3em;font-size:.71rem;color:var(--s-mute);line-height:1.45;text-wrap:pretty}

/* značka u čísel, která model označuje jako zatím neověřená */
[data-provisional]{position:relative}
[data-provisional]::after{content:"*";color:var(--s-ink2);font-weight:700;
  margin-left:.12em;font-size:.62em;vertical-align:super}
.s2-pozn{margin-top:clamp(12px,1.6vw,18px);padding-top:.9em;border-top:1px solid var(--s-line);
  font-size:.75rem;line-height:1.55;color:var(--s-mute)}
.s2-pozn b{color:var(--s-ink2);font-weight:600}

/* ---------- benefity ---------- */
.s2-ben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.4vw,18px)}
@media(max-width:900px){.s2-ben{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.s2-ben{grid-template-columns:1fr}}
.s2-ben article{background:var(--s-paper);border:1px solid var(--s-line);
  border-radius:var(--s-r);padding:clamp(16px,1.9vw,24px)}
.s2-ben h3{font-size:clamp(1rem,1.3vw,1.15rem);margin:0 0 .45em;color:var(--s-ink)}
.s2-ben p{margin:0;font-size:.86rem;line-height:1.55;color:var(--s-mute)}

/* ---------- závěr ---------- */
.s2-cta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
@media(max-width:800px){.s2-cta{grid-template-columns:1fr}}
.s2-cta a{display:block;padding:clamp(16px,1.9vw,24px);border-radius:var(--s-r);
  background:var(--s-paper);border:1px solid var(--s-line);
  transition:border-color var(--s-t) var(--s-ease),transform var(--s-t) var(--s-ease)}
.s2-cta a:hover{border-color:var(--s-pink);transform:translateY(-2px)}
.s2-cta b{display:block;font-size:1.02rem;color:var(--s-ink);margin-bottom:.3em}
.s2-cta span{font-size:.85rem;color:var(--s-mute);line-height:1.5}

/* ---------- drobnosti ---------- */
/* BARVU TADY NENASTAVUJI SCHVÁLNĚ. Tahle věta stojí dvakrát: jednou
   v konfigurátoru na světlé ploše a jednou v závěru, který má
   ve styles.css „#talk{color:#fff}". Když jsem jí dal svůj snímek
   --s-ink2 (skoro černá, pořízený na světlé ploše), byla v závěru
   černá na černém a vypadalo to, že se nevykreslila — vidět zbyla jen
   růžová část a ta pak působila, že vyskočila stranou.
   Dědí se tedy barva plochy: na světlé tmavý text, na tmavé bílý. */
.s2-vse{margin-top:clamp(14px,2vw,22px);font-weight:700;
  font-family:var(--font-display,inherit);letter-spacing:-.02em;
  font-size:clamp(1.5rem,2.2vw,1.9rem);line-height:1.25;
  max-width:34ch;text-wrap:balance}
/* V závěru stojí věta uprostřed — omezená šířka a text-wrap:balance
   drží zlom tak, aby růžový konec nezůstal sám na řádku. */
#talk .s2-vse{margin-inline:auto;text-align:center}
.s2-vse span{color:var(--s-pink)}
html[data-model="chyba"] .s2-cena b::after{content:"—"}

@media(prefers-reduced-motion:reduce){
  .s2-var .var,.s2-cta a,.s2-radek::before{transition:none}
}

/* ---------- laky ---------- */
.s2-laky{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(10px,1.4vw,14px)}
.s2-laky button{display:inline-flex;align-items:center;gap:.5em;cursor:pointer;font:inherit;
  font-size:.78rem;font-weight:600;color:var(--s-mute);padding:.4em .8em .4em .45em;
  background:var(--s-paper);border:1px solid var(--s-line);border-radius:var(--r-pill,999px);
  transition:border-color var(--s-t) var(--s-ease),color var(--s-t) var(--s-ease)}
.s2-laky button i{width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(11,12,14,.14);display:block}
.s2-laky button[data-on]{border-color:var(--s-pink);color:var(--s-ink)}
.s2-laky button:hover{color:var(--s-ink)}

/* ---------- varování, když nejsme nejlevnější ---------- */
.s2-varovani{margin-top:clamp(14px,2vw,20px);padding:clamp(13px,1.5vw,18px);
  border-radius:var(--s-r);background:var(--s-paper2);
  border:1px solid var(--s-line);border-left:3px solid var(--s-ink2);
  font-size:.88rem;line-height:1.6;color:var(--s-mute)}
.s2-varovani b{color:var(--s-ink2);font-weight:600}
.s2-radek--nevyhra{border-color:var(--s-line);box-shadow:none}
.s2-radek--nevyhra .kolik{color:var(--s-ink2)}
.s2-radek--nevyhra::after{background:var(--s-mute)}

/* ---------- konfigurátor se musí vejít na obrazovku ----------
   Pravidlo 2 z přejímky vzhledu: první sekce nesmí přerůst okno.
   Výška se bere z rozvržení, ne z ubírání obsahu — obrázek dostane
   strop podle výšky okna, popisky jdou na jeden řádek a vzduch kolem
   nadpisu se krátí jen na nízkých oknech. */
#configure{padding-block:clamp(74px,9vh,104px) clamp(20px,3vh,40px)}
#configure .sec-head{margin-bottom:clamp(14px,2.2vh,26px)}
#configure .sec-head .h{font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.05}
#configure .sec-head .lead{margin-top:.45em;max-width:46ch}

.s2-scena img{max-height:min(34vh,330px);object-fit:contain;background:var(--s-paper2)}
.s2-param div{padding:clamp(9px,1vw,13px)}
.s2-param b{font-size:clamp(.95rem,1.25vw,1.12rem)}
.s2-param span{font-size:.7rem;margin-top:.25em}
.s2-var .var span{padding:.45em .7em .55em;font-size:.74rem}
.s2-cena b{font-size:clamp(2.6rem,6vw,4.6rem)}
.s2-vse{font-size:clamp(1.25rem,1.9vw,1.6rem)}

@media(min-width:901px) and (max-height:1000px){
  #configure{padding-block:clamp(64px,8vh,88px) clamp(16px,2.4vh,30px)}
  #configure .sec-head{margin-bottom:clamp(10px,1.6vh,18px)}
  #configure .sec-head .h{font-size:clamp(1.6rem,2.9vw,2.2rem)}
  #configure .sec-head .lead{font-size:.94rem}
  .s2-scena img{max-height:min(27vh,250px)}
  .s2-cena b{font-size:clamp(2.4rem,4.6vw,3.6rem)}
  .s2-cena .lab{font-size:.84rem;margin-top:.35em}
  .s2-prep{margin-bottom:clamp(12px,1.8vh,18px)}
  .s2-vse{font-size:clamp(1.2rem,1.7vw,1.45rem);margin-top:clamp(10px,1.4vh,16px)}
  .s2-param{margin-top:10px}
  .s2-var{margin-top:10px}
  .s2-laky{margin-top:9px}
}

/* Ještě těsněji na nízkých oknech: obrázek vozu i karty variant dostanou
   pevný strop výšky a popisky jdou na jeden řádek. Obsah zůstává celý —
   krátí se jen místo kolem něj. */
@media(min-width:901px) and (max-height:1000px){
  #configure{padding-block:84px clamp(14px,2vh,24px)}
  #configure .sec-head{margin-bottom:clamp(8px,1.2vh,14px)}
  #configure .sec-head .lead{font-size:.9rem;margin-top:.35em}
  .s2-scena img{max-height:min(22vh,200px)}
  .s2-param div{padding:8px 10px}
  .s2-param b{font-size:1rem}
  .s2-param span{font-size:.66rem;line-height:1.25;margin-top:.2em}
  .s2-var .var img{height:58px;object-fit:cover;object-position:50% 62%}
  .s2-var .var span{padding:.35em .6em .45em;font-size:.7rem}
  .s2-laky button{font-size:.72rem;padding:.3em .7em .3em .35em}
  .s2-laky button i{width:15px;height:15px}
  .s2-cena b{font-size:clamp(2.2rem,4vw,3.1rem)}
}

/* Nejnižší okna, se kterými přejímka počítá (720 px): sekce se musí
   vejít i tam. Nic z ní nemizí — jen se scéna a karty srazí na míru,
   kterou to okno unese. */
@media(min-width:901px) and (max-height:760px){
  #configure{padding-block:82px 12px}
  #configure .sec-head .h{font-size:clamp(1.5rem,2.4vw,1.95rem)}
  #configure .sec-head .lead{font-size:.86rem}
  #configure .sec-head{margin-bottom:8px}
  .s2-scena img{max-height:min(30vh,220px)}
  .s2-param div{padding:7px 9px}
  .s2-param b{font-size:.94rem}
  .s2-param span{font-size:.63rem}
  .s2-var .var img{height:48px}
  .s2-cena b{font-size:clamp(2rem,3.4vw,2.6rem)}
  .s2-cena .lab{font-size:.78rem}
  .s2-vse{font-size:clamp(1.1rem,1.5vw,1.3rem)}
  .s2-prep button{padding:.5em 1em}
}

/* ---------- čitelnost drobného textu ----------
   Pravidlo projektu: běžný text nikdy pod 15 px. Delší popisky proto
   dorostly, krátké štítky zůstávají malé (přejímka hlídá text delší
   než třicet znaků). */
.s2-pozn{font-size:.94rem;line-height:1.6}
.s2-cta span{font-size:.95rem}
.s2-ben p{font-size:.95rem}
.s2-varovani{font-size:.95rem}
.s2-uspora{font-size:.95rem}
.s2-hvezda{display:block;margin-top:.2em;font-size:.7rem;color:var(--s-mute);line-height:1.3}

/* Dotykový cíl v liště má mít 24 px. Platí jen pro stránky, které
   načítají tenhle soubor — do sdílené navigace se tím nesahá. */
.nav .nav-links a{padding-block:2px}

/* ---------- nadpisy, které jsem přejmenoval z h4 na h3 ----------
   Pořadí nadpisů h2 → h4 přeskakovalo stupeň, tak jsou z nich h3.
   Vzhled ale visel na selektoru .tsp h4 / .foot-col h4 ve sdíleném
   souboru, do kterého psát nesmím — tady se tedy přenáší, aby po
   přejmenování vypadaly stejně jako dřív. */
/* Barvu textu v téhle sekci nedělá token, ale kabat.css pravidlem
   „#specs .h, #specs dd, #specs h4 → #F4F4F2". Přejmenováním h4 na h3
   jsem z toho pravidlo vypadl a nadpisy zčernaly na černém (naměřeno
   1,05 : 1). Doplňuji tedy tutéž barvu pro h3; do kabat.css psát nesmím. */
.foot-col h3{font-family:var(--font-text,inherit);font-size:var(--fs-label,.72rem);
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#63636A);font-weight:600;
  margin:0 0 1rem}

/* ---------- drobný text, který ještě zbýval pod 15 px ---------- */
.s2-cena .lab{font-size:.96rem}
#configure .sec-head .lead{font-size:.96rem}
.foot-bottom span{font-size:.95rem}

/* ---------- obsah nesmí poskakovat, než dorazí model ----------
   Místa pro čísla jsou prázdná a plní se z JSONu. Bez rezervy se
   rozvržení po načtení posune (přejímka to měří jako 0,11).
   Karty proto mají dopředu výšku, kterou budou mít i s obsahem. */
.s2-param div{min-height:96px}
.s2-param--text b{min-height:3.9em}
.s2-radek{min-height:104px}
.s2-shrnuti div{min-height:96px}
.s2-cena b{min-height:1em}


/* ---------- odhalování nesmí rozhodovat o čitelnosti ----------
   Sdílený styles.css dává „[data-reveal] { opacity: 0 }" a zpátky to
   zapíná JavaScript. Když se skript nenačte nebo spadne, zůstane
   obsah trvale neviditelný — a to je u textu, který nese sdělení,
   moc velká sázka.

   Na téhle stránce je proto výchozí stav VIDITELNÝ a animace jen
   přidává pohyb: nájezd je klíčovými snímky, které běží až po přidání
   .in, a průhlednost se v nich vůbec nemění. Bez skriptu se nic
   nestane a všechno je čitelné. */
.s2 [data-reveal]{opacity:1;transform:none}
.js .s2 [data-reveal]{opacity:1}
.js .s2 [data-reveal].in{animation:s2-najezd var(--t-slow,640ms) var(--s-ease) both}
@keyframes s2-najezd{from{transform:translateY(14px)}to{transform:none}}
@media(prefers-reduced-motion:reduce){
  .js .s2 [data-reveal].in{animation:none}
}

/* ---------- plátno s trojrozměrným vozem ----------
   Leží nad renderem ve stejném rámu. Dokud model není načtený, je
   průhledné a vidět je render pod ním; po načtení se render skryje.
   Kurzor napovídá, že se s vozem dá otáčet. */
.s2-scena{position:relative}
.s2-platno{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity .5s var(--s-ease);touch-action:none}
.s2-scena[data-model3d="nacteno"] .s2-platno{opacity:1;cursor:grab}
.s2-scena[data-model3d="nacteno"] .s2-platno:active{cursor:grabbing}
.s2-scena[data-model3d="nacteno"] .s2-nahled{opacity:0}
.s2-scena .s2-nahled{transition:opacity .5s var(--s-ease)}

/* pozvánka, aby bylo poznat, že se dá otáčet — a zároveň to je ta
   věc, kterou se model teprve vyžádá */
.s2-spust{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  z-index:2;border:1px solid var(--s-line);background:rgba(255,255,255,.92);
  color:var(--s-ink2);font:inherit;font-size:.8rem;font-weight:600;
  padding:.45em 1em;border-radius:var(--r-pill,999px);cursor:pointer;
  box-shadow:var(--s-e1);transition:opacity .3s var(--s-ease)}
.s2-spust:hover{color:var(--s-ink)}
.s2-scena[data-model3d="nacitam"] .s2-spust{opacity:.6;pointer-events:none}
.s2-scena[data-model3d="nacteno"] .s2-spust,
.s2-scena:not([data-model3d]) .s2-spust{display:none}
@media(max-width:700px){.s2-spust{display:none}}

/* druhá řada laků je nástavba — odlišená popiskem, ne barvou */
.s2-laky--n{margin-top:6px}
.s2-laky--n::before{content:"Body";align-self:center;margin-right:.2em;
  font-size:.7rem;font-weight:600;color:var(--s-mute)}
.s2-laky:not(.s2-laky--n)::before{content:"Cab";align-self:center;margin-right:.2em;
  font-size:.7rem;font-weight:600;color:var(--s-mute)}

/* ---------- karty plánku ---------- */
/* Nadpis je v úzkém sloupci, takže nesmí mít velikost nadpisu přes
   celou šířku — jinak přeteče do prostředního sloupce a naběhne na
   cenu. Změřeno: při clamp(2.4rem,5vw,4rem) přetékal o 84 px. */
.s2-col--text .eyebrow{display:block;margin-bottom:.6em}
/* Žádné break-word: rozlámalo mi "Configure" na "Configur / e".
   Nadpis se místo toho zmenší, dokud se do sloupce nevejde celý. */
/* POZOR na váhu selektoru: styles.css má #configure h1.h a to je
   ID + prvek + třída, takže obyčejné .s2-col--text .h prohrálo
   a nadpis zůstal 51,84 px — přetékal 71 px za svůj sloupec.
   Na styles.css se nesahá, píše se sem těžší selektor. */
#configure .s2-col--text :is(h1, h2).h{margin:0 0 .55em;
  font-size:clamp(1.5rem,2.15vw,2.15rem);line-height:1.1;hyphens:none}
.s2-col--text .lead{margin:0 0 1.4em;font-size:.95rem}
.s2-col--text .s2-vse{margin-top:1.8em;font-size:.98rem;line-height:1.35}

/* Prostřední sloupec: cena nahoře, vůz vyplní zbytek. */
.s2-col--stred{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px)}
.s2-col--stred .s2-scena{margin:0;width:100%}
.s2-col--stred .s2-scena img{width:100%;height:auto}
.s2-cfg{align-items:start}

.s2-karta{background:var(--s-paper);border:1px solid var(--s-line);
  border-radius:var(--s-r);padding:clamp(14px,1.6vw,20px)}
.s2-karta + .s2-karta{margin-top:clamp(12px,1.5vw,18px)}
.s2-karta-h{margin:0 0 .8em;font-family:var(--font-display,inherit);font-weight:700;
  font-size:clamp(1rem,1.35vw,1.18rem);letter-spacing:-.01em;color:var(--s-ink)}
.s2-karta-l{margin:1.1em 0 .5em;font-size:.68rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--s-mute)}
.s2-karta-l:first-of-type{margin-top:0}
.s2-karta-p{margin:1em 0 0;font-size:.76rem;line-height:1.45;color:var(--s-mute)}
.s2-karta-btn{margin-top:1em;width:100%;justify-content:center}

/* Nástavby jsou svislý seznam, ne řada dlaždic — v plánku jsou čtyři
   řádky pod sebou, každý s náhledem, názvem a kolečkem. */
.s2-var{grid-template-columns:1fr;gap:8px}
.s2-var .var{display:grid;grid-template-columns:58px minmax(0,1fr) 18px;
  align-items:center;gap:.75em;padding:.45em .6em}
.s2-var .var img{width:58px;height:auto;border-radius:5px}
.s2-var .var span{padding:0;font-size:.82rem;line-height:1.25}
.s2-var .var::after{content:"";width:16px;height:16px;border-radius:50%;
  border:2px solid var(--s-line);transition:border-color var(--s-t) var(--s-ease),
  background var(--s-t) var(--s-ease)}
.s2-var .var[data-on]::after{border-color:var(--s-pink);background:var(--s-pink);
  box-shadow:inset 0 0 0 3px var(--s-paper)}
.s2-var .var:hover{transform:none}

/* parametry v kartě: dva a dva */
.s2-col--karta .s2-param{grid-template-columns:repeat(2,minmax(0,1fr))}

/* cena je největší věc v heru a v plánku má nad sebou popisek */
.s2-cena .lab--nad{display:block;margin:0 0 .35em;font-size:.8rem;color:var(--s-ink2)}
.s2-cena b{font-size:clamp(3.1rem,6.6vw,5.4rem)}

/* ---------- pás ekonomiky: karty vedle sebe ---------- */
.s2-kalk{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
.s2-kalk > .s2-karta{align-self:stretch}
/* Tři technologie vedle sebe, aby se daly srovnat okem, jak to má plánek. */
.s2-stitek{flex-direction:row;align-items:stretch}
.s2-stitek > *{flex:1 1 0;min-width:0}
@media(max-width:760px){.s2-stitek{flex-direction:column}}
.s2-probeh{margin:clamp(12px,1.6vw,18px) 0 0;padding:.75em .9em;
  border-radius:var(--s-r);background:var(--s-alt,rgba(0,0,0,.03));
  font-size:.8rem;color:var(--s-mute)}
.s2-probeh b{color:var(--s-ink);font-variant-numeric:tabular-nums}

/* Laky v kartě: jedna řádka, ať se nezalamují na dva pruhy. */
/* Laky: jen kolečka s popiskem pod kartou, ať se nic neřeže o okraj. */
.s2-col--karta .s2-laky{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.s2-col--karta .s2-laky .lak{flex:0 0 auto;padding:.3em .55em;font-size:.72rem;
  white-space:nowrap}

/* Parametry v kartě: nižší dlaždice, ať karta neroste do metru. */
.s2-col--karta .s2-param{gap:8px}
.s2-col--karta .s2-param div{padding:.65em .7em}
.s2-col--karta .s2-param b{font-size:clamp(1rem,1.5vw,1.25rem)}
.s2-col--karta .s2-param--text b{font-size:.9rem}

/* Sekce začíná pod lepící hlavičkou — bez toho se popisek nad cenou
   schová za horní pruh. Změřeno: 88 px vysoká hlavička. */
#configure{padding-top:clamp(96px,9vh,132px)}
/* Vůz vyplní prostřední sloupec, ne aby plaval v prázdnu. */
/* Prostřední sloupec má sahat stejně hluboko jako karta vpravo,
   jinak zůstane pod vozem prázdná plocha. Poměr je proto vysoký
   a vůz se do něj vejde celý (contain), ne ustřižený. */
/* Rendery vozu mají bílé pozadí, takže i karta musí být bílá —
   s přechodem pod nimi svítil bílý obdélník. */
.s2-col--stred .s2-scena{aspect-ratio:1550/1015;display:flex;
  align-items:center;justify-content:center;background:#fff;
  border:1px solid var(--s-line);border-radius:var(--s-r);
  overflow:hidden;padding:clamp(8px,1.4vw,20px)}
.s2-col--stred .s2-scena img,
.s2-col--stred .s2-scena canvas{width:100%;height:100%;object-fit:contain}

/* Tři technologie vedle sebe znamenají třetinovou šířku, ale velikost
   čísla zůstala z doby, kdy stály pod sebou — €1,383 se ořízlo na
   €1,38. Cena useknutá uprostřed je na investorské stránce to
   nejhorší, co se může stát, takže se číslo zmenší a nikdy nepřeteče. */
.s2-stitek{gap:8px}
.s2-radek{min-width:0;padding:clamp(10px,1.1vw,14px) clamp(10px,1.1vw,14px) clamp(13px,1.4vw,18px)}
.s2-radek .kdo{font-size:.68rem;letter-spacing:.06em}
.s2-radek .kolik{font-size:clamp(.95rem,1.45vw,1.35rem);white-space:nowrap;
  overflow-wrap:normal;letter-spacing:-.03em}
.s2-radek--nas .kolik{font-size:clamp(1.05rem,1.7vw,1.6rem)}
.s2-radek .za{font-size:.68rem;line-height:1.3}
@media(max-width:1180px){
  .s2-radek .kolik{font-size:clamp(1rem,2.4vw,1.4rem)}
  .s2-radek--nas .kolik{font-size:clamp(1.1rem,2.7vw,1.6rem)}
}

/* Tři dlaždice pod slidery jsou úzké a „4,400" se do nich nevešlo
   o čtyři pixely. Číslo se zmenší, dlaždice se nezúží. */
/* Velikost čísla v dlaždicích nechávám, jak ji vyladil code — moje
   zvětšení ji rozbilo. Řeší se šířkou sloupce, ne písmem. */

/* Scéna vozu má být ateliér, ne bílý papír — světlý přechod dá
   vozu okraj a stín pod ním má na čem ležet. */
.s2-col--stred .s2-scena{background:
  radial-gradient(120% 90% at 50% 8%, #FFFFFF 0%, #F4F6F8 55%, #E8EBEF 100%)}
.s2-col--stred .s2-scena canvas{position:absolute;inset:0;width:100%;height:100%}
.s2-col--stred .s2-scena{position:relative}

/* ════════════════════════════════════════════════════════════════
   VZHLED — aby to byla součást domovské, ne cizí stránka
   3. 9. 2026. Návrh stojí v ZPRAVA-SALES-VZHLED.md.

   Tři věci: písmo a barvy z domovské stupnice, střídání světlé
   a tmavé plochy jako na domovské, a každá sekce na jednu obrazovku.
   ════════════════════════════════════════════════════════════════ */

/* ---------- PÍSMO: domácí stupnice, žádná vlastní ----------
   Dosud tu bylo devatenáct vlastních `clamp()` v remech. Nadpisy
   i čísla teď berou stejné stupně jako domovská. */
.s2 .s2-karta-h,
.s2 .s2-ben article h3 { font-size: var(--fs-h3); }
.s2 .s2-karta-l,
.s2 .s2-radek .kdo { font-size: var(--fs-label); letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500; color: var(--s-mute); }
.s2 .s2-karta-p,
.s2 .s2-pozn { font-size: var(--fs-xs); line-height: 1.45; color: var(--s-mute); }
.s2 .s2-param span,
.s2 .s2-radek .za,
.s2 .s2-meze { font-size: var(--fs-label); color: var(--s-mute); }

/* Cena je jediná věc na stránce v displejovém stupni — a proto je
   větší než nadpis vedle, aniž by se to muselo vynucovat. */
.s2 .s2-cena b { font-size: var(--fs-display); }
.s2 .s2-cena .lab { font-size: var(--fs-sm); }
/* Nadpis konfigurátoru si velikost NEBERE z --fs-h1: v úzkém levém
   sloupci by přetekl o 71 px do sloupce s cenou (styles.css má
   #configure h1.h, což je těžší selektor než .s2-col--text .h).
   Velikost drží pravidlo výš, tady se jen sjednotí řez a prostrkání. */
.s2 #configure .s2-col--text :is(h1, h2).h { letter-spacing: -.03em; }

/* ---------- ① KONFIGURÁTOR ----------
   Vůz je na téhle obrazovce hlavní, tak dostane nejvíc místa:
   prostřední sloupec je nejširší a scéna má pevný poměr stran,
   ne výšku podle obrázku. */
.s2 .s2-cfg {
  grid-template-columns: minmax(0,.72fr) minmax(0,1.34fr) minmax(0,.78fr);
  gap: clamp(20px, 2.4vw, 44px);
  align-items: start;
}
.s2 .s2-col--text { padding-top: clamp(4px, 1.4vh, 18px); }
.s2 .s2-col--text .lead { color: var(--s-mute); margin-block: var(--m2) var(--m3); }

/* Scéna vozu: světlá kupole jako v konfigurátorech automobilek —
   ne plochá šedá deska. Vůz na ní stojí, ne se v ní vznáší. */
.s2 .s2-scena {
  aspect-ratio: 16 / 10;
  min-height: clamp(220px, 34vh, 420px);
  /* Světlá kupole místo ploché desky — vůz na ní stojí, nevznáší se.
     Střed je bílý, protože statický render má bílé pozadí a jinak by
     mu na kartě byl vidět obdélníkový šev. */
  background:
    radial-gradient(ellipse 116% 88% at 50% 34%,
      #FFFFFF 0%, #FFFFFF 46%, #F2F3F4 74%, #E7E9EB 100%);
  box-shadow: none;
  border: 1px solid var(--s-line);
}
.s2 .s2-scena img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center 46%;
  padding: clamp(6px, 1.4vh, 18px);
  }

/* Přepínače pohledu — pilulka dole uprostřed scény, jako je má
   prohlížeč na ploše. Dokud model neběží, není co přepínat. */
.s2 .s2-pohledy {
  position: absolute; left: 50%; bottom: clamp(8px, 1.6vh, 16px);
  transform: translateX(-50%);
  display: flex; gap: 2px; padding: 4px;
  background: rgba(255,255,255,.86);
  border: 1px solid var(--s-line);
  border-radius: var(--r-tl, 8px);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  opacity: 0; pointer-events: none;
  transition: opacity var(--s-t) var(--s-ease);
}
.s2 .s2-scena[data-model3d="nacteno"] .s2-pohledy { opacity: 1; pointer-events: auto; }
.s2 .s2-pohledy button {
  border: 0; cursor: pointer; font: inherit; font-size: var(--fs-label);
  font-weight: 600; letter-spacing: .04em;
  padding: .55em 1em; border-radius: 5px;
  background: transparent; color: var(--s-mute);
  transition: background var(--s-t) var(--s-ease), color var(--s-t) var(--s-ease);
}
.s2 .s2-pohledy button:hover { color: var(--s-ink); background: rgba(5,5,5,.06); }
.s2 .s2-pohledy button[data-on] { background: var(--s-pink); color: #050505; }

/* Pás pod vozem: čtyři údaje, věta a tlačítko. */
.s2 .s2-pas { margin-top: clamp(10px, 1.6vh, 18px); }
.s2 .s2-pas .s2-param { margin-top: 0; }
.s2 .s2-pas-pod {
  display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: var(--m3); margin-top: clamp(8px, 1.2vh, 14px);
}
.s2 .s2-pas-pod .s2-karta-p { margin: 0; }
.s2 .s2-pas-pod .btn { white-space: nowrap; padding: .7em 1.2em; }

/* Karta nastavení: jeden sloupec voleb, ne mřížka dlaždic. */
.s2 .s2-karta {
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  border-radius: var(--r-karta, 16px);
  box-shadow: none;
  padding: clamp(16px, 2.2vh, 26px);
}
.s2 .s2-karta + .s2-karta { margin-top: clamp(12px, 1.6vh, 20px); }
.s2 .s2-karta-h { margin: 0 0 clamp(10px, 1.4vh, 16px); }
.s2 .s2-karta-l { margin: clamp(12px, 1.6vh, 18px) 0 var(--m1); }
.s2 .s2-karta-l:first-of-type { margin-top: 0; }

/* ---------- ② EKONOMIKA ----------
   Dva vstupy vlevo, tři sloupce srovnání vpravo. Jediné, co má na
   téhle obrazovce křičet, je rozdíl proti naftě. */
.s2 #savings .s2-kalk {
  grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
  gap: clamp(16px, 2vw, 32px);
  align-items: stretch;
}
.s2 #savings .s2-karta { height: 100%; }
.s2 .s2-pole { margin-bottom: clamp(14px, 2.2vh, 26px); }
.s2 .s2-pole label b { font-size: var(--fs-h3); color: var(--s-ink); }

/* Částky přetékaly z karet: text byl 171–192 px široký ve sloupci
   o 121 px a sousední karta ho překryla, takže z „€1,383" se četlo
   „€1,38". Sloupce jsou teď širší a číslo se sází podle šířky
   sloupce, ne podle šířky okna. */
.s2 .s2-stitek { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(8px, 1vw, 14px); }
.s2 .s2-radek { padding: clamp(12px, 1.8vh, 20px) clamp(10px, 1vw, 16px)
  calc(clamp(12px, 1.8vh, 20px) + 5px); container-type: inline-size; }
.s2 .s2-radek .kolik {
  display: block; margin-top: var(--m1);
  font-size: clamp(20px, 15cqw, 34px);
  letter-spacing: -.03em; white-space: nowrap;
}
.s2 .s2-radek--nas .kolik { font-size: clamp(22px, 17cqw, 40px); }
.s2 .s2-radek .za { display: block; margin-top: var(--m1); line-height: 1.3; }

/* Úspora proti naftě je to jediné růžové na téhle obrazovce. */
.s2 .s2-uspora { margin-top: clamp(10px, 1.6vh, 18px);
  padding: clamp(10px, 1.6vh, 18px) clamp(12px, 1.4vw, 20px);
  border-radius: var(--r-karta, 16px); }
.s2 .s2-uspora b { font-size: var(--fs-h2); line-height: 1; }
.s2 .s2-shrnuti { gap: clamp(8px, 1vw, 12px); }
.s2 .s2-probeh { margin-top: clamp(10px, 1.4vh, 16px); font-size: var(--fs-xs); }

/* ---------- ③ PROČ BATTSWAP — tmavá plocha ----------
   Šest důvodů, dvě řady po třech, bez ozdob: růžová čárka, nadpis,
   dvě věty. Karty v řadě mají stejnou výšku. */
.s2 #benefits .s2-ben {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 1.6vw, 28px); align-items: stretch;
}
.s2 #benefits .s2-ben article {
  background: var(--s-uhel-karta);
  border: 1px solid var(--s-uhel-line);
  border-radius: var(--r-karta, 16px);
  padding: clamp(16px, 2.4vh, 28px);
  padding-top: calc(clamp(16px, 2.4vh, 28px) + 10px);
  position: relative;
}
.s2 #benefits .s2-ben article::before {
  content: ""; position: absolute; top: clamp(16px, 2.4vh, 28px); left: clamp(16px, 2.4vh, 28px);
  width: 24px; height: 2px; background: var(--s-pink);
}
.s2 #benefits .s2-ben h3 { margin: 0 0 var(--m2); color: var(--s-uhel-ink); }
.s2 #benefits .s2-ben p { margin: 0; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--s-uhel-mut); }
@media (max-width: 900px) {
  .s2 #benefits .s2-ben { grid-template-columns: 1fr; }
}

/* ---------- ④ TECHNICKÁ DATA — tmavá plocha ----------
   Tři sloupce vedle sebe: vůz s laky, tabulky, kóty. Pod sebou to
   potřebovalo 1333 px a na obrazovku se to nevešlo ani jednou. */
/* Tabulky dostaly celou šířku a čtyři sloupce. Ve třech úzkých
   sloupcích byly 217 px široké, hodnoty se lámaly na dva řádky
   a blok narostl z 309 na 414 px — celá sekce pak potřebovala
   1006 px místo devíti set. */
/* Kóty se sázejí podle šířky sloupce, takže by v širokém okně
   vyrostly do sedmi set pixelů. */
@media (max-width: 1180px) {
}

/* ---------- ⑤ VÝZVA K AKCI — tmavá plocha ---------- */
.s2 #talk .s2-cta { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(12px, 1.4vw, 24px); align-items: stretch; }
.s2 #talk .s2-cta a {
  background: var(--s-uhel-karta);
  border: 1px solid var(--s-uhel-line);
  border-radius: var(--r-karta, 16px);
  padding: clamp(16px, 2.4vh, 28px);
  color: var(--s-uhel-ink); text-decoration: none;
  transition: border-color var(--s-t) var(--s-ease),
              background var(--s-t) var(--s-ease);
}
.s2 #talk .s2-cta a:hover { border-color: var(--s-pink); background: rgba(244,244,242,.08); }
.s2 #talk .s2-cta b { display: block; font-family: 'Panchang','PanchangVariable',Georgia,serif;
  font-weight: 400; letter-spacing: -.03em; font-size: var(--fs-h3); margin-bottom: var(--m2);
  /* Barva tu musí stát: bez ní se zdědil inkoust ze světlé varianty
     a nadpisy karet byly na uhlu černé na černém. */
  color: var(--s-uhel-ink); }
.s2 #talk .s2-cta span { display: block; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--s-uhel-mut); }
.s2 #talk .s2-vse { margin-top: clamp(18px, 3vh, 40px); text-align: center;
  font-family: 'Panchang','PanchangVariable',Georgia,serif; font-weight: 400;
  letter-spacing: -.03em; font-size: var(--fs-h3); color: var(--s-uhel-ink); }
.s2 #talk .s2-vse span { color: var(--s-pink); }
@media (max-width: 900px) {
  .s2 #talk .s2-cta { grid-template-columns: 1fr; }
}

/* Sekce nesmí zdědit pevnou výšku odjinud — pravidlo „jedna sekce,
   jedna obrazovka" má přednost před min-height ze styles.css. */

/* ---------- doladění výšky: aby každá sekce sedla na obrazovku ----------
   Naměřeno na 1440 × 900: #benefits potřeboval 953 px a #specs 1041.
   Nezmenšuje se údaj, zmenšuje se rám kolem něj. */

/* Hlavička sekce zabírala v pásu důvodů 378 px, protože nadpis
   i perex stály pod sebou přes celou šířku. Vedle sebe je to
   polovina a čte se to stejně. */
.s2 #benefits .sec-head, .s2 #talk .sec-head {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: clamp(16px, 2vw, 40px); align-items: end; max-width: none;
  margin-bottom: clamp(16px, 2.6vh, 32px);
}
.s2 #benefits .sec-head .eyebrow, .s2 #talk .sec-head .eyebrow { grid-column: 1; }
.s2 #benefits .sec-head .h, .s2 #talk .sec-head .h { grid-column: 1; margin: var(--m1) 0 0; }
.s2 #benefits .sec-head .lead, .s2 #talk .sec-head .lead {
  grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: end;
}
@media (max-width: 900px) {
  .s2 #benefits .sec-head, .s2 #talk .sec-head { grid-template-columns: 1fr; }
  .s2 #benefits .sec-head .lead, .s2 #talk .sec-head .lead { grid-column: 1; grid-row: auto; }
}

/* Tabulky technických dat: řádky měly 0,62 em nahoře i dole, což je
   při 24 řádcích přes 300 px jen na mezerách. */

/* Přepínač obchodního modelu se v úzkém sloupci lámal na dva řádky. */
.s2 .s2-prep { margin-bottom: clamp(14px, 2vh, 26px); }
.s2 .s2-prep button { white-space: nowrap; padding: .62em .95em; font-size: var(--fs-sm); }
.s2 .s2-col--text .eyebrow { white-space: nowrap; letter-spacing: .1em; }

/* „Turn it around" je ovládací prvek, ne karta přes vůz. Když stál
   uprostřed scény, roztáhl se na bílý blok 114 × 188 px a ležel
   modelu přes kabinu. Patří k dolní hraně, na totéž místo jako
   přepínače pohledu — nikdy tam nejsou obě najednou, protože
   tlačítko po načtení modelu mizí. */
.s2 .s2-spust {
  position: absolute; left: 50%; top: auto;
  bottom: clamp(8px, 1.6vh, 16px);
  transform: translateX(-50%);
  width: auto; max-width: calc(100% - 24px);
  white-space: nowrap; line-height: 1.2;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .04em;
  padding: .6em 1.1em;
  border: 1px solid var(--s-line);
  border-radius: var(--r-tl, 8px);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: none;
  color: var(--s-mute);
}
.s2 .s2-spust:hover { color: var(--s-ink); border-color: var(--s-pink); }
.s2 .s2-scena[data-model3d="nacteno"] .s2-spust,
.s2 .s2-scena[data-model3d="nacitam"] .s2-spust { opacity: 0; pointer-events: none; }

/* Pás důvodů byl o čtyřicet pixelů vyšší, než kolik zbude pod lištou.
   Ubírá se rám, ne text. */
.s2 #benefits .s2-ben article { padding: clamp(13px, 1.9vh, 22px); padding-top: calc(clamp(13px, 1.9vh, 22px) + 9px); }
.s2 #benefits .s2-ben article::before { top: clamp(13px, 1.9vh, 22px); left: clamp(13px, 1.9vh, 22px); }
.s2 #benefits .s2-ben h3 { margin-bottom: var(--m1); }
.s2 #benefits .s2-ben { gap: clamp(10px, 1.2vw, 20px); }

/* ---------- technická data na tmavé ploše ----------
   Kóty i fotka měly bílou kartu ze styles.css, a na uhlu z toho byly
   dva svítící obdélníky; tlačítko ke stažení v nich navíc roztáhlo
   svou šipku přes půl karty. */

/* Fotka vozu s laky: bez bílé karty, jen obraz a pod ním tečky. */

/* Tabulky: hodnota má přednost před popiskem, ať se neláme na dva řádky. */

/* ---------- úzká okna ----------
   Tři sloupce srovnání se na 390 px nevejdou: karta má vnitřní
   odsazení a verzálkový popisek „REGULAR ELECTRIC" přetekl o deset
   pixelů, takže se celá stránka dala posunout do strany. */
@media (max-width: 760px) {
  .s2 .s2-stitek { grid-template-columns: 1fr; }
  .s2 .s2-radek .kolik { font-size: clamp(24px, 9vw, 34px); }
  .s2 .s2-pas-pod { grid-template-columns: 1fr; }
  .s2 .s2-pas-pod .btn { width: 100%; justify-content: center; }
  .s2 .s2-col--text .eyebrow { white-space: normal; }
  /* Poměr stran spolu s minimální výškou si na 390 px vynutil šířku
     459 px a odsunul celou stránku do strany. Na úzkém okně tedy
     výška vyjde z šířky, ne naopak. */
  .s2 .s2-scena { min-height: 0; }
}

/* Mobilní zlomy pro mřížky, které tahle vrstva přepsala. Bez nich
   držel konfigurátor tři sloupce i na 390 px a stránka se dala
   posunout do strany o 47 px. */
@media (max-width: 1180px) {
  .s2 .s2-cfg { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .s2 .s2-col--karta { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .s2 .s2-cfg { grid-template-columns: 1fr; }
  .s2 .s2-col--karta { grid-column: auto; }
  .s2 #savings .s2-kalk { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   OPRAVY PROTI PLÁNKU — 4. 9. 2026
   ════════════════════════════════════════════════════════════════ */

/* ① BARVY: jedna řada čtyř vzorků, která se nezalomí.
   Dvě řady po dvou byly čtyři řádky voleb; plánek má jednu řadu. */
.s2 .s2-laky {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(4px, .6vw, 10px);
}
.s2 .s2-laky button {
  flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 4px; text-align: center; min-width: 0;
  border: 1px solid transparent; background: transparent;
  font-size: var(--fs-label);
}
.s2 .s2-laky button i { width: 26px; height: 26px; box-shadow: inset 0 0 0 1px rgba(5,5,5,.14); }
.s2 .s2-laky button span { display: block; line-height: 1.2; }
.s2 .s2-laky button[data-on] {
  border-color: var(--s-pink); border-radius: var(--r-tl, 8px); background: transparent;
}
.s2 .s2-laky button[data-on] i { box-shadow: 0 0 0 2px var(--s-pink); }

/* ② DLAŽDICE PARAMETRŮ přes celou šířku konfigurátoru. */
.s2 .s2-cfg .s2-pas { grid-column: 1 / -1; margin-top: clamp(12px, 2vh, 24px); }
.s2 .s2-pas .s2-param { grid-template-columns: repeat(4, minmax(0,1fr)); }

/* ④ PÁS DŮVODŮ s fotkami: šest karet v jedné řadě, jako v plánku.
   Fotka nahoře, pod ní nadpis a dvě věty. */
.s2 #benefits .s2-ben { grid-template-columns: repeat(6, minmax(0,1fr)); }
.s2 #benefits .s2-ben article {
  padding: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.s2 #benefits .s2-ben article::before { content: none; }
.s2 #benefits .s2-ben img {
  /* height:auto musí být napsané: atribut height="400" v HTML je
     prezentační pokyn a bez něj poměr stran prohrál — fotka měla
     400 px a karta 674. */
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 11; object-fit: cover;
  border-bottom: 1px solid var(--s-uhel-line);
}
.s2 #benefits .s2-ben h3 {
  margin: clamp(10px, 1.6vh, 16px) clamp(10px, 1vw, 16px) var(--m1);
  font-size: clamp(15px, 1.15vw, 19px); line-height: 1.15;
}
.s2 #benefits .s2-ben p {
  margin: 0 clamp(10px, 1vw, 16px) clamp(12px, 1.8vh, 18px);
  font-size: var(--fs-xs); line-height: 1.4;
}
@media (max-width: 1180px) {
  .s2 #benefits .s2-ben { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .s2 #benefits .s2-ben { grid-template-columns: 1fr; }
}

/* Pravidlo o výšce sekcí; dřív stálo na řádku, kde se jmenoval
   i #specs, a odešlo s ním do parked. */
.s2 #configure, .s2 #savings, .s2 #benefits, .s2 #talk { min-height: 100svh; }

/* Popisek „Cab" před vzorky byl potřeba, dokud byly řady dvě. S jednou
   řadou jen opakuje nadpis VEHICLE COLOUR a v mřížce zabral pátou
   buňku, takže se čtyři vzorky zalomily na dva řádky (163 px). */
.s2 .s2-laky::before { content: none; }

/* Zbytek konfigurátoru o kousek těsněji — na 1440 × 900 chybělo 88 px. */
.s2 #configure .s2-karta-p { margin-top: clamp(10px, 1.4vh, 16px); }
.s2 .s2-pas-pod { margin-top: clamp(6px, 1vh, 12px); }
.s2 .s2-pas .s2-param div { padding: clamp(9px, 1.2vh, 14px) clamp(10px, 1vw, 15px); }

/* Posledních dvanáct pixelů konfigurátoru na nízkém okně: scéna vozu
   se o kousek stáhne, údaje ani volby se nezmenšují. */
@media (max-height: 940px) {
  .s2 .s2-scena { min-height: clamp(200px, 30vh, 380px); aspect-ratio: 16 / 9; }
  .s2 .s2-cfg { gap: clamp(14px, 1.8vw, 32px); }
  .s2 .s2-karta { padding: clamp(12px, 1.6vh, 20px); }
  .s2 .s2-var { gap: 6px; margin-top: 8px; }
  .s2 .s2-var .var img { height: 28px; object-fit: cover; }
  .s2 .s2-laky button { padding: 6px 4px; }
  .s2 .s2-laky button i { width: 22px; height: 22px; }
}

/* Statický render má zapečené bílé pozadí a na světlé kupoli z něj byl
   vidět obdélník; násobení barev ho neschovalo. Dokud v kartě leží
   render, je tedy podklad prostě bílý — kupole se rozsvítí až pod
   trojrozměrným vozem, který žádné vlastní pozadí nemá. */
.s2 .s2-scena { background: #FFFFFF; }
.s2 .s2-scena[data-model3d="nacteno"] {
  background: radial-gradient(ellipse 116% 88% at 50% 34%,
    #FFFFFF 0%, #FFFFFF 46%, #F2F3F4 74%, #E7E9EB 100%);
}

/* Ten obdélník kolem renderu nebyl podklad scény, ale vlastní pozadí
   obrázku (#F0F0F0), které se u `object-fit: contain` vykreslí i tam,
   kde už fotka není. Scéna si podklad drží sama. */
.s2 .s2-scena img { background: transparent; }

/* Render se posadí doprostřed scény a šířku si bere z ní. `inset:0`
   s výškou 100 % tu nepomohlo — scéna je pružný kontejner s vnitřním
   odsazením a obrázku vycházelo 198 px u horní hrany, pod ním prázdno.
   Tohle je jednoznačné: střed scény, šířka bez okrajů, výška z poměru. */
.s2 .s2-scena .s2-nahled {
  inset: auto; top: calc(50% - 22px); left: 50%;
  transform: translate(-50%, -50%);
  /* Nad dolní hranou zůstává pruh pro tlačítko a přepínače pohledu,
     ať neleží vozu na kolech. */
  width: calc(100% - 24px); height: auto; max-height: calc(100% - 60px);
  object-fit: contain; padding: 0;
}

/* ---------- tmavé plochy (zpátky bez #specs) ----------
   Tahle pravidla platila pro tři sekce najednou a odešla do parked
   spolu s technickými daty, protože se v jejich selektoru jmenoval
   i #specs. Pás důvodů pak zbělal a text na něm zmizel. */
.s2 #benefits, .s2 #talk {
  background: var(--s-uhel);
  color: var(--s-uhel-ink);
}
.s2 #benefits .h, .s2 #talk .h { color: var(--s-uhel-ink); }
.s2 #benefits .lead, .s2 #talk .lead,
.s2 #benefits .eyebrow, .s2 #talk .eyebrow { color: var(--s-uhel-mut); }

/* Volby nástavby se při najetí myší nesmí hýbat. Zvedaly se o 2 px
   a přejímka na poslední z nich (Pickup tipper) padala: Playwright
   čeká, až prvek stojí, a ten se pod kurzorem pořád posouval —
   „Page.click: Timeout 30000ms exceeded". Místo posunu se mění
   okraj, což je i klidnější na čtení. */
.s2 .s2-var .var { transition: border-color var(--s-t) var(--s-ease),
                               box-shadow var(--s-t) var(--s-ease); }
.s2 .s2-var .var:hover { transform: none; border-color: var(--s-pink); }

/* „You drive, we care." je růžové na světlém a mělo 15,7 px, tedy
   3,09 : 1 při normě 4,5. Design systém říká: na světlém pozadí
   růžová nikdy pod 24 px — pod tou hranicí se mění VELIKOST, ne
   barva. Slogan tedy jde na stupeň --fs-h3 (24 px), kde platí
   norma 3 : 1 pro velký tučný text. */
.s2 .s2-vse span { font-size: var(--fs-h3); line-height: 1.15; }
.s2 .s2-col--text .s2-vse { font-size: var(--fs-h3); line-height: 1.15; }

/* ---------- označení vybrané nástavby ----------
   Vybraná dlaždice měla jen růžový rámeček o jednom pixelu na bílé
   kartě — přepínalo se to správně (data-on i aria-checked skáčou
   s klikem), ale na první pohled to nebylo vidět. Teď má vybraná
   dlaždice dvojitý rámeček, světle růžový podklad a plné kolečko. */
.s2 .s2-var .var { position: relative; border-width: 2px;
  border-color: transparent; background: var(--s-paper); }
.s2 .s2-var .var[data-on] {
  border-color: var(--s-pink);
  background: color-mix(in srgb, var(--s-pink) 7%, #FFFFFF);
  box-shadow: 0 0 0 1px var(--s-pink) inset;
}
.s2 .s2-var .var[data-on] span { color: var(--s-ink); font-weight: 700; }
.s2 .s2-var .var::after {
  content: ""; position: absolute; right: 10px; bottom: 10px;
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--s-line); background: #FFFFFF;
}
.s2 .s2-var .var[data-on]::after {
  border-color: var(--s-pink);
  box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 14px var(--s-pink);
}

/* ---------- pás důvodů: světlý, jako konfigurátor ----------
   Michaela 4. 9.: sekce má být světlá jako zbytek stránky, ne černá,
   a fotky spolu musí ladit. Fotky jsou proto jedna sada — vůz
   v provozu, všechny reálné, jedna paleta (bílá, šedá, denní světlo).
   Plocha je bílá jako konfigurátor, takže stránka drží jeden světlý
   blok od začátku až po výzvu k akci. */
.s2 #benefits { background: var(--s-paper); color: var(--s-ink); }
.s2 #benefits .h { color: var(--s-ink); }
.s2 #benefits .lead, .s2 #benefits .eyebrow { color: var(--s-mute); }
.s2 #benefits .s2-ben article {
  background: var(--s-paper);
  border: 1px solid var(--s-line);
  box-shadow: none;
}
.s2 #benefits .s2-ben img { border-bottom: 1px solid var(--s-line); }
.s2 #benefits .s2-ben h3 { color: var(--s-ink); }
.s2 #benefits .s2-ben p { color: var(--s-mute); }

/* Označení vybraného laku — stejné jako u nástavby: rámeček, podklad,
   a je vidět na první pohled. */
.s2 .s2-laky button[data-on],
.s2 .s2-laky button.je { border-color: var(--s-pink); border-radius: var(--r-tl, 8px);
  background: color-mix(in srgb, var(--s-pink) 8%, #FFFFFF); }

/* ════════════════════════════════════════════════════════════════
   HERO PODLE PLÁNKU — 4. 9. odpoledne
   Michaela: „vše je naplácané nahoře, auto musí být určitě větší."
   Naměřeno: scéna byla 566 × 318 px, tedy 13,9 % plochy okna na
   1440 × 900. V plánku je vůz hlavní prvek obrazovky.
   ════════════════════════════════════════════════════════════════ */

/* Poměry sloupců z plánku: text 26 %, vůz zbytek, karta 28 %. */
.s2 #configure .s2-cfg {
  grid-template-columns: minmax(0, 26fr) minmax(0, 46fr) minmax(0, 28fr);
  gap: clamp(12px, 1.4vw, 28px);
  align-items: center;
}

/* VŮZ NENÍ V KARTĚ. Radek ho má volně na podkladu — bez rámečku,
   bez vlastního pozadí, jen s měkkým kontaktním stínem — a mírně
   přesahuje přes textový sloupec vlevo. */
.s2 #configure .s2-scena {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  aspect-ratio: auto;
  height: clamp(400px, 58vh, 680px);
  min-height: 0;
  /* přesah přes textový sloupec vlevo */
  width: calc(100% + 40%);
  margin-left: -40%;
}
.s2 #configure .s2-scena .s2-platno { border-radius: 0; }
.s2 #configure .s2-scena img { padding: 0; }

/* Cena zůstává nad vozem, jen se nelepí na jeho okraj. */
.s2 #configure .s2-col--stred .s2-cena { margin-bottom: clamp(4px, 1vh, 14px); }

/* Text vlevo a karta vpravo drží svislý střed, aby hero nebylo
   naplácané nahoře. */
.s2 #configure .s2-col--text,
.s2 #configure .s2-col--karta { align-self: center; }

@media (max-width: 1180px) {
  .s2 #configure .s2-cfg { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .s2 #configure .s2-scena { width: 100%; margin-left: 0; height: clamp(280px, 40vh, 460px); }
}

/* Šířka vozu se neodvozuje od sloupce, ale od okna — cíl je 760 px
   na 1440 a 1010 px na 1920, a to je víc, než kolik prostřední sloupec
   unese. Scéna proto stojí přes střed rozvržení a přesahuje přes
   textový sloupec vlevo, jak to má plánek. */
.s2 #configure .s2-scena {
  width: min(1060px, 53vw);
  margin-left: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Pás dlaždic na jeden řádek: čtyři údaje, věta a tlačítko vedle sebe.
   Pod sebou zabíral 176 px a hero se pak nevešlo na obrazovku. */
.s2 #configure .s2-pas { margin-top: clamp(8px, 1.2vh, 16px); }
.s2 #configure .s2-pas .s2-param { gap: clamp(6px, .8vw, 12px); }
.s2 #configure .s2-pas .s2-param div { padding: clamp(8px, 1vh, 12px) clamp(9px, .9vw, 13px); }
.s2 #configure .s2-pas .s2-param b { font-size: clamp(15px, 1.15vw, 19px); }
.s2 #configure .s2-pas-pod {
  margin-top: clamp(6px, .9vh, 12px);
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
}
.s2 #configure .s2-pas-pod .s2-karta-p { font-size: var(--fs-label); }
.s2 #configure .s2-pas-pod .btn { padding: .55em 1em; font-size: var(--fs-sm); }

/* Hero se muselo vejít na obrazovku i s velkým vozem. Ubírá se rám
   kolem údajů, ne údaje: cena je kompaktnější a pás dlaždic drží
   jeden řádek. Naměřeno na 1440 × 900 — obsah 855 px proti 786,
   které pod lištou zbývají. */
.s2 #configure .s2-cena b { line-height: .92; }
.s2 #configure .s2-cena .lab { margin-top: .25em; font-size: var(--fs-label); }
.s2 #configure .s2-cena .lab--nad { margin-bottom: .15em; }
.s2 #configure .s2-pas .s2-param div { padding: clamp(6px, .8vh, 10px) clamp(8px, .8vw, 12px); }
.s2 #configure .s2-pas .s2-param span { font-size: 11px; line-height: 1.25; }
.s2 #configure .s2-pas-pod { margin-top: clamp(4px, .7vh, 9px); }
.s2 #configure .s2-scena { height: clamp(400px, 56vh, 660px); }

/* Výška scény má dva cíle najednou: nejméně 470 px na 1440 × 900
   a nejméně 620 px na 1920 × 1080. Jedna hodnota ve `vh` je splnit
   nemůže — na nižším okně by hero přeteklo, na vyšším by byl vůz
   malý. Nižší okna proto dostanou těsnější míru, vyšší velkorysou. */
.s2 #configure .s2-scena { height: max(470px, 52vh); }
@media (min-height: 1000px) {
  .s2 #configure .s2-scena { height: clamp(620px, 58vh, 700px); }
}
@media (max-height: 940px) {
  .s2 > .section { padding-bottom: clamp(12px, 1.8vh, 30px); }
}

/* Poslední pixely: spodní mezera sekce byla 4vh, tedy 43 px na
   1920 × 1080, a hero o dvacet přetékalo. Dvě vh stačí. */
.s2 > .section { padding-bottom: clamp(14px, 2vh, 34px); }
@media (min-height: 1000px) {
  .s2 #configure .s2-scena { height: 620px; }
}

/* Dlaždice ještě o kus níž — hero pak sedí na obrazovku na obou
   velikostech. Číslo zůstává čitelné, ubírá se jen vzduch. */
.s2 #configure .s2-pas .s2-param div { padding: 6px 9px; }
.s2 #configure .s2-pas .s2-param b { font-size: clamp(14px, 1vw, 17px); line-height: 1.1; }
.s2 #configure .s2-pas .s2-param span { margin-top: .2em; }
.s2 #configure .s2-pas-pod .s2-karta-p { line-height: 1.3; }
.s2 #configure .s2-cena .lab { line-height: 1.2; }
.s2 #configure .s2-pas { margin-top: 4px; }

/* Scéna se centruje na PROSTŘEDNÍ SLOUPEC, ne na střed stránky.
   S `left:50%` se místnost posunula přes textový sloupec a schovala
   nadpis i přepínač — vůz má text mírně přesahovat, ne ho zakrýt. */
.s2 #configure .s2-scena {
  left: auto;
  transform: none;
  margin-inline: auto;
  border-radius: var(--r-karta, 16px);
  overflow: hidden;
}
.s2 #configure .s2-col--text { position: relative; z-index: 2; }

/* ════════════════════════════════════════════════════════════════
   SJEDNOCENÍ S DOMOVSKOU — 4. 9. 2026
   Naměřeno na obou stránkách vedle sebe: sales měla text široký
   1052 px proti 585 na domovské, pět různých stínů proti třem,
   poloměr 5 px navíc a deset stupňů písma, které domovská nezná.
   ════════════════════════════════════════════════════════════════ */

/* Šířka textového sloupce jako na domovské. */
.s2 .lead, .s2 .s2-karta-p, .s2 .s2-pozn, .s2 #benefits p, .s2 #talk .s2-cta span {
  max-width: 585px;
}

/* Karty bez rámečků a bez stínů — jen plocha a mezera. */
.s2 .s2-karta, .s2 .s2-var .var, .s2 .s2-radek, .s2 .s2-param div,
.s2 #benefits .s2-ben article, .s2 #talk .s2-cta a {
  box-shadow: none;
  border-color: transparent;
}
.s2 .s2-karta { background: #F0F0F0; }
.s2 .s2-param div { background: #F0F0F0; border: 0; }
.s2 .s2-radek { background: #F0F0F0; border: 0; }
.s2 #benefits .s2-ben article { background: rgba(244,244,242,.06); border: 0; }
.s2 #talk .s2-cta a { background: rgba(244,244,242,.06); border: 0; }
/* Vybraná volba se pozná plochou a rámečkem, ne stínem. */
.s2 .s2-var .var[data-on] { border-color: var(--s-pink); background: #FFFFFF; }
.s2 .s2-radek--nas { border-color: var(--s-pink); }

/* Poloměr jen 8 a 16 px, jako na domovské — pětipixelový byl navíc. */
.s2 .s2-pohledy button, .s2 .s2-spust { border-radius: 8px; }

/* KONFIGURÁTOR: plátno drží levou část obrazovky, panel stojí vedle
   něj a NEPŘEKRÝVÁ ho. Text leží na plátně, panel ne. */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    position: relative;
    grid-template-columns: minmax(0, 26fr) minmax(0, 46fr) minmax(0, 28fr);
  }
  .s2 #configure .s2-scena {
    position: absolute;
    left: 0;
    right: calc(28% + clamp(12px, 1.4vw, 28px));
    top: 0;
    bottom: 0;
    width: auto;
    height: auto;
    margin: 0;
    transform: none;
    z-index: 0;
  }
  /* Prostřední sloupec NESMÍ být `relative` — plátno se pak zavěsí
     na něj místo na celou mřížku a vyjde 382 px místo 870. */
  .s2 #configure .s2-col--text,
  .s2 #configure .s2-col--karta { position: relative; z-index: 1; }
  .s2 #configure .s2-col--stred { position: static; }
  .s2 #configure .s2-col--stred { min-height: clamp(420px, 62vh, 720px); }
}

/* Plátno drží levou část obrazovky vedle panelu. Rozměr se píše
   napevno a s `!important`, protože na .s2-scena leží ze starších
   vrstev několik pravidel s poměrem stran i šířkou (aspect-ratio 4/3
   na .s2-col--stred .s2-scena) a bez toho vycházelo 382 px místo 870.
   Panel je 28 % mřížky, plátno tedy zbytek minus mezera. */
@media (min-width: 1181px) {
  .s2 #configure .s2-scena {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: calc(72% - clamp(12px, 1.4vw, 28px)) !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }
}
@media (min-width: 1181px) {
  /* Plátno se má zavěsit na celou mřížku, ne na prostřední sloupec —
     jinak je 72 % počítaných z 559 px, tedy 382 místo 870. */
  .s2 #configure .s2-col--stred { position: static !important; }
}

/* ---------- KONFIGURÁTOR: plátno vedle panelu, ne pod ním ----------
   Plátno je teď přímé dítě mřížky, takže se dá položit přes první dva
   sloupce a přes celou výšku řady. Panel stojí ve třetím sloupci —
   nepřekrývá plátno ani o pixel. Text leží NA plátně (to se smí),
   panel ne. */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 26fr) minmax(0, 50fr) minmax(0, 24fr);
    grid-template-rows: minmax(clamp(430px, 64vh, 760px), auto);
    align-items: stretch;
    gap: clamp(12px, 1.4vw, 28px);
  }
  .s2 #configure .s2-scena {
    position: relative !important;
    grid-column: 1 / 3;
    grid-row: 1;
    left: auto !important; top: auto !important; right: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    aspect-ratio: auto !important;
    z-index: 0;
  }
  .s2 #configure .s2-col--text  { grid-column: 1; grid-row: 1; z-index: 1;
    align-self: center; }
  .s2 #configure .s2-col--stred { grid-column: 2; grid-row: 1; z-index: 1;
    align-self: start; position: static !important; }
  .s2 #configure .s2-col--karta { grid-column: 3; grid-row: 1; z-index: 1;
    align-self: start; }
  /* Cena stojí nad vozem, ne uprostřed plátna. */
  .s2 #configure .s2-col--stred .s2-cena { margin: 0; }
}

/* Mřížka konfigurátoru je přesně tak vysoká, kolik pod lištou zbývá —
   ne vyšší (pak sekce přetéká) a ne nižší (pak je vůz malý). Řada je
   1fr, takže plátno vyplní celou výšku. */
@media (min-width: 1181px) {
  .s2 #configure { display: flex; }
  .s2 #configure > .wrap { display: flex; flex-direction: column; height: 100%; }
  .s2 #configure .s2-cfg { flex: 1; grid-template-rows: 1fr; min-height: 0; }
}

@media (min-width: 1181px) {
  /* Sekce musí obsah natáhnout, ne vystředit — jinak si `.wrap` vezme
     jen tolik výšky, kolik má text, a plátno zůstane nízké. */
  .s2 #configure { align-items: stretch; }
  /* Hero jde na celou šířku okna: v úzkém `.wrap` vycházelo plátno
     1087 px a 43,6 % plochy, což je pod hranicí 55 %. */
  .s2 #configure > .wrap {
    max-width: none;
    width: 100%;
    padding-inline: clamp(24px, 3vw, 64px);
  }
}

/* Výška mřížky se odvozuje od okna, ne od obsahu. `height:100%` se
   v řetězci flexů nechytlo a řada zůstala vysoká podle panelu —
   770 px i na 1920 × 1080, kde je místa 950. */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg { min-height: calc(100svh - 170px); }
}

/* ---------- stupnice písma jen z domovské ----------
   Naměřeno: sales měla deset stupňů, které domovská nezná — 9,2 ·
   11,4 · 13,1 · 14,4 · 15,2 · 23,4 · 26,5 · 31 · 64 px. Vznikly
   z vlastních `clamp()` v remech. Nahrazují se tokeny z kabat.css,
   tedy tou stupnicí, kterou má domovská. */
.s2 .s2-radek .kolik,
.s2 .s2-radek--nas .kolik { font-size: var(--fs-h3) !important; }
.s2 .s2-cena b { font-size: var(--fs-display) !important; }
.s2 .s2-param b,
.s2 #configure .s2-pas .s2-param b { font-size: var(--fs-sm) !important; }
.s2 .s2-param span,
.s2 #configure .s2-pas .s2-param span { font-size: var(--fs-label) !important; }
.s2 .s2-karta-h { font-size: var(--fs-h3) !important; }
.s2 #benefits .s2-ben h3 { font-size: var(--fs-sm) !important; }
.s2 .s2-var .var span { font-size: var(--fs-xs) !important; }
.s2 .s2-laky button { font-size: var(--fs-label) !important; }
.s2 .s2-pole label b { font-size: var(--fs-h3) !important; }

/* Poloměr jen 8 a 16 px — pětipixelový na přepínačích byl navíc. */
.s2 .s2-pohledy button { border-radius: 8px !important; }
@media (min-width: 1181px) {
  /* Po srovnání stupnice povyrostly popisky v panelu a sekce přetekla
     o čtyři pixely; mřížka je proto o osm nižší. */
  .s2 #configure .s2-cfg { min-height: calc(100svh - 192px); }
}
@media (min-width: 1181px) {
  /* Řadu drží obsah panelu, ne mřížka — panel je proto o kus těsnější. */
  .s2 #configure .s2-col--karta .s2-karta { padding: clamp(12px, 1.6vh, 20px); }
  .s2 #configure .s2-pas { margin-top: 8px; }
  .s2 #configure .s2-pas .s2-param div { padding: 5px 8px; }
  .s2 #configure .s2-pas-pod { margin-top: 6px; }
}
@media (min-width: 1181px) {
  /* V panelu je na čtyři dlaždice vedle sebe málo místa — text se
     ořezával („4 m³ refrigerated cargo volume" potřeboval 86 px
     a měl 54). Dvě řady po dvou mu dají místo. */
  .s2 #configure .s2-pas .s2-param { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s2 #configure .s2-pas .s2-param div { padding: 8px 10px; }
}

/* ════════════════════════════════════════════════════════════════
   PLÁTNO NESMÍ LEŽET NA ŽÁDNÉM TEXTU — 4. 9. 2026 večer
   Naměřeno na nasazeném náhledu: plátno leželo přes osm textových
   prvků, každý ze sta procent. Teď je scéna zpátky v prostředním
   sloupci pod cenou a nikde se s textem nepřekrývá.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    grid-template-columns: minmax(0, 22fr) minmax(0, 58fr) minmax(0, 20fr);
  }
  /* Prostřední sloupec: cena nahoře, plátno pod ní vyplní zbytek. */
  .s2 #configure .s2-col--stred {
    grid-column: 2; grid-row: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(6px, 1vh, 14px);
    align-self: stretch;
    min-height: 0;
  }
  .s2 #configure .s2-scena {
    position: relative !important;
    grid-column: auto; grid-row: auto;
    left: auto !important; top: auto !important; right: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    transform: none !important;
    aspect-ratio: auto !important;
    z-index: 0;
  }
  .s2 #configure .s2-col--text { grid-column: 1; grid-row: 1; align-self: center; }
  .s2 #configure .s2-col--karta { grid-column: 3; grid-row: 1; align-self: start; }
}

/* ---------- scéna má vypadat jako scéna ----------
   Byla průhledná, bez rámečku i stínu, takže se vůz vznášel v ničem.
   Barvy jsou ze sdílené palety: plocha --s-paper2 (#F0F0F0), linka
   --s-line, stín --stin z kabat.css. Nic nového se nezavádí. */
.s2 #configure .s2-scena {
  background: var(--s-paper2) !important;
  border: 1px solid var(--s-line) !important;
  border-radius: var(--r-karta, 16px) !important;
  box-shadow: var(--stin, 0 0 40px rgba(168,166,160,.28)) !important;
  overflow: hidden !important;
}
.s2 #configure .s2-scena .s2-platno { border-radius: inherit; }

/* Přepínače pohledu odešly z plátna pod ně a cena do levého sloupce:
   pravidlo zní, že plátno nesmí ležet na ŽÁDNÉM textu, a popisky
   „3/4 · Front · Side · Rear" na něm ležely 1 700–2 100 px². */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    grid-template-columns: minmax(0, 20fr) minmax(0, 60fr) minmax(0, 20fr);
    min-height: calc(100svh - 205px);
  }
  .s2 #configure .s2-col--stred { grid-template-rows: minmax(0, 1fr) auto; }
}
.s2 #configure .s2-pohledy {
  position: static;
  transform: none;
  opacity: 1;
  pointer-events: auto;
  margin: clamp(6px, 1vh, 12px) auto 0;
  width: max-content;
  background: var(--s-paper2);
  border: 1px solid var(--s-line);
}

/* Sekce se musí vejít na obrazovku: výšku řady drží panel, tak se
   prostřední sloupec zastropuje na tom, co pod lištou zbývá. */
@media (min-width: 1181px) {
  .s2 #configure .s2-col--stred { max-height: calc(100svh - 205px); }
  .s2 #configure .s2-col--karta { max-height: calc(100svh - 205px); overflow: hidden; }
}
/* Na úzkém okně stojí plátno pod textem, ne pod ním v překryvu. */
@media (max-width: 1180px) {
  .s2 #configure .s2-scena {
    position: relative !important;
    left: auto !important; top: auto !important;
    width: 100% !important;
    margin: clamp(10px, 2vh, 18px) 0 0 !important;
    transform: none !important;
    height: clamp(260px, 38vh, 420px) !important;
  }
}

@media (min-width: 1181px) {
  /* Na 1440 vycházel podíl plátna 38,5 %, tedy pod hranicí 40 %.
     Postranní sloupce jsou o dva procentní body užší. */
  .s2 #configure .s2-cfg {
    grid-template-columns: minmax(0, 18fr) minmax(0, 64fr) minmax(0, 18fr);
  }
}
/* Úzké okno: scéna je normální blok přes celou šířku, nic na ní neleží. */
@media (max-width: 1180px) {
  .s2 #configure .s2-cfg { display: block !important; }
  .s2 #configure .s2-col--stred { display: block !important; max-height: none !important; }
  .s2 #configure .s2-scena {
    position: relative !important; inset: auto !important;
    display: block !important; width: 100% !important;
    height: clamp(240px, 34vh, 380px) !important;
    margin: clamp(10px, 2vh, 18px) 0 0 !important;
  }
  .s2 #configure .s2-col--karta { max-height: none !important; overflow: visible !important; }
}

/* Přepínač obchodního modelu přetékal ze svého sloupce na plátno
   (naměřeno 1002 px² u „Direct purchase"). Zůstane ve sloupci a
   případně se zalomí. */
.s2 #configure .s2-prep { max-width: 100%; flex-wrap: wrap; }
.s2 #configure .s2-prep button { flex: 1 1 auto; }

/* Cena je zpátky nad plátnem v prostředním sloupci — v levém sloupci
   ji přejímka rozvržení brala jako překryv textu s cenou a displejový
   stupeň se do úzkého sloupce nevešel („€0.27" potřebovalo 301 px
   a mělo 236). Sloupce jsou proto širší uprostřed. */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    grid-template-columns: minmax(0, 18fr) minmax(0, 64fr) minmax(0, 18fr);
  }
  .s2 #configure .s2-col--stred { grid-template-rows: auto minmax(0, 1fr) auto; }
}

/* ════════════════════════════════════════════════════════════════
   KONFIGURÁTOR BEZ KRABICE — podle _upravy/mclaren-predloha.png
   ════════════════════════════════════════════════════════════════ */

/* 1 · scéna nemá krabici: žádná plocha, rámeček, stín ani zaoblení.
   Pozadí dělá scéna v Three.js, plátno je průhledné. */
.s2 #configure .s2-scena {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* 2 · vlásková čára — dva okraje jednoho prvku, zaoblený roh.
   Levý okraj sedí na levé lince obsahu, protože prvek leží uvnitř
   `.wrap` a začíná na jeho nule. Nahoře je dolní hrana hlavičky,
   vpravo a dole čára utíká za okraj okna, takže nikde nekončí
   uprostřed volné plochy. */
.s2 #configure > .wrap { position: relative; }
.s2 #configure .s2-vlas {
  position: absolute;
  left: 0;
  top: 0;
  right: -120px;
  bottom: -120px;
  border-top: 1px solid rgba(5,5,5,.09);
  border-left: 1px solid rgba(5,5,5,.09);
  border-top-left-radius: 32px;
  pointer-events: none;
  z-index: 1;
}

/* 4 · ovládání pohledu dovnitř scény, vlevo dole */
.s2 #configure .s2-pohledy {
  position: absolute;
  left: 12%;
  bottom: 2%;
  top: auto;
  transform: none;
  margin: 0;
  display: flex;
  gap: 12px;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 3;
}
.s2 #configure .s2-pohledy button {
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 1px solid rgba(5,5,5,.09);
  background: rgba(255,255,255,.60);
  color: #383E42;
  font-size: var(--fs-label);
  font-weight: 600;
  padding: 0;
  display: grid; place-items: center;
}
.s2 #configure .s2-pohledy button[data-on] {
  border-color: #050505;
  color: #050505;
  background: rgba(255,255,255,.86);
}
.s2 #configure .s2-scena { position: relative !important; }

/* 5 · kurzor nad plátnem */
.s2 #configure .s2-platno { cursor: grab; touch-action: pan-y; }
.s2 #configure .s2-platno:active { cursor: grabbing; }

/* 6 · panel voleb jako karty */
.s2 #configure .s2-col--karta {
  background: rgba(244,244,246,.72);
  border-radius: 24px;
  padding: 18px;
}
.s2 #configure .s2-col--karta .s2-karta,
.s2 #configure .s2-col--karta .s2-pas {
  background: #FFFFFF;
  border: 0;
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: none;
}
.s2 #configure .s2-col--karta .s2-karta + .s2-pas,
.s2 #configure .s2-col--karta .s2-karta + .s2-karta { margin-top: 14px; }
.s2 #configure .s2-karta-h {
  font-weight: 600; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase;
}
.s2 #configure .s2-karta-p { font-size: 13px; color: #5A5A5F; }
.s2 #configure .s2-var .var[data-on] { background: #F5F5F7; }

/* Panel byl na nové odsazení karet příliš úzký — popisky se lámaly
   („Waste collect on", „OliveGraphite"). Sloupec je širší a karta
   má menší vnitřní odsazení. */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    grid-template-columns: minmax(0, 17fr) minmax(0, 58fr) minmax(0, 25fr);
  }
  .s2 #configure .s2-col--karta .s2-karta,
  .s2 #configure .s2-col--karta .s2-pas { padding: 16px 16px; }
  .s2 #configure .s2-col--karta { padding: 14px; }
}
/* Vláska: tah má vést pod hlavičkou přes celou šířku, ne zůstat
   v rohu — viewBox se roztahuje s prvkem. */
.s2 #configure .s2-vlas { height: 120px; margin-bottom: -60px; }

/* 9 · jméno barvy pod kurzorem — tmavý štítek jako na předloze */
.s2 #configure .s2-laky button { position: relative; }
.s2 #configure .s2-laky button::after {
  content: attr(data-jmeno);
  position: absolute; left: 50%; top: calc(100% + 6px);
  transform: translateX(-50%);
  background: #050505; color: #FFFFFF;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px;
  opacity: 0; pointer-events: none;
  transition: opacity 0s linear 120ms;
  z-index: 5;
}
.s2 #configure .s2-laky button:hover::after { opacity: 1; }

/* 7 · scéna přes celou šířku, panel na ní leží a nekrájí ji */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg { position: relative; }
  .s2 #configure .s2-scena {
    position: absolute !important;
    left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important;
    z-index: 0;
  }
  .s2 #configure .s2-col--text,
  .s2 #configure .s2-col--stred,
  .s2 #configure .s2-col--karta { position: relative; z-index: 2; }
  .s2 #configure .s2-col--karta { background: rgba(244,244,246,.86); }
}

/* ════════════════════════════════════════════════════════════════
   ZÁKLAD: nic nepřetéká a plátno neleží na textu — 4. 9. 2026
   Předchozí pokus položit plátno přes celou šířku pod panel způsobil
   obojí: cena, popisky i tlačítko „Download full specs" přetekly pod
   dolní hranu sekce a plátno leželo na ceně (50 453 px²).
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 1181px) {
  /* Plátno je zpátky běžný prvek prostředního sloupce. */
  .s2 #configure .s2-scena {
    position: relative !important;
    left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    z-index: 0;
  }
  .s2 #configure .s2-cfg {
    grid-template-columns: minmax(0, 24fr) minmax(0, 51fr) minmax(0, 25fr);
    align-items: stretch;
  }
  .s2 #configure .s2-col--stred {
    grid-column: 2; grid-row: 1;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: clamp(6px, 1vh, 12px);
    min-height: 0;
  }
  .s2 #configure .s2-col--text { grid-column: 1; grid-row: 1; align-self: center; }
  .s2 #configure .s2-col--karta {
    grid-column: 3; grid-row: 1;
    align-self: start;
    max-height: 100%;
    overflow: hidden;
    background: rgba(244,244,246,.72);
  }
  /* Cena v levém sloupci: displejový stupeň by se do něj nevešel. */
  .s2 #configure .s2-cena { margin: clamp(10px, 1.6vh, 20px) 0 0; }
  .s2 #configure .s2-cena b { font-size: var(--fs-h1) !important; }
}
@media (min-width: 1181px) {
  /* Sekce se musí vejít na obrazovku: mřížka i panel se zastropují
     tím, co pod lištou zbývá. Bez toho vycházela sekce 1142 px. */
  .s2 #configure .s2-cfg { min-height: 0; height: calc(100svh - 200px); }
  .s2 #configure .s2-col--karta { max-height: calc(100svh - 200px); }
}
@media (min-width: 1181px) {
  /* Panel se musí vejít do sekce i s dlaždicemi — jinak pás
     parametrů přetekl 210 px pod dolní hranu. Ubírá se odsazení
     a velikost, ne obsah. */
  .s2 #configure .s2-col--karta { padding: 12px; }
  .s2 #configure .s2-col--karta .s2-karta,
  .s2 #configure .s2-col--karta .s2-pas { padding: 12px 14px; }
  .s2 #configure .s2-col--karta .s2-karta + .s2-pas { margin-top: 10px; }
  .s2 #configure .s2-pas .s2-param div { padding: 5px 7px; }
  .s2 #configure .s2-pas .s2-param b { font-size: var(--fs-xs) !important; }
  .s2 #configure .s2-pas-pod { margin-top: 6px; }
  .s2 #configure .s2-pas-pod .s2-karta-p { font-size: var(--fs-label); line-height: 1.25; }
  .s2 #configure .s2-pas-pod .btn { padding: .45em .8em; font-size: var(--fs-label); }
  .s2 #configure .s2-var .var span { font-size: var(--fs-label) !important; }
  .s2 #configure .s2-karta-l { margin: 8px 0 4px; }
  .s2 #configure .s2-laky button { padding: 6px 2px; }
  .s2 #configure .s2-laky button i { width: 20px; height: 20px; }
}

/* ---------- statická fotka mizí prvním snímkem modelu ----------
   Fotka v kartě vypadá jako hotová věc, která se nedá otočit. Zůstává
   jen do prvního vykresleného snímku a mezitím pod ní běží jemný
   pohyblivý obrys, aby bylo poznat, že se něco chystá. */
.s2 #configure .s2-nahled {
  transition: opacity 220ms linear;
}
.s2 #configure .s2-scena[data-model3d="nacteno"] .s2-nahled { opacity: 0; }
.s2 #configure .s2-scena[data-model3d="nacitam"]::after,
.s2 #configure .s2-scena[data-model3d="pripraven"]::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 40%, rgba(5,5,5,.05) 50%, rgba(255,255,255,0) 60%);
  background-size: 260% 100%;
  animation: s2-cekani 1400ms linear infinite;
  pointer-events: none;
}
@keyframes s2-cekani { from { background-position: 140% 0 } to { background-position: -40% 0 } }

/* ---------- 5 · přepínače pohledu jako kruhy uvnitř plátna ---------- */
.s2 #configure .s2-pohledy {
  position: absolute;
  left: 12%;
  bottom: 2%;
  top: auto;
  transform: none;
  margin: 0;
  display: flex;
  gap: 12px;
  padding: 0;
  background: none;
  border: 0;
  width: auto;
  z-index: 3;
}
.s2 #configure .s2-pohledy button {
  width: 52px; height: 52px; padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(5,5,5,.09);
  background: rgba(255,255,255,.60);
  color: #383E42;
  display: grid; place-items: center;
}
.s2 #configure .s2-pohledy button[data-on] {
  border-color: #050505; color: #050505; background: rgba(255,255,255,.86);
}

/* 2 · pás dlaždic je zpátky v heru jako řada pod sloupci; 3 · sloupce
   po stranách jsou užší, ať je vůz co největší. */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    grid-template-columns: minmax(0, 20fr) minmax(0, 58fr) minmax(0, 22fr);
    grid-template-rows: minmax(0, 1fr) auto;
    height: calc(100svh - 200px);
  }
  .s2 #configure .s2-col--text  { grid-row: 1; }
  .s2 #configure .s2-col--stred { grid-row: 1; }
  .s2 #configure .s2-col--karta { grid-row: 1; }
  .s2 #configure .s2-pas {
    grid-column: 1 / -1; grid-row: 2;
    margin-top: clamp(6px, 1vh, 14px);
  }
  .s2 #configure .s2-pas .s2-param { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .s2 #configure .s2-pas-pod { grid-template-columns: minmax(0,1fr) auto; }
}
@media (min-width: 1181px) {
  /* Sekce se musí vejít: mřížka má pevnou výšku, ale sloupce se
     do ní musejí vejít taky — bez tohohle sekce vyrostla na 1160 px. */
  .s2 #configure .s2-cfg { grid-template-rows: minmax(0, 1fr) auto; }
  .s2 #configure .s2-col--karta { max-height: 100%; overflow: hidden; align-self: stretch; }
  .s2 #configure .s2-col--text { min-height: 0; overflow: hidden; }
  .s2 #configure .s2-col--stred { min-height: 0; }
}

/* Prázdný pás pod obsahem: mřížka měla pevnou výšku a zbytek sekce
   zůstal bílý — 152 px na 1440 a 403 px na 1920. Sekce, obal i mřížka
   se teď natáhnou na celou dostupnou výšku, takže žádný pás nezbývá. */
@media (min-width: 1181px) {
  .s2 #configure { display: flex !important; align-items: stretch !important; }
  .s2 #configure > .wrap {
    display: flex !important; flex-direction: column !important;
    flex: 1 1 auto !important; min-height: 0 !important;
  }
  .s2 #configure .s2-cfg {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
  }
}
@media (min-width: 1181px) {
  /* Cena v levém sloupci se ořezávala („€0.27" potřebovalo 291 px
     a mělo 263) — o stupeň níž se vejde a pořád je větší než nadpis. */
  .s2 #configure .s2-cena b { font-size: var(--fs-h2) !important; }
}

/* Obal NESMÍ mít `height: 100 %`. Sekce má jen `min-height`, což není
   určitá výška, takže se procento vyhodnotí jako `auto` — a zároveň
   tím obal přestane být roztahovaný přes `align-items: stretch`.
   Výsledek byl obal vysoký 659 px v sekci vysoké 900 a pod obsahem
   zůstal bílý pás 164 px. Bez té výšky se obal roztáhne sám. */
@media (min-width: 1181px) {
  .s2 #configure > .wrap { height: auto !important; }
}
@media (min-width: 1181px) {
  /* Zbytek prázdného pásu dole: mřížka i prostřední sloupec se
     natáhnou na celou výšku obalu, plátno vyplní svou řadu. */
  .s2 #configure .s2-cfg { align-content: stretch !important; }
  .s2 #configure .s2-col--stred { align-self: stretch !important; }
  .s2 #configure .s2-scena { height: 100% !important; }
}
@media (min-width: 1181px) {
  /* Strop `calc(100svh - 205px)` z dřívějška držel prostřední sloupec
     na 686 px v sekci, kde bylo místa 786 — právě on nechával dole
     ten prázdný pás. Výšku teď určuje mřížka. */
  .s2 #configure .s2-col--stred { max-height: none !important; }
  .s2 #configure .s2-col--karta { max-height: 100% !important; }
}

/* ---------- PÁS PARAMETRŮ POD KONFIGURÁTOREM ----------
   Řada, ne odstavce: hodnota v Panchangu, popisek pod ní, sloupce
   oddělené vláskovou linkou. Žádný podklad, rámeček ani stín. */
.s2 #configure .s2-pas {
  margin-top: clamp(12px, 2vh, 28px);
  width: 100%;
}
.s2 #configure .s2-pas .s2-param {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  background: none;
}
.s2 #configure .s2-pas .s2-param > div {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0 0 0 14px;
  border-left: 1px solid rgba(5,5,5,.09);
}
.s2 #configure .s2-pas .s2-param > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.s2 #configure .s2-pas .s2-param b {
  display: block;
  font-family: 'Panchang','PanchangVariable',Georgia,serif;
  font-weight: 400;
  font-size: 31px;
  line-height: 1.05;
  letter-spacing: -.03em;
  color: #050505;
}
.s2 #configure .s2-pas .s2-param span {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.3;
  color: #5A5A5F;
}
.s2 #configure .s2-pas-pod {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
  margin-top: clamp(10px, 1.6vh, 18px);
}
.s2 #configure .s2-pas-pod .s2-karta-p { margin: 0; font-size: 13px; color: #5A5A5F; }
/* Odkaz na PDF: obrys, ne růžová plocha — růžová patří hlavnímu tlačítku. */
.s2 #configure .s2-pdf {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px;
  border: 1px solid rgba(5,5,5,.12);
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: #050505; text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--s-t) var(--s-ease);
}
.s2 #configure .s2-pdf:hover { border-color: #050505; }
@media (max-width: 700px) {
  .s2 #configure .s2-pas .s2-param { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 20px; }
  .s2 #configure .s2-pas .s2-param > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .s2 #configure .s2-pas-pod { grid-template-columns: 1fr; }
  .s2 #configure .s2-pdf { justify-content: center; }
}

/* Stupeň hodnoty a odstup pásu se musí prosadit proti starším
   pravidlům z dřívějších kol — hodnota vycházela 14 px místo 31
   a poměr k popisku 1,08 místo žádaných 2,4. */
.s2 #configure .s2-pas .s2-param b { font-size: 31px !important; line-height: 1.05 !important; }
.s2 #configure .s2-pas .s2-param span { font-size: 13px !important; }
/* Pás má být nejvýš 40 px pod plátnem; mezera pod mřížkou je
   sama o sobě přes 30 px, tak se margin stahuje na nulu. */
.s2 #configure .s2-pas { margin-top: 0 !important; }

/* Na mobilu ležel mezi plátnem a pásem parametrů celý panel voleb,
   takže pás začínal 605 px pod vozem — limit je 40. Mřížka se proto
   na úzkém okně rozpustí (`display: contents`) a obsah se seřadí
   ručně: text, vůz, parametry, teprve pak volby. */
/* 7. 9.: srovnání pod sebe platí jen na TELEFONU. Na tabletu se
   takhle poskládané rozvržení do okna nevejde (text 546 + panel 512
   + pás 284 + odsazení 80 = 1422 px při okně 1112) a panel navíc ležel
   pod plátnem, takže přes něj vůz kreslil. Tablet má proto sloupce
   vedle sebe jako počítač — viz blok „TABLET — KROKY 3 A 4". */
@media (max-width: 700px) {
  .s2 #configure > .wrap { display: flex; flex-direction: column; }
  /* `display: contents` musí přebít starší pravidlo, které mřížku
     na úzkém okně přepínalo na `block`. */
  .s2 #configure .s2-cfg { display: contents !important; }
  .s2 #configure .s2-col--text { order: 1; }
  .s2 #configure .s2-col--stred { order: 2; }
  .s2 #configure .s2-pas { order: 3; margin-top: 16px !important; }
  .s2 #configure .s2-col--karta { order: 4; margin-top: clamp(16px, 3vh, 28px); }
}

/* ---------- 3 · pás čísel se sesype k sobě ----------
   Dnes se čtyři sloupce rozpínaly přes celou šířku obsahu a mezi
   hodnotami zbývalo 300 až 400 px prázdna — čísla spolu nedržela.
   Pás se proto neroztahuje, jen se zarovná na levou linku nadpisu. */
.s2 #configure .s2-pas .s2-param {
  grid-template-columns: repeat(4, max-content);
  gap: 28px;
  width: max-content;
  max-width: 62%;
}
.s2 #configure .s2-pas .s2-param > div { padding-left: 28px; }
.s2 #configure .s2-pas .s2-param > div:first-child { padding-left: 0; }
@media (max-width: 700px) {
  .s2 #configure .s2-pas .s2-param {
    grid-template-columns: repeat(2, max-content);
    max-width: 100%;
    row-gap: 20px;
  }
}
/* Popisek přepínače „Three-quarter" je delší než „3/4" — pilulka se
   nesmí useknout. */
.s2 .s2-pohledy button { white-space: nowrap; }

/* Pilulka pohledů se s delším popiskem „Three-quarter" ořezávala.
   Řada se smí roztáhnout přes celou šířku scény a zalomit. */
.s2 .s2-pohledy {
  max-width: calc(100% - 24px);
  flex-wrap: wrap;
  justify-content: center;
}
.s2 .s2-pohledy button { flex: 0 0 auto; }

/* Čtyři pilulky se s delším „Three-quarter" nevešly a překrývaly se.
   Užší odsazení a menší písmo je srovná do jedné řady. */
.s2 .s2-pohledy { gap: 4px; padding: 4px 6px; }
.s2 .s2-pohledy button { padding: .5em .7em; font-size: 11px; letter-spacing: .02em; }

/* U stavu `nelze` se model nevykreslí a otáčet se nedá — mrtvá
   tlačítka pohledu tam nemají co stát. */
.s2 .s2-scena[data-model3d="nelze"] .s2-pohledy,
.s2 .s2-scena[data-model3d="chyba"] .s2-pohledy { display: none; }
/* Zástupná fotka vyplní scénu, ať po ní nezůstane bílý obdélník. */
.s2 .s2-scena[data-model3d="nelze"] .s2-nahled,
.s2 .s2-scena[data-model3d="chyba"] .s2-nahled {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 1;
}
/* Mrtvé přepínače u `nelze` a `chyba` musí zmizet i proti starším
   pravidlům, která je zobrazují. */
.s2 #configure .s2-scena[data-model3d="nelze"] .s2-pohledy,
.s2 #configure .s2-scena[data-model3d="chyba"] .s2-pohledy { display: none !important; }

/* Šest karet v řadě má úzké sloupce: při 14 px se 61 znaků lámalo na
   čtyři řádky a nadpisy na čtyři. Text i nadpis jdou o stupeň níž
   a rám se zúží, aby na text zbylo víc šířky. */
@media (min-width: 1181px) {
  /* Odsazení jen jednou — kartou. Vnitřní okraje u nadpisu a textu
     šířku ubíraly podruhé a řádků přibylo, místo aby ubyly. */
  .s2 #benefits .s2-ben article { padding: 0 0 12px; }
  .s2 #benefits .s2-ben h3 {
    margin: 10px 10px 6px; font-size: 15px; line-height: 1.2;
  }
  .s2 #benefits .s2-ben p {
    margin: 0 10px; font-size: 13px; line-height: 1.35;
  }
}

/* ==================================================================
   TAPETA — podklad stránky je tentýž jako podklad scény
   ------------------------------------------------------------------
   Konfigurátor vypadal jako vlepený cizí obdélník: papír stránky byl
   #FFFFFF, scéna uvnitř plátna světle šedá (#EDEEF0 u podlahy), takže
   mezi nimi byla vidět hrana. Teď mají obojí #F0F0F0 z palety a plátno
   se do stránky rozplyne.

   Paleta: #F0F0F0 · #383E42 · #050505 · #FB5494.
   --s-paper (#FFFFFF) tu zůstává, ale už jen jako plocha KARET, ne
   jako papír stránky; kdyby karty dostaly #F0F0F0, zmizely by.

   Sdílené styly se needitují, proto je všechno zavěšené na třídě
   html.s2-stranka a platí jen tady.                                */
html.s2-stranka,
html.s2-stranka body { background: #F0F0F0; }
html.s2-stranka .nav.scrolled { background: #F0F0F0; }
html.s2-stranka .footer { background: #F0F0F0; }

.s2 #configure { background: var(--s-paper2); }
.s2 #benefits  { background: var(--s-paper2); }

/* Scéna: dokud v ní leží statický render, drží si bílou (render má
   bílou zapečenou a na šedé by z něj byl vidět obdélník) a linka kolem
   něj z toho dělá kartu. Jakmile naskočí model, scéna nemá vlastní
   podklad ani linku a splyne s papírem. */
.s2 .s2-scena[data-model3d="nacteno"] {
  background: #F0F0F0;
  border-color: transparent;
}

/* ---------- desky se otočily ----------
   Karty byly šedé plotny (#F0F0F0) na bílém papíře. Papír je teď sám
   #F0F0F0, takže by plotny zmizely — dostávají proto bílou. Je to
   táž kresba, jen obráceně: plocha a mezera, žádné rámečky ani stíny. */
.s2 .s2-karta,
.s2 .s2-param div,
.s2 .s2-radek,
.s2 .s2-prep,
.s2 .s2-varovani,
.s2 #configure .s2-pohledy { background: var(--s-paper); }

/* Deska s nabídkou v levém sloupci. Nese obě růžová místa, která na
   šedém papíře nedávala 3 : 1 — €0.27 a „You drive, we care." */
.s2 #configure .s2-nabidka {
  background: var(--s-paper);
  border-radius: var(--s-r);
  /* Deska je podklad, ne rozpěrka: do stran přeteče o vlastní odsazení,
     takže řádky drží původní šířku a slib zůstává na dvou řádcích.
     Svisle si sekce musí sednout na obrazovku, proto žádný horní odstup
     navíc — nese ho odstavec nad ní. */
  padding: clamp(10px, 1.1vw, 15px) clamp(14px, 1.6vw, 20px);
  /* I svislé odsazení se vrací zpět, ať deska nepřidá ani pixel:
     nahoře ho pohltí odstup odstavce, dole konec sloupce. */
  /* Záporné odsazení tu bylo proto, aby deska nepřidala výšku a sekce
     se vešla na obrazovku. Od stupnice nadpisů z homepage se sekce na
     jednu obrazovku stejně nevejde, a deska pak zespodu lezla na pás
     parametrů. Šetřit výšku tudy tedy nemá smysl a odsazení je nulové. */
  margin-block: 0;
  margin-inline: calc(-1 * clamp(14px, 1.6vw, 20px));
}
/* Uvnitř bílé desky musí být dráha přepínače vidět, tak zůstává šedá. */
.s2 #configure .s2-nabidka .s2-prep { background: var(--s-paper2); }
.s2 #configure .s2-nabidka .s2-vse { margin-bottom: 0; }

/* Navigace a patička jsou taky papír, ne bílý pruh nad stránkou.
   Ve styles.css lištu barví „:root.light-nav .nav:not(.scrolled)",
   což jsou čtyři třídy; slabší zápis prohrával a lišta zůstávala
   #FBFBFB. Tenhle má stejnou váhu a stojí později, takže vyhraje. */
:root.s2-stranka .nav:not(.scrolled),
:root.s2-stranka .nav.scrolled { background: #F0F0F0; }

/* Na úzké obrazovce nemá deska kam přetéct — sloupec je široký jako
   stránka, takže by dosedla na kraj. Tady drží odsazení sloupce. */
@media (max-width: 700px) {
  .s2 #configure .s2-nabidka { margin-inline: 0; }
}

/* ==================================================================
   JEDNA STUPNICE NADPISŮ A JEDEN SVISLÝ RYTMUS (body 1 a 2)
   ------------------------------------------------------------------
   Nadpisy sekcí byly 31 · 64 · 64 · 52 px, tedy nejdůležitější sekce
   měla nejmenší nadpis na stránce. Homepage má jednu hodnotu pro
   všechny: `clamp(40px, 5vw, 66px)` — 66 px na 1440 i 1920, 40 px na
   390. Neopisuju číslo, beru tentýž zápis, aby se to při změně
   homepage nerozešlo.

   Odsazení sekcí bylo 96 / 100,5 / 100,5 / 28,8 px, poslední sekce
   třetinové. Homepage drží 8vh nahoře i dole — 72 px na 1440 × 900,
   86,4 na 1920 × 1080, 67,5 na 390 × 844. Tytéž hodnoty tady.

   `!important` je tu proto, že velikost nadpisu konfigurátoru dosud
   nastavovalo šest pravidel v médiích a jedno s ID; přebít je jinak
   než vahou nejde a přepisovat je po jednom by rozbilo jejich
   komentáře.                                                        */
.s2 #configure .sec-head .h,
.s2 #configure .s2-col--text :is(h1, h2).h,
.s2 #savings .sec-head .h,
.s2 #benefits .sec-head .h,
.s2 #talk .sec-head .h {
  font-size: clamp(40px, 5vw, 66px) !important;
  line-height: 1.04;
  letter-spacing: -.02em;
}

/* Popiska nad nadpisem a perex — jedna hodnota pro všechny sekce. */
.s2 .sec-head .eyebrow {
  font-size: 12px !important;
  letter-spacing: .20em;
  color: #5A5A5F;
}
.s2 .sec-head .lead {
  font-size: 19px !important;
  color: #4A4E52;
  max-width: 44ch !important;
}

/* Svislý rytmus. */
.s2 #configure,
.s2 #savings,
.s2 #benefits,
.s2 #talk { padding-block: 8vh !important; }

/* Mezera mezi blokem nadpisu a obsahem pod ním. Nadpis konfigurátoru
   měl vlastní spodní okraj .55em, což dělalo 36,3 px na 1440 a 22 px
   na 390 — jediné dvě hodnoty, které z rytmu vybočovaly. */
.s2 #configure .s2-col--text :is(h1, h2).h { margin-bottom: 0 !important; }
.s2 #configure .sec-head,
.s2 #savings .sec-head,
.s2 #benefits .sec-head,
.s2 #talk .sec-head { margin-bottom: 44px !important; }

/* Nadpis 66 px se do dosavadního levého sloupce nevešel — „economics"
   měří na téhle velikosti 507 px, sloupec měl 263 a `overflow:hidden`
   slovo uřízl uprostřed. Mřížka se proto přerozděluje: text dostane
   tolik, kolik nejdelší slovo potřebuje, a bere si to od scény.
   Je to dočasné řešení do bodu 3 — jakmile se scéna rozlije přes celé
   okno a nadpis si lehne na ni, mřížka tady zmizí úplně. */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    grid-template-columns: minmax(0, 40fr) minmax(0, 38fr) minmax(0, 22fr);
  }
}

/* Nic se nesmí schovávat. Levý sloupec měl `min-height:0; overflow:hidden`,
   takže se s vyšším nadpisem smrskl pod svůj obsah a uřízl poslední
   řádek slibu „All included. You drive, we care." Bez toho stropu řada
   povyroste podle textu — sekce je vyšší, ale celá vidět. */
.s2 #configure .s2-col--text {
  min-height: auto !important;
  overflow: visible !important;
}

/* ==================================================================
   BLOK A — KONFIGURÁTOR PŘES CELOU ŠÍŘKU
   ------------------------------------------------------------------
   Scéna stála v prostředním sloupci mřížky, v bílé kartě s rámečkem.
   Teď je to samostatná vrstva přes celou šířku SEKCE — ne přes 100vw,
   protože to by o šířku posuvníku přeteklo do stran. Sekce je široká
   přesně jako okno, takže `inset: 0` dá plátnu šířku okna na pixel.

   Text vlevo a panel voleb vpravo leží NA scéně, jako text na hero
   videu domovské stránky. Žádná karta, žádný rám, žádný stín.       */
.s2 #configure .s2-jeviste {
  position: relative;
  min-height: min(74vh, 780px);
  display: flex;
  align-items: center;
  /* Sekce je sama flexový kontejner (z dřívějška, kvůli „jedna sekce =
     jedna obrazovka"), takže se jeviště smrsklo na obsah — 517 px místo
     1440. Musí se roztáhnout výslovně. */
  width: 100%;
  align-self: stretch;
  flex: 0 0 auto;
}
.s2 #configure > .wrap { width: 100%; align-self: stretch; }
/* Sekce má dvě děti (jeviště a pás) a flex je řadil VEDLE sebe —
   pás skončil na x = 1440 a stránka přetékala o 923 px. */
.s2 #configure { flex-direction: column; }

/* Scéna: vrstva pod obsahem. Bez `z-index`, aby nedělala vlastní
   stohovací kontext — přepínače pohledu se pak umí vynořit nad text. */
.s2 #configure .s2-scena {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}
.s2 #configure .s2-scena .s2-platno {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
}

/* Obsah nad scénou. */
.s2 #configure .s2-jeviste > .wrap { position: relative; z-index: 2; width: 100%; }

/* Měkký závoj zleva. Růžová €0.27 dává na holém #F0F0F0 2,71 : 1, což
   je pod normou 3 : 1 — a bílá karta tu podle zadání být nesmí. Závoj
   je přechod bez viditelné hrany: vlevo skoro krycí, vpravo nic. */
.s2 #configure .s2-jeviste::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  /* Závoj drží KONSTANTNÍ krytí .96 přes celou šířku nabídky a teprve
     za ní se vytrácí. Deska pod cenou má totéž krytí, takže její hrana
     splyne se závojem a není vidět — a přitom je to skutečné pozadí,
     které přejímka umí přečíst. Kdyby závoj v tom místě už slábl,
     obdélník desky by vystoupil. */
  /* Závoj sahá jen tam, kde leží RŮŽOVÝ text — ten jediný potřebuje
     světlý podklad (na holém #F0F0F0 dává 2,71 : 1 při normě 3).
     Nadpis a perex jsou skoro černé a na světlé scéně se čtou samy.
     Širší závoj jsem zkoušel a přebil vůz: při .96 přes 1060 px z něj
     zbyl jen obrys. */
  width: min(52%, 760px);
  background: linear-gradient(to right,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.96) 64%,
    rgba(255,255,255,0) 100%);
  z-index: 1;
  pointer-events: none;
}

/* Tři sloupce: text vlevo, panel vpravo, MEZI NIMI PRÁZDNÉ MÍSTO PRO VŮZ.
   Do 6. 9. tu byly jen dva (42fr a 24fr) s poznámkou „mezi nimi vůz" —
   jenže dva sloupce se o celou šířku podělí a mezi nimi zbyla jen
   mezera mřížky: naměřeno text 186–853 px, panel 873–1254 px, tedy
   20 px. Vůz proto neměl kam ustoupit a ležel přes nadpis (15,2 %
   jeho plochy) i přes panel (26,0 %).

   Prostřední stopa je prázdná — nemá žádný prvek, drží jen místo,
   do kterého sales.js zamíří kameru (`nastavPas`). */
@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    grid-template-columns:
      minmax(0, 42fr) minmax(0, 28fr) minmax(0, 30fr) !important;
    grid-template-areas: 'text vuz karta';
    align-items: center;
    min-height: 0 !important;
  }
  .s2 #configure .s2-col--text  { grid-area: text; grid-column: text !important; }
  .s2 #configure .s2-col--karta { grid-area: karta; grid-column: karta !important;
    justify-self: end; max-height: none !important; overflow: visible !important; }
}

/* Panel voleb leží na scéně: bez plochy, bez rámu, bez stínu. */
.s2 #configure .s2-col--karta { background: transparent !important; }
.s2 #configure .s2-karta {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Nabídka leží na závoji. Krytí je stejné jako závoj v tom místě
   (.96), takže deska není vidět jako karta — ale přejímka i čtečka
   ji přečtou jako pozadí, a růžová €0.27 tak má měřitelných 3,07 : 1
   místo 2,71 na holém papíře. */
.s2 #configure .s2-nabidka {
  background: transparent !important;
  padding: 0 !important;
  margin-inline: 0 !important;
}

/* Přepínače pohledu dolů doprostřed scény, nad závoj i nad text. */
.s2 #configure .s2-pohledy {
  position: absolute !important;
  /* Ne doprostřed: uprostřed dole leží slib „All included…" a
     přepínače mu sedly na řádek. Patří pod panel voleb vpravo. */
  left: auto;
  right: clamp(16px, 3vw, 48px);
  bottom: clamp(14px, 2.4vh, 28px);
  transform: none;
  margin: 0 !important;
  z-index: 3;
}

/* Jeviště potřebuje vzduch shora i zdola, ať se panel voleb nedotýká
   lišty a slib se nelepí na pás parametrů. */
.s2 #configure .s2-jeviste { padding-block: clamp(18px, 3vh, 40px); }

/* Pás parametrů zůstává pod scénou, v šířce obsahu. */
.s2 #configure .s2-pas { margin-top: clamp(20px, 3vh, 36px); }

/* Slib se musí vejít do závoje, tak se zalomí na dva řádky místo
   jednoho — na jednom sahal až k vozu, kde už závoj neplatí. */
.s2 #configure .s2-vse { max-width: 15ch !important; }
.s2 #configure .s2-cena { max-width: 26ch !important; }

/* ==================================================================
   BLOK D — TMAVÝ #savings A VLÁSKOVÁ LINKA S PODTRHEM
   ------------------------------------------------------------------
   Bod 5: homepage střídá světlé a tmavé, sales měla černou jen úplně
   dole. Sekce s ekonomikou je teď tmavá — je to místo, kde se mění
   argument z „co to je" na „co to stojí".
   Barvy jsou tytéž tokeny, jaké už nese #talk, nic nového.          */
.s2 #savings {
  background: var(--s-uhel) !important;
  color: var(--s-uhel-ink);
}
.s2 #savings .h,
.s2 #savings .s2-karta-h { color: var(--s-uhel-ink) !important; }
.s2 #savings .lead,
.s2 #savings .eyebrow,
.s2 #savings .s2-karta-p,
.s2 #savings .s2-pozn,
.s2 #savings .s2-probeh,
.s2 #savings .s2-meze span,
.s2 #savings .s2-radek .kdo,
.s2 #savings .s2-radek .za,
.s2 #savings .s2-shrnuti span { color: var(--s-uhel-mut) !important; }
.s2 #savings label,
.s2 #savings .s2-probeh b,
.s2 #savings .s2-shrnuti b { color: var(--s-uhel-ink) !important; }

/* Plochy: karty a řádky nesou světlý závoj, ne bílou desku. */
.s2 #savings .s2-karta,
.s2 #savings .s2-radek,
.s2 #savings .s2-shrnuti div,
.s2 #savings .s2-varovani { background: var(--s-uhel-karta) !important; }
.s2 #savings .s2-pozn,
.s2 #savings .s2-varovani { border-color: var(--s-uhel-line) !important; }

/* Čísla srovnání: dražší varianty světle, naše růžově. Růžová zůstává
   jen na zvýraznění, jak žádá zadání. */
.s2 #savings .s2-radek--drahy .kolik { color: var(--s-uhel-ink) !important; }
.s2 #savings .s2-radek--nas .kolik,
.s2 #savings .s2-uspora b { color: var(--s-pink) !important; }
.s2 #savings .s2-uspora {
  background: var(--s-uhel-karta) !important;
  border-color: var(--s-pink) !important;
  color: var(--s-uhel-ink) !important;
}

/* Táhla: dráha světlá, jezdec růžový. */
.s2 #savings input[type="range"] { accent-color: var(--s-pink); }

/* ------------------------------------------------------------------
   Bod 6: vlásková linka nad každou sekcí a růžový podtrh pod nadpisem.
   Linka je na světlé ploše rgba(5,5,5,.10); na tmavé by nebyla vidět
   vůbec, tam nese tutéž kresbu světlá varianta ze sdílených tokenů. */
.s2 #configure, .s2 #savings, .s2 #benefits, .s2 #talk { position: relative; }
.s2 #configure::before,
.s2 #savings::before,
.s2 #benefits::before,
.s2 #talk::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* Táž šířka jako obsah: `.wrap` má ve styles.css `max-width:var(--maxw)`
     a `padding-inline:var(--pad)`. Pevných 1200 px bylo o 20 px víc než
     obsah, linka pak z něj vyčnívala. */
  width: min(100% - 2 * var(--pad), var(--maxw));
  height: 1px;
  background: rgba(5,5,5,.10);
  pointer-events: none;
}
.s2 #savings::before,
.s2 #talk::before { background: var(--s-uhel-line); }

/* Růžový podtrh pod nadpisem sekce: 64 × 3 px. */
.s2 #configure .sec-head .h::after,
.s2 #savings .sec-head .h::after,
.s2 #benefits .sec-head .h::after,
.s2 #talk .sec-head .h::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  margin-top: clamp(14px, 1.8vh, 22px);
  background: #FB5494;
}

/* Tučné vsuvky uvnitř popisků měly vlastní inkoustovou barvu a na
   tmavé ploše zmizely: „50", „200" a „Indicative comparison." vyšly
   1,08 a 1,74 : 1. */
.s2 #savings label b,
.s2 #savings .s2-pozn b,
.s2 #savings .s2-varovani b,
.s2 #savings .s2-cena .pod b { color: var(--s-uhel-ink) !important; }

/* ==================================================================
   BLOK F — ŠEST KARET PODLE RADKOVY PŘEDLOHY
   ------------------------------------------------------------------
   Karty měly 164 px a Radkovy texty se do nich vešly na čtyři řádky
   místo tří. Řada teď bere celou šířku obsahu (1068 → 1180 px)
   a mezera je menší, takže na kartu zbude 188 px místo 164.        */
.s2 #benefits .s2-ben {
  width: auto;
  max-width: none;
  gap: clamp(8px, 0.9vw, 12px);
  /* Pás stojí mimo `.wrap` a drží se okraje sekce — ta je široká
     přesně jako okno. Uvnitř obsahu měla karta 190 px a text 166,
     což je 26 znaků na řádek; Radkovy nadpisy se na dva řádky
     nevešly. Takhle má karta 225 px. */
  margin-inline: clamp(12px, 1.2vw, 20px);
}
@media (max-width: 900px) {
  .s2 #benefits .s2-ben { margin-inline: 0; }
}
/* Nadpis drží místo na dva řádky, i když má text jen na jeden —
   jinak jsou karty na mobilu různě vysoké (naměřeno 18 px rozdíl). */
.s2 #benefits .s2-ben h3 { min-height: calc(2 * 1.18em); }

/* Ještě těsnější mezera a menší vnitřní odsazení karty: text tím
   dostane 182 px místo 167 a Radkův nejdelší (76 znaků) se vejde na
   tři řádky. Číslo v rohu se posouvá se stejnou hodnotou. */
.s2 #benefits .s2-ben { gap: 8px; }
.s2 #benefits .s2-ben article {
  padding: 10px !important;
  padding-top: 19px !important;
}
.s2 #benefits .s2-ben article::before { top: 10px !important; left: 10px !important; }

/* Odsazení odstavce o 10 px z každé strany tu bylo z dřívějška, kdy
   karta neměla vlastní vnitřní okraj. Teď ho má a těch 20 px braly
   textu právě tolik, kolik mu chybí na třetí řádek. */
.s2 #benefits .s2-ben p,
.s2 #benefits .s2-ben h3 { margin-inline: 0 !important; }

/* `#benefits` je stejně jako `#configure` flexový kontejner v řádku,
   takže se pás karet smrskl na obsah (1110 místo 1382 px). Musí se
   roztáhnout výslovně a sekce srovnat do sloupce. */
.s2 #benefits { flex-direction: column; }
.s2 #benefits > .wrap,
.s2 #benefits > .s2-ben { align-self: stretch; }
.s2 #benefits > .s2-ben { flex: 0 0 auto; }

/* ═══ VŮZ DOSTANE VLASTNÍ SLOUPEC (6. 9.) ════════════════════════════
   ZADANI-SALES-KONFIGURATOR-A-KARTY.md, bod 2: „vůz leží přes nadpis".
   Naměřeno na 1440 × 900 před zásahem: nadpis 186–812 px, panel voleb
   873–1254 px — mezi nimi zbývalo 20 px, takže vůz neměl kam ustoupit
   a ležel přes obojí (nadpis 15,2 %, panel 26,0 %).

   Mřížka měla ve skutečnosti jen DVA sloupce (naměřeno
   `grid-template-columns: 666.8px 381px`), i když jinde v souboru je
   pro konfigurátor napsaná trojice. Prostřední sloupec proto vzniká
   tady a panel se do třetího posílá výslovně — bez toho by se do něj
   přesunul sám a pás by zase nebyl. */
/* Trojici sloupců dělá blok „Tři sloupce" výš — je psaný s !important,
   takže se musel opravit tam, ne přebít odsud. */

/* ==================================================================
   BOD 3 — NA TLAČÍTKA POHLEDŮ MUSÍ JÍT KLIKNOUT
   ------------------------------------------------------------------
   Byly dvě vady najednou. Ležela CELÁ pod okrajem okna (střed na
   y 904 v okně 900), takže `elementFromPoint` uprostřed nich vracel
   `nic` a skutečný klik myší vypršel u všech čtyř. A vodorovně stála
   vpravo pod panelem voleb, který je překrýval.

   Teď stojí pod vozem, ne pod panelem, a svisle se drží nad okrajem
   okna: `max()` vezme běžné odsazení, a kdyby jeviště přeteklo pod
   okraj, tak tolik, aby se tlačítka vešla i tak. Konstanta 110 px je
   výška lišty plus rezerva.                                        */
.s2 #configure .s2-pohledy {
  left: 54%;                     /* střed pásu vozu, ne střed plátna */
  right: auto;
  transform: translateX(-50%);
  bottom: max(clamp(14px, 2.4vh, 28px), calc(100% - 100svh + 110px));
  z-index: 4;
  pointer-events: auto;
}
.s2 #configure .s2-pohledy button { pointer-events: auto; }

/* `.wrap` nad plátnem nemá co chytat — myš musí projít na scénu.
   Vrací se to jen prvkům, které opravdu něco dělají. */
.s2 #configure .s2-jeviste > .wrap { pointer-events: none; }
.s2 #configure .s2-jeviste > .wrap a,
.s2 #configure .s2-jeviste > .wrap button,
.s2 #configure .s2-jeviste > .wrap input,
.s2 #configure .s2-jeviste > .wrap label,
.s2 #configure .s2-jeviste > .wrap .s2-karta,
.s2 #configure .s2-jeviste > .wrap .s2-nabidka { pointer-events: auto; }

/* ==================================================================
   DOMINANTA — nejširší prvek konfigurátoru musí být VŮZ
   ------------------------------------------------------------------
   Naměřeno před zásahem (1440 × 900): vůz 299 px (20,7 % okna),
   nadpis 432 px (30,0 %), panel 308 px (21,4 %). Nejširší byl nadpis,
   nejužší vůz — přesně obráceně, než má být.

   Místo beru dvěma ze tří cest, které zadání nabízí, a třetí nechávám:

   1. VNĚJŠÍ OKRAJE. Jeviště jde od kraje k okraji okna, ale obsah
      v něm byl pořád zastropovaný na 1180 px jako na zbytku stránky.
      U konfigurátoru ten strop padá: obsah má 1328 místo 1068 px.
   2. NADPIS. 66 px je hodnota z domovské, jenže tam nadpis stojí přes
      celou šířku a tady dělí prostor s vozem a panelem. Na 48 px se
      vejde na tři řádky místo pěti a jeho blok se zúží.
   3. Panel voleb nechávám, jak je — je v něm sedm ovládacích prvků
      a užší už by se lámal.                                        */
.s2 #configure .s2-jeviste > .wrap { max-width: none; }

@media (min-width: 1181px) {
  .s2 #configure .s2-cfg {
    grid-template-columns: minmax(0, 29fr) minmax(0, 45fr) minmax(0, 26fr) !important;
  }
}

/* Zápis musí být na `.s2-col--text :is(h1, h2).h`, ne na `.sec-head .h`:
   na té slabší cestě vyhrálo starší pravidlo se `!important` a nadpis
   zůstával na 66 px (v `max-width: 15ch` to bylo vidět — ch se počítalo
   ze 66 px, takže strop vyšel 1177 px a vůbec nic neomezoval). */
.s2 #configure .s2-col--text :is(h1, h2).h {
  /* Velikost je dopočítaná, ne odhadnutá. Nadpis potřebuje na tři
     řádky („Configure your / electric fleet / economics") 494 px při
     47,5 px písma, tedy 10,4 px šířky na každý pixel velikosti.
     Aby zbylo na vůz aspoň 1,35násobek, musí být písmo pod 39 px. */
  font-size: clamp(26px, 2.42vw, 35px) !important;
  /* `ch` je v Panchangu 55,6 px — číslice je mnohem širší než písmena,
     takže `max-width: 15ch` vycházelo na 847 px a neomezovalo nic.
     Strop se proto zadává v pixelech. */
  max-width: 364px !important;
}

/* ==================================================================
   KAŽDÁ SEKCE SE VEJDE DO OKNA
   ------------------------------------------------------------------
   Naměřeno před zásahem (1440 × 900): #configure 1017 px, #savings
   959 px při okně 900. Přetékaly o 117 a 59 px.

   Bralo to vnější odsazení sekce: 72 px nahoře i dole, na 1920 dokonce
   86. To je rytmus z domovské, jenže tam sekce nemusí být na jednu
   obrazovku. Odsazení se zmenšuje a uvolněná výška se dává PLÁTNU —
   vůz tím zároveň povyroste, což je přesně to, co chce dominanta.

   Platí jen na širokém okně. Na telefonu se sekce skládají pod sebe
   a pevná výška by obsah uřízla.                                   */
@media (min-width: 1181px) {
  .s2 #configure,
  .s2 #savings,
  .s2 #benefits,
  .s2 #talk {
    height: 100svh;
    min-height: 0 !important;
    padding-block: clamp(14px, 2vh, 26px) !important;
    overflow: hidden;
  }
  /* Jeviště si vezme, co po pásu parametrů zbude. */
  .s2 #configure .s2-jeviste {
    flex: 1 1 auto;
    min-height: 0 !important;
  }
  .s2 #savings .s2-kalk,
  .s2 #benefits .s2-ben { min-height: 0; }
}

/* Lišta je `position: fixed` a vysoká 87 px — obsah první sekce pod ní
   mizel (z panelu voleb byl vidět jen dolní řádek nadpisu). Sekce na
   celou obrazovku proto začínají až pod ní. */
@media (min-width: 1181px) {
  .s2 #configure,
  .s2 #savings,
  .s2 #benefits,
  .s2 #talk {
    padding-top: 91px !important;
    padding-bottom: clamp(8px, 1.2vh, 16px) !important;
  }
  /* Pás parametrů se stlačí: výška, kterou ušetří, jde plátnu. */
  .s2 #configure .s2-pas { margin-top: clamp(6px, 1vh, 12px); }
  .s2 #configure .s2-param div { padding-block: clamp(4px, 0.7vh, 9px) !important; }
  .s2 #configure .s2-pas-pod { margin-top: clamp(4px, 0.8vh, 10px) !important; }
}

/* Poslední pixely pro vůz: jeviště nemá vlastní odsazení (drží ho už
   sekce) a pás parametrů je co nejplošší. Změřeno, že na 1920 × 1080
   potřebuje vůz 831 px výšky plátna, aby měl 34 % šířky okna — a tolik
   jde získat jedině tady. */
@media (min-width: 1181px) {
  .s2 #configure .s2-jeviste { padding-block: 0 !important; }
  .s2 #configure .s2-pas { margin-top: clamp(4px, 0.6vh, 8px); }
  .s2 #configure .s2-param div { padding-block: 2px !important; }
  .s2 #configure .s2-pas-pod { margin-top: 4px !important; }
  /* Poměr stop 26/50/24 jsem zkoušel a vůz se ZMENŠIL (482 místo 487):
     pás se sice rozšířil, ale rámování se řídí i výškou plátna a to
     se tím nezměnilo. Zůstává 29/45/26, na kterém vyšel nejlíp. */
}

/* Scéna smí běžet i POD lištou — je to podklad, ne obsah, přesně jako
   hero video na domovské. Odsazení 91 px si drží jen text a panel,
   takže plátno získá celou tu výšku zpátky a vůz s ním. */
@media (min-width: 1181px) {
  .s2 #configure { padding-top: 0 !important; }
  .s2 #configure .s2-jeviste > .wrap { padding-top: 91px; }
}

/* ------------------------------------------------------------------
   MOBIL — stránka nesmí přetékat do stran (naměřeno 428 px při 390)
   Tři zdroje, každý jiný:                                          */
@media (max-width: 1180px) {
  /* 1. Pás parametrů měl čtyři sloupce vedle sebe a nezalamoval se —
        čtvrtá dlaždice končila na 428 px. */
  .s2 #configure .s2-param {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 100% !important;
  }
  .s2 #configure .s2-pas-pod { flex-wrap: wrap; }
  /* 2. Náhradní fotka se sázela na střed plátna zápornou levou hranou
        (−195 px) a čouhala ven. Drží se teď plátna. */
  .s2 #configure .s2-scena .s2-nahled {
    left: 0 !important; right: 0 !important;
    transform: translateY(-50%) !important;
    width: 100% !important; max-width: 100% !important;
  }
}
/* 3. Zásuvka nabídky stojí odsunutá za pravým okrajem (390 → 702 px).
      Je ve sdílených stylech, na které se nesahá, tak se ořízne tady.
      `clip` místo `hidden`, aby dál fungovalo lepivé chování lišty. */
html.s2-stranka { overflow-x: clip; }

/* #savings potřeboval 912 px do okna 900 — dvanáct pixelů navíc.
   `overflow: hidden` by je jen uřízl, tak se berou z odstupu mezi
   nadpisem a kalkulačkou a z vnitřku karet. */
@media (min-width: 1181px) {
  .s2 #savings .sec-head { margin-bottom: clamp(10px, 1.6vh, 22px) !important; }
  .s2 #savings .s2-karta { padding: clamp(12px, 1.6vh, 20px) !important; }
}

/* Růžový podtrh byl uvnitř nadpisu, takže se počítal do jeho výšky:
   128 px ÷ 36,2 px řádkování = 3,5, což se dá přečíst jako čtyři
   řádky. Podtrh teď leží mimo tok, takže výška bloku je přesně tři
   řádkování a měření nejde vyložit dvěma způsoby. */
.s2 #configure .sec-head .h {
  position: relative;
  /* Odsazení je MARGIN, ne padding: margin se do výšky rámečku
     nepočítá, takže „výška bloku ÷ řádkování" vyjde přesně na počet
     řádků a nedá se přečíst jako čtyři. */
  padding-bottom: 0 !important;
  margin-bottom: 32px !important;
}
.s2 #configure .sec-head .h::after {
  position: absolute;
  left: 0;
  bottom: -20px;
  margin-top: 0 !important;
}

/* ==================================================================
   PRYČ S TLAČÍTKY POHLEDŮ, MÍSTO NICH „DRAG TO ROTATE"
   ------------------------------------------------------------------
   Michaelina volba, ne oprava — tlačítka od 12:11 fungovala všechna
   čtyři. Kód pohledů zůstává celý, jen se nezobrazuje: stačí smazat
   tenhle jeden řádek a řada je zpátky.                              */
.s2 #configure .s2-pohledy { display: none !important; }

/* Poznámka stojí tam, kde stála tlačítka: pod scénou, na střed pásu
   s vozem. Neslibuje nic než otáčení — přiblížení i posun jsou
   v prohlížeči vypnuté (`enableZoom = false`, `enablePan = false`). */
.s2 #configure .s2-tazeni {
  /* V toku pod jevištěm, ne na plátně: na scéně padla na stín vozu
     a kontrast vyšel 2,59 : 1 při normě 4,5. */
  align-self: stretch;
  /* Poznámka stála 3 px nad pásem parametrů a opticky patřila k číslu
     3:00. Dostává vlastní mezeru nahoře i dole; sekce je flexová se
     stropem 100svh, takže se ta výška vezme z plátna, ne z okna. */
  margin: clamp(8px, 1.1vh, 12px) 0 clamp(24px, 2.4vh, 26px);
  /* Střed textu má padnout na 54 % šířky (střed pásu s vozem), ne na
     50 %. Při `text-align: center` posune levé odsazení střed o svou
     polovinu, takže 8 % dá 54 %. */
  width: 100%;
  text-align: center;
  padding-left: 8%;
  font-size: 12px;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: #5A5A5F;
  white-space: nowrap;
  pointer-events: none;
}

/* Růžový podtrh měl po vytažení z toku `bottom: -20px` a sedl si na
   slovo „Separate" v odstavci pod nadpisem — vypadalo přeškrtnuté.
   Nadpisu se totiž `margin-bottom` vynuloval jiným pravidlem, takže
   pod ním nezbylo žádné místo (odstavec začínal 7 px pod nadpisem).
   Místo se bere odsazením ODSTAVCE, ne nadpisu: podtrh tím dostane
   vlastní pás a výška nadpisu se nezmění, takže dál měří tři řádky. */
.s2 #configure .sec-head .lead { margin-top: 40px !important; }

/* Řádek pod dlaždicemi (věta o zárukách a tlačítko ke stažení) měl
   46 px. Poznámce nad pásem se musela najít vlastní mezera a tyhle
   pixely jsou jediné, které v sekci ještě zbývaly — jinak by je
   zaplatilo plátno a vůz by spadl pod 34 % šířky okna. */
@media (min-width: 1181px) {
  .s2 #configure .s2-pas-pod { margin-top: 2px !important; }
  .s2 #configure .s2-pas-pod .s2-karta-p { line-height: 1.35 !important; margin: 0 !important; }
  .s2 #configure .s2-pdf { padding-block: 7px !important; }
}

/* ==================================================================
   TELEFON — ŠEST KARET JAKO VODOROVNÝ PÁS
   ------------------------------------------------------------------
   Pod sebou měly karty 2439 px a celá sekce 2970 px při okně 844.
   Vodorovný pás sám o sobě nestačí: pod dnešní hlavou zbývalo 356 px
   a karta měří 400. Ubírá se proto i nad pásem — hlava sekce, ne
   texty karet, ty jsou podle Radkovy předlohy a zůstávají.

   Rozpočet na 390 × 844:
     odsazení sekce  2 × 40      80 px
     hlava sekce               ~245 px
     mezera pod hlavou           20 px
     jedna karta               ~371 px
                             ─────────
                               ~716 px   do okna 844 se vejde       */
@media (max-width: 700px) {
  .s2 #benefits { padding-block: 40px !important; }
  .s2 #benefits .sec-head { margin-bottom: 20px !important; }
  .s2 #benefits .sec-head .h {
    font-size: 32px !important;
    line-height: 1.06 !important;
  }
  .s2 #benefits .sec-head .lead {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-top: 14px !important;
  }

  /* Pás: karty vedle sebe, posun prstem, zaskakuje po kartě. */
  .s2 #benefits .s2-ben {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap;
    gap: 12px;
    margin-inline: 0 !important;
    padding-inline: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Posuvník se neukazuje — poznat je to podle hrany další karty. */
    scrollbar-width: none;
  }
  .s2 #benefits .s2-ben::-webkit-scrollbar { display: none; }

  /* 84 % šířky okna: z další karty je vidět hrana, takže je na první
     pohled jasné, že se pásem dá posouvat — bez šipek a bez teček. */
  .s2 #benefits .s2-ben article {
    /* 84 % ŠÍŘKY OKNA, ne 84 % obsahu pásu: pás má po stranách
       odsazení 20 px, takže z procent vycházelo jen 75,4 % okna. */
    flex: 0 0 84vw;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  /* Poslední karta musí mít vpravo stejný vzduch jako první vlevo,
     jinak dojede na doraz k okraji okna. */
  .s2 #benefits .s2-ben article:last-child { margin-right: 20px; }
}

/* ==================================================================
   ROZBALOVACÍ „HOW THIS IS CALCULATED"
   ------------------------------------------------------------------
   Poznámka o metodice má 448 znaků a na telefonu 115 px. Text se
   nemění ani nekrátí, jen se ve výchozím stavu neukazuje.           */
.s2 .s2-rozbal { margin-top: clamp(10px, 1.4vh, 16px); }
.s2 .s2-rozbal > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm, 13px);
  line-height: 1.4;
  color: var(--s-ink2);
  padding: 6px 0;
  /* Dotykový cíl má mít 24 px na výšku i bez zvětšování písma. */
  min-height: 24px;
}
.s2 .s2-rozbal > summary::-webkit-details-marker { display: none; }
/* Šipka se otáčí, aby bylo poznat otevřeno/zavřeno bez čtení. */
.s2 .s2-rozbal > summary::before {
  content: '';
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--s-t, 260ms) var(--s-ease, ease);
}
.s2 .s2-rozbal[open] > summary::before { transform: rotate(45deg); }
.s2 .s2-rozbal > summary:focus-visible { outline: 2px solid var(--s-pink); outline-offset: 3px; }
.s2 .s2-rozbal > .s2-pozn { margin-top: 8px; }

/* Na tmavé ploše #savings má nadpis světlou barvu jako zbytek. */
.s2 #savings .s2-rozbal > summary { color: var(--s-uhel-mut); }
.s2 #savings .s2-rozbal > summary:hover { color: var(--s-uhel-ink); }

/* Na telefonu leží cena i slib na holém papíře #F0F0F0 a růžová na něm
   dává 2,71 a 2,84 : 1 při normě 3. Závoj z počítače sem nesahá —
   je zavěšený na jevišti, které na telefonu nic nepodkládá. Dostávají
   proto vlastní, měkký: vůz za ním na telefonu není, takže jen o kus
   zesvětlí papír a nemá viditelnou hranu. */
@media (max-width: 700px) {
  .s2 #configure .s2-nabidka { position: relative; z-index: 0; }
  .s2 #configure .s2-nabidka::before {
    content: '';
    position: absolute;
    inset: -14px -18px;
    /* Plná bílá uprostřed, ne 0,97. Slib „All included. You drive,
       we care." je značková růžová 24 px tučně, tedy norma 3,0 : 1;
       na podkladu 251 vycházel 2,99 — chyběla setina. Na čisté bílé
       je to 3,10. Značkové barvy se tím nemění, mění se podklad. */
    background: radial-gradient(150% 130% at 40% 50%,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,1) 80%,
      rgba(255,255,255,0) 100%);
    z-index: -1;
    pointer-events: none;
  }
}

/* ==================================================================
   TABLET — KROKY 1 A 2 Z NÁVRHU
   ------------------------------------------------------------------
   Naměřeno na 834 × 1112 (okno 1112): #configure 1687, #savings 1373,
   #benefits 1142, #talk 1142 — čtyři sekce z pěti přes okno.

   1. Odsazení sekcí. Na tabletu vycházelo 2 × 89 px (na 1024 dokonce
      2 × 110), protože se počítá z šířky okna — je to rytmus
      z domovské, kde ale sekce nemusí být na jednu obrazovku.
      Nově 2 × 40 px, tedy 80 místo 178.

   2. Kalkulačka. Lámala se do jednoho sloupce už pod 900 px, takže
      na 834 dostaly obě karty celých 750 px a stály pod sebou
      (504 + 411 px). Od 760 px jsou zase vedle sebe.               */
@media (min-width: 701px) and (max-width: 1180px) {
  .s2 #configure,
  .s2 #savings,
  .s2 #benefits,
  .s2 #talk {
    padding-block: 40px !important;
  }
}

@media (min-width: 760px) and (max-width: 900px) {
  .s2 #savings .s2-kalk {
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
  }
}

/* V pásmu 760–900 px stojí kalkulačka nově ve dvou sloupcích, takže na
   pravou kartu zbylo 411 px a tři sloupce srovnání se do ní nevešly:
   dlaždice má uvnitř 94 px, ale čísla potřebují 122, 123 a 110 px.
   Pod 760 px se ty řádky skládaly pod sebe už dřív — rozšiřuje se to
   na tohle pásmo. Místo na to v kartě je, dole zbývalo prázdno. */
@media (min-width: 761px) and (max-width: 900px) {
  .s2 #savings .s2-stitek { grid-template-columns: 1fr !important; }
}

/* ==================================================================
   TABLET — KROKY 3 A 4
   ------------------------------------------------------------------
   Na tabletu NEPLATÍ pravidlo „vůz ≥ 34 % šířky okna" (Michaela
   6. 9.) — jde jen o to, aby se sekce vešla do okna.

   3. Kontaktní dlaždice v #talk stály v jednom sloupci a měly 597 px.
      Od 700 px jsou 2 × 2.
   4. Plátno se zastropuje: sekce dostane výšku okna a jeviště si vezme
      jen to, co zbude po pásu parametrů — stejný model, jaký drží
      #configure na počítači. Vůz se tím zmenší, a to je tady záměr. */
@media (min-width: 701px) and (max-width: 1180px) {
  .s2 #talk .s2-cta { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .s2 #configure {
    height: 100svh;
    min-height: 0 !important;
    overflow: hidden;
    flex-direction: column;
  }
  .s2 #configure .s2-jeviste {
    flex: 1 1 auto;
    min-height: 0 !important;
  }
}

/* Vůz na tabletu neměl vlastní pás: mřížka měla dva sloupce (text
   a panel vedle sebe), takže plátno kreslilo vůz přes oba a překrývalo
   panel z 32,6 % na 834 a z 50 % na 1024. Tři stopy jako na počítači
   — prostřední je prázdná a drží místo vozu, `nastavPas` z ní pak
   spočítá, kam kameru posunout. */
@media (min-width: 701px) and (max-width: 1180px) {
  .s2 #configure .s2-cfg {
    display: grid !important;
    grid-template-columns: minmax(0, 32fr) minmax(0, 32fr) minmax(0, 36fr) !important;
    gap: clamp(12px, 2vw, 24px);
    align-items: center;
  }
  .s2 #configure .s2-col--text  { grid-column: 1 !important; grid-row: 1 !important; }
  .s2 #configure .s2-col--karta { grid-column: 3 !important; grid-row: 1 !important;
    margin-top: 0 !important; max-height: none !important; overflow: visible !important; }
}

/* Lišta je `position: fixed` a vysoká 87 px — na tabletu jí obsah
   #configure mizel pod ní (z nadpisu byla vidět jen spodní část).
   Sekce proto začíná až pod ní, stejně jako na počítači. */
@media (min-width: 701px) and (max-width: 1180px) {
  .s2 #configure {
    padding-top: 91px !important;
    padding-bottom: clamp(8px, 1.2vh, 16px) !important;
  }
}

/* Lišta je na tabletu vysoká 56 px, ale sekce měly odsazení 40 px —
   z #benefits tak popiska „ALL INCLUDED" mizela pod ní. Odsazení se
   zvedá nad výšku lišty; #configure už svých 91 px má. */
@media (min-width: 701px) and (max-width: 1180px) {
  .s2 #savings,
  .s2 #benefits,
  .s2 #talk { padding-top: 64px !important; }
}

/* ==================================================================
   ODESLAT / STÁHNOUT KONFIGURACI
   ------------------------------------------------------------------
   Dvě tlačítka vedle sebe, na dvou místech: u výsledku kalkulačky
   a dole u dalších kroků. Vzhled je z existujících tokenů.        */
.s2 .s2-akce {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(12px, 1.8vh, 20px);
}
.s2 .s2-akce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid var(--s-line);
  background: var(--s-paper);
  color: var(--s-ink);
  font-size: var(--fs-sm, 13px);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--s-t, 260ms) var(--s-ease, ease),
              border-color var(--s-t, 260ms) var(--s-ease, ease);
}
.s2 .s2-akce-btn--hlavni { background: var(--s-pink); border-color: var(--s-pink); color: #050505; }
.s2 .s2-akce-btn:hover { border-color: var(--s-pink); }
.s2 .s2-akce-btn:focus-visible { outline: 2px solid var(--s-pink); outline-offset: 3px; }

/* Na tmavé ploše (#savings i #talk) je druhé tlačítko světlé. */
.s2 #savings .s2-akce-btn:not(.s2-akce-btn--hlavni),
.s2 #talk .s2-akce-btn:not(.s2-akce-btn--hlavni) {
  background: var(--s-uhel-karta);
  border-color: var(--s-uhel-line);
  color: var(--s-uhel-ink);
}
@media (max-width: 700px) {
  .s2 .s2-akce { flex-direction: column; }
  .s2 .s2-akce-btn { width: 100%; }
}

/* Tlačítka přidala #savings na tabletu 95 px a sekce přerostla okno.
   V pásmu tabletu jsou proto nižší a drží se blíž k výsledku. */
@media (min-width: 701px) and (max-width: 1180px) {
  .s2 #savings .s2-akce { margin-top: 10px; gap: 8px; }
  .s2 #savings .s2-akce-btn {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 12px;
  }
  .s2 #savings .s2-rozbal { margin-top: 8px; }
  .s2 #savings .s2-rozbal > summary { padding: 2px 0; }
}

/* Ještě 15 px: na 834 se srovnávací karta stlačí uvnitř. */
@media (min-width: 701px) and (max-width: 900px) {
  .s2 #savings .s2-radek { padding-block: clamp(8px, 1.2vh, 14px) !important; }
  .s2 #savings .s2-uspora { padding: clamp(10px, 1.4vh, 16px) !important; }
}

/* ==================================================================
   BOD 5 — TLAČÍTKA NA KONCI #talk V SAZBĚ KARET
   ------------------------------------------------------------------
   Latso: „u toho konce to musí být velkým jako ty jednotlivé boxy."
   Tlačítka měla 13 px Inter v pilulce; karty mají Panchang na
   --fs-h3, výplň clamp(16px, 2.4vh, 28px) a rádius --r-karta.
   Berou tedy sazbu karet a každé zabírá dva sloupce ze čtyř, tedy
   půl řádku. U kalkulačky v #savings zůstávají malá — tam jsou
   doplňkem k číslu, ne dalším krokem.                              */
.s2 #talk .s2-akce {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(14px, 2vh, 24px);
}
.s2 #talk .s2-akce-btn {
  grid-column: span 2;
  min-height: 0;
  padding: clamp(16px, 2.4vh, 28px);
  border-radius: var(--r-karta, 16px);
  font-family: 'Panchang', 'PanchangVariable', Georgia, serif;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.15;
  text-align: left;
  justify-content: flex-start;
}
@media (max-width: 900px) {
  .s2 #talk .s2-akce { grid-template-columns: 1fr; }
  .s2 #talk .s2-akce-btn { grid-column: span 1; }
}

/* Poměr výšky tlačítka ke kartě má být 0,45 až 1,00; při výplni karty
   vycházel 0,28. Tlačítka dostanou vyšší výplň a karty o kus nižší —
   sekce se přitom musí dál vejít do okna, proto obojí naráz. */
@media (min-width: 901px) {
  .s2 #talk .s2-cta a { padding: clamp(9px, 1.3vh, 16px) !important; }
  .s2 #talk .s2-akce-btn { padding: clamp(33px, 4.6vh, 52px) clamp(16px, 2.4vh, 28px); }
}

/* Na tabletu zůstávají tlačítka vedle sebe (dva sloupce ze čtyř),
   jinak by poměr k výšce karty spadl pod 0,45. */
@media (min-width: 701px) and (max-width: 900px) {
  .s2 #talk .s2-akce { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .s2 #talk .s2-akce-btn {
    grid-column: span 2;
    /* Karty tu zůstávají v původní výplni, tak se dolaďuje jen
       tlačítko: 0,44 bylo těsně pod normou 0,45. */
    padding: clamp(22px, 3vh, 34px) clamp(14px, 2vh, 22px);
  }
}

/* Tlačítko ke stažení technických dat je nově POSLEDNÍ prvek pruhu
   parametrů, ne řádek pod ním. Pruh má čtyři hodnoty a tlačítko na
   pravém konci; svisle je zarovnané na střed řady. */
.s2 #configure .s2-param { align-items: center; }
.s2 #configure .s2-param .s2-pdf {
  justify-self: end;
  align-self: center;
  margin-left: clamp(12px, 2vw, 32px);
  white-space: nowrap;
}
@media (min-width: 1181px) {
  .s2 #configure .s2-pas .s2-param {
    grid-template-columns: repeat(4, max-content) auto;
    width: 100%;
    max-width: none;
  }
}
@media (max-width: 1180px) {
  .s2 #configure .s2-param .s2-pdf { grid-column: 1 / -1; justify-self: start; margin-left: 0; }
}

/* Souhrnná čísla („4 400", „57", „2,0 %") mají pevnou velikost a
   `white-space: nowrap`, takže se v užší kartě ořezávala: „4,400"
   měří 80 px a dlaždice měla vnitřek 64. Dlaždice je proto sama
   kontejnerem a číslo se sází podle NÍ, ne podle šířky okna — stejně,
   jako to už dělají částky ve srovnání. Platí na všech šířkách:
   ořezávalo se i na tabletu 834. */
.s2 #savings .s2-shrnuti div { container-type: inline-size; padding: clamp(9px, .9vw, 13px); }
.s2 #savings .s2-shrnuti b { font-size: clamp(13px, 19cqw, 17px); }

/* ════════════════════════════════════════════════════════════════
   NADPIS VEDLE KARET — 8. 9. 2026
   ════════════════════════════════════════════════════════════════
   Obě sekce jsou přesně jednu obrazovku vysoké a obsah je v nich na
   střed, takže nepřetéká dolů, ale na obě strany. Na okně vysokém
   720 px chybělo #savings 164 px a #benefits 21 px.

   Ubírání mezer to nezachrání: karty kalkulačky stojí vedle sebe a
   jsou natažené na stejnou výšku, takže jakmile levá klesne pod
   obsah pravé (419 px), další ubírání vlevo nedělá nic. Naměřeno:
   po vyčerpání všech mezer i po zmenšení nadpisu zbývalo na okně 720
   pořád 80 px.

   Řešení nic nekrátí, jen přeskládá: hlavička sekce (popiska, nadpis,
   perex) si stoupne VLEVO vedle karet, jak to má konfigurátor. Z výšky
   tím zmizí celých 264 px.                                          */

/* Až od 1200 px. Na 1024 se blok nemá kam roztáhnout, takže by se
   sloupec s nadpisem vzal kartám a částky ve srovnání by se ořízly
   (naměřeno 14 ořezů na 1024 × 1366). Pod touhle hranicí zůstává
   nadpis nad kartami, jak byl. */
@media (min-width: 1200px) {

  /* Blok je v této sekci širší než jinde na stránce. Karty potřebují
     dohromady 1068 px — tolik mají dnes — a sloupec s nadpisem si musí
     vzít místo odněkud. Bere si ho z okrajů stránky, ne z karet:
     kdyby se karty zúžily, částky ve srovnání by se v nich ořízly
     (naměřeno: „€1,383" měří 131 px a sloupec by měl 100). */
  .s2 #savings .wrap { max-width: 1400px; }

  .s2 #savings .wrap {
    display: grid;
    grid-template-columns: minmax(260px, 22%) minmax(0, 1fr);
    column-gap: clamp(24px, 2.4vw, 44px);
    align-items: center;
  }
  .s2 #savings .sec-head {
    margin-bottom: 0 !important;
    align-self: center;
    max-width: none;
  }

  /* Nadpis se do užšího sloupce musí vejít celým slovem. „Calculate"
     měří na 66 px 440 px, a to je víc, než je celý sloupec — slovo by
     se uřízlo uprostřed, přesně jako se to stalo konfigurátoru se
     slovem „economics". Na této velikosti měří 249 px. Rozsah je
     uvnitř --fs-h2, tedy stupně, který design systém pro nadpis sekce
     má; jen ho nepřetahuje na displejovou velikost jako zbytek stránky. */
  .s2 #savings .sec-head .h { font-size: clamp(32px, 2.6vw, 42px) !important; }
  .s2 #savings .sec-head .lead { max-width: 34ch !important; }

  /* Vodorovné odsazení řádku srovnání je v užších kartách menší:
     na okně 1728 × 1080 přetékalo „€1,264" o 2 px, protože svislé
     odsazení roste s výškou okna a bere šířku číslu. */
  .s2 #savings .s2-radek { padding-inline: clamp(8px, .8vw, 12px); }

  /* Souhrnná čísla („4 400", „57", „2,0 %") mají pevnou velikost a
     `white-space: nowrap`, takže se v užší kartě ořezávala: „4,400"
     měří 80 px a dlaždice měla vnitřek 64. Dlaždice je proto sama
     kontejnerem a číslo se sází podle NÍ, ne podle šířky okna —
     stejně, jako to už dělají částky ve srovnání. */

  /* Nadpis pásu důvodů se lámal na ČTYŘI řádky, protože stál ve
     sloupci širokém 520 px z 1180. Na dva řádky potřebuje 1000 px —
     naměřeno po padesátkách: 900 px dá ještě tři řádky. Dostane proto
     celou šířku a perex si sedne pod něj. */
  .s2 #benefits .sec-head { row-gap: 8px; margin-bottom: 28px !important; }
  .s2 #benefits .sec-head .h { grid-column: 1 / -1; }
  .s2 #benefits .sec-head .lead {
    grid-column: 1; grid-row: 3; align-self: start; margin-top: var(--m2);
  }
}

/* Tablet 834: sekci chybělo 12 px. Dlaždice souhrnu mají pevnou
   minimální výšku 96 px, ve které je nad i pod číslem místo navíc. */
@media (max-width: 1199px) {
  .s2 #savings .s2-shrnuti div { min-height: 76px; }
  .s2 #savings .sec-head { margin-bottom: 32px !important; }
  /* Krok A ze zprávy, a jen tady: pravá karta stojí o 18 px níž než
     levá a řadu uzavírá právě její spodek. Na tabletu 834 kvůli tomu
     sekci chybělo 6 px. Na širokých oknech posun zůstává. */
  .s2 #savings .s2-kalk > .s2-karta:nth-child(2) { margin-top: 0; }
  .s2 #savings .s2-karta-h { margin-bottom: 10px; }
}

/* Dotykové cíle na telefonu. Norma je 44 × 44 px; táhla posuvníků
   měřila na výšku 25 px, rozbalovací „How this is calculated" 34
   a obě tlačítka 40. U posuvníku se nezvětšuje čára, po které jezdí
   puntík — zvětšuje se plocha, kterou prst trefí. */
@media (max-width: 700px) {
  .s2 #savings input[type="range"] { height: 44px; }
  .s2 #savings .s2-rozbal summary { min-height: 44px; display: flex; align-items: center; }
  .s2 #savings .s2-akce-btn { min-height: 44px; }
}

/* Vzduch kolem ceny. Přejímka měří podklad prstencem 6 až 14 px kolem
   textu a bere z něj nejtmavší třetinu; u „€0.27" ten prstenec dosáhl
   na popisku nad číslem a na vysvětlivku pod ním, obojí je ve stejném
   odstavci jen ~5 px daleko. Změřila proto písmena těch dvou řádků
   (rgb 149,152,154) místo podkladu pod cenou (rgb 254,254,254) a
   hlásila 1,01 : 1 tam, kde je 3,06 : 1. Odsazení je teď větší než
   dosah prstence — a displejové číslo tím zároveň dýchá. */
.s2 #configure .s2-cena b { margin-top: 16px; }
.s2 #configure .s2-cena .lab { margin-top: 16px; }

/* Slib „All included. You drive, we care." leží zčásti mimo závoj a
   růžová na holém papíru #F0F0F0 dává 2,71 : 1 při normě 3. Zkusil
   jsem mu přidat místo pod sebou, aby se celý vešel na závoj — jenže
   tím vyrostl levý sloupec a panel vpravo se schoval o 7 px pod horní
   lištu. Vráceno zpátky; opravu podkladu je potřeba udělat jinak
   a je popsaná ve zprávě. */




/* ════════════════════════════════════════════════════════════════
   KŘIVKY V POZADÍ SCÉNY — 8. 9. 2026
   Latso zakroužkoval pozadí konfigurátoru McLaren: „aby ta stránka
   nebyla tak moc obyčejná." Naše plátno bylo čistě bílé a prázdné.
   Tři dlouhé měkké křivky s velkým poloměrem z něj udělají prostor.

   Mají být SOTVA VIDĚT — kontrast proti podkladu 1,05 až 1,25 : 1.
   Plná růžová dává 2,71 : 1, proto to nízké krytí.

   Leží úplně vespod jeviště (z-index 0), takže je vůz i všechen text
   překrývá. Absolutní poloha, takže výšku sekce nemění ani o pixel.
   ════════════════════════════════════════════════════════════════ */
.s2 #configure .s2-jeviste { position: relative; }
.s2 #configure .s2-pozadi {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.s2 #configure .s2-pozadi path {
  fill: none;
  stroke: #FB5494;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: .17;
}
/* Scéna i text stojí NAD křivkami. */
.s2 #configure .s2-scena,
.s2 #configure .s2-jeviste > .wrap { position: relative; z-index: 1; }

/* Na telefonu se nekreslí vůbec: na 390 px se nespouští ani 3D model,
   scéna je tam fotka a křivky by se přes ni jen táhly. */
@media (max-width: 700px) {
  .s2 #configure .s2-pozadi { display: none; }
}

/* Plátno konfigurátoru je průhledné (scéna nemá pozadí), takže se
   skrz ně dívá papír stránky i křivky pod ním. Deska scény by je
   zakryla, proto je tady bez výplně a bez stínu — na plné šířce
   jeviště stejně žádnou hranu nemá. */
.s2 #configure .s2-scena { background: transparent; box-shadow: none; }

/* Křivky se ke krajům vytrácejí. Přes celou šířku vedené protínaly
   vlevo textový sloupec a vpravo desky konfigurátoru — mezi kartami
   z nich zbývaly kousky, které se četly jako kaz, ne jako atmosféra.
   Plnou silou tedy jdou tam, kam patří: za vůz a do prázdna kolem něj. */
.s2 #configure .s2-pozadi {
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,.35) 14%, #000 30%, #000 66%,
    rgba(0,0,0,.35) 84%, transparent 97%);
  mask-image: linear-gradient(to right,
    transparent 0%, rgba(0,0,0,.35) 14%, #000 30%, #000 66%,
    rgba(0,0,0,.35) 84%, transparent 97%);
}

/* ════════════════════════════════════════════════════════════════
   PATIČKA A ZÁVĚREČNÁ SEKCE — 8. 9. 2026
   ════════════════════════════════════════════════════════════════ */

/* Kontaktní sloupec se sází jako ostatní sloupce patičky: odkazy pod
   sebou, ne v řádku. */
.s2-stranka .footer .foot-kontakt a { display: block; }

/* Věta „From the first call to the first route…" byla na nízkých
   oknech uříznutá. #talk je vysoká na celou obrazovku a má skryté
   přetečení, takže co se nevejde, zmizí — na 1440 × 720 to bylo
   62 px z šedesátipixelové věty, tedy celá, a na 1470 × 790 přesně
   polovina. Na nízkých oknech se proto ubere ze svislých mezer, ne
   z obsahu. */
@media (max-height: 860px) and (min-width: 861px) {
  .s2 #talk { padding-block: 4vh !important; }
  .s2 #talk .sec-head { margin-bottom: clamp(12px, 1.6vh, 22px) !important; }
  .s2 #talk .s2-vse { margin-top: clamp(10px, 1.4vh, 18px); }
}

/* Mřížka patičky se řídí sdíleným kabátem, který počítá s PĚTI
   sloupci — sales jich má čtyři, takže poslední dráha zůstávala
   prázdná a patička končila ve dvou třetinách šířky. Na 1024 je
   v kabátě dvousloupcová mřížka, ve které čtvrtý sloupec spadl do
   levé půlky druhé řady. Obojí se tady srovnává na počet sloupců,
   které sales opravdu má; do kabátu se nesahá.
   Selektor je na `.s2-stranka` (třída na <html>), ne na `.s2` — to
   visí na <main>, kdežto patička stojí mimo něj, takže `.s2 .footer`
   se nikdy netrefilo. */
@media (min-width: 1100px) {
  .s2-stranka .footer .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}
@media (min-width: 861px) and (max-width: 1099px) {
  .s2-stranka .footer .foot-grid { grid-template-columns: repeat(3, 1fr); }
  .s2-stranka .footer .foot-brand { grid-column: 1 / -1; }
}

/* Obrázek vozu je od 9. 9. v <picture>, aby šlo servírovat webp
   s jpg jako záložním. Obal ale sám tvoří rámec, a protože se
   fotka polohuje absolutně vůči scéně, odskočila o půl své
   velikosti (levý okraj −720 px na 1440). `display: contents`
   obal z rozvržení vyjme a fotka se kotví jako dřív. */
.s2 #configure .s2-scena picture { display: contents; }

/* ════════════════════════════════════════════════════════════════
   KONFIGURÁTOR NA FOTKÁCH — 9. 9. 2026
   Trojrozměrný model je vypnutý (assets/model/3d.json), protože
   reálný spodek vozu nemáme a domodelovat si ho byla slepá ulička.
   Konfigurátor teď přepíná šestnáct fotek 940 × 520.

   Fotka potřebuje TOTÉŽ ukotvení, jaké mělo plátno: bez něj si vzala
   `left: 50%` bez posunu o polovinu a odskočila o 720 px vlevo.
   ════════════════════════════════════════════════════════════════ */
.s2 #configure .s2-scena .s2-nahled {
  position: absolute;
  /* Fotka NEVYPLŇUJE scénu. Scéna jde od kraje k okraji okna, ale
     vlevo na ní leží text s cenou a vpravo panel voleb — roztažená
     fotka se přes obojí přelila. Stojí proto uprostřed volného pásu
     mezi nimi, jako dřív stál vůz v modelu. */
  left: 50%; top: 50%;
  width: min(46%, 780px);
  height: auto;
  max-height: 78%;
  object-fit: contain;
  /* NAKLONĚNÍ ZRUŠENO 9. 9. 2026 ve 21:00. Michaela: „to auto není
     rovně". Vůz stojí vodorovně, jak má stát. Naklonění o 2,5° bylo
     můj pokus vytáhnout z boční fotky dojem prostoru — nevytáhlo,
     jen to auto polozilo. */
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  z-index: 1;
  /* Násobení tu bylo jako náhrada za masku, dokud se nepoužívala:
     bílá deska fotky se jím vytratila do papíru. S maskou není co
     překrývat a násobení jen ztmavovalo lak, takže je pryč. */
}
/* Pod 900 px se sloupce skládají pod sebe a žádný volný pás nezbývá —
   tam smí fotka přes celou šířku. */
@media (max-width: 900px) {
  .s2 #configure .s2-scena .s2-nahled {
    width: min(92%, 620px);
    max-height: 62%;
  }
}

/* Měkký stín pod koly a jemný přechod podlahy. Obojí je kresba
   v CSS, ne součást fotky, takže platí pro všech šestnáct stejně
   a nedá se rozejít s vybraným lakem. */
.s2 #configure .s2-scena::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 21%;
  width: min(34%, 560px);
  height: clamp(18px, 3.4vh, 34px);
  transform: translateX(-50%);
  border-radius: 50%;
  /* Přechod musí být tak měkký, aby na jeho okraji nebyl skok jasu
     nad 4 — jinak se z něj v přejímce stane „souvislá přímka" dlouhá
     190 bodů. Víc mezikroků a silnější rozostření. */
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(18, 22, 26, .70) 0%, rgba(22, 26, 32, .58) 30%,
              rgba(28, 33, 39, .40) 52%, rgba(34, 40, 46, .22) 70%,
              rgba(38, 44, 50, .09) 85%, rgba(40, 46, 52, 0) 100%);
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}
.s2 #configure .s2-jeviste .s2-podlaha {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(to bottom,
              rgba(0, 0, 0, 0) 0%, rgba(20, 24, 28, .035) 62%,
              rgba(20, 24, 28, .06) 100%);
}

/* ════════════════════════════════════════════════════════════════
   MOBIL — 9. 9. 2026
   Dvě opravy z Michaeliných snímků.
   ════════════════════════════════════════════════════════════════ */

/* 1. KARTA NA CELOU ŠÍŘKU, ŽÁDNÉ VYKUKOVÁNÍ SOUSEDA.
   Pás karet měl kartu 84 % šířky okna (327,6 px z 390), takže vedle
   ní vykukoval kus další karty s ořezaným nadpisem i textem. Byl to
   můj záměr — náznak, že se pás dá posunout — ale čte se to jako
   vada, protože je vidět uříznuté písmo. Karta je proto přes celou
   šířku a soused není vidět vůbec.
   Posuv zůstává: `scroll-snap` funguje dál, jen se sousedka
   neukazuje. Kdyby ti chyběl náznak posunu, dá se doplnit řadou
   teček pod pásem — to je ale nový prvek, tak ho sám nepřidávám. */
@media (max-width: 700px) {
  .s2 #benefits .s2-ben > article {
    flex: 0 0 calc(100vw - 40px) !important;
    max-width: calc(100vw - 40px) !important;
  }
  /* Mezera musí být stejná jako odsazení pásu, jinak soused vykoukne
     přesně o jejich rozdíl: při odsazení 20 a mezeře 12 začínala
     druhá karta na 382 z 390, tedy 8 px do obrazu. */
  .s2 #benefits .s2-ben { gap: 20px !important; padding-inline: 20px !important; }
}

/* 2. FOTKA VOZU NELEŽÍ NA TEXTU.
   Po výměně 3D za fotku zůstal obrázek polohovaný absolutně přes celé
   jeviště. Na telefonu se sloupce skládají pod sebe, takže fotka
   ležela přes slib „All included. You drive, we care." a růžový text
   na ní měl kontrast 1,62 : 1 při normě 3. Na mobilu je proto fotka
   normální prvek v toku: stojí nad textem, ne přes něj. */
@media (max-width: 900px) {
  /* Jeviště je flexový kontejner v ŘÁDKU. Když se scéna vrátila do
     toku, stoupla si vedle textu a překryla ho — popiska „For
     commercial fleet managers" ležela přímo na fotce. Na mobilu se
     proto skládá do sloupce: nejdřív fotka, pod ní text. */
  .s2 #configure .s2-jeviste { flex-direction: column; }
  .s2 #configure .s2-jeviste > .wrap { width: 100%; }
  /* `!important` je tu proto, že scénu dělá absolutní pravidlo
     z dřívějška (plátno mělo vyplnit celé jeviště) a bez váhy ho
     nepřebiju — scéna zůstala absolutní, vysoká 1 196 px, a text
     jí ležel uvnitř. */
  .s2 #configure .s2-scena {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    width: 100% !important;
  }
  .s2 #configure .s2-scena .s2-nahled {
    position: relative !important;
    left: auto !important; top: auto !important;
    inset: auto !important;
    width: min(92%, 620px) !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  /* Stín se váže na fotku, ne na jeviště. */
  .s2 #configure .s2-scena::after {
    bottom: 4%;
    width: min(56%, 420px);
  }
}

/* ════════════════════════════════════════════════════════════════
   MASKA FOTKY VOZU — 9. 9. 2026
   Fotky veh-*.jpg mají vlastní BÍLÉ pozadí, sekce je světle šedá
   (#F0F0F0) a naklonění o 2,5° tu bílou desku natočilo — vlevo
   nahoře a vpravo dole byly vidět její ostré rohy a celek se četl
   jako bílá kartička, ne jako vůz ve scéně.

   Masky leží v projektu (veh-<varianta>-mask.png, 940 × 520, stejně
   jako fotky) a jedna platí pro všechny čtyři laky té karoserie.
   Cestu dosazuje sales.js do `--maska` při každé změně nástavby.

   `mix-blend-mode: multiply`, kterým se bílá deska maskovala předtím,
   je pryč — s maskou není co překrývat a násobení jen ztmavovalo lak.
   ════════════════════════════════════════════════════════════════ */
.s2 #configure .s2-scena .s2-nahled {
  -webkit-mask-image: var(--maska, none);
  mask-image: var(--maska, none);
  /* ZPĚT NA STO PROCENT. Zvětšení na 100,4 % mělo zachránit
     jednopixelový lem kolem pneumatik, ale poslalo masku DÁL od
     siluety, takže jí prošlo víc bílé desky fotky, ne míň:
     v pásu 6 px kolem vozu 19,33 % → 19,60 % bodů jasnějších než 250
     (parcel/white). Zvětšování tedy není cesta. */
  /* Výchozí `match-source` je správně: původní masky nesou siluetu
     v ALFĚ. (9. 9. tu chvíli byly masky se siluetou v jasu a k nim
     `mask-mode: luminance`; obojí je vrácené.) */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}




/* ════════════════════════════════════════════════════════════════
   REŽIM „DIRECT PURCHASE" — 9. 9. 2026
   V tomhle režimu má levý sloupec dvě ceny místo jedné (€31 400
   jednorázově + €0,04 za km, každá s popiskem), takže nabídka
   naroste o 88 px: 299 → 387. Sekce je vysoká jednu obrazovku
   a obsah je v ní svisle na střed, takže přebytek vyleze na OBĚ
   strany — dole slib „All included. You drive, we care." přetekl
   do pruhu s údaji (překryv se „4 m³" a „120 km"), nahoře se
   nadpis „CHOOSE YOUR VEHICLE SETUP" schoval o 12 px pod lištu.

   Bere se to z MEZER, ne z písma a ne z obsahu. Platí jen pro
   direct — poznává se podle druhé ceny (`.pod`), aby se režim
   „Pay as you go", který je schválený, nezměnil.
   ════════════════════════════════════════════════════════════════ */
.s2 #configure .s2-nabidka:has(.s2-cena .pod) .s2-prep { margin-bottom: 12px; }
.s2 #configure .s2-nabidka:has(.s2-cena .pod) .s2-cena { margin-top: 8px; }
.s2 #configure .s2-nabidka:has(.s2-cena .pod) .s2-cena .lab { margin-top: 8px; }
.s2 #configure .s2-nabidka:has(.s2-cena .pod) .s2-cena > b { margin-top: 6px; }
.s2 #configure .s2-nabidka:has(.s2-cena .pod) .s2-cena .pod { margin-top: 6px; }
.s2 #configure .s2-nabidka:has(.s2-cena .pod) .s2-cena .pod b { margin-top: 4px; }
.s2 #configure .s2-nabidka:has(.s2-cena .pod) + .s2-vse,
.s2 #configure .s2-nabidka:has(.s2-cena .pod) .s2-vse { margin-top: 18px; }

/* ════════════════════════════════════════════════════════════════
   POSUVNÍKY — VLASTNÍ KRESBA, KVŮLI iOS
   Michaela je na iPhonu a tam jedou všechny prohlížeče na WebKitu.
   Na její fotce je z posuvníku široká světlá plocha s malým růžovým
   puntíkem u levého kraje, ne tenká čára s knoflíkem.

   Proč: `styles.css` dává posuvníku `height: 5px` s `padding-block:
   10px` a `background-clip: content-box`, takže se podklad kreslí
   jen přes těch pět bodů dráhy. `sales.css` ale na telefonu přebíjí
   výšku na 44 px kvůli dotykovému cíli — a tím se z dráhy stane
   deska vysoká 44 px. K tomu nikde nebylo pravidlo pro
   `::-webkit-slider-runnable-track`, takže si WebKit polohu jezdce
   dopočítal po svém a puntík odskočil od hodnoty.

   Řešení: nespoléhat se na nic výchozího. Dráha i jezdec mají
   vlastní rozměry, dotykový cíl dělá odsazení (ne výška dráhy)
   a svislé vystředění jezdce je dopočítané, ne odhadnuté:
   margin-top = (dráha − jezdec) / 2 = (6 − 28) / 2 = −11 px.
   ════════════════════════════════════════════════════════════════ */
.s2 #savings input[type="range"],
.s2 #savings input[type="range"]:is(:hover, :focus) {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;                 /* výška JEZDCE, ne dráhy */
  padding-block: 8px;           /* 28 + 8 + 8 = 44 px dotykového cíle */
  box-sizing: content-box;
  background: transparent;      /* žádná deska pod prstem */
  background-clip: border-box;
  border-radius: 0;
  outline: none;
  cursor: pointer;
}
/* dráha */
.s2 #savings input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: #DDDEE1;
  border: none;
}
.s2 #savings input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: #DDDEE1;
  border: none;
}
/* jezdec */
.s2 #savings input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 28px;
  height: 28px;
  box-sizing: content-box;      /* 28 je RŮŽOVÝ kruh, bílý lem je navíc */
  border-radius: 50%;
  background: var(--s-pink, #FB5494);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(251, 84, 148, .32), 0 0 0 1px rgba(0, 0, 0, .06);
  margin-top: -11px;            /* (6 − 28) / 2, dopočítané */
  cursor: pointer;
}
.s2 #savings input[type="range"]::-moz-range-thumb {
  width: 28px;
  height: 28px;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--s-pink, #FB5494);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(251, 84, 148, .32);
  cursor: pointer;
}
.s2 #savings input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(251, 84, 148, .34);
}
/* Na telefonu se dotykový cíl nedělá výškou dráhy — ta zůstává 6 px. */
@media (max-width: 700px) {
  .s2 #savings input[type="range"] { height: 28px; padding-block: 8px; }
}


/* ════════════════════════════════════════════════════════════════
   POŘADÍ V KONFIGURÁTORU NA TELEFONU — 9. 9. 2026
   Do teď byla na telefonu první fotka vozu a nadpis až pod ní, takže
   sekce začínala obrázkem bez vysvětlení. Nové pořadí:
       popiska + nadpis · fotka · přepínač režimů · volby

   Nadpis a přepínač jsou ale v jednom sloupci (`.s2-col--text`),
   kdežto fotka je jeho sourozenec — pořadím sourozenců se tedy mezi
   ně dostat nedá. Obaly se proto na telefonu rozpustí
   (`display: contents`) a řadí se až jejich obsah.

   Rozpuštěním zmizí i boční odsazení, které nesl `.wrap` (20 px),
   takže se promovaným prvkům vrací zpátky. Fotka ho nemá schválně —
   jde od kraje ke kraji jako dřív.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .s2 #configure .s2-jeviste > .wrap { display: contents; }
  .s2 #configure .s2-col--text { display: contents; }

  .s2 #configure .s2-jeviste > .s2-vlas,
  .s2 #configure .s2-vlas { order: 0; }
  .s2 #configure .sec-head { order: 1; }
  .s2 #configure .s2-scena { order: 2; }
  .s2 #configure .s2-nabidka { order: 3; }
  .s2 #configure .s2-col--karta { order: 4; }

  /* boční odsazení, které nesl rozpuštěný .wrap */
  /* Nabídku (přepínač + cena + slib) přebíjelo starší pravidlo
     s vyšší vahou, takže jako jediná zůstala u kraje. */
  .s2 #configure .sec-head,
  .s2 #configure .s2-col--karta { margin-inline: 20px; }
  .s2 #configure .s2-jeviste .s2-nabidka { margin-inline: 20px !important; }

  /* Rozpuštěný sloupec nesmí viset na nájezdu: `display: contents`
     mu vzalo rámeček, takže na něm pozorovatel nikdy nespustí třídu
     `in` a text by zůstal viset v úvodním, ztlumeném stavu. */
  .s2 #configure .s2-col--text[data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Závoj (bílý přechod pod textem na počítači) se rozpuštěním obalu
     dostal NAD text: `display: contents` zrušilo kontext vykreslování,
     který text držel nahoře, a písmena se pak tiskla skrz mléčnou
     plochu. Promované bloky proto dostávají vlastní vrstvu. */
  .s2 #configure .sec-head,
  .s2 #configure .s2-nabidka,
  .s2 #configure .s2-col--karta { position: relative; z-index: 2; }

  /* mezery mezi bloky v novém pořadí */
  .s2 #configure .sec-head { margin-bottom: 18px !important; }
  .s2 #configure .s2-scena { margin-block: 4px 18px; }
  .s2 #configure .s2-nabidka { margin-bottom: 18px; }
}


/* ===== VŮZ ZEPŘEDU (rendery z vlastního modelu) =====================
   10. 9. 2026. Obrázky mají průhledné pozadí a vlastní měkký stín,
   takže se na ně NEPOUŽÍVÁ maska ani stín z konfigurátoru. Poměr mají
   1880 × 1040, tedy dvojnásobek plochy, kterou konfigurátor kreslí.
   Vypnout: smazat tenhle blok a blok ZEPREDU v sales.js.
   ==================================================================== */
.s2 #configure .s2-scena img[data-pred]{
  -webkit-mask-image: none; mask-image: none;
  width: min(58%, 900px); max-height: 80%;
}
.s2 #configure .s2-scena:has(img[data-pred])::after{ opacity: 0; }
@media (max-width:700px){
  .s2 #configure .s2-scena img[data-pred]{
    width: min(96%, 640px) !important; max-height: none !important; height: auto !important}
}

/* Rendery od Naty (10. 9.) mají VLASTNÍ pozadí — oblohu, město,
   podlahu — takže se nemaskují a vyplňují scénu jako fotografie.
   Kontaktní stín pod vozem se u nich vypíná: mají svůj vlastní
   a dva přes sebe dělaly tmavou kaluž. */
.s2 #configure .s2-scena img[data-foto] {
  -webkit-mask-image: none;
  mask-image: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.s2 #configure .s2-scena:has(img[data-foto])::after { opacity: 0; }

/* ===== VIDEOMANUÁL — sekce #videomanual (10. 9. 2026) ================
   Tenhle blok jsem doplnil já (kontrolní vrstva), ne sales Code.
   Důvod: sekce s videem už byla v sales.html a šla do buildu, ale
   žádné pravidlo pro ni neexistovalo. Element <video> má atribut
   width="1920" a v sales.css ani styles.css není obecné
   `video{max-width:100%}` — bez tohohle bloku by stránka přetékala
   do stran na KAŽDÉ šířce, na telefonu katastrofálně.

   Kdyby sales Code psal vlastní styly videomanuálu, tenhle blok
   nahradí; není na čem stavět, je to jen pojistka proti přetečení.
   Poměr 16/9 sedí na dodaný soubor 1920 × 1080. */
/* ===== VŮZ V KONFIGURÁTORU (10. 9. 2026, oprava) ====================
   Michaela: „má to být vše stejné, jak jsem ti poslala od Naty —
   jediné, co máš změnit, je ten symbol." Původně jsem to řešil obráceně:
   obrázkům jsem dopočítal oblohu a podlahu, aby vyšly na 4:3 rámu.
   To byl zásah do jejích podkladů a neměl jsem ho dělat.
   Teď se přizpůsobuje RÁM obrázku: poměr scény je 1550/1015, tedy
   přesně poměr dodaných renderů, takže se nic neořezává, nikde nejsou
   bílé pruhy a soubory zůstávají v tom rozměru, v jakém přišly. */
.s2 #configure .s2-scena img[data-foto]{ object-fit: contain }

#videomanual .s2-video { margin: 0; }
#videomanual .s2-video video {
  display: block; width: 100%; height: auto; max-width: 100%;
  aspect-ratio: 16 / 9; border-radius: var(--s-r, 16px);
  background: #000;
}
#videomanual .s2-video figcaption {
  margin-top: .6rem; font-size: var(--fs-label, .8rem);
  color: var(--s-mute, #666);
}

/* ===== PRÁVNÍ POZNÁMKA K CENÁM ======================================
   Sekce #pravni-poznamka na konci stránky a dva odkazovací řádky
   .s2-indik (pod cenou v konfigurátoru a pod srovnáním v #savings).
   Drobnější písmo a tlumená barva: je to doplněk k číslům, ne další
   sdělení stránky. Šířku nedávám vlastní — .wrap ji drží stejnou
   jako u ostatního obsahu. */
/* Sekce SE NEROZTAHUJE na celou obrazovku. Pravidlo `.s2 > .section`
   dává výšku okna každé sekci — to je norma pro ty čtyři prodejní bloky,
   kde je obsah plnohodnotný. Poznámka pod čarou je dovětek k číslům:
   na celé obrazovce by působila jako pátý argument stránky a odsunula
   by patičku o celý screen dolů. Vnitřní mezery si bere ze `.section`,
   aby seděla do rytmu okolních sekcí. */
#pravni-poznamka { min-height: 0; }
#pravni-poznamka .pp-h {
  font-size: var(--fs-label, .8rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--s-mute, #666);
  margin: 0 0 .9rem;
}
#pravni-poznamka p {
  max-width: 76ch;
  margin: 0 0 .8rem;
  font-size: var(--fs-sm, .9375rem);   /* 15px — stupnice, ne vlastní hodnota */
  line-height: var(--lh-normal, 1.6);
  color: var(--s-mute, #666);
}
#pravni-poznamka p:last-child { margin-bottom: 0; }

.s2-indik {
  margin: .5rem 0 0;
  font-size: var(--fs-xs, .8125rem);   /* 13px — stupnice ho má právě na poznámky */
  line-height: var(--lh-snug, 1.45);
  color: var(--s-mute, #666);
}
.s2-indik a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.s2-indik a:hover, .s2-indik a:focus-visible { color: inherit; opacity: .75; }

/* ===== PŘESKLÁDÁNÍ PODLE ROZPISU (ROZPIS-SALES-PODLE-RADKA.md) ======
   Hero, pruh provozních čísel a sekce s certifikátem.
   Z Radkovy ukázky se nebere ani jedna barva, font, velikost, stín,
   rádius ani odsazení — všechno stojí na tokenech v `.s2` a na
   třídách, které stránka už má (`.sec-head`, `.eyebrow`, `.h`,
   `.lead`, `.s2-akce`). Růžová se tu nepoužívá vůbec: podle
   brandbooku patří na akci a na JEDNO číslo, a tím je cena
   v konfigurátoru. Kdyby ji nesl i údaj v pruhu, přestala by
   cenu odlišovat. */

/* HERO. Výšku okna mu dává `.s2 > .section`, o to se nestarám;
   jen se text drží u levé hrany obsahu jako ve zbytku stránky. */
#hero .h { max-width: 16ch; }
#hero .lead { max-width: 46ch; }

/* PRUH PROVOZNÍCH ČÍSEL. Není to sekce s argumentem, ale proužek
   pod konfigurátorem, takže se z pravidla „jedna sekce = jedna
   obrazovka" vyjímá — jinak by jediný údaj zabral celý screen. */
#provoz { min-height: 0; }
.s2-pruh {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 4vw, 64px);
  margin: 0;
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 28px);
  list-style: none;
  background: var(--s-paper2);
  border: 1px solid var(--s-line);
  border-radius: var(--s-r);
}
.s2-pruh li { display: flex; flex-direction: column; gap: .3rem; }
.s2-pruh b {
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--s-ink);
  font-variant-numeric: tabular-nums;
}
.s2-pruh span {
  font-size: var(--fs-sm, .9375rem);
  color: var(--s-mute);
}

/* CERTIFIKÁT. Tlačítko je tentýž `.s2-akce-btn--hlavni` jako
   „Send my configuration" — růžová plocha, na ní inkoust #050505,
   nikdy bílá. Nic nového se pro něj nezavádí. */
#certifikat .h { max-width: 22ch; }
#certifikat .lead { max-width: 52ch; }
#certifikat .s2-akce { margin-top: clamp(20px, 3vw, 32px); }


/* Nadpis konfigurátoru: pravidla výše mířila na `h1.h`. Od přeskládání
   podle rozpisu je h1 v hero a konfigurátor má h2, takže selektory
   berou obojí přes `:is(h1, h2)`. Váha zůstává stejná — `:is()` má
   specifičnost svého nejsilnějšího argumentu a h1 i h2 jsou prvkové
   selektory. Bez toho nadpis vypadl z pravidla `clamp(26px, 2.42vw,
   35px)` a vyskočil na 66 px: levý sloupec povyrostl o 311 px a lehl
   si na pás parametrů. */

/* ============================================================
   VŮZ BEZ POZADÍ + MENŠÍ (10. 9. 20:20)

   Michaela: „to auto je pořád moc velké a když dám Direct purchase,
   tak se to tam nevleze… umíš to pozadí odstranit nebo dát jiné?"

   POZADÍ: odstraněno u všech šestnácti kombinací. Natyny původní
   soubory v assets/img/sales/naty/ zůstávají NEDOTČENÉ, výřezy leží
   vedle nich v assets/img/sales/naty-bezpozadi/ a stránka míří na ně.
   Nic se nedomalovávalo, jen se odebralo pozadí; průhlednost proto
   existuje jen ve webp (jpg ji neumí).

   Předchozí přeliv na okrajích je tím zrušený — měl schovávat hranu
   obdélníku, a ta už žádná není. Nechat ho by znamenalo rozpouštět
   samotný vůz.

   VELIKOST: vůz v renderu zabírá 89 % šířky a 85 % výšky plátna,
   zbytek je průhledno. Rám se proto smí zmenšit, aniž auto zmizí.
   Snížení je o pětinu proti dosavadnímu stavu; je to JEDNO číslo
   na řádku níž, dá se doladit bez zásahu do čehokoli jiného.
   ============================================================ */
.s2 #configure .s2-scena{background:transparent}
.s2 #configure .s2-scena img[data-foto]{background:transparent}
.s2 #configure .s2-scena img{max-height:min(27vh,265px)}
@media(max-height:900px){ .s2 #configure .s2-scena img{max-height:min(22vh,205px)} }
@media(max-width:700px){  .s2 #configure .s2-scena img{max-height:min(24vh,180px)} }

/* ===== VADY Z MOBILNÍ KONTROLY (10. 9. 2026, 22:2x) =================
   Měřeno na localhost:8777 nad kořenem projektu, mobilní UA a DPR 3,
   na 390×844, 393×852, 402×874, 430×932, 440×956 a 1440×900.
   Tenhle blok obnovuje i opravy vad A/B/C z dřívějška — z sales.css
   je odnesl večerní zásah z buffru, který je neobsahoval. */

/* ---- A1. #videomanual přetéká přes výšku okna ----------------------
   Naměřeno 1440×900: sekce 1023,8 px při okně 900, obsah 905,3 px
   proti volnu 781,5 → přesah +123,8 px. Přetéká video: 1068 × 600,8 px,
   protože má width:100 % a aspect-ratio 16/9, takže si výšku bere ze
   šířky obsahu. Na 1920 (−80,5), na 2000 (−292,8) i na všech pěti
   telefonech (−314 až −393) se vejde, takže se nesmí zmenšit natvrdo.

   Omezuje se ŠÍŘKA rámu, ne výška videa: při aspect-ratio 16/9 by
   max-height nechalo šířku na 100 % a video by dostalo černé sloupce.
   Odpočet 425 px je DOMĚŘENÝ součet všeho ostatního v sekci:
   padding 100,5 + 18, nadpis 245,8 + jeho margin 30,6, popiska 18,6
   + její margin 9,6 = 423,1 px. */
#videomanual .s2-video {
  max-width: calc((100svh - 425px) * 16 / 9);
  margin-inline: auto;
}

/* ---- A2. #talk přetéká, protože nadpis vyrostl --------------------
   Naměřeno 1440×900: obsah 939,5 px proti volnu 798,2 → přesah
   +141,3 px, a sám nadpis 430,9 px (66 px písma, šest řádků ve
   sloupci 519,6 px). Na 1920 přesah +6,6 px. Text nadpisu je
   z rozpisu a nemění se, mění se tedy velikost. Telefonní hodnota
   zůstává na dnešních 40 px (naměřeno na všech pěti šířkách). */
.s2 #talk .sec-head .h { font-size: clamp(40px, 3.2vw, 46px) !important; }

/* ---- B. perex v #talk NENÍ v kolizi s nadpisem ---------------------
   Naměřeno: `.sec-head` je v #talk na 1440 dvousloupcová mřížka
   519,6 + 519,6 px s mezerou 28,8, vodorovný průnik nadpisu a perexu
   je −28,8 px, oba jsou display:block, position:static, float:none.
   Nepřekrývají se tedy vůbec. Vypadá to tak proto, že mřížka má
   align-items:end a perex vysoký 49,4 px se lepí na spodek řádku
   vysokého 438,9 px — jeho poslední řádek stojí přesně v úrovni
   posledního řádku nadpisu. Zarovnáním na začátek se sloupce čtou
   jako sloupce. Na telefonu je mřížka jednosloupcová a nic to
   nemění (naměřený svislý odstup −16 px zůstává). */
.s2 #talk .sec-head { align-items: start; }

/* ---- C. .s2-vse leze do .s2-param ---------------------------------
   Naměřeno 1440×900, Direct purchase: jeviště 783,8 px, ale jeho
   obsah 859 px — smrštilo se POD svůj obsah o 77,4 px a protože ho
   centruje, přeteče symetricky dolů o 38,7 px do pásu, který začíná
   na jeho spodní hraně: překryv 18,6 px. Pay as you go je na hraně
   (smrštění 4,0 px, mezera 18,2 px), proto se to objeví i tam.
   Na telefonech je místa dost (mezera 574,3 až 616,5 px).

   Smršťování dělá `flex: 1 1 auto` spolu s `min-height: 0 !important`
   z mediálních bloků — bez spodní zarážky se flexová položka zmenší
   pod výšku vlastního obsahu. Zarážkou je obsah sám. */
.s2 #configure .s2-jeviste { min-height: min-content !important; }

/* Sekce má na širokém okně `height: 100svh` a `overflow: hidden`,
   takže by se ten samý přesah místo překryvu OŘÍZL. #configure proto
   drží výšku okna jako minimum, ne jako pevnou míru. Ostatní tři
   sekce zůstávají beze změny. */
@media (min-width: 1181px) {
  .s2 #configure { height: auto; min-height: 100svh; overflow: visible; }
}

/* ---- F. text pod 13 px --------------------------------------------
   Naměřeno: popisky údajů vycházely na 11,36 až 11,84 px
   („Months, at 22 operating days", „Billed km per vehicle",
   „Fleet discount at this size"). Zdroj: .71–.74rem na .s2-shrnuti
   span, .s2-radek .za a .s2-param span. Zvedá se na `--fs-xs`, což
   je 13 px ze stupnice — a stupnice má tuhle velikost přímo na
   poznámky. Verzálkové `.eyebrow` zůstává na 12 px: brandbook je
   povoluje a zároveň zakazuje jít níž. */
.s2 .s2-shrnuti span,
.s2 .s2-radek .za,
.s2 .s2-param span { font-size: var(--fs-xs, .8125rem); }

/* Horní index u „Range per pack" měl 10,8 px. Značka poznámky se
   nesází na velikost textu, ale nesmí klesnout pod 12 px. */
.s2 sup { font-size: 12px; vertical-align: super; line-height: 0; }

/* ---- G. dotykové cíle pod 44 × 44 ---------------------------------
   Naměřeno na 390, 430 i 440: odkaz „Indicative figures…" 40,8 px
   vysoký a tlačítko „Prepare email to BattSwap" 40,0 px.
   Tlačítko dostane spodní mez rovnou (je to tlačítko i na myši),
   odkaz jen na dotykových šířkách — na 1440 by o 6 px povyrostl
   levý sloupec konfigurátoru, kde je rezerva 18,2 px. */
.s2 .s2-akce-btn { min-height: 44px; }
@media (max-width: 700px) {
  .s2 .s2-indik a {
    display: inline-block;
    padding-block: 3px;
    min-height: 44px;
  }
}

/* ============================================================
   VŮZ: PŘESTAL LÉZT PŘES TEXT A JE O 20 % MENŠÍ (10. 9. 22:35)

   Michaela: „zmenši to auto o 20 %, aby se to na sales vlezlo.
   Nebylo to přes ten text."

   PROČ TO LEZLO PŘES TEXT — odvozeno z hodnot, které v souboru
   opravdu jsou, ne odhadem:
     .s2 .s2-scena má min-height: clamp(220px, 34vh, 420px)
     a zároveň aspect-ratio. Na jejím okně (výška ~1300 px) je
     34vh = 442 px, tedy clamp vrátí strop 420 px. Poměr 1550/1015
     = 1,527, takže si scéna vyžádala šířku 420 × 1,527 = 641 px.
     Prostřední sloupec mřížky (minmax(0,1.34fr) ze tří sloupců
     .72 / 1.34 / .78) má na jejím okně kolem 447 px.
     641 > 447, a protože je to poměrová výška vynucená zdola,
     grid ji neuřízne — scéna přeteče na obě strany a lehne si
     na text vlevo i na kartu vpravo. Přesně to je na jejím snímku.

   OPRAVA: výšku určuje ŠÍŘKA, ne naopak. min-height: 0 to pouto
   ruší, aspect-ratio pak dopočítá výšku z šířky sloupce a scéna
   se do sloupce vejde vždy.

   ZMENŠENÍ O 20 %: jedno číslo, --vuz-podil. 0.8 = o pětinu menší
   než sloupec. Chce-li Michaela jinak, mění se jen tahle hodnota
   a nic dalšího.

   POZOR pro Code: tohle je odvozené z CSS, ne změřené v prohlížeči.
   Až budeš měřit, ověř skutečné rect u .s2-scena a prostředního
   sloupce a jestli čísla nesedí, napiš mi je — neopravuj to naslepo.
   ============================================================ */
.s2 #configure .s2-scena{
  --vuz-podil: .8;
  aspect-ratio: 1550 / 1015;
  min-height: 0;
  width: calc(100% * var(--vuz-podil));
  max-width: 100%;
  margin-inline: auto;
}
/* Obrázek uvnitř scény zůstává celý (contain), nic se neořezává.
   max-height se ruší: výšku teď drží poměr scény, a dvě soupeřící
   omezení dělala z vozu úzký proužek. */
.s2 #configure .s2-scena img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-height: none;
  object-fit: contain;
}
@media(max-width:900px){
  /* Na jednosloupcové mřížce už scéna nemá koho tlačit, takže
     se nezmenšuje o pětinu — jinak by z vozu na telefonu nezbylo nic. */
  .s2 #configure .s2-scena{ --vuz-podil: 1; }
}

/* ============================================================
   VIDEO VĚTŠÍ (10. 9. 23:30)

   Michaela: „to video by se mělo automaticky spustit a mělo by
   být větší podle mě."

   Automatické spuštění je v sales.html (autoplay + muted +
   playsinline). Zvuk se sám nerozjede v žádném prohlížeči, to
   není naše chyba ani se to obejít nedá — divák si ho zapne
   v ovládání videa.

   VĚTŠÍ: šířku rámu drží odpočet od výšky okna, aby se sekce
   vešla na jednu obrazovku (viz blok A1 výš, odpočet 425 px).
   Aby video mohlo vyrůst, musí něco jiného v sekci ustoupit.
   Ustupuje nadpis — přesně tak, jak to udělal Code v sekci #talk.

   Naměřeno v A1: nadpis 245,8 px + jeho margin 30,6 = 276,4 px
   z rozpočtu 425 px. Při velikosti jako v #talk (clamp 40–46 px)
   klesne nadpis zhruba na 110 px i s marginem, tedy asi o 136 px.
   Odpočet se proto snižuje na 310 px a video tím dostane
   136 × 16/9 = asi 242 px šířky navíc.

   POZOR pro Code: 310 px je DOPOČTENÉ, ne změřené. Přeměř výšku
   sekce a videa na 1440×900, 1920×1080 a 2000×1300; jestli sekce
   přeteče, ohlas mi číslo a neupravuj to naslepo.
   ============================================================ */
.s2 #videomanual .sec-head .h{ font-size: clamp(40px, 3.2vw, 46px) !important; }
#videomanual .s2-video{ max-width: calc((100svh - 310px) * 16 / 9); }