/* =========================================================
   Sai Mai — branch chrome
   Header, promo bar, footer and the massage card, shared by
   every branch page (Ostrava / Opava). Load after base.css
   and before the page stylesheet.
   ========================================================= */

/* =========================================================
   Header
   ========================================================= */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--header);
  transition: transform .4s var(--ease-out), box-shadow .4s ease;
}
.hdr.is-stuck { box-shadow: 0 4px 16px rgba(20, 12, 5, .14); }
/* Schovaná hlavička (.is-hidden) má transform, a tím se stane rodičem
   i pro fixní panel menu. Zavřený panel čeká za pravým okrajem — bez
   tohohle by stránku rozšířil na ~780 px a na telefonu by šla posunout
   nebo oddálit do strany. Otevřený panel se neořízne: menu jde otevřít
   jen s viditelnou hlavičkou, a ta transform nemá. */
.hdr { overflow-x: clip; }

/* Auto-hide: the bar steps out of the way while you read down the page
   and comes back the moment you scroll up (see initHeader in main.js).
   It slides the full height of the header, promo bar included — both
   live inside .hdr — so nothing is left hanging at the top edge. */
.hdr.is-hidden { transform: translateY(-100%); }

.hdr__bar {
  position: relative;
  max-width: var(--content);
  margin: 0 auto;
  min-height: 96px;
  padding: 0 var(--s3);
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* V liště jsou dvě věci: značka vlevo, hamburger vpravo. Volnou šířku
   si bere logo, ne hamburger — kdyby si ji bral hamburger sám
   (margin-left:auto), přilepilo by se cokoli dalšího zleva na logo. */
.hdr__logo { margin-right: auto; }
.hdr__logo img { display: block; height: 56px; width: auto; }

/* ---------------------------------------------------------
   Menu — panel vyjíždějící od pravé hrany

   Rozbalovací kartička pod hamburgerem měla dvě slabiny: na desktopu
   visela v prázdné liště jako bublina a na mobilu se chovala úplně
   jinak (rozevírala výšku hlavičky). Jedna komponenta, dvě různé
   mechaniky, dvakrát tolik míst, kde se to rozejde.

   Teď je to na všech šířkách totéž: panel přes celou výšku okna,
   který přijede zprava. Zbytek stránky pod ním ztmavne, stránka se
   zamkne proti rolování a menu je jediná věc, se kterou jde pracovat —
   což je přesně to, co po otevření menu člověk chce.

   Hamburger zůstává na svém místě a překlopí se do křížku. Proto
   sedí nad panelem (z-index 3 vs 2) a proto má panel nahoře 112 px
   volného místa — tlačítko do něj nesmí spadnout na odkaz.

   Vrstvy uvnitř .hdr:  závoj 1 · panel 2 · hamburger 3
   --------------------------------------------------------- */

/* Lehké přejetí cíle na konci — panel i ramena hamburgeru „dosednou“. */
.hdr { --ease-back: cubic-bezier(.2, .9, .26, 1.08); }

/* Závoj má dvě části, protože hlavička je vlastní vrstva (z-index 50)
   a přes ni by fixní překryv ze stránky nedosáhl: body::after ztmaví
   stránku, .hdr::before hlavičku. Barva musí zůstat v obou stejná,
   jinak bude na spodní hraně lišty vidět předěl. */
/* Zámek rolování. Kompenzaci šířky posuvníku dopočítá JS (initMenu),
   aby stránka pod panelem nepodskočila. */
body.is-menu-open { overflow: hidden; }

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(24, 16, 8, .58);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease-out), visibility 0s linear .32s;
}
.hdr::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(24, 16, 8, .58);
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--ease-out), visibility 0s linear .32s;
}
body.is-menu-open::after,
body.is-menu-open .hdr::before {
  opacity: 1;
  visibility: visible;
  transition: opacity .32s var(--ease-out), visibility 0s;
}

.hdr__nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(420px, 100vw);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 112px var(--s5) var(--s5);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #4A3728 0%, #2C2117 100%);
  border-left: 1px solid rgba(197, 160, 89, .28);
  box-shadow: var(--shadow-dark);
  /* visibility drží zavřený panel mimo pořadí tabulátoru — odsunutý
     odkaz je pořád zaostřitelný, jen ho není vidět. */
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .34s var(--ease-out), visibility 0s linear .34s;
}
.hdr__nav.is-open {
  visibility: visible;
  transform: none;
  transition: transform .42s var(--ease-back), visibility 0s;
}

.hdr__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 18px 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: var(--lh1);
  letter-spacing: 2px;
  color: var(--cream-warm);
  text-transform: uppercase;
  /* Odkazy dojedou za panelem, jeden po druhém. Zavírání je naopak
     najednou — odcházející menu se nemá s kým loučit po řádcích. */
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .3s var(--ease-out),
              transform .4s var(--ease-out),
              color .25s ease;
}
.hdr__link + .hdr__link { border-top: 1px solid rgba(227, 217, 206, .1); }

/* Firemní šipka (--arrow z base.css) jako maska, aby brala barvu řádku. */
.hdr__link::after {
  content: "";
  flex: none;
  margin-left: auto;
  width: 20px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--arrow) no-repeat center / contain;
  mask: var(--arrow) no-repeat center / contain;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .25s ease, transform .3s var(--ease-out);
}

.hdr__nav.is-open .hdr__link { opacity: 1; transform: none; }
.hdr__nav.is-open .hdr__link:nth-child(1) { transition-delay: .10s; }
.hdr__nav.is-open .hdr__link:nth-child(2) { transition-delay: .15s; }
.hdr__nav.is-open .hdr__link:nth-child(3) { transition-delay: .20s; }
.hdr__nav.is-open .hdr__link:nth-child(4) { transition-delay: .25s; }
.hdr__nav.is-open .hdr__link:nth-child(5) { transition-delay: .30s; }
.hdr__nav.is-open .hdr__link:nth-child(6) { transition-delay: .35s; }

.hdr__nav.is-open .hdr__link:hover,
.hdr__nav.is-open .hdr__link:focus-visible { color: var(--gold-light); transition-delay: 0s; }
.hdr__nav.is-open .hdr__link:hover::after,
.hdr__nav.is-open .hdr__link:focus-visible::after { opacity: .9; transform: none; }

/* Barva sama nese aktivní stav; sloupek visí v odsazení panelu, takže
   říká „tady stojíš“ a přitom neposouvá text řádku. */
.hdr__link.is-active { color: var(--gold); }
.hdr__nav .hdr__link.is-active::before {
  content: "";
  position: absolute;
  left: calc(var(--s3) * -1);
  top: 50%;
  width: 2px;
  height: 18px;
  margin-top: -9px;
  border-radius: 2px;
  background: var(--gold);
}

.hdr__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  height: 40px;
  padding: 0 var(--s3);
  border-radius: 9999px;
  border: 1px solid var(--line);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 12px;
  line-height: var(--lh1);
  letter-spacing: 1.68px;
  color: var(--cream-warm);
  white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, opacity .3s var(--ease-out), transform .4s var(--ease-out);
}
.hdr__pill:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--cream-warm); }
.hdr__pill:hover .hdr__pill-ico { color: var(--gold); }

/* Přepínač poboček žije jen tady, na dně panelu. V liště stával taky,
   ale to byl dvakrát týž ovladač 30 px od sebe — a hlavně: pobočku si
   člověk vybírá na rozcestníku při příchodu, ne uprostřed čtení. Trvalé
   místo v hlavičce si taková akce nezaslouží. */
.hdr__pill--inmenu {
  align-self: flex-start;
  margin-top: auto;
  opacity: 0;
  transform: translateX(24px);
}
.hdr__nav.is-open .hdr__pill--inmenu { opacity: 1; transform: none; transition-delay: .40s; }
/* Bez tohohle by si pilulka po otevření panelu nesla zpoždění .40s i do
   hoveru a podbarvení by naskočilo skoro půl vteřiny po kurzoru. */
.hdr__nav.is-open .hdr__pill--inmenu:hover,
.hdr__nav.is-open .hdr__pill--inmenu:focus-visible { transition-delay: 0s; }

/* Location-pin glyph on the branch switcher — reads as "our places",
   which is what the pill now leads to (the rozcestník / branch chooser).
   Drawn inline so it inherits the pill's cream/gold colour transitions. */
.hdr__pill-ico {
  flex: none;
  width: 15px;
  height: 15px;
  color: var(--gold);
  transition: color .25s ease;
}

/* ---------------------------------------------------------
   Hamburger

   Kolečko kolem ikony je pryč — v liště, kde vedle stojí pilulka
   „Pobočky“, byly dva kroužky vedle sebe a jeden z nich nic neříkal.
   Zůstaly tři linky; klikací plocha má pořád 44 px, jen ji není vidět.

   Překlop do křížku běží na dvě doby a v obou směrech:
     otevírání – prostřední linka zmizí a teprve pak se ramena složí,
     zavírání  – ramena se rozloží první, prostřední se vrátí za nimi.

   Ramena míří do středu o 8 px, což je přesně mezera 6 px plus 2 px
   výšky linky — když se změní mezera, musí se změnit i posun.
   --------------------------------------------------------- */
.hdr__burger {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  /* Bez rámečku by ikona vypadala odsazená dál od kraje než pilulka
     vedle ní — plocha tlačítka je širší než samotné linky. */
  margin-right: -9px;
}
.hdr__burger span {
  display: block;
  height: 2px;
  width: 26px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--cream-warm);
  transition: transform .42s var(--ease-back),
              opacity .18s ease,
              width .3s var(--ease-out),
              background-color .3s ease;
}
/* Zpoždění platí pro cestu zpátky: při zavírání se prostřední linka
   vrátí až potom, co se ramena rozloží. Otevřený stav si ho níž nuluje. */
.hdr__burger span:nth-child(2) { transition-delay: .06s; }
.hdr__burger:hover span { background: var(--gold-light); }
.hdr__burger:hover span:nth-child(2) { width: 16px; }

.hdr__burger[aria-expanded="true"] span { width: 24px; background: var(--gold-light); }
.hdr__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); transition-delay: .08s; }
.hdr__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.15); transition-duration: .16s, .12s; transition-delay: 0s; }
.hdr__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); transition-delay: .08s; }

/* ---------------------------------------------------------
   Desktop — klasická navigace v liště

   Na širokém displeji jsou odkazy vidět rovnou v liště a hamburger
   se neukazuje (rozhodnutí 10/2026). Panel zprava zůstává jen pro
   tablet a mobil. Pilulka „Pobočky“ stojí na konci řádku odkazů.
   Hranice 1101 px: pod ní se šest odkazů s logem do řádku nevejde.
   --------------------------------------------------------- */
@media (min-width: 1101px) {
  .hdr__burger { display: none; }

  /* Logo vlevo, odkazy přesně uprostřed lišty, Pobočky vpravo. Nav
     leží přes celou lištu (inset: 0), aby se odkazy centrovaly vůči ní
     a ne vůči místu za logem; kliky propouští k logu pod sebou. */
  .hdr__nav {
    position: absolute;
    inset: 0;
    z-index: auto;
    width: auto;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: var(--s4);
    padding: 0 var(--s3);
    pointer-events: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    visibility: visible;
    transform: none;
    transition: none;
  }

  .hdr__nav > * { pointer-events: auto; }

  .hdr__link {
    padding: var(--s1) 0;
    font-size: 12px;
    letter-spacing: 1.68px;
    opacity: 1;
    transform: none;
    transition: color .25s ease;
  }
  .hdr__link + .hdr__link { border-top: 0; }
  .hdr__link::after { display: none; }
  .hdr__link:hover,
  .hdr__link:focus-visible { color: var(--gold-light); }

  /* Aktivní stránka: zlatá barva a krátká linka pod slovem
     (v panelu je to sloupek vlevo). */
  .hdr__nav .hdr__link.is-active::before {
    left: 0;
    right: 0;
    top: auto;
    bottom: -2px;
    width: auto;
    height: 1px;
    margin: 0;
  }

  .hdr__pill--inmenu {
    position: absolute;
    top: 50%;
    right: var(--s3);
    margin: -20px 0 0;
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------
   Promo bar — the month's offer
   Was a white strip of pulsing black caps, which fought the dark
   header and was hard to read mid-fade. Now it continues the header
   downward: a warm band carrying a gold chip, the offer, and a link.
   A single highlight sweeps across every 7s instead of the whole bar
   breathing, so the text never drops in contrast.
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   Promo lišta

   Tři věci z ní dělaly obecný "sale banner", který by šel vyměnit
   s jakýmkoli jiným webem, a všechny tři jsou pryč:

     – zlatá pilulka s hvězdičkou a proloženými verzálkami. To je nejvíc
       obehraný prvek téhle komponenty vůbec. Popisek se místo toho stal
       součástí věty ("Akce měsíce — ...") a nekřičí vedle ní.
     – přejíždějící lesk (promoSweep). Diagonální záblesk přes proužek
       je značka výprodeje, ne studia s thajskou masáží.
     – šipka napsaná jako znak "→". Web má vlastní šipku (--arrow
       v base.css) a používá ji na každém tlačítku; tady jediná chyběla.

   Co zůstalo, je řeč zbytku webu: nabídka vysázená v Lora, malý zlatý
   kosočtverec jako ornament a firemní šipka u odkazu.
   --------------------------------------------------------- */
/* ---------------------------------------------------------
   Barva: hlavička, jen zesvětlená

   Lišta prošla třemi stavy a každý měl svůj důvod. Nejdřív měla přesně
   barvu .hdr nad sebou a splývala s ní — klientčina připomínka zněla
   doslova „dala bych tomu jinou barvu, ať to nesplývá". Pak byla zlatá
   a bylo to opačné extrém: zlatá plocha přes celou šířku křičela
   hlasitěji než hero pod ní. Pak přišla --brown (#7D5630), což už je
   ale jiná hnědá, ne táž rodina — vedle tmavé hlavičky vypadala jako
   samostatný prvek přilepený zespoda.

   Teď je to hlavička sama, jen zesvětlená: --header-light (#55402F)
   proti --header (#3D2E22). Táž barva o dva stupně výš, takže lišta
   patří k navigaci a předěl je přesto vidět na první pohled.

   Text zůstává krémový. Kontrast --cream-warm na --header-light je
   8,3:1, tedy s rezervou nad AA (4,5:1) i pro drobné písmo — světlejší
   --brown dával 5,6:1, tohle je čitelnější, ne horší.

   ZLATÁ SEM NA TEXT POŘÁD NEPATŘÍ: --gold na --header-light má 4,0:1,
   pod hranicí pro 12–14px. Proto je zlatý jen kosočtverec, který nenese
   žádnou informaci. Odkaz se odlišuje podtržením, ne barvou.

   Gradient nepřidává novou barvu — jen ztmavuje okraje průsvitnou
   vrstvou, takže střed pásu, kde leží text, je nejsvětlejší.
   --------------------------------------------------------- */
.promo {
  position: relative;
  /* Bez linek nahoře i dole. Ta spodní byla vidět jako hnědý proužek:
     kreslila se krémovou na tmavém pozadí .hdr pod pásem, ne na zlaté. */
  background: var(--gold);
  padding: var(--s1) var(--s3);
}

.promo__inner {
  position: relative;
  max-width: var(--content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s1) var(--s3);
}

/* Kosočtverec je otočený čtverec, ne znak z fontu ani SVG — je to jediný
   tvar, u kterého si můžu být jistý, že vypadá všude stejně. */
.promo__mark {
  flex: none;
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: .9;
}

/* Ponecháno pro případ, že by se popisek měl vrátit jako samostatný
   štítek — na žádné stránce už se nepoužívá. */
.promo__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px var(--s2);
  border-radius: 9999px;
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px rgba(197, 160, 89, .45);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 11px;
  line-height: var(--lh2);
  letter-spacing: 1.6px;
  color: var(--gold-light);
  text-transform: uppercase;
  white-space: nowrap;
}

/* Lora, ne UI font. Jediná změna, která tu lištu posune od banneru
   k vysázené větě — a serif je hlas, kterým mluví zbytek webu. */
.promo__text {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: var(--lh2);
  color: var(--cream-warm);
  text-align: center;
}
.promo__text em { font-style: italic; color: var(--cream-hi); }
/* Sleva je to jediné číslo v celé větě. Odlišuje se řezem a světlostí,
   ne barvou — zlatá by na téhle hnědé spadla na 4,0:1 (viz .promo). */
.promo__text b { font-weight: 700; color: var(--cream-hi); }

.promo__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  line-height: var(--lh2);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--cream-hi);
  white-space: nowrap;
  /* Podtržený, aby na jednobarevném pásu šlo poznat, že je to odkaz.
     Zlatá, kterou se odkazy odlišují jinde na webu, sem nemůže — na
     --header-light nemá dost kontrastu. */
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color .25s ease;
}
/* Firemní šipka (--arrow v base.css), stejná jako na tlačítkách. */
.promo__link::after {
  content: "";
  flex: none;
  width: 20px;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
/* Rozsvítí se do bílé, ne do zlaté — hover nesmí kontrast snížit. */
.promo__link:hover { color: #fff; }
.promo__link:hover::after { transform: translateX(4px); }

/* =========================================================
   Massage card
   ========================================================= */
.mcard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  /* Lift + shadow live in base.css ("Card lift"). */
}

.mcard__media { height: 240px; overflow: hidden; }
.mcard__img {
  width: 100%;
  height: 100%;
  background-image: var(--img), var(--stripe);
  background-size: cover, auto;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  transition: transform .7s var(--ease);
}
.mcard:hover .mcard__img { transform: scale(1.08); }

.mcard__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3);
}
.mcard__head { display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.mcard__name {
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 20px;
  line-height: var(--lh2);
  text-align: center;
  color: var(--ink);
}
.mcard__desc { font-size: 15px; line-height: var(--lh2); text-align: center; color: var(--body); }

.prices { flex: 1; align-self: stretch; display: flex; flex-direction: column; gap: var(--s1); }
.prices__row {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  padding-bottom: var(--s1);
  border-bottom: 1px dashed rgba(196, 149, 106, .3);
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: 15px;
  line-height: var(--lh2);
}
/* Tmavší odstíny téže hnědé: původní světlá měď měla kontrast ~2,5:1
   a na telefonu venku se ceník skoro nedal přečíst. */
.prices__row dt { color: var(--muted); }
.prices__row dd { color: var(--brown); }
/* Cena po slevě z Termina (viz initTermino v main.js): původní cena
   přeškrtnutá a ztlumená, platná zůstává v barvě ceníku. */
.prices__old { margin-right: 6px; font-weight: 400; opacity: .6; }

/* Masáž nebo délka, kterou salon v Terminu nenabízí, initTermino
   schová atributem hidden. Tyhle prvky mají vlastní display, který
   by ho jinak přebil. .mrow má totéž v page-masaze.css. */
.mcard[hidden], .prices__row[hidden], .promo[hidden] { display: none; }

.mcard__cta {
  font-weight: 600;
  font-size: 16px;
  line-height: var(--lh2);
  color: var(--brown-deep);
  text-transform: uppercase;
  text-align: center;
  transition: color .25s ease;
}
.mcard__cta:hover { color: var(--gold); }
/* Signature arrow (see .btn--arrow / --arrow in base.css) rendered inline
   after the label so this text link speaks the same arrow as the CTAs.
   inline-block keeps the element's existing block/centred layout intact. */
.mcard__cta::after,
.faq__link::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 11px;
  margin-left: var(--s1);
  vertical-align: middle;
  background: currentColor;
  -webkit-mask: var(--arrow) center / contain no-repeat;
          mask: var(--arrow) center / contain no-repeat;
  transition: transform .35s var(--ease);
}
.mcard__cta:hover::after,
.faq__link:hover::after { transform: translateX(4px); }

/* =========================================================
   Footer
   ========================================================= */
.footer {
  background: var(--footer);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--s10) var(--edge) var(--s5);
}
.footer__inner { max-width: var(--content); margin: 0 auto; }
.footer__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--s6);
  padding-bottom: var(--s7);
}
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.footer__col--brand { gap: var(--s2); }

/* Stejné logo jako v hlavičce, o něco menší — patička ho nemá přebíjet. */
.footer__logo { display: inline-flex; }
.footer__logo img { height: 48px; width: auto; }

.footer__about {
  max-width: 280px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  color: rgba(255, 255, 255, .65);
}
.footer__social { display: flex; gap: var(--s2); margin-top: var(--s1); }

.footer__head {
  font-family: var(--font-num);
  font-weight: 400;
  font-size: 22px;
  line-height: var(--lh5);
  color: rgba(255, 255, 255, .85);
}
.footer__col a,
.footer__social a,
.footer__contact a,
.footer__contact span {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: var(--lh2);
  color: rgba(255, 255, 255, .65);
  transition: color .25s ease;
}
.footer__col a:hover, .footer__social a:hover, .footer__contact a:hover { color: var(--copper); }
.footer__contact { font-style: normal; display: flex; flex-direction: column; gap: var(--s1); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--s2);
  border-top: 1px solid rgba(255, 255, 255, .15);
  padding-top: var(--s3);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: var(--lh1);
  color: rgba(255, 255, 255, .45);
}
/* Právní odkazy ve spodním řádku patičky. Zlatá z base.css by tu
   svítila víc než copyright vedle — tohle je stálice, ne pozvánka,
   takže se drží tónu řádku a rozsvítí se až pod kurzorem. */
.footer__bottom a,
.footer__cc {
  color: rgba(255, 255, 255, .62);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .25s var(--ease-out);
}
.footer__bottom a:hover,
.footer__cc:hover { color: var(--gold-light); }
/* Odvolání souhlasu není odkaz na stránku, ale akce — musí to být
   tlačítko, jinak by ho čtečka ohlásila jako navigaci nikam.
   Písmo dědí z .footer__bottom, reset tlačítek řeší base.css. */
.footer__cc { font: inherit; }

/* ---------------------------------------------------------
   Podpis autora webu

   Vodoznak, ne reklama. Visí na konci copyrightu — tam, kde se podpisy
   čekají — a v klidu je utlumený stejně jako řádek kolem něj. Rozsvítí
   se až pod kurzorem, což je tentýž slib jako u právních odkazů vedle.

   Bez podtržení: sousední odkazy jsou povinné čtení a podtržení je tam
   navigační značka. Tenhle odkaz je zdvořilost, ne položka řádku, a
   podtržená značka pod logem by navíc vypadala jako chyba sazby.
   --------------------------------------------------------- */
/* Selektor musí být stejně silný jako .footer__bottom a výš, jinak by
   ten obecný odkaz přebil podtržení i barvu.

   align-items: baseline, ne center. Obrázek má účaří na své spodní hraně
   a nápis „dushe" na ní taky stojí — nemá jediný podřízený tah. Logo tak
   sedí na stejné lince jako text vedle něj. Se středovým zarovnáním se
   celý 16px blok srovnával na střed 12px textu a logo viditelně kleslo
   pod jeho účaří. */
.footer__bottom .footer__maker {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s1);
  color: inherit;
  text-decoration: none;
}
/* SVG má napevno bílou výplň, takže se nedá obarvit přes currentColor —
   jeho hlasitost proto řídí průhlednost. .45 je krytí textu kolem něj.

   16px, ne 18: střední výška loga („ushe") zabírá 55 % jeho boxu, kdežto
   u 12px textu vedle jen asi polovinu. Při 18px logo text přerůstalo. */
.footer__makerLogo {
  height: 16px;
  width: auto;
  opacity: .45;
  transition: opacity .25s var(--ease-out);
}
.footer__maker:hover .footer__makerLogo,
.footer__maker:focus-visible .footer__makerLogo { opacity: 1; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .hdr__bar { gap: var(--s3); }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
}

@media (max-width: 960px) {
  .hdr__bar { min-height: 80px; gap: var(--s2); }
  .hdr__logo img { height: 40px; }
  /* Panel má nahoře volno podle nižší lišty (80 px místo 96). */
  .hdr__nav { padding: 96px var(--s4) var(--s4); }
  .hdr__nav .hdr__link.is-active::before { left: calc(var(--s2) * -1); }

  .promo__text { font-size: 12px; }
}

@media (max-width: 640px) {
  .promo { padding: var(--s1) var(--s2); }
  /* Chip on its own line, offer + link beneath it. */
  .promo__inner { gap: 6px var(--s2); }
  .promo__tag { font-size: 10px; letter-spacing: 1.2px; }
  .promo__text { font-size: 12px; letter-spacing: .2px; }

  .footer__cols { grid-template-columns: minmax(0, 1fr); gap: var(--s4); padding-bottom: var(--s5); }
  .footer__logo img { height: 40px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Recenze měly pevných 360 px. Na 360px telefonu tím karta seděla
     přesně od hrany k hraně a lišta přestala vypadat jako lišta —
     nebylo vidět, že vedle stojí další. Takhle vždycky vykoukne kus
     sousední karty a je poznat, že se dá posouvat. */
  .review { width: min(360px, 82vw); }
}

/* =========================================================
   Split section — the site's default text + photo band
   Photo bleeds off one page edge, copy sits on the opposite side.
   Used by: homepage (příběh, sauna), masáže (office syndrom, sauna),
   O nás (příběh). Any new "text next to a big photo" section should
   use this rather than inventing another composition.
   ========================================================= */
.split {
  display: grid;
  align-items: center;
  gap: var(--s12);
  padding-top: var(--s13);
}
.split--imgLeft  { grid-template-columns: 950fr 550fr; padding-right: var(--edge); }
.split--imgRight { grid-template-columns: 550fr 950fr; padding-left: var(--edge); }

/* The media wrapper must NOT clip — the gold rule sticks out past it.
   Clipping happens one level in, on .split__clip. */
.split__media { position: relative; }

.split__clip {
  position: relative;
  z-index: 1;
  height: 656px;
  overflow: hidden;
}
.split--imgLeft  .split__clip { border-radius: 0 var(--radius) var(--radius) 0; }
.split--imgRight .split__clip { border-radius: var(--radius) 0 0 var(--radius); }

.split__img {
  position: absolute;
  inset: -9% 0;
  background-image: var(--img), var(--stripe);
  background-size: cover, auto;
  background-position: center, 0 0;
  background-repeat: no-repeat, repeat;
  will-change: transform;
}

.split__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s4);
  max-width: 568px;
}
.split__text { font-size: 16px; line-height: var(--lh2); color: var(--body); }
.split__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* ---------------------------------------------------------
   Gold rule sitting BEHIND the photo (z-index 0 vs the clip's 1),
   offset outwards so it peeks out along two sides. It is a separate
   line the photo overlaps — not a border drawn on the image.

   It opens toward the edge the photo bleeds off, so it never closes
   into a box.
   --------------------------------------------------------- */
.split__frame {
  position: absolute;
  z-index: 0;
  top: calc(-1 * var(--s3));
  bottom: var(--s5);
  border: 1px solid var(--gold);
  opacity: .6;
  pointer-events: none;
}
/* Photo bleeds right → rule peeks out top and left. */
.split--imgRight .split__frame {
  left: calc(-1 * var(--s3));
  right: var(--s8);
  border-right: 0;
  border-radius: var(--radius) 0 0 var(--radius);
}
/* Photo bleeds left → mirrored, peeks out top and right. */
.split--imgLeft .split__frame {
  right: calc(-1 * var(--s3));
  left: var(--s8);
  border-left: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* The frame joins the draw-in hairlines (see base.css), but it is a
   three-sided box, not a line: scaling it would squash the vertical
   border into a smear on its way across. A clip-path wipe leaves every
   stroke at its true weight and simply uncovers them.
   Slower than a 64px rule because it has much further to travel.

   The wipe MIRRORS with the layout, and it has to. Most of this box is
   hidden behind the photo — only the two sides that stick out are ever
   seen. Wiping both variants left→right meant that on .split--imgRight,
   whose frame peeks out on the LEFT, the whole visible part appeared in
   the first instant and the remaining second of animation played out
   unseen behind the photo: the effect looked simply absent.

   So each frame is uncovered from behind the photo outwards, toward the
   corner it opens onto. Both then draw the same gesture, mirrored — the
   same way the frame's own geometry is mirrored. */
@keyframes frameWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes frameWipeMirror {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Photo bleeds left, frame opens right → uncover left to right. */
.js [data-reveal] .split__frame { clip-path: inset(0 100% 0 0); }
.js [data-reveal].is-visible .split__frame {
  animation: frameWipe 1.1s var(--ease-out)
             calc(var(--reveal-delay, 0ms) + var(--rule-delay)) forwards;
}

/* Photo bleeds right, frame opens left → the same gesture, mirrored. */
.js .split--imgRight [data-reveal] .split__frame { clip-path: inset(0 0 0 100%); }
.js .split--imgRight [data-reveal].is-visible .split__frame { animation-name: frameWipeMirror; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] .split__frame,
  .js .split--imgRight [data-reveal] .split__frame { clip-path: none; }
}

/* =========================================================
   FAQ — native <details>, so it works with JS disabled.
   Shared by masáže, poukaz and kontakt.
   ========================================================= */
.faq {
  display: grid;
  grid-template-columns: 480fr 720fr;
  gap: var(--s6);
  align-items: start;
  padding-bottom: var(--s13);
}
.faq__intro {
  position: sticky;
  top: 152px;   /* header 96 + promo + breathing room */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}
.faq__lede { max-width: 400px; font-size: 15px; line-height: var(--lh2); color: var(--body); }
.faq__link {
  margin-top: var(--s1);
  font-weight: 600;
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--gold);
  text-transform: uppercase;
}
.faq__link:hover { color: var(--brown); }

.faq__list { display: flex; flex-direction: column; gap: var(--s1); }
.qa {
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  overflow: hidden;
  transition: border-color .25s ease;
}
.qa[open] { border-color: var(--gold); }
.qa__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  cursor: pointer;
  font-family: var(--font-note);
  font-weight: 300;
  font-size: 18px;
  line-height: var(--lh3);
  color: var(--ink);
  list-style: none;
  transition: background .25s ease;
}
.qa__q::-webkit-details-marker { display: none; }
.qa__q:hover { background: rgba(197, 160, 89, .08); }
/* Chevron drawn in CSS so no icon asset is needed. */
.qa__q::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--copper);
  border-bottom: 2px solid var(--copper);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .3s var(--ease);
}
.qa[open] .qa__q::after { transform: rotate(-135deg) translate(-2px, -2px); }

.qa__a {
  margin: 0 var(--s4) var(--s3) var(--s4);
  padding-left: var(--s2);
  border-left: 3px solid var(--copper);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: var(--lh2);
  color: var(--body);
}

/* Odrážky uvnitř odpovědi. Globální reset v base.css bere seznamům
   puntíky i odsazení, takže sazby za prodloužení poukazu by jinak
   splynuly v jeden odstavec. Puntík je zlatý ::before, ne list-style —
   drží se stejné palety jako zbytek FAQ. */
.qa__a ul { margin: var(--s2) 0 0; display: flex; flex-direction: column; gap: var(--s1); }
.qa__a ul li { position: relative; padding-left: var(--s3); }
.qa__a ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.qa__a ul + * { margin-top: var(--s2); }

@media (max-width: 1180px) {
  .faq { grid-template-columns: minmax(0, 1fr); }
  .faq__intro { position: static; }
  .split { gap: var(--s7); }
  .split__clip { height: 520px; }
}
@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-left: 0; padding-right: 0; }
  .split__body { padding: 0 var(--edge); max-width: 100%; }
  .split__media { order: -1; }
  /* Pod sebou: fotka drží stejné boční odsazení a zaoblení jako
     ostatní fotky na stránce (dřív šla od kraje ke kraji bez rádiusu
     a z rytmu stránky vypadávala). Zlatý rám tu nemá kam vykouknout. */
  .split__media { padding: 0 var(--edge); }
  .split__clip { height: 384px; border-radius: var(--radius) !important; }
  .split__frame { display: none; }
}
@media (max-width: 640px) {
  .qa__q { padding: var(--s3); font-size: 16px; }
  .qa__a { margin-left: var(--s3); margin-right: var(--s3); }
  .split__clip { height: 280px; }
}

/* =========================================================
   Check list (voucher benefits, wellness inclusions)
   ========================================================= */
.checks { display: flex; flex-direction: column; gap: var(--s2); }
.checks li {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: 16px;
  line-height: var(--lh2);
  color: var(--body);
}
/* Fajfka v bledém kolečku je nejobyčejnější odrážka internetu. Teď je
   to jen zlatý tah — kreslený maskou, takže nezávisí na písmu systému.
   Znak ✓ z HTML zmizel, <span> zůstává jako nosič. */
.checks__mark {
  flex: none;
  width: 18px;
  height: 18px;
  background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 9.6c1.6 1 3 2.4 4 4.2C8.6 8.6 11.6 5.2 15.6 3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M2.5 9.6c1.6 1 3 2.4 4 4.2C8.6 8.6 11.6 5.2 15.6 3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* =========================================================
   Recenze — marquee (shared: homepage + O nás)
   ========================================================= */
/* No band of its own: the section sits on the page cream like every
   other section, and the cards keep the usual --surface fill, so they
   read as cards here exactly as they do everywhere else on the site. */
/* One section break above, not three stacked ones. This used to add a
   104px margin on top of its own 88px padding, and on the O nás page the
   gallery closed with another 104px of its own — nearly 300px of empty
   cream between two sections that belong to the same page. The top space
   is now the same --s13 every other section opens with. */
.reviews {
  padding: var(--s13) var(--edge) var(--s11);
}
.reviews__inner { display: flex; flex-direction: column; gap: var(--s6); }

/* ---------------------------------------------------------
   Marquee — a calm, continuously drifting rail of reviews.
   The track holds two identical sets; it slides left by exactly one
   set width (-50%) and loops seamlessly. Each card carries its gap as
   margin-right (not a flex `gap`) so the wrap point spaces identically
   to every other card — a flex gap would leave a seam at the loop.
   Slow by design (60s): it should read as a gentle current, not a
   conveyor belt. Pauses when hovered or focused within.
   --------------------------------------------------------- */
.reviews__marquee {
  position: relative;
  /* Full-bleed přesně o vlastní odsazení sekce, ne přes 100vw.
     100vw počítá i svislý scrollbar, takže pás vycházel o jeho šířku
     (na Windows ~15 px) širší než viewport a `margin-left: calc(50% -
     50vw)` ho o polovinu toho odsunul doleva — celý pás byl mimo osu
     a přetékal ven. Vidět to nebylo jen proto, že body má
     overflow-x: hidden, což chybu schová, ale neopraví.
     Zápornou marží o --edge to vyjde na pixel a na scrollbaru
     nezávisle. */
  margin-inline: calc(var(--edge) * -1);
  overflow: hidden;
  /* Fade both edges into the section background. */
  -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reviews__track {
  display: flex;
  width: max-content;
  padding: var(--s3) 0;
  /* Dobu cyklu dodává --marquee-time inline v HTML, protože se musí
     měnit s délkou pásu — jinak by každá přidaná recenze text
     zrychlila. Počítá ji tools/vygeneruj-recenze.pl z pevné rychlosti
     30 px/s, tam se taky mění. 60 s je jen záloha, kdyby proměnná
     chyběla. */
  animation: reviewsMarquee var(--marquee-time, 60s) linear infinite;
}
.reviews__marquee:hover .reviews__track,
.reviews__marquee:focus-within .reviews__track { animation-play-state: paused; }
@keyframes reviewsMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.review {
  flex: none;
  width: 360px;
  margin-right: var(--gutter);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s3);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}

/* Pořadí karty kopíruje Google: kdo, kolik hvězd, co napsal.
   Velká uvozovka, která tu dřív stála nad textem, je pryč — na
   Googlu žádná není a nad kroužkem s profilovkou by si s ní
   překážela. Kdyby se měla vrátit, patří sem .review__mark. */
.review__head {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.review__text { flex: 1; font-size: 16px; line-height: var(--lh2); color: rgba(0, 0, 0, .92); }
.review__who { display: flex; align-items: center; gap: var(--s2); }
/* Iniciála ve zlatém kroužku, a přes ni profilovka, pokud ji máme.
   Ne místo ní: kdyby se soubor nenačetl nebo u recenze žádný není,
   zůstane vidět písmeno a karta nikdy nezeje prázdným kroužkem.
   Stock fotky sem nepatří — buď je to skutečná profilovka toho
   člověka, nebo jen iniciála. */
.review__avatar {
  position: relative;
  overflow: hidden;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--gold-soft);
  box-shadow: inset 0 0 0 1px rgba(197, 160, 89, .5);
  font-family: var(--font-note);
  font-size: 17px;
  line-height: 1;
  color: var(--brown);
}
/* Profilovka vyplní kroužek a ořízne se do něj. Iniciála pod ní
   zůstává v DOMu jako záloha, jen ji fotka překryje. */
.review__avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* min-width: 0 — flexové položce jinak platí min-width: auto a nesmrskne
   se pod šířku svého obsahu. Jména z Googlu si nevybíráme; dvojité
   příjmení by kartu roztáhlo a vyteklo z ní. Takhle se zalomí. */
.review__name {
  min-width: 0;
  font-family: var(--font-note);
  font-size: 22px;
  line-height: var(--lh3);
  color: var(--ink);
}
/* Žlutá #FBBC04 je přesně ta, kterou používá Google u hvězdiček
   v recenzích. Je studenější a svítivější než zlatá webu (--gold
   #C5A059) a v krémové kartě je vidět, že je „odjinud" — o to tu ale
   jde: hvězdičky mají číst jako převzaté hodnocení z Googlu, ne jako
   ozdoba stránky. Jestli bude na webu působit moc křiklavě, stačí
   přepsat tenhle jeden řádek na var(--gold).

   Prokládání: 1,68 px z okolních popisků je u hvězdiček moc, rozpadly
   by se na pět samostatných znaků místo jednoho hodnocení. Prázdná
   hvězdička (☆) se od plné liší tvarem, takže u nižšího hodnocení
   funguje i ve stejné barvě. */
.review__stars {
  font-size: 17px;
  line-height: var(--lh2);
  letter-spacing: .1em;
  color: #FBBC04;
}

@media (prefers-reduced-motion: reduce) {
  /* The marquee must not drift. The global base.css rule freezes the
     animation at .01ms — which would leave it parked mid-slide — so stop
     it outright, drop the duplicate set, remove the edge mask, and let
     the rail be scrolled by hand instead. */
  .reviews__track { animation: none !important; transform: none !important; }
  .reviews__marquee {
    overflow-x: auto;
    -webkit-mask: none;
            mask: none;
    scroll-snap-type: x proximity;
  }
  .review--dup { display: none; }
  .review { scroll-snap-align: start; }
}

/* =========================================================
   Pás plateb — nekonečná lišta log

   Jede zprava doleva, na obou koncích se vytrácí a nikdy nedojede.

   KOLIK KOPIÍ A PROČ. Nejdřív tu byly dvě sady a stopa se posouvala
   o -50 %, tedy přesně o jednu sadu. To vypadá jako bezešvá smyčka jen
   do chvíle, kdy je pás širší než jedna sada — a ten je přes celou
   stránku. Devět log po 152 px je 1368 px; na monitoru 1920 px tak za
   druhou sadou zbylo 550 px prázdna, které dojelo do záběru pokaždé,
   než se smyčka přetočila.

   Teď jsou sady čtyři a posun je pořád -50 %, tedy o dvě sady. Ve chvíli
   přetočení zbývají vpravo další dvě sady, což je 2736 px souvislých log.
   Tak široký pás pokryje každé rozumné okno; kdyby se logo zvětšilo nebo
   ubylo, tenhle výpočet se musí zopakovat, jinak se mezera vrátí.

   BÍLÉ POZADÍ LOG ŘEŠÍ mix-blend-mode: multiply, ne editace obrázků.
   Násobení bílou vrací podklad, takže bílé okolí loga splyne s pásem —
   a nehrozí, že by ořezávání pixelů sežralo bílé části uvnitř samotné
   značky (kolečka Mastercardu, text v Up). Aby to fungovalo, musí mít
   .paybar__track vlastní pozadí: animace transformem z něj dělá vlastní
   vrstvu a logo se pak násobí s tím, co je uvnitř ní, ne s pásem.

   POZOR: multiply si poradí jen s bílým pozadím. Pluxee (zelený čtverec),
   Up (oranžový) a Benefity (kruh přes celou plochu) mají barvu natištěnou
   v souboru a zůstanou jako dlaždice. Odstraní je jedině průhledné PNG
   nebo SVG od dodavatele.
   ========================================================= */
/* Krém stránky, ne světlejší --surface: pás nemá být proužek, jen kus
   stránky, po kterém jedou loga.

   Obě pozadí níž musí být TATÁŽ barva jako <body>. Bílé okolí log mizí
   násobením, takže se z něj stane přesně ta barva, která je pod ním —
   kdyby se lišila, obtáhne se každé logo světlejším obdélníkem. */
.paybar {
  padding: var(--s7) 0;
  background: var(--cream);
}
/* Pás má odsazení symetrické, jenže sekce pod ním si přidává svých
   var(--s13) navrch — nad logy tak bylo 56 px a pod nimi 160. Tohle to
   odsazení ruší, takže vzduch nad logy i pod nimi dělá .paybar sám a je
   na obou stranách stejný. Specificita (0,2,0) přebije i .fben, které si
   padding-top nastavuje po svém. */
.paybar + .section { padding-top: 0; }

.paybar__marquee {
  position: relative;
  overflow: hidden;
  /* Oba konce se vytrácejí do pozadí pásu. */
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
          mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.paybar__track {
  display: flex;
  align-items: center;
  width: max-content;
  /* Nutné pro multiply u log — animace transformem dělá ze stopy vlastní
     vrstvu, takže se logo násobí s tímhle pozadím, ne s pásem pod ním.
     Musí být shodné s .paybar výš. */
  background: var(--cream);
  /* Čtyři sady, posun o dvě — proto trvá dvakrát tak dlouho jako
     u dvousadové verze, aby loga jela stejně rychle. */
  animation: payMarquee 76s linear infinite;
}
/* Zastavování pod kurzorem je pryč i tady. Drželo logo na místě, aby se
   stačilo obarvit — a to obarvení zmizelo s ostatními hover efekty na
   neklikatelných prvcích. Na samotné logo se není proč dívat déle. */

@keyframes payMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------------------------------------------------------
   Poznámka o příplatku

   Loga sama tvrdí „tímhle u nás zaplatíte" a nic víc — jenže u
   benefitních programů se k ceně účtuje +8 % (FKSP je bez příplatku,
   viz feedback klientky 8/2026), a to se člověk
   do teď dozvěděl až na kontaktu nebo ve FAQ. Klientka to chtěla mít
   napsané rovnou u platebních metod, což je správně: cenová podmínka
   patří k ceně, ne o tři kliknutí dál.

   Leží pod pásem, ne v něm: stopa s logy se posouvá a text v ní by
   ujel s ní. Šířka je omezená na 72ch, aby se poznámka na širokém
   monitoru nerozjela do jednoho dlouhého řádku přes celou obrazovku.

   Odsazení po stranách je pevné, NE var(--edge). Na to si dát pozor:
   --edge je na širokém monitoru přes 300 px na každou stranu, a protože
   box-sizing je border-box, ukrojilo se to zevnitř těch 72ch — obsah
   spadl na nulovou šířku a text se lámal po jednom slově na řádek.
   Vzduch po stranách tady dělá margin: auto, padding jen chrání text
   před hranou displeje na mobilu.
   --------------------------------------------------------- */
.paybar__note {
  max-width: 72ch;
  margin: var(--s4) auto 0;
  padding: 0 var(--s4);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: var(--lh2);
  color: var(--muted);
  text-align: center;
}
.paybar__note b {
  font-weight: 600;
  color: var(--brown);
}

.paylogo {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 152px;
  padding: 0 var(--s4);
}
.paylogo img {
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  /* Šedivá a utlumená: loga karet jsou doklad, ne ozdoba, a nemají
     přebíjet obsah kolem. */
  filter: grayscale(1) opacity(.5);
}

@media (max-width: 860px) {
  .paybar { padding: var(--s7) 0; }
  .paylogo { width: 120px; padding: 0 var(--s3); }
}

@media (prefers-reduced-motion: reduce) {
  /* Nic nejede — pás se stane obyčejnou vodorovně posuvnou lištou
     a druhá sada zmizí, aby se loga neopakovala. */
  .paybar__track { animation: none !important; transform: none !important; }
  .paybar__marquee {
    overflow-x: auto;
    -webkit-mask: none;
            mask: none;
  }
  .paylogo--dup { display: none; }
}

/* =========================================================
   CTA card — rounded photo panel (Pro firmy)
   Copy is centred over the middle of the photo, so it keeps a flat
   brown scrim rather than a hero-style bottom gradient.

   The homepage and O nás used to end on this card too; both now end on
   the scattered collage below instead.
   ========================================================= */
.cta-sec { padding-bottom: var(--s13); }
.cta {
  position: relative;
  min-height: 424px;
  border-radius: var(--s3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--s3);
  padding: var(--s6);
  text-align: center;
}
.cta__bg {
  position: absolute;
  inset: 0;
  background-image: var(--cta-img), var(--stripe);
  background-size: cover, auto;
  background-position: 50% 50%, 0 0;
  background-repeat: no-repeat, repeat;
}
.cta__scrim {
  position: absolute;
  inset: 0;
  background: rgba(58, 34, 21, .72);
}
.cta__title, .cta__lede, .cta__actions { position: relative; }
.cta__title { max-width: 616px; }
.cta__lede { max-width: 464px; font-size: 16px; line-height: var(--lh2); color: rgba(255, 255, 255, .9); }
.cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
}

@media (max-width: 640px) {
  .cta { padding: var(--s4); }
}

/* =========================================================
   Závěrečná rozptýlená koláž (.scatter) — sdílená: domů + O nás

   Poslední obraz stránky: výzva k rezervaci stojí uprostřed obrazovky,
   kolem ní se při scrollu jedna po druhé vynoří osm fotek ze studia a na
   konci dráhy se zase rozletí pryč, takže poslední věc před patičkou je
   samotná výzva. Efekt stojí na dvou vrstvách:

     .scatter        vysoká dráha (--track), po které se scrolluje
     .scatter__stage sticky plátno o výšce viewportu, přišpendlené na dobu
                     (--track - 100vh) — po tu dobu se přehrává animace

   Pozice každé fotky je autorská, zapsaná inline v HTML jako --l/--t
   (procenta plátna), --w (šířka), --ar (poměr stran), --r (náklon) a --d
   (kdy se ve scrollu má objevit, 0-1). JS (initScatter) z toho počítá jen
   průběh — nic o rozvržení neví, takže se fotka přidá, přesune nebo celá
   koláž přeskládá pro jinou stránku čistě v HTML. Proto tady nejsou žádné
   konkrétní fotky ani souřadnice: tenhle soubor umí koláž, ne jednu
   konkrétní koláž.

   Kompozice drží uprostřed volné pole (x 26-74 %, y 28-72 %) pro text.
   .scatter__veil je krémový závoj, který navíc utlumí všechno, co by se
   do něj přece jen dostalo — na úzkých displejích, kde je volného místa
   málo, je to jediné, co drží nadpis čitelný.
   ========================================================= */
.scatter-sec {
  /* Plátno je záměrně přes celou šířku, bez --edge: fotky mají výřezem
     viewportu končit, ne dosednout na 1280px sloupec. */
  position: relative;
  padding: var(--s13) 0;
  --track: 260vh;
  --k: 1;      /* společné měřítko fotek, klesá s viewportem */
}
.scatter { height: var(--track); }

.scatter__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;   /* na mobilu se plátno neschová pod lištu prohlížeče */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scatter__field { position: absolute; inset: 0; }

.scatter__ph {
  position: absolute;
  left: var(--l);
  top: var(--t);
  width: calc(var(--w) * var(--k));
  aspect-ratio: var(--ar, 4 / 5);
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
  /* Výchozí (bez JS) stav = hotová koláž. JS ji níž schová a rozehraje. */
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
.scatter__ph img { width: 100%; height: 100%; object-fit: cover; }

/* JS řídí opacity i transform po snímcích, proto sem nepatří transition —
   plynulost dělá scroll sám. Vlastní vrstvu v kompozitoru fotky dostanou
   jen po dobu, kdy je koláž na dohled (.is-live) — trvalé vrstvy by si
   držely paměť po celou návštěvu stránky. */
.js .scatter__ph { opacity: 0; }
.js .is-live .scatter__ph { will-change: transform, opacity; }

/* Krémový závoj — barva je var(--cream) #F3ECDD rozepsaná do rgba,
   protože gradient potřebuje i nulovou alfu téhož odstínu. */
.scatter__veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 46% 40% at 50% 50%,
    rgba(243, 236, 221, 1) 0%,
    rgba(243, 236, 221, .96) 42%,
    rgba(243, 236, 221, .6) 70%,
    rgba(243, 236, 221, 0) 100%);
}

.scatter__core {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  width: min(640px, calc(100% - 2 * var(--margin)));
  text-align: center;
}
.scatter__lede { max-width: 464px; color: var(--body); }
.scatter__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--s2);
}

@media (max-width: 1180px) {
  .scatter-sec { --k: .82; --track: 240vh; }
}

@media (max-width: 860px) {
  .scatter-sec { --k: .62; --track: 220vh; }
}

@media (max-width: 640px) {
  .scatter-sec { --k: .5; --track: 200vh; }
  .scatter__actions { width: 100%; }
  /* Volného pole je tu tak málo, že závoj musí sahat dál a být hustší. */
  .scatter__veil {
    background: radial-gradient(ellipse 72% 40% at 50% 50%,
      rgba(243, 236, 221, 1) 0%,
      rgba(243, 236, 221, .97) 55%,
      rgba(243, 236, 221, .7) 78%,
      rgba(243, 236, 221, 0) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Koláž se nerozehrává — stojí hotová a plátno se odšpendlí, aby po ní
     nebylo potřeba scrollovat naprázdno. */
  .js .scatter__ph,
  .js .is-live .scatter__ph { opacity: 1; will-change: auto; }
  .scatter { height: auto; }
  /* relative, ne static: fotky (absolute) se jinak vztahují k vnějšímu
     rodiči, overflow:hidden plátna je neořízne a vyčnívají za okraj. */
  .scatter__stage { position: relative; }
}

/* =========================================================
   Časová osa kroků — sdílená: Dárkové poukazy + Pro firmy

   Prefix p- je historický: komponenta vznikla na poukazech a jméno
   zůstalo, aby se nemusela přejmenovávat ve dvou stránkách naráz.
   Se stránkou poukazů nemá nic společného — používá ji i Pro firmy
   a bude ji používat cokoli dalšího, co potřebuje očíslované kroky
   s fotkou.
   ========================================================= */

/* =========================================================
   Jak to funguje — čtyři kroky kolem osy, propojené vlnovkou

   Byly to čtyři stejné bílé kartičky v řadě, spojené čárkovanou linkou.
   Teď se kroky střídají kolem svislé osy, každý s vlastní fotkou, a osu
   kreslí zlatá vlnovka, která se dopisuje scrollem.

   SYMETRIE JE TU PRAVIDLO, NE NÁHODA. Obrázky mají stejný poměr (3:2),
   stejný rádius, stejný stín a stejnou šířku sloupce; liché a sudé kroky
   se liší výhradně tím, do kterého sloupce mřížky padnou. Čísla sedí na
   vnitřní hraně fotky, tedy zrcadlově. Když sem přibude pátý krok, sedne
   si sám — jen se musí prodloužit dráha v SVG.
   ========================================================= */
.psteps { padding-bottom: var(--s12); }

/* Dvě vrstvy, protože do <ol> patří jen <li>: .ptrack je kreslicí plocha
   pro křivku, .ptrack__steps je samotný seznam kroků. */
.ptrack {
  position: relative;
  max-width: 1080px;
  margin: var(--s8) auto 0;
}
.ptrack__steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}

/* Křivka leží přes celý blok a roztahuje se s ním (preserveAspectRatio
   none). Vodorovné roztažení je u dekorativní vlnovky v pořádku; co
   v pořádku není, je roztažená tloušťka čáry, a tu drží
   vector-effect="non-scaling-stroke" na 1 px při jakémkoli měřítku.

   pathLength="1" přepočítá délku dráhy na jedničku, takže JS nastavuje
   stroke-dashoffset prostě od 1 do 0 a o skutečné délce křivky nemusí
   vědět nic. Bez JS je dráha celá vykreslená (dashoffset 0). */
.ptrack__line {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
/* Krytí 0,5, a je to hierarchie, ne odhad. Číslice je #D5BB87, což je
   var(--gold) v 65 % na krému — když měla křivka 0,8, byla ze všech tří
   prvků nejsilnější a sekce čela jako tři věci ve stejné barvě. Pořadí
   má být: nadpis (inkoust) → číslo (zlatá 65 %) → křivka. Ta proto musí
   zůstat pod číslem; při změně barvy číslice se musí posunout i tohle.
   Šířka zůstává 2 px, aby linka nezmizela úplně. */
.ptrack__line path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .5;
}
/* Obecné pro každou linku, která se má dokreslovat scrollem (initDraw
   v main.js). Bez JS zůstane dráha celá vykreslená. */
.js [data-draw] svg path { stroke-dasharray: 1; stroke-dashoffset: 1; }

.pstep {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  /* Mezera mezi sloupci není jen odstup — je to prostor, do kterého
     vykukuje číslo. Musí zůstat širší než jeho přesah, jinak číslo
     dosedne na text. Viz výpočet u .pstep__no. */
  gap: var(--s9);
}
/* Liché: text vlevo, fotka vpravo. Sudé: zrcadlově. Pořadí v HTML
   zůstává čtecí (fotka, pak text), přesouvá je jen mřížka. */
.pstep__media { grid-column: 2; grid-row: 1; }
.pstep__body  { grid-column: 1; grid-row: 1; text-align: right; justify-self: end; }
.pstep:nth-of-type(even) .pstep__media { grid-column: 1; }
.pstep:nth-of-type(even) .pstep__body  { grid-column: 2; text-align: left; justify-self: start; }

/* Rám neořezává — číslo z něj musí vykukovat. Ořez i rádius drží až
   .pstep__shot o úroveň níž, takže fotka má pořád svůj tvar. */
.pstep__media {
  position: relative;
  margin: 0;
  /* Menší než dřív: fotka nemá zabírat půl obrazovky, jenom ukázat krok.
     Zarovnaná k vnější hraně, text k ose — každý krok tak drží stejný
     odstup od osy z obou stran. */
  width: 100%;
  max-width: 420px;
  justify-self: end;
}
.pstep:nth-of-type(even) .pstep__media { justify-self: start; }

.pstep__shot {
  position: relative;
  z-index: 1;
  display: block;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-2);
}
.pstep__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Číslo leží ZA fotkou a vykukuje zpoza její vnitřní hrany — té, která
   míří k ose. Zrcadlí se s krokem, takže všechna čtyři ukazují dovnitř,
   k lince.

   Vykukující část stojí na krému, ne na fotce, proto je zlatá a ne
   krémová: krémová číslice byla čitelná jen tak dlouho, dokud ležela
   celá na tmavé fotce.

   JEDNA ČÍSLICE, ŽÁDNÁ NULA — a je to nutnost, ne styl. Když tu stálo
   "01", zrcadlení znamenalo, že u lichých kroků vykoukne levá část
   číslice a u sudých pravá: z "01" byla vidět nula, z "02" dvojka. Půlka
   kroků se tak hlásila nesprávným znakem a pořadí z nich nešlo přečíst.
   U jedné číslice je vidět vždycky ta jediná, která něco znamená.

   Přesah je 58 %, tedy většina číslice leží na krému a za fotku se
   zasouvá jen zbytek — dost na dojem, že je vzadu, málo na to, aby se
   ztratila. Číslice v Lora je zhruba 0,55 × velikost písma, takže při
   160 px vykoukne ~53 px do mezery, která má var(--s9) = 72 px. Ten
   rozdíl je celá rezerva; při změně velikosti písma se musí přepočítat
   i mezera. Na užších rozvrženích níž je oboje zmenšené ve stejném
   poměru. */
/* Neprůhledná barva, ne var(--gold) s opacity. Číslice byla v pořadí
   vrstev vždycky NAD křivkou, ale při krytí 65 % skrz ni linka prosvítala
   a vypadalo to, že jde přes ni. Tohle je přesně ten samý odstín —
   var(--gold) #C5A059 smíchaný s pozadím stránky var(--cream) #F3ECDD
   v poměru 65:35 — jenom už doopravdy krycí, takže se za ním křivka
   schová. Kdyby se změnilo pozadí sekce, musí se přepočítat i tohle. */
.pstep__no {
  position: absolute;
  z-index: 0;
  top: 50%;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 160px;
  line-height: 1;
  color: #D5BB87;
  pointer-events: none;
  user-select: none;
}
.pstep__media .pstep__no { left: 0; transform: translate(-58%, -50%); }
.pstep:nth-of-type(even) .pstep__no { left: auto; right: 0; transform: translate(58%, -50%); }

.pstep__body { display: flex; flex-direction: column; gap: var(--s2); max-width: 38ch; }
.pstep__title {
  font-family: var(--font-note);
  font-weight: 400;
  font-size: 24px;
  line-height: var(--lh3);
  color: var(--ink);
}
.pstep__desc { font-size: 15px; line-height: var(--lh2); color: var(--body); }

/* Uvnitř .ptrack, aby ho pokryla křivka. z-index ho drží nad ní —
   tlačítko je cíl, ne podklad. */
.psteps__cta {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  margin-top: var(--s8);
}

@media (max-width: 1180px) {
  .ptrack__steps { gap: var(--s7); }
  /* 128 px číslice ≈ 70 px široká, 58 % z toho je 41 px — mezera var(--s7)
     je 56 px, rezerva tedy zůstává. */
  .pstep { gap: var(--s7); }
  .pstep__media { max-width: 360px; }
  .pstep__no { font-size: 128px; }
  .pstep__title { font-size: 22px; line-height: var(--lh3); }
}

@media (max-width: 860px) {
  /* Jeden sloupec: fotka nad textem, text vždy vlevo. Střídání kolem osy
     potřebuje dvě strany a ty tu nejsou, takže vlnovka odchází s ním —
     svislá čára vedle jednoho sloupce už není osa, jen ozdoba navíc. */
  .ptrack { max-width: 560px; }
  .ptrack__steps { gap: var(--s8); }
  .ptrack__line { display: none; }
  .pstep { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  /* Fotka je odsazená zleva o var(--s7) = 56 px, aby zbylo místo, kde
     číslo vykoukne — 96px číslice ≈ 53 px široká, 58 % z toho je 31 px.
     Bez toho odsazení by číslo vyčnívalo mimo stránku a ořízlo se. */
  .pstep__media,
  .pstep:nth-of-type(even) .pstep__media {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    max-width: 100%;
    width: calc(100% - var(--s7));
  }
  .pstep__body,
  .pstep:nth-of-type(even) .pstep__body {
    grid-column: 1;
    grid-row: 2;
    text-align: left;
    justify-self: start;
    max-width: 100%;
  }
  /* Vždycky vlevo: v jednom sloupci není osa, kolem které by se zrcadlilo. */
  .pstep__no,
  .pstep:nth-of-type(even) .pstep__no {
    top: 50%;
    left: 0;
    right: auto;
    transform: translate(-58%, -50%);
    font-size: 96px;
  }
}

@media (max-width: 640px) {
  .pstep__title { font-size: 20px; line-height: var(--lh3); }
  /* 76 px číslice ≈ 42 px, 58 % je 24 px — vejde se do odsazení var(--s7). */
  .pstep__no,
  .pstep:nth-of-type(even) .pstep__no { font-size: 76px; }
}

/* =========================================================
   Mobil — fotky se ořezávají odshora

   Každý fotoboxk na webu je `cover` se středovým ořezem. Na širokém
   rámu je to správně, na telefonu ne: box se zúží a zkrátí, takže se
   z fotky ukáže úzký vodorovný pruh vytažený ze středu — a to je
   přesně ta část, kde u portrétu ani u záběru z masáže nic není.
   Hlavy, ruce a obličeje leží v horní třetině snímku a středový ořez
   je uřízne první.

   Proto se na telefonu drží horní hrana: `center top` místo `center`.
   Dole se ukrojí pozadí, které nic nenese, nahoře zůstane subjekt.

   Platí to pro sdílené komponenty (karta masáže, split, CTA, koláž,
   kroky objednávky); fotky, které má jen jedna stránka, mají totéž
   ve svém stylu — hledej stejný nadpis v home-/masaze-/kontakt-/
   poukaz-/firmy-/page-o-nas.css.

   Výjimka jsou obrázky s vlastním poměrem stran, kde se nic neořezává
   (.order__photo s poukázkou) — ty zůstávají, jak jsou.
   ========================================================= */
@media (max-width: 640px) {
  /* Dvě hodnoty, protože pod fotkou leží ještě --stripe jako záloha. */
  .mcard__img,
  .split__img { background-position: center top, 0 0; }
  .cta__bg { background-position: center top; }

  .scatter__ph img,
  .pstep__shot img { object-position: center top; }
}

/* =========================================================
   Mobil — ovládání prstem (ladění 10/2026)

   Mobilní audit (390 px) našel tři věci, které vadily na všech
   stránkách naráz, proto žijí tady:
     – odkazy a textová tlačítka měřila na výšku 24 px; prst potřebuje
       aspoň ~44 px, jinak se trefuje vedle,
     – patička byla jeden sloupec přes 1 200 px — navigace a masáže
       teď stojí vedle sebe,
     – drobné kapitálkové popisky v 11 px.
   ========================================================= */
@media (max-width: 640px) {
  /* Textová tlačítka a odkazy jako cíle: viditelně se nic nemění,
     roste jen plocha, na kterou jde klepnout. */
  .promo__link,
  .mcard__cta,
  .faq__link,
  .ccbl__link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Patička: značka přes celou šířku, Navigace + Masáže vedle sebe,
     Kontakt zase přes celou šířku. */
  .footer { padding-top: var(--s8); }
  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5) var(--s3);
  }
  .footer__col--brand,
  .footer__cols > .footer__col:last-child { grid-column: 1 / -1; }
  .footer__col { gap: 0; }
  .footer__head { font-size: 20px; line-height: var(--lh4); margin-bottom: var(--s1); }
  .footer__col > a,
  .footer__contact a,
  .footer__social a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }
  .footer__contact { gap: 0; }
  .footer__contact span { padding: var(--s1) 0; }
  .footer__bottom { gap: var(--s2); }
  .footer__bottom a,
  .footer__cc {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  /* Koláž na konci stránky: kratší dráha — na telefonu se jinak dvě
     obrazovky scrolluje naprázdno k jednomu tlačítku. */
  .scatter-sec { --track: 160vh; }
}