/* ==========================================================================
   J&J Barber Shop | Home Desktop v1.5
   Production port of the Claude Design source (assets/tokens.css = tokens).
   ========================================================================== */

:root {
  /* surfaces */
  --ink: #0B0B0C;
  --concrete: #17181A;
  --graphite: #222427;
  --seam: #2E3034;
  --bone: #F1EDE4;
  --bone-2: #E7E1D6;
  --bone-hi: #FFFDF8;
  --bone-row: #E9E4D9;

  /* text */
  --text-hi: #F4F1EA;
  --text-dark: #0B0B0C;
  --text-dark-2: #4A4B4F;

  /* accent */
  --amber: #E3A93B;
  --amber-hi: #F2BE58;
  --amber-deep: #B9821E;
  --amber-ink: #1A1206;

  /* real-world nods */
  --enamel-red: #A31F24;
  --enamel-blue: #1E3F8A;
  --led-green: #3FD07A;
  --error: #D9534F;

  /* type */
  --font-display: 'Sofia Sans Extra Condensed', 'Arial Narrow', sans-serif;
  --font-text: 'Sofia Sans', Helvetica, Arial, sans-serif;
  --font-serif: 'Newsreader', Georgia, serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* layout */
  --container: 1360px;
  /* viewport-fit=cover: na iPhonu na šířku nesmí text sekcí zajet pod výřez / Dynamic Island */
  --gutter: max(clamp(20px, 4vw, 64px), env(safe-area-inset-left), env(safe-area-inset-right));
  --nav-h: 72px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---- base ---------------------------------------------------------------- */

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text-hi);
  font: 17px/1.5 var(--font-text);
}

a { color: var(--amber); }
a:hover { color: var(--amber-hi); }
button { font: inherit; cursor: pointer; }
/* NOTE: no global `img{max-width:100%}`, the design relies on intrinsic image
   widths (founder cutouts overflow their column on purpose, section clips them).
   Constraints are set per component instead. */
::selection { background: var(--amber); color: #1A1206; }

.grain {
  position: absolute; inset: 0; opacity: .06; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}

.amp { font-family: var(--font-serif); font-style: italic; font-weight: 400; text-transform: none; color: var(--amber); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- animations ---------------------------------------------------------- */

@keyframes jjRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes jjRiseHero { from { opacity: .01; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes jjPop { from { opacity: 0; transform: scale(.98); } to { opacity: 1; transform: none; } }
@keyframes jjPulse { 0%, 100% { box-shadow: 0 0 10px var(--led-green); } 50% { box-shadow: 0 0 2px var(--led-green); } }
@keyframes jjMarqL { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes jjMarqR { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes jjKB { from { transform: scale(1); } to { transform: scale(1.06); } }

/* ---- reveal -------------------------------------------------------------- */

.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
/* Hero najíždí čistě v CSS hned při prvním vykreslení: H1 je LCP a nesmí čekat
   na app.js ani na intro (to ho při první návštěvě jen překryje overlayem).
   jjRiseHero začíná na 1 % krytí, ne na nule: prvek s nulovou průhledností Chrome do LCP
   nezapočte a fade běží na compositoru bez dalšího vykreslení, takže by LCP zapsal až
   o ~0,8 s později (telefon, Slow 4G), přestože text je vidět ~0,2 s po prvním vykreslení. */
.reveal--hero { opacity: 1; transform: none; transition: none; animation: jjRiseHero .42s var(--ease) both; }
.reveal--hero[data-reveal='1'] { animation-delay: 60ms; }
.reveal--hero[data-reveal='2'] { animation-delay: 120ms; }
.reveal--hero[data-reveal='3'] { animation-delay: 180ms; }
.reveal--lift { transform: translateY(40px); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---- headings ------------------------------------------------------------ */

.h-display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: -.01em;
  text-wrap: balance;   /* velké nadpisy bez osiřelého slova na posledním řádku */
}

/* ---- buttons ------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap; flex: 0 0 auto;
  border: 0; border-radius: 2px;
  text-decoration: none;
  font-family: var(--font-display); font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  transition: transform .18s ease, background .2s ease, box-shadow .2s ease;
}
.btn svg { transition: transform .25s ease; }
.btn:hover svg { transform: translateX(4px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; gap: 10px; }
.btn--md { height: 52px; padding: 0 28px; font-size: 17px; gap: 14px; }
.btn--lg { height: 60px; padding: 0 34px; font-size: 19px; gap: 14px; }

.btn--bone { background: var(--bone); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .8); }
.btn--bone.btn--sm { box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7); }
.btn--bone:hover { background: var(--bone-hi); color: var(--ink); transform: translateY(-1px); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .85); }

.btn--ink { background: var(--ink); color: var(--bone); box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .6); }
.btn--ink:hover { background: #1F2124; color: var(--bone); transform: translateY(-1px); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7); }

/* ---- underline links ----------------------------------------------------- */

.lnk {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 0 0 6px;
  border: 0; background: none;
  font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  color: var(--text-hi); white-space: nowrap;
}
.lnk::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: rgba(244, 241, 234, .45);
  transition: height .2s ease, background .2s ease;
}
.lnk:hover { color: var(--text-hi); }
.lnk:hover::after { height: 2px; background: var(--amber); }
.lnk svg { transition: transform .25s ease; }
.lnk:hover svg { transform: translateX(4px); }
.lnk--down:hover svg { transform: translateY(3px); }

.lnk--light { color: var(--ink); }
.lnk--light::after { background: rgba(11, 11, 12, .35); }
.lnk--light:hover { color: var(--ink); }
.lnk--light:hover::after { background: var(--amber-deep); }

.link-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(244, 241, 234, .9); text-decoration: none; white-space: nowrap;
  transition: color .18s;
}
.link-ghost:hover { color: #fff; }

/* ---- status chip --------------------------------------------------------- */

.chip { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.chip-dot {
  width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box;
  background: transparent; border: 1px solid rgba(244, 241, 234, .5);
}
.chip-dot.is-open { background: var(--led-green); border-color: var(--led-green); animation: jjPulse 2s ease-in-out infinite; }
.hero.is-covered .chip-dot { animation-play-state: paused; }   /* hero pod obsahem (app.js), LED nemusí pulzovat */

/* ==========================================================================
   NAV
   ========================================================================== */

.scrim {
  position: fixed; top: 0; left: 0; right: 0; height: 160px; z-index: 49;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(11, 11, 12, .62), rgba(11, 11, 12, 0));
  transition: opacity .3s;
}
body.is-docked .scrim { opacity: 0; }

.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
  column-gap: 24px; align-items: center;
  padding: 0 var(--gutter); box-sizing: border-box;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .2s, border-color .2s;
}
body.is-docked .nav {
  background: rgba(11, 11, 12, .92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-bottom-color: var(--seam);
}

.nav-mid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: clamp(10px, 2.2vw, 32px);
  min-width: 0; font-size: clamp(15px, 1.2vw, 17px);
}
.nav-group { display: flex; align-items: center; gap: clamp(10px, 2.2vw, 32px); min-width: 0; }
.nav-group--l { justify-content: flex-end; }
.nav-group--r { justify-content: flex-start; }
.nav-right { display: flex; justify-content: flex-end; }
/* Logo v liště, hamburger a panel menu patří jen mobilu (viz blok MOBIL dole). */
.nav-left { min-width: 0; }
.nav-home, .nav-burger, .mnav { display: none; }

.navlink {
  position: relative;
  font-family: var(--font-display); font-weight: 700; font-size: inherit;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: rgba(244, 241, 234, .92);
  padding: 4px 0; white-space: nowrap;
  transition: color .18s;
}
.navlink::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 0; background: var(--amber); transition: height .2s ease;
}
.navlink:hover { color: rgba(244, 241, 234, .92); }
.navlink:hover::after { height: 2px; }
.navlink.is-active { color: var(--amber); }

.nav-slot {
  display: flex; align-items: center; justify-content: center;
  width: 176px; height: 44px; flex: 0 0 auto;
}
.nav-slot img { width: 132px; flex: 0 0 auto; height: auto; display: block; opacity: 0; transition: opacity .2s; }
body.is-docked .nav-slot img { opacity: 1; }

.fly-logo {
  position: fixed; left: 0; top: 0; width: 300px; height: auto; z-index: 60;
  pointer-events: none; transform-origin: 50% 50%; will-change: transform; opacity: 0;
}

/* ---- intro --------------------------------------------------------------- */

.intro {
  position: fixed; inset: 0; z-index: 100; background: var(--ink);
  transition: opacity .4s ease; cursor: pointer;
}
.intro.is-fly { opacity: 0; }
/* První návštěva: intro kryje hero už od prvního vykreslení (třídu intro-on dává inline
   skript v <head> podle stejných podmínek jako startIntro v app.js), jinak by hotový hero
   na okamžik problikl. Tah knírku je skrytý, dokud mu app.js nenastaví styl (kreslení). */
html.intro-on:not(.reveal-all) .intro[hidden] { display: block; }
.intro path:not([style]) { visibility: hidden; }
.intro svg {
  position: absolute; left: 50%; top: 50%; width: 240px; height: auto;
  margin: -34px 0 0 -120px; overflow: visible;
  transform-origin: 50% 50%; transition: transform .45s var(--ease);
}
.intro path { filter: drop-shadow(0 0 24px rgba(227, 169, 59, .8)); }

/* ==========================================================================
   01 HERO
   ========================================================================== */

.hero {
  position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; z-index: 0;
  overflow: hidden; background: var(--ink); display: grid; place-items: center;
}
.hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--ink); }
.hero-media video,
.hero-media .hero-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-poster { opacity: 1; transition: opacity .3s linear; pointer-events: none; z-index: 1; } /* poster = LCP a přesně první snímek smyčky videa */
.hero-poster.is-off { opacity: 0; }   /* app.js, jakmile video hraje; zpátky se už neukazuje (smyčka se prolíná sama) */
.hero-vignette { position: absolute; inset: 0; background: radial-gradient(70vw 64vh at 50% 50%, rgba(11, 11, 12, .60), rgba(11, 11, 12, 0) 74%); }
.hero-foot-grad { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, 0) 38%); }

.hero-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 72px var(--gutter) 96px; box-sizing: border-box;
  width: 100%; max-width: var(--container);
  transform: translateY(-3vh);
}
.hero-logo { width: 300px; max-width: 60vw; height: auto; display: block; visibility: hidden; }
.hero-stack { display: flex; flex-direction: column; align-items: center; will-change: transform, opacity; }

.hero-h1-wrap { margin-top: 44px; }
.hero-lead-wrap { margin-top: 24px; }
.hero h1 { margin: 0; color: var(--text-hi); text-shadow: 0 2px 24px rgba(11, 11, 12, .55); }
.hero-eyebrow {
  display: block; font-family: var(--font-text); font-weight: 600; font-size: 18px;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(244, 241, 234, .8);
  margin-bottom: 12px;
}
.hero-title {
  display: block; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; line-height: .9; letter-spacing: -.015em;
  font-size: clamp(72px, 8vw, 128px);
}
.hero-title > span { display: block; }  /* jen přímí potomci, vnořený & musí zůstat inline (dle designu) */
.hero-title .amp { display: inline; font-size: 1.05em; line-height: 0; }

.hero-lead {
  margin: 0; max-width: 46ch; font-size: 19px; line-height: 1.45;
  color: rgba(244, 241, 234, .96); text-wrap: pretty;
  text-shadow: 0 1px 3px rgba(11, 11, 12, .7), 0 2px 20px rgba(11, 11, 12, .8);
}
.hero-cta { margin-top: 32px; width: 100%; display: flex; gap: 32px; align-items: center; flex-wrap: wrap; justify-content: center; }

.hero-foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; z-index: 2;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: 14px; color: rgba(244, 241, 234, .78);
}
.hero-foot-addr {
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}

/* main scrolls over the sticky hero */
.main { position: relative; z-index: 1; background: var(--bone); }

/* ==========================================================================
   02 KDO JSME
   ========================================================================== */

.kdo { position: relative; height: 180vh; background: var(--bone); }   /* 260vh byla nejdelší hluchá pasáž webu; scroll na rozsvícení věty zkrácen ze 160vh na 80vh */
.kdo-sticky {
  position: sticky; top: 0; min-height: 100vh; min-height: 100svh; overflow: hidden; background: var(--bone);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end;
}
.paper {
  position: absolute; inset: 0; pointer-events: none;
  background-image: url('/assets/web/textures/texture-bone-paper.webp');
  background-size: 1024px; opacity: .05; mix-blend-mode: multiply;
}
.kdo-copy { position: relative; grid-column: 1 / 8; align-self: center; padding: 120px 0 120px var(--gutter); }
.manifest {
  margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: .96; letter-spacing: -.01em;
  font-size: clamp(36px, min(4.1vw, 6.6vh), 66px);
  max-width: min(45vw, 620px);
  color: var(--ink); text-align: left;
}
.manifest-line { display: block; text-wrap: pretty; }
.manifest-line span {
  display: inline-block; margin-right: .26em;
  color: rgba(11, 11, 12, .26); transition: color .35s ease;
  /* světlá aura drží slova čitelná i tam, kde přebíhají přes tmavé výřezy zakladatelů */
  text-shadow: 0 0 14px rgba(244, 241, 234, .9), 0 0 4px rgba(244, 241, 234, .7);
}

.manifest-tail { margin-top: 36px; opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.manifest-tail.is-in { opacity: 1; transform: none; }
.manifest-tail p { margin: 0; max-width: 52ch; font-size: 19px; line-height: 1.5; color: rgba(11, 11, 12, .72); text-wrap: pretty; }
.manifest-meta { margin: 24px 0 0 !important; font-weight: 600; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: rgba(11, 11, 12, .6); }
.manifest-tail .lnk { margin-top: 28px; padding-bottom: 6px; }

.founders {
  position: relative; grid-column: 8 / 13; align-self: end;
  display: flex; align-items: flex-end; justify-content: flex-end; gap: 24px;
  padding: 120px var(--gutter) 0 0; min-height: 100vh; min-height: 100svh; box-sizing: border-box; will-change: transform;
}
.founder { position: relative; flex: 0 0 auto; }
.founder img { position: relative; height: min(76vh, 820px); width: auto; display: block; transform-origin: bottom; }
.founder-shadow {
  position: absolute !important; left: 0; bottom: 0; height: min(76vh, 820px); width: auto; display: block;
  opacity: .14; filter: brightness(0) blur(14px);
  transform: skewX(28deg) scaleY(.35); transform-origin: 50% 100%; pointer-events: none;
}
.founder--pepa { z-index: 1; }
.founder--pepa img { transform: scale(.97); }
.founder--pepa .founder-shadow { transform: scale(.97) skewX(28deg) scaleY(.35); }
.founder--kuba { z-index: 2; }
.founder-ground {
  position: absolute; left: 10%; right: 10%; bottom: -10px; height: 24px;
  background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(11, 11, 12, .26), rgba(11, 11, 12, 0) 70%);
}
/* Popisek patří ke své figuře. Dřív byl celý řádek absolutně u levého okraje
   .founders, jenže fotky z kontejneru přetékají doleva, takže obě jména seděla
   pohromadě vlevo a pod pravým zakladatelem nebylo nic. */
.founder-cap {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  text-align: center; white-space: nowrap; pointer-events: none; z-index: 3;
}
.founder-cap p:first-child {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink); line-height: 1;
}
.founder-cap p + p { margin: 4px 0 0; font-size: 14px; color: rgba(11, 11, 12, .6); }

/* ==========================================================================
   03 POBOČKY
   ========================================================================== */

.pobocky { position: relative; height: 170vh; background: var(--ink); }
.pobocky-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; }
.pobocky-h2 {
  position: absolute; left: 0; right: 0; top: 104px; z-index: 5;
  text-align: center; pointer-events: none; padding: 0 20px;
  font-size: clamp(56px, 7vw, 112px); color: var(--text-hi);
  text-shadow: 0 10px 40px rgba(0, 0, 0, .6);
}

.half { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex .6s ease-in-out; will-change: transform; }
/* Panel se rozšíří, až když na něm myš chvíli zůstane (transition-delay jen při najetí). Rychlý přejezd nic nedělá. */
@media (hover: hover) { .half:hover { flex: 1.38 1 0; transition-delay: .35s; } }   /* na dotyku (iPad) by ťuknutí panel roztáhlo */
.half > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* Opacitu obou vrstev řídí rAF smyčka (app.js → paintHalves): scroll sekcí
   odkryje výlohu a pak interiér, hover je jen zkratka. Bez JS zůstane ulice. */
.half-stage1 { opacity: 0; transition: opacity 1.6s cubic-bezier(.4, 0, .2, 1); }
/* app.js setupHalves: ulice a výloha se po chvilce střídají dokola (.is-s1 = výloha) */
.half.is-s1 .half-stage1 { opacity: 1; }
.half-veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 11, 12, .92) 0%, rgba(11, 11, 12, .75) 30%, rgba(11, 11, 12, 0) 58%), linear-gradient(to bottom, rgba(11, 11, 12, .62) 0%, rgba(11, 11, 12, 0) 30%); }   /* nahoře pod H2 sekce, jinak se tloukl s cedulí na výloze */

.half-info {
  position: absolute; bottom: 48px; z-index: 3;
  left: max(clamp(24px, 4vw, 64px), env(safe-area-inset-left)); right: max(clamp(24px, 4vw, 64px), env(safe-area-inset-right));
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
  gap: 24px clamp(24px, 3vw, 48px); align-items: end;
}
.half-signs { width: min(300px, 100%); }
.half-signs .sign { width: 100%; display: block; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .65)); will-change: transform; }
.half-signs .plates { width: 176px; max-width: 100%; display: block; margin-top: 14px; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .6)); }

.half-body { min-width: 0; }
.half-body h3 {
  margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: .94; letter-spacing: -.01em; font-size: 30px; color: var(--text-hi);
}
.half-addr { margin: 0; font-size: 17px; color: rgba(244, 241, 234, .92); }
.half-meta { margin: 10px 0 18px; display: flex; gap: 28px; flex-wrap: wrap; font-size: 15px; color: rgba(244, 241, 234, .72); }
.half-meta a, .half-meta span { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; white-space: nowrap; }
.half-meta a:hover { color: var(--text-hi); }

.hours {
  display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 22px; row-gap: 6px;
  font-size: 16px; font-variant-numeric: tabular-nums; margin-bottom: 24px;
}
.hours .d { display: inline-flex; align-items: center; gap: 10px; color: rgba(244, 241, 234, .6); }
.hours .d.is-today { color: var(--text-hi); }
.hours .t { color: rgba(244, 241, 234, .92); }
.hours .mark { width: 7px; height: 7px; border-radius: 50%; background: var(--led-green); box-shadow: 0 0 8px var(--led-green); opacity: 0; }
.hours .d.is-today .mark { opacity: 1; }

.half-actions { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: transparent; z-index: 4; transition: background .4s ease; pointer-events: none; }

/* ==========================================================================
   04 CENÍK · účtenka
   „Všechno v ceně“ dokládá pokladní účtenka: klasický střih je jediná placená
   položka, každá služba v ceně stojí 0 Kč a CELKEM 590 Kč je přejeté jantarovým
   zvýrazňovačem. Ostatní služby jsou druhá, kratší účtenka. Obě leží na pultu.
   Třídy mají prefix uc-. Pořadí v DOM (čtečky i Tab): nadpis a perex → účtenky
   → patička. Na desktopu jsou nadpis i patička v levém sloupci, který jede
   s účtenkou (sticky řídí app.js → stickReceiptColumn, bez JS stojí).
   ========================================================================== */

/* IBM Plex Mono (--font-mono) potřebuje jen tahle sekce pod ohybem, proto se
   deklaruje tady a nepreloaduje. Soubory a unicode-range viz assets/fonts/fonts.css. */
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- sekce a mřížka (mobil: jeden sloupec v pořadí DOM) ------------------ */
.cenik {
  --uc-top: calc(var(--nav-h) + 24px);   /* kde se na desktopu zastaví levý sloupec */
  --uc-gap: 40px;                         /* perex → patička v levém sloupci */
  position: relative; overflow-x: clip;
  background: var(--bone); color: var(--ink);
  padding: clamp(80px, 9vw, 136px) 0 clamp(88px, 9vw, 144px);
}
.cenik :where(*, *::before, *::after) { box-sizing: border-box; }
/* Tab skáče z konce hlavní účtenky nahoru na druhou (a Shift+Tab zpět). Prohlížeč
   by fokus doroloval jen k hraně okna, tedy pod fixní lištu (WCAG 2.4.11). */
.cenik :is(a, button) { scroll-margin-top: calc(var(--nav-h) + 24px); scroll-margin-bottom: 24px; }
/* Při rychlém Tabu (< ~250 ms) se plynulé rolování k předchozímu fokusu nestihne
   dokončit, prohlížeč nový cíl vyhodnotí jako viditelný a starý posun ho odveze
   pod lištu. S klávesnicí uvnitř ceníku proto roluje okamžitě. */
html:has(.cenik :focus-visible) { scroll-behavior: auto; }
.uc-inner {
  box-sizing: content-box; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "copy" "tray" "foot";
}
.uc-copy { grid-area: copy; min-width: 0; }
.uc-tray { grid-area: tray; }
.uc-foot { grid-area: foot; min-width: 0; }

/* ---- nadpis a perex ------------------------------------------------------ */
.uc-h2 { font-size: clamp(56px, 17vw, 84px); line-height: .92; color: var(--ink); }
.uc-l { display: block; }
.uc-lead {
  margin: 22px 0 0; max-width: 34ch;
  font-size: 18px; line-height: 1.45; color: rgba(11, 11, 12, .8); text-wrap: pretty;
}
/* jediný „statement line“ v Newsreader italic; ink místo jantaru kvůli kontrastu */
.uc-lead em { font-family: var(--font-serif); font-style: italic; font-size: 1.08em; color: var(--ink); }

/* ---- pult ----------------------------------------------------------------
   Prototyp měl černou kůži. O dvě sekce níž (#poukaz) ale leží dárkový voucher
   s logem na stejné kůži a „papír s logem na kůži“ dvakrát za sebou působil jako
   opakování. Účtenky proto leží na pultu v tónu concrete/graphite: textura
   mikrocementu (16 kB) ztmavená k --concrete, nahoře světlo, dole stín. */
.uc-tray {
  position: relative; isolation: isolate;
  margin: 36px calc(-1 * var(--gutter)) 0;
  padding: 26px 12px 36px;
  background:
    linear-gradient(rgba(23, 24, 26, .44), rgba(23, 24, 26, .44)),
    url(/assets/web/textures/texture-microcement.webp) center / cover no-repeat var(--concrete);
  box-shadow: inset 0 1px 0 rgba(244, 241, 234, .08), 0 40px 70px -44px rgba(0, 0, 0, .7);
}
.uc-tray::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(120% 60% at 30% 0%, rgba(244, 241, 234, .07), rgba(244, 241, 234, 0) 60%),
    linear-gradient(to top, rgba(11, 11, 12, .4), rgba(11, 11, 12, 0) 45%);
}
.uc-slips {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px;
  max-width: 440px; margin: 0 auto;
}

/* ---- účtenka: termopapír -------------------------------------------------- */
.uc-slip {
  position: relative; min-width: 0;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .55)) drop-shadow(0 22px 26px rgba(0, 0, 0, .5));
  transition: transform .5s var(--ease);
}
.uc-slip--main { --rot: -.6deg; z-index: 2; }
.uc-slip--rest { --rot: .7deg; }

.uc-paper {
  --zz: 11px; /* šířka zubu utržené hrany */
  position: relative; isolation: isolate;
  padding: 28px 18px 30px;
  background: var(--bone-hi); color: var(--text-dark);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.55;
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x;
}
.uc-paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(/assets/web/textures/texture-bone-paper.webp) center / 420px repeat;
  mix-blend-mode: multiply; opacity: .55;
}
.uc-paper :where(p, h3, h4, ul) { margin: 0; }
.uc-paper :where(ul) { padding: 0; list-style: none; }

/* hlavička prodejny: na mobilu jen logo a jeden řádek, adresy a čárový kód od 641 px */
.uc-head { text-align: center; }
.uc-logo { display: block; width: 148px; max-width: 70%; height: auto; margin: 0 auto; filter: brightness(0); opacity: .92; }
.uc-trade, .uc-addr { display: none; }
.uc-trade { margin-top: 12px; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.uc-addr { margin-top: 8px; font-size: 12px; line-height: 1.6; color: var(--text-dark-2); }
.uc-addr b { font-weight: 600; color: var(--text-dark); }
.uc-branch { margin-top: 10px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-dark-2); }

.uc-rule { height: 0; margin: 14px 0; border: 0; border-top: 1.5px dashed rgba(18, 18, 19, .42); }
.uc-rule--dbl { margin: 12px 0; border-top: 4px double rgba(18, 18, 19, .8); }

/* hlavní položka */
.uc-item-name {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(40px, 12vw, 54px); line-height: .9; letter-spacing: -.005em;
}
.uc-item-name a {
  color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  text-decoration-color: transparent; transition: text-decoration-color .2s;
}
.uc-item-name a:focus-visible {
  outline: 2px solid var(--amber-deep); outline-offset: 3px; border-radius: 2px; text-decoration-color: var(--amber-deep);
}
/* na dotyku najetí není: tiché podtržení říká, že je to odkaz (druhá účtenka má šipky) */
@media (hover: none) {
  .uc-item-name a:not(:focus-visible) { text-decoration-color: rgba(18, 18, 19, .35); }
}

/* řádky s tečkami */
.uc-ln { display: flex; align-items: baseline; gap: 5px; }
.uc-ln-name { flex: 0 1 auto; min-width: 0; }
.uc-ln-dots { flex: 1 1 0; min-width: 10px; overflow: hidden; white-space: nowrap; color: rgba(18, 18, 19, .38); }
.uc-ln-dots::before { content: "......................................................................................................................................"; }
.uc-ln-price { flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.uc-ln--qty { margin-top: 8px; color: var(--text-dark-2); }
.uc-ln--qty .uc-ln-price { color: var(--text-dark); font-weight: 600; }

.uc-incl-label { margin: 14px 0 4px; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dark-2); }
.uc-incl .uc-ln-name { padding-left: 2ch; text-indent: -2ch; } /* kdyby se řádek zalomil, pokračuje pod textem, ne pod „+“ */
.uc-incl .uc-ln-name::before { content: "+ "; content: "+ " / ""; color: rgba(18, 18, 19, .64); }
/* nuly jsou tišší než 590: regular, text-dark-2 na 82 % (≈ 5:1 na papíře, AA) */
.uc-incl .uc-ln-price, .uc-ln--extra .uc-ln-price { font-weight: 400; color: rgba(74, 75, 79, .82); }

/* celkem: jediná částka přejetá zvýrazňovačem */
/* S vlastním prostrkáním textu (WCAG 1.4.12) se CELKEM a 590 Kč do řádku nevešly a maska
   papíru uřízla „Kč“; částka proto smí spadnout na další řádek (margin-left: auto ji drží vpravo). */
.uc-total {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 2px 0 0; font-family: var(--font-display); font-weight: 800; line-height: .9;
}
.uc-total-label { font-size: clamp(38px, 11vw, 50px); text-transform: uppercase; letter-spacing: .01em; }
.uc-total-sum {
  position: relative; margin-left: auto;
  font-size: clamp(50px, 15vw, 68px); letter-spacing: -.015em; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.uc-total-sum span { font-size: .5em; letter-spacing: 0; }
.uc-total-sum::before {
  content: ""; position: absolute; z-index: -1;
  left: -.14em; right: -.08em; top: .16em; bottom: -.02em;
  background: rgba(227, 169, 59, .66); mix-blend-mode: multiply;
  clip-path: polygon(1.5% 12%, 100% 0, 98.5% 90%, 0 100%);
  transform-origin: 0 50%;
}
.uc-ln--extra { margin-top: 8px; color: var(--text-dark-2); text-transform: uppercase; letter-spacing: .06em; }
.uc-ln--extra .uc-ln-price { text-transform: none; letter-spacing: 0; }

/* tlačítko na účtence: sdílené .btn.btn--ink, jen roztažené na šířku papíru */
.uc-cta.btn--lg { display: flex; width: 100%; height: 56px; margin-top: 22px; padding: 0 20px; justify-content: space-between; }
/* na papíře a béžové je jantar pro fokus málo kontrastní (2 : 1), proto amber-deep */
.cenik .btn:focus-visible, .cenik .lnk:focus-visible { outline: 2px solid var(--amber-deep); outline-offset: 3px; }
/* patička leží na bone, kde má i amber-deep jen 2,86 : 1; ink tam má ~17 : 1 (WCAG 1.4.11) */
.uc-foot .btn:focus-visible, .uc-foot .lnk:focus-visible { outline-color: var(--ink); }

.uc-thanks { margin-top: 18px; text-align: center; color: var(--text-dark-2); }
.uc-barcode { display: none; width: 72%; height: 34px; margin: 14px auto 0; color: var(--text-dark); }

/* ---- druhá účtenka: další služby ------------------------------------------ */
.uc-rest-title {
  text-align: center; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: 30px; line-height: .95; letter-spacing: .02em;
}
.uc-grp {
  display: flex; align-items: center; gap: 10px; margin: 18px 0 2px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--text-dark-2); white-space: nowrap;
}
.uc-grp::before, .uc-grp::after { content: ""; flex: 1 1 0; border-top: 1.5px dashed rgba(18, 18, 19, .32); }
/* celá položka je odkaz (roztažené a::after), šipka za cenou to říká i na dotyku */
.uc-rest-item { position: relative; padding: 12px 0; }
.uc-rest-item + .uc-rest-item { border-top: 1px dotted rgba(18, 18, 19, .34); }
.uc-rest-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline;
  margin: 0 -5px; padding: 2px 5px 1px;
  font-family: var(--font-display); font-weight: 800; line-height: 1;
  /* zvýrazňovač jen na interaktivních položkách: najetí nebo fokus */
  background: linear-gradient(rgba(227, 169, 59, .36), rgba(227, 169, 59, .36)) 0 60% / 0 80% no-repeat;
  transition: background-size .38s var(--ease);
}
.uc-rest-name { font-size: 24px; text-transform: uppercase; letter-spacing: 0; }
.uc-rest-name a { color: inherit; text-decoration: none; }
.uc-rest-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 2px; }
.uc-rest-name a:focus-visible { outline: none; }
.uc-rest-name a:focus-visible::after { outline: 2px solid var(--amber-deep); outline-offset: 4px; }
/* Jen fokus z klávesnice. Po ťuknutí a návratu Zpět (bfcache) zůstává odkaz fokusovaný
   a :focus-within nechával položku zvýrazněnou, jako by se na ni pořád ukazovalo. */
.uc-rest-item:has(a:focus-visible) .uc-rest-row { background-size: 100% 80%; }
.uc-rest-price {
  display: inline-flex; align-items: baseline; justify-self: end;
  font-size: 24px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.uc-rest-price span { font-size: max(14px, .6em); } /* od 800 px je cena 22 px a .6em by dalo 13,2 px */
.uc-go { flex: none; align-self: center; margin-left: 7px; color: var(--text-dark-2); transition: transform .25s ease; }
.uc-rest-sum { margin-top: 6px; font-size: 14px; color: var(--text-dark); }
.uc-rest-desc { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-dark-2); text-wrap: pretty; }

/* ---- patička (na desktopu spodek levého sloupce) -------------------------- */
.uc-foot { margin-top: 36px; }
.uc-foot-cta.btn--lg { display: flex; width: 100%; padding: 0 22px; justify-content: space-between; }
.uc-valid { margin-top: 22px; }
.uc-valid p { margin: 0; font-size: 15.5px; line-height: 1.4; color: rgba(11, 11, 12, .74); }
.uc-valid .uc-where {
  margin-top: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(11, 11, 12, .66);
}
.uc-links { display: flex; flex-wrap: wrap; gap: 18px 32px; margin-top: 22px; }
/* Dokud je vidět cookie karta, doroluje Tab prvek nad ni celý web: html dostane
   scroll-padding-bottom o výšce karty (viz COOKIE LIŠTA), 24 px výš drží scroll-margin. */

/* ---- tisk: řádky naskočí postupně (app.js → armReceiptPrint) -------------
   Skrývá se jen text položek, hlavička a linky. Ceny, CELKEM i tlačítko jsou
   vidět vždy. Třídu is-armed dává jen JS, a jen když je účtenka při načtení
   pod ohybem; bez JS, s omezeným pohybem nebo při odkazu #cenik se netiskne. */
.uc-slip.is-armed .uc-pr:not(.uc-ln),
.uc-slip.is-armed .uc-ln.uc-pr > :not(.uc-ln-price) { opacity: 0; }
.uc-slip.is-armed.is-printed .uc-pr:not(.uc-ln),
.uc-slip.is-armed.is-printed .uc-ln.uc-pr > :not(.uc-ln-price) {
  opacity: 1; transition: opacity .09s linear;
  transition-delay: calc(var(--d0, 0ms) + var(--i, 0) * var(--step, 30ms));
}
.uc-slip.is-armed .uc-total-sum::before { transform: scaleX(0); }
.uc-slip.is-armed.is-printed .uc-total-sum::before { transform: scaleX(1); transition: transform .4s var(--ease) .22s; }

/* ---- nejužší telefony (320 px): o 20 px víc papíru, ať se nejdelší řádek
   „+ odstranění chloupků z uší … 0 Kč“ vejde na jeden řádek -------------- */
@media (max-width: 359px) {
  .uc-tray { padding-inline: 6px; }
  .uc-paper { padding-inline: 14px; }
  .uc-ln-dots { min-width: 6px; }
}

/* ---- větší telefon / tablet ---------------------------------------------- */
@media (min-width: 641px) {
  .uc-h2 { font-size: clamp(84px, 13vw, 132px); }
  .uc-lead { font-size: 19px; }
  .uc-tray { margin: 48px 0 0; padding: 56px 32px 76px; border-radius: 4px; }
  .uc-slip--main { --rot: -1.2deg; }
  .uc-slip--rest { --rot: 1.4deg; }
  .uc-paper { padding: 40px 28px; }
  .uc-logo { width: 176px; }
  .uc-trade, .uc-addr, .uc-barcode { display: block; }
  .uc-branch { display: none; }
  .uc-item-name { font-size: 54px; }
  .uc-total-label { font-size: 50px; }
  .uc-total-sum { font-size: 68px; }
  .uc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 44px; }
  .uc-foot-cta.btn--lg { width: auto; }
  .uc-valid { flex: 1 1 240px; margin: 0; }
  .uc-links { flex: 1 1 100%; margin: 0; }
}

/* ---- tablet: účtenky vedle sebe (hlavní ≥ 340 px, druhá ≥ 320 px) ------- */
@media (min-width: 800px) {
  .uc-tray { padding: 48px 20px 72px; }
  .uc-slips {
    max-width: none; align-items: start; justify-content: center; gap: 20px;
    grid-template-columns: minmax(340px, 404px) minmax(320px, 372px);
  }
  .uc-slip--main { --rot: -1.4deg; }
  .uc-slip--rest { --rot: 1.7deg; margin-top: 132px; }
  .uc-paper { padding: 40px 22px; }
  .uc-slip--rest .uc-paper { padding: 40px 18px; }
  .uc-rest-name, .uc-rest-price { font-size: 22px; }
}
/* ---- tablet na šířku: nadpis a perex v řádku ------------------------------ */
@media (min-width: 900px) {
  .uc-tray { padding: 56px 32px 76px; }
  .uc-slips { gap: 28px; }
  .uc-paper { padding: 44px 30px; }
  .uc-slip--rest .uc-paper { padding: 40px 22px; }
  .uc-copy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 56px; align-items: end; }
  .uc-lead { padding-bottom: 8px; }
}

/* ---- desktop: nadpis a patička vlevo (jedou s účtenkou), podložka vpravo -- */
@media (min-width: 1280px) {
  .uc-inner {
    grid-template-columns: clamp(320px, 27vw, 400px) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "copy tray" "foot tray";
    column-gap: clamp(40px, 4vw, 64px);
  }
  .uc-copy { display: block; align-self: start; padding-top: 8px; }
  .uc-h2 { font-size: min(132px, 9vw); }
  .uc-lead { margin-top: 28px; padding: 0; }
  /* statement vždy na vlastním řádku; úzký sloupec by ho jinak roztrhl uprostřed */
  .uc-lead em { display: block; }
  .uc-tray { margin: 0; padding: 56px 28px 80px; }
  .uc-slips { gap: 24px; }
  .uc-foot {
    display: block; align-self: start; margin-top: var(--uc-gap);
    padding-top: 24px; border-top: 1px solid rgba(11, 11, 12, .16);
  }
  .uc-foot-cta.btn--lg { width: 100%; }
  .uc-valid { margin-top: 22px; }
  .uc-links { margin-top: 20px; }
}
/* sloupec je 27vw: pod ~1340 px se statement v 19 px nevejde na jeden řádek */
@media (min-width: 1280px) and (max-width: 1339px) {
  .uc-lead { font-size: 18px; }
}
/* Sticky jako jeden sloupec: kopie i patička se zastaví pod lištou nad sebou.
   app.js měří výšky (--uc-copy-h, --uc-foot-h) a třídu uc-stick dá jen tam, kde
   se sloupec do okna vejde. Kladný spodní okraj kopie a záporný horní okraj
   patičky drží obě části pohromadě i na konci sekce, kde se odlepují.
   Když se celý sloupec nevejde (nízký notebook), jede s účtenkou aspoň patička
   s tlačítkem a odkazy (uc-stick-foot); nadpis odjede nahoru. */
@media (min-width: 1280px) and (min-height: 700px) {
  .cenik.uc-stick-foot .uc-foot { position: sticky; top: var(--uc-top); }
  .cenik.uc-stick .uc-copy {
    position: sticky; top: var(--uc-top);
    margin-bottom: calc(var(--uc-gap) + var(--uc-foot-h, 0px));
  }
  .cenik.uc-stick .uc-foot {
    position: sticky; top: calc(var(--uc-top) + var(--uc-copy-h, 0px) + var(--uc-gap));
    margin-top: calc(-1 * var(--uc-foot-h, 0px));
  }
}

/* Najetí myší jen tam, kde myš je; fokus (výše) platí všude. */
@media (hover: hover) {
  .uc-item-name a:hover { text-decoration-color: var(--amber-deep); }
  .uc-rest-item:hover .uc-rest-row { background-size: 100% 80%; }
  .uc-rest-item:hover .uc-go { transform: translateX(3px); }
}
@media (hover: hover) and (min-width: 800px) {
  .uc-slip--main:hover { --rot: -.9deg; }
  .uc-slip--rest:hover { --rot: 1.1deg; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-slip, .uc-rest-row, .uc-go, .uc-item-name a { transition: none; }
  .uc-slip.is-armed .uc-pr:not(.uc-ln),
  .uc-slip.is-armed .uc-ln.uc-pr > :not(.uc-ln-price) { opacity: 1; }
  .uc-slip.is-armed .uc-total-sum::before { transform: none; }
}
@media print {
  .uc-slip.is-armed .uc-pr:not(.uc-ln),
  .uc-slip.is-armed .uc-ln.uc-pr > :not(.uc-ln-price) { opacity: 1; }
  .uc-slip.is-armed .uc-total-sum::before { transform: none; }
}

/* ---- sdílené řádky ceníku: /cenik/, /vrsovice/, /strasnice/, /sluzby/* ----
   Homepage je od účtenky nepoužívá; na podstránkách se nesmí změnit nic. */
.price-group-label {
  margin: 48px 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 20px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber-deep);
}
.price-rows { display: flex; flex-direction: column; gap: 4px; }
.price-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 40px;
  margin: 0 -16px; padding: 14px 16px; border-radius: 2px; outline: none; transition: background .2s;
}
.price-row:hover, .price-row:focus-within { background: var(--bone-row); }
.price-row h3 {
  margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: 1; letter-spacing: -.01em; font-size: 34px; color: var(--ink); text-wrap: balance;
}
.price {
  display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 800;
  line-height: 1; font-size: 34px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap;
}
.price span { font-family: var(--font-text); font-size: 13px; font-weight: 500; margin-left: 5px; letter-spacing: .04em; color: rgba(11, 11, 12, .7); }
.price-row p {
  grid-column: 1 / -1; margin: 6px 0 0; max-width: 60ch;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 18.5px; line-height: 1.45; color: rgba(11, 11, 12, .8); text-wrap: pretty;
}

/* ==========================================================================
   05 TÝM
   ========================================================================== */

.tym { position: relative; background: var(--ink); padding: 96px 0 140px; overflow: hidden; }
.wrap { position: relative; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.tym h2 { max-width: 16ch; font-size: clamp(56px, 6vw, 84px); line-height: .94; color: var(--text-hi); }
.tym-lead { margin: 24px 0 64px; font-size: 19px; color: rgba(244, 241, 234, .8); }

.tym-row + .tym-row { margin-top: 148px; }
.tym-row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.tym-branch { flex: 1 1 0; min-width: min(100%, 220px); }
.tym-row-head h3 {
  margin: 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  line-height: .94; letter-spacing: -.01em; font-size: 44px; color: var(--text-hi);
}
.tym-row-head p { margin: 6px 0 0; font-size: 16px; color: rgba(244, 241, 234, .66); }

/* Rezervace pobočky (29. 9. 2026): jantarové tlačítko s popiskem a šipkou v tmavém kolečku.
   Při najetí šipka „projede“ kolečkem a tlačítko se zvedne. Živý stav otevírací doby
   (app.js, data-branch-status) je nad tlačítkem jako kontrolka, ne uvnitř něj. */
.book-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: 0 0 auto; }
.book-status {
  margin: 0; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.2; letter-spacing: .02em; color: rgba(244, 241, 234, .72);
}
.book-status::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; flex: 0 0 auto;
  border: 1px solid rgba(244, 241, 234, .5);
}
.book-status.is-open::before { background: var(--led-green); border-color: var(--led-green); animation: jjPulse 2s ease-in-out infinite; }
.book {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 22px;
  height: 64px; padding: 0 10px 0 26px; box-sizing: border-box;
  background: var(--amber); color: var(--ink); text-decoration: none; border-radius: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .28) inset, 0 16px 36px -18px rgba(0, 0, 0, .9);
  transition: transform .25s var(--ease), background .25s ease, box-shadow .25s ease;
}
.book-label {
  font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.book-go {
  position: relative; display: grid; place-items: center; overflow: hidden; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--amber);
  transition: transform .25s var(--ease);
}
.book-go svg { transition: transform .3s var(--ease); }
.book:hover { color: var(--ink); background: #EDB84F; transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .32) inset, 0 22px 40px -18px rgba(0, 0, 0, .95); }
.book:hover .book-go { transform: translateX(3px); }
.book:hover .book-go svg { animation: jjArrowThrough .5s var(--ease); }
.book:active { transform: translateY(0); }
.book:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
@keyframes jjArrowThrough { 0% { transform: translateX(0); } 45% { transform: translateX(26px); } 46% { transform: translateX(-26px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .book, .book-go, .book-go svg { transition: none; }
  .book:hover { transform: none; }
  .book:hover .book-go { transform: none; }
  .book:hover .book-go svg { animation: none; }
  .book-status.is-open::before { animation: none; }
}
@media (hover: none) {
  .book:hover { transform: none; background: var(--amber); }
  .book:hover .book-go, .book:hover .book-go svg { transform: none; animation: none; }
  .book:active { background: #EDB84F; }
}
/* nejužší telefony (320–374 px) */
@media (max-width: 374px) {
  .book { padding: 0 8px 0 18px; gap: 12px; height: 60px; }
  .book-label { font-size: 16px; letter-spacing: .05em; }
  .book-go { width: 40px; height: 40px; }
}

.tym .wrap { max-width: calc(1720px + 2 * var(--gutter)); }   /* 6 postav v řadě potřebuje víc místa než text */
.tym-row { container-type: inline-size; }
/* Výška řady = kolik se vejde: 8 postav (šířka 0,6685 × výška) s překryvem 7 × 22 px a paddingem 16 px.
   Obě řady mají stejnou výšku podle té delší (Vršovice 8, Strašnice 6), postavy jsou tak všude stejně velké.
   100cqw je šířka .tym-row; fallback přes vw pro prohlížeče bez container queries. */
.lineup { position: relative; display: flex; align-items: flex-end; justify-content: space-between; padding: 0 8px; }
.lineup--v, .lineup--s { height: min(440px, calc((100vw - 2 * var(--gutter) + 138px) / 5.348)); }
@supports (width: 1cqw) { .lineup--v, .lineup--s { height: min(440px, calc((100cqw + 138px) / 5.348)); } }
.lineup-floor {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 140px;
  background: linear-gradient(to top, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0)); pointer-events: none;
}

.fig {
  position: relative; height: 100%; flex: 0 0 auto; margin-left: -22px;
  transition: transform .35s ease, opacity .6s var(--ease); outline: none;
}
.lineup-floor + .fig { margin-left: 0; }
.fig img { height: 100%; width: auto; display: block; filter: drop-shadow(0 34px 34px rgba(0, 0, 0, .65)); }
.fig--soon img { opacity: .55; filter: none; }
.lineup:has(.fig:hover, .fig:focus-within) .fig:not(:hover):not(:focus-within) { opacity: .5; }
.fig:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
.fig:hover, .fig:focus-within { transform: translateY(-8px) scale(1.03); z-index: 20; }
/* Tlačítko Rezervovat visí pod postavou, mimo její box. Bez tohohle můstku myš
   cestou dolů opustí .fig, hover spadne a tlačítko zmizí dřív, než se na něj
   dá kliknout. Můstek je užší než rozteč postav, takže si hover nekradou. */
.fig::after {
  content: ''; position: absolute; left: 50%; top: 100%; z-index: 1;
  width: 200px; height: 130px; transform: translateX(-50%);
}

.plate {
  position: absolute; left: 50%; bottom: -10px; transform: translate(-50%, 100%);
  width: 170px; text-align: center; z-index: 2;
  pointer-events: none; display: flex; flex-direction: column; align-items: center;
}
/* Jméno a role jsou vidět pořád; tlačítko Rezervovat naskočí až na hover/fokus. */
.plate-name {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 22px;
  text-transform: uppercase; line-height: 1; color: var(--text-hi);
  opacity: .82; transition: opacity .25s ease;
}
.plate-role {
  margin: 5px 0 0; font-size: 14px; color: rgba(244, 241, 234, .58);
  transition: opacity .25s ease;
}
.plate .btn {
  position: absolute; top: 100%; margin-top: 10px; white-space: nowrap;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.fig:hover .plate-name, .fig:focus-within .plate-name { opacity: 1; }
.fig:hover .plate-role, .fig:focus-within .plate-role { color: rgba(244, 241, 234, .78); }
.fig:hover .plate .btn, .fig:focus-within .plate .btn { opacity: 1; transform: none; pointer-events: auto; }

/* Hlavička sekce: nadpis vlevo, citát zákazníka vpravo ve volném místě vedle nadpisu.
   Dřív byl citát v řadě postav a na monitorech se mačkal na úzký sloupec. */
/* Citace recenze vedle nadpisu týmu je pryč (pokyn 30. 9. 2026), hlavička je jeden sloupec. */
.tym-head { margin-bottom: 72px; }
.tym-head .tym-lead { margin-bottom: 0; }
@media (max-width: 1023px) {
  .tym-head { margin-bottom: 52px; }
}
.quote-author {
  display: block; margin-top: 14px; font-family: var(--font-display); font-style: normal;
  font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 241, 234, .6);
}
.hl-dark { box-shadow: inset 0 -2px 0 var(--amber); }
.hl-light { box-shadow: inset 0 -2px 0 var(--amber-deep); }

/* ==========================================================================
   06 RECENZE
   ========================================================================== */

.recenze { position: relative; background: var(--bone); color: var(--ink); padding: clamp(96px, 12vw, 180px) 0; overflow: hidden; }
.recenze h2 { font-size: clamp(56px, 7vw, 112px); color: var(--ink); }
.recenze-grid { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(32px, 5vw, 96px); align-items: start; }
.score { font-family: var(--font-display); font-weight: 800; font-size: clamp(140px, 14vw, 200px); line-height: .85; letter-spacing: -.02em; color: var(--ink); }
.stars { margin-top: 16px; display: flex; gap: 6px; color: var(--amber-deep); }
.recenze-note { margin: 20px 0 0; max-width: 34ch; color: rgba(11, 11, 12, .7); text-wrap: pretty; }
.recenze-links { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
/* zdroj čísel (profily Reservio) a prosba o recenzi na Google / Firmy.cz: odkazy v textu, jantar je na papíře
   málo kontrastní, proto inkoust s podtržením v amber-deep */
.recenze-ask { margin: 28px 0 0; max-width: 34ch; font-size: 17px; line-height: 1.5; color: rgba(11, 11, 12, .7); text-wrap: pretty; }
.recenze-note a, .recenze-ask a { color: var(--ink); white-space: nowrap; text-decoration: underline; text-decoration-color: var(--amber-deep); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.recenze-note a:hover, .recenze-ask a:hover { text-decoration-color: var(--ink); }

.quotes { display: flex; flex-direction: column; gap: 36px; transition: opacity .4s ease; }
.quotes.is-fading { opacity: 0; }
.quotes blockquote { margin: 0; }
.quotes p { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 26px; line-height: 1.35; color: var(--ink); text-wrap: pretty; }
.quotes footer {
  margin-top: 12px; display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(11, 11, 12, .6);
}
.icon-mask { display: inline-block; background: currentColor; }
.icon-google { width: 14px; height: 14px; -webkit-mask: url('/assets/web/v14/icons/simple-icons/google.svg') center/contain no-repeat; mask: url('/assets/web/v14/icons/simple-icons/google.svg') center/contain no-repeat; }
.quotes-ctrl { margin-top: 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.quotes-ctrl span { font-size: 14px; color: rgba(11, 11, 12, .6); }

/* ---- 06 recenze na úvodní stránce (23. 9. 2026) ---------------------------------------
   Dřív tři kurzívou psané citace, které se samy střídaly: špatně se četly. Teď jsou vidět
   všechny najednou jako karty. Titulek karty je doslovný úryvek z recenze (display písmo),
   celý text pod ním je vzpřímený Sofia Sans 18 px. Hodnocení je nahoře jako výsledková
   tabule. Staré třídy .quotes / .score-card zůstávají pro podstránky poboček. */
.rv-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px clamp(40px, 6vw, 120px); align-items: end; }
.rv-head h2 { margin: 0; max-width: 17ch; }
.rv-score { border-top: 2px solid var(--amber-deep); padding-top: 18px; min-width: min(100%, 440px); }
.rv-score-main { display: flex; align-items: center; gap: 20px; }
.rv-num { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(88px, 8vw, 128px); line-height: .8; letter-spacing: -.02em; color: var(--ink); }
.rv-score .stars { margin-top: 0; gap: 4px; }
.rv-num-note { margin: 8px 0 0; max-width: 24ch; font-size: 16px; line-height: 1.4; color: rgba(11, 11, 12, .72); }
.rv-facts { margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, auto); border-top: 1px solid rgba(11, 11, 12, .14); }
.rv-facts > div { padding: 12px 18px 0 0; }
.rv-facts > div + div { padding-left: 18px; border-left: 1px solid rgba(11, 11, 12, .14); }
.rv-facts dt { font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: rgba(11, 11, 12, .6); }
.rv-facts dd { margin: 4px 0 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .02em; color: var(--ink); white-space: nowrap; }
.rv-facts a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber-deep); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.rv-facts a:hover { text-decoration-color: var(--ink); }

/* Zeď karet: sloupce (masonry), karty různé výšky podle délky recenze */
.rv-wall { list-style: none; margin: clamp(48px, 6vw, 80px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px; }
.rv-card { grid-column: span 2; display: flex; }
.rv-card:nth-child(7), .rv-card:nth-child(8) { grid-column: span 3; }   /* 3 + 3 + 2: žádná díra v posledním řádku */
.rv-card figure {
  position: relative; margin: 0; padding: 30px 28px 24px; flex: 1 1 auto; display: flex; flex-direction: column;
  background: var(--bone-hi); border: 1px solid rgba(11, 11, 12, .08); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(11, 11, 12, .04), 0 18px 40px -28px rgba(11, 11, 12, .35);
}
.rv-card figure::before {   /* velká uvozovka jako razítko v rohu */
  content: '„'; position: absolute; top: -22px; right: 22px;
  font-family: var(--font-serif); font-style: italic; font-size: 88px; line-height: 1; color: var(--amber);
  pointer-events: none;
}
.rv-card blockquote { margin: 0; }
.rv-hook {
  margin: 0 40px 14px 0; font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 2.1vw, 32px); line-height: .98; letter-spacing: .005em; color: var(--ink); text-wrap: balance;
}
.rv-text { margin: 0 0 20px; font-size: 18px; line-height: 1.55; color: rgba(11, 11, 12, .8); text-wrap: pretty; }
.rv-text mark { background: none; color: var(--ink); font-weight: 500; box-shadow: inset 0 -2px 0 var(--amber-deep); }
.rv-card figcaption {
  margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(11, 11, 12, .1);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
}
.rv-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.rv-src { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; color: rgba(11, 11, 12, .62); }
.rv-src .icon-google { background: rgba(11, 11, 12, .62); }

.rv-more {
  display: none; margin: 4px 0 0; width: 100%; height: 52px; gap: 12px; align-items: center; justify-content: center;
  border: 0; border-radius: 2px; background: var(--ink); color: var(--bone); cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .1em; text-transform: uppercase;
}
.rv-more:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.rv-foot { margin-top: clamp(40px, 5vw, 64px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.rv-foot .recenze-links { margin-top: 0; flex-direction: row; flex-wrap: wrap; gap: 14px 32px; }
.rv-foot .recenze-ask { margin: 0; max-width: 44ch; }

@media (max-width: 1100px) {
  .rv-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .rv-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-card, .rv-card:nth-child(7), .rv-card:nth-child(8) { grid-column: auto; }
}
@media (max-width: 700px) {
  .rv-wall { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rv-card figure { padding: 26px 20px 20px; }
  .rv-card figure::before { font-size: 72px; right: 16px; top: -18px; }
  .rv-hook { font-size: 26px; margin-right: 34px; }
  .rv-text { font-size: 17px; }
  .rv-facts { grid-template-columns: 1fr 1fr; }
  .rv-facts > div:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid rgba(11, 11, 12, .14); margin-top: 12px; }
  .rv-score { min-width: 0; }
  /* telefon: první 3 recenze, zbytek po klepnutí (app.js přidá .is-collapsed jen s JS) */
  .rv-wall.is-collapsed .rv-card:nth-child(n + 4) { display: none; }
  .rv-wall.is-collapsed + .rv-more { display: inline-flex; }
  .rv-foot { flex-direction: column; align-items: flex-start; }
  .rv-foot .recenze-links { flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   07 POUKAZ
   ========================================================================== */

.poukaz { position: relative; background: var(--ink); color: var(--text-hi); overflow: hidden; }
.poukaz-grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 80vh; }
.poukaz-copy {
  padding: clamp(96px, 12vw, 180px) clamp(32px, 5vw, 96px) clamp(96px, 12vw, 180px) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
}
.poukaz-copy h2 { max-width: 13ch; font-size: clamp(56px, 6vw, 84px); line-height: .92; color: var(--text-hi); }
.poukaz-copy > p { margin: 28px 0 0; max-width: 46ch; font-size: 18px; line-height: 1.5; color: rgba(244, 241, 234, .85); text-wrap: pretty; }
.poukaz-meta { margin: 24px 0 0 !important; font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: rgba(244, 241, 234, .6); }
.poukaz-actions { margin-top: 36px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

.poukaz-shot { position: relative; min-height: 480px; overflow: hidden; background: var(--concrete); }
.poukaz-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.poukaz-shot img + img { opacity: 0; transition: opacity .6s ease; }
.poukaz-shot:hover img + img { opacity: 1; }
.poukaz-shot > span {
  position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: 20px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 241, 234, .75);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
}

/* ==========================================================================
   08 ZE SALONU
   ========================================================================== */

.salon { position: relative; background: var(--ink); padding: clamp(96px, 12vw, 180px) 0; overflow: hidden; border-top: 1px solid var(--concrete); }
.salon-head { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 28px; }
.salon-head h2 { font-size: clamp(56px, 7vw, 112px); color: var(--text-hi); }
.salon-ig { display: flex; align-items: center; gap: 20px; }
.icon-ig { -webkit-mask: url('/assets/web/v14/icons/simple-icons/instagram.svg') center/contain no-repeat; mask: url('/assets/web/v14/icons/simple-icons/instagram.svg') center/contain no-repeat; }
.icon-fb { -webkit-mask: url('/assets/web/v14/icons/simple-icons/facebook.svg') center/contain no-repeat; mask: url('/assets/web/v14/icons/simple-icons/facebook.svg') center/contain no-repeat; }
.salon-ig > .icon-mask { width: 40px; height: 40px; background: var(--text-hi); }
.salon-ig a { font-size: 28px; letter-spacing: .06em; color: var(--amber); gap: 12px; }
.salon-ig a:hover { color: var(--amber); }

.marquee { margin-top: 56px; display: flex; flex-direction: column; gap: 16px; }
.marquee-row { overflow: hidden; }
.marquee-track { display: flex; gap: 16px; width: max-content; padding-right: 16px; }
.marquee-track--l { animation: jjMarqL 90s linear infinite; }
.marquee-track--r { animation: jjMarqR 90s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }

.marquee-static { display: flex; gap: 16px; overflow-x: auto; padding: 0 var(--gutter); scrollbar-width: thin; }
.tile { position: relative; width: 320px; height: 400px; border-radius: 4px; overflow: hidden; background: var(--concrete); flex: 0 0 auto; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease), filter .3s ease; }
.tile:hover img { transform: scale(1.03); filter: brightness(1.08); }
.tile .icon-mask { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; background: var(--text-hi); opacity: 0; transition: opacity .3s; }
.tile-cap {
  position: absolute; left: 16px; bottom: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text-hi);
  opacity: 0; transition: opacity .3s; text-shadow: 0 2px 12px rgba(0, 0, 0, .8);
}
.tile:hover .icon-mask, .tile:hover .tile-cap { opacity: 1; }
.salon-note { max-width: var(--container); margin: 24px auto 0; padding: 0 var(--gutter); font-size: 14px; color: rgba(244, 241, 234, .5); }

/* ==========================================================================
   09 REZERVUJ
   ========================================================================== */

.rezervuj {
  position: relative; min-height: 100vh; min-height: 100svh; background: var(--ink);
  display: flex; align-items: center; justify-content: center; overflow: hidden; text-align: center;
}
/* Fotky jsou v <picture> kvůli výřezu na výšku; picture nesmí být flex položka, jinak by posouvala obsah. */
.rezervuj > picture { display: contents; }
.rezervuj > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; animation: jjKB 24s ease-in-out infinite alternate; }
/* img. je nutné: třídu room-v dostává i <body> (app.js setRoom) a samotné .room-v by zprůhlednilo celou stránku. */
img.room-v { object-position: 60% 50%; opacity: 0; transition: opacity .6s ease; }
body.room-v .room-v { opacity: 1; }
.rezervuj-veil { position: absolute; inset: 0; background: radial-gradient(58% 46% at 50% 50%, rgba(11, 11, 12, .62) 0%, rgba(11, 11, 12, 0) 100%), linear-gradient(to top, rgba(11, 11, 12, .55) 0%, rgba(11, 11, 12, 0) 55%); }
.rezervuj-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; padding: clamp(96px, 12vw, 180px) var(--gutter); }
.letters {
  font-size: clamp(88px, 12vw, 200px); color: var(--text-hi);
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: .2em;
  text-shadow: 0 10px 60px rgba(0, 0, 0, .6);
}
/* .lw = slovo (neláme se uvnitř), .l = písmeno (animuje se) */
.letters .lw { display: inline-flex; white-space: nowrap; }
.letters .l { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.3em); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.letters .l.is-in { opacity: 1; transform: none; }
.rezervuj-lead { text-shadow: 0 1px 14px rgba(11, 11, 12, .8); margin: 24px 0 0; max-width: 44ch; font-size: 19px; line-height: 1.45; color: rgba(244, 241, 234, .88); text-wrap: pretty; }
.rezervuj-cta { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.rezervuj-status { margin: 28px 0 0; display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: rgba(244, 241, 234, .85); }
.rezervuj-status a { color: var(--text-hi); text-decoration: none; font-weight: 600; }
.rezervuj-status a:hover { color: var(--amber); }
.room-label {
  position: absolute; left: var(--gutter); bottom: 28px; z-index: 2;
  font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 241, 234, .78);
}

/* ==========================================================================
   10 FOOTER
   ========================================================================== */

.footer { position: relative; background: var(--ink); overflow: hidden; font-size: 18px; line-height: 1.5; color: rgba(244, 241, 234, .88); }
.footer-mark { position: absolute; right: var(--gutter); bottom: 96px; width: 300px; height: auto; opacity: .045; pointer-events: none; }
.footer-grid {
  position: relative; max-width: var(--container); margin: 0 auto;
  padding: 96px var(--gutter) 0;
  display: grid; grid-template-columns: 4fr 3fr 3fr 2fr; gap: 48px;
}
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.footer-brand > img { width: 230px; height: auto; display: block; }
.footer-brand p { margin: 22px 0 18px; font-size: 20px; line-height: 1.4; max-width: 30ch; color: var(--text-hi); text-wrap: pretty; }
.footer-brand .chip { font-size: 14px; color: rgba(244, 241, 234, .8); }
.footer-phone {
  margin-top: 22px; font-family: var(--font-display); font-weight: 800; font-size: 38px;
  letter-spacing: .02em; color: var(--text-hi); text-decoration: none; line-height: 1;
  font-variant-numeric: tabular-nums; transition: color .18s;
}
.footer-phone:hover { color: var(--amber); }

.footer-col { min-width: 0; }
.footer-col h3 {
  margin: 0 0 16px; font-family: var(--font-display); font-weight: 800; font-size: 26px;
  letter-spacing: .02em; text-transform: uppercase; line-height: 1; color: var(--text-hi);
}
.footer-col > p { margin: 0; }
.footer-hours {
  margin: 16px 0 24px; display: grid; grid-template-columns: max-content max-content;
  column-gap: 16px; row-gap: 6px; font-variant-numeric: tabular-nums;
}
.footer-hours .d { color: rgba(244, 241, 234, .62); white-space: nowrap; }
.footer-hours .t { color: rgba(244, 241, 234, .95); white-space: nowrap; }
.footer-col-actions { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }

.socials { display: flex; flex-direction: column; gap: 16px; }
.socials a { display: flex; align-items: center; gap: 16px; text-decoration: none; color: rgba(244, 241, 234, .88); }
.social-box {
  width: 56px; height: 56px; flex: 0 0 auto; border: 1px solid var(--seam); border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text-hi);
  transition: border-color .2s, color .2s, transform .2s; box-sizing: border-box;
}
.social-box .icon-mask { width: 26px; height: 26px; }
.socials a:hover .social-box { border-color: var(--amber); color: var(--amber); transform: translateY(-1px); }
.social-txt { display: flex; flex-direction: column; min-width: 0; }
.social-txt b { font-weight: 400; font-size: 17px; color: var(--text-hi); }
.social-txt span { font-size: 14px; color: rgba(244, 241, 234, .6); white-space: nowrap; }

.footer-bar {
  position: relative; max-width: var(--container); margin: 72px auto 0;
  padding: 24px var(--gutter) 40px; border-top: 1px solid var(--seam);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  font-size: 15px; color: rgba(244, 241, 234, .6);
}
.footer-bar p { margin: 0; }
.footer-bar a { color: rgba(244, 241, 234, .6); text-decoration: none; }
.footer-bar a:hover { color: var(--text-hi); }
.footer-up { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* ==========================================================================
   MODALS
   ========================================================================== */

.overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; }
.overlay[hidden] { display: none !important; }

.chooser-overlay { z-index: 90; background: rgba(11, 11, 12, .72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.chooser {
  position: relative; width: min(880px, 100%); max-height: 100%; overflow: auto; box-sizing: border-box;
  background: var(--concrete); border-radius: 2px; padding: 56px 56px 40px;
  animation: jjRise .42s var(--ease) both;
}
.modal-close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px;
  border: 0; border-radius: 2px; background: transparent; color: #C9C7C1;
  display: inline-flex; align-items: center; justify-content: center; transition: color .18s;
}
.modal-close:hover { color: var(--text-hi); }
.modal-close:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.chooser-kicker { margin: 0; font-size: 15px; color: rgba(244, 241, 234, .6); }
.chooser h2 { margin-top: 12px; font-size: clamp(64px, 8vw, 96px); color: var(--text-hi); }
.chooser-cards { margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.chooser-card {
  position: relative; background: var(--graphite); border-radius: 2px; overflow: hidden;
  display: flex; flex-direction: column; animation: jjRise .42s var(--ease) both;
}
.chooser-card:nth-child(1) { animation-delay: 60ms; }
.chooser-card:nth-child(2) { animation-delay: 120ms; }
.chooser-media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.chooser-media img:first-child { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.chooser-media .sign { position: absolute; left: 16px; bottom: -18px; width: 44%; display: block; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .7)); }
.chooser-body { padding: 36px 24px 24px; display: flex; flex-direction: column; gap: 16px; flex: 1; font-size: 15px; line-height: 1.6; color: rgba(244, 241, 234, .85); }
.chooser-body p { margin: 0; }
.chooser-body b { color: var(--text-hi); font-weight: 500; }
.chooser-body p span { white-space: nowrap; }   /* rozsah otevírací doby se nesmí zlomit („So 10–“ / „17“) */
.chooser-body .btn { margin-top: auto; padding: 0 20px; }
.chooser-phone {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 28px;
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber);
  text-decoration: none; transition: color .18s;
}

/* ---- voucher wizard ------------------------------------------------------ */

.wiz-overlay { z-index: 95; background: rgba(11, 11, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wiz {
  position: relative; width: min(1080px, 100%); height: min(720px, 100%);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  background: var(--concrete); border: 1px solid var(--seam); border-radius: 2px;
  box-shadow: 0 40px 120px -20px rgba(0, 0, 0, .9); overflow: hidden;
  animation: jjPop .24s ease both; color: var(--text-hi);
}
.wiz .modal-close { width: 40px; height: 40px; color: rgba(244, 241, 234, .7); z-index: 3; }
.wiz .modal-close:focus-visible { outline-color: var(--amber); }
.wiz-pane { padding: 40px 44px 36px; display: flex; flex-direction: column; min-width: 0; overflow: auto; }

.wiz-steps {
  position: relative; display: flex; gap: 28px; padding-bottom: 14px; margin-bottom: 28px;
  font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .12em; text-transform: uppercase;
}
.wiz-steps > span { color: rgba(244, 241, 234, .4); transition: color .2s; white-space: nowrap; }
.wiz-steps > span.is-done { color: rgba(244, 241, 234, .75); }
.wiz-steps > span.is-now { color: var(--text-hi); }
.wiz-track { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--seam); }
.wiz-progress { position: absolute; left: 0; bottom: 0; height: 2px; background: var(--amber); width: 25%; transition: width .3s ease; }

/* Obsah kroku má flex: 1 + min-height: 0; na nízkém okně (notebook, telefon na šířku)
   přetékal pod Pokračovat/Zpět. Teď scrolluje sám a navigace zůstává pod ním.
   Řádky voleb mají záporný okraj (-14 px), krok si ho bere zpět vlastním paddingem,
   jinak by je overflow ořízl a vznikl vodorovný posuvník. */
.wiz-step {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  margin: 0 -14px; padding: 0 14px;
}
.wiz-step[hidden] { display: none !important; }
.wiz-step > :last-child { margin-bottom: 0; }   /* spodní okraj posledního odstavce by dělal 2px posuvník i na 1440×900 */
.wiz-step h3 {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; line-height: .94; font-size: 44px; color: var(--text-hi);
}
.wiz-step > p { margin: 0 0 22px; font-size: 15px; color: rgba(244, 241, 234, .6); }
.wiz-step--done h3 { font-size: 64px; }
.wiz-step--done { justify-content: center; }
.wiz-step--done p { margin: 18px 0 0; max-width: 46ch; font-size: 18px; color: rgba(244, 241, 234, .85); }

.opts { display: flex; flex-direction: column; gap: 2px; }
.opt {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 0 16px; align-items: center;
  padding: 10px 14px; margin: 0 -14px; border-radius: 2px; cursor: pointer;
  background: transparent; transition: background .15s; outline: none;
}
.opt:hover, .opt:focus-visible, .opt.is-sel { background: var(--graphite); }
.radio {
  width: 20px; height: 20px; border-radius: 50%; box-sizing: border-box;
  border: 1.5px solid rgba(244, 241, 234, .45); background: transparent;
  display: grid; place-items: center;
}
.opt.is-sel .radio { border-color: var(--amber); background: var(--amber); }
.radio i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); opacity: 0; }
.opt.is-sel .radio i { opacity: 1; }
.opt-name { font-family: var(--font-display); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .02em; }
.opt-name small { font-family: var(--font-text); font-weight: 400; font-size: 15px; text-transform: none; letter-spacing: 0; color: rgba(244, 241, 234, .6); }
.opt-price { font-family: var(--font-display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.opt-price span { font-family: var(--font-text); font-weight: 500; font-size: 13px; margin-left: 4px; color: rgba(244, 241, 234, .6); }
.opt--custom { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 6px 16px; }
.opt-amount { grid-column: 2 / -1; display: flex; align-items: center; gap: 12px; font-size: 15px; color: rgba(244, 241, 234, .7); }

.wiz-field { display: block; }
.wiz-field.span2 { grid-column: 1 / -1; }
.wiz-label {
  display: block; font-family: var(--font-display); font-weight: 700; font-size: 14px;
  letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 241, 234, .6); margin-bottom: 8px;
}
.wiz input, .wiz textarea {
  width: 100%; box-sizing: border-box; background: var(--ink);
  border: 0; border-bottom: 2px solid var(--seam); color: var(--text-hi);
  font: 600 18px var(--font-text); border-radius: 2px 2px 0 0; outline: none;
  transition: border-color .2s;
}
.wiz input { height: 44px; padding: 0 12px; }
.wiz textarea { padding: 12px; resize: none; }
.wiz input:focus, .wiz textarea:focus { border-bottom-color: var(--amber); }
/* Chrome jinak automaticky vyplněné pole podloží světle modrou a text ztmaví */
.wiz input:-webkit-autofill, .wiz input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-hi); caret-color: var(--text-hi);
  box-shadow: 0 0 0 100px var(--ink) inset;
}
.opt-amount input { width: 160px; }
.wiz-err { display: block; min-height: 18px; margin-top: 6px; font-size: 13px; color: var(--error); }
#wizSend[aria-busy="true"] { opacity: .6; cursor: progress; }
.wiz-count { display: block; margin-top: 6px; font-size: 13px; color: rgba(244, 241, 234, .5); }
.wiz-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.wiz-step--pickup, .wiz-step--sum { gap: 18px; }
.wiz-step--who { gap: 22px; }
.wiz-step--who > div:first-child, .wiz-step--pickup > div:first-child, .wiz-step--sum > div:first-child { margin: 0; }
.wiz-step--who h3, .wiz-step--pickup h3, .wiz-step--sum h3 { margin-bottom: 6px; }
.wiz-fine { margin: 0; font-size: 14px; color: rgba(244, 241, 234, .6); }
.wiz-fine--dim { color: rgba(244, 241, 234, .5); }

.wiz-sum { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 24px; font-size: 17px; }
.wiz-sum dt { color: rgba(244, 241, 234, .6); }
.wiz-sum dd { margin: 0; color: var(--text-hi); }

.wiz-nav { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding-top: 22px; gap: 16px; }
.wiz-nav [hidden], .wiz-nav[hidden] { display: none !important; }   /* po odeslání nav zmizí celý (jinak šlo odeslat 2×) */
#wizBack { opacity: 0; pointer-events: none; }
#wizBack.is-on { opacity: 1; pointer-events: auto; }

.wiz-preview {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 40px; background: #111 url('/assets/web/textures/texture-black-leather.webp') center/cover; overflow: hidden;
}
.wiz-preview-glow {
  position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 70%),
              linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 40%);
}
.vou-card {
  position: relative; width: 340px; max-width: 100%; aspect-ratio: 3 / 2;
  background: #F7F5F0; border-radius: 3px; transform: rotate(-3deg);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9), 0 10px 20px -10px rgba(0, 0, 0, .6);
  color: var(--ink); padding: 26px 28px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 8px; overflow: hidden; transition: transform .4s ease;
}
.vou-card.is-flip { transform: rotate(-3deg) rotateY(8deg); }
.vou-card::before, .vou-card::after {
  content: ''; position: absolute; width: 110px; height: 110px;
  background: repeating-linear-gradient(-45deg, var(--enamel-red) 0 12px, #F7F5F0 12px 22px, var(--enamel-blue) 22px 34px, #F7F5F0 34px 44px);
}
.vou-card::before { top: 0; right: 0; clip-path: polygon(100% 0, 100% 100%, 0 0); }
.vou-card::after { bottom: 0; left: 0; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.vou-card img { width: 120px; height: auto; display: block; filter: invert(1) brightness(0); }
.vou-kicker { margin: 4px 0 0; font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; }
.vou-line { margin: 0; font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(11, 11, 12, .8); }
.vou-ded { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 13px; line-height: 1.3; color: rgba(11, 11, 12, .85); max-width: 24ch; }
.wiz-preview-cap {
  position: absolute; left: 0; right: 0; bottom: 22px; margin: 0; text-align: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .5);
}

/* ==========================================================================
   RESPONSIVE: the source is a desktop composition; these keep it usable
   ========================================================================== */

@media (max-width: 1100px) {
  .kdo { height: auto; }
  /* min-height: 0 – grid s výškou okna natáhl řádky a na iPadu Pro na výšku zbyl mezi textem a figurami 273px pás */
  .kdo-sticky { position: relative; min-height: 0; grid-template-columns: minmax(0, 1fr); align-items: start; }
  .kdo-copy { grid-column: 1; padding: 96px var(--gutter); }
  .manifest { max-width: none; }   /* pod 820px stojí zakladatelé pod textem, omezení šířky by ho zbytečně mačkalo */
  .founders { grid-column: 1; min-height: 0; padding: 0 var(--gutter) 0; justify-content: center; gap: 12px; }
  .founders .founder img, .founders .founder .founder-shadow { height: auto; width: min(42vw, 300px); }
  .founders { flex-wrap: wrap; align-items: flex-start; }
  .founder { padding-bottom: 46px; }
  .founder-cap { bottom: 0; }

  .recenze-grid, .poukaz-grid { grid-template-columns: 1fr; }
  .poukaz-copy { padding: 96px var(--gutter); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .wiz { grid-template-columns: 1fr; height: min(90vh, 100%); height: min(90svh, 100%); }
  .wiz-preview { display: none; }
}

/* Kdo jsme vedle sebe: výška figur rostla jen s výškou okna (76vh), takže na iPadu
   na šířku a 1100–1440 px noteboocích dvojice přetekla přes text a jako pozdější
   sourozenec se kreslila přes něj. Teď ji omezuje i místo vedle textového sloupce
   (manifest má nejvýš min(45vw, 620px)); na 1920 px zůstává 820 px. Odstavec pod
   manifestem se v užším okně nesmí natáhnout pod figury. Figury stojí těsně u sebe
   (výřezy mají vlastní průhledný okraj), takže i na 1180 px mají aspoň 470 px. */
@media (min-width: 1101px) {
  .kdo-copy { z-index: 4; }
  .founders { gap: 0; }
  .founder img, .founder .founder-shadow { height: min(76vh, 820px, calc((100vw - 2 * var(--gutter) - min(45vw, 620px)) * .88)); }
  .manifest-tail p { max-width: min(52ch, 40vw, 540px); }
  /* Popisek leží na černém triku: tmavý text tam nebyl vidět, proto světlý se stínem
     (pod 1101 px stojí pod figurou na béžové a zůstává tmavý). */
  .founder-cap p:first-child { color: var(--text-hi); text-shadow: 0 1px 3px rgba(11, 11, 12, .85), 0 2px 16px rgba(11, 11, 12, .6); }
  .founder-cap p + p { color: rgba(244, 241, 234, .8); text-shadow: 0 1px 3px rgba(11, 11, 12, .85); }
}

@media (max-width: 820px) {
  /* Postavy jsou blíž u sebe, tak i můstek pod nimi musí být užší. */
  .fig::after { width: 140px; height: 110px; }
  .nav-mid { display: none; }
  .nav { grid-template-columns: auto 1fr; }
  .nav-slot { display: none; }
  .pobocky { height: auto; }
  .pobocky-sticky { position: relative; height: auto; flex-direction: column; }
  /* Ve sloupcovém flexu přebíjí desktopové flex: 1 1 0 výšku (basis 0 + žádné volné místo = 0 px). Panely byly na mobilu neviditelné. */
  .half { flex: 0 0 auto; height: 90vh; height: 90svh; }
  /* tablet na výšku: 90 % výšky (až 1240 px) ořízlo 16:9 fotku na strom a nebe; panel max. 1,15× šířky */
  @media (min-width: 700px) { .half { height: min(90svh, 115vw); } }
  .half:hover { flex: 0 0 auto; }
  .pobocky-h2 { position: static; padding: 72px var(--gutter) 0; }
  .half-info { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bar { flex-direction: column; align-items: flex-start; }
  .chooser { padding: 48px 24px 24px; }
  .chooser-cards { grid-template-columns: 1fr; }
  .wiz-fields { grid-template-columns: 1fr; }
  .wiz-pane { padding: 32px 24px 0; }
  /* Lišta kroků se na úzkém displeji nevešla a 4. krok se ořízl; 11px popisky se zase špatně četly.
     Celý název má jen aktuální krok, ostatní ukazují číslo (název zůstává čtečkám, sr-only). */
  .wiz-steps { gap: 10px; font-size: 13px; letter-spacing: .06em; justify-content: space-between; padding-right: 44px; }
  .wiz-steps > span:not(.is-now) .wiz-sn {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  /* Navigace se překrývala s posledním polem, protože obsah kroku přetekl panel. */
  .wiz-nav {
    position: sticky; bottom: 0; margin-top: 16px; padding: 16px 0 20px;
    background: var(--ink); box-shadow: 0 -12px 18px -12px rgba(11, 11, 12, .9);
  }
  /* "Kč · minimálně 300 Kč" se vedle pole nevešlo a řezalo se; na mobilu jde pod něj. */
  .opt-amount { flex-wrap: wrap; gap: 8px 12px; }
  .opt-amount input { flex: 1 1 100%; }
  /* Řada barberů má na telefonu 770+ px obsahu v 350 px; sekce má overflow hidden, takže 3.–5. barber nebyl vidět.
     Na mobilu je z řady vodorovný pás se snapem; padding dole drží jména pod postavami (overflow-x: auto ořezává i svisle). */
  .lineup--v, .lineup--s { height: clamp(260px, 46vw, 380px); }
  .lineup {
    overflow-x: auto; overflow-y: hidden; box-sizing: content-box; padding: 0 var(--gutter) 96px;
    margin: 0 calc(-1 * var(--gutter)); scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .lineup::-webkit-scrollbar { display: none; }
  .fig { scroll-snap-align: center; }
  .lineup-floor { bottom: 96px; }
  .tym-row { overflow: visible; }
  /* pás na mobilu ořezává nad postavami, bublina jde do volna vlevo od hlavy */
}

/* Tým na tabletu a telefonu na šířku (821–1199 px): řada se do šířky nevešla, citát se
   zmáčkl na ~135 px a ležel přes tlačítko Rezervovat nebo za okrajem okna. Jako na mobilu
   je z řady vodorovný pás se snapem a jména s tlačítky visí v paddingu pásu. */
@media (min-width: 821px) and (max-width: 1199px) {
  .tym { padding-bottom: 72px; }
  .tym-row + .tym-row { margin-top: 72px; }
  .lineup--v, .lineup--s { height: clamp(300px, 34vw, 400px); }
  .lineup {
    overflow-x: auto; overflow-y: hidden; box-sizing: content-box; padding: 0 var(--gutter) 132px;
    margin: 0 calc(-1 * var(--gutter)); scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .lineup::-webkit-scrollbar { display: none; }
  .lineup-floor { bottom: 132px; }
  .fig { scroll-snap-align: center; }
  /* pás ořezává nahoře, postava se proto při najetí nezvedá; tlačítko je vidět, můstek netřeba */
  .fig:hover, .fig:focus-within { transform: none; }
  .fig::after { display: none; }
}
/* Rezervace u barbera byla mimo mobil jen na hover (opacity 0), na dotyku ji nešlo najít.
   V pásu 821–1199 px a na dotykových displejích od 1200 px (iPad Pro na šířku) je pod
   jménem pořád, ve stejné tiché podobě jako na mobilu. */
@media (min-width: 821px) and (max-width: 1199px), (hover: none) and (min-width: 1200px) {
  .plate { pointer-events: auto; }
  .plate-name { opacity: 1; }
  .plate .btn {
    position: static; margin-top: 10px; height: 36px; padding: 0 14px; font-size: 14px; gap: 8px;
    opacity: 1; transform: none; pointer-events: auto;
    background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px rgba(244, 241, 234, .38);
  }
  .plate .btn:active { background: rgba(244, 241, 234, .1); }
}
@media (hover: hover) and (min-width: 821px) and (max-width: 1199px) {
  .plate .btn:hover { background: var(--bone); color: var(--ink); box-shadow: none; }
}
/* iPad Pro na šířku: tlačítko pod jménem nesmí narazit do další řady ani do konce sekce */
@media (hover: none) and (min-width: 1200px) {
  .fig::after { display: none; }
  .tym { padding-bottom: 188px; }
  .tym-row + .tym-row { margin-top: 196px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .manifest-tail, .letters span { transition: none; }
  .reveal--hero { animation: none; }
  .hero-logo { visibility: visible; }   /* letící logo app.js při omezeném pohybu nerozsvítí, logo zůstane v hero */
  .rezervuj > picture > img { animation: none; }
  .marquee-track { animation: none; }
}


/* ==========================================================================
   SEO / přístupnost (vlna 1): kickery sekcí, skip-link, FAQ, no-js fallback
   ========================================================================== */
.kicker {
  display: block; font-family: var(--font-text); font-weight: 600; font-size: 15px; line-height: 1.2;
  letter-spacing: .26em; text-transform: uppercase; opacity: .62; margin: 0 0 16px;
}
.skip {
  position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 10px 16px; border-radius: 6px;
  background: var(--amber); color: var(--ink); font-family: var(--font-text); font-weight: 600; font-size: 15px; text-decoration: none;
}
.skip:focus { top: 16px; outline: 2px solid var(--bone-hi); outline-offset: 2px; }
.faq { position: relative; background: var(--bone); color: var(--ink); padding: clamp(96px, 10vw, 160px) 0; }
.faq h2 { font-size: clamp(56px, 6vw, 96px); color: var(--ink); }
.faq-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 72px; }
.faq-item h3 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.02; text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.faq-item p { margin: 0; font-size: 18px; line-height: 1.5; color: rgba(11, 11, 12, .78); max-width: 54ch; text-wrap: pretty; }
@media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } .faq-item h3 { font-size: 26px; } }
/* reveal-all: pojistka z inline skriptu v <head>, když app.js nenaběhne (výpadek sítě, blokace).
   Obsah se pak ukáže celý a bez animací, stejně jako bez JS. */
html.no-js .reveal, html.reveal-all .reveal { opacity: 1; transform: none; }
html.no-js .manifest-line span, html.reveal-all .manifest-line span { color: inherit; }
html.no-js .letters span, html.reveal-all .letters span { opacity: 1; transform: none; }
html.no-js .hero-logo, html.reveal-all .hero-logo { visibility: visible; }

/* vlna 2: atributy width/height slouží jen jako poměr stran (CLS), výšku řídí CSS */
img { height: auto; }

/* ==========================================================================
   Vlna 3: podstránky (pobočky, ceník, služby, poukaz, GDPR) + patička
   ========================================================================== */
.page-hero { position: relative; min-height: 64vh; display: grid; align-items: end; padding: calc(var(--nav-h) + 72px) 0 72px; background: var(--ink); color: var(--text-hi); overflow: hidden; }
.page-hero--plain { min-height: 0; padding-bottom: 40px; }
.page-hero-media { position: absolute; inset: 0; }
.page-hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; display: block; }
.page-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11, 11, 12, .97) 0%, rgba(11, 11, 12, .55) 55%, rgba(11, 11, 12, .35) 100%); }
/* /darkovy-poukaz/: karta voucheru s nápisem ležela pod H1. Výřez fotky doprava a tmavší levá část. */
.page-hero-media img[src*="voucher-REAL-handed-over"] { object-position: 0% 50%; }
.page-hero-media:has(img[src*="voucher-REAL-handed-over"])::after {
  background: linear-gradient(90deg, rgba(11, 11, 12, .92) 0%, rgba(11, 11, 12, .72) 42%, rgba(11, 11, 12, .2) 75%),
              linear-gradient(to top, rgba(11, 11, 12, .97) 0%, rgba(11, 11, 12, .45) 50%, rgba(11, 11, 12, .25) 100%);
}
@media (max-width: 700px) {   /* telefon: karta je přímo za textem, fotka jen jako tmavá textura */
  .page-hero-media:has(img[src*="voucher-REAL-handed-over"])::after { background: linear-gradient(to top, rgba(11, 11, 12, .97) 0%, rgba(11, 11, 12, .82) 100%); }
}
/* .page-hero je grid a .wrap má margin: 0 auto, takže se položka smrskla na obsah
   a vycentrovala: H1 v hero začínal na 1440 px na x = 411, nadpisy sekcí na 58. */
.page-hero-inner { position: relative; z-index: 1; width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); box-sizing: border-box; }
/* GDPR: text je sloupec .wrap.prose (72ch), hero drží stejnou osu (obojí dědí 17 px z body) */
.page-hero--plain .page-hero-inner { max-width: calc(72ch + 2 * var(--gutter)); }
.page-hero h1 { font-size: clamp(52px, min(6.6vw, 11vh), 116px); line-height: .92; max-width: 18ch; color: var(--text-hi); text-wrap: balance; }   /* bez balance zbylo na řádku samotné „tomu“ */
.page-hero h1 .nw { white-space: nowrap; }   /* cena s „Kč“ drží pohromadě (build-pages.py) */
.page-hero .kicker { opacity: .72; text-wrap: balance; }   /* kicker je před H1 (dřív v něm a balance dědil) */
.page-lead { margin: 22px 0 0; max-width: 56ch; font-size: 19px; line-height: 1.5; color: rgba(244, 241, 234, .86); text-wrap: pretty; }
.lnk--inline { color: var(--amber); display: inline; padding: 0; white-space: normal; letter-spacing: .06em;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(227, 169, 59, .55); }
.lnk--inline::after { content: none; }
.lnk--inline:hover { text-decoration-color: currentColor; }
/* jantar na bone má 2,9:1, v textu na světlém podkladu tmavší odstín (5:1) */
.psec--bone .lnk--inline, .psec-note--dark a { color: #8A5C0F; text-decoration-color: rgba(138, 92, 15, .5); }
.page-cta { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center; margin-top: 32px; }
.crumbs ol { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(244, 241, 234, .62); }
.crumbs li + li::before { content: "›"; margin-right: 8px; opacity: .6; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--amber); }
.psec { position: relative; padding: clamp(72px, 8vw, 128px) 0; background: var(--ink); color: var(--text-hi); }
.psec--tight { padding: 0 0 clamp(48px, 6vw, 96px); }
.psec--bone { background: var(--bone); color: var(--ink); }
.psec h2.h-display { font-size: clamp(40px, 5vw, 72px); line-height: .95; }
.psec--bone h2.h-display { color: var(--ink); }
.psec-lead { margin: 20px 0 24px; max-width: 56ch; font-size: 18px; line-height: 1.5; text-wrap: pretty; }
.psec-h3 { margin: 0 0 14px; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.psec-note { margin: 18px 0 0; font-size: 16px; line-height: 1.5; color: rgba(244, 241, 234, .68); max-width: 56ch; }
.psec-note--dark { color: rgba(11, 11, 12, .66); margin-top: 36px; }
.psec--cta { text-align: center; }
.psec--cta .page-cta { justify-content: center; }
.psec--cta .psec-lead { margin-left: auto; margin-right: auto; }
.pgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px 72px; align-items: start; }
.big.half-addr { font-size: 20px; margin: 22px 0 18px; }
.psec .hours { margin: 0; }
.psec .half-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 17px; line-height: 1.45; }
.plain-list b { font-weight: 600; }
.plain-list--links { gap: 20px; }   /* rozteč ≥ 44 px, ať se dotykové plochy odkazů (níž) nepřekrývají */
.plain-list--links a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(244, 241, 234, .3); }
.plain-list--links a:hover { color: var(--amber); }
/* Na /sluzby/* se nadpis, seznam a „Celý ceník“ dotýkaly (0 px) a dotyková plocha
   Celého ceníku zasahovala do spodku posledního odkazu služby. */
.pgrid .plain-list { margin-top: 20px; }
.pgrid .plain-list + .lnk { margin-top: 28px; }
.price-inline { margin-left: 8px; color: var(--amber); }
.pgallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pgallery figure, .pfig { margin: 0; }
.pgallery img, .pfig img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; }
.pfig img { aspect-ratio: 3 / 2; }
.pgallery figcaption, .pfig figcaption { margin-top: 8px; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.team-list { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 40px; }
.team-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; padding: 16px 0; border-top: 1px solid var(--seam); align-items: center; }
.team-name { font-family: var(--font-display); font-weight: 800; font-size: 26px; text-transform: uppercase; }
.team-role { grid-column: 1; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.team-list .lnk { grid-column: 2; grid-row: 1 / span 2; font-size: 15px; }
.price-row h3 a { color: inherit; text-decoration: none; }
/* Stránky poboček: 34px název a cena se v půlce .pgrid na 844–1100 px lámaly na 2–3 řádky.
   Velikost roste se šířkou (26 px jako mobil, 34 px od ~1300 px). */
.pgrid .price-row h3, .pgrid .price-row .price { font-size: clamp(26px, 2.6vw, 34px); }
.svc-list { display: grid; gap: 48px; }
.svc { padding-top: 40px; border-top: 1px solid rgba(11, 11, 12, .14); }
.svc:first-child { border-top: 0; padding-top: 0; }
.svc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; }
.svc-head h2 { font-size: clamp(34px, 4vw, 56px); }
.svc-head h2 a { color: inherit; text-decoration: none; }
.svc-head h2 a:hover { color: var(--amber-deep); }
.price.big { font-size: clamp(34px, 4vw, 56px); margin: 14px 0 0; }
.svc-lead { margin: 12px 0 0; max-width: 60ch; font-size: 18px; line-height: 1.5; }
.svc-includes { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.svc-includes li { padding: 6px 12px; border: 1px solid rgba(11, 11, 12, .22); border-radius: 999px; font-size: 14px; }
.svc-actions { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.svc-body { display: grid; gap: 28px; }
/* /sluzby/fade/: hotové střihy z poboček (skutečné fotky 4:5), 4 v řadě, na telefonu 2 */
.cut-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin-top: 8px; }
.cut { margin: 0; position: relative; overflow: hidden; border-radius: 2px; background: var(--concrete); }
.cut img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .8s var(--ease); }
.cut:hover img { transform: scale(1.04); }
.cut figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px;
  background: linear-gradient(to top, rgba(11, 11, 12, .85), rgba(11, 11, 12, 0));
  font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-hi);
}
@media (max-width: 700px) { .cut-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cut img { transition: none; } .cut:hover img { transform: none; } }
.svc-block h2 { margin-bottom: 8px; }
.svc-block p { margin: 0; font-size: 17px; line-height: 1.55; }
.svc-block a { color: #8A5C0F; }   /* --amber-deep (#B9821E) má na bone jen 2,9:1, tohle 5:1 (WCAG AA) */
.steps { margin: 24px 0 0; padding-left: 1.2em; display: grid; gap: 14px; font-size: 17px; line-height: 1.5; }
.prose { max-width: 72ch; font-size: 17px; line-height: 1.6; }
.prose h2 { margin: 40px 0 12px; font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.05; text-transform: uppercase; }
.prose h3 { margin: 24px 0 8px; font-size: 19px; font-weight: 600; }
.prose ul { padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.prose a { color: var(--amber-deep); }
.todo-inline { color: var(--enamel-red); font-weight: 600; }
.footer-nav { position: relative; max-width: var(--container); margin: 36px auto 0; padding: 24px var(--gutter) 0; border-top: 1px solid var(--seam); font-size: 14px; line-height: 2; color: rgba(244, 241, 234, .5); }
.footer-nav a { color: rgba(244, 241, 234, .82); text-decoration: none; white-space: nowrap; }
.footer-nav a:hover { color: var(--amber); }
@media (max-width: 820px) {
  .pgrid { grid-template-columns: 1fr; gap: 40px; }
  .pgallery { grid-template-columns: 1fr; }
  .page-hero { min-height: 0; padding-top: calc(var(--nav-h) + 48px); }
  .page-hero h1 { font-size: clamp(48px, 12vw, 80px); }
  .svc-head h2 { font-size: 34px; }
  /* cena stála u jedné služby vedle názvu a u další pod ním (podle délky názvu); teď vždy pod */
  .svc-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .svc-head .price.big { margin-top: 0; }
}

/* vlna 6a: na mobilu se letící logo nedokuje (hero logo je skryté, měření selže) → logo rovnou v navigaci, letící skrýt */
@media (max-width: 820px) {
  .fly-logo { display: none !important; }
  .hero-logo { visibility: visible; }
  .nav-slot img { opacity: 1; }
  body:not(.is-docked) .scrim { opacity: 1; }
}

/* ==========================================================================
   DOTYK: :hover se na mobilu po ťuknutí zasekne až do dalšího ťuknutí.
   Stavy, které mění rozvržení nebo tlumí sourozence, se na dotyku vypínají.
   ========================================================================== */
@media (hover: none) {
  .lineup:has(.fig:hover, .fig:focus-within) .fig:not(:hover):not(:focus-within) { opacity: 1; }
  .fig:hover:not(:focus-within) { transform: none; z-index: auto; }
  .fig:focus:not(:focus-visible) { transform: none; z-index: auto; }   /* ťuknutí nenechá postavu zvednutou */
  .tile:hover img { transform: none; filter: none; }
  .poukaz-shot:hover img + img { opacity: 0; }
  .btn:hover, .btn--bone:hover, .btn--ink:hover { transform: none; }
  .btn:hover svg, .lnk:hover svg, .lnk--down:hover svg { transform: none; }
  .socials a:hover .social-box { transform: none; }
  .marquee:hover .marquee-track { animation-play-state: running; }
}

/* ==========================================================================
   SAFE AREA (iPhone na šířku, Dynamic Island) a dotykové hit-oblasti
   ========================================================================== */
@supports (padding: max(0px)) {
  .nav { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
  .hero-foot {
    left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right));
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
}
@media (max-width: 820px) {
  .wiz-nav { padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
}
/* Textové odkazy (.lnk) mají 24 px na výšku; na dotyku rozšiřujeme hit-oblast pseudo-prvkem, layout se nemění. */
@media (pointer: coarse) {
  .half-meta a { position: relative; }
  .lnk::before, .half-meta a::before, .footer-bar a::before, .crumbs a::before {
    content: ""; position: absolute; left: -8px; right: -8px; top: -10px; bottom: -10px;
  }
  .footer-bar a, .crumbs a { position: relative; }
}

/* Hero: adresa v patě přetékala pod 430 px (nowrap). */
@media (max-width: 640px) {
  .hero-foot { gap: 12px; align-items: flex-end; }
  .hero-foot-addr { display: none; }   /* obě adresy jsou v patičce; stav otevření je důležitější */
}

/* Panel poboček: pod 1200 px se cedule a text nevejdou vedle sebe, jdou pod sebe. */
@media (max-width: 1200px) {
  .half-info { grid-template-columns: 1fr; gap: 14px; }
  .half-signs { width: min(160px, 100%); }
  .half-signs .plates { width: 96px; margin-top: 8px; }
  .half-info .hours { margin-bottom: 16px; }
}
@media (max-width: 820px) {
  .half-signs { width: min(300px, 100%); }
  .half-signs .plates { width: 176px; margin-top: 14px; }
}

/* Nízké displeje (notebook 768 px na výšku): v panelu poboček schovat čísla popisná, ať blok nedosáhne k nadpisu. */
@media (min-width: 821px) and (max-height: 800px) {
  .half-signs .plates { display: none; }
}
@media (max-width: 1200px) {
  .pobocky-h2 { font-size: clamp(48px, 6vw, 96px); top: 88px; }
}
/* Nízké notebooky (1280×720, 1366×768 po odečtení lišt prohlížeče): v připnutém stavu
   narážel nadpis pobočky do „Dvě adresy. Stejná parta.“ (až −82 px). Menší nadpis výš,
   blok s údaji níž a hustší. Telefon na šířku to přebíjí blokem karet níž. */
@media (min-width: 821px) and (max-height: 720px) {
  .pobocky-h2 { top: 84px; font-size: clamp(48px, 5vw, 80px); }
  .half-info { bottom: 28px; }
  .half-meta { margin: 6px 0 12px; row-gap: 6px; }
  .half-info .hours { margin-bottom: 14px; }
  .half-actions { row-gap: 12px; }
}
/* Pod 1200 px stojí cedule nad textem a stála ~90 px výšky: na 1024×600 (tablet na šířku)
   i 1100×640 najela do nadpisu. Na nízkém displeji jde menší vedle názvu a adresy. */
@media (min-width: 821px) and (max-width: 1200px) and (min-height: 521px) and (max-height: 660px) {
  .half-info { display: block; }
  .half-signs { float: left; width: 120px; margin: 4px 18px 8px 0; }
  .half-meta { clear: left; }
}
/* Nejnižší okna (1280×540, notebook s lištou záložek a panelem úloh): menší nadpis,
   hustší údaje a širší textový sloupec, ať se adresa Strašnic nezalomí. */
@media (min-width: 821px) and (min-height: 521px) and (max-height: 560px) {
  .pobocky-h2 { top: 80px; font-size: clamp(44px, 4vw, 64px); }
  .half-info { bottom: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .half-meta { margin: 4px 0 10px; }
  .half-info .hours { row-gap: 2px; margin-bottom: 10px; }
}
/* Dotykové displeje nad 820 px (iPad na šířku, dotykové notebooky): panel se po ťuknutí nesmí roztáhnout. */
@media (hover: none) and (min-width: 821px) {
  .half:hover { flex: 1 1 0; }
}

/* Identifikace provozovatelů v patě (§ 435 OZ) */
.footer-legal { display: block; margin-top: 8px; font-size: 13px; line-height: 1.5; color: rgba(244, 241, 234, .5); max-width: 78ch; text-wrap: pretty; }

/* ==========================================================================
   COOKIE LIŠTA (vlastní, Consent Mode v2)
   Karta vlevo dole na desktopu, bottom-sheet na mobilu. Nezakrývá web, jde
   scrollovat dál; výchozí stav je "odmítnuto", takže nic neběží bez souhlasu.
   ========================================================================== */
.ck {
  position: fixed; z-index: 80; box-sizing: border-box; overflow: hidden;
  left: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom));
  width: min(420px, calc(100vw - 48px));
  padding: 30px 28px 20px; color: var(--bone);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(227, 169, 59, .10) 0%, rgba(227, 169, 59, 0) 55%),
    linear-gradient(180deg, #1a1b1e 0%, #0f0f11 100%);
  border: 1px solid rgba(244, 241, 234, .10); border-radius: 4px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85), 0 12px 24px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(244, 241, 234, .06);
  opacity: 0; transform: translateY(28px) scale(.98); transform-origin: 0 100%; pointer-events: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
}
.ck.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ck > * { position: relative; }
.ck > .grain { position: absolute; opacity: .07; }
/* Dokud je karta vidět, nesmí pod ní zmizet fokus (WCAG 2.4.11): app.js dá do --ck-cover,
   kolik px odspodu okna zabírá, a prohlížeč při Tabu doroluje prvek nad ni. */
html { scroll-padding-bottom: var(--ck-cover, 0px); }
/* Barber pole: tenký pruh nahoře, pomalu jede (jako točící se sloup u vchodu). Omezený pohyb = stojí. */
.ck-pole {
  position: absolute !important; left: 0; right: 0; top: 0; height: 5px;
  background: repeating-linear-gradient(-45deg, var(--enamel-red, #A31F24) 0 9px, var(--bone) 9px 18px, var(--enamel-blue, #1E3F8A) 18px 27px, var(--bone) 27px 36px);
  background-size: 50.9px 5px; animation: ck-pole 2.6s linear infinite;
}
@keyframes ck-pole { to { background-position: 50.9px 0; } }
.ck-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ck-badge {
  flex: 0 0 auto; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(227, 169, 59, .22), rgba(227, 169, 59, .04) 70%);
  box-shadow: inset 0 0 0 1px rgba(227, 169, 59, .45);
}
.ck-mark {
  display: block; width: 30px; height: 11px; background: var(--amber);
  -webkit-mask: url(/assets/web/logo/jj-moustache.svg) center / contain no-repeat; mask: url(/assets/web/logo/jj-moustache.svg) center / contain no-repeat;
}
.ck-kick {
  margin: 0 0 6px !important; font-family: var(--font-mono); font-size: 11px !important; line-height: 1 !important;
  letter-spacing: .18em; text-transform: uppercase; color: var(--amber) !important;
}
.ck h2 {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 30px;
  line-height: .92; letter-spacing: -.005em; text-transform: uppercase; color: var(--text-hi); text-wrap: balance;
}
.ck p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(244, 241, 234, .72); text-wrap: pretty; }
.ck-short { display: none; }   /* kratší text pro telefon (bottom sheet) a nízkou lištu na šířku */
.ck-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.ck-actions .btn { justify-content: center; height: 46px; padding: 0 14px; }
.ck-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(244, 241, 234, .08);
  font-size: 12.5px; color: rgba(244, 241, 234, .5);
}
.ck-foot a { color: rgba(244, 241, 234, .55); text-decoration: underline; text-decoration-color: rgba(244, 241, 234, .25); text-underline-offset: 3px; }
.ck-foot a:hover { color: var(--text-hi); text-decoration-color: currentColor; }
.ck-set {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bone);
}
.ck-set svg { color: var(--amber); transition: transform .3s var(--ease); }
.ck-set:hover { color: var(--text-hi); }
.ck-set:hover svg { transform: rotate(-12deg); }
.ck-set:focus-visible, .ck-foot a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }

/* "Jen nezbytné": stejná váha jako "Přijmout vše", jen obrys */
.btn--ghost {
  background: transparent; color: var(--bone);
  box-shadow: inset 0 0 0 1.5px rgba(244, 241, 234, .55);
}
.btn--ghost:hover { background: rgba(244, 241, 234, .08); color: var(--text-hi); box-shadow: inset 0 0 0 1.5px var(--bone); }

/* nastavení: modal s přepínači */
.ck-overlay { z-index: 92; background: rgba(11, 11, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ck-dlg {
  position: relative; width: min(560px, calc(100vw - 32px)); max-height: min(88vh, 720px); max-height: min(88svh, 720px); overflow: auto;
  box-sizing: border-box; padding: 34px 36px 30px; color: var(--bone);
  background: var(--ink); border: 1px solid rgba(244, 241, 234, .12); border-radius: 6px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.ck-dlg { overflow-x: hidden; }
.ck-dlg .ck-pole { position: absolute; }
.ck-dlg .ck-kick { margin-top: 4px !important; }
.ck-dlg .modal-close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; color: rgba(244, 241, 234, .7); }
.ck-dlg .modal-close:focus-visible { outline-color: var(--amber); }
.ck-dlg h2 {
  margin: 0 0 6px; padding-right: 44px; font-family: var(--font-display); font-weight: 800;
  font-size: 34px; line-height: .96; text-transform: uppercase; color: var(--text-hi);
}
.ck-dlg > p { margin: 0 0 22px; font-size: 15px; line-height: 1.5; color: rgba(244, 241, 234, .66); }
.ck-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: start;
  padding: 16px 0; border-top: 1px solid var(--seam);
}
.ck-row:last-of-type { border-bottom: 1px solid var(--seam); }
.ck-row-name {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 18px;
  letter-spacing: .02em; text-transform: uppercase; color: var(--text-hi);
}
.ck-row-name small { display: inline-block; margin-left: 8px; font-size: 11px; letter-spacing: .12em; color: var(--amber); vertical-align: middle; }
.ck-row-desc { grid-column: 1; margin: 0; font-size: 14px; line-height: 1.5; color: rgba(244, 241, 234, .62); text-wrap: pretty; }
.ck-switch {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
  position: relative; width: 50px; height: 28px; border: 0; padding: 0; cursor: pointer;
  border-radius: 999px; background: rgba(244, 241, 234, .18);
  transition: background .2s ease;
}
.ck-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bone); box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
  transition: transform .2s var(--ease);
}
.ck-switch[aria-checked="true"] { background: var(--amber); }
.ck-switch[aria-checked="true"]::after { transform: translateX(22px); background: var(--ink); }
.ck-switch:disabled { cursor: default; opacity: .55; }
.ck-switch:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.ck-dlg-actions { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 24px; }

/* Bottom sheet na telefonu měl při první návštěvě 331–353 px (až 62 % výšky) a zakrýval
   hlavní CTA v hero. Kratší text, obě volby vedle sebe a stejně velké (odmítnout je stejně
   snadné jako přijmout), Nastavit a zásady v jednom řádku pod nimi: ~190 px. */
@media (max-width: 560px) {
  .ck {
    left: 0; right: 0; bottom: 0; width: 100%; border-radius: 8px 8px 0 0; border-bottom: 0;
    padding: 22px 16px calc(14px + env(safe-area-inset-bottom));
    transform: translateY(100%); transform-origin: 50% 100%;
  }
  .ck-head { gap: 12px; margin-bottom: 10px; }
  .ck-badge { width: 40px; height: 40px; }
  .ck-mark { width: 24px; height: 9px; }
  .ck-kick { margin-bottom: 4px !important; }
  .ck h2 { font-size: 23px; }
  #ckText { font-size: 14px; line-height: 1.45; }
  .ck-long { display: none; }
  .ck-short { display: inline; }
  .ck-actions { margin-top: 14px; gap: 8px; }
  .ck-actions .btn { height: 44px; padding: 0 10px; }
  .ck-foot { margin-top: 10px; padding-top: 8px; }
  .ck-dlg { padding: 30px 22px 0; }
  .ck-dlg h2 { font-size: 28px; }
  .ck-dlg-actions { position: sticky; bottom: 0; margin: 20px -22px 0; padding: 14px 22px calc(18px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--ink) 78%, rgba(11, 11, 12, 0)); }
  .ck-dlg-actions .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .ck, .ck-switch, .ck-switch::after { transition: none; }
  .ck-pole { animation: none; }
}

/* Řádky ceníku na podstránkách (/cenik/, /vrsovice/, /strasnice/, /sluzby/*):
   název položky je odkaz na detail služby. */
.price-row:hover h3 a,
.price-row:focus-within h3 a { color: var(--amber-deep); }
.price-row h3 a:focus-visible {
  outline: 2px solid var(--amber-deep); outline-offset: 3px; border-radius: 2px;
}

/* ==========================================================================
   RECENZE: hodnocení jako údaj, ne jako deska
   4,96 v inku na béžové splývalo s nadpisem nad ním – proto tu dřív byla tmavá
   deska. Ta ale do papírové sekce nepatří, takže blok odděluje jantarová linka
   a verzálkový popisek: čte se jako údaj, ne jako pokračování nadpisu.
   ========================================================================== */
.recenze .score-card { padding-top: clamp(18px, 1.8vw, 24px); border-top: 2px solid var(--amber); }
.recenze .score-label {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 700;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(11, 11, 12, .5);
}

/* ==========================================================================
   MOBIL (≤ 820 px)
   Zdroj je desktopová kompozice a starší responzivní pravidla výš ji na
   telefonu jen držela použitelnou. Tenhle blok z ní dělá plnohodnotné mobilní
   rozvržení: lišta s logem a menu, menší rytmus sekcí, pobočky jako karty,
   tým s viditelnou rezervací, CTA přes celou šířku, modály jako sheety.
   Blok je záměrně poslední, ať přebíjí všechno nad sebou.
   ========================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, [tabindex] { -webkit-tap-highlight-color: transparent; }

@media (max-width: 820px) {
  :root {
    --nav-h: 60px;
    --sec-y: 72px;                          /* svislý rytmus sekcí (desktop má 96–180 px) */
    --h2-m: clamp(44px, 12.4vw, 72px);      /* jednotná velikost nadpisů sekcí */
  }

  /* ---- lišta ------------------------------------------------------------ */
  .nav {
    grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px;
    height: calc(var(--nav-h) + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top);
  }
  /* Logo v liště se ukáže až po zadokování; nahoře je velké logo v hero a dvě pod sebou by se tloukla. */
  .nav-home {
    display: inline-flex; align-items: center; height: 44px;
    opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s linear .2s;
  }
  .nav-home img { width: 118px; height: auto; display: block; }
  body.is-docked .nav-home, body.is-menu .nav-home { opacity: 1; visibility: visible; transition: opacity .2s ease; }
  .nav-home:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 2px; }
  .nav-right { align-items: center; gap: 6px; }
  .nav-burger {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; border-radius: 2px;
    background: transparent; color: var(--text-hi);
  }
  .nav-burger span { display: block; width: 24px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .3s var(--ease); }
  .nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .nav-burger:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
  body.is-menu .nav { background: var(--ink); border-bottom-color: var(--seam); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body.is-menu .scrim { opacity: 0; }   /* scrim (z-index 49) jinak ztmaví první položku menu */

  /* ---- menu ------------------------------------------------------------- */
  .mnav {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 48; box-sizing: border-box;
    padding-top: calc(var(--nav-h) + env(safe-area-inset-top));
    background: var(--ink);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility 0s linear .3s;
  }
  .mnav[hidden] { display: none; }
  body.is-menu .mnav { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
  .mnav-scroll {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    display: flex; flex-direction: column; box-sizing: border-box;
    padding: 10px max(var(--gutter), env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(var(--gutter), env(safe-area-inset-left));
  }
  .mnav-links { list-style: none; margin: 0; padding: 0; }
  .mnav-links li { border-bottom: 1px solid var(--seam); }
  .mnav-link {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 14px 0 11px;
    font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 5.8vh, 48px);
    line-height: 1; letter-spacing: -.005em; text-transform: uppercase; text-decoration: none;
    color: var(--text-hi);
  }
  .mnav-link::after {
    content: ''; flex: 0 0 auto; width: 22px; height: 22px; background: currentColor; opacity: .4;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center/contain no-repeat;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12h14'/><path d='m12 5 7 7-7 7'/></svg>") center/contain no-repeat;
  }
  .mnav-link:hover { color: var(--text-hi); }
  .mnav-link.is-active { color: var(--amber); }
  .mnav-link:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
  .mnav-book { margin-top: 28px; }
  .mnav-label { margin: 0 0 12px; font: 600 13px/1.2 var(--font-text); letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 241, 234, .55); }
  .mnav-book-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mnav-book-row .btn { width: 100%; box-sizing: border-box; padding: 0 10px; gap: 10px; }
  .mnav-foot {
    margin-top: auto; padding-top: 28px;
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 20px;
  }
  .mnav-phone {
    font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: .02em;
    font-variant-numeric: tabular-nums; color: var(--text-hi); text-decoration: none;
  }
  .mnav-foot .chip { font-size: 14px; color: rgba(244, 241, 234, .75); }
  /* položky najíždějí postupně; při zavírání mizí naráz s panelem */
  .mnav-links li, .mnav-book, .mnav-foot { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  body.is-menu .mnav-links li, body.is-menu .mnav-book, body.is-menu .mnav-foot { opacity: 1; transform: none; }
  body.is-menu .mnav-links li:nth-child(1) { transition-delay: .05s; }
  body.is-menu .mnav-links li:nth-child(2) { transition-delay: .09s; }
  body.is-menu .mnav-links li:nth-child(3) { transition-delay: .13s; }
  body.is-menu .mnav-links li:nth-child(4) { transition-delay: .17s; }
  body.is-menu .mnav-links li:nth-child(5) { transition-delay: .21s; }
  body.is-menu .mnav-links li:nth-child(6) { transition-delay: .25s; }
  body.is-menu .mnav-book { transition-delay: .31s; }
  body.is-menu .mnav-foot { transition-delay: .36s; }
  /* cookie lišta (z-index 80) by menu překryla */
  body.is-menu .ck { opacity: 0; pointer-events: none; }

  /* Kotvy z menu: sekce dojede pod lištu, ne za ni (patička by jinak ukázala druhé logo hned pod tím v liště). */
  [data-nav-section], .cenik, .recenze, .poukaz { scroll-margin-top: calc(var(--nav-h) + env(safe-area-inset-top) - 1px); }

  /* ---- 01 hero ---------------------------------------------------------- */
  .hero { min-height: 520px; }
  .hero-inner { padding: calc(var(--nav-h) + 8px) var(--gutter) 84px; transform: none; }
  .hero-logo { width: min(236px, 62vw); max-width: none; }
  .hero-h1-wrap { margin-top: 30px; }
  .hero-eyebrow { font-size: 14px; letter-spacing: .28em; margin-bottom: 10px; }
  .hero-title { font-size: clamp(52px, 18.6vw, 92px); }
  .hero-lead-wrap { margin-top: 20px; }
  .hero-lead { font-size: 17px; max-width: 36ch; }
  .hero-cta { margin-top: 26px; flex-direction: column; gap: 22px; }
  .hero-cta .btn { width: 100%; max-width: 360px; box-sizing: border-box; }
  .hero-foot { bottom: calc(22px + env(safe-area-inset-bottom)); justify-content: center; }
  .hero-foot .chip { white-space: normal; align-items: flex-start; text-align: left; }
  .hero-foot .chip-dot { flex: 0 0 auto; margin-top: .42em; }

  /* ---- 02 kdo jsme ------------------------------------------------------ */
  .kdo-copy { padding: var(--sec-y) var(--gutter) 44px; }
  .manifest { font-size: clamp(34px, 9.6vw, 56px); }
  .manifest-tail { margin-top: 28px; }
  .manifest-tail p { font-size: 17px; }
  .manifest-meta { margin-top: 20px !important; font-size: 14px; text-wrap: balance; }
  .manifest-tail .lnk { margin-top: 24px; }
  .founders { gap: 8px; }

  /* ---- 03 pobočky: karty jsou v samostatném bloku níž (platí i pro telefon na šířku) -- */
  .pobocky-h2 { padding: var(--sec-y) var(--gutter) 32px; font-size: var(--h2-m); top: auto; }

  /* ---- 04 ceník: účtenka má vlastní breakpointy v bloku 04 CENÍK ------- */
  .cenik { padding: var(--sec-y) 0 calc(var(--sec-y) + 8px); }

  /* ---- 05 tým ----------------------------------------------------------- */
  .tym { padding: var(--sec-y) 0 56px; }
  .tym h2 { font-size: var(--h2-m); }
  .tym-lead { margin: 18px 0 44px; font-size: 17px; }
  .tym-row + .tym-row { margin-top: 56px; }
  .tym-row-head { margin-bottom: 22px; gap: 16px; }
  .tym-row-head h3 { font-size: 36px; }
  .tym-row-head p { font-size: 15px; }
  .book-wrap { width: 100%; align-items: stretch; }
  .tym-row-head .book { width: 100%; }
  /* Rezervace u barbera byla jen na hover; na dotyku ji nešlo najít. Teď je pod každým jménem pořád. */
  .lineup { padding-bottom: 132px; }
  .lineup-floor { bottom: 132px; }
  .fig::after { display: none; }
  .fig:hover, .fig:focus-within { transform: none; }
  .lineup:has(.fig:hover, .fig:focus-within) .fig:not(:hover):not(:focus-within) { opacity: 1; }
  .plate { width: 150px; pointer-events: auto; }
  .plate-name { opacity: 1; }
  .plate .btn {
    position: static; margin-top: 10px; height: 36px; padding: 0 14px; font-size: 14px; gap: 8px;
    opacity: 1; transform: none; pointer-events: auto;
    background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px rgba(244, 241, 234, .38);
  }
  .plate .btn:hover { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 1.5px rgba(244, 241, 234, .38); }
  .plate .btn:active { background: rgba(244, 241, 234, .1); }

  /* ---- 06 recenze ------------------------------------------------------- */
  .recenze { padding: var(--sec-y) 0; }
  .recenze h2 { font-size: var(--h2-m); }
  .recenze-grid { margin-top: 36px; gap: 40px; }
  .score { font-size: 124px; }
  .quotes { gap: 30px; }
  .quotes p { font-size: 21px; }
  .quotes-ctrl { margin-top: 28px; }

  /* ---- 07 poukaz -------------------------------------------------------- */
  .poukaz-grid { min-height: 0; }
  .poukaz-copy { padding: var(--sec-y) var(--gutter) 56px; }
  .poukaz-copy h2 { font-size: var(--h2-m); }
  .poukaz-copy > p { margin-top: 22px; font-size: 17px; }
  .poukaz-meta { font-size: 14px; text-wrap: balance; }
  .poukaz-actions { margin-top: 30px; gap: 20px 28px; }
  .poukaz-actions .btn { flex: 1 1 100%; box-sizing: border-box; }
  .poukaz-shot { min-height: 0; aspect-ratio: 4 / 3; }

  /* ---- FAQ -------------------------------------------------------------- */
  .faq { padding: var(--sec-y) 0; }
  .faq h2 { font-size: var(--h2-m); }
  .faq-grid { margin-top: 36px; gap: 28px; }
  .faq-item p { font-size: 17px; }

  /* ---- 08 ze salonu ----------------------------------------------------- */
  .salon { padding: var(--sec-y) 0; }
  .salon-head { gap: 20px; }
  .salon-head h2 { font-size: var(--h2-m); }
  .salon-ig { gap: 14px; }
  .salon-ig > .icon-mask { width: 30px; height: 30px; }
  .salon-ig a { font-size: 22px; }
  .marquee { margin-top: 36px; gap: 10px; }
  .marquee-track { gap: 10px; padding-right: 10px; }
  .marquee-track--l, .marquee-track--r { animation-duration: 70s; }
  .tile { width: 212px; height: 265px; }
  .salon-note { margin-top: 18px; font-size: 13px; }

  /* ---- 09 rezervuj ------------------------------------------------------ */
  .rezervuj { min-height: 88vh; min-height: 88svh; }
  .rezervuj-inner { width: 100%; box-sizing: border-box; padding: 96px var(--gutter) 92px; }
  .letters { font-size: clamp(64px, 22.5vw, 120px); }
  .rezervuj-lead { margin-top: 18px; font-size: 17px; }
  .rezervuj-cta { width: 100%; max-width: 440px; margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .rezervuj-cta .btn { width: 100%; box-sizing: border-box; height: 56px; padding: 0 10px; font-size: 17px; gap: 10px; }
  /* inline-flex lámal stav, "nebo zavolej" a číslo do tří sloupečků */
  .rezervuj-status { display: block; margin-top: 24px; max-width: 34ch; text-align: center; line-height: 1.6; text-wrap: balance; }
  .rezervuj-status .chip-dot { display: inline-block; margin-right: 9px; vertical-align: .08em; }
  .rezervuj-status a { white-space: nowrap; }
  .room-label { left: 0; right: 0; bottom: calc(24px + env(safe-area-inset-bottom)); text-align: center; font-size: 13px; }

  /* ---- 10 patička ------------------------------------------------------- */
  .footer { font-size: 17px; }
  .footer-grid { padding: 64px var(--gutter) 0; gap: 40px; }
  .footer-brand > img { width: 196px; }
  .footer-brand p { margin: 18px 0 14px; font-size: 18px; }
  .footer-phone { margin-top: 18px; font-size: 42px; }
  .footer-col h3 { margin-bottom: 12px; }
  .footer-hours { margin: 14px 0 20px; }
  .footer-mark { width: 210px; bottom: 140px; }
  .footer-nav { margin-top: 44px; padding-top: 20px; font-size: 15px; line-height: 2.3; }
  .footer-bar { margin-top: 28px; gap: 16px; padding: 22px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }

  /* ---- výběr pobočky: sheet odspodu je v samostatném bloku níž (platí i pro telefon na šířku) -- */

  /* ---- průvodce poukazem: celá obrazovka -------------------------------- */
  .wiz-overlay { padding: 0; }
  .wiz { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .wiz-pane { padding: calc(22px + env(safe-area-inset-top)) var(--gutter) 0; }
  .wiz .modal-close { top: calc(8px + env(safe-area-inset-top)); right: 8px; width: 44px; height: 44px; }
  .wiz-step h3 { font-size: 38px; }
  .wiz-step--done h3 { font-size: 56px; }
  .opt { padding: 12px 14px; }
  /* navigace přes celou šířku panelu, ne jako tmavá krabička uvnitř */
  .wiz-nav {
    margin: 12px calc(-1 * var(--gutter)) 0; padding: 14px var(--gutter) calc(16px + env(safe-area-inset-bottom));
    background: var(--concrete); border-top: 1px solid var(--seam); box-shadow: 0 -14px 18px -14px rgba(11, 11, 12, .9);
  }

  /* ---- podstránky ------------------------------------------------------- */
  /* kicker s prostrkáním .26em se na 375 px lámal na tři řádky */
  .kicker { font-size: 13px; letter-spacing: .2em; margin-bottom: 12px; }
  /* řádky ceníku mimo homepage: 34px název + 34px cena se lámaly po slovech */
  .price-row { gap: 0 16px; }
  .price-row h3, .price-row .price { font-size: 26px; }
  .price-row p { font-size: 16.5px; }
  .page-hero { padding-bottom: 48px; }
  .page-lead { font-size: 17px; }
  .page-cta { gap: 18px 26px; margin-top: 28px; }
  .page-cta .btn { flex: 1 1 100%; box-sizing: border-box; }
  .psec { padding: 64px 0; }
  .psec--tight { padding: 0 0 48px; }
  .psec-lead { font-size: 17px; }
  .psec .half-actions .btn, .svc-actions .btn { flex: 1 1 100%; box-sizing: border-box; }
  .team-list { grid-template-columns: 1fr; }
}

/* Pobočky jako karty: fotka nahoře, cedule přes její spodní hranu, údaje pod ní na inku.
   Platí pro mobil i pro telefon na šířku (tam stojí dvě karty vedle sebe): text přes
   fotku se do nízkého panelu nevešel a na rušném snímku se špatně četl. */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) {
  /* vlastní vlastnost se při parsování nevaliduje, druhá deklarace by fallback přebila i tam,
     kde malé jednotky viewportu neznají (var() by pak byla neplatná a karty by se rozpadly),
     proto verze pro nové prohlížeče až v @supports */
  .half { --photo-h: min(clamp(250px, 72vw, 480px), 64vh); height: auto; background: var(--ink); }
  @supports (height: 1svh) { .half { --photo-h: min(clamp(250px, 72vw, 480px), 64svh); } }
  .half > img { inset: 0 0 auto 0; height: var(--photo-h); }
  .half-veil {
    inset: 0 0 auto 0; height: var(--photo-h);
    background: linear-gradient(to top, var(--ink) 0%, rgba(11, 11, 12, .6) 24%, rgba(11, 11, 12, 0) 62%);
  }
  .half .grain { bottom: auto; height: var(--photo-h); }
  .half-info {
    position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: 1fr;
    padding: calc(var(--photo-h) - 66px) var(--gutter) 48px; gap: 20px;
  }
  .half-signs { display: flex; align-items: flex-end; gap: 12px; width: auto; }
  .half-signs .sign { width: min(212px, 56vw); }
  .half-signs .plates { display: block; width: 86px; margin: 0; }
  .half-body h3 { font-size: 36px; margin-bottom: 8px; }
  .half-meta { margin: 12px 0 18px; gap: 8px 22px; }
  .half-meta a, .half-meta span { white-space: normal; }
  .half-info .hours { margin-bottom: 22px; }
  .half-actions { gap: 18px 26px; }
  .half-actions .btn { flex: 1 1 100%; box-sizing: border-box; }
}

/* Výběr pobočky na nízkém notebooku (1280×600–760): tlačítka rezervace byla pod
   spodní hranou modálu. Menší nadpis, fotky 16:9 a hustší karty. */
@media (min-width: 821px) and (max-height: 760px) {
  .chooser { padding: 40px 44px 28px; }
  .chooser h2 { font-size: clamp(48px, 6vw, 72px); }
  .chooser-cards { margin-top: 24px; }
  .chooser-media { aspect-ratio: 16 / 9; }
  .chooser-body { padding: 28px 20px 20px; gap: 12px; }
}
/* Do 680 px výšky (1280×600, 1024×600) se modál ještě o 60–70 px scrolloval a telefon
   „Nebo zavolej“ byl pod jeho spodní hranou. Nižší fotky a hlavička, celý se vejde. */
@media (min-width: 821px) and (max-height: 680px) {
  .chooser { padding-top: 32px; padding-bottom: 24px; }
  .chooser h2 { font-size: clamp(44px, 5vw, 60px); }
  .chooser-cards { margin-top: 18px; }
  .chooser-media { aspect-ratio: 2 / 1; }
  .chooser-body { padding-top: 24px; gap: 10px; }
  .chooser-phone { margin-top: 14px; }
}
/* Výběr pobočky jako sheet odspodu, karty naležato. Na telefonu na šířku (i nad 820 px)
   byl desktopový modál vyšší než okno a tlačítka rezervace ležela ~200 px pod jeho okrajem. */
@media (max-width: 820px), (orientation: landscape) and (max-height: 520px) {
  .chooser-overlay { align-items: flex-end; padding: 0; }
  .chooser {
    width: 100%; max-height: 94vh; max-height: 94svh; border-radius: 14px 14px 0 0;
    padding: 26px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  }
  .chooser .modal-close { top: 10px; right: max(8px, env(safe-area-inset-right)); }
  .chooser-kicker { font-size: 14px; padding-right: 44px; }
  .chooser h2 { margin-top: 8px; font-size: clamp(44px, 13vw, 64px); }
  .chooser-cards { margin-top: 22px; gap: 12px; }
  .chooser-card { display: grid; grid-template-columns: 124px minmax(0, 1fr); }
  .chooser-media { aspect-ratio: auto; min-height: 108px; }
  .chooser-media img:first-child { position: absolute; inset: 0; }
  .chooser-media .sign { left: 8px; right: 8px; bottom: 8px; width: auto; max-width: calc(100% - 16px); }
  .chooser-body { display: contents; }
  .chooser-body p { align-self: center; padding: 12px 14px; font-size: 15px; line-height: 1.5; }
  .chooser-body .btn { grid-column: 1 / -1; margin: 0; width: 100%; box-sizing: border-box; border-radius: 0 0 2px 2px; box-shadow: none; }
  .chooser-phone { margin-top: 20px; min-height: 44px; }
}

/* Nízké telefony (iPhone SE, 8, mini s lištami prohlížeče): hero se musí vejít i s hlavním CTA. */
@media (max-width: 820px) and (max-height: 700px) and (orientation: portrait) {
  .hero { min-height: 480px; }
  .hero-inner { padding-bottom: 64px; }
  .hero-logo { width: min(184px, 50vw); }
  .hero-h1-wrap { margin-top: 18px; }
  .hero-eyebrow { font-size: 13px; margin-bottom: 8px; }
  .hero-title { font-size: clamp(46px, 15.4vw, 72px); }
  .hero-lead-wrap { margin-top: 14px; }
  .hero-lead { font-size: 16px; line-height: 1.4; }
  .hero-cta { margin-top: 20px; gap: 16px; }
  .hero-cta .btn { height: 54px; }
  .hero-foot { bottom: calc(16px + env(safe-area-inset-bottom)); font-size: 13px; }
}
/* Ještě nižší: iPhone SE / 8 v Safari s lištami (viditelných 553 px, první SE 460 px).
   Stavový čip v patě ležel přes odkaz Ceník a na 320×460 byl hero vyšší než okno. */
@media (max-width: 820px) and (max-height: 600px) and (orientation: portrait) {
  .hero { min-height: 0; }
  .hero-inner { padding-bottom: 72px; }
  .hero-logo { width: min(150px, 40vw); }
  .hero-h1-wrap { margin-top: 12px; }
  .hero-title { font-size: clamp(42px, 13.5vw, 64px); }
  .hero-cta { gap: 10px; margin-top: 16px; }
}
/* První iPhone SE v Safari (320×460): ani tak se hero nevešel. Logo tu zůstává v liště
   (jinak se tam ukáže až po odrolování) a v hero se skryje, ať se dvě loga netlučou. */
@media (max-width: 820px) and (max-height: 500px) and (orientation: portrait) {
  .hero-inner { padding-top: calc(var(--nav-h) + 4px); }
  .hero-logo { display: none; }
  .hero-h1-wrap { margin-top: 0; }
  .nav-home { opacity: 1; visibility: visible; }
}

/* Úzké telefony (≤ 360 px): dlouhé popisky tlačítek se s nowrap nevešly do 280 px. */
@media (max-width: 360px) {
  .nav-home img { width: 100px; }
  .nav-right .btn { padding: 0 14px; font-size: 14px; }
  .nav-right .btn svg { display: none; }
  .btn--md { padding: 0 16px; font-size: 15px; gap: 10px; }
  .btn--lg { padding: 0 18px; font-size: 17px; gap: 10px; }
  .mnav-book-row .btn, .rezervuj-cta .btn { font-size: 15px; }
  .footer-phone { font-size: 38px; }
}

/* Dotyk: popisky dlaždic a odezva na stisk (hover tu neexistuje). */
@media (hover: none) {
  .tile::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none;
    background: linear-gradient(to top, rgba(11, 11, 12, .7), rgba(11, 11, 12, 0));
  }
  .tile-cap { opacity: 1; z-index: 1; }
  .btn:active { transform: scale(.985); }
  .btn--bone:active { background: var(--bone-row); }
  .btn--ink:active { background: #1F2124; }
  .mnav-link:active { color: var(--amber); }
}
@media (pointer: coarse) {
  .link-ghost, .footer-nav a, .chooser-phone { position: relative; }
  .link-ghost::before, .footer-nav a::before {
    content: ""; position: absolute; left: -8px; right: -8px; top: -12px; bottom: -12px;
  }
  /* Opakované cíle měly na dotyku 28–40 px: malá tlačítka (lišta, patička, cookies),
     Rezervovat u barbera, názvy služeb v ceníku poboček, drobečky, odkazy v liště
     nad 820 px (telefon na šířku, iPad), odkazy služeb a přepínače cookies. */
  .btn--sm, .plate .btn { height: 44px; }
  .plain-list--links a, .ck-foot a { position: relative; }
  /* inline-block: dvouřádkový název („Klasický střih + úprava vousů“) má plochu přes oba řádky */
  .price-row h3 a { position: relative; display: inline-block; }
  .price-row h3 a::before, .plain-list--links a::before, .ck-foot a::before {
    content: ""; position: absolute; left: -8px; right: -8px; top: -12px; bottom: -12px;
  }
  .crumbs a::before { top: -14px; bottom: -14px; }
  .navlink::before { content: ""; position: absolute; inset: -8px; }
  .ck-switch::before { content: ""; position: absolute; inset: -8px -6px; }
  .ck-set { min-height: 44px; }
  /* telefon v patičce (text 38 px, řádek 38 px) a počty recenzí u hodnocení: plocha na dotyk ≥ 44 px */
  .footer-phone { position: relative; }
  .footer-phone::before { content: ""; position: absolute; left: -6px; right: -6px; top: -6px; bottom: -6px; }
  .rv-facts dd a { position: relative; }
  .rv-facts dd a::before { content: ""; position: absolute; left: -6px; right: -6px; top: -12px; bottom: -12px; }
  /* Řádky mapy webu a odkazů v patě mají na dotyku 45 px (dřív 28–34 px, plochy sousedních
     řádků se překrývaly); plocha ±13 px kolem textu tak dá 44 px bez překryvu. */
  .footer-nav, .footer-bar p { line-height: 45px; }
  .footer-nav a::before, .footer-bar a::before { top: -13px; bottom: -13px; }
}

@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav-links li, .mnav-book, .mnav-foot, .nav-burger span, .nav-home { transition: none !important; }
}

html.no-js .manifest-tail, html.reveal-all .manifest-tail { opacity: 1; transform: none; }

/* ==========================================================================
   TELEFON NA ŠÍŘKU (blok je až za mobilním, ať ho přebíjí)
   Hero má min-height 600 px, ale landscape telefon nabízí ~390 px. Obsah se
   nevešel a hlavní CTA "Rezervovat termín" končilo pod ohybem, takže hlavní
   akce webu nebyla vidět. Na nízkých displejích hero neroztahujeme.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 520px) {
  /* Lišta 72 px brala 18 % výšky; dlaždice galerie (400 px) byly vyšší než plocha pod ní. */
  :root { --nav-h: 60px; }
  .tile { width: 212px; height: 265px; }
  .hero { min-height: 0; height: auto; position: relative; }
  .hero-inner { transform: none; padding: 62px var(--gutter) 22px; }
  .hero-logo { width: 132px; max-width: 26vw; }
  .hero-h1-wrap { margin-top: 8px; }
  .hero-eyebrow { font-size: 12px; letter-spacing: .2em; margin-bottom: 4px; }
  .hero-title { font-size: clamp(30px, 5.6vw, 54px); }
  .hero-lead-wrap { margin-top: 8px; }
  .hero-lead { font-size: 14px; line-height: 1.35; max-width: 70ch; }
  .hero-cta { margin-top: 12px; gap: 18px; flex-direction: row; }
  .hero-cta .btn { width: auto; height: 48px; }
  .hero-foot { position: static; margin-top: 18px; justify-content: center; }
  .rezervuj { min-height: 0; }
  .rezervuj-inner { padding: 72px var(--gutter) 64px; }
  .letters { font-size: clamp(48px, 9vw, 88px); }
  /* Sticky sekce na nízkém displeji jen překáží: obsah se nevejde a uživatel scrolluje naslepo. */
  .kdo-sticky, .pobocky-sticky { position: relative; height: auto; min-height: 0; }
  .pobocky-sticky { flex-wrap: wrap; }
  .pobocky-h2 { position: static; flex: 0 0 100%; box-sizing: border-box; padding: 56px var(--gutter) 24px; }
  /* Nad 820 px si karty nesly desktopové flex: 1 1 0 a výšku sekce 170vh: vedle nadpisu
     přes celou šířku zbylo 0 px a Pobočky byly prázdný černý blok, který přetékal do ceníku. */
  .pobocky { height: auto; }
  .half, .half:hover { flex: 1 1 50%; }
  /* Ceník: hlavička účtenky jako na telefonu na výšku (logo + jeden řádek, bez adres a čárového kódu). */
  .uc-trade, .uc-addr, .uc-barcode { display: none; }
  .uc-branch { display: block; }
  .cenik .uc-paper { padding-block: 28px; }
  /* Výběr pobočky: karty vedle sebe, tlačítka rezervace jsou vidět bez scrollu v sheetu. */
  .chooser { padding-top: 18px; }
  .chooser h2 { font-size: 48px; }
  .chooser-cards { margin-top: 16px; grid-template-columns: 1fr 1fr; }
  .chooser-phone { margin-top: 10px; }
  /* Průvodce poukazem přes celou obrazovku; krok scrolluje, navigace zůstává vidět. */
  .wiz-overlay { padding: 0; }
  .wiz { width: 100%; height: 100%; border: 0; border-radius: 0; }
  .wiz-pane { padding: 14px var(--gutter) 0; }
  .wiz .modal-close { top: 6px; right: max(8px, env(safe-area-inset-right)); }
  .wiz-steps { margin-bottom: 14px; }
  .wiz-step h3 { font-size: 30px; }
  .wiz-step--done h3 { font-size: 44px; }
  .wiz-step > p { margin-bottom: 10px; }
  .wiz-nav { padding-top: 10px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  /* Podstránky: hlavní CTA v hero bylo pod ohybem (např. /vrsovice/ na y = 425 při výšce 375). */
  .page-hero { min-height: 0; padding: calc(var(--nav-h) + 16px) 0 28px; }
  .page-hero h1 { font-size: clamp(36px, 6vw, 56px); max-width: none; }
  .crumbs ol { margin-bottom: 10px; }
  .page-hero .kicker { margin-bottom: 8px; }
  .page-lead { margin-top: 10px; font-size: 16px; max-width: 70ch; }
  .page-hero .page-cta { margin-top: 16px; }
  .page-cta .btn { flex: 0 0 auto; height: 48px; }
  /* Cookie karta zabírala 54–62 % výšky a kryla H1 i CTA. Na šířku je z ní nízká lišta:
     text vlevo, volby vpravo v jednom řádku. */
  .ck {
    left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom)); width: auto; padding: 12px 18px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: center;
  }
  .ck { padding: 16px 18px 10px; transform: translateY(100%); }
  .ck-head, #ckText, .ck-foot { grid-column: 1; }
  .ck-badge { display: none; }
  .ck-head { margin-bottom: 4px; }
  .ck-kick { display: none; }
  .ck h2 { font-size: 18px; }
  #ckText { font-size: 13px; line-height: 1.4; }
  .ck-long { display: none; }
  .ck-short { display: inline; }
  .ck-actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; grid-template-columns: auto auto; }
  .ck .ck-foot { margin-top: 4px; padding-top: 0; border-top: 0; justify-content: flex-start; gap: 20px; font-size: 13px; }
}
/* Ceník na telefonu na šířku: nadpis (132 px od 641 px) s perexem zabral celou první
   obrazovku a účtenka začínala pod ohybem. Nadpis v jednom řádku ve velikosti ostatních
   sekcí (~56 px), perex vedle něj (když je místo, jinak pod ním), menší logo a mezery,
   ať je hlavička účtenky s KLASICKÝM STŘIHEM vidět hned. Desktopový sloupec (≥ 1280) nechává být. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 1279px) {
  .uc-copy { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 40px; }
  .uc-h2 { flex: none; font-size: clamp(48px, 6.6vw, 62px); }
  .uc-l { display: inline; }
  .uc-lead { flex: 1 1 300px; max-width: 46ch; margin: 0; padding-bottom: 4px; font-size: 16px; line-height: 1.4; }
  .uc-tray { margin-top: 24px; padding-top: 24px; padding-bottom: 40px; }
  .uc-logo { width: 132px; }
}
/* do 820 px dojede kotva #cenik pod lištu (scroll-margin), 80 px nahoře by bylo jen prázdno */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 820px) {
  .cenik { padding-top: 48px; }
}

/* iPad na výšku (600–820 px) dostával telefonní tlačítka přes celou šířku (707–754 px)
   a působil jako roztažený telefon. Od 600 px mají šířku podle obsahu, nejmíň 280 px. */
@media (min-width: 600px) and (max-width: 820px) {
  .tym-row-head .btn, .half-actions .btn, .page-cta .btn, .poukaz-actions .btn,
  .psec .half-actions .btn, .svc-actions .btn { flex: 0 0 auto; width: auto; min-width: 280px; }
  .book-wrap { width: auto; align-items: flex-end; }
  .tym-row-head .book { width: auto; }
}

/* Širší než 1920 px (QHD, 4K): Kdo jsme a Poukaz drží kompozici z 1920 px. Dřív text
   visel u levého okraje, mezi ním a figurami zbylo 700–1980 px a Poukaz nelícoval
   s ostatními sekcemi. Pozadí jde dál přes celou šířku. */
@media (min-width: 2000px) {
  .kdo-sticky { padding-inline: calc((100vw - 1920px) / 2); }
  .poukaz-grid { grid-template-columns: calc((100vw - var(--container)) / 2 + 560px) minmax(0, 1fr); }
  .poukaz-copy { padding-left: calc((100vw - var(--container)) / 2); }
}

/* Tmavé komponenty: nativní prvky (spin-tlačítka čísla, posuvníky, autofill) se jinak
   kreslí ve světlé variantě. Béžové sekce zůstávají bez color-scheme. */
.wiz, .ck, .ck-dlg, .chooser, .mnav, .nav { color-scheme: dark; }

/* ---- Tým: přepisy, které musí být až za bloky pásů (821–1199 a ≤820) ---- */
/* 821–1199 px s myší (okno na půl monitoru): pás se kolečkem neposune, takže se vejde všech 6 postav */
@media (min-width: 821px) and (max-width: 1199px) and (hover: hover) and (pointer: fine) {
  .lineup { overflow: visible; margin: 0; padding: 0 8px 132px; }
  .plate-role { font-size: 12.5px; letter-spacing: 0; }
  .lineup--v, .lineup--s { height: min(400px, calc((100vw - 2 * var(--gutter) + 138px) / 5.348)); }
  @supports (width: 1cqw) { .lineup--v, .lineup--s { height: min(400px, calc((100cqw + 138px) / 5.348)); } }
}
/* telefon na šířku: tvář, jméno i tlačítko se musí vejít pod lištu najednou */
@media (orientation: landscape) and (max-height: 520px) {
  .lineup .fig { margin-left: 30px; }
  .lineup-floor + .fig { margin-left: 0; }
  .lineup--v, .lineup--s { height: clamp(200px, calc(100vh - 190px), 300px); }
  @supports (height: 1svh) { .lineup--v, .lineup--s { height: clamp(200px, calc(100svh - 190px), 300px); } }
}

/* Tlačítka Rezervovat pod jmény barberů ladí s tlačítkem pobočky: zaoblení 4 px, jantarová šipka
   ve světlé obrysové podobě (pás, telefon, dotyk). */
.plate .btn { border-radius: 4px; }
@media (max-width: 1199px), (hover: none) {
  .plate .btn svg { color: var(--amber); }
  .plate .btn:active svg { color: currentColor; }
}