/* ==================== písma ==================== */
/* Písma leží na vlastním webu v assets/fonts, ne na cizí službě. Jen řezy,
   které styly opravdu používají. Licence: fonts/LICENCE.txt. */
@font-face{font-family:"Clash Display";src:url("../fonts/clash-display-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../fonts/clash-display-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Clash Display";src:url("../fonts/clash-display-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("../fonts/general-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ============================================================
   VOLTEO · web, světlý vzhled s červenou variantou A (Signální)
   Web i administrace mají jediný, světlý režim. Tmavý režim neexistuje.
   Administrace má vlastní soubor admin.css se stejnými tokeny v :root.

   Pořadí souboru: tokeny, základ, tlačítka, hlavička, hero, nabídka na
   úvodu, karta vozu, XPENG, služby, výzva, newsletter, kontakt, patička,
   dialogy a formuláře, výpis vozů, detail vozu, ostatní.
   ============================================================ */

:root{
  color-scheme:light;
  /* Jen tři velikosti textu na celém webu. Nic jiného
     se nepoužívá: velká pro hlavní nadpisy H1 a H2 sekcí, střední pro
     podnadpisy, názvy vozů, ceny a perexy, malá pro všechno ostatní. */
  --fs-velka:clamp(2.125rem,4.4vw,3.375rem);
  --fs-stredni:1.25rem;
  --fs-mala:.9375rem;          /* 15 px */
  /* Výběr červené: jen tyto tři řádky. Varianta A Signální.
     Text a odkazy na podkladu --red-50 a na perleti píší --red-700. */
  --red-600:#E10A1E; --red-rgb:225,10,30;
  --red-700:#BF0818;
  --red-50:#FDECEE;
  --on-red:#FFFFFF;
  /* Perleť: plochy, rámečky, oddělovače a ikony. Malý tlumený text nikdy na --pearl-300. */
  --pearl-100:#F4F5F7; --pearl-200:#EEF0F3; --pearl-300:#D9DCE1; --pearl-400:#C3C8CF;
  /* Světlejší perleť s viditelným přechodem (Ted, 28. 10. 2026). Dřív #F4F5F7, #D9DCE1, #EEF0F3. */
  --grad-pearl:linear-gradient(135deg,#FAFBFC 0%,#EEF0F3 52%,#F6F7F9 100%);
  /* Neutrální */
  --bg:#FFFFFF; --surface:#F7F8FA; --text:#0B0D10; --muted:#5B6470;
  --line:#E3E6EA; --line-strong:var(--pearl-400);
  /* Okraj formulářových polí. Linka --line má na bílé jen 1,25 : 1, pole potřebují 3 : 1. */
  --okraj-pole:#5B6470;
  /* Chybová červená je tmavší a odlišná od značkové, vždy s ikonou a textem. */
  --danger:#B42318; --danger-text:#7A1A12;
  /* Štítek Akce: tmavší perleť s textem v --red-700. */
  --danger-solid:var(--pearl-300);
  --focus:var(--red-600); --accent:var(--red-600);
  /* Základ průsvitných vrstev (tmavý inkoust) a skel lišt (bílá). */
  --film:11,13,16;
  --glass:255,255,255;
  --scrim-dialog:rgba(11,13,16,.45);
  /* Prohlížeč fotek zůstává tmavý, fotka tam nesoupeří s pozadím. */
  --scrim-media:rgba(4,7,10,.88);
  --stin:rgb(147 155 166 / .22);
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:32px; --r-2xl:40px; --r-pill:999px;
  --sh-xs:0 1px 2px rgba(4,7,10,.06);
  --sh-sm:0 8px 20px -8px rgba(4,7,10,.16);
  --sh-md:0 22px 52px -20px rgba(4,7,10,.20);
  --sh-red:0 0 0 1px rgba(var(--red-rgb),.30);
  --hl:inset 0 1px 0 rgba(255,255,255,.9);
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.32,.72,0,1);
  --hover-dur:.25s; --hover-ease:ease;
  --font-display:"Clash Display","General Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-text:"General Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Odsazení, základ 4 px */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --wrap-pad:clamp(16px,4vw,32px);
  --sp-section:clamp(64px,8vw,112px);
  --sp-head:clamp(32px,4vw,48px);
  /* Mezera pod záhlavím stránky (Nabídka vozů, Kontakt): menší než mezi sekcemi. */
  --sp-pod-zahlavim:clamp(40px,5vw,64px);
  /* Výška hlavičky a spodní lišty na mobilu */
  --nav-v:72px; --mobcta-v:80px; --finder-v:68px;

  /* Staré názvy jako aliasy na nové hodnoty. Šablony i skripty je dál smějí číst,
     nové styly je nepoužívají. */
  --volt-50:var(--red-50); --volt-100:var(--red-50); --volt-200:var(--red-50); --volt-300:var(--red-600);
  --volt-400:var(--red-600); --volt-500:var(--red-600); --volt-600:var(--red-700); --volt-700:var(--red-700);
  --carbon-950:var(--bg); --carbon-900:var(--surface); --carbon-850:var(--surface); --carbon-800:var(--pearl-200);
  --carbon-700:var(--pearl-300); --carbon-600:var(--pearl-300); --carbon-500:var(--pearl-400);
  --mist-50:var(--text); --mist-100:var(--text); --mist-200:var(--text);
  --mist-300:var(--muted); --mist-400:var(--muted); --mist-500:var(--muted);
  --ink:var(--on-red);
  --glow-volt:var(--sh-red);

  /* Rozbalovací seznamy (vyber.css). Administrace tyhle proměnné nenastavuje
     a zůstává tmavá a zelená, web je nastavuje světle a červeně. */
  --vyber-panel:#FFFFFF; --vyber-text:var(--text); --vyber-text-vybrany:var(--red-700);
  --vyber-akcent-rgb:var(--red-rgb); --vyber-stin:var(--sh-md);
}

*{margin:0;padding:0;box-sizing:border-box}
*{background-origin:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light;
  /* Hlavička je přilepená k hornímu okraji, kotva nesmí skončit pod ní. */
  scroll-padding-top:calc(var(--nav-v) + var(--sp-4))}
/* Plynulé posouvání jen pro skoky na kotvy z menu (stránka má fokus), ne pro
   obnovení stránky: Safari na iPhonu jinak po obnovení viditelně sjel na konec
   stránky a zpátky (Ted, 28. 10. 2026). */
@media (prefers-reduced-motion:no-preference){ html:focus-within{scroll-behavior:smooth} }
/* overflow-x:clip, ne hidden. Hidden dělá z těla posuvný kontejner a zabíjí
   position:sticky u všeho uvnitř (hlavička, sloupec filtrů ve výpisu). */
body{font-family:var(--font-text);background:var(--bg);color:var(--text);font-size:var(--fs-mala);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.015em;text-wrap:balance}
h1,h2{font-size:var(--fs-velka)}
h3{font-size:var(--fs-stredni)}
h4,h5,h6,small{font-size:var(--fs-mala)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* Pole formulářů mají v prohlížeči vlastní menší písmo (13 px). Web smí mít
   jen tři velikosti textu, proto dědí; konkrétní pole si ji nastavují samy. */
input,select,textarea{font:inherit}
ul{list-style:none}
[hidden]{display:none !important}
::selection{background:var(--red-600);color:var(--on-red)}
:focus-visible{outline:3px solid var(--red-600);outline-offset:3px;border-radius:var(--r-xs)}

/* Vizuálně skrytý text pro čtečky */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--wrap-pad)}
/* Rytmus sekcí. Mezeru mezi plnými sekcemi nese vždy jen horní hrana
   (--sp-section), aby se na švu se stejným podkladem nesčítalo odsazení dvou
   sousedních sekcí. Poslední sekce stránky nese odsazení i dole, jinak by se
   obsah dotýkal patičky.
   Pás s vlastním podkladem (Služby, Newsletter) se od sekce před sebou odděluje
   vlastním horním okrajem, takže sekce před ním nemusí vědět, co po ní následuje
   a obsah se nikdy nedotkne hrany pásu. Za výzvou (.ctaband) okraj nepřibývá,
   ta si bílou mezeru dole nese sama. */
.section{padding-top:var(--sp-section);position:relative}
.section:last-child{padding-bottom:var(--sp-section)}
#sluzby,.nl{margin-top:var(--sp-section)}
.ctaband+.nl{margin-top:0}

/* Nadpisky sekcí se nevykreslují. Třída zůstává jen kvůli dialogům a detailu vozu,
   kde je to prostý text, ne pilulka. */
.kicker{display:block;font-size:var(--fs-mala);font-weight:600;color:var(--red-700);margin:0 0 var(--sp-3)}
.sec-head{max-width:660px;margin-bottom:var(--sp-head)}
.sec-head h2{margin-bottom:var(--sp-4)}
.sec-head p{color:var(--muted);font-size:var(--fs-stredni)}
.sec-head--row{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap}
.sec-head--row>div{max-width:660px}
/* Úvod, sekce Kontakt: perex na jeden řádek na počítači (Ted, 28. 10. 2026).
   Na telefonu se zalomí sám, šířku tam drží okno. */
#kontakt .sec-head{max-width:none}
.hl{color:var(--red-600)}
.lead{font-size:var(--fs-stredni);line-height:1.5}
.grid{display:grid;gap:var(--sp-5)}
.g2{grid-template-columns:repeat(2,1fr)} .g4{grid-template-columns:repeat(4,1fr)}

/* Odkaz na přeskočení navigace. Leží mimo obrazovku a vysune se tabulátorem. */
.preskocit{position:absolute;left:-9999px;top:var(--sp-2);z-index:200;padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-sm);background:#fff;color:var(--text);border:2px solid var(--red-600);font-weight:600;font-size:var(--fs-mala)}
.preskocit:focus{left:var(--sp-4)}

/* ---------- TLAČÍTKA ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:var(--sp-7);
  padding:0 var(--sp-5);border:1px solid transparent;border-radius:var(--r-pill);
  font-family:var(--font-text);font-weight:600;font-size:var(--fs-mala);line-height:1;letter-spacing:0;white-space:nowrap;
  transition:background-color var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease),
             border-color var(--hover-dur) var(--hover-ease),box-shadow var(--hover-dur) var(--hover-ease)}
.btn .rot,.btn .ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;
  transition:transform var(--hover-dur) var(--hover-ease)}
.btn .rot svg,.btn .ic svg{width:22px;height:22px}
/* Šipka v tlačítku se na najetí i při fokusu otočí o 45 stupňů. Tlačítko samo se nehýbe. */
.btn:hover .rot,.btn:focus-visible .rot{transform:rotate(45deg)}
.btn-primary{background:var(--red-600);color:var(--on-red)}
.btn-primary:hover{background:var(--red-700)}
.btn-ghost{background:#fff;color:var(--text);border-color:var(--pearl-400)}
/* Na najetí zůstává obrys tenký a jen se přebarví na červenou, černý obrys
   působil jako tlustý (Ted, 28. 10. 2026). */
.btn-ghost:hover{border-color:var(--red-600);color:var(--red-700)}
.btn-outline{background:transparent;color:var(--red-700);border-color:var(--red-600)}
.btn-outline:hover{background:var(--red-50)}
/* Na červeném pásu: bílé tlačítko s červeným textem a bílý obrys */
.btn-bila{background:#fff;color:var(--red-600)}
.btn-bila:hover{background:var(--pearl-100);color:var(--red-700)}
.btn-obrys-bila{background:transparent;color:#fff;border-color:#fff}
.btn-obrys-bila:hover{background:rgba(255,255,255,.12)}
.btn-sm{min-height:40px;font-size:var(--fs-mala);padding:0 var(--sp-4)}
.btn-sm .rot,.btn-sm .ic,.btn-sm .rot svg,.btn-sm .ic svg{width:18px;height:18px}
/* Tlačítko přes celou šířku, šipka vpravo (karta vozu, panel detailu) */
.btn-blok{display:flex;width:100%;justify-content:space-between}
.btn-row{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.btn.is-busy{opacity:.6;pointer-events:none}

.metapill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-size:var(--fs-mala);font-weight:500;color:var(--text)}
.metapill svg{width:16px;height:16px;color:var(--muted);flex:none}

/* Štítek se nikdy nezlomí uprostřed slova. Leží na fotce vozu i na světlém podkladu,
   proto mají všechny plný podklad. */
.badge{display:inline-flex;align-items:center;font-size:var(--fs-mala);font-weight:600;line-height:1.3;
  padding:var(--sp-1) var(--sp-3);border-radius:var(--r-xs);white-space:nowrap}
.badge-stock{background:var(--red-50);color:var(--red-700)}
.badge-new{background:#fff;color:var(--text);box-shadow:inset 0 0 0 1px var(--pearl-300)}
.badge-sale{background:var(--danger-solid);color:var(--red-700)}
.badge-used{background:var(--pearl-100);color:var(--text);box-shadow:inset 0 0 0 1px var(--pearl-300)}
.badge-nove{background:var(--text);color:#fff}
.badge-order{background:var(--pearl-100);color:var(--text);box-shadow:inset 0 0 0 1px var(--pearl-300)}
.badge-top{background:#fff;color:var(--red-700);box-shadow:inset 0 0 0 1px var(--red-700)}
/* Brzy v prodeji: vůz teprve přijde. Je to jediný štítek stavu u takového vozu,
   proto plný červený podklad, aby byl vidět i na fotce. */
.badge-soon{background:var(--red-600);color:var(--on-red)}
.badge-prodano,.badge-rezervovano,.badge-sold{background:var(--pearl-300);color:var(--text)}

/* ---------- HLAVIČKA ----------
   Pruh přes celou šířku, přilepený k hornímu okraji. Leží v toku stránky,
   takže obsah pod ní nepotřebuje žádné odsazení navíc. */
.navbar{position:sticky;top:0;z-index:70;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);transition:box-shadow var(--hover-dur) var(--hover-ease)}
.navbar.is-stuck{box-shadow:var(--sh-xs)}
.nav-inner{display:flex;align-items:center;gap:var(--sp-3);min-height:var(--nav-v)}
.nav-inner>a:first-child{flex:none;display:inline-flex;align-items:center;min-height:var(--sp-7);border-radius:var(--r-xs)}
.nav-inner .logo{height:32px;width:auto}
.nav-links{display:none;gap:var(--sp-1);align-items:center;margin-left:var(--sp-5)}
.nav-links a{display:inline-flex;align-items:center;min-height:var(--sp-7);padding:0 var(--sp-4);font-size:var(--fs-mala);font-weight:500;
  border-radius:var(--r-pill);white-space:nowrap;
  transition:background-color var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease)}
.nav-links a:hover{background:var(--pearl-200);color:var(--red-700)}
.nav-links a.is-active,
.nav-links a[aria-current="page"]{color:var(--red-700)}
.nav-cta{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
/* Tlačítko v hlavičce se neláme na dva řádky, logo se nesmršťuje. */
.nav-cta .btn,.nav-inner>.btn{white-space:nowrap}
/* Telefon: pod 1180 px jen ikona v kolečku (text má nulové písmo), nad ní ikona a číslo. */
.nav-tel{display:none;align-items:center;justify-content:center;gap:var(--sp-2);flex:none;
  min-height:var(--sp-7);min-width:var(--sp-7);padding:0;font-size:0;font-weight:600;
  border:1px solid var(--pearl-400);border-radius:var(--r-pill);
  transition:color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease)}
.nav-tel svg{width:22px;height:22px;flex:none}
.nav-tel:hover{color:var(--red-700);border-color:var(--red-700)}
.nav-inner>.nav-tel{margin-left:auto}
.nav-inner>.nav-tel+.btn{margin-left:0}
.burger{display:inline-flex;align-items:center;justify-content:center;width:var(--sp-7);height:var(--sp-7);flex:none;
  border-radius:var(--r-pill);border:1px solid var(--pearl-400);background:#fff;color:var(--text)}
.burger svg{width:22px;height:22px}
.mobmenu{position:fixed;left:0;right:0;top:var(--nav-v);bottom:0;z-index:69;display:none;flex-direction:column;
  overflow:auto;background:#fff;border-top:1px solid var(--line);padding:var(--sp-3) var(--wrap-pad) var(--sp-6)}
.mobmenu.is-open{display:flex}
.mobmenu :focus-visible{outline-offset:-3px}
.mobmenu a{display:flex;align-items:center;min-height:var(--sp-7);font-family:var(--font-text);font-size:var(--fs-mala);font-weight:600;
  line-height:1.2;border-bottom:1px solid var(--line)}
.mobmenu a[aria-current="page"]{color:var(--red-700)}
/* Telefon v mobilním menu je řádek jako ostatní, s číslem. */
.mobmenu .nav-tel{justify-content:flex-start;gap:var(--sp-3);min-width:0;padding:0;border:0;border-bottom:1px solid var(--line);border-radius:0}
.mobmenu .nav-tel:hover{border-color:var(--line)}
/* Tlačítko je taky odkaz, takže si pravidlo výše přebije zpátky na vzhled tlačítka. */
.mobmenu .btn{min-height:var(--sp-7);font-size:var(--fs-mala);justify-content:space-between;border-bottom:2px solid transparent;
  margin-top:var(--sp-4);align-self:stretch}
@media (max-width:959px){
  :root{--nav-v:64px}
  .nav-cta .btn,.nav-inner>.btn{display:none}
  .nav-inner .logo{height:28px}
}
@media (min-width:960px){
  .nav-links{display:flex}
  .nav-tel{display:inline-flex}
  .burger,.mobmenu{display:none !important}
}
/* Čtyři položky menu a tlačítko Nezávazná poptávka (od 27. 10. 2026) se při
   960 px s plným odsazením nevešly o 2 px (změřeno v Chromiu: hlavička 898 px
   na 896 px místa). Do 1179 px mají odkazy proto užší odsazení, při 960 px
   zbývá asi 38 px rezervy. Od 1180 px se ukazuje i číslo telefonu a místa je dost. */
@media (min-width:960px) and (max-width:1179px){
  .nav-links{margin-left:var(--sp-4)}
  .nav-links a{padding:0 var(--sp-3)}
}
@media (min-width:1180px){
  .nav-tel{min-width:0;padding:0 var(--sp-3);font-size:var(--fs-mala);border-color:transparent}
  .nav-tel:hover{border-color:transparent}
  .nav-inner .logo{height:36px}
}

/* ---------- HERO ----------
   Text vlevo, galerie tří fotek vpravo v rámu. Od 28. 10. 2026 je hero aspoň
   tak vysoké jako okno bez pevné hlavičky (blok HERO NA CELOU VÝŠKU na konci
   souboru) a rám nad 900 px vyplní jeho výšku, nejvýš na poměr 4 : 5.
   Pod 900 px je to jeden sloupec a galerie leží pod textem v poměru 3 : 2. */
.hero{background:radial-gradient(60% 70% at 78% 36%,#fff 0%,rgba(255,255,255,0) 70%),linear-gradient(180deg,var(--pearl-200) 0%,#fff 100%);
  padding-block:var(--sp-6) var(--sp-6)}
.hero__grid{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr);align-items:stretch}
.hero__text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero h1{font-size:var(--fs-velka);line-height:1.04;letter-spacing:-.02em}
.hero__lead{margin-top:var(--sp-5);font-size:var(--fs-stredni);line-height:1.5;font-weight:500;max-width:34em}
.hero__akce{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-6)}
/* Nabídka hned pod hero: hero už nese spodní odsazení, sekce si nepřidává celé. */
.hero+.section{padding-top:var(--sp-7)}
.hero__ram{position:relative;isolation:isolate;aspect-ratio:3/2;min-width:0}
/* Perleťový rám pod fotkou, fotka sama zůstává bez filtru a bez překryvu. */
.hero__ram::before{content:"";position:absolute;inset:calc(var(--sp-2) * -1);z-index:-1;border-radius:var(--r-xl);
  background:var(--grad-pearl);box-shadow:0 var(--sp-5) var(--sp-8) var(--stin)}
.hero__frame{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;background:var(--pearl-200)}
.hero__slide{position:absolute;inset:0}
.hero__slide picture{display:block;width:100%;height:100%}
.hero__slide img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
/* Výchozí stav i „omezit pohyb": jen první fotka, nic se nehýbe. Ostatní se
   neukazují, takže se ani nestahují (líné obrázky v `display:none` se nenačtou). */
.hero__slide:not(:first-child){display:none}

/* Střídání fotek. Fotky jsou od 27. 10. 2026 tři (oranžová G6 zmizela), proto
   je cyklus 18 s: na každou fotku připadá 6 s a prolnutí do další trvá 1,2 s.
   Do té doby byl cyklus 30 s pro pět fotek a se třemi zůstával rám asi 11 s
   z každých 30 s prázdný. Kdyby fotek zase přibylo, cyklus je počet fotek
   krát 6 s a procenta v obou @keyframes se musí přepočítat (prolnutí 1,2 s,
   konec fotky 7,2 s od jejího začátku), stejně jako `--zp` níž.
   Nová fotka se rozsvěcí nad starou, která zůstává plná,
   dokud ji nová nepřekryje: žádné probliknutí podkladu uprostřed prolnutí.
   Pomalé přiblížení a posun (Ken Burns) běží po celou dobu, co je fotka vidět
   (7,2 s: prolnutí a její šest sekund). Fotka se přibližuje z 1,04 na 1,14
   a posune se nejvýš o 3 %; při takovém měřítku se okraje nikdy neodkryjí.
   Zpoždění je záporné: první fotka je od prvního snímku plná (kvůli LCP), ne
   až po prolnutí z průhledné. Každá fotka má vlastní směr posunu (`--kb-*`).
   Animuje se jen opacity a transform. */
@media (prefers-reduced-motion:no-preference){
  .hero__slide,.hero__slide:not(:first-child){display:block;opacity:0;
    animation:hero-prolnuti 18s cubic-bezier(.4,0,.2,1) infinite backwards;
    animation-delay:var(--zp)}
  .hero__slide:first-child{opacity:1}
  .hero__slide img{transform-origin:center;
    animation:hero-pohyb 18s cubic-bezier(.45,.05,.55,.95) infinite backwards;
    animation-delay:var(--zp)}
  /* `--zp` je zpoždění začátku: fotka číslo n se začne rozsvěcet o 6 s později
     než předchozí, a o 1,2 s dřív, než přijde na řadu (první je proto záporné). */
  .hero__slide:nth-child(1){--zp:-1.2s;--kb-x:-3%;--kb-y:-2%}
  .hero__slide:nth-child(2){--zp:4.8s;--kb-x:3%;--kb-y:-1%}
  .hero__slide:nth-child(3){--zp:10.8s;--kb-x:-2%;--kb-y:2%}
  /* Pozastavení: skript přidá `is-mimo`, když hero není vidět nebo je karta
     skrytá. Tlačítko pozastavení od 28. 10. 2026 není, fotky jedou dokola. */
  .hero.is-mimo .hero__slide,.hero.is-mimo .hero__slide img{animation-play-state:paused}
}
/* Procenta z 18 s: 6,67 % je 1,2 s (prolnutí), 8,33 % je 1,5 s (do té doby leží
   nová fotka nad starou), 40 % je 7,2 s (konec fotky, další je už plná). */
@keyframes hero-prolnuti{
  0%{opacity:0;z-index:2}
  6.67%,8.33%{opacity:1;z-index:2}
  8.34%,40%{opacity:1;z-index:1}
  40.01%,100%{opacity:0;z-index:0}
}
@keyframes hero-pohyb{
  0%{transform:translate3d(0,0,0) scale(1.04)}
  40%{transform:translate3d(var(--kb-x,-3%),var(--kb-y,-2%),0) scale(1.14)}
  40.01%,100%{transform:translate3d(0,0,0) scale(1.04)}
}
@media (min-width:640px){
  .hero__akce{flex-direction:row;flex-wrap:wrap}
}
@media (min-width:900px){
  .hero{padding-block:var(--sp-7) var(--sp-6)}
  .hero__grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--sp-8)}
  .hero__ram{aspect-ratio:auto}
  .hero__ram::before{border-radius:var(--r-2xl)}
  .hero__frame{border-radius:var(--r-xl)}
}

/* ---------- NABÍDKA NA ÚVODU: FILTR ----------
   Filtr je perleťový panel uvnitř sekce, ne lišta přes hero. Pole mají okraj
   --okraj-pole (kontrast 3 : 1), popisek je nad hodnotou. */
.finder{position:relative;z-index:20}
.finder--v-sekci{display:grid;gap:var(--sp-4);grid-template-columns:minmax(0,1fr);align-items:end;
  padding:var(--sp-5);background:var(--grad-pearl);border-radius:var(--r-lg);margin:0 0 var(--sp-6)}
.finder--v-sekci>.wrap,.finder--v-sekci>.finder__bar{display:contents}
.finder--v-sekci .wrap{max-width:none;padding-inline:0}
.finder--v-sekci>script{display:none}
.finder__bar{display:flex;flex-wrap:wrap;gap:var(--sp-4)}
.ff{position:relative;min-width:0}
.ff__btn{display:flex;align-items:center;gap:var(--sp-3);width:100%;min-height:var(--finder-v);padding:var(--sp-2) var(--sp-4);
  text-align:left;background:#fff;border:1px solid var(--okraj-pole);border-radius:var(--r-sm);
  transition:border-color var(--hover-dur) var(--hover-ease)}
.ff__btn:hover,.ff.is-open .ff__btn{border-color:var(--text)}
.ff__btn::after{content:"";flex:none;width:20px;height:20px;margin-left:auto;background:currentColor;
  -webkit-mask:var(--ff-sipka) center/20px no-repeat;mask:var(--ff-sipka) center/20px no-repeat;
  transition:transform var(--hover-dur) var(--hover-ease)}
.ff.is-open .ff__btn::after{transform:rotate(180deg)}
.ff{--ff-sipka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E")}
.ff__ico{display:none}
.ff__txt{min-width:0;flex:1}
.ff__lbl{display:block;font-size:var(--fs-mala);font-weight:600;line-height:1.3;color:var(--muted);margin-bottom:2px}
.ff__val{display:block;font-size:var(--fs-mala);font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ff__sep{display:none}
.ff__panel{position:absolute;top:calc(100% + var(--sp-2));left:0;min-width:100%;width:max-content;max-width:320px;
  background:#fff;border:1px solid var(--pearl-400);border-radius:var(--r-md);
  box-shadow:var(--sh-md);padding:var(--sp-2);display:none;z-index:30}
.ff.is-open .ff__panel{display:block}
.ff__panel button{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-xs);font-size:var(--fs-mala);text-align:left;
  transition:background-color var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease)}
.ff__panel button:hover{background:var(--pearl-100)}
.ff__panel button[aria-selected="true"]{color:var(--red-700);background:var(--red-50);font-weight:600}
.ff__panel button span.c{font-size:var(--fs-mala);color:var(--muted)}
/* Možnost, která by nenašla žádný vůz, zůstává klikatelná, ale je vidět, že vede do prázdna. */
.ff__panel button.is-empty{opacity:.5}
.finder__go{width:100%;min-height:var(--finder-v)}
.finder__go.is-off{opacity:.5;cursor:not-allowed}
/* Stav: tři volby v jedné řadě uvnitř boxu stejně vysokého jako ostatní pole.
   Popisek (legend) je plovoucí, takže se chová jako běžný řádek uvnitř boxu. */
.seg{min-width:0;margin:0;padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);min-height:var(--finder-v);
  background:#fff;border:1px solid var(--okraj-pole);border-radius:var(--r-sm);
  display:flex;flex-wrap:wrap;align-content:center;gap:var(--sp-1) var(--sp-1)}
.seg>legend{float:left;width:100%;padding:0;font-size:var(--fs-mala);font-weight:600;line-height:1.3;color:var(--muted)}
.seg input[type="radio"]{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg>label{display:flex;align-items:center;justify-content:center;flex:1 1 0;min-width:0;min-height:28px;padding:0 var(--sp-3);
  background:var(--pearl-100);border-radius:var(--r-xs);font-size:var(--fs-mala);font-weight:600;cursor:pointer;
  transition:background-color var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease)}
.seg>label:hover{background:var(--pearl-200)}
.seg input:checked+label,.seg input:checked+label:hover{background:var(--text);color:#fff}
.seg input:focus-visible+label{outline:3px solid var(--red-600);outline-offset:2px}
@media (min-width:700px){
  .finder--v-sekci{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder--v-sekci>.finder__go,.finder--v-sekci .finder__go{grid-column:1 / -1}
}
@media (min-width:1180px){
  .finder--v-sekci{grid-template-columns:minmax(0,1.1fr) minmax(0,1.25fr) minmax(0,1fr) minmax(0,1fr) auto;gap:var(--sp-5);
    padding:var(--sp-5) var(--sp-6)}
  .finder--v-sekci>.finder__go,.finder--v-sekci .finder__go{grid-column:auto;width:auto}
}
.nabidka__akce{display:flex;justify-content:center;margin-top:var(--sp-7)}
#nabidka .sec-head{margin-bottom:var(--sp-6)}

/* ---------- KARTA VOZU ---------- */
.veh{display:flex;flex-direction:column;position:relative;overflow:hidden;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color .25s var(--hover-ease),box-shadow .25s var(--hover-ease)}
.veh:hover{border-color:var(--pearl-400);box-shadow:0 var(--sp-5) var(--sp-7) var(--stin)}
/* Celá karta vede na detail. Odkaz zůstává jeden (tlačítko Detail, které
   má i přístupný název), jeho neviditelná vrstva se roztáhne přes kartu.
   Karta je jediný předek s position, takže vrstva kryje právě ji. Najetí
   kamkoli na kartu zároveň rozsvítí tlačítko. */
.veh .btn-blok::after{content:"";position:absolute;inset:0;z-index:1}
.veh-media{position:relative;aspect-ratio:3/2;overflow:hidden;background:#fff}
.veh-media img{width:100%;height:100%;object-fit:contain;padding:12% 10% 4%;background:#fff;transition:transform .6s ease}
.veh:hover .veh-media img{transform:scale(1.04)}
/* Fotka v kartě má zaoblené rohy (Ted, 30. 10. 2026). Zaoblit jde jen obrázek,
   jehož rámeček je velký přesně jako fotka: s object-fit:contain a odsazením by
   se zaoblil bílý okraj kolem, ne fotka. Proto odsazení nese <picture>
   a obrázek se do něj vejde vlastní velikostí. Vyříznutým vozům na bílém
   (G6, G9) se tím nic viditelného nemění, fotce s pozadím (L03, G9L) ano. */
.veh-media>picture{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12% 10% 4%}
.veh-media>picture img{width:auto;height:auto;max-width:100%;max-height:100%;padding:0;border-radius:var(--r-sm)}
.veh-fill{position:absolute;inset:0;display:grid;place-items:center;background:var(--pearl-200)}
.veh-fill span{font-family:var(--font-display);font-size:var(--fs-velka);font-weight:600;color:var(--muted)}
/* Vůz Brzy v prodeji bez fotky: na perleti obecná grafika „připravujeme“
   (přerušovaný obrys auta podle karoserie, assets/img/vuz-brzy-suv.svg a vuz-brzy-nizky.svg), pod ní model a červený nápis. */
.veh-fill--brzy{background:var(--grad-pearl);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;text-align:center;padding:16% 8% 5%}
/* Grafika se zmenšuje s kartou: nejvýš 42 % výšky plochy, aby se obrys, model
   i nápis vešly i do úzké karty ve výpisu a obrys nevlezl pod štítek. */
.veh-media .veh-fill--brzy img,.gal__main .veh-fill--brzy img{display:block;flex:0 1 auto;min-height:0;width:auto;max-width:72%;
  max-height:42%;height:auto;padding:0;background:none;margin-bottom:4%;object-fit:contain}
.veh-fill--brzy span{font-size:var(--fs-stredni);line-height:1.1}
.veh-fill--brzy b{font-size:var(--fs-mala);font-weight:600;color:var(--red-700);text-wrap:balance}
@media (min-width:641px){ .gal__main .veh-fill--brzy span{font-size:var(--fs-velka)} .gal__main .veh-fill--brzy b{font-size:var(--fs-stredni)} }
/* Štítky nad fotkou ve dvou skupinách: vlevo, co vůz je a jestli je skladem,
   vpravo akční štítek. Pás je široký jako fotka, takže štítky nemají kam přetéct;
   nevejdou-li se obě skupiny na řádek, akční štítek se zalomí pod ně. */
.veh-tags{position:absolute;top:var(--sp-3);left:var(--sp-3);right:var(--sp-3);display:flex;gap:var(--sp-2);
  flex-wrap:wrap;align-items:flex-start;z-index:2;pointer-events:none}
.veh-tags__stav,.veh-tags__akce{display:flex;gap:var(--sp-2);flex-wrap:wrap;min-width:0}
.veh-tags__akce{margin-left:auto}
.veh-body{padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);flex:1}
.veh-title h3{font-size:var(--fs-stredni)}
/* Karty vedle sebe mají údaje (výkon, dojezd) a cenu ve stejné výšce, i když
   je název jednoho vozu na dva řádky a druhého na jeden (Ted, 28. 10. 2026).
   Nadpis má proto vždy místo na dva řádky. Na mobilu jsou karty pod sebou,
   tam by prázdný řádek jen překážel. */
@media (min-width:641px){ .veh-title h3{min-height:2.4em;min-height:2lh} }
.veh-title .brand-t{font-size:var(--fs-mala);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-1)}
.veh-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:var(--sp-2) var(--sp-4);
  padding-block:var(--sp-4);border-block:1px solid var(--line)}
.veh-spec{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-mala);font-weight:500;white-space:nowrap;min-width:0}
.veh-spec svg{width:16px;height:16px;color:var(--muted);flex:none}
.veh-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap}
.veh-foot>.btn{margin-left:auto}
/* Cena nad tlačítkem přes celou šířku karty */
.veh-foot--sloupec{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--sp-4)}
.veh-foot--sloupec>.btn{margin-left:0}
.veh-price .lbl{font-size:var(--fs-mala);color:var(--muted);margin-bottom:2px}
.veh-price .val{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--sp-2);white-space:nowrap;
  font-family:var(--font-display);font-size:var(--fs-stredni);font-weight:600;line-height:1.15;letter-spacing:0;
  word-spacing:.1em}
/* word-spacing: nezlomitelná mezera za jedničkou je v Clash Display skoro nulová
   a „1 059 000 Kč“ se četlo jako „1059 000 Kč“. Mezera mezi slovy počítá i tu,
   ale jen u ceny: „s DPH“ a přeškrtnutá cena mají mezery běžné. Cena a „s DPH“
   stojí na jedné účaří, a když se vedle sebe nevejdou, „s DPH“ přejde pod cenu
   místo aby přetekla z karty. */
.veh-price .val .was{flex-basis:100%}
.veh-price .val small,.veh-price .val .was{word-spacing:normal}
.veh-price .val small{font-family:var(--font-text);font-size:var(--fs-mala);font-weight:500;letter-spacing:0;color:var(--muted)}
.veh-price .sub{font-size:var(--fs-mala);color:var(--muted);margin-top:2px}
.veh-price .was{display:block;font-size:var(--fs-mala);font-family:var(--font-text);font-weight:400;line-height:1.4;color:var(--muted);text-decoration:line-through}

/* Karty se skládají podle šířky okna: tři, dvě, jedna. */
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){ .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:699px){ .g3,.g2{grid-template-columns:minmax(0,1fr)} }

/* ---------- XPENG ---------- */
.xp{position:relative}
.xp__grid{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr);background:var(--grad-pearl);
  border-radius:var(--r-xl);padding:var(--sp-2)}
.xp__media{margin:0}
.xp__media img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-lg)}
.xp__text{padding:var(--sp-2) var(--sp-4) var(--sp-5)}
.xp__text p{margin-top:var(--sp-4);max-width:36em}
.xp__text .lead{font-size:var(--fs-stredni);font-weight:500}
.xp__body{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}
.xp__body li{display:flex;align-items:flex-start;gap:var(--sp-3);font-weight:500}
.xp__body li svg{width:22px;height:22px;flex:none;color:var(--red-700);margin-top:2px}
.xp__body li:not(:has(svg))::before{content:"";flex:none;width:22px;height:22px;margin-top:2px;background:var(--red-700);
  -webkit-mask:var(--xp-fajfka) center/22px no-repeat;mask:var(--xp-fajfka) center/22px no-repeat}
.xp__body{--xp-fajfka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E")}
.xp__zeekr{margin-top:var(--sp-5)}
@media (min-width:900px){
  .xp__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--sp-7);padding:var(--sp-3);border-radius:var(--r-2xl);align-items:center}
  .xp__media img{border-radius:var(--r-xl)}
  .xp__text{padding:var(--sp-6) var(--sp-7) var(--sp-6) 0}
}

/* ---------- SLUŽBY ----------
   Tři karty s fotkou nahoře a textem pod ní. Karty nikam nevedou, žádné
   podstránky služeb nejsou. Fotka má pevný poměr 3:2, aby tři karty vedle
   sebe držely stejnou linku i s fotkami různých rozměrů. */
#sluzby{background:var(--surface);border-block:1px solid var(--line);padding-bottom:var(--sp-section)}
#sluzby .grid.g3{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ #sluzby .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sluzba{display:flex;flex-direction:column}
.sluzba__fig{position:relative;margin:0 0 var(--sp-5);border-radius:var(--r-lg);overflow:hidden;
  background:var(--pearl-200);border:1px solid var(--line)}
/* height:auto musí být. Obrázek má v HTML width a height a ta výška je pro
   prohlížeč pevná, aspect-ratio ji bez tohohle řádku nepřebije. */
.sluzba__fig img,.sluzba__vypln{display:block;width:100%;height:auto;aspect-ratio:3/2}
.sluzba__fig img{object-fit:cover}
/* Výplň místo fotky, kterou klient teprve nahraje. */
.sluzba__vypln{display:grid;place-items:center;background:var(--grad-pearl);color:var(--red-700)}
.sluzba__vypln svg{width:52px;height:52px}
.sluzba h3{font-size:var(--fs-stredni);margin-bottom:var(--sp-3)}
.sluzba p{color:var(--muted);font-size:var(--fs-mala);max-width:42ch}
@media (max-width:899px){ .sluzba p{max-width:none} }

/* ---------- VÝZVA K AKCI ----------
   Červený pás bez fotky: text vlevo, tlačítka vpravo za svislou linkou. */
.ctaband{padding-top:var(--sp-section);padding-bottom:var(--sp-section)}
.ctaband__pas{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr);
  padding:var(--sp-7) var(--sp-5);background:var(--red-600);color:var(--on-red);border-radius:var(--r-xl)}
.ctaband__pas::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(70% 120% at 100% 0%,rgba(255,255,255,.08),rgba(255,255,255,0) 60%)}
.ctaband h2,.ctaband h3{font-size:var(--fs-velka);color:var(--on-red)}
.ctaband__text p{margin-top:var(--sp-3);font-size:var(--fs-stredni);max-width:30em;color:var(--on-red)}
.ctaband__akce{display:flex;flex-direction:column;gap:var(--sp-3);align-items:stretch}
.ctaband :focus-visible{outline-color:#fff}
@media (min-width:640px){ .ctaband__akce{align-items:flex-start} }
@media (min-width:900px){
  .ctaband__pas{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:var(--sp-7);
    padding:var(--sp-8);border-radius:var(--r-2xl)}
  .ctaband__akce{padding-left:var(--sp-7);border-left:1px solid rgba(255,255,255,.45)}
}

/* ---------- NEWSLETTER ---------- */
.nl{background:var(--surface);border-block:1px solid var(--line);padding-top:var(--sp-8);padding-bottom:var(--sp-8)}
.nl__grid{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr);align-items:start}
.nl__text h2{font-size:var(--fs-velka)}
.nl__text p{margin-top:var(--sp-3);color:var(--muted);max-width:30em}
.nl__form{min-width:0}
.nl__radek{display:flex;flex-direction:column;gap:var(--sp-3)}
.nl__radek .btn{width:100%}
.nl__pole{flex:1;min-width:0}
.nl__pole .field,.nl__pole.field{margin-bottom:0}
.nl__souhlas{margin-top:var(--sp-4)}
.nl__souhlas .check{font-size:var(--fs-mala);line-height:1.5}
/* Odkaz na zásady je poslední prvek pásu. Jeho spodní okraj by pás prodloužil dole
   o 24 px proti nahoře. */
.nl__souhlas .check-odkaz{margin-bottom:0}
.nl__ok{padding:var(--sp-6);background:#fff;border:1px solid var(--pearl-300);border-radius:var(--r-lg);text-align:left}
.nl__ok h3{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-stredni);margin-bottom:var(--sp-3)}
.nl__ok .ico{margin:0 0 var(--sp-4)}
.nl__ok p{margin:0}
@media (min-width:900px){
  .nl__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--sp-8)}
  .nl__radek{flex-direction:row;align-items:flex-end}
  .nl__radek .btn{flex:none;width:auto}
}

/* ---------- KONTAKT ----------
   Formulář vlevo, kontakty vpravo na perleti. Na telefonu je formulář první. */
.kontakt-blok,.contact{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr)}
.kontakt-blok>:not(:has(.cline)),.contact>:not(:has(.cline)){order:1}
.kontakt-blok>:has(.cline),.contact>:has(.cline){order:2}
.contact-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--sp-5)}
.contact-card:has(.cline){background:var(--grad-pearl);border-color:transparent}
.kontakt-str{padding-top:var(--sp-pod-zahlavim)}
/* Provozovatel pod kontakty na stránce Kontakt: obchodní firma, sídlo, IČO,
   DIČ a zápis v rejstříku. Patička má jen obchodní firmu. */
.provozovatel{margin-top:var(--sp-7);padding:var(--sp-5) var(--sp-6);border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);color:var(--muted)}
.provozovatel h2{font-size:var(--fs-stredni);color:var(--text);margin-bottom:var(--sp-3)}
.provozovatel p{margin:0}
.provozovatel p+p{margin-top:var(--sp-1)}
.provozovatel strong{color:var(--text);font-weight:600}
.contact-card:has(.cline)>.btn{margin-top:var(--sp-5)}
/* Karta kontaktů je stejně vysoká jako formulář. Dolní část (prohlídka a sítě)
   se drží u spodního okraje, ať karta nepůsobí prázdně. */
.contact-card:has(.cline){display:flex;flex-direction:column}
.kontakt-dalsi{margin-top:auto;padding-top:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
/* Prohlídka je od 28. 10. 2026 jen tlačítko, bez nadpisu a textu (Ted). Obal
   už není karta, tlačítko drží svou šířku. */
.kontakt-prohlidka{display:flex}
.kontakt-site{display:flex;align-items:center;gap:var(--sp-3);flex-wrap:wrap;color:var(--muted)}
.kontakt-site ul{display:flex;gap:var(--sp-2);margin:0;padding:0;list-style:none}
.kontakt-site a{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-pill);background:#fff;
  border:1px solid var(--pearl-300);color:var(--text);
  transition:color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease),background var(--hover-dur) var(--hover-ease)}
.kontakt-site a:hover{color:var(--red-700);border-color:rgba(var(--red-rgb),.34);background:var(--red-50)}
.kontakt-site svg{width:18px;height:18px}
/* Karta kontaktů v kontaktním bloku je stejně vysoká jako formulář. Volné místo
   se rozdělí rovnoměrně mezi tři řádky (telefon, e-mail, doba k zastižení),
   obsah každého řádku stojí na jeho středu, a prohlídka se sítěmi tvoří patu
   karty v jednom řádku pod linkou. Dřív zůstala mezi dobou k zastižení
   a tlačítkem velká prázdná plocha (Ted, 28. 10. 2026). */
.kontakt-blok .contact-card:has(.cline)>.cline{flex:1 1 auto;align-items:center}
.kontakt-blok .contact-card:has(.cline)>.cline:first-of-type{padding-top:var(--sp-4)}
.kontakt-blok .contact-card:has(.cline)>.kontakt-dalsi{margin-top:0;padding-top:var(--sp-5);border-top:1px solid rgba(var(--film),.12);
  flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-4)}
.cline{display:flex;gap:var(--sp-3);padding:var(--sp-4) 0;border-top:1px solid rgba(var(--film),.12)}
.cline:first-of-type{border-top:0;padding-top:0}
.cline .ci{width:40px;height:40px;border-radius:var(--r-xs);display:grid;place-items:center;flex:none;
  background:#fff;border:1px solid var(--pearl-300);transition:background-color var(--hover-dur) var(--hover-ease)}
.cline .ci svg{width:20px;height:20px;color:var(--text)}
.cline .cline__lb{display:block;font-size:var(--fs-mala);font-weight:600;color:var(--text);margin-bottom:2px}
.cline .vl{font-size:var(--fs-mala);font-weight:600}
.cline .vl a:hover{color:var(--red-700)}
.cline .vl small{display:block;font-weight:400;font-size:var(--fs-mala);color:var(--text);margin-top:var(--sp-1)}
/* Odkaz WhatsApp uprostřed věty pod dobou k zastižení: podtržený, ať je vidět. */
.cline .vl .kontakt-whatsapp{margin-top:var(--sp-2);max-width:48ch}
.kontakt-whatsapp a{font-weight:600;text-decoration:underline;text-underline-offset:3px}
@media (min-width:960px){
  /* Formulář a karta kontaktů vedle sebe stejně vysoké. */
  .kontakt-blok,.contact{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--sp-6);align-items:stretch}
  .kontakt-blok>:not(:has(.cline)),.contact>:not(:has(.cline)){grid-column:1;grid-row:1;order:0}
  .kontakt-blok>:has(.cline),.contact>:has(.cline){grid-column:2;grid-row:1;order:0}
  .contact-card{padding:var(--sp-6)}
}

/* ---------- PATIČKA ---------- */
.footer{background:var(--surface);border-top:1px solid var(--line);padding-top:var(--sp-8)}
.foot-grid{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr)}
.foot h4{font-family:var(--font-text);font-size:var(--fs-mala);font-weight:700;letter-spacing:0;line-height:1.4;color:var(--text);margin-bottom:var(--sp-2)}
.foot ul{display:flex;flex-direction:column;gap:0}
.foot a{display:inline-flex;align-items:center;min-height:30px;font-size:var(--fs-mala);color:var(--text);text-underline-offset:var(--sp-1);
  transition:color var(--hover-dur) var(--hover-ease)}
.foot a:hover{color:var(--red-700);text-decoration:underline}
.foot p,.foot span{font-size:var(--fs-mala);color:var(--text)}
.foot li>span{display:block}
.foot>img,.foot .logo{height:36px;width:auto;margin-bottom:var(--sp-4)}
.foot .foot__upozorneni{margin-top:var(--sp-3);max-width:30em;font-size:var(--fs-mala);color:var(--muted)}
/* Ikonky Facebooku a Instagramu pod popisem v patičce. */
.foot .foot__site{display:flex;flex-direction:row;gap:var(--sp-2);margin-top:var(--sp-4);padding:0;list-style:none}
.foot .foot__site a{justify-content:center;width:40px;height:40px;min-height:40px;border:1px solid var(--line);
  border-radius:var(--r-pill);background:var(--bg);color:var(--text);
  transition:color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease),background var(--hover-dur) var(--hover-ease)}
.foot .foot__site a:hover{color:var(--red-700);border-color:rgba(var(--red-rgb),.34);background:var(--red-50);text-decoration:none}
.foot .foot__site svg{width:18px;height:18px}
.foot__spodek,.foot-bar{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-7);padding:var(--sp-5) 0 var(--sp-6);
  border-top:1px solid var(--line);font-size:var(--fs-mala);color:var(--muted)}
/* Spodní řádek: vlevo firma, vpravo právní odkazy a podpis agentury. */
.foot__vpravo{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-5)}
.foot__pravni{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-4)}
@media (min-width:960px){.foot__vpravo{justify-content:flex-end}}
.footer .foot__spodek .foot__pravni a{min-height:30px;font-size:var(--fs-mala);color:var(--muted);text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:var(--sp-1)}
.footer .foot__spodek .foot__pravni a:hover{color:var(--red-700);text-decoration-color:currentColor}
/* Podpis agentury: šedý text a logo vykymedia, celé jako jeden odkaz. Logo je tmavé na
   průhledném podkladu, šedou v tónu --muted mu dává průhlednost, na najetí se jemně
   ztmaví (bez posunu). Výška loga se řídí písmem (1.35 em, na 14 px asi 19 px). Písmo
   v logu stojí 27 % výšky nad spodní hranou obrázku, o tolik se obrázek posune dolů,
   aby text i logo seděly na jednom účaří. Odkaz zůstává jen tak široký jako obsah
   (ne přes celý řádek), zvětšený ::after dává cíl aspoň 24 px vysoký. */
.footer .foot__spodek .foot__autor{position:relative;display:inline-block;align-self:flex-start;white-space:nowrap;
  color:var(--muted);text-decoration:none;transition:color var(--hover-dur) var(--hover-ease)}
.foot__autor::after{content:"";position:absolute;inset:-4px -6px}
.foot__autor img{display:inline-block;height:1.35em;width:auto;max-width:none;margin-left:.45em;vertical-align:-.367em;
  opacity:.75;transition:opacity var(--hover-dur) var(--hover-ease)}
.footer .foot__spodek .foot__autor:hover{color:var(--text)}
.foot__autor:hover img{opacity:1}
@media (min-width:700px){
  .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-grid>.foot:first-child{grid-column:1 / -1}
}
@media (min-width:960px){
  .foot__spodek,.foot-bar{flex-direction:row;justify-content:space-between}
}
@media (min-width:1100px){
  .foot-grid{grid-template-columns:minmax(0,1.7fr) repeat(3,minmax(0,1fr))}
  .foot-grid>.foot:first-child{grid-column:auto}
}

/* ---------- MOBILNÍ SPODNÍ LIŠTA ---------- */
.mobcta{position:fixed;left:0;right:0;bottom:0;z-index:65;display:none;gap:var(--sp-3);
  padding:var(--sp-3) var(--wrap-pad) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line)}
.mobcta .btn{flex:1;justify-content:center;white-space:nowrap;min-height:var(--sp-7)}
/* Odsazení pro spodní lištu patří patičce, ne tělu stránky: šedá patička pak
   pokračuje pod lištou a pod ní nezůstane bílý pruh. Stránky bez patičky
   (údržba) tak nezískají zbytečné posouvání. */
@media (max-width:959px){
  .mobcta{display:flex}
  .footer{padding-bottom:var(--mobcta-v)}
}

/* ---------- ODKRÝVÁNÍ PŘI POSUNU ----------
   Obsah smí skrývat jen prohlížeč, který ho umí zase ukázat. Třídu `js` přidá
   skript v hlavičce; bez JavaScriptu se nepřidá a `.rv` nikdy nic neschová. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .js .rv{opacity:1;transform:none;transition:none}
  .veh:hover .veh-media img{transform:none}
}

/* ==================== formuláře ====================
   Pole mají okraj --okraj-pole (kontrast 3 : 1 na bílé), popisek je nad polem. */
.field{margin-bottom:var(--sp-4)}
.field label{display:block;font-size:var(--fs-mala);font-weight:600;color:var(--text);margin-bottom:var(--sp-2)}
.input,.select,.textarea{width:100%;min-height:var(--sp-7);padding:0 var(--sp-4);font-family:var(--font-text);font-size:var(--fs-mala);line-height:1.3;
  color:var(--text);background:#fff;border:1px solid var(--okraj-pole);border-radius:var(--r-sm);
  transition:border-color var(--hover-dur) var(--hover-ease),box-shadow var(--hover-dur) var(--hover-ease)}
.textarea{min-height:128px;padding:var(--sp-3) var(--sp-4);line-height:1.5;resize:vertical}
.input::placeholder,.textarea::placeholder{color:var(--muted);opacity:1}
.input:hover,.select:hover,.textarea:hover{border-color:var(--red-600)}
.input:focus,.select:focus,.textarea:focus{border-color:var(--red-600)}
/* Pole formulářů nemají při kliknutí druhý rámeček (obecný :focus-visible
   obrys 3 px s odstupem). Aktivní pole pozná zákazník podle červeného okraje,
   na najetí i po kliknutí se okraj jen přebarví na červenou (Ted, 28. 10. 2026). */
.input:focus-visible,.select:focus-visible,.textarea:focus-visible,
.vyber__tlacitko.select:focus-visible{outline:none;border-color:var(--red-600)}
.select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0D10' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right var(--sp-3) center;background-size:20px;padding-right:var(--sp-7)}

/* Zaškrtávátko. Zaklikává se jen čtvereček, ne celý řádek: souhlas se zpracováním
   údajů má být vědomý krok. Popisek zůstává <label>, takže ho čtečka přečte
   a pole s ním je svázané, jen nereaguje na kliknutí. */
.check{display:grid;grid-template-columns:auto 1fr;gap:0 11px;align-items:start;font-size:var(--fs-mala);color:var(--text);
  pointer-events:none;cursor:default}
.check input{pointer-events:auto;cursor:pointer;appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;flex:none;
  border:1px solid var(--okraj-pole);border-radius:var(--r-xs);background:#fff;
  transition:background-color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease)}
.check input:hover{border-color:var(--text)}
.check input:checked{background:var(--red-600) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--red-600)}
.check>span{line-height:22px}
/* Souhlas je krátký odkaz na zásady přímo v popisku. Popisek
   kliknutí nepropouští, odkaz ano. Klik na odkaz uvnitř <label> zaškrtávátko
   nepřepne, prohlížeč ho jako aktivaci popisku nepočítá. */
.check a{pointer-events:auto;color:inherit;text-decoration:underline;text-decoration-color:var(--pearl-400);
  text-underline-offset:3px;transition:color var(--hover-dur) var(--hover-ease),text-decoration-color var(--hover-dur) var(--hover-ease)}
.check a:hover{color:var(--red-700);text-decoration-color:currentColor}
@media (pointer:coarse){
  .check input{width:26px;height:26px;background-size:16px}
  .check>span{line-height:26px}
}
/* Odkaz na zásady pod zaškrtávátkem leží mimo <label>, ten má pointer-events:none.
   Odsazení 33 px je šířka čtverečku (22) plus mezera (11), odkaz tedy začíná pod textem. */
.check-odkaz{margin:var(--sp-2) 0 var(--sp-5) 33px;font-size:var(--fs-mala);line-height:1.4}
.check-blok .check-odkaz{margin-bottom:0}
.check-odkaz a{color:var(--text);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.check-odkaz a:hover{color:var(--red-700)}
@media (pointer:coarse){ .check-odkaz{margin-left:37px} }

/* Ověřování formulářů. Chybová červená je tmavší než značková, hláška má vždy ikonu a text. */
.check.is-err span{color:var(--danger)}
.check.is-err input{border-color:var(--danger);box-shadow:0 0 0 3px rgba(180,35,24,.16)}
.input.is-err,.textarea.is-err,.select.is-err{border-color:var(--danger);box-shadow:0 0 0 3px rgba(180,35,24,.16)}
.formerr{display:none;margin-bottom:var(--sp-4);padding:11px var(--sp-4);border-radius:var(--r-sm);
  background:rgba(180,35,24,.08);border:1px solid rgba(180,35,24,.35);color:var(--danger-text);font-size:var(--fs-mala);font-weight:500}
.formerr::before{content:"";display:inline-block;width:18px;height:18px;margin-right:var(--sp-2);vertical-align:-4px;background:currentColor;
  -webkit-mask:var(--formerr-ikona) center/18px no-repeat;mask:var(--formerr-ikona) center/18px no-repeat}
.formerr{--formerr-ikona:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E")}
.formerr.is-on{display:block}

/* Potvrzení odeslaného formuláře */
.sent{display:none;text-align:center;padding:clamp(20px,3vw,32px) var(--sp-2)}
.is-sent .sent{display:block}
.is-sent .sent~*,.is-sent>*:not(.sent){display:none}
.sent .ico{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto var(--sp-4);
  background:var(--red-600);color:var(--on-red)}
.sent .ico svg{width:26px;height:26px}
.sent h3{font-size:var(--fs-stredni);margin-bottom:var(--sp-3)}
.sent p{color:var(--muted);font-size:var(--fs-mala);max-width:40ch;margin:0 auto}
form[data-form]{position:relative}
form[data-form] .sent{display:none}
form[data-form].is-sent .sent{display:block}
form[data-form].is-sent>*:not(.sent){display:none}
.nl__ok.sent{text-align:left;padding:var(--sp-6)}
.nl__ok.sent p{margin:0;max-width:none}

/* Past na roboty. Mimo obrazovku, ne přes display:none: část automatů skrytá pole přeskakuje. */
.hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden}

/* ==================== objednání termínu ====================
   Prohlídku, zkušební jízdu i konzultaci si návštěvník naklikne v kalendáři. */
.bk{position:fixed;inset:0;z-index:96;background:var(--scrim-dialog);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:none;padding:clamp(10px,2vh,24px) clamp(14px,3vw,44px);overflow:auto}
/* Otevřené okno stojí svisle na středu obrazovky (Ted, 28. 10. 2026). Okraj
   auto ve sloupci centruje, a když je okno vyšší než obrazovka, začne nahoře
   a jde posouvat, nic se neořízne. */
.bk.is-open{display:flex;flex-direction:column}
/* flex-shrink:0: okno vyšší než obrazovka (mobil) se nesmí smrsknout na její
   výšku, jinak obsah vyteče přes bílý podklad. Má se posouvat celé. */
.bk.is-open>.bk__box{margin:auto;width:100%;flex-shrink:0}
.bk__box{max-width:960px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);position:relative;
  box-shadow:0 var(--sp-6) var(--sp-9) rgba(60,66,76,.28)}
.bk__in{padding:clamp(18px,2.2vw,28px) clamp(18px,2.6vw,32px);position:relative}
.bk__x{position:absolute;top:var(--sp-5);right:var(--sp-5);z-index:2;width:var(--sp-7);height:var(--sp-7);border-radius:50%;
  display:grid;place-items:center;border:1px solid var(--pearl-400);background:#fff;
  transition:border-color var(--hover-dur) var(--hover-ease)}
.bk__x:hover{border-color:var(--text)}
.bk__x svg{width:20px;height:20px}
.bk__head{padding-right:var(--sp-8)}
.bk__head h2{font-size:var(--fs-stredni);margin-bottom:var(--sp-1)}
.bk__head p{color:var(--muted);font-size:var(--fs-mala)}
.bk__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(20px,3vw,36px);margin-top:var(--sp-4);align-items:start}
.bk__lbl{font-size:var(--fs-mala);font-weight:600;color:var(--text);margin-bottom:var(--sp-2)}
.bk__types{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.bktype{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-4);border-radius:var(--r-pill);
  border:1px solid var(--okraj-pole);background:#fff;font-size:var(--fs-mala);font-weight:600;
  transition:background-color var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease)}
.bktype:hover{border-color:var(--text)}
.bktype[aria-pressed="true"]{background:var(--red-600);border-color:var(--red-600);color:var(--on-red)}

.cal__head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-2)}
.cal__m{font-family:var(--font-display);font-weight:600;font-size:var(--fs-mala);letter-spacing:-.01em}
.cal__nav{display:flex;gap:var(--sp-2)}
.cal__nav button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--pearl-400);background:#fff;transition:border-color var(--hover-dur) var(--hover-ease)}
.cal__nav button:hover:not(:disabled){border-color:var(--text)}
.cal__nav button:disabled{opacity:.35;cursor:default}
.cal__nav svg{width:18px;height:18px}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal__wd{font-size:var(--fs-mala);font-weight:600;color:var(--muted);text-align:center;padding-bottom:var(--sp-1)}
/* Dny mají pevnou výšku 40 px, ne čtverec: na širokém okně byl den přes 100 px
   vysoký a okno se nevešlo na obrazovku. */
.cal__d{height:40px;border-radius:var(--r-sm);display:grid;place-items:center;position:relative;
  font-size:var(--fs-mala);font-weight:600;color:var(--text);border:1px solid transparent;background:var(--pearl-100);
  transition:background-color var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease)}
.cal__d:disabled{background:transparent;color:var(--muted);opacity:.55;cursor:default}
.cal__d.free:hover{background:var(--red-50);border-color:var(--red-600)}
.cal__d.free::after{content:"";position:absolute;bottom:3px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--red-600)}
/* Musí přebít i hover, ten má kvůli :not(:disabled) vyšší specificitu. */
.cal__d.is-on,.cal__d.is-on:hover{background:var(--red-600);border-color:transparent;color:var(--on-red)}
.cal__d.is-on::after{background:rgba(255,255,255,.75)}
/* Prázdné buňky před prvním dnem měsíce. Třída se nesmí jmenovat `empty`, tak se
   jmenuje i blok bez výsledků filtru a měsíc by se posunul o sloupec. */
.cal__d.cal__d--mimo{background:transparent;pointer-events:none}
.cal__note{font-size:var(--fs-mala);color:var(--muted);margin-top:var(--sp-2);display:flex;gap:var(--sp-4);flex-wrap:wrap}
.cal__note i{display:inline-flex;align-items:center;gap:var(--sp-2);font-style:normal}
.cal__note i::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--red-600)}
.cal__note i.busy::before{background:var(--muted)}
/* Státní svátek v kalendáři: den je zavřený, přeškrtnuté číslo napoví proč. */
.cal__d.cal__d--svatek{text-decoration:line-through;text-decoration-thickness:1px}
/* Kalendář, dokud se stahují volné termíny */
.cal__grid.is-loading{opacity:.45;pointer-events:none}

.bk__slots{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:var(--sp-4)}
.slot{min-height:38px;padding:0 6px;border-radius:var(--r-sm);border:1px solid var(--okraj-pole);background:#fff;
  font-size:var(--fs-mala);font-weight:600;
  transition:background-color var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease)}
.slot:hover:not(:disabled){border-color:var(--red-600);background:var(--red-50)}
.slot:disabled{opacity:.4;cursor:default;text-decoration:line-through}
.slot.is-on,.slot.is-on:hover:not(:disabled){background:var(--red-600);border-color:var(--red-600);color:var(--on-red)}
.bk__empty{padding:var(--sp-3);border-radius:var(--r-md);border:1px dashed var(--okraj-pole);font-size:var(--fs-mala);color:var(--muted);margin-bottom:var(--sp-4)}
.bk__sum{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);background:var(--red-50);
  border:1px solid rgba(var(--red-rgb),.24);margin-bottom:var(--sp-4);font-size:var(--fs-mala)}
.bk__sum b{display:block;font-family:var(--font-display);font-size:var(--fs-mala);font-weight:600;margin-top:3px}
.bk__delka{font-size:var(--fs-mala);color:var(--muted);margin:calc(var(--sp-2) * -1) 0 var(--sp-3)}
/* Pole formuláře v okně hustěji, ať se okno vejde na obrazovku bez posouvání. */
.bk .field{margin-bottom:var(--sp-3)}
.bk .field label{margin-bottom:4px}
/* Okno má stálou výšku, ať neposkakuje:
   kalendář má vždy místo na šest týdnů, volné časy pevnou plochu
   (16 časů ve 4 sloupcích, víc se posouvá uvnitř) a souhrn vybraného
   termínu drží místo, i když ještě není vybraný. */
.cal__grid{grid-template-rows:auto;grid-auto-rows:40px;min-height:292px;align-content:start}
#bkSlotsWrap{overflow-y:auto;margin-bottom:var(--sp-3)}
#bkSlotsWrap .bk__slots{margin-bottom:var(--sp-2)}
#bkSlotsWrap .bk__delka{margin:0}
#bkSlotsWrap .bk__empty{height:100%;margin:0;display:grid;place-items:center;text-align:center}
.bk__sum{min-height:52px;margin-bottom:var(--sp-3)}
.bk__sum b{display:inline;margin:0 0 0 var(--sp-1)}
.bk .slot{min-height:34px}
.bk .input{min-height:44px;padding-top:0;padding-bottom:0}
.bk__sum[hidden]{display:block!important;visibility:hidden}
.bk__done{display:none;text-align:center;padding:clamp(24px,4vw,44px) var(--sp-3)}
.bk.is-done .bk__grid,.bk.is-done .bk__head{display:none}
.bk.is-done .bk__done{display:block}
/* Potvrzení po odeslání stojí v okně pevné výšky svisle na středu. */
.bk.is-done .bk__done{margin-block:auto}
.bk__done .ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 auto var(--sp-5);
  background:var(--red-600);color:var(--on-red)}
.bk__done .ico svg{width:30px;height:30px}
.bk__done h2{font-size:var(--fs-stredni);margin-bottom:var(--sp-3)}
.bk__done p{color:var(--muted);max-width:46ch;margin:0 auto var(--sp-5)}
@media (max-width:820px){
  .bk__grid{grid-template-columns:minmax(0,1fr)}
  .bk__slots{grid-template-columns:repeat(2,1fr)}
}
/* Na nejužším displeji se tlačítka v dialogu smějí zalomit, jinak by přetekla ven. */
.bk .btn{white-space:normal;line-height:1.2;text-align:left}
@media (max-width:480px){
  .bk{padding:var(--sp-2)}
  .bk__in{padding:var(--sp-5) var(--sp-4)}
  .bk__head{padding-right:var(--sp-7)}
}
/* Kontaktní okno tak, aby se na běžný monitor vešlo bez posouvání a přitom
   nebylo drobné (Ted, 28. 10. 2026): širší okno, velký nadpis přes celou šířku
   bez podnadpisu, ve formuláři jméno, telefon, e-mail a vůz ve dvou sloupcích,
   tlačítko Domluvit prohlídku stejně velké jako Odeslat zprávu. Šířka je
   stejná jako u okna s termínem (960 px, .bk__box), výška kolem 640 px. Okno s termínem (také .bk) se nemění. */
.bk--kontakt .bk__in{padding:clamp(24px,3vw,48px) clamp(24px,3.4vw,56px)}
.bk--kontakt .bk__head{max-width:none}
.bk--kontakt .bk__head h2{font-size:var(--fs-velka);margin-bottom:0}
/* Kontakty vlevo užší, formulář vpravo širší (Ted, 28. 10. 2026). Užší už ne:
   „Kdy jsme k zastižení“ a „Po až Pá 9:00 až 18:00“ by se zalomily. */
.bk--kontakt .bk__grid{grid-template-columns:minmax(0,.74fr) minmax(0,1.26fr);gap:clamp(24px,3.4vw,56px);margin-top:var(--sp-6)}
.bk--kontakt .contact-card{padding:var(--sp-5)}
.bk--kontakt .cline{padding:var(--sp-5) 0}
.bk--kontakt .cline:first-of-type{padding-top:0}
.bk--kontakt .bk__pole{gap:0 var(--sp-5)}
.bk--kontakt .field{margin-bottom:var(--sp-4)}
.bk--kontakt .textarea{min-height:128px}
/* Obě okna s formulářem (kontakt i termín) jsou stejně velká: 960 px široká
   (.bk__box) a vysoká jako obrazovka bez okrajů, nejvýš 720 px (Ted,
   28. 10. 2026, náčrt na notebooku). Okno je sloupec, mřížka se natáhne
   a přidané místo dostane v kontaktu pole Zpráva, v termínu plocha volných
   časů. Levý a pravý blok jsou stejně vysoké a končí na stejném řádku. */
.bk__box{display:flex;flex-direction:column;min-height:min(720px,calc(100svh - 2 * clamp(10px,2vh,24px)))}
.bk__in{flex:1;display:flex;flex-direction:column}
.bk__in>form{flex:1;display:flex;flex-direction:column}
.bk__grid{flex:1;align-items:stretch}
.bk--kontakt .bk__grid>form{display:flex;flex-direction:column}
.bk--kontakt .bk__grid>div:first-child{display:flex;flex-direction:column}
.bk--kontakt .bk__grid .contact-card{flex:1;display:flex;flex-direction:column}
.bk--kontakt .bk__grid .contact-card>.cline{flex:1 1 auto;align-items:center}
.bk--kontakt .bk__grid .contact-card>.cline:last-of-type{padding-bottom:0}
#booking .bk__grid>div:last-child{display:flex;flex-direction:column}
#bkSlotsWrap{flex:1 1 148px;min-height:148px}
/* Na telefonu (okno v jednom sloupci) jsou volné časy vidět všechny, bez
   posouvání uvnitř plochy (Ted, 28. 10. 2026). Místo pro souhrn termínu se tam
   nedrží, dokud termín není vybraný: okno pod sebou neposkakuje do strany a
   prázdné místo by jen překáželo. */
@media (max-width:820px){
  #bkSlotsWrap{flex:none;height:auto;min-height:0;overflow:visible}
  #bkSlotsWrap .bk__empty{height:auto;min-height:96px}
  .bk__sum[hidden]{display:none!important}
}
.bk--kontakt .field--zprava{flex:1;display:flex;flex-direction:column}
.bk--kontakt .field--zprava .textarea{flex:1}
.bk--kontakt .btn-row .btn{width:100%;justify-content:space-between}
@media (max-width:820px){ .bk--kontakt .bk__grid{grid-template-columns:minmax(0,1fr)} }
/* Dvě pole vedle sebe v obou oknech (kontakt i termín). */
.bk .bk__pole{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--sp-4)}
@media (max-width:560px){ .bk .bk__pole{grid-template-columns:minmax(0,1fr)} }
/* Okna s formulářem se vejdou na obrazovku i na nízkém notebooku (Ted,
   28. 10. 2026: „vždy tak vysoké, aby se vešly na obrazovku“). Obě okna mají
   v plné velikosti kolem 640 px a vejdou se i na běžný notebook. Teprve pod
   700 px výšky okna prohlížeče se zmenší odsazení, kalendář, plocha volných
   časů a pole Zpráva (na notebooku byla zmenšená verze moc drobná). */
@media (min-width:821px) and (max-height:700px){
  .bk{padding-block:var(--sp-3)}
  .bk__in,.bk--kontakt .bk__in{padding-block:var(--sp-5)}
  .bk__grid,.bk--kontakt .bk__grid{margin-top:var(--sp-4)}
  .bk--kontakt .bk__head h2{font-size:var(--fs-stredni)}
  .cal__grid{grid-auto-rows:34px;min-height:256px}
  .cal__d{height:34px}
  #bkSlotsWrap{flex-basis:112px;min-height:112px}
  .bk__types{margin-bottom:var(--sp-3)}
  .bk--kontakt .cline{padding:var(--sp-4) 0}
  .bk--kontakt .textarea{min-height:96px}
}

/* ==================== ikonky telefonu, e-mailu a hodin ====================
   Na najetí jednorázová animace, nekonečná by na stránce rušila. Nic se
   neposouvá nahoru.
   telefon  sluchátko stojí, jen z horního rohu se dvakrát za sebou rozvlní
            zvukové vlny (oblouky z ikony phone-call knihovny Lucide),
   e-mail   obálka se zhoupne dozadu a klopa se přitlačí jako při zalepení,
            pak obálka odletí šikmo vzhůru, zmizí a zleva hladce přijede
            zpátky na místo. Bez zvětšování a bez otáčení klopy.
   Vlny, klopa a ručičky hodin jsou samostatné cesty v SVG ikon (.vlna, .klopa, .rucicka). Spouští je
   najetí na jakýkoli odkaz nebo tlačítko s takovou ikonou (i Napsat, které
   otevírá kontaktní okno) a na řádek kontaktu (.cline). */
.vlna{opacity:0}
svg:has(.vlna),svg:has(.klopa){overflow:visible}
svg .vlna,svg .klopa{transform-box:fill-box}
svg .vlna{transform-origin:0 100%}
svg .klopa{transform-origin:50% 0}
@keyframes voltiq-tel-vlna{
  0%{opacity:0;transform:translate(-2px,2px) scale(.5)}
  35%{opacity:1;transform:translate(0,0) scale(1)}
  70%{opacity:1}
  100%{opacity:0;transform:translate(2px,-2px) scale(1.15)}
}
@keyframes voltiq-mail-let{
  0%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.2,0,0,1)}
  20%{transform:translate(-2px,1px) rotate(7deg);opacity:1;animation-timing-function:cubic-bezier(.5,0,.9,.4)}
  46%{transform:translate(24px,-20px) rotate(-10deg);opacity:0}
  52%{transform:translateX(-16px);opacity:0;animation-timing-function:cubic-bezier(.2,0,0,1)}
  82%{transform:none;opacity:1}
  100%{transform:none;opacity:1}
}
@keyframes voltiq-mail-klopa{
  0%,34%,100%{transform:scaleY(1)}
  16%{transform:scaleY(1.3)}
}
:is(a,button):is(:hover,:focus-visible) .vlna,
.cline:is(:hover,:focus-within) .vlna{animation:voltiq-tel-vlna 1.2s ease-out 2}
:is(a,button):is(:hover,:focus-visible) .vlna-2,
.cline:is(:hover,:focus-within) .vlna-2{animation-delay:.3s}
:is(a,button):is(:hover,:focus-visible) svg:has(.klopa),
.cline:is(:hover,:focus-within) svg:has(.klopa){animation:voltiq-mail-let 1.6s}
:is(a,button):is(:hover,:focus-visible) .klopa,
.cline:is(:hover,:focus-within) .klopa{animation:voltiq-mail-klopa 1.6s ease-in-out}
/* hodiny    ručičky se jednou protočí a zastaví zpátky na svém místě: velká
            dvakrát dokola, malá jednou, obě kolem středu ciferníku. */
svg .rucicka{transform-box:view-box;transform-origin:12px 12px}
@keyframes voltiq-hodiny-min{to{transform:rotate(720deg)}}
@keyframes voltiq-hodiny-hod{to{transform:rotate(360deg)}}
:is(a,button):is(:hover,:focus-visible) .rucicka-min,
.cline:is(:hover,:focus-within) .rucicka-min{animation:voltiq-hodiny-min 1.4s cubic-bezier(.65,0,.35,1)}
:is(a,button):is(:hover,:focus-visible) .rucicka-hod,
.cline:is(:hover,:focus-within) .rucicka-hod{animation:voltiq-hodiny-hod 1.4s cubic-bezier(.65,0,.35,1)}
.cline.tel:hover .ci,.cline.mail:hover .ci,.cline:has(.rucicka):hover .ci{background:var(--red-50);border-color:rgba(var(--red-rgb),.34)}
@media (prefers-reduced-motion:reduce){
  svg:has(.vlna) *,svg:has(.klopa),svg:has(.klopa) *,svg .rucicka{animation:none!important}
}

/* ==================== otevírací doba ve sloupci ====================
   Značky skládá server, tady se z nich dělá tabulka: dny vlevo, časy vpravo.
   Sloupce drží mřížka na celém `.hodiny`, ne na jednotlivých řádcích, proto je `.hodiny__r`
   jen `display:contents`. Řádek zůstává vlastním prvkem kvůli čtečkám.
   Písmo, barvu ani velikost si sloupec nenastavuje, dědí je z místa, kam se vloží. */
.hodiny{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px var(--sp-3);align-items:baseline;margin-top:2px}
.hodiny__r{display:contents}
.hodiny .hodiny__d{font-weight:600;white-space:nowrap}
/* Číslice stejné šířky, ať 8:00 a 13:00 stojí pod sebou. */
.hodiny__c{font-variant-numeric:tabular-nums;min-width:0}
/* Doba pod telefonním číslem v kontaktní kartě: vlastní odstup a linka ji oddělí od čísla. */
.cline .vl small.cline__hodiny{margin-top:9px;padding-top:9px;border-top:1px solid rgba(var(--film),.12)}
/* Popisek Otevírací doba v patičce. Doba je blok, takže před ní nesmí být <br>. */
.foot-hodiny,.foot-hodiny__lb{display:block}
/* V patičce každý úsek času na vlastním řádku (8:00 až 12:00, / 13:00 až 17:00). */
.foot .hodiny__u{display:block}
/* Poznámka k otevírací době (svátky). Prázdná se nevypíše vůbec. */
.hodiny-pozn{display:block;font-size:var(--fs-mala);line-height:1.5;color:var(--muted);margin-top:var(--sp-2);max-width:48ch}
.cline .vl .hodiny__c{font-weight:500}
.cline .vl small.hodiny-pozn{font-size:var(--fs-mala);color:var(--text);margin-top:var(--sp-2)}

/* Odkaz na mapu u adresy prodejny */
.odkaz-mapa{color:var(--red-700);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.odkaz-mapa:hover{text-decoration-thickness:2px}
.footer a[href^="http"]{text-decoration:underline;text-underline-offset:3px}

/* ==================== záhlaví stránky a drobečky ==================== */
.crumb{display:flex;gap:9px;align-items:center;font-size:var(--fs-mala);color:var(--muted);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.crumb a{color:var(--muted);text-decoration:underline;text-decoration-color:var(--pearl-400);text-underline-offset:3px;
  transition:color var(--hover-dur) var(--hover-ease)}
.crumb a:hover{color:var(--red-700);text-decoration-color:currentColor}
.pagebanner{position:relative;overflow:hidden;border-radius:var(--r-xl);border:1px solid var(--line);
  background:linear-gradient(180deg,var(--pearl-200) 0%,#fff 100%);padding:clamp(28px,4.4vw,56px)}
.pagebanner h1{font-size:var(--fs-velka);margin:0 0 var(--sp-3)}
.pagebanner .lead{font-size:var(--fs-stredni);line-height:1.6;color:var(--text);max-width:56ch}
.pb-pills{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-5)}
/* Textový blok s odkrýváním slov */
.wordblock{max-width:900px;margin:0 auto;text-align:center}
.wordreveal{font-family:var(--font-display);font-weight:500;font-size:var(--fs-stredni);
  line-height:1.45;letter-spacing:-.02em;color:var(--text);margin-top:var(--sp-5)}
.wordreveal .w{display:inline-block;opacity:.13;filter:blur(4px);transform:translateY(.16em);
  transition:opacity .8s var(--ease-expo),filter .8s var(--ease-expo),transform .8s var(--ease-expo)}
.wordreveal.in .w{opacity:1;filter:blur(0);transform:none}
/* Odsazení pod hlavičkou. Hlavička leží v toku stránky, proto stačí malá mezera.
   Úvod třídu nemá, hero má vlastní
   odsazení. Stránky, které se samy středí na celé okno, si mezeru nepřidávají. */
.pod-hlavickou{padding-top:var(--sp-5)}
.pod-hlavickou:has(> .stav){padding-top:0}

/* ==================== výpis vozů ====================
   Filtry stojí u levé hrany. Sloupec je dlouhý (kolem 1100 px), proto je přilepený
   jen na oknech, do kterých se vejde celý. Na nižším okně se posouvá s obsahem:
   přilepený panel s vlastním posouváním by měl spodní filtry skryté za hranou
   a vypadal by dole uříznutě. */
.listing{display:grid;grid-template-columns:272px minmax(0,1fr);gap:clamp(20px,2.6vw,34px);align-items:start}
.listing__main{min-width:0}
/* Pod záhlavím stránky je mezera menší než mezi sekcemi (stejně jako na Kontaktu). */
#vypis{padding-top:var(--sp-pod-zahlavim)}
.side{align-self:start;padding:var(--sp-5);border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line)}
@media (min-width:1041px) and (min-height:1200px){
  /* Pojistka: kdyby administrace přidala tolik hladin, že se sloupec do okna
     nevejde, posouvá se uvnitř a posuvník je vidět. */
  .side{position:sticky;top:calc(var(--nav-v) + var(--sp-4));
    max-height:calc(100vh + (var(--nav-v) + var(--sp-4) + var(--sp-5)) * -1);overflow:auto;overscroll-behavior:contain;
    scrollbar-width:thin;scrollbar-color:var(--pearl-400) transparent}
}
.side__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.side__head h2{font-size:var(--fs-stredni)}
.side .fgroup{display:block;padding-bottom:var(--sp-4);margin-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.side .fgroup:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.side .fgroup>.lbl{display:block;margin:0 0 var(--sp-3)}
.side .fchips{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.side .chip{min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-mala)}
/* Výpis je v užším sloupci, karty se skládají podle místa, ne na pevné tři. */
.listing__main .grid.g3{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
/* Karta ve výpisu je užší než na úvodu, protože vlevo stojí filtr. Údaj s jednotkou je
   jeden celek a nelámá se, proto se místo zkracování zmenší písmo a řádkování. */
.listing .veh-specs{gap:6px var(--sp-2)}
.listing .veh-spec{font-size:var(--fs-mala);gap:6px}
.listing .veh-spec svg{width:14px;height:14px}
.filtoggle{display:none}
.filtry__vysledky{display:none}
.filtoggle .c{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:var(--r-pill);background:var(--red-600);color:var(--on-red);font-size:var(--fs-mala);font-weight:700}
.filtoggle .c[hidden]{display:none}
@media (max-width:1040px){
  /* Filtry se schovají pod tlačítko a otevřou se nad výpisem. Schovat je smí jen
     stránka, na které běží skript: tlačítko otevírá panel JavaScriptem. Bez něj
     zůstane panel rozbalený a tlačítko se nekreslí. */
  .listing{grid-template-columns:minmax(0,1fr)}
  .js .side{display:none}
  .side.is-open{display:block}
  .js .filtoggle{display:inline-flex;justify-self:start}
  /* Tlačítko na vozy drží spodní okraj otevřeného panelu, ať se k výsledkům
     nemusí scrollovat přes všechny filtry. */
  .js .filtry__vysledky{display:flex;position:sticky;bottom:var(--sp-4);z-index:2;margin-top:var(--sp-5);
    box-shadow:var(--sh-md)}
}
.fgroup{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.fgroup>.lbl{font-size:var(--fs-mala);font-weight:600;color:var(--muted);margin-right:2px}
.fgroup .select{width:100%;margin-top:2px}
.fgroup label.lbl{display:block;margin-bottom:var(--sp-2)}
/* Chipsy filtru jsou odkazy, filtruje server a volba je adresa. Zapnutou volbu značí
   aria-current, u chipsů, které jsou tlačítka, aria-pressed. Stejné ztmavení jako
   přepínač Stav na úvodu. */
.chip{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--sp-4);border-radius:var(--r-pill);
  border:1px solid var(--okraj-pole);background:#fff;font-size:var(--fs-mala);font-weight:600;color:var(--text);
  transition:background-color var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease)}
.chip:hover{background:var(--pearl-100);border-color:var(--text)}
.chip[aria-pressed="true"],
.chip[aria-current="true"]{background:var(--text);border-color:var(--text);color:#fff}
.sortwrap{display:flex;align-items:center;gap:var(--sp-3)}
.sortwrap .select{width:auto;min-width:200px}
/* Popisek Řadit stejně jako popisky filtrů vlevo (.fgroup>.lbl): písmo webu,
   tučnější, bez verzálek. Dřív měl vlastní styl přímo v šabloně: verzálky
   s velkým prostrkáním a slabou váhou, a vypadal jako jiné písmo (Ted, 28. 10. 2026). */
.sortwrap .lbl{font-size:var(--fs-mala);font-weight:600;color:var(--muted);white-space:nowrap}
.countbar{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;padding:0 var(--sp-1) var(--sp-5)}
.countbar .c{font-size:var(--fs-mala);color:var(--muted)}
.countbar .c b{color:var(--text);font-weight:600}
.countbar .reset,.side__head .reset{font-size:var(--fs-mala);font-weight:600;color:var(--red-700);
  text-decoration:underline;text-underline-offset:var(--sp-1)}
.countbar .reset:hover,.side__head .reset:hover{color:var(--text)}
/* Formulář nese jen skrytá pole, oba rozbalovací seznamy na něj ukazují atributem form. */
.listing>.ffiltr{display:none}
/* Tlačítko, kterým se filtr odešle bez JavaScriptu. Se skriptem se formulář odešle sám. */
.js .jen-bez-js{display:none}
/* Prázdný výpis vypisuje server, takže slovo vysvětlení vidí i ten, komu skript neběží. */
.empty{display:block;text-align:center;padding:clamp(44px,6vw,80px) var(--sp-5);border-radius:var(--r-lg);
  border:1px dashed var(--pearl-400);background:var(--surface)}
.empty .ico{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto var(--sp-5);
  background:var(--red-50);border:1px solid rgba(var(--red-rgb),.2)}
.empty .ico svg{width:24px;height:24px;color:var(--red-700)}
.empty h3{font-size:var(--fs-stredni);margin-bottom:var(--sp-3)}
.empty p{color:var(--muted);max-width:44ch;margin:0 auto var(--sp-5)}
@media (max-width:1080px){ .sortwrap{width:100%} .sortwrap .select{flex:1} }

/* ==================== detail vozu ====================
   Pravidlo: na nic se nesmí muset ptát telefonem. */
.dt-head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:var(--sp-5)}
.dt-brand{font-size:var(--fs-mala);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.dt-head h1{font-size:var(--fs-velka);margin-bottom:14px}
/* Značka je uvnitř H1, aby ji vyhledávač i čtečka četly jako součást názvu; vypadá to dál jako dva řádky. */
.dt-nazev .dt-brand{display:block;font-family:var(--font-text);font-weight:600}
.dt-tags{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.dt-meta{display:flex;gap:10px;flex-wrap:wrap}
/* Na desktopu drží panel pravý sloupec přes obě řádky a je přilepený. Na mobilu se mřížka
   zhroutí do jednoho sloupce v pořadí galerie, panel s cenou, zbytek obsahu. */
.dt-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);grid-template-rows:auto auto;
  gap:clamp(24px,3vw,40px);align-items:start}
.dt-gal{grid-column:1;grid-row:1;min-width:0}
.dt-rest{grid-column:1;grid-row:2;min-width:0}
.dt-side{grid-column:2;grid-row:1 / span 2;align-self:start}
/* Panel s cenou je na desktopu vždy přilepený. Celý je vysoký 650 až 750 px,
   proto se na nižším okně zhustí: zmizí věta pod cenou a blok prodejny
   (telefon je v tlačítku Zavolat) a mezery se zmenší, panel pak má kolem
   500 px a vejde se celý. Až na velmi nízkém okně se posouvá s obsahem. */
.dt-side{position:sticky;top:calc(var(--nav-v) + var(--sp-4))}
@media (min-width:1081px) and (max-height:859px){
  .dt-side .buy__poznamka,.dt-side .buy__seller{display:none}
  .dt-side .buy__avail{margin-bottom:var(--sp-3)}
  .dt-side .buy__akce{margin-top:var(--sp-4);gap:var(--sp-2)}
}
@media (max-height:599px){
  .dt-side{position:static}
}
.dt-grid:last-child{margin-bottom:var(--sp-section)}
@media (max-width:1080px){
  .dt-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .dt-gal,.dt-rest,.dt-side{grid-column:auto;grid-row:auto}
  .dt-side{position:static}
}

/* Galerie. Fotky bez filtru a bez překryvu. */
.gal{display:grid;gap:10px}
.gal__main{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/2;background:var(--pearl-200);cursor:zoom-in;
  -webkit-user-select:none;user-select:none;touch-action:pan-y}
.gal__main img{width:100%;height:100%;object-fit:cover}
.gal__zoom{position:absolute;right:var(--sp-3);bottom:var(--sp-3);display:inline-flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);background:#fff;color:var(--text);border:1px solid var(--line);
  font-size:var(--fs-mala);font-weight:600;cursor:pointer;
  transition:border-color var(--hover-dur) var(--hover-ease)}
.gal__zoom:hover{border-color:var(--pearl-400)}
.gal__zoom svg{width:16px;height:16px}
/* Šipky a počítadlo na hlavní fotce. Klik na levou nebo pravou část fotky
   listovalo i mimo šipky (dřívější detail.js, zrušený 2. 11. 2026). */
.gal__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--text);border:1px solid var(--line);
  cursor:pointer;transition:border-color var(--hover-dur) var(--hover-ease),background-color var(--hover-dur) var(--hover-ease)}
.gal__nav:hover{background:#fff;border-color:var(--pearl-400)}
.gal__nav svg{width:20px;height:20px}
.gal__prev{left:var(--sp-3)}
.gal__next{right:var(--sp-3)}
.gal__pocet{position:absolute;left:var(--sp-3);bottom:var(--sp-3);padding:var(--sp-1) var(--sp-3);border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);color:var(--text);font-size:var(--fs-mala);font-weight:600;pointer-events:none}
/* Všechny náhledy v jednom řádku, vidět jsou čtyři, další se odrolují. */
.gal__thumbs{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:4px}
.gal__t{position:relative;flex:0 0 calc((100% - 30px) / 4);border-radius:var(--r-md);overflow:hidden;aspect-ratio:3/2;cursor:pointer;
  scroll-snap-align:start;border:2px solid transparent;transition:border-color var(--hover-dur) var(--hover-ease)}
.gal__t img{width:100%;height:100%;object-fit:cover}
.gal__t:hover{border-color:var(--pearl-400)}
.gal__t.is-on{border-color:var(--red-600)}
/* Prohlížeč fotek přes celou obrazovku zůstává tmavý. */
.lb{position:fixed;inset:0;z-index:90;background:var(--scrim-media);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:none;align-items:center;justify-content:center;padding:clamp(16px,4vw,56px)}
.lb.is-open{display:flex}
.lb img{max-width:100%;max-height:100%;border-radius:var(--r-lg);object-fit:contain}
.lb__x,.lb__nav{position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);
  transition:background-color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease)}
.lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.55)}
.lb__x{top:20px;right:20px}
.lb__nav svg,.lb__x svg{width:20px;height:20px}
.lb__prev{left:20px;top:50%;transform:translateY(-50%)}
.lb__next{right:20px;top:50%;transform:translateY(-50%)}
.lb__count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);font-size:var(--fs-mala);color:#D5DEE6;font-family:var(--font-mono)}
.lb:focus-visible,.lb :focus-visible{outline-color:#fff}

/* Prodejní panel */
.buy{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--sh-sm)}
.buy__in{padding:clamp(22px,2.4vw,30px);position:relative}
.buy__avail{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-mala);font-weight:600;color:var(--red-700);margin-bottom:var(--sp-4)}
.buy__avail .dot{width:8px;height:8px;border-radius:50%;background:var(--red-600);box-shadow:0 0 0 4px rgba(var(--red-rgb),.15)}
.buy__avail.is-sold{color:var(--muted)}
.buy__avail.is-sold .dot{background:var(--muted);box-shadow:0 0 0 4px rgba(91,100,112,.16)}
/* Vůz, který není skladem. Jantarová tečka říká: k dispozici, ale ještě ne na prodejně. */
.buy__avail.is-mimo{color:var(--text)}
.buy__avail.is-mimo .dot{background:#C98A06;box-shadow:0 0 0 4px rgba(201,138,6,.16)}
.buy__lbl{font-size:var(--fs-mala);color:var(--muted);margin-bottom:var(--sp-1)}
.buy__price{font-family:var(--font-display);font-size:var(--fs-stredni);font-weight:600;letter-spacing:-.02em;line-height:1;
  word-spacing:.1em}
.buy__price.is-sold{color:var(--muted)}
/* Původní cena patří na vlastní řádek a je menší: vedle ceny ve stejné velikosti
   splynou v jedno nesmyslně dlouhé číslo. */
.buy__price .was{display:block;word-spacing:normal;font-family:var(--font-text);font-size:var(--fs-mala);font-weight:500;letter-spacing:0;line-height:1.2;
  color:var(--muted);text-decoration:line-through;margin-bottom:6px}
.buy__usetrite{display:inline-block;margin-top:var(--sp-2);padding:3px 10px;border-radius:var(--r-xs);font-size:var(--fs-mala);font-weight:600;
  color:var(--red-700);background:var(--red-50);border:1px solid rgba(var(--red-rgb),.22)}
.buy__sub{font-size:var(--fs-mala);color:var(--muted);margin-top:var(--sp-2)}
.buy .btn{width:100%;justify-content:space-between}
.buy__akce,.buy__acts{display:flex;flex-direction:column;gap:var(--sp-3);margin-top:var(--sp-5)}
.buy__poznamka{margin-top:var(--sp-4);font-size:var(--fs-mala);line-height:1.5;color:var(--muted)}
.buy__prodano{margin-top:var(--sp-5);padding:var(--sp-4);border-radius:var(--r-md);background:var(--pearl-100);
  font-size:var(--fs-mala);line-height:1.5;color:var(--text)}
.buy__facts{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--sp-3)}
.buy__fact{display:flex;gap:11px;align-items:flex-start;font-size:var(--fs-mala);color:var(--text)}
.buy__fact svg{width:18px;height:18px;color:var(--red-700);flex:none;margin-top:2px}
.buy__seller{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--line)}
.buy__seller>.who{min-width:0;flex:1}
.buy__seller .btn{flex:1 0 100%;justify-content:space-between}
.buy__seller .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:700;
  font-size:var(--fs-mala);background:var(--red-600);color:var(--on-red);flex:none}
.buy__seller img.av{background:none;object-fit:contain}
.buy__seller .nm{font-weight:600;font-size:var(--fs-mala)}
.buy__seller .rl{font-size:var(--fs-mala);color:var(--muted)}

/* Bloky v hlavním sloupci */
.blk{margin-top:clamp(44px,5vw,68px)}
/* Základní údaje vozu pod galerií: dlaždice s ikonou, popiskem a hodnotou. */
.udaje{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
/* Údaje pod galerií bez rámečků (Ted, 29. 10. 2026): ikona, popisek a hodnota
   volně v mřížce, jen s odstupem. */
.udaj{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;
  padding:var(--sp-4) var(--sp-2)}
.udaj svg{width:28px;height:28px;color:var(--red-600);margin-bottom:4px}
.udaj__k{font-size:var(--fs-mala);color:var(--muted);line-height:1.3}
.udaj__v{font-family:var(--font-display);font-weight:600;font-size:var(--fs-stredni);line-height:1.2;color:var(--text);
  overflow-wrap:anywhere;text-wrap:balance;word-spacing:.1em}
.udaj--vin .udaj__v{font-size:var(--fs-mala);letter-spacing:.04em}
@media (max-width:640px){ .udaje{grid-template-columns:repeat(2,minmax(0,1fr))} }
.blk__h{display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.blk__h h2{font-size:var(--fs-velka)}
/* Linka za nadpisem bloku na detailu vozu se od 29. 10. 2026 nekreslí (Ted). */
.blk__h .rule{display:none}
/* Historie a servis na detailu: dvě karty vedle sebe, na úzkém displeji pod sebou. */
.hist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.hist__k{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.4vw,30px);
  background:var(--grad-pearl);border-radius:var(--r-lg)}
.hist__ic{display:grid;place-items:center;width:48px;height:48px;margin-bottom:var(--sp-4);
  border-radius:var(--r-sm);background:#fff;color:var(--red-700)}
.hist__ic svg{width:26px;height:26px}
.hist__k h3{font-size:var(--fs-stredni);margin-bottom:var(--sp-2);text-wrap:balance}
.hist__k p{color:var(--text);font-size:var(--fs-mala);line-height:1.6;margin-bottom:var(--sp-5)}
.hist__k .btn{margin-top:auto;background:#fff}
@media (max-width:640px){ .hist{grid-template-columns:minmax(0,1fr)} }
.perex{font-family:var(--font-display);font-weight:500;font-size:var(--fs-stredni);line-height:1.45;
  letter-spacing:-.01em;color:var(--text);max-width:60ch}
/* Bloky na detailu vozu (specifikace, záruky, údaje variant) bez rámečku kolem,
   řádky dělí jen linky (Ted, 29. 10. 2026). */
.spectable{background:#fff}
.spectable>.spec-group:last-child,.spectable>.spec-row:last-child{border-bottom:1px solid var(--line)}
.spec-group{border-bottom:1px solid var(--line)}
.spec-group:last-child{border-bottom:0}
.spec-group>.gh{padding:var(--sp-3) var(--sp-5);font-size:var(--fs-mala);font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--red-700);background:var(--red-50)}
.spec-row{display:grid;grid-template-columns:minmax(180px,1fr) 1.25fr;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);
  border-top:1px solid var(--line);align-items:baseline}
.spec-row dt{color:var(--muted);font-size:var(--fs-mala)}
.spec-row dd{font-weight:600;font-size:var(--fs-mala)}
.spec-row dd small{display:block;font-weight:400;font-size:var(--fs-mala);color:var(--muted);margin-top:3px}
.eq{display:grid;gap:var(--sp-5)}
.eq__g h3{font-family:var(--font-text);font-size:var(--fs-mala);font-weight:700;color:var(--muted);margin-bottom:var(--sp-3)}
.eq__list{display:flex;gap:var(--sp-2);flex-wrap:wrap}
/* Dlouhá položka výbavy se na telefonu zalomí na dva řádky a pilulka by byla
   kulatý ovál. Tam má rádius 12 px. */
@media (max-width:560px){ .eq__list span{border-radius:var(--r-md)} }
.eq__list span{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--line);font-size:var(--fs-mala);color:var(--text)}
.eq__list span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--red-600);flex:none}

/* ==================== DETAIL VOZU, 29. 10. 2026 (výbava, příplatky, záruky, varianty) ==================== */
/* ===== VLOŽIT do web/assets/css/web.css: za pravidla .eq__list span::before
   (blok „Bloky v hlavním sloupci“ detailu, před .askform). 29. 10. 2026. ===== */

/* Dlaždice údajů pod galerií jsou pryč, první blok pod galerií proto nemá
   horní odsazení (mezeru drží mřížka .dt-grid), jako dřív dlaždice. */
.dt-rest>.blk:first-child{margin-top:0}

/* Standardní výbava: skupiny ve sloupcích s nadpisem, položky jako seznam
   s fajfkou. Sloupců je tolik, kolik se vejde (nejméně 240 px), na mobilu
   jeden. Fajfka je z rámečku, ne obrázek, barvu bere z --red-600. */
.vyb{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-5) var(--sp-6)}
.vyb__g{min-width:0}
.vyb__h{font-family:var(--font-text);font-size:var(--fs-mala);font-weight:700;letter-spacing:0;color:var(--text);
  padding-bottom:var(--sp-2);margin-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.vyb__seznam{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-2)}
.vyb__seznam li{position:relative;padding-left:26px;font-size:var(--fs-mala);line-height:1.5;color:var(--text)}
.vyb__seznam li::before{content:"";position:absolute;left:5px;top:.28em;width:6px;height:11px;
  border:solid var(--red-600);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (max-width:560px){ .vyb{grid-template-columns:minmax(0,1fr)} }

/* Příplatková výbava: řádek s názvem, poznámkou a obsahem vlevo, cenou vpravo.
   Na úzkém displeji je cena pod názvem. */
/* Příplatková výbava bez rámečku kolem (Ted, 29. 10. 2026), položky dělí jen linky. */
.pv{list-style:none;margin:0;padding:0}
.pv__r{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3) var(--sp-5);align-items:start;
  padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line)}
.pv__r:first-child{border-top:0}
.pv__n{font-family:var(--font-text);font-size:var(--fs-mala);font-weight:700;letter-spacing:0;line-height:1.4}
.pv__pozn{font-size:var(--fs-mala);color:var(--muted);margin-top:var(--sp-1)}
.pv__obsah{margin-top:var(--sp-3)}
.pv__c,.var__cena{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:2px}
.pv__cena{font-size:var(--fs-mala);font-weight:700;color:var(--text);white-space:nowrap}
.pv__cena--dotaz{font-weight:600;color:var(--red-700)}
.pv__bez{font-size:var(--fs-mala);color:var(--muted);white-space:nowrap}
@media (max-width:640px){
  .pv__r{grid-template-columns:minmax(0,1fr)}
  .pv__c,.var__cena{align-items:flex-start;text-align:left}
}

/* Záruky a údaje varianty: tabulka .spectable bez skupin, první řádek
   tedy nemá horní linku (jinak by se zdvojila s okrajem tabulky). */
.zar .spec-row:first-child{border-top:0}

/* Možné varianty vozu: tlačítka s aria-pressed (dřívější detail.js) a panel varianty.
   Bez skriptu jsou tlačítka schovaná atributem hidden a panely pod sebou. */
.var__perex{font-size:var(--fs-mala);color:var(--muted);margin:0 0 var(--sp-4);max-width:60ch}
.var__volby{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.var__volby[hidden],.var[hidden]{display:none}
.var__volba{display:inline-flex;align-items:center;min-height:var(--sp-7);padding:0 var(--sp-5);border-radius:var(--r-pill);
  background:#fff;border:1px solid var(--pearl-400);color:var(--text);font-size:var(--fs-mala);font-weight:600;cursor:pointer;
  transition:border-color var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease),background-color var(--hover-dur) var(--hover-ease)}
.var__volba:hover{border-color:var(--red-600);color:var(--red-700)}
.var__volba[aria-pressed="true"]{background:var(--red-600);border-color:var(--red-600);color:var(--on-red)}
.var + .var{margin-top:var(--sp-6)}
.var__hlava{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-3) var(--sp-5);align-items:start;margin-bottom:var(--sp-4)}
.var__nazev{font-size:var(--fs-stredni)}
.var__tento{font-size:var(--fs-mala);color:var(--red-700);font-weight:600;margin-top:var(--sp-1)}
.var__mezi{font-family:var(--font-text);font-size:var(--fs-mala);font-weight:700;letter-spacing:0;margin:var(--sp-5) 0 var(--sp-3)}
@media (max-width:640px){ .var__hlava{grid-template-columns:minmax(0,1fr)} }

/* Nepoužívané po 29. 10. 2026 (zrušené dlaždice údajů a pilulky výbavy),
   dají se smazat: .udaje, .udaj, .udaj svg, .udaj__k, .udaj__v, .udaj--vin,
   @media (max-width:640px){ .udaje{…} }, .eq, .eq__g h3, .eq__list,
   .eq__list span, .eq__list span::before, @media (max-width:560px){ .eq__list span{…} }.
   Pravidla .acc a .acc-h (časté dotazy, blok „Časté dotazy“) po změně nepoužívá
   žádná šablona webu, obsluha ve web.js (.acc-h) bez nich nic nedělá. Smazat je
   jde taky, ale nemusí. */

.askform{background:var(--surface);border-radius:var(--r-lg);padding:var(--sp-5);margin-top:var(--sp-5);
  display:grid;grid-template-columns:1fr auto;gap:var(--sp-4);align-items:end}
/* Mezery mezi poli jako v kontaktním formuláři: platí základní .field
   (16 px pod polem) a .formerr (16 px pod hláškou), souhlas vlastní mezeru
   nepotřebuje. Dřív tu bylo .field{margin:0} a popisky E-mail a Telefon
   se lepily na pole Jméno nad nimi (Ted, 28. 10. 2026). */
@media (max-width:820px){
  .gal__thumbs{gap:var(--sp-2)}
  .spec-row{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
  .askform{grid-template-columns:minmax(0,1fr)}
  .lb__prev{left:var(--sp-2)} .lb__next{right:var(--sp-2)}
}

/* Malý pomocný text v dialozích a formulářích */
.small-t{font-size:var(--fs-mala);font-weight:400;color:var(--muted)}

/* Časté dotazy */
.acc{border-top:1px solid var(--line)}
.acc:last-of-type{border-bottom:1px solid var(--line)}
.acc-h{width:100%;font-family:var(--font-display);font-weight:600;font-size:var(--fs-stredni);
  letter-spacing:-.01em;text-align:left;padding:22px 56px 22px 0;position:relative;
  transition:color var(--hover-dur) var(--hover-ease)}
.acc-h:hover{color:var(--red-700)}
.acc-h .pm{position:absolute;right:0;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;
  border:1px solid var(--pearl-400);display:grid;place-items:center;
  transition:background-color var(--hover-dur) var(--hover-ease),border-color var(--hover-dur) var(--hover-ease)}
.acc-h .pm svg{width:16px;height:16px;transition:transform var(--hover-dur) var(--hover-ease)}
.acc.is-open .acc-h .pm{background:var(--red-600);border-color:var(--red-600);color:var(--on-red)}
.acc.is-open .acc-h .pm svg{transform:rotate(45deg)}
.acc-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease-expo)}
.acc.is-open .acc-b{grid-template-rows:1fr}
.acc-b>div{overflow:hidden}
.acc-b p{padding-bottom:var(--sp-5);color:var(--muted);max-width:78ch;font-size:var(--fs-mala)}

/* ==================== cookie lišta, údržba, chybové stránky ====================
   Cookie lišta, pruh údržby, chybová stránka a stránka údržby. */

/* Cookie lišta. Odmítnutí je stejně velké tlačítko jako souhlas, menší nebo šedivé
   odmítnutí je trik na návštěvníka. */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:90;background:rgba(255,255,255,.97);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line);box-shadow:0 -12px 32px -16px rgba(4,7,10,.25)}
.cookiebar__in{max-width:1240px;margin:0 auto;padding:var(--sp-4) var(--wrap-pad);
  display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap}
.cookiebar p{flex:1;min-width:260px;margin:0;font-size:var(--fs-mala);color:var(--text)}
.cookiebar p a{color:var(--red-700);text-decoration:underline;text-underline-offset:3px;font-weight:600}
.cookiebar__btns{display:flex;gap:var(--sp-3);flex:none}
.cookiebar__volby{flex-basis:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.cookiebar__volba{pointer-events:auto;cursor:pointer;padding:var(--sp-4);background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
.cookiebar__volba>span{line-height:1.5}
.cookiebar__volba b{display:block;font-weight:600}
.cookiebar__volba input:disabled{cursor:default;opacity:.6}
@media (max-width:959px){
  .cookiebar{bottom:calc(var(--mobcta-v) + env(safe-area-inset-bottom))}
}
@media (max-width:959px){
  .cookiebar__volby{grid-template-columns:1fr;gap:var(--sp-2)}
  .cookiebar__volba{padding:var(--sp-3)}
}
@media (max-width:640px){
  .cookiebar__btns{width:100%;flex-wrap:wrap}
  .cookiebar__btns .btn{flex:1;justify-content:center;padding:0 var(--sp-3);white-space:normal;line-height:1.2;text-align:center}
}

/* Pruh, který vidí jen přihlášený správce, když běží údržba. Stojí na začátku stránky
   a odroluje se, protože hlavička je přilepená k hornímu okraji a dva přilepené pruhy
   by se překrývaly. */
.udrzba-pruh{position:relative;z-index:95;padding:9px var(--sp-4);text-align:center;
  background:#FFC24D;color:#04070A;font-size:var(--fs-mala);font-weight:600}
.udrzba-pruh a{color:#04070A;text-decoration:underline;margin-left:var(--sp-2)}
/* Pruh, který vidí jen přihlášený, když na webu čekají rozpracované změny. Bez něj
   vypadá náhled rozdělané práce úplně stejně jako web. Plná červená s bílým textem. */
.nahled-pruh{position:relative;z-index:95;padding:9px var(--sp-4);text-align:center;
  background:var(--red-600);color:var(--on-red);font-size:var(--fs-mala);font-weight:600}
.nahled-pruh a{color:var(--on-red);text-decoration:underline;margin-left:var(--sp-2)}

/* Chybová stránka a údržba. Blok se vystředí do plochy, kterou je opravdu vidět:
   údržba stojí sama, takže je to celé okno; chybová stránka má nad sebou hlavičku,
   proto si ubere její výšku. */
.stav{min-height:100svh;display:grid;place-items:center;padding:var(--sp-7) var(--sp-5);text-align:center;background:var(--bg)}
.stav--vnitrni{min-height:calc(100svh + var(--nav-v) * -1)}
/* Vnitřek bloku drží jednu šířku a jednu osu. */
.stav__in{width:100%;max-width:520px;margin-inline:auto;text-align:center}
/* Lámání řádků. U vystředěného textu je vidět každý osamocený konec věty na vlastním
   řádku. Nadpis se vyvažuje (balance), odstavce dostanou pretty. Telefon a e-mail
   se nelámou uprostřed. */
.stav h1{text-wrap:balance;font-size:var(--fs-velka);margin-bottom:var(--sp-3)}
.stav p,.stav__kontakt{text-wrap:pretty}
.stav__kontakt a{white-space:nowrap}
.stav__kontakt{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:var(--sp-6);padding-top:var(--sp-5);
  border-top:1px solid var(--line);font-size:var(--fs-mala);color:var(--muted)}
.stav__kontakt a{color:var(--red-700);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.stav__spojeni{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);flex-wrap:wrap}
.stav__spojeni i{font-style:normal;color:var(--muted)}
/* Cookie lišta překrývá spodek okna. Dokud tam je, ubere se stránce zespodu tolik,
   kolik zabírá, jinak by blok seděl opticky níž, než kam se člověk dívá. */
body:has(#cookiebar:not([hidden])) .stav--vnitrni{padding-bottom:120px}
@media (max-width:760px){
  body:has(#cookiebar:not([hidden])) .stav--vnitrni{padding-bottom:220px}
}
/* Logo je obrázek a ten je v celém webu display:block, text-align:center se ho
   netýká, vystředí se vlastním okrajem. */
.stav__logo{height:36px;width:auto;margin:0 auto var(--sp-6)}
.stav__kod{font-family:var(--font-display);font-size:var(--fs-velka);font-weight:600;
  line-height:1;letter-spacing:-.03em;color:var(--red-600);margin-bottom:var(--sp-4)}
.stav p{color:var(--muted);margin-bottom:var(--sp-6)}
.stav__akce{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.stav__hledat{display:flex;gap:var(--sp-2);margin-bottom:var(--sp-5)}
.stav__hledat .input{flex:1}

/* ==================== textová stránka ====================
   Zásady cookies, ochrana údajů, obchodní podmínky. Obsah píše klient v administraci
   jako běžný text, takže se nedá spolehnout na třídy na nadpisech a odstavcích,
   stylují se přímo značky uvnitř. Mezera nad nadpisem je větší než pod ním,
   jinak nadpis opticky patří k tomu, co je nad ním. */
.pagetext{max-width:74ch;margin-top:var(--sp-2);padding-bottom:var(--sp-section)}
.pagetext>*:first-child{margin-top:0}
/* Poslední prvek textu nenese spodní okraj, mezeru nad patičkou drží jen padding. */
.pagetext>*:last-child,.pagetext>*:last-child>li:last-child{margin-bottom:0}
.pagetext p{line-height:1.75;margin:0 0 var(--sp-4)}
.pagetext h2{font-size:var(--fs-stredni);line-height:1.3;margin:40px 0 var(--sp-3)}
.pagetext h3{font-size:var(--fs-stredni);line-height:1.4;margin:28px 0 var(--sp-2)}
.pagetext h4{font-size:var(--fs-mala);margin:22px 0 6px}
.pagetext ul,.pagetext ol{margin:0 0 20px;padding-left:22px;line-height:1.75}
.pagetext ul{list-style:disc}
.pagetext li{margin-bottom:var(--sp-2)}
.pagetext li::marker{color:var(--red-700)}
.pagetext strong,.pagetext b{font-weight:600}
.pagetext a{color:var(--red-700);text-decoration:underline;text-underline-offset:3px}
.pagetext a:hover{text-decoration-thickness:2px}
.pagetext table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:var(--fs-mala)}
.pagetext th,.pagetext td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
.pagetext th{font-weight:600;background:var(--surface)}
/* Poznámka jen pro přihlášeného správce (chybí IČO, nezkontrolované znění). Stejná
   žlutá jako pruh údržby, ať je jasné, že je to vzkaz z administrace; návštěvník
   ji nikdy nedostane. */
.pagetext .pro-spravce{background:#FFC24D;color:#04070A;border-radius:var(--r-xs);
  padding:10px 14px;font-size:var(--fs-mala);line-height:1.55}
.pagetext .pro-spravce strong,.pagetext .pro-spravce a{color:#04070A}
/* Hlavička textové stránky. Nadpis nemá pod sebou uvádět prázdno velké jako sekce. */
.pagehead{margin:var(--sp-5) 0}
.pagehead h1{font-size:var(--fs-velka);line-height:1.12}
.pagehead p{color:var(--muted);font-size:var(--fs-mala);margin-top:var(--sp-3)}

/* ==================== pás značek a modelů (od 28. 10. 2026 na konci úvodní stránky) ====================
   Loga značek z nabídky v nekonečné smyčce přes celou šířku okna, u krajů
   ztracená do podkladu, šedá. Jen dekorace: značky nejsou odkazy a na najetí
   myší nereagují, pás jede dál. Značka bez loga se ukáže názvem písmem
   nadpisů, šedě a verzálkami.

   Výchozí stav je klidný: jen první sada značek, vystředěná, nic se nehýbe.
   Totéž platí při nastavení „omezit pohyb". Smyčka se zapíná jen pro
   `no-preference`. Ostatní sady v pásu jsou kopie pro smyčku (`aria-hidden`),
   při klidném stavu se schovají. */
.znacky-pas{padding-block:var(--sp-4) var(--sp-5)}
.znacky-pas__pas{display:flex;justify-content:center}
.znacky-pas__sada{display:flex;flex-wrap:wrap;justify-content:center;align-items:center}
.znacky-pas__sada[aria-hidden="true"]{display:none}
.znacka{display:flex;align-items:center;justify-content:center;height:48px;padding-inline:var(--sp-6);color:var(--muted);
  user-select:none}
.znacka img{display:block;height:32px;width:auto;max-width:none;filter:grayscale(1);opacity:.62;pointer-events:none}
.znacka__text{font-family:var(--font-display);font-size:var(--fs-stredni);font-weight:600;line-height:1;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  .znacky-pas__okno{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
  /* Pás se posune o celou jednu půlku (-50 %) a začne znovu. Obě půlky jsou
     stejné, proto se šev nepozná. Půlka má dvacet a víc položek (3 000 až
     4 000 px podle loga) a oběh trvá 80 s, tedy zhruba 40 až 50 px za sekundu. */
  .znacky-pas__pas{display:flex;justify-content:flex-start;width:max-content;
    animation:znacky-smycka 80s linear infinite}
  .znacky-pas__sada,.znacky-pas__sada[aria-hidden="true"]{display:flex;flex:none;flex-wrap:nowrap;justify-content:flex-start}
  /* Stojí jen mimo okno a na skryté kartě. */
  .znacky-pas.is-mimo .znacky-pas__pas{animation-play-state:paused}
}
@keyframes znacky-smycka{to{transform:translate3d(-50%,0,0)}}
@media (max-width:639px){
  .znacky-pas{padding-block:var(--sp-3) var(--sp-4)}
  .znacka{height:40px;padding-inline:var(--sp-5)}
  .znacka img{height:24px}
  .znacka__text{font-size:var(--fs-stredni)}
}

/* ==================== pás modelů XPENG ====================
   Pás nese názvy modelů XPENG místo log značek. Smyčka, ztracené kraje,
   zastavení mimo okno a omezení pohybu platí z bloku výše, tady je jen to,
   v čem se model liší od loga.

   Model bez obrázku je název písmem nadpisů, šedě a verzálkami. Názvy jsou
   krátké (G6, X9), proto jsou o kus větší a řídčeji sázené než dřív, ať pás
   není jen drobná šedá linka. Před každou sadou modelů stojí malé logo XPENG
   (`.znacky-pas__logo`, není to položka, takže nemá třídu `.znacka`). Jeho
   výška odpovídá výšce verzálek názvů, takže na sebe obě písma navazují.
   Mezery jsou všude stejné, i před logem a za ním: logo má stejné odsazení
   jako názvy (Ted, 28. 10. 2026, větší mezera před logem působila jako díra). */
.znacky-pas--modely .znacka{padding-inline:var(--sp-7)}
.znacky-pas--modely .znacka__text{font-size:var(--fs-stredni);letter-spacing:.12em}
.znacky-pas__logo{display:flex;align-items:center;height:48px;padding-inline:var(--sp-7);user-select:none}
.znacky-pas__logo img{display:block;height:18px;width:auto;max-width:none;filter:grayscale(1);opacity:.72;pointer-events:none}
/* Štítek Brzy v prodeji za názvem ohlášeného modelu (příznak `brzy`, první je G9L).
   Vypadá jako štítek Skladem (`.badge-stock`): jemné červené pozadí a tmavší
   červený text. Jako jediná barevná věc v šedém pásu je vidět i v pohybu.
   Verzálky a proklad názvu modelu se ho netýkají. Skrytá čárka uvnitř (`.vh`)
   je jen pro čtečky. */
.znacka{gap:var(--sp-3)}
.znacka__brzy{display:inline-flex;align-items:center;flex:none;padding:var(--sp-1) var(--sp-3);
  border-radius:var(--r-pill);background:var(--red-50);color:var(--red-700);
  font-family:var(--font-text);font-size:var(--fs-mala);font-weight:600;line-height:1.3;
  letter-spacing:0;text-transform:none;white-space:nowrap}
@media (prefers-reduced-motion:no-preference){
  /* Půlka pásu je kolem 4 800 px (viz šablona), oběh 100 s dává zhruba 48 px
     za sekundu, tedy stejný klid jako u pásu značek. */
  .znacky-pas--modely .znacky-pas__pas{animation-duration:100s}
}
@media (max-width:639px){
  .znacky-pas--modely .znacka{padding-inline:var(--sp-6)}
  .znacky-pas--modely .znacka__text{font-size:var(--fs-stredni)}
  .znacky-pas__logo{height:40px;padding-inline:var(--sp-6)}
  .znacky-pas__logo img{height:14px}
}

/* ============================================================
   VIDEO PROHLÍDKA VOZU (detail, úvodní stránka, štítek na kartě)
   Obsluha je ve facelift.js (dřívější video.js je zrušený), části stránek v casti/detail/video.php
   a casti/homepage/video.php.
   ============================================================ */
.gal__video{position:absolute;left:var(--sp-4);top:var(--sp-4);z-index:3;display:inline-flex;align-items:center;gap:10px;
  min-height:44px;padding:4px 16px 4px 4px;border:0;border-radius:var(--r-pill);background:#fff;color:var(--text);
  font:600 var(--fs-mala)/1 var(--font-text);cursor:pointer;box-shadow:var(--sh-sm);
  transition:background var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease)}
.gal__video:hover{background:var(--red-50);color:var(--red-700)}
.gal__video:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.gal__video-ic{width:36px;height:36px;border-radius:var(--r-pill);background:var(--red-600);color:var(--on-red);display:grid;place-items:center;flex:none}
.gal__video-ic svg{width:16px;height:16px;margin-left:2px}
.gal__video-cas{color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .gal__video{left:var(--sp-3);top:var(--sp-3);min-height:40px;gap:8px;padding:4px 14px 4px 4px}
  .gal__video-ic{width:32px;height:32px}
  .gal__video-cas{display:none}
}

.vid{border:0;padding:0;margin:0;inset:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;
  display:none;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain}
.vid[open]{display:flex}
/* ::backdrop v části prohlížečů nedědí proměnné z :root, barva je proto vypsaná (= --scrim-media). */
.vid::backdrop{background:rgba(4,7,10,.9)}
.vid:focus{outline:none}
.vid__in{display:grid;gap:14px;padding:16px;width:min(100%,calc((100dvh - 120px) * 9 / 16 + 32px));margin:auto}
.vid__in--kapitoly{grid-template-columns:minmax(0,1fr)}
.vid__v{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:#000}
.vid__v video{width:100%;height:100%;object-fit:cover;display:block;cursor:pointer}
.vid__pruhy{position:absolute;left:12px;right:12px;top:12px;display:flex;gap:4px;z-index:2;pointer-events:none}
.vid__pruhy i{flex:1 1 0;height:3px;border-radius:var(--r-pill);background:rgba(255,255,255,.4);overflow:hidden}
.vid__pruhy b{display:block;height:100%;width:0;background:#fff}
.vid__hl{position:absolute;left:12px;right:12px;top:24px;display:flex;align-items:center;gap:10px;z-index:2;color:#fff;
  font-size:var(--fs-mala);line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.55)}
.vid__hl img{width:32px;height:32px;border-radius:var(--r-pill);background:#fff;padding:4px;flex:none}
.vid__nazev{flex:1;min-width:0}
.vid__nazev span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vid__nazev b{display:block;font-weight:600}
.vid__ovl{width:40px;height:40px;flex:none;display:grid;place-items:center;border:0;border-radius:var(--r-pill);
  background:rgba(11,13,16,.4);color:#fff;cursor:pointer;transition:background var(--hover-dur) var(--hover-ease)}
.vid__ovl:hover{background:rgba(11,13,16,.7)}
.vid__ovl:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vid__ovl svg{width:20px;height:20px}
.vid__ticho,.vid.is-ticho .vid__vlny{display:none}
.vid.is-ticho .vid__ticho{display:inline}
.vid__hrat{position:absolute;left:50%;top:50%;translate:-50% -50%;width:76px;height:76px;border:0;border-radius:var(--r-pill);
  background:var(--red-600);color:var(--on-red);display:none;place-items:center;cursor:pointer;z-index:2;
  box-shadow:0 0 0 10px rgba(255,255,255,.35)}
.vid__hrat:hover{background:var(--red-700)}
.vid__hrat svg{width:30px;height:30px;margin-left:4px}
.vid.is-stop .vid__hrat{display:grid}
.vid__bok{display:none}
.vid__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vid__btns .btn{justify-content:center}
@media (min-width:1000px){
  .vid__in--kapitoly{width:min(100%,calc((100dvh - 120px) * 9 / 16 + 360px));grid-template-columns:minmax(0,1fr) 296px;align-items:start}
  .vid__in--kapitoly .vid__btns{grid-column:1}
  .vid__in--kapitoly .vid__bok{display:block;grid-column:2;grid-row:1 / span 2;align-self:center;color:#fff}
}
.vid__h{font-size:var(--fs-stredni);margin-bottom:var(--sp-3)}
.vid__kap{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.vid__kap button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:flex;gap:12px;align-items:baseline;
  padding:8px 12px;border-radius:var(--r-sm);font-size:var(--fs-mala);line-height:1.35;color:rgba(255,255,255,.82);
  transition:background var(--hover-dur) var(--hover-ease),color var(--hover-dur) var(--hover-ease)}
.vid__kap button:hover,.vid__kap button.is-on{background:rgba(255,255,255,.12);color:#fff}
.vid__kap button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vid__kap em{font-style:normal;font-weight:600;color:#fff;min-width:36px;font-variant-numeric:tabular-nums}

.vh-video__box{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(32px,5vw,72px);align-items:center;
  background:var(--grad-pearl);border-radius:var(--r-2xl);padding:clamp(20px,4vw,56px)}
.vh-video__v{position:relative;aspect-ratio:9/16;border-radius:var(--r-xl);overflow:hidden;background:#000;box-shadow:var(--sh-md)}
.vh-video__v video{width:100%;height:100%;object-fit:cover;display:block}
.vh-video__zvuk{position:absolute;left:50%;bottom:16px;translate:-50% 0;z-index:2;white-space:nowrap;font-variant-numeric:tabular-nums}
.vh-video__zvuk svg{width:18px;height:18px}
.vh-video__txt h2{margin-bottom:var(--sp-4)}
.vh-video__txt .perex{margin-bottom:var(--sp-6);max-width:52ch}
.vh-video__body{list-style:none;padding:0;margin:0 0 var(--sp-6);display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.vh-video__body button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;gap:12px;align-items:baseline;width:100%;
  padding:12px 0;border-bottom:1px solid var(--pearl-400);font-size:var(--fs-mala);line-height:1.35}
.vh-video__body button:hover span{color:var(--red-700)}
.vh-video__body button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vh-video__body em{font-style:normal;color:var(--red-700);font-weight:600;min-width:36px;font-variant-numeric:tabular-nums}
.vh-video__btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:800px){
  .vh-video__box{grid-template-columns:1fr}
  .vh-video__v{max-width:min(280px,calc((100svh - 220px) * 9 / 16));width:100%;margin-inline:auto}
  .vh-video__body{grid-template-columns:1fr}
}

.veh-video{position:absolute;right:var(--sp-3);bottom:var(--sp-3);z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px 5px 8px;border-radius:var(--r-pill);background:var(--red-600);color:var(--on-red);
  font:600 var(--fs-mala)/1.2 var(--font-text);font-variant-numeric:tabular-nums;pointer-events:none}
.veh-video svg{width:16px;height:16px}
@media (prefers-reduced-motion:reduce){.gal__video,.vid__ovl,.vid__kap button{transition:none}}

/* ============================================================
   POZNÁMKY KLIENTA 27. 10. 2026: řádek důvěry v hero, Co nabízíme,
   Jak to funguje, Proč koupit u nás a ceny bez DPH jako hlavní.
   Ikony v sekcích jsou z knihovny Tabler Icons (MIT).
   ============================================================ */
.hero__duvera{list-style:none;margin:var(--sp-6) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5)}
.hero__duvera li{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-mala);font-weight:500;color:var(--text)}
.hero__duvera-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--red-50);color:var(--red-700)}
.hero__duvera-ic svg{width:18px;height:18px}
/* Hodnocení z Google je odkaz na sekci Recenze: tam stojí, čí je to profil
   a podle čeho recenze vybíráme. Podtržení je, ať je vidět, že je to odkaz. */
.hero__duvera-odkaz{color:inherit;text-decoration:underline;text-decoration-color:var(--pearl-400);text-underline-offset:3px;
  transition:color var(--hover-dur) var(--hover-ease),text-decoration-color var(--hover-dur) var(--hover-ease)}
.hero__duvera-odkaz:hover{color:var(--red-700);text-decoration-color:currentColor}

.nab__body{list-style:none;margin:var(--sp-5) 0 0;padding:0;display:grid;gap:var(--sp-3)}
.nab__body li{display:flex;align-items:center;gap:var(--sp-3);line-height:1.45}
.nab__ic{width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:var(--r-sm);
  background:#fff;color:var(--red-600);box-shadow:var(--sh-xs)}
.nab__ic svg{width:20px;height:20px}
/* Text svisle na střed ikony, i když má dva řádky (Ted, 28. 10. 2026). */

.kroky{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)}
.krok{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6) var(--sp-5) var(--sp-5);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.krok__n{position:absolute;top:var(--sp-5);right:var(--sp-5);font-family:var(--font-display);font-weight:600;
  font-size:var(--fs-stredni);line-height:1;color:var(--muted)}
.krok__ic{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-md);background:var(--red-600);color:var(--on-red)}
.krok__ic svg{width:24px;height:24px}
.krok h3{margin-top:var(--sp-2)}
.krok p{color:var(--muted)}
.jak__akce{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
@media (max-width:900px){ .kroky{grid-template-columns:minmax(0,1fr)} }

.vyhody{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
/* Dlaždice jsou světlejší než ostatní perleťové plochy (Ted 28. 10. 2026): skoro
   bílý přechod a tenký obrys, aby na bílé stránce zůstaly vidět. */
.vyhoda{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);
  background:linear-gradient(135deg,#FFFFFF 0%,#F6F7F9 60%,#FCFCFD 100%);border:1px solid var(--line);border-radius:var(--r-lg)}
.vyhoda__ic{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);background:#fff;color:var(--red-600);
  box-shadow:var(--sh-xs);margin-bottom:var(--sp-2)}
.vyhoda__ic svg{width:22px;height:22px}
.vyhoda h3{font-size:var(--fs-stredni)}
/* Text dlaždic zůstává tmavý (--text), šedý --muted byl na dřívější tmavší
   perleti pod hranicí kontrastu 4,5 : 1. */
.vyhoda p{color:var(--text);font-size:var(--fs-mala);line-height:1.5}
@media (max-width:1100px){ .vyhody{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Na telefonu jsou výhody pod sebou, ale nízké: ikona vlevo, nadpis a text
   vpravo. Osm vysokých dlaždic pod sebou dělalo sekci přes 1 700 px. */
@media (max-width:560px){
  .vyhody{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  .vyhoda{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:var(--sp-4);row-gap:var(--sp-1);padding:var(--sp-4);align-items:start}
  .vyhoda__ic{grid-row:1 / span 2;margin-bottom:0}
}

/* Cena bez DPH jako hlavní (vůz s odpočtem DPH): výrazně červeně, s DPH menší pod ní. */
.veh-price .val--bez{color:var(--red-600)}
.veh-price .val--bez small{color:var(--red-700)}
.buy__price--bez{color:var(--red-600)}

/* ---------- RECENZE Z GOOGLE ----------
   Sekce úvodní stránky (casti/homepage/recenze.php). Nahoře vlevo nadpis
   s odstavcem, vpravo souhrn na perleti: průměr z Google, hvězdy, počet
   recenzí a tlačítko na profil firmy. Pod tím tři karty jako karta vozu
   (bílá plocha, linka --line, rádius 24), ale bez efektu najetí: karta sama
   nikam nevede, odkazy jsou uvnitř. Na perleti píše jen tmavý text (--text),
   tlumený šedý tam nemá kontrast. Jen tři velikosti písma. Hvězdy jsou SVG ve
   stránce (Tabler Icons star, MIT), plné červené, prázdné světlé. */
.recenze__hlava{display:grid;gap:var(--sp-5);grid-template-columns:minmax(0,1fr);align-items:end;
  margin-bottom:var(--sp-head)}
/* Bez omezení šířky: nadpis „Co o nás říkají naši zákazníci“ je na počítači
   na jednom řádku (Ted, 28. 10. 2026). Odstavec pod ním už není. */
.recenze__uvod{max-width:none}
.recenze__uvod h2{margin-bottom:var(--sp-4)}
.recenze__uvod p{color:var(--muted);font-size:var(--fs-stredni)}
.recenze__souhrn{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);min-width:0;
  padding:var(--sp-5);background:var(--grad-pearl);border-radius:var(--r-lg);color:var(--text)}
.recenze__cislo{font-family:var(--font-display);font-size:var(--fs-stredni);font-weight:600;line-height:1}
.recenze__cislo strong{font-size:var(--fs-velka);font-weight:600;letter-spacing:-.015em;margin-right:var(--sp-1)}
.recenze__pocet{font-size:var(--fs-mala);font-weight:500}
/* Uvedení zdroje: text „Google Maps“ bez úprav a systémovým písmem, jak chtějí
   pravidla Google pro zobrazení dat z Map bez mapy. */
.recenze__google{font-family:Roboto,Arial,sans-serif;font-weight:500;white-space:nowrap}
/* Tlačítko se na úzkém telefonu smí zalomit, jinak by přeteklo souhrn. */
.recenze__souhrn .btn{margin-top:var(--sp-3);max-width:100%;white-space:normal;text-align:left}

/* Hvězdy. Souhrn má dvě řady přes sebe: spodní prázdná (bílá na perleti),
   horní plná oříznutá na podíl průměru (`--podil` z šablony, 4,8 je 96 %). */
.recenze__rada,.recenze__hvezdy,.recenze__rada-prazdna,.recenze__rada-plna{display:inline-flex;gap:2px;line-height:0}
.recenze__rada svg,.recenze__hvezdy svg{display:block;flex:none}
.recenze__rada{position:relative}
.recenze__rada svg{width:24px;height:24px}
.recenze__rada-prazdna{color:#fff}
.recenze__rada-plna{position:absolute;top:0;left:0;bottom:0;width:var(--podil,100%);overflow:hidden;color:var(--red-600)}
.recenze__hvezdy svg{width:20px;height:20px}
.recenze__hvezdy>span{color:var(--pearl-300)}
.recenze__hvezdy>.je{color:var(--red-600)}

/* Karty. Na telefonu a tabletu pod sebou (jako Služby), od 900 px tři vedle sebe. */
.recenze__karty.g3{grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){ .recenze__karty.g3{grid-template-columns:repeat(3,minmax(0,1fr))} }
.recenze__karta{display:flex;min-width:0}
.recenze__obsah{display:flex;flex-direction:column;gap:var(--sp-4);width:100%;padding:var(--sp-5);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg)}
.recenze__text{font-size:var(--fs-mala);line-height:1.6;color:var(--text);overflow-wrap:break-word}

/* Dlouhá recenze: začátek a pod ním rozbalení s celým textem. Po rozbalení se
   začátek schová, ať se text neopakuje (prohlížeč bez :has() ukáže obojí). */
.recenze__karta:has(.recenze__cela[open]) .recenze__text--kratce{display:none}
.recenze__cela{--rc-sipka:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E")}
.recenze__cela summary{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:var(--sp-6);
  cursor:pointer;list-style:none;font-size:var(--fs-mala);font-weight:600;color:var(--red-700);
  border-radius:var(--r-xs)}
.recenze__cela summary::-webkit-details-marker{display:none}
.recenze__cela summary::after{content:"";flex:none;width:16px;height:16px;background:currentColor;
  -webkit-mask:var(--rc-sipka) center/16px no-repeat;mask:var(--rc-sipka) center/16px no-repeat;
  transition:transform var(--hover-dur) var(--hover-ease)}
.recenze__cela[open] summary::after{transform:rotate(180deg)}
.recenze__cela[open] summary{margin-bottom:var(--sp-3)}
.recenze__cela summary:hover{text-decoration:underline;text-underline-offset:3px}

/* Autor, datum a odkaz na recenzi drží spodní okraj karty, karty v řadě tak
   končí na stejné lince. */
.recenze__autor{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:var(--sp-4);
  border-top:1px solid var(--line);font-size:var(--fs-mala)}
.recenze__jmeno{font-weight:600;color:var(--text)}
.recenze__meta,.recenze__preklad{color:var(--muted)}
.recenze__autor a{text-decoration:underline;text-decoration-color:var(--pearl-400);text-underline-offset:3px;
  transition:color var(--hover-dur) var(--hover-ease),text-decoration-color var(--hover-dur) var(--hover-ease)}
.recenze__autor a:hover{color:var(--red-700);text-decoration-color:currentColor}
.recenze__poznamka{margin-top:var(--sp-5);max-width:60ch;color:var(--muted);font-size:var(--fs-mala)}

@media (min-width:900px){
  .recenze__hlava{grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-7)}
  .recenze__souhrn{min-width:300px;padding:var(--sp-6)}
}
@media (prefers-reduced-motion:reduce){
  .recenze__cela summary::after{transition:none}
}

/* O nás (úvodní stránka, od 27. 10. 2026): text vlevo, ověřená fakta vpravo. */
.onas__box{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;
  background:var(--grad-pearl);border-radius:var(--r-2xl);padding:clamp(24px,4vw,56px)}
.onas__text h2{margin-bottom:var(--sp-4)}
.onas__text .perex{max-width:46ch}
.onas__akce{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}
.onas__fakta{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.onas__fakta li{display:flex;flex-direction:column;gap:4px;padding:var(--sp-5);background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-xs)}
.onas__fakta b{font-family:var(--font-display);font-weight:600;font-size:var(--fs-stredni);line-height:1.2;color:var(--text)}
.onas__fakta span:last-child{color:var(--muted);font-size:var(--fs-mala);line-height:1.4}
.onas__ic{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-sm);background:var(--red-50);color:var(--red-700);margin-bottom:var(--sp-2)}
.onas__ic svg{width:20px;height:20px}
@media (max-width:900px){ .onas__box{grid-template-columns:minmax(0,1fr)} }
/* Na telefonu zůstávají fakta O nás ve dvou sloupcích (Ted, 28. 10. 2026: pod
   sebou byla sekce zbytečně dlouhá), jen s menším odsazením. */
@media (max-width:420px){ .onas__fakta li{padding:var(--sp-4)} }

/* Kontakt: odstavec o DIADEM nad údaji provozovatele, dva rámečky těsně pod sebou. */
.kontakt-onas + .provozovatel{margin-top:var(--sp-4)}
.kontakt-onas p{max-width:72ch;color:var(--text)}

/* Odstup mezi souhlasem a tlačítkem odeslání ve všech formulářích. Dřív ho
   dělal samostatný odkaz na zásady pod zaškrtávátkem, který je od 26. 10. 2026
   součástí textu souhlasu (Ted, 28. 10. 2026). Okno rezervace má odstup v šabloně. */
.check + .btn{margin-top:var(--sp-5)}
.check[style*="margin-bottom"] + .btn{margin-top:0}

/* Pás recenzí (Ted, 28. 10. 2026): jede pomalu dokola jako pás modelů.
   Okno je přes celou šířku stránky, karty mají stejnou šířku a text nejvýš
   šest řádků. Stojí při najetí myší, při fokusu, a mimo okno. */
.recenze__okno{margin-top:var(--sp-6);margin-inline:calc(50% - 50vw);padding-block:var(--sp-2)}
.recenze__pas{display:flex;width:max-content}
.recenze__sada{list-style:none;margin:0;padding:0;display:flex;flex:none;gap:var(--sp-4);padding-inline-end:var(--sp-4)}
.recenze__sada[aria-hidden="true"]{display:none}
.recenze__sada .recenze__karta{width:min(360px,82vw);flex:none}
.recenze__sada .recenze__text p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .recenze__okno{overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
  /* Půlka pásu je 20 karet, asi 7 500 px, oběh 240 s je kolem 30 px za sekundu. */
  .recenze__pas{animation:znacky-smycka 240s linear infinite}
  .recenze__sada[aria-hidden="true"]{display:flex}
  .recenze__okno:hover .recenze__pas,.recenze__okno:focus-within .recenze__pas,
  .recenze.is-mimo .recenze__pas{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .recenze__okno{overflow-x:auto;scroll-snap-type:x proximity;padding-inline:var(--wrap-pad)}
  .recenze__sada .recenze__karta{scroll-snap-align:start}
}

/* Co nabízíme: fotka vlevo je vysoká jako sloupec s textem (Ted, 28. 10. 2026). */
@media (min-width:900px){
  .nab .xp__grid{align-items:stretch}
  .nab .xp__media{height:100%}
  .nab .xp__media picture{display:block;height:100%}
  .nab .xp__media img{height:100%;min-height:420px}
  .nab .xp__media img{aspect-ratio:auto}
  .nab .xp__text{align-self:center}
}

/* ============================================================
   ÚVODNÍ STRÁNKA, ÚPRAVY 28. 10. 2026 (Ted): hero na celou výšku,
   hodnocení s hvězdami, černé plochy, pás modelů na konci, kapitoly videa.
   ============================================================ */
:root{--tma-bg:#04070A;--tma-plocha:#0C1117;--tma-text:#F4F8FA;--tma-tlumeny:#94A3B1;
  --tma-linka:rgba(244,248,250,.12);--hvezda:#F5B400}

/* HERO NA CELOU VÝŠKU. Hlavička je přilepená v toku stránky (.navbar, výška
   --nav-v a linka 1 px), hero začíná hned pod ní, proto okno minus hlavička.
   Pod 960 px leží dole ještě spodní lišta (.mobcta), odečte se i ta. Je to jen
   nejmenší výška: delší obsah hero přeroste a nic se neořízne. 100vh je záloha
   pro prohlížeč bez svh. Hero je mřížka, jejíž jediný řádek se natáhne na
   celou výšku, obsah se v něm drží na středu. Hero schválně není kontejner
   (container-type): Safari na iPhonu pak rám s fotkou smrskl na nulu a zbylo
   z něj jen kolečko perleťového okraje (Ted, 28. 10. 2026). */
.hero{display:grid;
  min-height:calc(100vh - var(--nav-v) - 1px);
  min-height:calc(100svh - var(--nav-v) - 1px)}
.hero>.hero__grid{width:100%;align-content:center}
.hero__ram{width:100%}
@media (max-width:959px){
  .hero{min-height:calc(100vh - var(--nav-v) - 1px - var(--mobcta-v) - env(safe-area-inset-bottom,0px));
    min-height:calc(100svh - var(--nav-v) - 1px - var(--mobcta-v) - env(safe-area-inset-bottom,0px))}
}
/* Nad 900 px má rám s fotkami pevnou výšku podle okna: okno bez hlavičky minus
   velké odsazení nahoře a dole (--hero-pad, na vysoké obrazovce víc), nejmíň
   380 px a nejvýš 600 px. Text i rám stojí svisle na středu hero, takže volné
   místo se rozdělí nahoru a dolů a fotka se nikdy nedotkne hlavičky ani spodku
   okna (Ted, 28. 10. 2026: na vyšší obrazovce rám vyplnil celou výšku). */
@media (min-width:900px){
  .hero{--hero-pad:clamp(48px,10vh,140px);padding-block:var(--hero-pad)}
  .hero>.hero__grid{align-items:center}
  .hero .hero__ram{align-self:center;
    height:clamp(380px,calc(100vh - var(--nav-v) - 1px - 2 * var(--hero-pad)),600px);
    height:clamp(380px,calc(100svh - var(--nav-v) - 1px - 2 * var(--hero-pad)),600px)}
}

/* Hodnocení z Google v řádku důvěry (vzor od Teda): pět žlutých hvězd, tučně
   průměr a „na Googlu · 38 recenzí“. Stojí samo na prvním řádku, záruka
   a přistavení pod ním. Hvězdy jsou dvě řady přes sebe jako v sekci Recenze:
   spodní prázdná světlá, horní plná zlatá oříznutá na podíl průměru
   (`--podil` ze šablony). Zlatá je jen ozdoba, číslo a text nesou totéž
   v plném kontrastu. Podtržení je jen na najetí, na textu. */
.hero__duvera .hero__hodnoceni{flex-basis:100%}
.hero__hodnoceni .hero__duvera-odkaz{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--sp-1) var(--sp-3);text-decoration:none}
.hero__hvezdy{position:relative;display:inline-flex;flex:none;line-height:0}
.hero__hvezdy-prazdne,.hero__hvezdy-plne{display:inline-flex;gap:2px}
.hero__hvezdy svg{display:block;flex:none;width:20px;height:20px}
.hero__hvezdy-prazdne{color:var(--pearl-300)}
.hero__hvezdy-plne{position:absolute;top:0;left:0;bottom:0;width:var(--podil,100%);overflow:hidden;color:var(--hvezda)}
.hero__hodnoceni-text strong{font-weight:700}
.hero__hodnoceni .hero__duvera-odkaz:hover .hero__hodnoceni-text{text-decoration:underline;text-decoration-color:currentColor;text-underline-offset:3px}

/* Černé plochy přes celou šířku okna (Ted: rozbít jednolitou bílou). Třída
   `.sekce-tma` je na sekcích Jak to funguje a Kontakt na úvodu a na pásu modelů
   pod Kontaktem. Vlastní tokeny, protože --carbon-950 a --mist-50 jsou v :root
   aliasy na bílou a tmavý text. Tlumený #94A3B1 má na #04070A kontrast asi 8 : 1,
   na kartě #0C1117 asi 7 : 1. Tlačítka zůstávají (červené s bílou, bílé
   s tmavou), červený fokus má na černé přes 4 : 1. */
.sekce-tma{background:var(--tma-bg);color:var(--tma-text)}
/* Uvnitř černé je od okraje k obsahu stejně daleko jako v bílé mezeře před
   černou a za ní (polovina mezery mezi sekcemi), takže mezera nad i pod hranou
   černé je stejná (Ted, 28. 10. 2026). */
.section.sekce-tma{padding-block:calc(var(--sp-section) / 2)}
/* Černá se nedotýká obsahu sousední sekce: sekce mají jen horní odsazení,
   takže sekce nad černou dostane dole polovinu mezery a sekce pod černou
   nahoře taky polovinu. Černá tak začíná a končí uprostřed mezery mezi
   obsahem (Ted, 28. 10. 2026). */
.section:has(+ .sekce-tma){padding-bottom:calc(var(--sp-section) / 2)}
.sekce-tma + .section{padding-top:calc(var(--sp-section) / 2)}
.sekce-tma .sec-head p{color:var(--tma-tlumeny)}
/* Jak to funguje: kroky jsou tmavé karty s jemnou linkou. */
.sekce-tma .krok{background:var(--tma-plocha);border-color:var(--tma-linka)}
.sekce-tma .krok p,.sekce-tma .krok__n{color:var(--tma-tlumeny)}
/* Kontakt: formulář a karta kontaktů zůstávají světlé jako ostrovy na černé.
   Karta barvu textu dědila ze sekce, tmavý text si proto nastaví sama. */
.sekce-tma .contact-card{color:var(--text)}
/* Za Kontaktem je pás modelů na stejné černé: Kontakt dole nese menší odstup,
   pás odděluje tenká linka a černá jde bez bílého pruhu až k patičce. */
.section.sekce-tma:has(+ .znacky-pas){padding-bottom:var(--sp-8)}
.znacky-pas.sekce-tma{padding-block:var(--sp-5) var(--sp-6);border-top:1px solid var(--tma-linka)}
@media (max-width:639px){ .znacky-pas.sekce-tma{padding-block:var(--sp-4) var(--sp-5)} }
/* Pás modelů na černé: názvy světlejší šedé, logo XPENG i obrázky modelů jako
   světlá silueta (filtr udělá z tmavého loga bílé), štítek Brzy v prodeji
   plně červený s bílým písmem jako .badge-soon. Kraje mizí maskou do černé. */
.sekce-tma .znacka{color:#C5CDD5}
.sekce-tma .znacka img,.sekce-tma .znacky-pas__logo img{filter:brightness(0) invert(1);opacity:.8}
.sekce-tma .znacka__brzy{background:var(--red-600);color:var(--on-red)}

/* Kapitoly videa na úvodu: všechny, ve dvou sloupcích a shora dolů (první půlka
   vlevo, druhá vpravo). Počet řádků `--radky` posílá šablona. Do 800 px platí
   jeden sloupec z bloku VIDEO výš. */
@media (min-width:801px){
  .vh-video__body[style*="--radky"]{grid-template-rows:repeat(var(--radky),auto);grid-auto-flow:column}
}

/* Decentní najetí na dlaždice Jak to funguje a Proč koupit u nás (Ted,
   28. 10. 2026). Dlaždice se nehýbe, jen se jemně přebarví: obrys do červena,
   podklad o kus světlejší, číslo kroku červené, u výhod se ikona obrátí do
   plné červené. Při omezeném pohybu bez přechodu. */
.krok,.vyhoda{transition:border-color var(--hover-dur) var(--hover-ease),background-color var(--hover-dur) var(--hover-ease),
  box-shadow var(--hover-dur) var(--hover-ease)}
.krok__n,.vyhoda__ic{transition:color var(--hover-dur) var(--hover-ease),background-color var(--hover-dur) var(--hover-ease)}
.krok:hover{border-color:rgba(var(--red-rgb),.45)}
.krok:hover .krok__n{color:var(--red-600)}
.sekce-tma .krok:hover{background:#111821;border-color:rgba(var(--red-rgb),.55)}
.vyhoda:hover{border-color:rgba(var(--red-rgb),.34);background:#fff;box-shadow:var(--sh-sm)}
.vyhoda:hover .vyhoda__ic{background:var(--red-600);color:var(--on-red)}
@media (prefers-reduced-motion:reduce){ .krok,.vyhoda,.krok__n,.vyhoda__ic{transition:none} }

/* HERO: logo nad nadpisem a podtitul (29. 10. 2026). Logo je uvnitř h1. */
.hero__nadpis{margin:0}
.hero__logo{display:block;height:clamp(36px,3.4vw,48px);width:auto;margin-bottom:var(--sp-5)}
.hero__podtitul{margin-top:var(--sp-4);font-family:var(--font-display);font-size:var(--fs-stredni);
  font-weight:600;line-height:1.3;color:var(--text);text-wrap:balance}

/* RECENZE ZE TŘÍ ZDROJŮ (29. 10. 2026): dlaždice zdrojů pod nadpisem a ikona
   zdroje na kartě. Ikona je písmeno v kolečku v barvě zdroje, ne logo. */
.recenze__zdroje{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){ .recenze__zdroje{grid-template-columns:repeat(3,minmax(0,1fr))} }
.recenze__zdroj{display:flex;min-width:0}
.recenze__zdroj-obsah{display:flex;align-items:center;gap:var(--sp-4);width:100%;padding:var(--sp-4) var(--sp-5);
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text);text-decoration:none;
  transition:border-color var(--hover-dur) var(--hover-ease),box-shadow var(--hover-dur) var(--hover-ease)}
a.recenze__zdroj-obsah:hover{border-color:var(--pearl-400);box-shadow:var(--sh-xs)}
.recenze__zdroj-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.recenze__zdroj-nazev{font-weight:600;font-size:var(--fs-mala)}
.recenze__zdroj-hodnoceni{display:flex;align-items:center;gap:var(--sp-2);font-family:var(--font-display);
  font-size:var(--fs-stredni);font-weight:600;line-height:1.2}
.recenze__zdroj-hodnoceni strong{font-weight:600}
.recenze__zdroj .recenze__rada svg{width:16px;height:16px}
.recenze__zdroj .recenze__rada-prazdna{color:var(--pearl-300)}
.recenze__zdroj-pocet{font-size:var(--fs-mala);color:var(--muted)}
.recenze__zdroj .rot{display:inline-flex;flex:none;width:22px;height:22px;color:var(--red-700);
  transition:transform var(--hover-dur) var(--hover-ease)}
.recenze__zdroj .rot svg{width:22px;height:22px}
a.recenze__zdroj-obsah:hover .rot,a.recenze__zdroj-obsah:focus-visible .rot{transform:rotate(45deg)}
.recenze__ikona{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-pill);
  font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:var(--fs-stredni);line-height:1;user-select:none}
/* Loga zdrojů jsou obrázky v bílém kolečku s jemným obrysem. */
.recenze__ikona{background:#fff;border:1px solid var(--line);overflow:hidden}
.recenze__ikona img{display:block;width:62%;height:62%;object-fit:contain}
.recenze__ikona--mobilede img,.recenze__ikona--sauto img{width:100%;height:100%}
.recenze__karta-hlava{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.recenze__karta-hlava .recenze__ikona{width:32px;height:32px;font-size:var(--fs-mala)}
.recenze__zdroj-karta{font-weight:500}
@media (prefers-reduced-motion:reduce){ .recenze__zdroj-obsah,.recenze__zdroj .rot{transition:none} }