@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-cz.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/cormorant-garamond-500-cz.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/cormorant-garamond-600-cz.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400-italic-cz.woff2') format('woff2');}
/* Nathai Spa – webfonty osekané na znaky použité na webu (OFL 1.1)
   Cormorant Garamond · Poppins – Google Fonts, subset z kompletních TTF. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/poppins-300-cz.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:italic;font-weight:300;font-display:swap;src:url('../fonts/poppins-300-italic-cz.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/poppins-400-cz.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/poppins-500-cz.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/poppins-600-cz.woff2') format('woff2');}


/* =========================================================================
   NATHAI SPA — homepage
   Barevnost dle Brand manuálu (kap. 1.11 / 1.12):
     hnědá  #815b33 · zlatá #e9c383 · doplňkové #203727, #2f392e
   Typografie: Poppins (primární písmo dle kap. 2.1) + Cormorant Garamond
   ========================================================================= */

/* ---------------------------------------------------------- 1. TOKENY -- */
:root{
  /* korporátní barvy */
  --brown:      #815b33;
  --brown-dark: #5d3f21;
  --gold:       #e9c383;
  --gold-soft:  #f2d9ae;
  --gold-deep:  #c9a163;
  --green-800:  #203727;   /* hlavní tmavá zelená */
  --green-900:  #16261b;   /* hlubší odstín pro přechody a patičku */
  --green-700:  #2f392e;   /* doplňková zelená */

  /* světlé plochy */
  --cream-050:  #fbf7f1;
  --cream-100:  #f5eee3;
  --cream-200:  #ece0cf;
  --line-cream: rgba(129,91,51,.22);
  --line-gold:  rgba(233,195,131,.28);

  /* barvy švů mezi sekcemi – vlnky se musí trefit přesně do nich */
  --seam-green: #203727;
  --seam-cream: #f5eee3;

  --ink:        #2b2118;
  --ink-soft:   #5b4a38;
  --on-dark:    #f3e9d9;
  --on-dark-soft: rgba(243,233,217,.74);

  /* písma */
  --ff-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --ff-body:    'Poppins', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* rytmus */
  --shell:      1280px;
  /* Hlavička má vlastní strop. Sekce se drží 1280 px, ale do lišty se
     musí vejít logo + celá vodorovná navigace vedle sebe, a to se do
     1280 px (po odečtení --shell-pad zbývá 1168 px) v němčině nevejde:
     německá navigace měří 1115 px, logo chce 116–148 a mezera aspoň 28.
     Protože je --shell strop, nepomohlo ani širší okno — obsah lišty
     zůstal 1168 px na 1600 i na 2560 px a schodek spolykalo logo, které
     se smrsklo na 1,5 px. Lišta je celoplošná, takže smí být širší. */
  --shell-hlavicka: 1480px;
  --shell-pad:  clamp(20px, 5vw, 56px);
  --sect-pad:   clamp(72px, 8.5vw, 132px);
  --wave-h:     clamp(48px, 6.5vw, 118px);
  /* Zaoblení má tři stupně, ne devět nahodilých hodnot. Dřív měly karty 4 px,
     položky ceníku 12, recenze 14, rozcestník 11 a panely 16 – všechno to jsou
     tytéž „desky“ a musí mít stejný poloměr.                                */
  /* Prokládání verzálek má dva stupně místo šesti nahodilých hodnot.
     Malé popisky snesou víc, tlačítka a titulky míň – jinak se text
     rozpadá na jednotlivá písmena.                                    */
  /* Textová stupnice: šest stupňů s poměrem ~1,09. Dřív tu bylo 20 hodnot
     v rozsahu 12–19 px, řada z nich se lišila o desetiny pixelu – ten rozdíl
     není vidět, jen komplikuje údržbu. Velké display velikosti zůstávají
     jako clamp() u konkrétních nadpisů.                                    */
  --fs-3xs:  .66rem;   /* odznaky a mikropopisky */
  --fs-2xs:  .73rem;
  --fs-xs:   .8rem;
  --fs-sm:   .87rem;
  --fs-md:   .95rem;
  --fs-base: 1.04rem;
  --fs-lg:   1.16rem;
  --fs-xl:   1.34rem;   /* nadpisy v patičce, popisek lightboxu */

  --ls-label:   .24em;   /* drobné verzálkové popisky (10–12 px) */
  --ls-title:   .11em;   /* větší verzálkové nadpisy (15–19 px) */
  --radius-sm:  10px;   /* ovládací prvky: tlačítka, pole formuláře */
  --radius:     14px;   /* desky: karty, položky ceníku, recenze, média */
  --radius-lg:  20px;   /* velké panely: rozcestník, objednávkový formulář */

  --shadow-card: 0 22px 48px -26px rgba(0,0,0,.65);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------ 2. BASE -- */
*,*::before,*::after{ box-sizing:border-box; }

html{
  /* --jazyk-vyska je 0, dokud main.js nevykreslí proužek s nabídkou jazyka */
  scroll-behavior:smooth; scroll-padding-top:calc(96px + var(--jazyk-vyska, 0px));
  -webkit-text-size-adjust:100%;
  /* systémově šedý posuvník vedle zelenozlaté stránky působí jako cizí prvek */
  scrollbar-width:thin; scrollbar-color:rgba(233,195,131,.42) transparent;
}

body{
  margin:0;
  background:var(--cream-100);
  color:var(--ink);
  font-family:var(--ff-body);
  font-weight:300;
  font-size:clamp(15px, .55vw + 13.4px, 17px);
  line-height:1.78;
  /* clip místo hidden – hidden dělá z body scroll kontejner a rozbíjí
     position:sticky i scroll-driven animace uvnitř sekcí */
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
@supports not (overflow:clip){ body{ overflow-x:hidden; } }

img,svg,iframe{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1.05em; }
strong,b{ font-weight:500; }

::selection{ background:var(--gold); color:var(--green-900); }

/* zlatá na krémovém podkladu má kontrast jen 1,45:1 – na světlých
   sekcích proto fokus kreslíme hnědou (8,3:1) */
:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px; border-radius:2px;
  box-shadow:0 0 0 5px rgba(22,38,27,.5);
}
.section--cream :focus-visible,
.foto-pas :focus-visible{
  outline-color:var(--brown-dark);
  box-shadow:0 0 0 5px rgba(245,238,227,.9);
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:var(--green-900);
  padding:12px 20px; font-size:14px; letter-spacing:.06em;
}
.skip-link:focus{ left:12px; top:12px; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--shell-pad); position:relative; z-index:2; }
.shell--narrow{ max-width:860px; }

/* ---------------------------------------------------- 3. TYPOGRAFIE ---- */
.h-display{
  font-family:var(--ff-display);
  text-wrap:balance;
  font-weight:400;
  font-size:clamp(2.1rem, 4.2vw, 3.65rem);
  line-height:1.12;
  letter-spacing:.005em;
  margin:0;
  color:var(--gold);
}
.h-display--dark{
  color:var(--brown);
  background:linear-gradient(96deg,var(--brown) 0%,#a5763f 45%,var(--brown-dark) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

.eyebrow{
  display:block;
  font-size:var(--fs-2xs); font-weight:400;
  letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); margin-bottom:1.1em;
}
.eyebrow--dark{ color:#6b4826; }   /* bylo opacity:.8 → 3,6:1, teď 5,8:1 */

.ornament{
  width:min(178px, 46%); height:auto; margin:1.15rem auto 1.6rem;
  color:var(--gold); opacity:.62;
}
/* Ornament se pod nadpisem sám dokreslí.
   POZOR: <use> klonuje tvary do stínového stromu, kam selektory z dokumentu
   NEDOSÁHNOU – `.ornament path` se nikdy nespáruje. Projde jen dědičnost,
   proto se posun kreslí přes vlastní vlastnost nastavenou na <svg> a
   spotřebuje ji pravidlo u zdroje ve spritu.
   @property z ní dělá číslo, takže jde plynule animovat.                */
/* Nadpisy se vypisují po slovech. Obal .sl má overflow:clip, slovo uvnitř
   vyjíždí zpod jeho spodní hrany – čte se to jako když text přichází, ne
   jako když bliká. Bez JS se slova neobalí a nadpis je rovnou vidět.    */
/* Vypisování po slovech zůstává JEN v hero, kde běží jednou při příchodu
   a uživatel ho vidí od začátku. U sekcí se na nadpis doskroluje doprostřed
   animace a nadpis pak vypadá jako neúplný – čitelnost je přednější.   */
.js .reveal .h-display .sl{ display:inline; }
.js .reveal .h-display .sl > i{ font-style:inherit; }
@keyframes slovoVyjede{
  from{ transform:translateY(105%); opacity:0; }
  to  { transform:translateY(0);    opacity:1; }
}

/* ---------- nástup hero po odchodu preloaderu ----------
   Prvky přicházejí po sobě, ne naráz. Spouští to třída na <body>, kterou
   dá JS ve chvíli, kdy je hero fotka dekódovaná – dřív by se animace
   překryla s doskakováním obrázku.
   Bez JS (a při omezeném pohybu) je hero rovnou vidět: výchozí stav je
   viditelný a skrývá se až pravidlem pod .je-uvod.                      */
html.je-uvod .hero__logo,
html.je-uvod .hero__title .sl > i,
html.je-uvod .hero__sub,
html.je-uvod .hero__cta,
html.je-uvod .hero__tel{
  opacity:0;
  /* Pojistka, když main.js nedoběhne: bez ní zůstane hero navždy prázdné.
     Stejný princip jako u .preloader a .reveal, jen s kratší lhůtou —
     tohle je první obrazovka. */
  animation:heroPojistka 0s linear 6s forwards;
}
@keyframes heroPojistka{ to{ opacity:1; } }

html.hero-jede .hero__logo{
  animation:heroLogo .85s var(--ease) both;
}
html.hero-jede .hero__title .sl > i{
  animation:slovoVyjede .62s var(--ease) both;
  animation-delay:calc(.18s + var(--w, 0) * 52ms);
}
html.hero-jede .hero__sub  { animation:heroZdola .6s var(--ease) .4s both; }
html.hero-jede .hero__cta  { animation:heroZdola .6s var(--ease) .5s both; }
html.hero-jede .hero__tel  { animation:heroZdola .6s var(--ease) .58s both; }

@keyframes heroLogo{
  from{ opacity:0; transform:translateY(14px) scale(.94); filter:blur(6px); }
  to  { opacity:1; transform:none;                        filter:blur(0); }
}
@keyframes heroZdola{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}
/* obal slov v hero nadpisu – stejná mechanika jako u sekcí */
html.je-uvod .hero__title .sl{ display:inline-block; overflow:clip; vertical-align:top; }

@property --orn-off{ syntax:'<number>'; inherits:true; initial-value:0; }
#orn path, #orn circle{
  stroke-dasharray:210;
  stroke-dashoffset:var(--orn-off, 0);
}
.js .reveal .ornament{ --orn-off:210; }
.js .reveal.is-in .ornament{ --orn-off:0; transition:--orn-off .95s var(--ease) .2s; }
/* ornament si nechají jen hlavní sekce, jinak se z něj stane tapeta */
.video-block .ornament,
.menu-head .ornament,
.sect-brzy .ornament,
.band .ornament{ display:none; }
.ornament--dark{ color:var(--brown); opacity:.5; }

.section__head{ text-align:center; max-width:760px; margin:0 auto clamp(2.6rem, 4vw, 4.2rem); }

/* zlatá „pilulka“ s claimem – dle plakátu */
.claim-pill{
  display:inline-flex; align-items:center; gap:14px;
  border:1px solid rgba(233,195,131,.5); border-radius:999px;
  padding:.68em 1.7em; margin:.2rem auto 1.3rem;
  font-size:var(--fs-2xs); letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--gold); background:rgba(233,195,131,.05);
}
.claim-pill svg{ width:19px; height:19px; flex:none; opacity:.9; }
.section__lead{ font-size:var(--fs-lg); color:var(--on-dark-soft); max-width:60ch; margin-inline:auto; }
.section--cream .section__lead{ color:var(--ink-soft); }

/* 748 px při 18px písmu dávalo 83 znaků na řádek (norma je ~75) a poslední
   řádek zůstával jako osamocené slovo uprostřed prázdna                  */
.prose{
  max-width:650px; margin-inline:auto;
  text-align:center; font-size:1.06em; line-height:2; color:var(--ink-soft);
}
.prose p{ text-wrap:balance; }
.prose strong{ color:var(--brown); font-weight:500; }
.prose p:last-child{ margin-bottom:0; }

.note{
  text-align:center; margin:clamp(2rem,3.5vw,3rem) 0 0;
  font-size:var(--fs-sm); letter-spacing:.04em; color:var(--on-dark-soft);
}
.section--cream .note{ color:var(--ink-soft); }

/* -------------------------------------------------------- 4. TLAČÍTKA -- */
.btn{
  --btn-bg:var(--gold); --btn-fg:var(--green-900); --btn-bd:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  min-height:44px; line-height:1.25;
  padding:1.02em 2.35em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:var(--radius-sm);
  font-family:var(--ff-body); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; white-space:nowrap;
  cursor:pointer; position:relative; overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.16) 50%, transparent 62%);
  /* Přechod patří JEN na hover. Kdyby byl i tady, po odjetí kurzoru by
     lesk přejel zpátky přes celou plochu – sweep má proběhnout jednou. */
  transform:translateX(-120%);
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px -14px rgba(0,0,0,.6); }
.btn:hover::after{ transform:translateX(120%); transition:transform .75s var(--ease); }
.btn:active{ transform:translateY(0); }

.btn--gold{
  --btn-bg:linear-gradient(135deg,#f0d19a 0%,var(--gold) 42%,var(--gold-deep) 100%);
  --btn-fg:#3a2a13; --btn-bd:rgba(233,195,131,.9);
}
/* zelené tlačítko pro sekce na světlém podkladu (O nás, terapeutky) */
.btn--green{
  --btn-bg:linear-gradient(135deg,#2f5138 0%,var(--green-800) 58%,#16281c 100%);
  --btn-fg:var(--gold-soft); --btn-bd:rgba(233,195,131,.85);
  box-shadow:0 0 0 1px rgba(233,195,131,.16), 0 10px 30px -14px rgba(0,0,0,.8);
}
.btn--green:hover{ box-shadow:0 0 0 1px rgba(233,195,131,.3), 0 16px 34px -14px rgba(0,0,0,.85); }
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--gold); --btn-bd:rgba(233,195,131,.45);
}
.btn--ghost:hover{ --btn-bg:rgba(233,195,131,.1); }
/* Na krémové sekci je zlatá na hraně čitelnosti (2,1 : 1). Ghost je navržený
   pro zelené pozadí; na světlém potřebuje hnědou. */
.section--cream .btn--ghost{ --btn-fg:var(--brown-dark); --btn-bd:rgba(129,91,51,.45); }
.section--cream .btn--ghost:hover{ --btn-bg:rgba(129,91,51,.08); --btn-bd:var(--brown); }
.btn--sm{ padding:.82em 1.7em; font-size:var(--fs-2xs); letter-spacing:.16em; }
.btn__ic{ width:1.25em; height:1.25em; flex:none; }
.btn--block{ display:flex; width:100%; }

/* --------------------------------------------------------- 5. HLAVIČKA -- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding:clamp(8px,1.2vw,15px) 0;
  transition:background-color .45s var(--ease), padding .45s var(--ease), box-shadow .45s var(--ease), backdrop-filter .45s var(--ease);
}
.site-header--pevna::before{ opacity:0; }
.site-header::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(11,20,14,.62), rgba(11,20,14,0));
  opacity:1; transition:opacity .45s var(--ease); pointer-events:none;
}
/* Na podstránkách není hero, pod kterým by průhledná hlavička dávala
   smysl — leží rovnou na krémovém podkladu a průsvitná vypadá rozbitě.
   .site-header--pevna ji drží zelenou pořád; main.js na ní zároveň
   nepřepíná is-stuck, jinak by ji odscrollování nahoru zase odkrylo. */
.site-header--pevna,
.site-header.is-stuck{
  background:linear-gradient(180deg, rgba(22,38,27,.97), rgba(20,34,24,.99));
  box-shadow:0 1px 0 rgba(233,195,131,.34), 0 18px 40px -30px rgba(0,0,0,.9);
  padding:13px 0;
}
/* Logo se v přilepené hlavičce zmenší, aby kolem něj zbyl vzduch a lišta
   přitom nenarostla — viz poznámka u odsazení výš. */
.site-header--pevna .header__logo img,
.site-header.is-stuck .header__logo img{ width:clamp(108px,7.9vw,128px); }
.site-header.is-stuck::before{ opacity:0; }

/* gap je tady MINIMUM, ne rozestup: justify-content:space-between rozestrčí
   logo a navigaci k okrajům, a protože lišta zabere skoro celou šířku,
   spadne mezera vždycky na tuhle hodnotu. Při 24 px se "O NÁS" lepilo na
   logo. Zvednutí minima ubere navigaci místo, proto o kus výš i hranice
   hamburgeru (1240 → 1300 px). */
.header__inner{ display:flex; align-items:center; justify-content:space-between; gap:clamp(28px,3.2vw,40px); }
/* Širší strop dává smysl jen tam, kde se vodorovná navigace opravdu
   kreslí. Pod 1441 px je navigace stejně pod hamburgerem, takže by těch
   200 px navíc nic neřešilo a jen by logo přestalo lícovat se sloupcem
   sekcí (naměřeno 43 px při 1366 px okna, 80 px při 1440 px). */
@media (min-width:1501px){
  .header__inner{ max-width:var(--shell-hlavicka); }
}

/* max-width:100% z resetu dovolí obrázku scvrknout se až na nulu, takže
   min-content téhle položky je 0 a flexbox do ní schová celý schodek —
   přesně tak logo zmizelo. Šířka strop níž drží, tohle je jen pojistka,
   aby se případný budoucí schodek projevil přetečením navigace (vidět
   na první pohled) místo tichého zmizení loga. */
.header__logo{ position:relative; z-index:3; flex:0 0 auto; }
.header__logo img{
  width:clamp(116px, 9.5vw, 148px); height:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.35));
  /* stejné trvání jako u odsazení hlavičky, ať se sbalí jedním pohybem;
     blok prefers-reduced-motion níž přechod vypne */
  transition:width .45s var(--ease);
}

.nav{ display:flex; align-items:center; gap:clamp(18px,2.4vw,30px); }
.nav__list{ display:flex; align-items:center; gap:clamp(14px,1.9vw,26px); }
.nav__list a{
  position:relative; display:inline-flex; align-items:center; min-height:40px;
  white-space:nowrap;
  font-size:var(--fs-xs); font-weight:300;
  letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark);
  transition:color .3s var(--ease);
}
.nav__list a::after{
  content:""; position:absolute; left:0; right:0; bottom:9px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__list a:hover{ color:var(--gold); }
.nav__list a:hover::after{ transform:scaleX(1); transform-origin:left; }

/* nabídka druhé jazykové verze – vykresluje ji main.js, viz tam proč
   nabízí a nepřesměrovává.

   Horní hrana je obsazená: hlavička je fixed (z-index 100) a ukazatel
   průběhu taky (z-index 120). Proužek proto leze nad obojí a obojí
   odsune dolů o svou výšku, kterou main.js změří do --jazyk-vyska.  */
.jazyk-nabidka{
  position:fixed; inset:0 0 auto 0; z-index:130;
  display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
  /* vpravo místo pro křížek, který je z toku vyjmutý – jinak si na úzkém
     displeji bere vlastní řádek a proužek zbytečně naroste */
  padding:9px 48px;
  background:var(--seam-green); color:var(--cream-100);
  font-size:.82rem; letter-spacing:.06em; text-align:center;
  border-bottom:1px solid var(--line-gold);
}
.jazyk-nabidka a{
  color:var(--gold); text-decoration:none;
  padding:3px 12px; border:1px solid var(--line-gold); border-radius:999px;
  white-space:nowrap;
}
.jazyk-nabidka a:hover{ border-color:var(--gold); }
.jazyk-nabidka button{
  all:unset; cursor:pointer; line-height:1;
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  padding:8px 10px; color:inherit; opacity:.6; font-size:1.1rem;
}
.jazyk-nabidka button:hover{ opacity:1; }
.jazyk-nabidka button:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

html.ma-jazyk-nabidku .site-header,
html.ma-jazyk-nabidku .scroll-progress{ top:var(--jazyk-vyska, 0px); }
/* --jazyk-vyska nastavuje main.js na :root; bez proužku je 0, takže
   scroll-padding-top výš (96 / 78 px) se o proužek jen zvětší */

/* přepínač jazyka – ohraničený, ať se v navigaci neplete se sekcemi webu */
.nav__lang a{
  padding:3px 9px; border:1px solid rgba(233,195,131,.4); border-radius:999px;
  font-size:.68em; letter-spacing:.1em; opacity:.85;
}
.nav__lang a:hover{ opacity:1; }
.nav__lang a::after{ display:none; }   /* podtržení by pilulku přeškrtlo */
.nav__lang a:hover{ border-color:var(--gold); }

.burger{
  display:none; position:relative; z-index:3;
  width:44px; height:44px; padding:11px 9px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.burger span{ display:block; height:1.5px; background:var(--gold); border-radius:2px; transition:transform .4s var(--ease), opacity .3s var(--ease); }
.burger.is-open span:nth-child(1){ transform:translateY(9.5px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-9.5px) rotate(-45deg); }

/* Německé složeniny („Kräuterstempelmassage“, „Fußreflexzonenmassage“)
   nemají kde se zlomit a v úzké kartě přetečou přes odsazení ven. Prohlížeč
   je umí dělit správně, protože stránka má <html lang="de"> — stačí mu to
   dovolit. Čeština zůstává bez dělení: tam se to neděje a sazba je odladěná.

   overflow-wrap je poslední pojistka pro obě verze. Uplatní se jen na slovo,
   které se nevejde ani po rozdělení, takže stávající sazbu nezmění. */
:lang(de) .card__title,
:lang(de) .card__desc,
:lang(de) .menu-item__name,
:lang(de) .masaz__blok h2,
:lang(de) .legal h1, :lang(de) .legal h2, :lang(de) .legal h3{ hyphens:auto; }

.card__title, .card__desc, .menu-item__name{ overflow-wrap:break-word; }

/* Samotné overflow-wrap nestačí: nezmenšuje min-content šířku prvku, a položka
   mřížky se pod min-content sama nesmrskne (min-width má výchozí auto). Nadpis
   „Kräuterstempelmassage" si tak držel 242 px v prostoru širokém 232 px a celý
   obsah karty vylezl přes pravé odsazení ven. min-width:0 to zmenšení povolí a
   teprve pak se má overflow-wrap kde uplatnit. Týká se i řádků s cenami, ty
   přetékaly se zbytkem. */
.card__body > *{ min-width:0; }

/* ---------------------------------------------- 5b. PŘECHODY STRÁNEK -- */
@view-transition{ navigation:auto; }

/* Hlavička a patička se nemají prolínat s obsahem — když si drží vlastní
   jméno, prohlížeč je nechá stát a hýbe jen tím, co se doopravdy mění. */
.site-header{ view-transition-name:hlavicka; }
.footer{ view-transition-name:paticka; }

/* Fotka masáže: totéž jméno na detailu i na náhledu v ceníku. */
.masaz__foto img{ view-transition-name:masaz-foto; }

@media (prefers-reduced-motion:reduce){
  /* Blok níž vypíná animace přes *, ale pseudoprvky přechodu pod hvězdičku
     nespadají — musí se vypnout zvlášť. */
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}

/* ------------------------------------------------------------ 6. HERO -- */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center; justify-content:center;
  text-align:center; background:var(--green-900);
  padding:clamp(120px,16vh,190px) 0 clamp(90px,12vh,140px);
  overflow:hidden;
}
/* o kousek vyšší než hero, aby měl parallax kam ujet bez odhalení okraje */
.hero__media{ position:absolute; inset:-14% 0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__veil{
  position:absolute; inset:0;
  background:
    /* nejvyšší vrstva – zajistí, že poslední pixel hero je přesně barva švu */
    linear-gradient(to bottom, rgba(32,55,39,0) 74%, var(--seam-green) 97%),
    radial-gradient(120% 85% at 50% 42%, rgba(10,18,12,.42) 0%, rgba(10,18,12,.68) 58%, rgba(12,22,15,.88) 100%),
    linear-gradient(to bottom, rgba(11,20,14,.55) 0%, rgba(11,20,14,0) 28%, rgba(11,20,14,0) 62%, rgba(11,20,14,.5) 100%);
}
/* Teplá záře svíček – jemně bliká, aby hero „žilo“ i bez videa.
   Při zapnutém omezení animací se zastaví (viz sekce 18). */
.hero__glow{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(52% 40% at 26% 64%, rgba(255,193,108,.22) 0%, rgba(255,193,108,0) 70%),
    radial-gradient(40% 32% at 72% 52%, rgba(255,171,86,.17) 0%, rgba(255,171,86,0) 70%),
    radial-gradient(30% 24% at 52% 78%, rgba(255,208,140,.14) 0%, rgba(255,208,140,0) 72%);
  animation:candle 6.5s ease-in-out infinite;
}
@keyframes candle{
  0%, 100% { opacity:.78; }
  17%      { opacity:1;   }
  31%      { opacity:.64; }
  46%      { opacity:.95; }
  62%      { opacity:.72; }
  79%      { opacity:1;   }
}

/* Plamínky svíček: teplé jiskry mihotající se v pásu svíček. Polohy jsou
   v procentech hero a body měkké, takže zhruba sedí na obou ořezech fotky.
   Dvě vrstvy kmitají v protifázi – světlo pak „dýchá“ organicky. */
.hero__plaminky{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(26px 44px at 11% 40%, rgba(255,214,140,.38) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(20px 34px at 24% 35%, rgba(255,206,126,.32) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(30px 50px at 37% 39%, rgba(255,220,150,.36) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(22px 36px at 63% 36%, rgba(255,206,126,.33) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(28px 46px at 76% 38%, rgba(255,214,140,.38) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(20px 34px at 89% 42%, rgba(255,206,126,.32) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(34px 56px at 82% 68%, rgba(255,196,110,.30) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(26px 44px at 16% 62%, rgba(255,196,110,.28) 0%, rgba(255,178,92,0) 70%);
  animation:plamen 3.4s ease-in-out infinite alternate;
}
.hero__plaminky::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(18px 30px at 17% 37%, rgba(255,224,160,.30) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(24px 40px at 31% 36%, rgba(255,210,130,.28) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(20px 34px at 51% 34%, rgba(255,224,160,.26) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(26px 42px at 70% 37%, rgba(255,210,130,.30) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(22px 36px at 95% 46%, rgba(255,196,110,.26) 0%, rgba(255,178,92,0) 70%),
    radial-gradient(30px 50px at 88% 72%, rgba(255,196,110,.24) 0%, rgba(255,178,92,0) 70%);
  animation:plamen 4.6s ease-in-out .9s infinite alternate-reverse;
}
@keyframes plamen{
  from{ opacity:.45; transform:translateY(0); }
  to  { opacity:1;   transform:translateY(-3px); }
}

.hero__inner{ display:flex; flex-direction:column; align-items:center; position:relative; z-index:2; }

/* Primární akce je zlatá jako všude jinde na webu (mobilní lišta, patička),
   sekundár je linkový – o pozornost se nepřetahují. */
.hero__cta .btn--gold{
  box-shadow:0 14px 36px -14px rgba(0,0,0,.85), 0 0 30px -6px rgba(233,195,131,.35);
}

.hero__logo{
  /* značka je nad ohybem 3× (hlavička, tady, H1) – logu stačí menší podíl */
  width:clamp(126px, 14vw, 186px); height:auto;
  margin-bottom:clamp(14px,2vw,26px);
  /* tmavé jádro za znakem – zlaté logo na zlatých svíčkách jinak splývá */
  background:radial-gradient(closest-side, rgba(8,16,11,.5) 0%, rgba(8,16,11,.24) 58%, transparent 100%);
  filter:drop-shadow(0 2px 6px rgba(8,14,10,.9)) drop-shadow(0 6px 18px rgba(0,0,0,.85)) drop-shadow(0 0 44px rgba(0,0,0,.7));
  animation:riseIn 1.1s var(--ease) both;
}
.hero__title{
  font-family:var(--ff-display); font-weight:400;
  font-size:clamp(2.2rem, 5.1vw, 4.2rem); line-height:1.14;
  text-wrap:balance; max-width:19ch;
  margin:0 auto clamp(14px,1.8vw,22px);
  color:var(--cream-050);
  text-shadow:0 4px 26px rgba(0,0,0,.55);
  animation:riseIn 1.1s .12s var(--ease) both;
}
.hero__sub{
  max-width:52ch; text-wrap:balance; margin:0 auto clamp(28px,3.6vw,44px);
  font-size:clamp(.95rem,1.15vw,1.06rem); line-height:1.8;
  color:rgba(243,233,217,.9); text-shadow:0 2px 16px rgba(0,0,0,.5);
  animation:riseIn 1.1s .22s var(--ease) both;
}
.hero__cta{
  display:flex; flex-wrap:wrap; gap:clamp(12px,1.5vw,20px); justify-content:center;
  animation:riseIn 1.1s .32s var(--ease) both;
}
/* stejná pojistka jako u prvků výš: html.je-uvod telefon skrývá a bez
   main.js by ho už nic neodkrylo – riseIn ho zvedne, běžný průběh ho
   přebije animací z html.hero-jede */
.hero__tel{ animation:riseIn 1.1s .42s var(--ease) both; }

.hero__scroll{
  position:absolute; left:50%; bottom:clamp(22px,4vh,46px); translate:-50% 0;
  width:30px; height:56px; display:grid; place-items:center; z-index:3;
}
.hero__scroll-line{ width:1px; height:46px; background:linear-gradient(to bottom, transparent, var(--gold)); position:relative; }
.hero__scroll-line::after{
  content:""; position:absolute; left:50%; bottom:0; translate:-50% 0;
  width:5px; height:5px; border-radius:50%; background:var(--gold);
  animation:drop 2.4s var(--ease) infinite;
}
@keyframes drop{ 0%{ transform:translateY(-40px); opacity:0 } 30%{opacity:1} 70%{opacity:1} 100%{ transform:translateY(4px); opacity:0 } }
@keyframes riseIn{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }

/* --------------------------------------------------------- 7. SEKCE ---- */
.section{ position:relative; padding:var(--sect-pad) 0; overflow:clip; }
@supports not (overflow:clip){ .section{ overflow:hidden; } }
.section:has(> .wave--top){ padding-top:calc(var(--sect-pad) + var(--wave-h) * .55); }

/* Švy mezi sekcemi: každá sekce má nahoře i dole PŘESNĚ barvu švu,
   světlo se dodává jen radiálními přechody, které doběhnou do nuly
   dřív, než dosáhnou okraje. Vlnka se pak barevně kryje s předchozí sekcí. */
.section--cream{
  --wave:var(--seam-green);
  background:
    radial-gradient(72% 40% at 22% 40%, #fffaf3 0%, rgba(255,250,243,0) 100%),
    radial-gradient(60% 26% at 86% 64%, var(--cream-200) 0%, rgba(236,224,207,0) 100%),
    var(--seam-cream);
  color:var(--ink);
}
.section--green{
  --wave:var(--seam-cream);
  background:
    radial-gradient(78% 42% at 50% 44%, #2d4a34 0%, rgba(45,74,52,0) 100%),
    radial-gradient(56% 26% at 84% 66%, #182a1d 0%, rgba(24,42,29,0) 100%),
    var(--seam-green);
  color:var(--on-dark);
}
.sect-o-nas{ text-align:center; }

/* Rozehrání rytmu: každá vlnka jinak vysoká. Barvy švů se NEMĚNÍ. */
.sect-o-nas     { --wave-h:clamp(38px,4.2vw,74px); }
.sect-masaze    { --wave-h:clamp(66px,8.5vw,142px); }
.sect-tym       { --wave-h:clamp(44px,5vw,88px); }
.sect-recenze   { --wave-h:clamp(56px,7vw,120px); }
.sect-kontakt   { --wave-h:clamp(48px,5.6vw,98px); }

/* dvě hlavní sekce dostanou asymetrickou hlavičku – rozbije to
   dojem, že je celý web jen sloupec vycentrovaných nadpisů */
.sect-masaze .section__head,
.sect-kontakt .section__head{
  text-align:left; max-width:none;
  display:grid; align-items:end;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(20px,4vw,64px);
}
.sect-masaze .section__head .ornament,
.sect-kontakt .section__head .ornament{ margin-inline:0; }
.sect-masaze .section__lead,
.sect-kontakt .section__lead{ margin:0; }
.sect-masaze .claim-pill{ justify-self:start; }
/* Nad 860 px je hlavička dvousloupcová a align-items:end zarovnává marginový
   box – pilulka si ale nese marginy psané pro vycentrovaný mobil a nechávala
   pod nadpisem 92px díru. */
@media (min-width:861px){
  .sect-masaze .section__head .claim-pill{ align-self:start; margin-block:0; }
}
@media (max-width:860px){
  .sect-masaze .section__head,
  .sect-kontakt .section__head{ grid-template-columns:1fr; text-align:center; }
  .sect-masaze .section__head .ornament,
  .sect-kontakt .section__head .ornament{ margin-inline:auto; }
}

/* Hrubá textura pozadí (AI dle návrhu designéra): zelené sekce mají tmavý
   štuk, krémové ruční papír. Vrstva je nahoře i dole vymaskovaná do ztracena,
   aby okraje sekcí zůstaly přesně v barvě švu a vlnky se pořád trefily. */
.section--green::after,
.section--cream::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-repeat:repeat;
  /* verze -2: pruhy vyžehlené a hrany zrcadlené (2×2) – na ultrawide dělaly
     svislé čáry každých ~190 px; rozměr dlaždice je proto dvojnásobný */
  background-size:1120px 1120px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
}
/* mix-blend-mode stál 14 snímků za sekundu – prohlížeč musí texturu
   míchat s podkladem při každém snímku a nemůže si ji uložit jako hotovou
   vrstvu. Světlo a stín jsou proto zapečené do alfy a skládají se
   obyčejně. Přes přechod v pozadí to funguje stejně.                  */
/* Dlaždice je poloviční proti té původní (380 px místo 760) a stejně tak
   background-size — zvětšení zůstává 2×, hustota šumu tedy vypadá stejně,
   jen se opakuje častěji. U černého šumu s alfou 26–45 to není poznat.
   Důvod: -2 varianta stála 116 kB, protože WebP u ní skladoval i barevnou
   vrstvu, která je celá černá; tahle má 22 kB. */
.section--green::after{
  background-image:url('../img/texture-green-alpha.webp');
  background-size:760px 760px;
}
.section--cream::after{
  background-image:url('../img/texture-paper-alpha-2.webp');
}

/* rohové dekory: zlaté listy na zelené, stín palmy na krémové */
.section--green::before,
.section--cream::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
}
/* maska musí dojet do nuly PŘED hranou boxu (88 %), ne přesně na ní –
   listy useknuté hranou jinak na velkých monitorech kreslí svislou čáru
   v místě, kde box dekoru začíná */
.section--green::before{
  right:max(-70px, -6vw); top:3%; width:min(36vw, 460px); aspect-ratio:3/4;
  background:url('../img/decor-leaves-gold.webp') center/contain no-repeat;
  mix-blend-mode:lighten; opacity:.55; transform:scaleX(-1);
  -webkit-mask-image:radial-gradient(closest-side, #000 45%, transparent 88%);
          mask-image:radial-gradient(closest-side, #000 45%, transparent 88%);
}
.section--cream::before{
  left:max(-60px, -5vw); top:2%; width:min(32vw, 400px); aspect-ratio:1;
  background:url('../img/decor-leaf-shadow.webp') center/cover no-repeat;
  mix-blend-mode:multiply; opacity:.65;
  -webkit-mask-image:radial-gradient(closest-side, #000 40%, transparent 88%);
          mask-image:radial-gradient(closest-side, #000 40%, transparent 88%);
}

.wave{
  position:absolute; top:-1px; left:0; width:100%;
  height:var(--wave-h); z-index:1; pointer-events:none;
}
.wave path{ fill:var(--wave); }


/* běžící pás fotek salonu — dvě řady proti sobě
   Stejný princip jako textový pás, který tu byl dřív: stopa má obsah
   dvakrát a posouvá se o -50 %, takže se napojí sama na sebe. Jedna
   polovina proto musí být širší než nejširší okno, jinak na konci
   probleskne díra. POZOR: každá řada má jinou skladbu fotek na výšku
   a na šířku, takže i jinak širokou sadu — druhá řada je užší. Sad je
   proto šest, aby i ta užší polovina přesáhla 4K (3 840 px). Se čtyřmi
   sadami se od ~3 285 px šířky okna odkrývalo v druhé řadě pozadí.

   Každá řada má vlastních sedm fotek, takže se stačí lišit směrem. Dokud
   jich bylo pět a obě řady kreslily totéž, musely se rozdrbat ještě jinou
   dobou běhu — to už je pryč.

   Druhá řada jede opačně přes animation-direction, ne přes vlastní
   @keyframes — jinak by se obě definice musely držet v páru. */
.foto-pas{
  position:relative; z-index:2; overflow:hidden;
  background:var(--seam-cream);
  padding:clamp(14px,2vw,26px) 0;
  display:grid; gap:clamp(10px,1.4vw,18px);
}
.foto-pas__rada{ overflow:hidden; }
.foto-pas__stopa{
  display:flex; width:max-content; gap:clamp(10px,1.4vw,18px);
  animation:foto-pas 90s linear infinite;
  /* bez toho se na Safari při každém průchodu zachvěje první dlaždice */
  will-change:transform;
}
.foto-pas__rada--zpet .foto-pas__stopa{ animation-direction:reverse; }
.foto-pas img{
  /* výška je pevná, šířka dopočítaná — fotky jsou na výšku i na šířku,
     takže se pás sám prostřídá a nic se neořezává */
  /* Spodní mez je zároveň mobilní velikost: 17vw se na telefonu vejde
     do ~66 px, takže rozhoduje ona. Na přání klientky zdvojnásobená
     ze 112 px — pás tím na telefonu zabere zhruba půl obrazovky. */
  height:clamp(224px,17vw,240px); width:auto; display:block;
  border-radius:clamp(10px,1.1vw,18px);
  object-fit:cover;
}
@keyframes foto-pas{ to{ transform:translateX(-50%); } }


/* ------------------------------------------------------- 8. KARTY -------*/
.cards{
  display:grid; gap:clamp(18px,2vw,30px);
  grid-template-columns:repeat(auto-fill, minmax(268px, 1fr));
}
.card{
  position:relative; display:flex; flex-direction:column;
  background:linear-gradient(170deg, rgba(47,57,46,.72) 0%, rgba(18,32,22,.9) 100%);
  border:1px solid var(--line-gold); border-radius:var(--radius);
  box-shadow:var(--shadow-card); overflow:hidden;
  transition:transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.card:hover{ transform:translateY(-6px); border-color:rgba(233,195,131,.62); box-shadow:0 30px 56px -28px rgba(0,0,0,.8); }
.card:has(.btn:active){ transform:translateY(-2px); transition-duration:.08s; }

.card__media{ position:relative; aspect-ratio:4/5; overflow:hidden; }
.card__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(18,32,22,.85) 100%);
  /* překryv nesmí sebrat klik fotce pod ním – jinak se neotevře lightbox */
  pointer-events:none;
}
.card__media img{
  width:100%; height:100%; object-fit:cover;
  /* prostor pro posun, aby se při paralaxe neodkryl okraj */
  transform:scale(1.06) translate3d(0, var(--par, 0px), 0);
  transition:transform 1.1s var(--ease);
  will-change:transform;
}
.card:hover .card__media img{ transform:scale(1.13) translate3d(0, var(--par, 0px), 0); }

.card__badge{
  position:absolute; top:14px; left:14px; z-index:3;
  background:linear-gradient(135deg,#f0d19a,var(--gold-deep));
  color:#3a2a13; font-size:var(--fs-3xs); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  padding:.5em 1.05em; border-radius:999px;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
}

/* mřížka místo flexu → popis se roztáhne a ceny i tlačítka
   sedí ve všech kartách řádku na stejné výšce */
.card__body{
  display:grid; grid-template-rows:auto 1fr auto auto; flex:1;
  padding:clamp(18px,1.7vw,26px);
}
.card__title{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.32rem,1.6vw,1.62rem); line-height:1.22;
  margin:0 0 .55rem; color:var(--gold);
}
.card__desc{
  font-size:var(--fs-md); line-height:1.78; color:var(--on-dark-soft);
  margin:0 0 1.15rem;
}

.price{
  margin:0 0 1.3rem; padding-top:.9rem; border-top:1px solid var(--line-gold);
  display:grid; gap:.34rem; font-size:var(--fs-sm);
  align-content:start;
}
/* rezerva na 3 řádky → ceny i tlačítka sedí ve všech kartách na stejné výšce */
.card .price{ min-height:calc(.9rem + 3 * 1.5rem + 2 * .34rem); }
.price li{ display:flex; align-items:baseline; gap:10px; white-space:nowrap; }
.price li > span{ order:1; flex:none; color:var(--on-dark-soft); letter-spacing:.03em; }
/* stejný spojovník jako v kompletním ceníku – bez něj se délka a částka nespárují */
.price li::before{
  content:""; order:2; flex:1 1 auto; min-width:16px;
  height:2px; align-self:baseline;
  background-image:radial-gradient(circle at 1px 1px, rgba(233,195,131,.42) 1px, transparent 1.3px);
  background-size:7px 2px; background-repeat:repeat-x;
}
.price li > b{ order:3; flex:none; }
.price li b{ font-weight:500; color:var(--gold-soft); white-space:nowrap; }

.price__tbd{ display:block !important; color:var(--on-dark-soft); font-style:italic; opacity:.75; }
.price--inline{ border-top:0; padding-top:0; max-width:280px; }
.price--inline li span{ color:var(--ink-soft); }
.price--inline li b{ color:var(--brown); }

.card__body .btn{ margin-top:auto; }
/* v mřížce jsou 4 plná zlatá tlačítka vedle sebe – linková verze,
   plná zlatá se rozsvítí až při najetí na kartu */
.card .btn--gold{ --btn-bg:transparent; --btn-fg:var(--gold); --btn-bd:rgba(233,195,131,.42); }
.card:hover .btn--gold,
.card .btn--gold:focus-visible{
  --btn-bg:linear-gradient(135deg,#f0d19a,var(--gold-deep));
  --btn-fg:#3a2a13; --btn-bd:rgba(233,195,131,.9);
}

/* --------------------------------------------- 8b. MENU DALŠÍCH MASÁŽÍ -- */
.menu-head{ text-align:center; margin:clamp(3.2rem,5vw,4.8rem) 0 clamp(1.2rem,2vw,2rem); }
.menu-head__title{ font-size:clamp(1.7rem,2.8vw,2.5rem); }
.menu-head__hint{ font-size:var(--fs-xs); letter-spacing:.04em; color:var(--on-dark-soft); margin:0; }

.menu{
  max-width:1020px; margin-inline:auto;
  display:grid; gap:10px;
}
/* každá položka je samostatná karta – neztrácí se v pozadí */
.menu-item{
  border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(150deg, rgba(58,80,62,.5) 0%, rgba(16,29,20,.72) 100%);
  border:1px solid rgba(233,195,131,.16);
  box-shadow:0 14px 30px -24px rgba(0,0,0,.9);
  transition:border-color .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.menu-item:hover{ border-color:rgba(233,195,131,.38); transform:translateY(-2px); }
.menu-item:has(details[open]){
  border-color:rgba(233,195,131,.5);
  background:linear-gradient(150deg, rgba(66,92,70,.62) 0%, rgba(18,33,23,.85) 100%);
  box-shadow:0 18px 40px -24px rgba(0,0,0,.95), inset 0 0 0 1px rgba(233,195,131,.1);
}
.menu-item details summary{
  display:grid; align-items:center; cursor:pointer; list-style:none;
  /* pevná šířka cenového sloupce – jinak se v 15položkovém seznamu „cuká“ */
  grid-template-columns:72px minmax(0,1fr) 236px 34px;
  gap:clamp(14px,2.2vw,28px);
  padding:clamp(14px,1.8vw,18px) clamp(14px,1.6vw,22px);
}
.menu-item details summary::-webkit-details-marker{ display:none; }
.menu-item details summary:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
/* stisk položky ceníku: krátké přitisknutí, ne pružení */
.menu-item:has(summary:active){ transform:scale(.997); transition-duration:.08s; }

.menu-item__thumb{
  width:72px; height:72px; border-radius:50%; object-fit:cover;
  border:1px solid var(--line-gold);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7);
  transition:transform .5s var(--ease);
}
.menu-item details summary:hover .menu-item__thumb{
  transform:scale(1.08);
  border-color:rgba(233,195,131,.85);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7), 0 0 24px -6px rgba(233,195,131,.45);
}
/* tečkovaný spojovník se při najetí rozsvítí a projede zleva doprava */
.menu-item__prices li::before{ transition:background-image .3s var(--ease); }
.menu-item details summary:hover .menu-item__prices li::before{
  background-image:radial-gradient(circle at 1px 1px, rgba(233,195,131,.85) 1px, transparent 1.3px);
}
.menu-item details summary:hover .menu-item__prices b{ color:var(--gold); }
.menu-item__name{
  font-family:var(--ff-display); font-weight:600;
  font-size:clamp(1rem,1.3vw,1.2rem); line-height:1.3;
  text-transform:uppercase; letter-spacing:.09em;
  margin:0; color:var(--gold);
}
.menu-item__prices{ display:grid; gap:.24rem; font-size:var(--fs-xs); }
/* Délku a cenu spojuje tečkovaná linka jako v tištěném ceníku – jinak mezi
   nimi zůstává prázdno a oko si je nespáruje. Linka je pružný člen flexu,
   takže se sama přizpůsobí délce textu na obou stranách.                  */
.menu-item__prices li{
  display:flex; align-items:baseline; gap:10px; white-space:nowrap;
}
.menu-item__prices li > span{ order:1; flex:none; }
.menu-item__prices li::before{
  content:""; order:2; flex:1 1 auto; min-width:20px;
  height:2px; align-self:baseline;
  background-image:radial-gradient(circle at 1px 1px, rgba(233,195,131,.42) 1px, transparent 1.3px);
  background-size:7px 2px; background-repeat:repeat-x;
}
.menu-item__prices li > b{ order:3; flex:none; text-align:right; }
.menu-item__prices span{ color:var(--on-dark-soft); }
.menu-item__prices b{ font-weight:500; color:var(--gold-soft); }


/* šipka v kroužku jako u šipek carouselu – jasnější „tohle se rozbalí“ */
.menu-item__chevron{
  position:relative; width:32px; height:32px; justify-self:end;
  border:1px solid rgba(233,195,131,.35); border-radius:50%;
  transition:border-color .35s var(--ease), background-color .35s var(--ease);
}
.menu-item__chevron::before{
  content:""; position:absolute; left:50%; top:50%; width:8px; height:8px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  translate:-50% -68%; rotate:45deg;
  transition:rotate .35s var(--ease), translate .35s var(--ease);
}
.menu-item details summary:hover .menu-item__chevron{
  border-color:rgba(233,195,131,.7); background:rgba(233,195,131,.08);
}
.menu-item details[open] .menu-item__chevron{ border-color:rgba(233,195,131,.6); }
.menu-item details[open] .menu-item__chevron::before{ rotate:225deg; translate:-50% -32%; }

/* obal, jehož výšku animuje JS (details sám o sobě animovat nejde) */
.menu-item__wrap{ overflow:hidden; }
.menu-item__body{
  display:grid; gap:1.1rem; justify-items:start;
  padding:0 clamp(14px,1.6vw,22px) clamp(20px,2.4vw,24px) calc(72px + clamp(14px,2.2vw,28px));
}
.menu-item__body p{ font-size:var(--fs-md); line-height:1.8; color:var(--on-dark-soft); margin:0; max-width:62ch; }
.menu-item__body::before{
  content:""; grid-column:1; width:46px; height:1px; margin-bottom:.2rem;
  background:linear-gradient(90deg, var(--gold), transparent);
}

.menu-foot{
  text-align:center; margin:clamp(1.2rem,2vw,1.6rem) 0 0;
  font-size:var(--fs-2xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gold); opacity:.75;
}
/* poznámka pod ceníkem drží u mikropopisku – sekce jinak „končí dvakrát“ */
.sect-masaze .note{ margin-top:clamp(.9rem,1.4vw,1.2rem); }

@media (max-width:860px){
  .menu-item__chevron{ grid-area:1 / 3 / 2 / 4; }
  .menu-item__body{
    padding-inline:clamp(14px,1.6vw,22px);
    padding-bottom:clamp(18px,2.2vw,22px);
    gap:.9rem;
  }
  .menu-item__body p{ font-size:var(--fs-md); line-height:1.75; }
  .menu-item__body::before{ display:none; }
}

/* ------------------------------------------------- 8c. NAŠE TERAPEUTKY -- */
/* profil masérky */
.therapist{
  display:grid; gap:clamp(26px,4vw,60px); align-items:center;
  grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  max-width:1020px; margin-inline:auto;
}
.therapist__photo{ margin:0; }
.therapist__photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:250px 18px 250px 18px;
  border:1px solid var(--line-cream);
  box-shadow:0 34px 60px -34px rgba(70,45,20,.55);
}
.therapist__text{ text-align:left; }
.therapist__name{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.9rem,3vw,2.6rem); line-height:1.1; margin:0;
  color:var(--brown);
}
.therapist__meta{
  margin:.45rem 0 0; font-size:var(--fs-2xs); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:#6b4826;   /* bylo opacity:.7 → 2,85:1, teď 6,8:1 */
}
.therapist__orn{ margin:1rem 0 1.4rem; }
.therapist blockquote{ margin:0 0 1.9rem; }
.therapist blockquote p{
  font-size:var(--fs-md); line-height:1.85; color:var(--ink-soft); margin:0 0 .9rem; max-width:56ch;
}

/* společná fotka týmu */
.team-photo{
  margin:clamp(3rem,5vw,4.6rem) auto 0; max-width:420px; text-align:center;
}
.team-photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover; display:block;
  border-radius:18px 250px 18px 250px;
  border:1px solid var(--line-cream);
  box-shadow:0 30px 56px -34px rgba(70,45,20,.5);
}
.team-photo figcaption{
  margin-top:1.1rem; font-size:var(--fs-sm); color:var(--ink-soft);
}

@media (max-width:820px){
  .therapist{ grid-template-columns:1fr; max-width:460px; text-align:center; }
  .therapist__text{ text-align:center; }
  .therapist__orn{ margin-inline:auto; }
  .therapist blockquote p{ margin-inline:auto; }
}

/* --------------------------------------------------------- 9. USP ------ */
.usps{
  /* mezera je proměnná, protože ji potřebuje i oddělovač níž */
  --usp-gap:clamp(26px, 3vw, 44px);
  display:grid; gap:var(--usp-gap);
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
}
.usp{ position:relative; text-align:center; padding:0 clamp(10px,2vw,28px); }
.usp + .usp::before{
  /* left:0 by linku posadilo na hranu položky, tedy na kraj mezery –
     doprostřed patří o půl mezery vlevo                              */
  content:""; position:absolute; left:calc(var(--usp-gap) / -2); top:12%; bottom:12%; width:1px;
  background:linear-gradient(to bottom, transparent, var(--line-cream), transparent);
}
.usp__icon{ width:58px; height:58px; margin:0 auto .95rem; color:var(--brown); opacity:.9; }
/* Cormorant se smí použít až od 28 px – tenhle nadpis vycházel na 23 px,
   kde jsou háčky a čárky nečitelné. Poppins navíc sedí i k ostatním
   nadpisům téhle velikosti (karty, ceník, patička).                     */
.usp h3{
  font-family:var(--ff-body); font-weight:500; letter-spacing:.01em;
  font-size:clamp(1.05rem,1.25vw,1.2rem); line-height:1.35;
  margin:0 0 .55rem; color:var(--brown-dark);
}
.usp p{ font-size:var(--fs-md); line-height:1.78; color:var(--ink-soft); margin:0; }

/* -------------------------------------------------- 10. BAND (POUKAZY) -- */
.band{ --wave:var(--seam-cream); background:var(--seam-green); text-align:center; color:var(--on-dark); }
.band__media{ position:absolute; inset:0; }
.band__media img{ width:100%; height:100%; object-fit:cover; }
.band__veil{
  position:absolute; inset:0;
  background:
    /* nejvyšší vrstva – oba okraje pásu přesně v barvě švu */
    linear-gradient(to bottom, var(--seam-green) 0%, rgba(32,55,39,0) 14%, rgba(32,55,39,0) 84%, var(--seam-green) 99%),
    radial-gradient(100% 100% at 50% 46%, rgba(14,24,17,.26) 0%, rgba(14,24,17,.76) 100%),
    linear-gradient(to bottom, rgba(32,55,39,.4) 0%, rgba(32,55,39,.5) 100%);
}
.band__inner{ padding-block:clamp(10px,2vw,26px); }
.band__inner p{ color:var(--on-dark-soft); max-width:56ch; margin-inline:auto; margin-bottom:1.6rem; }
.band__note{ font-size:var(--fs-xs); letter-spacing:.05em; opacity:.75; margin-bottom:2.1rem !important; }
.voucher{
  margin:0 auto clamp(1.8rem,3vw,2.6rem); max-width:620px;
  border:1px solid var(--line-gold); border-radius:var(--radius); overflow:hidden;
  /* výraznější rám a stín, aby karta nesplývala s texturou pásu */
  /* teplá záře pod kartou – poukaz je tmavý na tmavém a bez ní splývá */
  box-shadow:0 34px 70px -28px rgba(0,0,0,.9),
             0 0 0 1px rgba(233,195,131,.22),
             0 0 80px -10px rgba(233,195,131,.28);
  transform:rotate(-1.2deg); transition:transform .6s var(--ease);
}
.voucher:hover{ transform:rotate(0deg) scale(1.015); }
.voucher:active{ transform:rotate(0deg) scale(.995); transition-duration:.08s; }
.voucher img{ width:100%; height:auto; display:block; }

/* ----------------------------------------------- 10b. VIDEO ZE SALONU -- */
.video-block{
  display:grid; gap:clamp(26px,4vw,64px); align-items:center;
  grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  margin-top:clamp(3rem,5vw,5.5rem); text-align:left;
}
.video-block__player{
  position:relative; width:100%; max-width:360px; justify-self:end;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line-cream);
  box-shadow:0 34px 60px -34px rgba(70,45,20,.55);
  background:var(--green-900);
}
.video-block__player::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius:var(--radius); box-shadow:inset 0 0 0 1px rgba(233,195,131,.22);
}
.video-block__player video{ width:100%; aspect-ratio:9/16; object-fit:cover; display:block; }
.video-block__title{ font-size:clamp(1.7rem,2.8vw,2.5rem); margin:0; }
.video-block__text .eyebrow{ margin-bottom:.7em; }
.video-block__text p{ color:var(--ink-soft); max-width:48ch; margin:1.2rem 0 1.8rem; }

/* ------------------------------------------------- 11. SPLIT (PRO DVA) -- */
.split{
  display:grid; gap:clamp(30px,4.5vw,72px);
  grid-template-columns:minmax(0,.95fr) minmax(0,1fr);
  align-items:center;
}
.split__media{ position:relative; }
.split__media::before{
  content:""; position:absolute; inset:-16px;
  border:1px solid var(--line-cream);
  border-radius:266px 26px 266px 26px;
  pointer-events:none;
}
.split__media img{
  width:100%; aspect-ratio:4/3.4; object-fit:cover;
  border-radius:250px 18px 250px 18px;
  box-shadow:0 34px 60px -34px rgba(70,45,20,.6);
}
/* Portrét Zuzany je na výšku (1023×1524) a do společného poměru 4/3.4
   se nevešel — ořez uřízl temeno hlavy. Sekce PMU proto má poměr blíž
   ke zdroji a těžiště ořezu posunuté nahoru, takže ubývá od nohou. */
.sect-pmu .split__media img{ aspect-ratio:4/4.9; object-position:50% 18%; }

.split__text .ornament{ margin-inline:0; }
.split__text p{ color:var(--ink-soft); max-width:52ch; }
.split__text .price--inline{ margin:1.6rem 0 2rem; }

/* ------------------------------------------- 11a. NÁHLED FOTEK -------- */
/* Fotka se dosud objevila naráz. Teď je pod ní 20px rozostřený náhled
   (base64 přímo v HTML, ~100 B na kus), ze kterého se ostrý obrázek
   vyostří. Náhled je v --lqip na obalu, protože jen obal zná svůj poměr.
   Bez JS se třída .je-nactena nepřidá – proto je fallback na :not(.js). */
.ma-nahled{
  background-image:var(--lqip);
  background-size:cover; background-position:center;
}
/* Obal nemá zaoblení fotky, takže náhled prosvítal jako obdélník pod
   organickým tvarem. Každý obal proto dostane tvar své fotky.        */
.split__media.ma-nahled{ border-radius:250px 18px 250px 18px; }
.therapist__photo.ma-nahled{ border-radius:250px 18px 250px 18px; }
.card__media.ma-nahled{ border-radius:0; }
.js .ma-nahled > img{
  opacity:0;
  transition:opacity .5s var(--ease), transform 1.1s var(--ease);
}
.js .ma-nahled > img.je-nactena{ opacity:1; }
/* pojistka: kdyby obsluha selhala, po 6 s se fotka ukáže tak jako tak */
.js .ma-nahled > img{ animation:fotkaPojistka 0s linear 6s forwards; }
@keyframes fotkaPojistka{ to{ opacity:1; } }

/* ---------------------------------------------- 11b. ZLATÝ PRACH ------- */
/* Pomalu stoupající světelné částice – dojem kouře z vonné tyčinky.
   Čistě dekorace: aria-hidden, pointer-events:none, jen transform+opacity,
   takže to nevynucuje layout. Bez JS se nevytvoří vůbec.                */
.prach{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.prach span{
  position:absolute; bottom:-12px; width:3px; height:3px; border-radius:50%;
  /* blur filtr tu dělal dlouhé úlohy při rolování – měkkost obstará
     samotný gradient */
  background:radial-gradient(circle, rgba(240,208,150,1) 0%, rgba(233,195,131,.5) 40%, rgba(233,195,131,0) 74%);
  opacity:0;
  animation:prachStoupa var(--dur,26s) linear var(--del,0s) infinite;
  will-change:transform, opacity;
}
@keyframes prachStoupa{
  0%   { transform:translate3d(0,0,0) scale(.5);            opacity:0; }
  12%  {                                                     opacity:var(--max,.55); }
  50%  { transform:translate3d(var(--dx,14px),-46vh,0) scale(1); }
  88%  {                                                     opacity:var(--max,.55); }
  100% { transform:translate3d(calc(var(--dx,14px) * 2),-92vh,0) scale(.7); opacity:0; }
}
/* obsah sekce musí zůstat nad prachem */
/* Vlnka MUSÍ zůstat position:absolute – s relative spadne pod horní okraj
   sekce (naměřeno 107 px) a mezi sekcemi vznikne prázdný pruh.
   Vlastní z-index má už ve svém pravidle, stačí zvednout obsah.       */
.section--green > .shell{ position:relative; z-index:1; }

/* --------------------------------------------------------- 12. RECENZE -- */
/* recenze = slider se scroll-snapem, tažením a autoplayem */
.reviews-slider{ position:relative; max-width:1100px; margin-inline:auto; }
.reviews{
  display:flex; gap:clamp(16px,2vw,24px); align-items:stretch;
  overflow-x:auto; scroll-snap-type:x mandatory;
  /* boční odsazení = půl volného místa, jinak se první a poslední
     recenze nemá kam vycentrovat a lepí se k okraji */
  /* Stín karet sahá ~40 px dolů, ale kontejner má overflow-x:auto, takže
     overflow-y je taky auto a stín se ostře uřízl. Odsazení mu dá místo. */
  padding-block:26px 44px;
  padding-inline:max(4px, calc((100% - min(400px, 84%)) / 2));
  scrollbar-width:none; overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch; cursor:grab;
}
.reviews::-webkit-scrollbar{ display:none; }
.reviews.is-dragging{ cursor:grabbing; scroll-snap-type:none; }
.reviews.is-dragging .review{ pointer-events:none; }
.review{
  position:relative; flex:0 0 min(400px, 84%); scroll-snap-align:center;
  display:flex; flex-direction:column; justify-content:center;
  margin:0; padding:clamp(36px,3.4vw,46px) clamp(24px,2.6vw,34px) clamp(26px,2.6vw,34px);
  text-align:center; border-radius:var(--radius); overflow:hidden;
  background:
    /* Plocha karty měla proti pozadí sekce kontrast jen 1,27 – karta držela
       pohromadě jen rámečkem a stínem a opticky splývala. Tmavší a méně
       průhledná deska ji odděluje jako samostatný povrch.               */
    radial-gradient(120% 90% at 50% 0%, rgba(233,195,131,.12) 0%, rgba(233,195,131,0) 60%),
    linear-gradient(165deg, rgba(40,58,45,.9) 0%, rgba(10,20,14,.98) 100%);
  border:1px solid rgba(233,195,131,.24);
  box-shadow:0 18px 36px -28px rgba(0,0,0,.7);
  /* ztlumení jen tolik, aby text i tak splnil kontrast WCAG AA */
  opacity:.68; transform:scale(.955);
  transition:opacity .5s var(--ease), transform .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease);
}
.review.is-active{
  opacity:1; transform:scale(1);
  border-color:rgba(233,195,131,.5);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(233,195,131,.1);
}
/* velká dekorativní uvozovka */
.review::before{
  content:"”"; position:absolute; top:-.34em; left:50%; translate:-50% 0;
  font-family:var(--ff-display); font-weight:500; font-size:9rem; line-height:1;
  color:var(--gold); opacity:.10; pointer-events:none;
}
/* monogram místo prostého jména */
.review figcaption{
  display:inline-flex; align-items:center; gap:10px; align-self:center;
  margin-top:.2rem;
}
.review figcaption::before{
  content:""; width:30px; height:1px; background:linear-gradient(90deg, transparent, var(--gold));
}
.review figcaption::after{
  content:""; width:30px; height:1px; background:linear-gradient(90deg, var(--gold), transparent);
}
.slider__arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line-gold); border-radius:50%;
  background:rgba(22,38,27,.85); color:var(--gold);
  font-size:26px; line-height:1; padding-bottom:3px; cursor:pointer;
  transition:background-color .3s var(--ease), transform .3s var(--ease), opacity .3s;
}
.slider__arrow:hover{ background:var(--green-800); transform:scale(1.07); }
.slider__arrow:active{ transform:scale(.94); transition-duration:.08s; }
.slider__arrow--prev{ left:-62px; }
.slider__arrow--next{ right:-62px; }
.slider__arrow[aria-disabled="true"]{ opacity:.3; pointer-events:none; }
.slider__dots{ display:flex; justify-content:center; align-items:center; gap:2px; margin-top:14px; }
/* tlačítko má výšku 26 px kvůli klikací ploše, viditelný pruh kreslí ::before */
.slider__dots button{
  position:relative; width:30px; height:26px; border:0; padding:0;
  background:none; cursor:pointer;
  transition:width .45s var(--ease);
}
.slider__dots button::before,
.slider__dots button::after{
  content:""; position:absolute; left:3px; right:3px; top:50%; height:4px;
  margin-top:-2px; border-radius:2px;
}
.slider__dots button::before{ background:rgba(233,195,131,.24); transition:background-color .35s var(--ease); }
.slider__dots button:hover::before{ background:rgba(233,195,131,.5); }
.slider__dots button.is-active{ width:62px; }

/* časoměra – zlatá výplň dojede a slider přepne na další recenzi */
.slider__dots button::after{
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-soft));
  transform:scaleX(0); transform-origin:left;
}
.slider__dots button.is-active::after{ transform:scaleX(1); transition:transform 120ms linear; }
.slider__dots button.is-active.is-timing::after{
  animation:dotTimer var(--dot-dur, 4500ms) linear forwards;
}
@keyframes dotTimer{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* Prvek, který není v zorném poli, nemá co animovat. Třídu nasazuje
   IntersectionObserver v main.js na .hero, .prach a .foto-pas. Bez JS se
   nic nestane a animace běží jako dřív. */
.je-mimo,
.je-mimo *,
.je-mimo *::before,
.je-mimo *::after{ animation-play-state:paused !important; }

/* při pauze (hover, fokus, mimo obrazovku) se pruh jen zastaví */
.reviews-slider.is-paused .slider__dots button.is-active::after{
  animation-play-state:paused;
}
/* mobil: 12 malých teček se prstem netrefí – místo nich počítadlo */
.slider__count{
  display:none; margin:.9rem 0 0; text-align:center;
  font-size:var(--fs-xs); letter-spacing:.18em; color:var(--on-dark-soft);
}
@media (max-width:700px){
  .slider__dots{ display:none; }
  .slider__count{ display:block; }
}
@media (max-width:1260px){
  .slider__arrow--prev{ left:6px; }
  .slider__arrow--next{ right:6px; }
}
@media (max-width:700px){
  .slider__arrow{ display:none; }
}
.review__stars{ display:flex; justify-content:center; gap:5px; margin-bottom:1.1rem; }
.review__stars svg{ width:16px; height:16px; color:var(--gold); }
.review blockquote{ margin:0 0 1.1rem; }
.review blockquote p{
  font-family:var(--ff-display); font-size:clamp(1.1rem,1.45vw,1.3rem);
  font-style:italic; line-height:1.6; color:var(--cream-050); margin:0;
}
.review figcaption{
  font-size:var(--fs-2xs); letter-spacing:var(--ls-label); text-transform:uppercase; color:var(--gold);
}

/* ---------------------------------------------------- 13. PŘIPRAVUJEME -- */
/* Dřív si tahle sekce psala vlastní odsazení (96 px místo 122) a jako
   jediná se od rytmu ostatních odchylovala. Token drží celý web. */
.sect-brzy{ text-align:center; }
.brzy__note{
  margin:1.6rem 0 0; font-size:var(--fs-sm); color:var(--ink-soft);
}
/* ------------------------------------------- 13a. PERMANENTNÍ MAKE-UP -- */
/* Vlastní sekce, ne poznámka v Připravujeme: PMU na téže adrese běží,
   kdežto sekce nad ní je o tom, co teprve bude. Rozvržení si půjčuje
   .split od Masáží pro dva — fotka na výšku, text vedle. */
.sect-pmu .split__media{ max-width:480px; }
.pmu__titul{
  margin:1.2rem 0; padding:.7em 1.1em;
  border:1px solid var(--line-cream); border-radius:12px;
  background:rgba(255,255,255,.5);
  font-weight:500; color:var(--brown);
}
/* Trofej je obrázek, ne text — v alt sedí, co znamená, a odečítač ji
   přečte jednou. Emoji přímo v textu čtou odečítače jako „trophy“. */
.pmu__titul::before{ content:"🏆"; margin-right:.5em; }
.brzy__uvod{ margin:1.4rem 0 0; color:var(--ink-soft); }
.pmu__vic{ margin-bottom:.6rem; }
.pmu__odkazy{ display:grid; gap:.7rem; font-size:var(--fs-sm); }
.pmu__odkazy li{ display:flex; align-items:center; gap:11px; }
.pmu__ic{ width:19px; height:19px; flex:none; color:var(--gold-deep, var(--brown)); opacity:.8; }
/* klikací plocha aspoň 24 px na výšku (WCAG 2.2 – 2.5.8) */
.pmu__odkazy a{ display:inline-block; padding-block:4px; color:var(--brown); text-decoration:underline; text-decoration-color:var(--line-gold); text-underline-offset:3px; }
.pmu__odkazy a:hover{ text-decoration-color:currentColor; }

.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin-top:.6rem; }
.chips li{
  padding:.62em 1.35em; border:1px solid var(--line-cream); border-radius:999px;
  font-size:var(--fs-xs); letter-spacing:.1em; color:var(--brown);
  background:rgba(255,255,255,.45);
}
/* --------------------------------------------------------- 14. KONTAKT -- */
.contact{
  display:grid; gap:clamp(28px,3.6vw,56px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  align-items:stretch;
}
@media (min-width:1181px){
  /* Vedle sebe: vlevo kontakty, vpravo mapa přes celou výšku sloupce.
     Tlačítka si sedají ke spodní hraně, aby lícovala se spodkem mapy. */
  .contact__info{ display:flex; flex-direction:column; }
  .contact__info .contact__cta{ margin-top:auto; padding-top:clamp(20px,2.5vw,34px); }
  .contact__map{ align-self:stretch; }
  /* pevná výška by mapu z roztažení vyřadila */
  .contact__map .mapa-nahled,
  .contact__map iframe{ height:100%; min-height:420px; }
}
.contact__list{ display:grid; gap:1.5rem; }
.contact__list li{ display:flex; gap:16px; align-items:flex-start; }
.contact__ic{ width:22px; height:22px; flex:none; margin-top:5px; color:var(--gold); }
.contact__label{
  display:block; font-size:var(--fs-3xs); letter-spacing:var(--ls-label);
  text-transform:uppercase; color:var(--gold); opacity:.8; margin-bottom:.2rem;
}
.contact__value{ font-size:var(--fs-base); line-height:1.6; color:var(--on-dark); }
.contact__value em{ font-style:normal; font-size:.85em; color:var(--on-dark-soft); }
a.contact__value{ transition:color .3s var(--ease); }
a.contact__value:hover{ color:var(--gold); }
.contact__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:2.2rem; }

.contact__map{
  /* umístění v mřížce řeší blok @media (min-width:1181px) výš – pod ním
     je Kontakt jednosloupcový, takže tu žádné pravidlo být nemusí */
  border:1px solid var(--line-gold); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow-card); background:var(--green-700);
}
/* Google Maps embed táhne ~1,7 MB z cizích hostů, proto se iframe vkládá
   až po klepnutí na zástupný blok. Do té doby na stránce žádný není. */
.mapa-nahled{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; width:100%; height:clamp(260px,22vw,340px);
  padding:24px; border:0; cursor:pointer; text-align:center; font:inherit;
  color:var(--on-dark-soft);
  background:radial-gradient(120% 90% at 50% 0%, rgba(233,195,131,.10), transparent 70%),
             var(--green-700);
}
.mapa-nahled__pin{ width:34px; height:34px; color:var(--gold); }
.mapa-nahled__adresa{ font-size:var(--fs-base); color:#f3e9d9; }
.mapa-nahled__cta{
  padding:.62em 1.4em; border-radius:999px; border:1px solid var(--line-gold);
  color:var(--gold); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  transition:background-color .2s;
}
.mapa-nahled:hover .mapa-nahled__cta,
.mapa-nahled:focus-visible .mapa-nahled__cta{ background:rgba(233,195,131,.14); }
.mapa-nahled:active .mapa-nahled__cta{ transform:scale(.97); transition-duration:.08s; }
/* .6 dávalo 3,30 : 1 při 11,7 px — u tak malého písma je to nečitelné */
.mapa-nahled__pozn{ font-size:var(--fs-2xs); opacity:.85; }
/* Náhled zmizí až s prvním snímkem mapy. Dřív se skryl hned a než se
   iframe načetl, koukal host dvě vteřiny do bílého obdélníku — jediná
   zpětná vazba po klepnutí byla, že zmizelo to, na co klepl. */
.contact__map.is-active .mapa-nahled{ opacity:.35; pointer-events:none; }
.contact__map.is-nactena .mapa-nahled{ display:none; }
.contact__map.is-active .mapa-nahled__pin{ animation:mapaCeka 1.1s ease-in-out infinite; }
@keyframes mapaCeka{ 0%,100%{ opacity:.4 } 50%{ opacity:1 } }

/* mapa sladěná do tónu sekce – jinak je to jasně modrobílý obdélník */
.contact__map iframe{
  display:none; width:100%; height:clamp(340px,26vw,420px); border:0;
  filter:grayscale(.18) sepia(.10) saturate(.95) contrast(.98) brightness(.98);
}

/* --------------------------------------------------------- 15. PATIČKA -- */
.footer{
  position:relative; overflow:hidden;
  /* patička navazuje na krémové Připravujeme – hranu kreslí vlnka */
  --wave:var(--seam-cream);
  background:linear-gradient(180deg, var(--seam-green) 0%, #16261b 55%, #101d15 100%);
  color:var(--on-dark-soft);
  padding:calc(clamp(56px,7vw,100px) + var(--wave-h) * .55) 0 0;
}
.footer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:url('../img/texture-green-2.webp') repeat; background-size:1520px 1520px;
  mix-blend-mode:soft-light; opacity:.22;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 14%);
}
.footer::before{
  content:""; position:absolute; right:max(-70px,-6vw); bottom:-4%;
  width:min(34vw, 430px); aspect-ratio:3/4; pointer-events:none;
  background:url('../img/decor-leaves-gold.webp') center/contain no-repeat;
  mix-blend-mode:lighten; opacity:.4; transform:scaleX(-1) rotate(160deg);
  -webkit-mask-image:radial-gradient(closest-side, #000 45%, transparent 88%);
          mask-image:radial-gradient(closest-side, #000 45%, transparent 88%);
}
/* :not(.wave) – vlnka musí zůstat absolutní, jinak spadne do toku
   a vykreslí se jako krémový pruh uprostřed patičky */
.footer > :not(.wave){ position:relative; z-index:1; }

.footer__invite{ text-align:center; padding-bottom:clamp(40px,5vw,64px); }
.footer__invite p{ color:var(--on-dark-soft); margin:1rem auto 1.8rem; max-width:48ch; }
.footer__invite-cta{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

.footer__rule{
  display:flex; align-items:center; gap:18px;
  max-width:var(--shell); margin-inline:auto; padding-inline:var(--shell-pad);
}
.footer__rule span{ flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(233,195,131,.35), transparent); }
.footer__rule img{ opacity:.8; }

.footer__inner{
  display:grid; gap:clamp(28px,4vw,56px); align-items:start;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1.15fr);
  padding-block:clamp(36px,4.5vw,60px);
}
.footer__brand img{ width:clamp(112px,10vw,140px); height:auto; }
.footer__claim{
  margin-top:.8rem; font-size:var(--fs-3xs); letter-spacing:.42em;
  text-transform:lowercase; color:var(--gold); opacity:.65;
}
/* Druhá značka téže majitelky. Sedí pod logem v patičce, ne mezi odkazy
   v navigaci — je to jiný web, ne další sekce tohohle. Zlatá linka nalevo
   ji odděluje, aby si ji nikdo nespletl s claimem nad ní. */
.footer__pmu{
  margin-top:clamp(20px,2.4vw,30px); padding-left:14px;
  border-left:1px solid rgba(233,195,131,.28);
  font-size:var(--fs-sm); line-height:1.5;
}
.footer__pmu span{
  display:block; font-size:var(--fs-3xs); letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold); opacity:.6; margin-bottom:.35rem;
}
.footer__pmu a{ display:inline-block; padding-block:4px; }
.footer__pmu b{ display:block; font-weight:500; color:var(--gold); }

.footer h3{
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-xl);
  margin:0 0 1.1rem; color:var(--gold);
}
.footer__nav ul{ display:grid; gap:.4rem; }
/* jen odkazy: .btn má vlastní přechod pro transform a stín a tenhle by ho přebil */
.footer a:not(.btn){ transition:color .3s var(--ease); }
/* .btn vyjmuto: na zlaté výplni by zlatý text zmizel (kontrast 1:1) */
.footer a:not(.btn):hover{ color:var(--gold); }
.footer__nav a{ font-size:var(--fs-sm); }
.footer__list{ display:grid; gap:.85rem; font-size:var(--fs-sm); }
.footer__list li{ display:flex; gap:12px; align-items:flex-start; line-height:1.55; }
.footer__list em{ font-style:normal; opacity:.7; }
.footer__ic{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--gold); opacity:.85; }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  padding-block:20px; border-top:1px solid rgba(233,195,131,.14);
  font-size:var(--fs-2xs); letter-spacing:.05em; opacity:.85;
}
/* klikací plochy min. 24×24 px (WCAG 2.2 – 2.5.8) */
.footer__nav a, .footer__list a, .footer__bottom a, a.contact__value{
  display:inline-block; padding-block:5px;
}
.footer__bottom p{ margin:0; }

/* ---------------------------------------------------- 16a. PRELOADER -- */
.preloader{
  position:fixed; inset:0; z-index:300; display:none; place-items:center;
  background:radial-gradient(120% 100% at 50% 38%, #2b4a33 0%, var(--green-900) 68%);
  transition:opacity .3s var(--ease), visibility .3s;
}
/* Pojistka: kdyby se main.js nenačetl (adblock, výpadek, chyba),
   preloader i tak po 6 s zmizí a web zůstane použitelný. */
.js .preloader{ display:grid; animation:preFailsafe 0s linear 6s forwards; }
@keyframes preFailsafe{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
.no-preloader .preloader{ display:none; }
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ display:grid; justify-items:center; gap:16px; }
.preloader__symbol{
  width:62px; height:auto;
  animation:preNadech 2.4s var(--ease) infinite alternate;
}
.preloader__word{
  font-family:var(--ff-display); font-size:var(--fs-lg);
  letter-spacing:.4em; text-indent:.4em; color:var(--gold);
  /* prokládání dosedá z rozevřeného stavu – značka se „usadí“ */
  /* krátce: na rychlém připojení je preloader pryč do ~250 ms,
     delší animace by nikdy nedoběhla */
  animation:preZnacka .55s var(--ease) both;
}
.preloader__line{
  width:130px; height:1px; background:rgba(233,195,131,.18);
  position:relative; overflow:hidden;
}
.preloader__line::after{
  content:""; position:absolute; inset:0; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  animation:preLoad 1.5s var(--ease) forwards;
}
@keyframes preNadech{
  from{ transform:scale(.94); opacity:.72; }
  to  { transform:scale(1);   opacity:1; }
}
@keyframes preZnacka{
  from{ opacity:0; letter-spacing:.72em; text-indent:.72em; }
  to  { opacity:1; letter-spacing:.4em;  text-indent:.4em; }
}
@keyframes preLoad{ to{ transform:scaleX(1); } }

/* 3D náklon karet */
.card.is-tilting{ transition:transform .12s linear; will-change:transform; }

/* ------------------------------------------- 16b. UI PRVKY OD SKRIPTU -- */
/* ukazatel průběhu čtení */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  transform:scaleX(0); transform-origin:left center;
  will-change:transform; pointer-events:none;
}

/* aktivní položka v menu */
.nav__list a.is-active{ color:var(--gold); }
.nav__list a.is-active::after{ transform:scaleX(1); transform-origin:left; }

/* zpět nahoru */
.to-top{
  position:fixed; right:clamp(14px,2vw,28px); bottom:clamp(14px,2vw,28px); z-index:95;
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line-gold); border-radius:50%;
  background:rgba(22,38,27,.9); color:var(--gold);
  backdrop-filter:blur(8px); cursor:pointer;
  opacity:0; visibility:hidden; transform:translateY(12px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, background-color .3s;
}
.to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background:var(--green-800); }
.to-top svg{ width:20px; height:20px; }

/* zvětšitelné fotky */
.is-zoomable{ cursor:zoom-in; }

/* lightbox */
.lightbox{
  width:min(94vw, 1100px); max-width:none; max-height:92vh;
  padding:0; border:0; background:transparent; color:var(--on-dark); overflow:visible;
}
.lightbox::backdrop{ background:rgba(9,16,11,.92); backdrop-filter:blur(6px); }
.lightbox__figure{ margin:0; display:grid; justify-items:center; gap:.9rem; }
.lightbox__figure img{
  max-height:78vh; width:auto; max-width:100%;
  border:1px solid var(--line-gold); border-radius:var(--radius);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.9);
}
.lightbox__figure figcaption{
  font-family:var(--ff-display); font-weight:500; font-size:var(--fs-xl); color:var(--gold); text-align:center;
}
.lightbox__close,
.lightbox__nav{
  position:absolute; z-index:2; display:grid; place-items:center;
  border:1px solid var(--line-gold); border-radius:50%;
  background:rgba(22,38,27,.85); color:var(--gold);
  cursor:pointer; transition:background-color .3s var(--ease), transform .3s var(--ease);
}
.lightbox__close:hover,
.lightbox__nav:hover{ background:var(--green-800); transform:scale(1.06); }
.lightbox__close{ top:-52px; right:0; width:42px; height:42px; font-size:24px; line-height:1; }
.lightbox__nav{ top:38%; width:48px; height:48px; font-size:30px; line-height:1; padding-bottom:4px; }
.lightbox__nav--prev{ left:-64px; }
.lightbox__nav--next{ right:-64px; }

@media (max-width:900px){
  .lightbox__nav--prev{ left:4px; }
  .lightbox__nav--next{ right:4px; }
  .lightbox__close{ top:-48px; right:4px; }
  .to-top{ bottom:calc(74px + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------- 17. REVEAL ANIM -- */
/* Reveal MUSÍ jet na animaci, ne na transition.
   Dřív tu byla transition:opacity/transform .85s a .is-in{transform:none}.
   Protože .card a .menu-item nesou zároveň třídu .reveal, přebilo to jejich
   vlastní přechody – border-color a box-shadow zmizely úplně, transform jel
   .85s místo .12s – a transform:none se specificitou (0,3,0) porazilo
   .card:hover{transform:…}, takže hover se neprojevil vůbec.
   S animací zůstává transition volná pro komponenty a po dojetí (bez fill
   forwards) se transform vrátí do rukou hoveru. Fill backwards drží výchozí
   stav během animation-delay u stupňovaného náběhu karet.                 */
.js .reveal{
  opacity:0;
  animation:revealFailsafe 0s linear 8s forwards;   /* pojistka, když JS nedoběhne */
}
.js .reveal.is-in{
  opacity:1;
  animation:revealIn .85s var(--ease) backwards;
}
@keyframes revealIn{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
@keyframes revealFailsafe{ to{ opacity:1; } }
/* kdyby observer nikdy nedoběhl, ornament se po 8 s dokreslí sám */
.js .reveal .ornament{ animation:ornPojistka 0s linear 8s forwards; }
@keyframes ornPojistka{ to{ --orn-off:0; } }
.js .cards .reveal.is-in{ animation-delay:calc(var(--i, 0) * 60ms); }
/* Ceník má 15 řádků – naráz působí jako když se překlopí stránka.
   Po sobě to čte jako když se rozvine seznam.                        */
.js .menu .reveal.is-in{ animation-delay:calc(var(--i, 0) * 55ms); }

/* ------------------------------------------------------ 18. RESPONZIVA -- */
/* Pod 1280 px se čtyři karty nevejdou vedle sebe a auto-fill dělal 3+1
   s osamocenou čtvrtou. Dvě řady po dvou jsou vyváženější.            */
@media (max-width:1280px){
  .cards{ grid-template-columns:repeat(2, 1fr); }
}

@media (max-width:1300px){
  .contact{ grid-template-columns:1fr; }
  /* auto-fit tu dělal 3+1 a čtvrtému bodu zůstávala zbloudilá svislá linka;
     pravidlo .usp:nth-child(3)::before níž je psané právě pro mřížku 2×2 */
  .usps{ grid-template-columns:repeat(2, 1fr); }
  .usp:nth-child(3)::before{ display:none; }
}

/* Hamburger musí naskočit dřív, než se vodorovná navigace zlomí.
   Naměřeno: nejdřív se lámaly „DÁRKOVÉ POUKAZY“ a „MASÁŽE PRO DVA“ (výška
   odkazu 40 → 44 px) a burger naskakoval až od 900 px. Popisky jsou teď
   kratší a položek je sedm místo osmi, ale rozhoduje pořád nejdelší jazyk:
   německá lišta („THERAPEUTINNEN“, „BEWERTUNGEN“) je širší než česká, takže
   hranice platí podle ní.

   1300 px byl odhad podle šířky OKNA, jenže rozhoduje šířka OBSAHU lišty,
   a tu shora uzavírá --shell-hlavicka. Po doplnění osmé položky
   („Permanentní make-up“) potřebuje německá navigace 1148 + 40 + 137 px
   obsahu a při 1441 px okna jich je 1329 — zbyly by 4 px. Od 1501 px je
   lišta na svém stropu 1480 px, tedy 1368 px obsahu a rezerva 32 px.
   Odtud 1500. Běžné šířky to nemění: 1440 mělo hamburger i dřív, 1536
   a víc má vodorovnou lištu dál. Až popisky přibudou, přeměř takhle a hranici zvedni:
     nav.getBoundingClientRect().width + 28 + 116  ≤  obsahová šířka .header__inner
   Tenhle blok je JEN o navigaci; rozvržení sekcí zůstává na 900 px.   */
@media (max-width:1500px){
  /* Příznak pro main.js: říká, že navigace je právě v režimu překryvu.
     Dřív mělo JS hranici opsanou jako číslo a dvakrát se s CSS rozešlo. */
  :root{ --menu-prekryv:1; }
  .burger{ display:flex; }

  /* Proužek s nabídkou jazyka má z-index 130, takže by ležel NAD otevřeným
     menu — jenže zamkniPozadi mu dává inert, byl by vidět a mrtvý.
     visibility ho schová i před fokusem a odečítačem; po zavření se vrátí. */
  body.has-menu .jazyk-nabidka{ visibility:hidden; }

  /* …a když je schovaný, nesmí dál nikoho odsouvat dolů. Bez tohohle
     řádku držela --jazyk-vyska hlavičku 86 px pod horní hranou, takže
     logo i křížek visely uprostřed překryvu a horní lišta zůstala prázdná.
     Projevovalo se to jen na německé verzi — proužek s nabídkou češtiny
     vidí jen ten, kdo má v prohlížeči češtinu, tedy tam a nikde jinde.
     Nulou na <body> se najednou srovná hlavička, ukazatel průběhu
     i horní odsazení menu; všechny tři čtou tutéž proměnnou. */
  body.has-menu{ --jazyk-vyska:0px; }

  /* Pozadí naskočí okamžitě – prolínání celé obrazovky vždycky působí
     jako načítání. Animují se až samotné položky menu. */
  .nav{
    position:fixed; inset:0; z-index:1;
    flex-direction:column; justify-content:center; gap:clamp(14px,2.2vh,30px);
    overflow-y:auto; overscroll-behavior:contain;
    padding:calc(72px + var(--jazyk-vyska, 0px)) 20px 72px;
    /* plná barva se rastruje levněji než gradient přes celou obrazovku */
    background:var(--green-800);
    opacity:0; pointer-events:none;
    transition:opacity .14s linear;
    transform:translateZ(0);
    will-change:opacity;
  }
  /* zavřené menu se schovává přes inert (v JS), ne přes visibility –
     visibility:hidden by prohlížeči zabránilo vrstvu předem vykreslit */
  .nav[inert]{ opacity:0; pointer-events:none; }
  .nav.is-open{ opacity:1; pointer-events:auto; transition-duration:0s; }

  /* bez JS je burger mrtvý a překryv nejde otevřít – schovat obojí,
     ať v tab-orderu nestraší neviditelné odkazy; navigace bez JS
     je rolování jednostránkového webu a odkazy v patičce */
  html:not(.js) .burger{ display:none; }
  html:not(.js) .nav{ visibility:hidden; }

  /* položky se vysunou postupně – to je ta část, co má být vidět */
  .nav__list li,
  .nav__cta{
    opacity:0; transform:translateY(14px);
    transition:opacity .32s var(--ease), transform .32s var(--ease);
  }
  .nav.is-open .nav__list li,
  .nav.is-open .nav__cta{ opacity:1; transform:none; }
  .nav.is-open .nav__list li:nth-child(1){ transition-delay:.03s }
  .nav.is-open .nav__list li:nth-child(2){ transition-delay:.06s }
  .nav.is-open .nav__list li:nth-child(3){ transition-delay:.09s }
  .nav.is-open .nav__list li:nth-child(4){ transition-delay:.12s }
  .nav.is-open .nav__list li:nth-child(5){ transition-delay:.15s }
  .nav.is-open .nav__list li:nth-child(6){ transition-delay:.18s }
  .nav.is-open .nav__list li:nth-child(7){ transition-delay:.21s }
  .nav.is-open .nav__list li:nth-child(8){ transition-delay:.24s }
  .nav.is-open .nav__list li:nth-child(9){ transition-delay:.27s }
  .nav.is-open .nav__list li:nth-child(10){ transition-delay:.30s }
  .nav.is-open .nav__cta{ transition-delay:.33s }

  /* Pilulka s jazykem je ve vodorovné liště schválně drobná, aby se
     nepletla se sekcemi webu (padding 3/9 px). V překryvu ale stojí pod
     odkazy o velikosti základního písma a vedle „Zavolat" vypadala jako
     omylem zmenšená — text se lepil na rámeček. Tady dostane stejný
     dech i stejnou linku jako telefon nad ní. */
  .nav__lang a{
    padding:10px 22px; border-color:var(--line-gold); opacity:1;
    letter-spacing:.12em;
  }

  /* Rezervace je důvod, proč většina lidí menu otevře — nesmí být
     „malá" varianta tlačítka z lišty. Vrací se na plnou velikost .btn
     a dostane stín, aby se odlepila od zeleného pozadí. */
  .nav__cta{
    margin-top:clamp(8px,1.6vh,18px);
    padding:1.02em 2.6em; font-size:var(--fs-xs); letter-spacing:.19em;
    box-shadow:0 16px 34px -14px rgba(0,0,0,.75);
    /* šířka na úrovni pilulky s telefonem: dvě nejdůležitější akce menu
       tak stojí v jedné ose a rezervace nepůsobí jako dovětek */
    min-width:min(70vw, 280px);
  }

  /* hlavička už backdrop-filter nemá, takže overlay nic neořezává –
     stačí schovat její pozadí, ať pod menu neprosvítá lišta */
  /* Bez transition:none by se pozadí přilepené hlavičky prolínalo pryč
     0,45 s (viz .site-header) – přesně to působilo jako opožděné
     vykreslení menu. Nahoře stránky to nebylo vidět, protože tam
     hlavička žádné pozadí nemá. */
  body.has-menu .site-header,
  body.has-menu .site-header.is-stuck{
    background:transparent; box-shadow:none; transition:none;
  }
  body.has-menu .site-header::before{ opacity:0; }
  .nav__list{ flex-direction:column; gap:clamp(6px,1.4vh,22px); text-align:center; }
  .nav__list a{ font-size:var(--fs-base); letter-spacing:.16em; min-height:44px; }
}

@media (max-width:900px){
  html{ scroll-padding-top:calc(78px + var(--jazyk-vyska, 0px)); }

  .video-block{ grid-template-columns:1fr; text-align:center; justify-items:center; }
  .video-block__player{ max-width:330px; justify-self:center; }
  .video-block__text p{ margin-inline:auto; }

  .split{ grid-template-columns:1fr; }
  .split__media{ order:-1; }
  .split__text .ornament{ margin-inline:auto; }
  .split__text{ text-align:center; }
  .split__text p, .split__text .price--inline{ margin-inline:auto; }

  .footer__inner{ grid-template-columns:1fr; text-align:center; }
  .footer__brand img{ margin-inline:auto; }
  .footer__bottom{ justify-content:center; text-align:center; }
  /* symbol v oddělovači by tu byl druhé logo hned nad tím velkým v patičce */
  .footer__rule img{ display:none; }
  .footer__rule{ gap:0; }
  /* kontakt v patičce na střed jako navigace */
  .footer__list li{ justify-content:center; }
  /* totéž pro odkazy v sekci PMU: .split__text je tu vycentrovaný,
     ale položky s ikonou jsou flex a držely se levé hrany */
  .pmu__odkazy li{ justify-content:center; }

  .usp + .usp::before{ display:none; }
  /* linku má i poslední bod – bez ní působil čtvrtý nedotažený */
  .usp{ padding-bottom:26px; border-bottom:1px solid var(--line-cream); }
}

@media (max-width:560px){
  .cards{ grid-template-columns:1fr; gap:16px; }
  /* na mobilu stačí širší, nižší fotka – jinak je jedna karta přes celou obrazovku */
  .card__media{ aspect-ratio:16/10; }
  .card__body{ padding:16px 18px 18px; }
  .card__title{ font-size:var(--fs-xl); }
  .card__desc{ font-size:var(--fs-sm); line-height:1.7; margin-bottom:.9rem; }
  .card .price{ min-height:0; padding-top:.75rem; margin-bottom:1rem; }
  .card__badge{ top:10px; left:10px; font-size:var(--fs-3xs); padding:.42em .9em; }
  .hero{ min-height:92svh; }
  .hero__cta{ flex-direction:column; width:100%; max-width:320px; }
  .hero__cta .btn{ width:100%; }
  /* flex:1 dávalo tlačítkům flex-basis:0, takže se nikdy nezalomila —
     jen si rozdělila šířku rovným dílem. Při 375 px vyšlo na každé 104 px,
     ale „WhatsApp“ s ikonou potřebuje 118 px, takže se text tiskl na okraje.
     Stejný případ jako .hero__cta o dva řádky výš: na úzkém displeji patří
     každé na svůj řádek přes celou šířku. */
  .contact__cta{ flex-direction:column; align-items:stretch; }
  .contact__cta .btn{ width:100%; }
  .section--green::before, .section--cream::before{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .prach{ display:none; }
  /* ornament se nesmí schovávat, když se nemá co kreslit.
     Specificita musí přebít .js .reveal .ornament (0,3,0). */
  .js .reveal .ornament{ --orn-off:0; }
  .js .reveal .h-display .sl > i{ transform:none; opacity:1; animation:none; }
  /* hero nesmí zůstat neviditelné, když se animace nespustí */
  html.je-uvod .hero__logo,
  html.je-uvod .hero__title .sl > i,
  html.je-uvod .hero__sub,
  html.je-uvod .hero__cta,
  html.je-uvod .hero__tel{ opacity:1; animation:none; }
  .hero__plaminky,
  .hero__plaminky::after{ animation:none; opacity:.6; }

  /* Zastavený pás fotek by ukázal jen první dvě dlaždice a zbytek schoval.
     Kdo animace nechce, ať si pás aspoň posune prstem nebo kolečkem. */
  .foto-pas__rada{ overflow-x:auto; scrollbar-width:none; }
  .foto-pas__rada::-webkit-scrollbar{ display:none; }
  /* druhá kopie je jen kvůli plynulé smyčce – při ručním posouvání
     by z ní byla jen dvakrát tatáž řada za sebou */
  .foto-pas__stopa img[data-kopie]{ display:none; }
}

@media print{
  .site-header,.hero__scroll,.wave,.foto-pas,.preloader,.cursor-glow{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* =========================================================================
   19. OPRAVY Z DRUHÉHO AUDITU – dostupnost telefonu a mobilní detaily
   ========================================================================= */

/* telefon v hlavičce: na mobilu nesmí zmizet do burgeru */
.header__tel{ display:none; }
.header__tel svg{ width:21px; height:21px; }
@media (max-width:900px){
  .header__tel{
    display:grid; place-items:center; position:relative; z-index:3;
    width:44px; height:44px; margin-left:auto; margin-right:6px;
    border:1px solid var(--line-gold); border-radius:50%;
    color:var(--gold); background:rgba(22,38,27,.5);
  }
  body.has-menu .header__tel{ display:none; }
}

/* telefon pod tlačítky v hero */
.hero__tel{
  display:inline-block; margin-top:clamp(16px,2.2vw,24px);
  font-size:clamp(1.05rem,1.5vw,1.25rem); letter-spacing:.08em;
  color:var(--gold-soft); border-bottom:1px solid rgba(233,195,131,.35);
  padding-bottom:3px; transition:color .3s var(--ease), border-color .3s var(--ease);
}
.hero__tel:hover{ color:var(--gold); border-color:var(--gold); }

/* telefon v mobilním menu jako první, výrazná položka */
/* telefon patří jen do mobilního překryvu – na desktopu je v hlavičce */
.nav__tel{ display:none; }
@media (max-width:900px){
  .nav__tel{ display:block; }
  .nav__tel a{
    color:var(--gold) !important; font-weight:500;
    padding:10px 20px; border:1px solid var(--line-gold); border-radius:999px;
    letter-spacing:.12em;
  }
  .nav__tel a::after{ display:none; }   /* podtržení by pilulku přeškrtlo */
  .nav__tel a:hover{ border-color:var(--gold); }
}

/* šipka „posunout níže“ nesmí krást klepnutí tlačítkům */
.hero__scroll{ pointer-events:none; }
.hero__scroll-line{ pointer-events:none; }

/* mapa: iframe na mobilu chytá svislé posouvání – překryv se odklikne */
.contact__map{ position:relative; }
.contact__map.is-active iframe{ display:block; }

@media (max-width:560px){
  /* recenze měly na 360px textový sloupec jen ~178 px */
  .reviews{ padding-inline:16px; }
  .review{ flex:0 0 calc(100% - 76px); padding:28px 20px 22px; }
  /* klikací plocha teček musí mít 44 px, pruh kreslí ::before */
  .slider__dots button{ height:44px; }
  .hero__inner{ padding-bottom:64px; }
}

/* položka ceníku, na kterou vede odkaz z rozcestníku, se krátce zvýrazní */
.menu-item.is-target{ animation:zvyrazni 2.2s var(--ease); }
@keyframes zvyrazni{
  0%, 100%{ border-color:rgba(233,195,131,.16); }
  25%, 60%{ border-color:rgba(233,195,131,.85); }
}

/* =========================================================================
   20. PRÁVNÍ STRÁNKA (zásady ochrany osobních údajů)
   ========================================================================= */
/* .section.legal (0,2,0), ne .legal (0,1,0): pravidlo
   .section{padding-block:…} v media query pro ≤700 px je v souboru níž
   a se stejnou specificitou by tuhle rezervu na fixní hlavičku přebilo.
   Projevovalo se to tím, že drobečky lezly pod hlavičku. */
.section.legal{ padding-top:calc(var(--sect-pad) + 72px); text-align:left; }
.legal h1{ text-align:center; }
.legal .ornament{ margin-bottom:2.6rem; }
.legal__lead{ font-size:var(--fs-base); line-height:1.85; color:var(--ink-soft); margin-bottom:2.6rem; }
.legal h2{
  font-family:var(--ff-display); font-weight:500;
  font-size:clamp(1.3rem,2vw,1.65rem); color:var(--brown-dark);
  margin:2.4rem 0 .8rem;
}
.legal p, .legal li{ font-size:var(--fs-md); line-height:1.85; color:var(--ink-soft); }

/* Vrací velikost rolím, které `.legal p, .legal li` (0,1,1) přebíjelo
   svou vyšší specificitou, přestože jsou v souboru výš. */
.legal .legal__lead{ font-size:var(--fs-base); }
.legal .drobecky, .legal .drobecky li{ font-size:var(--fs-sm); }
.legal .note, .legal .note--tichy{ font-size:var(--fs-sm); }
.legal .masaz__rychle-cena{ font-size:var(--fs-sm); margin:0; }

/* Čtecí text v základním řezu — viz poznámka o háčcích u :root níž. */
p, li, dd, figcaption{ font-weight:400; }
/* Sloupec .shell--narrow je 860 px, což u téhle velikosti písma dává
   ~80 znaků na řádek. Zbytek webu drží prózu na 48–62ch (.section__lead,
   .menu-item__body p, .split__text p…), jen .legal na to zapomněl.
   Ceníkové řádky a rozcestník jsou flex, ty se z omezení vyjímají. */
.legal .shell--narrow{ max-width:calc(580px + 2 * var(--shell-pad)); }
.legal p{ margin:0 0 1rem; }
.legal ul{ margin:0 0 1.4rem; padding-left:1.3rem; list-style:disc; }
.legal li{ margin-bottom:.5rem; }
/* :not(.btn) — bez něj tahle dvojice přebíjela .btn (0,1,1 proti 0,1,0)
   a tlačítka uvnitř .legal ztrácela svou barvu, pozadí i rámeček. */
.legal a:not(.btn){ color:var(--brown); border-bottom:1px solid rgba(129,91,51,.35); }
.legal a:not(.btn):hover{ border-color:var(--brown); }
/* Rozcestník má vlastní rámeček dokola; bez téhle výjimky by mu spodní hranu
   přebilo pravidlo výš, které má po přidání :not(.btn) stejnou specificitu. */
.legal .masaz__dalsi a{ border-bottom-color:var(--line-cream); }
.legal code{
  font-size:.88em; padding:.1em .4em; border-radius:3px;
  background:rgba(129,91,51,.1); color:var(--brown-dark);
}
/* .75 dávalo 3,98 : 1 */
.legal__date{ margin-top:2.4rem; font-size:var(--fs-sm); opacity:.85; }
/* =========================================================================
   21. ČITELNOST DIAKRITIKY NA MALÝCH DISPLEJÍCH
   Cormorant je vysoce kontrastní serif – háčky a čárky má velmi tenké
   a na telefonu se ztrácejí. Na malých šířkách proto přidáme tah.
   ========================================================================= */
@media (max-width:700px){
  .h-display{ font-weight:500; }
  .hero__title{ font-weight:500; letter-spacing:.005em; }
  .card__title,
  .therapist__name,
  .guide__title,
  .footer h3,
  .legal h2{ font-weight:600; }
  .menu-item__name{ font-weight:600; letter-spacing:.07em; }
  .review blockquote p{ font-weight:400; }
  .legal h1{ font-weight:600; }
  /* mírně větší kresba pomůže víc než jakékoli vyhlazování */
  .menu-head__title{ font-weight:600; }
}

/* =========================================================================
   22. TYPOGRAFIE A ČEŠTINA
   Cormorant Garamond je revival Garamondu pro DISPLAY použití – diakritiku
   kreslí jako vlásečnice a caron sází velmi vysoko. Na malých velikostech
   (a hlavně na telefonu) je pak nečitelná a řádkování ji ořezává.
   Pravidlo: Cormorant jen na velké nadpisy, všechno menší v Poppins –
   což zároveň odpovídá brand manuálu, kde je Poppins primární písmo.
   ========================================================================= */

/* velké nadpisy zůstávají v Cormorantu, jen potřebují vzduch nad diakritikou */
.h-display{ line-height:1.2; padding-top:.06em; }
.hero__title{ line-height:1.2; padding-top:.06em; }
.video-block__title,
.therapist__name,
.menu-head__title,
.legal h1{ line-height:1.2; padding-top:.06em; }

/* menší texty do Poppins – diakritika drží tvar i na 16 px */
.card__title,
.menu-item__name,
.guide__title,
.footer h3,
.legal h2,
.preloader__word,
.review figcaption{
  font-family:var(--ff-body);
}
.card__title{
  font-weight:500; font-size:clamp(1.02rem,1.25vw,1.16rem);
  letter-spacing:.02em; line-height:1.35;
}
/* Název byl 15,12 px, popis pod ním 15,2 px – hierarchie obráceně.
   Název je teď o krok výš a popis o krok níž, aby byl rozdíl znát.     */
.menu-item__name{
  font-weight:500; font-size:clamp(.98rem,1.2vw,1.09rem);
  letter-spacing:var(--ls-title); line-height:1.4;
}
.guide__title{ font-weight:500; font-size:clamp(1rem,1.4vw,1.15rem); letter-spacing:.06em; text-transform:uppercase; }
.footer h3{ font-weight:500; font-size:var(--fs-md); letter-spacing:.16em; text-transform:uppercase; }
.legal h2{ font-weight:600; font-size:clamp(1.3rem,1.9vw,1.42rem); letter-spacing:.02em; }
.preloader__word{ font-weight:300; }

/* citace recenzí zůstávají v serifu, ale potřebují víc místa a velikosti */
.review blockquote p{
  font-size:clamp(1.16rem,1.5vw,1.34rem);
  line-height:1.62; padding-top:.08em;
}

@media (max-width:700px){
  /* na telefonu ještě o kousek víc – háčky potřebují pixely */
  .card__title{ font-size:var(--fs-base); }
  .menu-item__name{ font-size:var(--fs-md); letter-spacing:.09em; }
  .review blockquote p{ font-size:var(--fs-lg); }
}

/* =========================================================================
   23. MOBILNÍ ZKRÁCENÍ STRÁNKY
   Stránka měla na telefonu 21,5 obrazovky a kontakt byl 18 obrazovek daleko.
   Čtyři velké karty pod sebou = 3 obrazovky, hlavičky sekcí další 1,5.
   ========================================================================= */
@media (max-width:700px){

  /* karty zůstávají pod sebou – listování do stran působilo rušivě */
  .cards{ grid-template-columns:1fr; gap:16px; }
  .card__media{ aspect-ratio:16/10; }
  /* fotka masáže je 900×1100 na výšku: na 335px sloupci vyjde 409 px */
  .masaz__foto img{ aspect-ratio:4/3; }

  /* 2) hlavičky sekcí zabíraly 1,5 obrazovky, než přišel obsah */
  .section{ padding-block:clamp(48px,11vw,72px); }
  /* hlavička zůstává 60 px vysoká i tady, rezerva se tedy počítá z menšího
     spodního odsazení, ale horní musí hlavičku pořád přeskočit */
  .section.legal{ padding-top:calc(clamp(48px,11vw,72px) + 72px); }
  .section__head{ margin-bottom:clamp(1.6rem,5vw,2.2rem); }
  .ornament{ width:min(120px,34%); margin:.7rem auto 1rem; }
  .section__lead{ font-size:var(--fs-base); line-height:1.7; }
  .claim-pill{ font-size:var(--fs-3xs); padding:.55em 1.2em; gap:9px; margin-bottom:1rem; }
  .claim-pill svg{ width:15px; height:15px; }
  .menu-head{ margin:clamp(2.2rem,7vw,3rem) 0 clamp(.9rem,3vw,1.4rem); }

  /* 3) drobné dotažení, ať sekce nedýchají zbytečně */
  .guide{ margin-top:clamp(2rem,6vw,3rem); padding:20px 18px; }
  .team-photo{ margin-top:clamp(2rem,6vw,3rem); }
  .prose{ font-size:var(--fs-base); line-height:1.85; }
  .video-block{ margin-top:clamp(2rem,6vw,3rem); }
}

/* nápověda k listování jen na mobilu */
.cards-hint{ display:none !important; }

/* =========================================================================
   24. MĚNA PODLE JAZYKOVÉ MUTACE
   Obě ceny jsou v HTML, zobrazuje se jen jedna. Německá verze bude mít
   na <html> lang="de" a tím se přepnou eura – ceny se nikde nepíšou dvakrát.
   ========================================================================= */
.cena-eur{ display:none; }
html[lang="de"] .cena-czk{ display:none; }
html[lang="de"] .cena-eur{ display:inline; }

/* =========================================================================
   25. ROZCESTNÍK – dlaždice místo řádků s podtrženými odkazy
   ========================================================================= */
.guide{
  /* Bez vnějšího rámu: rám kolem rámu je nejrychlejší způsob, jak web
     zestárnout. Strukturu nesou samotné karty.                           */
  max-width:940px; margin:clamp(3rem,5vw,4.6rem) auto 0;
  padding:0;
  border:0; border-radius:0;
  background:none;
  text-align:center;
}
.guide__title{
  font-family:var(--ff-body); font-weight:500;
  font-size:clamp(1rem,1.4vw,1.15rem); letter-spacing:.06em;
  text-transform:uppercase; margin:0; color:var(--gold);
}
.guide__lead{
  margin:.6rem 0 1.8rem; font-size:var(--fs-md); color:var(--on-dark-soft);
}
/* Pět karet v mřížce po třech nechávalo pátou roztaženou přes dva sloupce –
   vypadalo to jako chyba. Flex se stejnou šířkou a vycentrovaným druhým
   řádkem působí záměrně.                                                  */
.guide__grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
  text-align:left;
}
.guide__grid > li{ flex:1 1 238px; max-width:calc((100% - 20px) / 3); }
/* pět dlaždic ve třech sloupcích – poslední dorovná druhou řadu */
@media (max-width:819px){ .guide__grid > li{ max-width:calc((100% - 10px) / 2); } }
@media (max-width:559px){ .guide__grid > li{ max-width:100%; } }

.guide__card{
  position:relative; display:grid; height:100%;
  grid-template-columns:54px minmax(0,1fr); column-gap:14px; row-gap:4px;
  align-content:center; align-items:center;
  padding:14px 40px 14px 14px;
  border:1px solid rgba(233,195,131,.16); border-radius:var(--radius);
  background:rgba(233,195,131,.045);
  overflow:hidden; isolation:isolate;
  transition:border-color .35s var(--ease), background-color .35s var(--ease), transform .35s var(--ease);
}
/* miniatura cílové masáže – karta odpovídá vizuálem položkám ceníku,
   na které odkazuje */
.guide__thumb{
  grid-row:1 / span 2; width:54px; height:54px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(233,195,131,.4);
  box-shadow:0 6px 16px -8px rgba(0,0,0,.8);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.guide__card:hover .guide__thumb{ transform:scale(1.07); border-color:rgba(233,195,131,.85); }
/* Teplé světlo, které jde za kurzorem. Souřadnice dodává JS do --mx/--my,
   bez skriptu se prostě neukáže a karta funguje dál.                     */
.guide__card::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
    rgba(233,195,131,.16) 0%, rgba(233,195,131,.05) 38%, transparent 70%);
  opacity:0; transition:opacity .35s var(--ease);
}
.guide__card:hover::before{ opacity:1; }
.guide__card:hover{
  border-color:rgba(233,195,131,.5); background:rgba(233,195,131,.1);
  transform:translateY(-2px);
}
.guide__co{ font-size:var(--fs-md); line-height:1.4; color:var(--on-dark); }
.guide__tipy{ font-size:var(--fs-xs); line-height:1.45; color:var(--gold); opacity:.85; }
.guide__tipy i{ font-style:normal; opacity:.5; margin:0 .25em; }

/* šipka místo podtržení */
.guide__card::after{
  content:""; position:absolute; right:17px; top:50%;
  width:7px; height:7px; margin-top:-4px;
  border-right:1.5px solid var(--gold); border-bottom:1.5px solid var(--gold);
  rotate:-45deg; opacity:.55;
  transition:transform .35s var(--ease), opacity .3s;
}
.guide__card:hover::after{ transform:translateX(3px); opacity:1; }
.guide__card:active{ transform:translateY(0) scale(.995); transition-duration:.08s; }

.guide__note{
  margin:1.6rem 0 0; font-size:var(--fs-sm); color:var(--on-dark-soft);
}

/* =========================================================================
   26. CENÍK – dotažení mřížky a odsazení
   ========================================================================= */

/* ceny zarovnané k pravé hraně karty, délky na společné ose */
/* Sloupec s cenami má pevnou míru: dřív byl `auto`, takže mezi názvem masáže
   a cenou zbývalo přes 500 px prázdna a spojovník neměl kde vzniknout.     */
.menu-item details summary{ grid-template-columns:64px minmax(0,1fr) clamp(200px,20vw,290px) 34px; }
.menu-item__prices{ gap:.3rem; font-size:var(--fs-sm); justify-self:stretch; }
.menu-item__prices li{ gap:12px; }
.menu-item__prices li > span{ opacity:.8; }
.menu-item__prices li > b{ min-width:74px; }
.menu-item__thumb{ width:64px; height:64px; }

/* rozbalený popis: víc vzduchu a tlačítko odsazené od textu */
.menu-item__body{
  gap:1.3rem;
  padding:2px clamp(16px,1.8vw,24px) clamp(22px,2.6vw,26px) calc(64px + clamp(14px,2.2vw,28px));
}
.menu-item__body .btn{ margin-top:.3rem; }

/* dárkový poukaz: obrázek se lepil na text */
.voucher{ margin-top:clamp(1.6rem,3vw,2.4rem); }
.band__inner .ornament + .voucher{ margin-top:clamp(1.2rem,2.5vw,2rem); }

@media (max-width:860px){
  .menu-item details summary{ grid-template-columns:52px minmax(0,1fr) 20px; row-gap:12px; }
  .menu-item__thumb{ width:52px; height:52px; }
  /* ceny přes celou šířku řádku: délka vlevo, částka na pravé hraně karty */
  .menu-item__prices{ grid-column:1 / -1; grid-row:2; justify-self:stretch; }
  .menu-item__prices li{ gap:12px; max-width:none; }
  .menu-item__prices li > span{ text-align:left; }
  .menu-item__prices b{ text-align:right; min-width:0; }
  .menu-item__body{ padding-left:clamp(16px,1.8vw,24px); }
}


/* =========================================================================
   22. STRÁNKY JEDNOTLIVÝCH MASÁŽÍ (/masaz/, /de/massage/)
   Prózu drží .legal, tady je jen to, co navíc: drobečky, ceny, upozornění
   a rozcestník na příbuzné masáže.
   ========================================================================= */
.drobecky{ font-size:var(--fs-sm); margin-bottom:1.8rem; }
.drobecky ol{ display:flex; flex-wrap:wrap; gap:.45rem; list-style:none; padding:0; margin:0; }
.drobecky li{ color:var(--ink-soft); }
.drobecky li + li::before{ content:"›"; margin-right:.45rem; opacity:.5; }
/* .7 dávalo 3,5 : 1, pod hranicí 4,5 : 1 pro běžný text */
.drobecky [aria-current]{ opacity:.85; }

.masaz__foto{ margin:0 0 2.4rem; border-radius:var(--radius-lg); overflow:hidden; }
.masaz__foto img{
  display:block; width:100%; height:auto;
  /* zdrojové fotky jsou na výšku 900×1100; na plnou šířku sloupce zaberou
     celou první obrazovku a text pod ně spadne. Ořez posunutý nahoru,
     protože postavy jsou na fotkách v horní polovině. */
  max-height:62vh; object-fit:cover; object-position:center 30%;
}

.masaz__ceny{ list-style:none !important; padding-left:0 !important; margin:0 0 1rem; }
.masaz__ceny li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.7rem 0; margin:0; border-bottom:1px solid var(--line-cream);
}
.masaz__ceny b{ font-weight:500; white-space:nowrap; color:var(--brown-dark); }

/* výhrady z klientčina popisu (těhotenství) nesmí splynout s odstavcem */
.masaz__pozor{
  margin:0 0 1.8rem; padding:1.1rem 1.3rem;
  border:1px solid var(--line-cream); border-left:3px solid var(--brown);
  border-radius:var(--radius-sm); background:rgba(129,91,51,.05);
}
.masaz__pozor strong{ display:block; margin-bottom:.4rem; color:var(--brown-dark); }

/* Cena a objednání pod úvodním odstavcem. Na telefonu byla cena 2,8
   obrazovky daleko a tlačítko Zavolat 3,3; teď je blok kolem 1,1 obrazovky
   (u masáží se zdravotní výhradou o něco níž, ta má přednost). První
   obrazovku tedy nechytá — nad ním jsou drobečky, nadpis a fotka —, ale
   z „skoro tři obrazovky“ je „hned za úvodem“.

   Dolní blok tlačítek zůstává pro toho, kdo dočte: tentýž odkaz na dvou
   místech dlouhé stránky je záměr, ne opomenutí. */
.masaz__rychle{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:14px; margin:1.6rem 0 2.2rem; padding:16px 18px;
  border:1px solid rgba(129,91,51,.18); border-radius:var(--radius);
  background:rgba(129,91,51,.045);
}
.masaz__rychle-cena{ margin:0; font-size:var(--fs-sm); color:var(--ink-soft); }
.masaz__rychle-cena b{
  font-family:var(--ff-display); font-size:1.5rem; font-weight:600;
  color:var(--brown-dark); margin:0 .35rem 0 .2rem;
}
.masaz__rychle-cena span{ color:#6b5a47; }   /* pevná barva: opacity .75 dávalo 3,84 : 1 */
.masaz__rychle-cta{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:560px){
  /* na úzkém displeji pod sebe, ať tlačítka nejsou smrsklá */
  .masaz__rychle{ flex-direction:column; align-items:stretch; }
  /* auto-fit místo pevného zlomu: dvě tlačítka vedle sebe jen tehdy, když
     se do 150 px vejdou, jinak pod sebe. Pevná hranice 380 px nechávala při
     381 px jen 1,5 px rezervy — na jiném písmu nebo v němčině by nestačila. */
  .masaz__rychle-cta{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); }
}

.masaz__cta{ display:flex; flex-wrap:wrap; gap:12px; margin:1.8rem 0 0; }
.masaz__dalsi{ display:flex !important; flex-wrap:wrap; gap:10px; list-style:none !important; padding-left:0 !important; }
.masaz__dalsi li{ margin:0; }
.masaz__dalsi a{
  display:inline-block; padding:6px 15px;
  border:1px solid var(--line-cream); border-radius:999px;
  font-size:var(--fs-sm);
}
.masaz__dalsi a:hover{ border-color:var(--brown); }

/* odkaz z ceníku na samostatnou stránku masáže – zlatá kvůli zelenému
   podkladu sekce, šipka odliší „čtení dál“ od tlačítka „rezervovat“ */
.menu-item__vic a{
  color:var(--gold); font-size:var(--fs-sm); letter-spacing:.04em;
  border-bottom:1px solid rgba(233,195,131,.35);
  display:inline-block; position:relative;   /* obsahující blok pro ::before */
}
/* Odkaz je jediná cesta z ceníku na stránku masáže a klepnutí vedle něj
   popis zavře. Klikací plocha proto sahá do okolních mezer — ~46 px místo
   21, a přitom se nezmění ani vzhled, ani sazba. */
.menu-item__vic a::before{ content:""; position:absolute; inset:-11px -8px; }
.menu-item__vic a:hover{ border-bottom-color:var(--gold); }
.menu-item__vic a::after{ content:" →"; }

/* tichá poznámka pod kontraindikacemi – nemá křičet, ale musí být čitelná */
.note--tichy{ text-align:left; margin-top:.4rem; }

/* odkazy na zdroje: menší, ať nekonkurují obsahu stránky */
.masaz__zdroje li{ font-size:var(--fs-sm); }

/* předěl mezi jazykovými verzemi na chybové stránce */
.chyba404__predel{
  border:0; border-top:1px solid var(--line-cream);
  margin:2.8rem auto 2rem; max-width:60%;   /* auto: bez něj se čára lepí vlevo */
}

/* tlačítko pauzy karuselu recenzí – WCAG 2.2.2 (viz main.js) */
/* Atribut hidden sám nestačí — display:grid níž ho přebije a tlačítko
   zůstane vidět, přestože main.js hlásí, že je schované. Projevovalo se to
   při prefers-reduced-motion: pauza nabízela zastavit něco, co neběží. */
.slider__pauza[hidden]{ display:none !important; }
.slider__pauza{
  display:block; margin:14px auto 0;
  width:34px; height:34px; padding:0;
  display:grid; place-items:center;
  border:1px solid var(--line-gold); border-radius:50%;
  background:transparent; color:var(--gold); cursor:pointer;
  opacity:.75; transition:opacity .25s var(--ease), border-color .25s var(--ease);
}
.slider__pauza:hover{ opacity:1; border-color:var(--gold); }
.slider__pauza:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.slider__pauza svg{ width:15px; height:15px; fill:currentColor; }
/* ve výchozím stavu běží → nabízí se pauza; po vypnutí se nabízí přehrání */
.slider__pauza .ikona-play{ display:none; }
.slider__pauza.je-vypnuto .ikona-pauza{ display:none; }
.slider__pauza.je-vypnuto .ikona-play{ display:block; }

/* ---------- dočasně pozastavená masáž ----------
   Zuzana 19. 8. 2026: bez druhé terapeutky nejde čtyřruční ani párová.
   Až nastoupí, smazat i tahle pravidla. */
/* Štítek sedí UVNITŘ .menu-item__name: shrnutí je čtyřsloupcová mřížka
   a samostatný prvek by si vyrobil pátý sloupec a rozbil zarovnání cen. */
.menu-item__stop{
  display:inline-block; margin-left:8px; padding:2px 9px;
  border:1px solid var(--line-gold); border-radius:999px;
  font-family:var(--ff-body); font-size:var(--fs-3xs);
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold); opacity:.85; white-space:nowrap; vertical-align:middle;
}
.masaz__stop,
.sect-dva__stop{
  margin:0 0 1.8rem; padding:1.1rem 1.3rem;
  border:1px solid var(--line-cream); border-left:3px solid var(--gold-deep);
  border-radius:var(--radius-sm); background:rgba(233,195,131,.10);
}
.masaz__stop strong{ display:block; margin-bottom:.4rem; color:var(--brown-dark); }
/* v zelené sekci Masáže pro dva je podklad tmavý */
.sect-dva__stop{ color:var(--ink-soft); }

/* galerie reálných fotek salonu na stránce „Než k nám přijdete“ */
.salon-galerie{
  display:grid; gap:14px; margin:0 0 2.4rem;
  grid-template-columns:repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.salon-galerie figure{ margin:0; border-radius:var(--radius); overflow:hidden; }
.salon-galerie img{
  display:block; width:100%; height:100%; object-fit:cover;
  aspect-ratio:4/3;
}

/* fotka připojená k oddílu textu (dům zvenku u pokynů k příjezdu) */
.sekce-foto{ margin:1.5rem 0 0; }
.sekce-foto img{
  display:block; width:100%; height:auto; border-radius:var(--radius);
  cursor:zoom-in;
}
.sekce-foto figcaption{
  margin-top:.6rem; font-size:var(--fs-sm); color:var(--ink-soft);
  font-style:italic;
}

/* věrnostní karta v sekci dárkových poukazů */
.band__vernost{
  margin:1.6rem auto 0; max-width:56ch;
  font-size:var(--fs-sm); color:var(--on-dark-soft);
}
.band__vernost strong{ color:var(--gold); }

/* Zkopírování čísla a e-mailu. Na desktopu odkaz tel: většinou neudělá nic
   a host číslo přepisuje ručně. Tlačítko vyrábí main.js, takže bez JS
   zůstane jen odkaz — a v HTML nepřibyl žádný text k překládání. */
.kopirovat{
  all:unset; cursor:pointer; display:inline-flex; align-items:center;
  justify-content:center; width:32px; height:32px; margin-left:6px;
  border-radius:50%; color:var(--gold); opacity:.65; flex:none;
  transition:opacity .25s var(--ease), background-color .25s var(--ease);
  vertical-align:middle;
}
.kopirovat:hover{ opacity:1; background:rgba(233,195,131,.12); }
.kopirovat:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; opacity:1; }
.kopirovat svg{ width:16px; height:16px; }
.kopirovat.je-hotovo{ opacity:1; color:var(--cream-100); }

/* Potvrzení se čte odečítačem přes aria-live; vidoucí ho vidí jako bublinu. */
.kopirovat__stav{
  position:absolute; z-index:5; transform:translate(-50%, -140%);
  padding:4px 10px; border-radius:999px; white-space:nowrap;
  background:var(--green-800); color:var(--cream-100);
  font-size:var(--fs-3xs); letter-spacing:.08em;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.8);
  pointer-events:none;
}

/* odkaz na praktické informace v sekci Kontakt */
.contact__pred{
  margin:1.4rem 0 0; font-size:var(--fs-sm); color:var(--on-dark-soft);
}
.contact__pred a{ color:var(--gold); border-bottom:1px solid rgba(233,195,131,.4); }
.contact__pred a:hover{ border-bottom-color:var(--gold); }