/* AUTOGENEROVANO CORALEM, neupravovat.
 * Zdroj pravdy je stejnojmenny .less soubor, tento .css se pri kazde
 * synchronizaci prepisuje. Upravy delej v .less souboru. */
/* Zlatá hodinka, foťák.
   Geometrie displeje změřená z podkladu sony-a7c-ii (tělo 267 x 487 px):
   otvor displeje začíná na 8,24 % šířky a 15,81 % výšky těla, je 58,05 % široký
   a 47,84 % vysoký, poměr 2:3. Šířka otvoru je šířka fotky na displeji
   (--zh-fs-f). Fotka 3:4 pak sedí v otvoru na šířku, nahoře a dole zůstane
   černý pruh obrazovky, jako na opravdovém foťáku. */
/* Zlatá hodinka 31: celé tělo foťáku (i s hledáčkem) se vejde na výšku.
   Displej a fotka se počítají z těla, fotka je tak ve foťáku menší než dřív
   a do Lightroomu se zvětší.
   Zlatá hodinka 107: kompozice podle zlatého řezu. Střed displeje (fotka, kam
   jde oko) stojí na 61,8 % šířky, foťák je svisle uprostřed, takže displej
   vychází skoro na vodorovnou zlatou linku. Vlevo zbude místo na kartu kroku
   z jádra (--zh-karta-sirka, Zlatá hodinka 117 stejná u všech kroků) a aspoň
   48 px mezera, vpravo na spoušť s popiskem (--zh-spoust-misto); v úzkém
   okně se foťák zmenší. 0.37265 je střed displeje v šířce těla, 0.20433
   a 0.34392 jsou 0.37265 a 0.62735 krát poměr těla. */
.zh-fotak {
  --zh-spoust-misto: 150px;
  --zh-fotak-v: min(80vh, 80svh, 860px, calc((56.8vw - var(--zh-karta-sirka) - 48px) / 0.20433), calc((35.2vw - var(--zh-spoust-misto)) / 0.34392));
  --zh-fotak-s: calc(var(--zh-fotak-v) * 0.54825);
  --zh-fotak-x: calc(61.8% - var(--zh-fotak-s) * 0.37265);
  --zh-fotak-y: calc(50% - var(--zh-fotak-v) / 2);
  --zh-disp-x: calc(var(--zh-fotak-x) + var(--zh-fotak-s) * 0.0824);
  --zh-disp-y: calc(var(--zh-fotak-y) + var(--zh-fotak-v) * 0.1581);
  --zh-fs-f: calc(var(--zh-fotak-s) * 0.5805);
  --zh-obr-v: calc(var(--zh-fotak-v) * 0.4784);
  --zh-fv-f: calc(var(--zh-fs-f) * 4 / 3);
  --zh-stred-x: calc(var(--zh-disp-x) + var(--zh-fs-f) / 2);
  --zh-stred-y: calc(var(--zh-disp-y) + var(--zh-obr-v) / 2);
}
/* .zh-scena z komponenty má min-height 100vh a načítá se později, proto dvojitá třída.
   Bod 78: kratší scéna, po potvrzení se z ní odjíždí rychle. */
.zh-scena.zh-fotak {
  min-height: 110vh;
}
/* ─────────────────────────────  pozadí  ──────────────────────────── */
.zh-fotak__pozadi {
  background: #080410;
  overflow: hidden;
}
/* Bod 78: pozadí je ta samá scéna v plném rozlišení, auto velké za foťákem jako
   v náhledu od grafika. Barvy jsou zapečené v obrázku (na PC
   zh-<auto>-dalka-pc.webp), žádný filtr za chodu. Zlatá hodinka 139: fotka je
   ostrá z originálu, hloubku dává jen to, jak ji Honza vyfotil. */
.zh-fotak__dalka {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.zh-fotak__dalka img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}
/* Zlatá hodinka 204: nová scéna je pod starou hned celá a stará se z ní
   rozplyne nahoře, takže uprostřed výměny pozadí neztmavne. */
.zh-fotak__dalka--zive {
  opacity: 1;
  transition: none;
}
.zh-fotak__dalka--odchazi {
  z-index: 1;
}
/* Zlatá hodinka 144: každá vrstva dálky má vlastní plochu, výměna fotky v jedné
   nepřekresluje druhou ani stín nad nimi. Série focení běží na druhé vrstvě nad
   živou a naskočí hned.
   Zlatá hodinka 192: s posledním cvaknutím série vrstva zmizí v tom samém
   snímku, kdy displej ukáže hlavní fotku; pod ní už ostrá hlavní fotka leží. */
.zh-fotak__dalka {
  will-change: opacity;
}
.zh-fotak__dalka--serie {
  z-index: 1;
  opacity: 1;
  transition: none;
}
.zh-fotak__dalka--konec {
  opacity: 0;
  transition: none;
}
/* tma webu po stranách a kolem, ať text vlevo čte a scéna je v noci webu
   (zrno a záři dává celému webu vrstva .zh-film z komponenty) */
.zh-fotak__stin {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: radial-gradient(62% 74% at 50% 52%, transparent 38%, rgba(8, 4, 16, 0.72) 100%), linear-gradient(90deg, #080410 0%, rgba(8, 4, 16, 0.55) 16%, transparent 34%, transparent 70%, rgba(8, 4, 16, 0.6) 88%, #080410 100%), linear-gradient(180deg, rgba(8, 4, 16, 0.4) 0%, transparent 22%, transparent 70%, rgba(8, 4, 16, 0.7) 100%);
}
/* Zlatá hodinka 191: šev s O mně se slije. Scéna vyjíždí z tmy konce O mně:
   přes horní kraj pozadí leží přechod z barvy, kterou O mně končí, do
   průhledna. Čím výš hrana sekce dojede, tím je přechod nižší, a když je
   foťák nahoře, nezbude z něj nic, scéna je stejná jako dřív. Řídí to
   rolování sekce (časová osa vjezdu), bez skriptu; prohlížeč bez časové
   osy rolování ukáže šev jako dřív. */
@supports (animation-timeline: view()) {
  .zh-fotak {
    view-timeline: --zh-fotak-vjezd block;
  }
  .zh-fotak__pozadi::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    right: 0;
    height: 34vh;
    background: linear-gradient(180deg, #120818 0%, rgba(18, 8, 24, 0.86) 16%, rgba(18, 8, 24, 0.52) 44%, rgba(18, 8, 24, 0.18) 72%, rgba(18, 8, 24, 0) 100%);
    transform-origin: 50% 0;
    pointer-events: none;
    animation: zh-fotak-navaz linear both;
    animation-timeline: --zh-fotak-vjezd;
    animation-range: entry 35% entry 100%;
  }
}
@keyframes zh-fotak-navaz {
  from {
    transform: scaleY(1);
  }
  to {
    transform: scaleY(0);
  }
}
/* ─────────────────────────────  displej  ─────────────────────────── */
/* Černá obrazovka sahá o kus pod tělo, ať v rozích výřezu nikdy neprosvítá pozadí. */
.zh-fotak__obrazovka {
  position: absolute;
  left: calc(var(--zh-disp-x) - var(--zh-fotak-s) * 0.012);
  top: calc(var(--zh-disp-y) - var(--zh-fotak-v) * 0.008);
  width: calc(var(--zh-fs-f) + var(--zh-fotak-s) * 0.024);
  height: calc(var(--zh-obr-v) + var(--zh-fotak-v) * 0.016);
  background: #05030A;
}
/* Bod 78: stín rámečku do výřezu displeje, obrazovka sedí v těle o kus hlouběji.
   Zlatá hodinka 107: černý prstenec 1,5 px přes hranu výřezu z obou stran, ať
   na zlomkovém pixelu hrany nikdy neprosvítá kraj vedlejší fotky. */
.zh-fotak__vyrez {
  position: absolute;
  left: var(--zh-disp-x);
  top: var(--zh-disp-y);
  width: var(--zh-fs-f);
  height: var(--zh-obr-v);
  border-radius: 3px;
  box-shadow: 0 0 0 1.5px #05030A, inset 0 0 0 1.5px #05030A, inset 0 0 0 2.5px rgba(0, 0, 0, 0.85), inset 0 5px 10px rgba(0, 0, 0, 0.7), inset 0 0 16px 3px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}
.zh-fotak__displej {
  position: absolute;
  left: var(--zh-stred-x);
  top: var(--zh-stred-y);
  width: var(--zh-fs-f);
  height: var(--zh-fv-f);
  transform: translate(-50%, -50%);
  overflow: hidden;
  background: #05030A;
  pointer-events: auto;
  touch-action: pan-y;
}
/* Zlatá hodinka 107: mezi fotkami je černá mezera, takže při přejíždění i po
   něm je na kraji displeje vidět jen tma obrazovky, ne proužek další fotky. */
.zh-fotak__pas {
  display: flex;
  gap: 8px;
  height: 100%;
  transform: translateX(calc(var(--zh-i, 0) * (-100% - 8px)));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.zh-fotak--bez-prechodu .zh-fotak__pas {
  transition: none;
}
.zh-fotak__snimek {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* sklo: odlesk, ztmavené rohy, jemný rastr, ať je to obrazovka a ne obrázek */
.zh-fotak__sklo {
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 28%, transparent 46%, transparent 70%, rgba(255, 144, 182, 0.06) 100%), radial-gradient(120% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: normal;
}
.zh-fotak__rastr {
  position: absolute;
  inset: 0;
  opacity: 0.28;
  background: repeating-linear-gradient(180deg, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px), repeating-linear-gradient(90deg, transparent 0 2px, rgba(0, 0, 0, 0.1) 2px 3px);
}
.zh-fotak__zaverka {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
/* Zlatá hodinka 188: displej se zatmí s prvním cvaknutím série (třídu dává JS
   podle času zvuku), ne už při stisku spouště. */
.zh-fotak--zaverka .zh-fotak__zaverka {
  animation: zh-cvak 0.26s ease-out;
}
@keyframes zh-cvak {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* ─────────────────────────────  tělo foťáku  ─────────────────────── */
/* Bod 78: tělo je v obrázku očištěné od lemů výřezu a bez tyrkysového nádechu,
   stín je samostatná vrstva pod ním (bez filtru za chodu). */
.zh-fotak__telo {
  position: absolute;
  left: var(--zh-fotak-x);
  top: var(--zh-fotak-y);
  width: var(--zh-fotak-s);
  height: var(--zh-fotak-v);
  max-width: none;
}
/* Stín z obrázku zh-fotak-stin.webp: plátno má kolem těla okraj 200 px
   z 801 x 1461, proto posun a zvětšení v těchto poměrech.
   Zlatá hodinka 141: stín padá doprava dolů, světlo na těle jde zleva. */
.zh-fotak__stinovani {
  position: absolute;
  left: calc(var(--zh-fotak-x) - var(--zh-fotak-s) * 0.24969);
  top: calc(var(--zh-fotak-y) - var(--zh-fotak-v) * 0.13689);
  width: calc(var(--zh-fotak-s) * 1.49938);
  height: calc(var(--zh-fotak-v) * 1.27379);
  max-width: none;
  pointer-events: none;
}
/* Světlo webu na těle: teplá záře shora zleva, růžový odlesk z pravého boku
   a tma dole, ať foťák stojí ve stejném světle jako zbytek stránky.
   Zlatá hodinka 107: světlo na hranách už nese obrázek těla, růžový bok je
   proto slabší a širší, jen jako odraz okolí.
   Zlatá hodinka 141: zlaté světlo zleva je zapečené v obrázku těla, tady
   zůstává jen slabá záře shora, odraz okolí zprava a tma dole. */
.zh-fotak__svetlo {
  position: absolute;
  left: var(--zh-fotak-x);
  top: var(--zh-fotak-y);
  width: var(--zh-fotak-s);
  height: var(--zh-fotak-v);
  background: radial-gradient(80% 45% at 18% 0%, rgba(253, 224, 181, 0.12), transparent 70%), linear-gradient(270deg, rgba(250, 129, 185, 0.14) 0%, rgba(250, 129, 185, 0.05) 16%, transparent 34%), linear-gradient(0deg, rgba(8, 4, 16, 0.45) 0%, transparent 30%);
  mix-blend-mode: soft-light;
  -webkit-mask: var(--zh-fotak-maska) center / 100% 100% no-repeat;
  mask: var(--zh-fotak-maska) center / 100% 100% no-repeat;
  pointer-events: none;
}
/* údaje foťáku přes displej, přesně v otvoru */
.zh-fotak__hud {
  position: absolute;
  left: var(--zh-stred-x);
  top: var(--zh-stred-y);
  width: var(--zh-fs-f);
  height: var(--zh-obr-v);
  transform: translate(-50%, -50%);
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(253, 224, 181, 0.88);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}
.zh-fotak__hud-radek {
  position: absolute;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.zh-fotak__hud-radek--horni {
  top: 7px;
}
.zh-fotak__hud-radek--dolni {
  bottom: 7px;
}
.zh-fotak__hud-nazev {
  flex: 1;
  text-align: center;
  color: #FDE0B5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zh-fotak__baterie {
  width: 16px;
  height: 8px;
  border: 1px solid rgba(253, 224, 181, 0.8);
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(253, 224, 181, 0.85) 0 72%, transparent 72%);
}
/* ostřicí rámeček jako na Sony: čtyři rohové závorky na autě; při přepnutí
   fotky chvíli hledá a pak zezelená (zaostřeno) */
.zh-fotak__af {
  --zh-af: rgba(253, 224, 181, 0.85);
  --zh-af-d: 11px;
  position: absolute;
  left: 50%;
  top: 58%;
  width: 34%;
  aspect-ratio: 1.2;
  transform: translate(-50%, -50%);
  background: linear-gradient(var(--zh-af), var(--zh-af)) left top / var(--zh-af-d) 1.5px no-repeat, linear-gradient(var(--zh-af), var(--zh-af)) left top / 1.5px var(--zh-af-d) no-repeat, linear-gradient(var(--zh-af), var(--zh-af)) right top / var(--zh-af-d) 1.5px no-repeat, linear-gradient(var(--zh-af), var(--zh-af)) right top / 1.5px var(--zh-af-d) no-repeat, linear-gradient(var(--zh-af), var(--zh-af)) left bottom / var(--zh-af-d) 1.5px no-repeat, linear-gradient(var(--zh-af), var(--zh-af)) left bottom / 1.5px var(--zh-af-d) no-repeat, linear-gradient(var(--zh-af), var(--zh-af)) right bottom / var(--zh-af-d) 1.5px no-repeat, linear-gradient(var(--zh-af), var(--zh-af)) right bottom / 1.5px var(--zh-af-d) no-repeat;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
  transition: opacity 0.35s ease;
}
.zh-fotak--ostri .zh-fotak__af {
  animation: zh-af-hleda 0.4s ease;
}
.zh-fotak--zaostreno .zh-fotak__af,
.zh-fotak--cvak .zh-fotak__af {
  --zh-af: #6BE3A0;
}
@keyframes zh-af-hleda {
  0% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 0.4;
  }
  60% {
    transform: translate(-50%, -50%) scale(0.9399999999999999);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.zh-fotak__pocitadlo b {
  font-weight: 700;
  color: #FDE0B5;
}
/* ─────────────────────────────  šipky  ───────────────────────────── */
/* Bod 78: šipky sedí na kraji rámečku displeje (střed šipky na hraně výřezu),
   ne vedle foťáku. Vzhled je sdílená šipka z jádra (.zh-tl-sipka), tady jen poloha. */
.zh-fotak .zh-fotak__sipka {
  position: absolute;
  top: var(--zh-stred-y);
  pointer-events: auto;
  transform: translate(-50%, -50%);
}
.zh-fotak__sipka--vlevo {
  left: var(--zh-disp-x);
}
.zh-fotak__sipka--vpravo {
  left: calc(var(--zh-disp-x) + var(--zh-fs-f));
}
.zh-fotak--zive .zh-fotak__sipka::after {
  animation: zh-sipka-zar 0.6s ease 3;
}
/* Zlatá hodinka 107: pobídka (kolečko nebo tah prstem u zamčeného foťáku)
   rozsvítí šipky stejně jako najetí myší a spoušť s nimi. Rozsvícení i zhasnutí
   jede přechodem ze šipky v jádře, nic neskočí. */
.zh-fotak.zh-fotak--pobidka .zh-fotak__sipka {
  background: rgba(250, 129, 185, 0.42);
  box-shadow: inset 0 0 0 2px #FDE0B5, 0 0 30px rgba(250, 129, 185, 0.7), 0 8px 18px rgba(8, 4, 16, 0.7);
}
/* ─────────────────────────────  spoušť  ──────────────────────────── */
/* Zlatá hodinka 107: místo tlačítka Potvrdit spoušť na boku foťáku, tam, kde ji
   má opravdový foťák (foťák stojí na výšku, jeho horní strana je vpravo).
   Vedle ní popisek: co se stane a které auto. Najetí myší zaostří jako
   namáčknutí, stisk vyfotí. Na telefonu stojí na stejném místě, popisek pod ní
   (Zlatá hodinka 152). */
.zh-fotak__potvrdit {
  --zh-spoust: 56px;
  position: absolute;
  z-index: 3;
  left: calc(var(--zh-fotak-x) + var(--zh-fotak-s) * 0.985 - var(--zh-spoust) / 2);
  top: calc(var(--zh-fotak-y) + var(--zh-fotak-v) * 0.835 - var(--zh-spoust) / 2);
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  outline: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.6;
  transition: opacity 0.35s ease;
}
.zh-fotak.zh-fotak--zive .zh-fotak__potvrdit {
  opacity: 1;
}
/* Fokus z klávesnice rozsvítí jen spoušť (níž), ne prstenec kolem popisku. */
body.zh .zh-fotak__potvrdit:focus-visible {
  box-shadow: none;
}
/* po vyfocení šipky i spoušť zmizí, návrat k foťáku je vrátí (bod 75);
   Zlatá hodinka 142: s nimi i ostřicí rámeček, fotka odlétá z čistého displeje */
.zh-fotak.zh-fotak--hotovo .zh-fotak__potvrdit,
.zh-fotak.zh-fotak--hotovo .zh-fotak__sipka,
.zh-fotak.zh-fotak--hotovo .zh-fotak__af {
  opacity: 0;
  pointer-events: none;
}
/* Zlatá hodinka 142: během vcucnutí do Lightroomu a zpět nic z ovládání
   nesvítí přes letící fotku; vrátí se (šipky i se zablikáním), až fotka
   dosedne do displeje. */
.zh-fotak.zh-scena--sosani .zh-fotak__potvrdit,
.zh-fotak.zh-scena--sosani .zh-fotak__sipka,
.zh-fotak.zh-scena--sosani .zh-fotak__af {
  opacity: 0;
  pointer-events: none;
  animation: none;
  transition: opacity 0.2s ease;
}
/* Spoušť: kovový kroužek v barvách šipek, uprostřed korálová hlava, která se
   při stisku zamáčkne. */
.zh-fotak__spoust {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: var(--zh-spoust);
  height: var(--zh-spoust);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #2C2036 0%, #120818 58%, #080410 100%);
  box-shadow: inset 0 0 0 2px rgba(250, 129, 185, 0.8), inset 0 -4px 8px rgba(0, 0, 0, 0.55), 0 0 18px rgba(250, 129, 185, 0.38), 0 8px 18px rgba(8, 4, 16, 0.7);
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.zh-fotak__spoust-hlava {
  width: 56%;
  height: 56%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FDE0B5 0%, #FAB08E 34%, #FA81B9 72%, #C95A8E 100%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.65), inset 0 -2px 4px rgba(87, 51, 91, 0.7);
  transition: scale 0.15s ease, box-shadow 0.25s ease;
}
/* Kroužek kolem spouště, který se při pobídce rozbíhá ven. */
.zh-fotak__spoust::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(250, 129, 185, 0.7);
  opacity: 0;
  pointer-events: none;
}
/* Zlatá hodinka 140: spoušť po zamčení foťáku zabliká jen jednou. */
.zh-fotak--zive .zh-fotak__spoust {
  animation: zh-sipka-blik 0.8s ease 1;
}
.zh-fotak.zh-fotak--pobidka .zh-fotak__spoust,
body.zh .zh-fotak__potvrdit:focus-visible .zh-fotak__spoust {
  background: radial-gradient(circle at 34% 28%, #4A2A48 0%, #2A1430 58%, #120818 100%);
  box-shadow: inset 0 0 0 2px #FDE0B5, inset 0 -4px 8px rgba(0, 0, 0, 0.45), 0 0 34px rgba(250, 129, 185, 0.75), 0 8px 18px rgba(8, 4, 16, 0.7);
}
/* Zlatá hodinka 140: jedno přepnutí fotky, jedna vlna (třídu restartuje JS). */
.zh-fotak.zh-fotak--vlna .zh-fotak__spoust::after {
  animation: zh-spoust-vlna 0.9s ease-out 1;
}
@keyframes zh-spoust-vlna {
  0% {
    opacity: 0.9;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}
@media (hover: hover) {
  .zh-fotak__potvrdit:hover .zh-fotak__spoust {
    background: radial-gradient(circle at 34% 28%, #4A2A48 0%, #2A1430 58%, #120818 100%);
    box-shadow: inset 0 0 0 2px #FDE0B5, inset 0 -4px 8px rgba(0, 0, 0, 0.45), 0 0 34px rgba(250, 129, 185, 0.75), 0 8px 18px rgba(8, 4, 16, 0.7);
  }
  /* namáčknutí: hlava se pod prstem trochu sníží */
  .zh-fotak__potvrdit:hover .zh-fotak__spoust-hlava {
    scale: 0.9399999999999999;
  }
}
.zh-fotak__potvrdit:active .zh-fotak__spoust-hlava,
.zh-fotak--cvak .zh-fotak__spoust-hlava {
  scale: 0.84;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 -1px 3px rgba(87, 51, 91, 0.8);
}
/* Popisek: co spoušť udělá a vybrané auto; stojí na fotce, proto stín pod písmem. */
.zh-fotak__popisek {
  display: grid;
  gap: 4px;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(8, 4, 16, 0.95), 0 0 14px rgba(8, 4, 16, 0.9);
}
.zh-fotak__akce {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #FA81B9;
}
.zh-fotak__co {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: #FDE0B5;
}
/* ─────────────────────────────  mobil  ───────────────────────────── */
/* Bod 79: foťák nahoře, dole karta kroku 1 z jádra; scéna je stejně krátká
   jako na PC.
   Zlatá hodinka 107: mezi foťákem a kartou zůstane vidět auto. Foťák si dole
   nechá místo na kartu podle její skutečné výšky (jádro ji změří do
   --zh-karta-v, do té doby odhad) a na mezeru; na nízkém okně (velká lišta
   prohlížeče) se zmenší foťák, ne mezery. */
@media (max-width: 767px) {
  .zh-fotak {
    --zh-fotak-v: min(calc(100svh - var(--zh-karta-v, 200px) - 72px), 60svh, 500px);
    --zh-fotak-x: calc(50% - var(--zh-fotak-s) / 2);
    --zh-fotak-y: max(12px, 2.5svh);
  }
  /* Zlatá hodinka 152: spoušť nevisí pod foťákem, sedí na jeho boku vpravo
     jako na PC, kde ji má opravdový foťák a kam dosáhne palec pravé ruky. */
  /* Zlatá hodinka 128: na úzkém telefonu (320 px) by spoušť i popisek pod ní
     lícovaly s hranou okna; drží od ní stejný odstup jako tlačítko hudby. */
  .zh-fotak__potvrdit {
    --zh-spoust: 52px;
    left: min(calc(var(--zh-fotak-x) + var(--zh-fotak-s) * 0.985), calc(100% - var(--zh-spoust) / 2 - 14px));
    transform: translateX(-50%);
  }
  /* Zlatá hodinka 181: pod spouští co udělá i vybrané auto, jako na PC.
     Popisek stojí mimo tok tlačítka a lícuje vpravo s hranou spouště, takže
     delší název auta (i anglický text spouště) roste doleva do foťáku, ne ven
     z okna, a při přepnutí auta hrana nikam neuskočí. */
  .zh-fotak__popisek {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    justify-items: end;
    text-align: right;
  }
  /* prostrkání za posledním písmenem nepřečnívá hranu spouště */
  .zh-fotak__akce {
    margin-right: -0.28em;
  }
  /* údaje na malém displeji: menší písmo, ať se řádek nezalomí */
  .zh-fotak__hud {
    font-size: 8px;
    letter-spacing: 0.03em;
  }
  .zh-fotak__hud-radek {
    left: 5px;
    right: 5px;
    gap: 4px;
    white-space: nowrap;
  }
}