/* ═══════════════════════════════════════════════════════════
   MOLEKULA BEAUTY STUDIO — v2
   Bílá + světle šedé panely, silné rádiusy, geometrický sans.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink: #141414;
  --ink-2: #6f6d6b;
  --ink-3: #a3a09d;
  --white: #ffffff;
  --grey: #f3f2f1;
  --grey-2: #e9e7e5;
  --line: #e6e3e0;

  /* Jedna teplá hnědá rodina navázaná na hnědou z loga (#C8AE9E), tři
     kroky postupně tmavší (21. 9. 2026 celá o stupeň ztmavená). Dál než k brown-3 to nejde: na tmavším
     podkladu spadne odstavec pod 4.5:1 a AA by neprošlo. */
  --brown-1: #ecdccc;
  --brown-2: #d3b79d;
  --brown-3: #bb977a;

  --wrap: 1280px;
  --gut: clamp(18px, 4vw, 40px);
  --r-xl: 34px;
  --r-lg: 26px;
  --r-md: 18px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 24px 60px -40px rgba(20, 20, 20, 0.4);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* clip místo hidden: neudělá z body scroll kontejner, takže
     position: sticky (karty značek na mobilu) funguje */
  overflow-x: hidden;
  overflow-x: clip;
}

a { color: inherit; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: -9999px; top: 10px; z-index: 99;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; text-decoration: none;
}
.skip:focus { left: 16px; }

/* Jediná šířka na webu. Bloky uvnitř sekcí ji nesmí podřezávat vlastním
   max-width — jinak jsou sekce každá jinak široká. Míru řádku omezují
   jen odstavce (ch), ne obalové bloky. */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }

/* ── Typografie ─────────────────────────────────────────── */
.big {
  font-size: clamp(36px, 5.4vw, 74px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 0;
}
.lead {
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--ink-2);
  max-width: 46ch;
  margin: 20px 0 0;
}
.lead--wide { max-width: 60ch; }
.hint { margin: 26px 0 0; font-size: 14px; color: var(--ink-3); }

/* ── Pilulky ────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: inherit; font-size: 15px; font-weight: 400; text-decoration: none;
  cursor: pointer; white-space: nowrap;
  transition: transform 0.35s var(--ease), background-color 0.35s var(--ease),
    color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.pill--dark { background: var(--ink); color: #fff; }
.pill--dark:hover { transform: translateY(-2px); background: #2c2c2c; }
.pill--light { background: #fff; color: var(--ink); }
.pill--light:hover { transform: translateY(-2px); }
.pill--outline { border-color: rgba(255, 255, 255, 0.65); color: #fff; }
.pill--outline:hover { background: rgba(255, 255, 255, 0.16); }
.pill--outline-dark { border-color: var(--line); color: var(--ink); background: #fff; }
.pill--outline-dark:hover { border-color: var(--ink); }
.pill[disabled] { opacity: 0.35; cursor: not-allowed; transform: none; }

/* ── Oznamovací pruh ────────────────────────────────────── */
.topbar { background: #fff; color: #6b5140; }
/* Pruh je na celou šířku, ale obsah stojí na stejné levé hraně jako
   logo, nadpisy sekcí i patička, proto stejná mřížka jako .wrap.
   Od 21. 9. 2026 teplý podklad z palety, body oddělují molekuly
   z loga místo lomítek a vpravo je telefon s otevírací dobou. */
.topbar__in {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 0 var(--gut); min-height: 40px;
  font-size: 12.5px; letter-spacing: 0.02em;
}
.topbar__body { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.topbar__body li { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.topbar__body .znacka { width: 12px; height: 12px; flex: none; fill: #a8876c; }
.topbar__kontakt { margin: 0; display: inline-flex; gap: 10px; white-space: nowrap; color: #6b5140; }
.topbar__kontakt a { color: #4a3728; text-decoration: none; font-weight: 500; }
.topbar__kontakt a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1000px) { .topbar__kontakt { display: none; } }
/* Na mobilu se body nevejdou vedle sebe, pruh proto běží dokola.
   app.js body jednou zkopíruje (.topbar__body--bezi), posun o polovinu
   šířky pak navazuje bez švu. */
@media (max-width: 760px) {
  .topbar__in { padding-inline: 0 !important; overflow: hidden; }
  .topbar__body { gap: 0; }
  .topbar__body li { padding-right: 26px; }
  .topbar__body li:first-child { padding-left: 0; }
  .topbar__body--bezi { width: max-content; animation: pruh 26s linear infinite; }
}
@keyframes pruh { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .topbar__body--bezi { animation: none; }
}

/* ── Zástupné fotky ─────────────────────────────────────── */
.ph {
  position: relative; overflow: hidden; background: var(--grey);
  background-image:
    radial-gradient(60% 70% at 25% 25%, #f0ddd2 0%, rgba(240, 221, 210, 0) 60%),
    radial-gradient(55% 60% at 78% 30%, #e8d3c6 0%, rgba(232, 211, 198, 0) 62%),
    radial-gradient(70% 80% at 60% 85%, #dfd6cd 0%, rgba(223, 214, 205, 0) 65%),
    linear-gradient(150deg, #efe9e4, #e2dbd5);
}
.ph::after {
  content: ""; position: absolute; inset: 0; opacity: 0.35; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}
.ph__tag {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(20, 20, 20, 0.45);
  background: rgba(255, 255, 255, 0.7); padding: 5px 10px; border-radius: 999px;
}

/* ── Hero ───────────────────────────────────────────────── */
.hero { padding: 10px 10px 0; }
.hero__frame {
  position: relative; border-radius: var(--r-xl); overflow: hidden;
  min-height: min(84vh, 780px);
  display: flex; flex-direction: column;
}
.hero .ph--hero { position: absolute; inset: 0; }
.hero .ph__tag { top: 92px; right: clamp(20px, 3vw, 44px); left: auto; bottom: auto; }
.hero__frame::after {
  content: ""; position: absolute; inset: 0;
  /* Záběry ze studia jsou světlé, původních 0.34 nahoře nestačilo — logo
     i odkazy v hlavičce se na bílém ručníku ztrácely. Horní část je teď
     hustší a doběh delší, spodek zůstal, tam sedí nadpis. */
  background: linear-gradient(180deg, rgba(20, 20, 20, 0.52) 0%, rgba(20, 20, 20, 0.22) 18%, rgba(20, 20, 20, 0.05) 38%, rgba(20, 20, 20, 0.44) 100%);
}
.hero > * { position: relative; }
.nav, .hero__copy, .dots { position: relative; z-index: 3; }

.nav { padding: 22px 0; color: #fff; }
.nav__in, .hero__in {
  width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut);
}
.nav__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { font-size: 26px; font-weight: 300; letter-spacing: 0.04em; text-decoration: none; }
.nav__links { display: flex; gap: 8px; font-size: 15px; }
/* Položky menu jsou zaoblená tlačítka. Obrys je jen naznačený, aby se
   hlavička nepřetáhla přes fotku v hero. */
.nav__links a {
  display: inline-flex; align-items: center; height: 42px; padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav__links a:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.62); }
.nav__tools { display: flex; align-items: center; gap: 12px; }
.nav__cta { height: 42px; padding: 0 20px; font-size: 14px; }

.ico {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
  background: transparent; color: inherit; cursor: pointer; padding: 0;
  transition: background-color 0.3s var(--ease);
}
.ico:hover { background: rgba(255, 255, 255, 0.16); }
#call svg { fill: currentColor; stroke: none; width: 17px; height: 17px; }
.ico svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ico__count {
  position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px;
  display: grid; place-items: center; padding: 0 5px;
  background: #fff; color: var(--ink); border-radius: 999px; font-size: 11px;
}
/* Dokud je seznam k vyzvednutí prázdný, stojí na místě košíku telefon.
   Vypadá stejně jako košík i křížek — obrys mají buď všechna kolečka,
   nebo žádné, jinak hlavička drhne. */
.ico--plain { border-color: var(--line); color: var(--ink); }
.ico--plain:hover { background: var(--grey); }

.burger {
  position: relative;
  display: none; width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px;
  background: transparent; cursor: pointer; place-items: center;
  transition: border-color 0.42s var(--ease);
}
/* Čárky drží marginy jen tak tak — po rotaci se nesešly ve stejném bodě
   a křížek sedel mimo střed kroužku. Obě leží na středu a rozestup dělá
   jen posun, takže se při otevření stačí zbavit posunu a otočit je. */
.burger span {
  position: absolute; left: 50%; top: 50%;
  width: 15px; height: 1px; background: #fff;
  transition: transform 0.32s var(--ease), background-color 0.42s var(--ease);
}
.burger span:first-child { transform: translate(-50%, -50%) translateY(-2.5px); }
.burger span:last-child { transform: translate(-50%, -50%) translateY(2.5px); }
.burger[aria-expanded="true"] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

.hero__copy { margin-top: auto; padding: 0 0 clamp(34px, 5vw, 60px); color: #fff; }
.hero__copy h1 {
  margin: 0; font-weight: 200;
  font-size: clamp(40px, 7.4vw, 104px); line-height: 0.98; letter-spacing: -0.045em;
}
.hero__sub { margin: 18px 0 0; font-size: clamp(13px, 1.3vw, 15px); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.86; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Delší popisek se ukazuje jen tam, kde se obě tlačítka vejdou vedle sebe. */
.cta-uzko { display: none; }

.dots { position: absolute; right: clamp(24px, 4vw, 54px); bottom: clamp(38px, 5vw, 64px); display: flex; gap: 8px; }
.dots i { width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.45); }
.dots i.is-on { background: #fff; }

/* Menu není přes celou stránku — je to panel, který se vysune z
   hlavičky a jde mu vidět pod nohy. Sedí na šířku hero rámu, nahoře
   je hranatý, aby na hlavičku navázal bez švu, dole zaoblený jako
   zbytek webu.
   Vysouvání dělá clip-path: obsah stojí na místě a jen se odkrývá
   shora dolů. Výška by text při rozjezdu mačkala, scaleY by ho
   protahoval. Viditelnost se při zavírání přepne až po doběhnutí,
   proto ta nula s prodlevou; při otevírání musí přepnout hned. */
.menu {
  position: fixed; z-index: 55;
  /* Panel zacina uz na horni hrane hlavicky a jeji vysku si nechava jako
     odsazeni. Bila tak tece za hlavickou, ne az pod ni — mezi nimi proto
     nemuze zustat sev, at uz se hlavicka posune kamkoli. */
  top: var(--menu-top, 69px); left: 10px; right: 10px;
  display: flex; flex-direction: column;
  padding: var(--menu-head, 86px) clamp(18px, 5vw, 30px) 24px;
  background: #fff;
  /* Horní rohy hranaté. Zaoblené kopírovaly roh hero rámu a mezi dvěma
     skoro totožnými oblouky prosvítala vyhlazovací linka. Nad panelem
     i vlevo od něj je bílá stránka, takže hranatý roh není vidět. */
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  box-shadow: 0 30px 60px -30px rgba(20, 20, 20, 0.45);
  max-height: calc(100vh - var(--menu-top, 69px) - 22px);
  overflow-y: auto; overscroll-behavior: contain;
  visibility: hidden;
  clip-path: inset(0 0 100% 0 round 0 0 34px 34px);
  transition: clip-path 0.46s var(--ease), visibility 0s linear 0.46s;
}
.menu-open .menu {
  visibility: visible;
  clip-path: inset(0 0 0 0 round 0 0 34px 34px);
  transition: clip-path 0.5s var(--ease), visibility 0s;
}
/* Bez linky na rozhraní hlavičky a seznamu. Drzela je pohromadě, dokud
   panel začínal až pod hlavičkou; teď pod ní bílá protéká, takže linka
   nic nespojuje a nahoře jen svítí jako obrys. */
.menu a {
  display: block;
  padding: 20px 2px; border-bottom: 1px solid var(--line); text-decoration: none;
  font-size: 15px; font-weight: 400; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-2);
  opacity: 0;
  transition: opacity 0.4s var(--ease), color 0.3s var(--ease);
}
.menu a:hover, .menu a:focus-visible { color: var(--ink); }
.menu-open .menu a { opacity: 1; }
/* Odkazy dobíhají za odkrytím panelu, ne před ním. */
.menu-open .menu__list a:nth-child(1) { transition-delay: 0.14s; }
.menu-open .menu__list a:nth-child(2) { transition-delay: 0.19s; }
.menu-open .menu__list a:nth-child(3) { transition-delay: 0.24s; }
.menu-open .menu__list a:nth-child(4) { transition-delay: 0.29s; }
.menu-open .menu__list a:nth-child(5) { transition-delay: 0.34s; }
.menu-open .menu__list a:nth-child(6) { transition-delay: 0.39s; }

/* Vyšší váha než `.menu a`, jinak by tlačítko zdědilo verzálky,
   prostrkání i linku od odkazů v seznamu. */
.menu a.menu__cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: 20px; padding: 0 26px; height: 54px;
  border-bottom: 0; border-radius: 999px;
  letter-spacing: 0.02em; text-transform: none; font-size: 15.5px; color: #fff;
}
.menu-open .menu a.menu__cta { transition-delay: 0.44s; }

/* Hlavička je bílá kvůli tmavému heru. Pod otevřeným menu se přebarví
   do inkoustové a dostane bílý podklad, aby panel vypadal, že z ní
   vyrostl. Zaoblení nahoře uřízne hero rám sám. */
.nav { transition: color 0.42s var(--ease), background-color 0.42s var(--ease); }
.menu-open .nav { z-index: 56; color: var(--ink); }
.menu-open .burger { border-color: var(--line); }
.menu-open .burger span { background: var(--ink); }
.menu-open .ico { border-color: var(--line); color: var(--ink); }
.menu-open .ico__count { background: var(--ink); color: #fff; }
/* Stránka pod panelem se nehýbe — hlavička není fixní, takže by se
   panel při rolování od ní odlepil. */
body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .menu, .menu a { transition-duration: 0.01ms; }
  .menu-open .menu a, .menu-open .menu a.menu__cta { transition-delay: 0s; }
}

@media (max-width: 1300px) {
  .nav__in, .hero__in { padding-inline: max(12px, calc(var(--gut) - 10px)); }
  /* Hlavička sedí uvnitř hero rámu odsazeného o 10 px, pruh je na celou
     šířku — bez tohohle by se levé hrany na úzkých displejích rozešly. */
  .topbar__in { padding-inline: calc(10px + max(12px, var(--gut) - 10px)); }
}

/* ── Sekce ──────────────────────────────────────────────── */
.section { padding: clamp(64px, 8vw, 120px) 0; }

/* ── Záložky oborů ──────────────────────────────────────────
   Stejné pilulky jako přepínač v ceníku, ať se obor přepíná
   na obou místech stejným gestem. */
.tabs { display: flex; gap: 10px; margin-bottom: clamp(36px, 4vw, 58px); }
.tab {
  flex: 0 0 auto; height: 46px; padding: 0 24px;
  border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-family: inherit; font-weight: 300; font-size: 15px;
  color: var(--ink-2); cursor: pointer; white-space: nowrap;
  scroll-snap-align: start; transition: all 0.3s var(--ease);
}
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab sup { font-size: 12px; vertical-align: baseline; margin-left: 8px; opacity: 0.6; letter-spacing: 0; }

/* ── Karty (služby i produkty) ──────────────────────────── */
.grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rail__track.grid-cards { display: flex; }
.pcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 14px 14px 20px; display: flex; flex-direction: column;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.pcard__img {
  position: relative; border-radius: var(--r-md); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--grey); display: grid; place-items: center;
}
.pcard__glyph { font-size: clamp(34px, 4vw, 52px); font-weight: 200; color: rgba(20, 20, 20, 0.3); letter-spacing: -0.04em; }
.pcard__cat {
  position: absolute; top: 12px; left: 12px;
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
  background: rgba(255, 255, 255, 0.82); padding: 5px 10px; border-radius: 999px;
}
.pcard__name { margin: 18px 6px 0; font-size: 16.5px; line-height: 1.35; }
.pcard__meta { margin: 4px 6px 0; font-size: 13px; color: var(--ink-3); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 6px 0; }
.pcard__price { font-size: 22px; letter-spacing: -0.02em; }
.plus {
  width: 46px; height: 46px; border: 0; border-radius: 999px; background: var(--grey);
  color: var(--ink); font-size: 22px; font-weight: 300; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease);
}
.plus:hover { background: var(--ink); color: #fff; transform: rotate(90deg); }
.plus.is-in { background: var(--ink); color: #fff; }

/* ── Péče ───────────────────────────────────────────────── */
.two-col {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 60px); margin-top: clamp(26px, 3vw, 40px);
}
.two-col p { margin: 0; color: var(--ink-2); }

.ph--portrait {
  margin-top: clamp(40px, 5vw, 72px);
  height: clamp(320px, 46vw, 560px);
  border-radius: 400px 400px var(--r-lg) var(--r-lg);
}

.soft-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.soft { border-radius: var(--r-lg); padding: 28px 26px 30px; }
.soft--1 { background: var(--brown-1); }
.soft--2 { background: var(--brown-2); }
.soft--3 { background: var(--brown-3); }
.soft h3 { margin: 0 0 10px; font-size: 30px; font-weight: 300; letter-spacing: -0.03em; }
/* Na sytějším podkladu by 0.62 spadlo pod 4.5:1, proto je text tmavší. */
.soft p { margin: 0; font-size: 15px; color: rgba(20, 20, 20, 0.72); }

/* ── Split (elektroepilace, FAQ) ────────────────────────── */
.split { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(30px, 5vw, 80px); align-items: start; }
.split__left .pill { margin-top: 28px; }

.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: grid; grid-template-columns: 60px 1fr; gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps span { font-size: 26px; font-weight: 200; color: var(--ink-3); letter-spacing: -0.03em; }
.steps h3 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -0.02em; }
.steps p { margin: 8px 0 0; color: var(--ink-2); font-size: 15.5px; }

/* ── Ceník s tečkovaným vodičem ─────────────────────────── */
.cats { margin-top: clamp(38px, 4.5vw, 58px); }
#cenik .rail { margin-top: clamp(38px, 4.5vw, 58px); }
#cenik .cats { margin-top: 0; }
.catbtn {
  flex: 0 0 auto; height: 46px; padding: 0 24px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-family: inherit; font-size: 15px; color: var(--ink-2); cursor: pointer;
  scroll-snap-align: start; transition: all 0.3s var(--ease);
}
.catbtn:hover { border-color: var(--ink); color: var(--ink); }
.catbtn.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.catbtn small { opacity: 0.6; margin-left: 8px; font-size: 12px; }

.price { margin-top: clamp(32px, 3.5vw, 46px); }
.price__group > p { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-3); }
.price__row { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; }
.price__row span { flex: none; max-width: 62%; }
.price__row span small { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.price__row time { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); flex: none; }
.price__row i { flex: 1; border-bottom: 1px dotted var(--line); transform: translateY(-4px); }
.price__row strong { font-weight: 400; white-space: nowrap; }

/* ── Rail: vodorovný posun, fade na okrajích, šipky ─────── */
.rail { position: relative; }
.rail__track {
  display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  padding: 6px 2px 12px;
  scrollbar-width: none; -ms-overflow-style: none;
}
/* overflow-x: auto sráží i svislý přesah, takže se stín karty při hoveru
   uřízl u dolní hrany dráhy. Karta se navíc zvedá o 5 px, takže stín
   potřebuje ještě víc místa dole. Dráha ho dostane odsazením a záporný
   margin ho zase vezme zpátky, aby se nezměnily rozestupy sekcí. */
.rail--cards .rail__track { padding: 18px 2px 40px; margin-bottom: -28px; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { flex: 0 0 auto; scroll-snap-align: start; }
.rail--cards .rail__track { gap: 20px; }
.rail--cards .rail__track > * { flex: 0 0 clamp(250px, 27vw, 330px); }

.rail::before, .rail::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(48px, 7vw, 96px);
  pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.35s var(--ease);
}
.rail::before { left: -2px; background: linear-gradient(90deg, #fff 22%, rgba(255, 255, 255, 0)); }
.rail::after { right: -2px; background: linear-gradient(270deg, #fff 22%, rgba(255, 255, 255, 0)); }
.rail.can-left::before, .rail.can-right::after { opacity: 1; }

.rail__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink);
  font-family: inherit; font-size: 20px; line-height: 1; cursor: pointer;
  opacity: 0; pointer-events: none;
  box-shadow: 0 10px 26px -18px rgba(20, 20, 20, 0.6);
  transition: opacity 0.35s var(--ease), border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.rail__arrow:hover { border-color: var(--ink); }
.rail__arrow--prev { left: 0; }
.rail__arrow--next { right: 0; }
.rail.can-left .rail__arrow--prev, .rail.can-right .rail__arrow--next { opacity: 1; pointer-events: auto; }
.rail--thin .rail__arrow { width: 38px; height: 38px; font-size: 17px; }

/* karta v railu nesmí vyskočit z ořezu při hoveru */
.rail--cards .pcard:hover { transform: translateY(-4px); }

/* ── Kudy k nám ─────────────────────────────────────────── */
.mapa {
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 70px);
  align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 62px) clamp(24px, 4vw, 58px);
}
.mapa .lead { color: var(--ink-2); }
.mapa__adresa { margin: 24px 0 0; font-size: 15.5px; line-height: 1.5; }
.mapa__hodiny { margin: 12px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.mapa__cta { margin-top: 26px; }

/* Leaflet dává svým vrstvám z-index až 1000, mobilní menu má 55 — mapa by
   se mu při otevření vytáhla přes obsah. isolation uzavře mapu do vlastního
   vrstvícího kontextu, uvnitř kterého si Leaflet může vrstvit jak chce. */
.mapa__plan { position: relative; z-index: 0; isolation: isolate; }
#mapa {
  width: 100%; height: clamp(300px, 40vw, 440px);
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line); background: var(--grey);
}
/* Mapu kreslí app.js z vlastních dat, podklad je bílý. Leaflet si jinak
   do kontejneru dává vlastní šedomodrou. */
#mapa.leaflet-container { background: #fff; font-family: inherit; }
#mapa .mapa__nahrada { padding: 24px; }

/* Štítek metra: stejný tvar jako značka studia, ale světlý, ať je
   jasné, co je cíl a co jen orientační bod. */
.mapa__metro {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; line-height: 1; letter-spacing: 0.06em; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 6px 16px rgba(20, 20, 20, 0.12); white-space: nowrap;
}
.mapa__metro-znak {
  display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
  background: var(--brown-3); color: #fff; font-size: 9px; font-weight: 600; letter-spacing: 0;
}

.mapa__pin { display: flex; flex-direction: column; align-items: center; }
/* Značka je tmavá, aby se na světlé mapě neztratila, a inkoustová, ne
   hnědá — do bílošedé mapy nemá vstupovat žádný barevný odstín. */
.mapa__stitek {
  font-size: 11px; line-height: 1; letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff; background: var(--ink); white-space: nowrap;
  padding: 9px 13px; border-radius: 999px;
  box-shadow: 0 8px 22px rgba(20, 20, 20, 0.22);
}
.mapa__bod {
  width: 11px; height: 11px; margin-top: 7px; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 5px rgba(20, 20, 20, 0.18);
}

/* Ovládání do palety webu — Leaflet je má ve výchozím modrošedém. */
#mapa .leaflet-control-zoom a {
  background: #fff; color: var(--ink); border: 0;
}
#mapa .leaflet-control-zoom a:hover { background: var(--grey); }
#mapa .leaflet-control-attribution {
  background: rgba(255, 255, 255, 0.86); color: var(--ink-2); font-size: 10.5px;
}
#mapa .leaflet-control-attribution a { color: var(--ink); }
.mapa__nahrada { margin: 0; color: var(--ink-3); font-size: 14.5px; }

/* Interiér a vchod v sekci O nás: od 21. 9. 2026 swipe galerie
   (railify s rail--foto). Na počítači dvě fotky vedle sebe a šipky,
   na mobilu jedna a kousek další, ať je vidět, že jde posouvat.
   Stejné zaoblení jako karty, ať navazují na oblouk s ošetřením. */
.pece__interier {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px;
}
.ph--interier {
  height: clamp(300px, 36vw, 520px); border-radius: var(--r-lg);
  background-size: cover; background-repeat: no-repeat;
}
.ph--interier-kreslo { background-image: url("foto/interier-2.jpg"); background-position: center 62%; }
.ph--interier-stolek { background-image: url("foto/interier.jpg"); background-position: center 42%; }
.ph--exterier-vchod { background-image: url("foto/exterier-vchod.jpg"); background-position: center 38%; }
.ph--exterier-cedule { background-image: url("foto/exterier-cedule.jpg"); background-position: center 45%; }
.rail--foto { margin-top: 20px; }
.rail__track.pece__interier { display: flex; gap: 20px; margin-top: 0; }
.rail--foto .rail__track > * { flex: 0 0 calc((100% - 20px) / 2); }
.ph--interier::after { opacity: 0.12; }

/* ── Rezervace ──────────────────────────────────────────── */
.bk {
  margin-top: clamp(34px, 4vw, 52px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
.bk__steps { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.bk__steps li {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 8px; font-size: 14px; color: var(--ink-3);
  border-right: 1px solid var(--line); transition: color 0.4s var(--ease);
}
.bk__steps li:last-child { border-right: 0; }
.bk__steps li span {
  display: grid; place-items: center; width: 25px; height: 25px;
  border: 1px solid var(--line); border-radius: 999px; font-size: 12px; transition: all 0.4s var(--ease);
}
.bk__steps li.is-active { color: var(--ink); }
.bk__steps li.is-active span { background: var(--ink); border-color: var(--ink); color: #fff; }
.bk__steps li.is-done span { background: var(--grey-2); border-color: var(--grey-2); color: var(--ink); }

.bk__body { display: grid; grid-template-columns: 1fr 320px; min-height: 430px; }
.bk__main { padding: clamp(20px, 3vw, 34px); }
.bk__panel { animation: fade 0.4s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.bk__filters { display: flex; gap: 8px; margin-bottom: 20px; }
.chip {
  height: 40px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-family: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer;
  transition: all 0.3s var(--ease);
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }

.bk__services { display: grid; gap: 8px; }
.srv {
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 4px 16px;
  width: 100%; padding: 15px 18px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: #fff; font-family: inherit; text-align: left; color: inherit; cursor: pointer;
  transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease);
}
.srv:hover { background: var(--grey); }
.srv.is-on { border-color: var(--ink); background: var(--grey); }
.srv__dot { grid-row: 1 / span 2; width: 15px; height: 15px; border: 1px solid var(--ink-3); border-radius: 999px; position: relative; }
.srv.is-on .srv__dot { border-color: var(--ink); }
.srv.is-on .srv__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 999px; background: var(--ink); }
.srv__name { font-size: 16px; }
.srv__meta { grid-column: 2; font-size: 12.5px; color: var(--ink-3); }
.srv__price { grid-column: 3; grid-row: 1 / span 2; font-size: 19px; white-space: nowrap; }

.cal { max-width: 400px; }
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal__title { margin: 0; font-size: 21px; font-weight: 400; letter-spacing: -0.02em; }
.cal__nav {
  width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-size: 17px; color: var(--ink); cursor: pointer; transition: all 0.3s var(--ease);
}
.cal__nav:hover:not([disabled]) { border-color: var(--ink); }
.cal__nav[disabled] { opacity: 0.3; cursor: not-allowed; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__dow span { text-align: center; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 6px; }
.day {
  aspect-ratio: 1; border: 1px solid transparent; border-radius: 14px; background: transparent;
  font-family: inherit; font-size: 15px; color: var(--ink); cursor: pointer; transition: all 0.25s var(--ease);
}
.day:hover:not([disabled]) { background: var(--grey); }
.day[disabled] { color: var(--ink-3); opacity: 0.5; cursor: not-allowed; }
.day.is-on { background: var(--ink); color: #fff; }
.day.has-free { box-shadow: inset 0 -3px 0 -1px var(--grey-2); }
.day.is-on.has-free { box-shadow: none; }

.slots { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.slots__title { margin: 0 0 12px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.slots__grid { display: flex; flex-wrap: wrap; gap: 8px; }
.rail .slots__grid, .rail .bk__filters { flex-wrap: nowrap; }
.slot {
  height: 44px; min-width: 80px; padding: 0 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-family: inherit; font-size: 15px; color: var(--ink); cursor: pointer; transition: all 0.25s var(--ease);
}
.slot:hover:not([disabled]) { border-color: var(--ink); }
.slot.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.slot[disabled] { color: var(--ink-3); text-decoration: line-through; opacity: 0.6; cursor: not-allowed; }
.slots__empty { margin: 0; color: var(--ink-3); font-size: 15px; }

.form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 580px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13px; color: var(--ink-2); }
.opt { color: var(--ink-3); }
.field input, .field textarea {
  font-family: inherit; font-size: 16px; color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px;
  transition: border-color 0.3s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--ink); }
.field textarea { resize: vertical; }
.err { margin: 0; font-size: 13px; color: #b4483a; }
.err--block { grid-column: 1 / -1; margin-top: -6px; }
.check { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--ink-2); }
.check input { margin-top: 4px; accent-color: var(--ink); }

.bk__done { display: grid; place-items: center; min-height: 380px; }
.done { text-align: center; max-width: 420px; }
.done__mark { width: 62px; height: 62px; fill: none; stroke: var(--ink); stroke-width: 1.2; }
.done__mark circle { stroke-dasharray: 190; animation: draw 0.9s var(--ease) forwards; }
.done__mark path { stroke-dasharray: 46; stroke-dashoffset: 46; animation: draw 0.45s var(--ease) 0.45s forwards; stroke-linecap: round; stroke-linejoin: round; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.done h3 { margin: 18px 0 6px; font-size: 30px; font-weight: 300; letter-spacing: -0.03em; }
.done > p { margin: 0; color: var(--ink-2); }
.done__card {
  margin: 22px 0 24px; padding: 18px 22px; border-radius: var(--r-md); background: var(--grey);
  text-align: left; display: grid; gap: 8px; font-size: 15px;
}
.done__card div { display: flex; justify-content: space-between; gap: 16px; }
.done__card dt { color: var(--ink-3); font-size: 13px; }
.done__card dd { margin: 0; }

.bk__side { border-left: 1px solid var(--line); background: var(--grey); padding: clamp(20px, 3vw, 30px); display: flex; flex-direction: column; }
.side__label { margin: 0 0 16px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.side__list { margin: 0; display: grid; gap: 13px; }
.side__list div { display: grid; gap: 2px; }
.side__list dt { font-size: 12.5px; color: var(--ink-3); }
.side__list dd { margin: 0; font-size: 16px; }
.side__list dd.is-empty { color: var(--ink-3); }
.side__total {
  margin-top: auto; padding-top: 20px; border-top: 1px solid var(--grey-2);
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.side__total strong { font-size: 26px; font-weight: 400; letter-spacing: -0.02em; text-transform: none; color: var(--ink); }
.side__note { margin: 16px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }

.bk__foot { display: flex; justify-content: space-between; gap: 12px; padding: 18px clamp(20px, 3vw, 34px); border-top: 1px solid var(--line); }
.bk__foot .pill:only-child { margin-left: auto; }

#produkty .rail { margin-top: clamp(38px, 4.5vw, 60px); }

/* ── Instagram ──────────────────────────────────────────── */
.ig__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(26px, 3vw, 40px); }
.ig { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ph--ig { aspect-ratio: 1; border-radius: var(--r-md); display: block; text-decoration: none; }
a.ph--ig { transition: transform 0.4s var(--ease); }
a.ph--ig:hover { transform: translateY(-4px); }
a.ph--ig .ph__tag { transition: opacity 0.3s var(--ease); }
a.ph--ig:hover .ph__tag { opacity: 0; }
.ig__mark {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  opacity: 0; transition: opacity 0.3s var(--ease);
}
a.ph--ig:hover .ig__mark { opacity: 1; }
.ig__mark svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.3; }
.ig__post { border: 0; width: 100%; aspect-ratio: 1; border-radius: var(--r-md); background: var(--grey); }
.ph--ig .ph__tag { left: 10px; bottom: 10px; font-size: 9.5px; }

/* ── FAQ ────────────────────────────────────────────────── */
.acc details { border-top: 1px solid var(--line); }
.acc details:last-of-type { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; position: relative;
  /* dvojklik na rozbalovací hlavičku otevírá, ne označuje text */
  user-select: none; -webkit-user-select: none;
  padding: 22px 44px 22px 0; font-size: 20px; font-weight: 400; letter-spacing: -0.02em;
  transition: color 0.3s var(--ease);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 22px; font-weight: 200; color: var(--ink-3); transition: transform 0.35s var(--ease);
}
.acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.acc summary:hover { color: var(--ink-2); }
.acc p { margin: 0 0 24px; color: var(--ink-2); max-width: 66ch; font-size: 15.5px; }

/* ── Patička ─────────────────────────────────────────────
   Tři vodorovné pásy pod sebou: značka s přihlášením k novinkám,
   odkazy a spodní lišta. Dřív to byla mřížka 2×2, ve které logu
   zbývala pod sebou půlka panelu prázdná.
   ──────────────────────────────────────────────────────── */
.footer { padding: 0 0 10px; }
.footer__panel {
  background: var(--grey); border-radius: var(--r-xl);
  padding: clamp(34px, 5vw, 66px) clamp(24px, 4vw, 60px);
}

.footer__top {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 4vw, 70px);
  align-items: start;
}
.footer__logo { margin: 0; }
.footer__claim {
  margin: clamp(20px, 2.5vw, 32px) 0 0;
  font-size: clamp(26px, 3.2vw, 42px); font-weight: 300; line-height: 1.08; letter-spacing: -0.035em;
}

/* ── Přihlášení k novinkám ─────────────────────────────── */
.news { background: #fff; border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 34px); }
.news__nadpis { margin: 0 0 8px; font-size: 19px; font-weight: 400; letter-spacing: -0.02em; }
.news__popis { margin: 0 0 20px; font-size: 14.5px; color: var(--ink-2); max-width: 46ch; }
.news__label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.news__radek { display: flex; gap: 10px; }
.news__input {
  flex: 1 1 auto; min-width: 0; height: 46px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 15px; color: var(--ink);
}
.news__input::placeholder { color: var(--ink-3); }
.news__input:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.news__btn { flex: 0 0 auto; height: 46px; padding: 0 24px; font-size: 14.5px; }
.news__chyba:empty { display: none; }
.news__chyba { margin: 12px 0 0; }
.news__hotovo { margin: 14px 0 0; font-size: 14.5px; color: var(--ink); }

/* ── Odkazy ─────────────────────────────────────────────── */
.footer__cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  margin-top: clamp(40px, 4.5vw, 70px);
  padding-top: clamp(30px, 3.5vw, 44px); border-top: 1px solid var(--grey-2);
}
.footer__cols h4 { margin: 0 0 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; }
.footer__cols a, .footer__cols span { display: block; margin-bottom: 9px; font-size: 14.5px; color: var(--ink-2); text-decoration: none; }
.footer__cols a:hover { color: var(--ink); }
/* Adresa gmailu je delší, než se do sloupce vejde — bez tohohle by přetekla. */
.footer__cols a[href^="mailto:"] { overflow-wrap: anywhere; }

.footer__spod {
  display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between;
  margin-top: clamp(30px, 3.5vw, 44px);
  padding-top: 22px; border-top: 1px solid var(--grey-2);
}
.footer__note { margin: 0; font-size: 12.5px; color: var(--ink-3); }

/* ── Panel k vyzvednutí ─────────────────────────────────── */
.drawer { position: fixed; inset: 0; z-index: 60; }
.drawer__back { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.35); animation: fadein 0.35s var(--ease); }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
.drawer__panel {
  position: absolute; top: 10px; right: 10px; bottom: 10px; width: min(430px, calc(100vw - 20px));
  background: #fff; border-radius: var(--r-lg); display: flex; flex-direction: column;
  animation: slidein 0.45s var(--ease);
}
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 16px; }
.drawer__head h2 { margin: 0; font-size: 22px; font-weight: 400; letter-spacing: -0.025em; }
.drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 22px; display: grid; gap: 10px; align-content: start; }
.drawer__empty { margin: 30px 0; color: var(--ink-3); font-size: 15px; }
.ditem { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ditem .ph { width: 56px; height: 56px; border-radius: 12px; }
.ditem__name { font-size: 15px; line-height: 1.35; }
.ditem__price { font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.qty { display: flex; align-items: center; gap: 6px; }
.qty button {
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 999px; background: #fff;
  font-family: inherit; font-size: 15px; line-height: 1; color: var(--ink); cursor: pointer;
}
.qty button:hover { border-color: var(--ink); }
.qty span { min-width: 18px; text-align: center; font-size: 15px; }
.drawer__form { flex: 0 1 auto; min-height: 0; overflow-y: auto; padding: 16px 22px 6px; display: grid; gap: 14px; }
.drawer__foot { padding: 18px 22px 22px; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.drawer__total { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.drawer__total strong { font-size: 24px; font-weight: 400; color: var(--ink); letter-spacing: -0.02em; }
.drawer__note { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.drawer__cta { width: 100%; }
.drawer__done { display: grid; place-items: center; text-align: center; gap: 10px; padding: 40px 0; }
.drawer__done h3 { margin: 0; font-size: 24px; font-weight: 300; letter-spacing: -0.03em; }
.drawer__done p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ── Reveal ─────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); }

/* ── Kosmetická ošetření (rozbalovací seznam v ceníku) ──── */
.cenik__osetreni { margin-top: clamp(56px, 6vw, 88px); padding-top: clamp(40px, 4.5vw, 60px); border-top: 1px solid var(--line); }
.cenik__podnadpis { margin: 0 0 14px; font-size: clamp(30px, 4vw, 46px); font-weight: 300; letter-spacing: -0.04em; line-height: 1.05; }
.cenik__osetreni .lead { margin-top: 0; }

/* Chová se jako FAQ níž na stránce, jen má v řádku ještě délku a cenu. */
.acc--trms { margin-top: clamp(30px, 3.5vw, 44px); }
.acc--trms summary { display: flex; align-items: baseline; gap: 16px; padding-right: 44px; }
.trm__nazev { flex: 1 1 auto; }
/* Délka a cena zůstávají čitelné i zavřené — kvůli tomu se sem chodí. */
.acc--trms .trm__meta { flex: 0 0 auto; display: flex; align-items: baseline; gap: 14px; margin: 0; }
.acc--trms .trm__meta time { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.acc--trms .trm__meta > span { font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.acc--trms .trm__lead { margin: 0 0 16px; color: var(--ink-2); max-width: 66ch; font-size: 15.5px; }
.trm__list { margin: 0 0 16px; padding: 0; list-style: none; max-width: 66ch; }
.trm__list li { position: relative; padding-left: 26px; margin-top: 7px; font-size: 15px; color: var(--ink-2); }
.trm__list li .znacka { position: absolute; left: 0; top: 0.28em; }
.trm__pro { margin: 0 0 14px; font-size: 15px; color: var(--ink-2); max-width: 66ch; }
.trm__pro strong { font-weight: 400; color: var(--ink); }
.trm__vysledek { margin: 0 0 22px; font-size: 15.5px; color: var(--ink); max-width: 66ch; }
.trm__cta { height: 46px; padding: 0 24px; font-size: 14.5px; margin-bottom: 28px; }

/* Kroužek z loga jako znak v textu: velikost i barva jdou po písmu. */
.znacka {
  display: inline-block; width: 0.72em; height: 0.72em;
  fill: var(--brown-3); flex: none;
}

/* ── Značky kosmetiky ───────────────────────────────────── */
.brands {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin-top: clamp(32px, 3.5vw, 46px);
}
.brand { background: var(--grey); border-radius: var(--r-lg); padding: 34px 32px 32px; }
.brand__eyebrow {
  margin: 0 0 10px; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-3);
}
.brand h3 { margin: 0 0 12px; font-size: clamp(30px, 3.4vw, 40px); font-weight: 300; letter-spacing: -0.04em; }
.brand__lead { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.brand__list { margin: 18px 0 0; padding: 0; list-style: none; }
.brand__list li {
  position: relative; padding-left: 26px; margin-top: 8px;
  font-size: 15px; color: var(--ink-2);
}
/* Odrážky byly dlouhé pomlčky. Teď je to kroužek z loga — stejná
   značka, jaká sedí v M ve wordmarku. Kreslí ho <use> z jednoho
   symbolu v dokumentu, takže se dráha nikde neopakuje. */
.brand__list li .znacka { position: absolute; left: 0; top: 0.28em; }
.brand__claim {
  margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--line);
  font-size: 17px; letter-spacing: -0.01em;
}
.produkty__nadpis {
  margin: clamp(48px, 5vw, 72px) 0 14px;
  font-size: clamp(26px, 3vw, 34px); font-weight: 300; letter-spacing: -0.03em;
}
.pece__claim {
  max-width: 60ch; margin: clamp(38px, 4vw, 54px) 0 0;
  font-size: clamp(19px, 2vw, 23px); font-weight: 300; letter-spacing: -0.02em; line-height: 1.5;
}

/* ── Responzivita ───────────────────────────────────────── */
@media (max-width: 1080px) {
  .grid-cards { grid-template-columns: repeat(2, 1fr); }
  .bk__body { grid-template-columns: 1fr; }
  .bk__side { border-left: 0; border-top: 1px solid var(--line); }
  .split { grid-template-columns: 1fr; }
  .ig { grid-template-columns: repeat(3, 1fr); }
  .soft-cards { grid-template-columns: 1fr; }
  .brands { grid-template-columns: 1fr; }
  /* mapa zůstává vedle textu, pod něj spadne až na úzkém displeji */
  .mapa { grid-template-columns: 0.8fr 1.2fr; gap: 32px; }
  .footer__top { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta { display: none; }
  .burger { display: grid; }
  .price { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .ph--portrait { border-radius: 240px 240px var(--r-lg) var(--r-lg); }
  .mapa { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .grid-cards { grid-template-columns: 1fr; }
  .rail--cards .rail__track > * { flex: 0 0 78vw; }
  .pece__interier { gap: 12px; margin-top: 12px; }
  .rail--foto { margin-top: 12px; }
  .rail__track.pece__interier { gap: 12px; }
  .rail--foto .rail__track > * { flex: 0 0 86%; }
  .ph--interier { height: 380px; }
  /* delší názvy služeb se na mobilu nevejdou vedle času a ceny */
  .price__row { flex-wrap: wrap; padding-bottom: 13px; }
  .price__row span { flex: 1 1 100%; max-width: 100%; }
  .price__row time { margin-top: 2px; }
  /* název ošetření je delší než u FAQ, cena proto spadne pod něj */
  .acc--trms summary { flex-wrap: wrap; gap: 6px 14px; }
  .acc--trms .trm__meta { width: 100%; }
  /* Obě výzvy zůstávají na jednom řádku a dělí se o něj napůl. Plné
     popisky by se nevešly, proto se na mobilu prohodí za kratší.
     Vpravo dole sahá druhé tlačítko, tečky proto na mobilu
     vyjedou nahoru pod hlavičku. */
  .dots { top: 96px; bottom: auto; right: 18px; }
  .hero__cta { flex-wrap: nowrap; gap: 10px; }
  .hero__cta .pill { flex: 1 1 0; min-width: 0; padding: 0 18px; }
  .cta-sirka { display: none; }
  .cta-uzko { display: inline; }
  .form { grid-template-columns: 1fr; }
  .bk__steps { grid-template-columns: repeat(2, 1fr); }
  .bk__steps li:nth-child(2) { border-right: 0; }
  .bk__steps li:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }
  .ig { grid-template-columns: repeat(2, 1fr); }
  .footer__cols { grid-template-columns: 1fr; }
  .news__radek { flex-wrap: wrap; }
  .news__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ── Fotografie ──────────────────────────────────────────
   Fotky leží jako background-image na stávajících .ph
   místech, markup se nemění. Šum z .ph::after zůstává, ale
   slabší — na gradientu dělal texturu, na fotce by dělal
   špínu. Zdroje a autoři jsou v assets/foto/KREDITY.txt. */
.ph--hero,
.ph--portrait,
.ph--ig[data-foto] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ph--portrait { background-image: url("foto/osetreni.jpg"); }

/* Oblouk ořezává vršek, ne strany: pole je široké. Těžiště fotky
   drží uprostřed, aby tuba nesedla na oblou hranu. */
.ph--portrait { background-position: center 42%; }

.ph--hero::after,
.ph--portrait::after,
.ph--ig[data-foto]::after { opacity: 0.12; }

/* ── Hero: prolínání čtyř záběrů ─────────────────────────
   Vrstvy leží na sobě, přepíná se opacita. Puntíky jsou
   ovládací prvky, proto mají kurzor a viditelný focus. */
.hero__zaber {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.2s var(--ease);
}
.hero__zaber.is-on { opacity: 1; }
.dots i { cursor: pointer; }
.dots i:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hero__zaber { transition: none; } }

/* ── Fotky na kartách služeb ─────────────────────────────
   Fotka nahradila značku prvku. Kategorie zůstává, proto
   dostane spodní zástin, aby byla čitelná i na světlé fotce. */
.pcard__img--foto { background-size: cover; background-position: center; }
.pcard__img--foto::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,20,.28) 0%, rgba(20,20,20,0) 42%);
}
.pcard__img--foto .pcard__cat { z-index: 2; }

/* ── Značka prvku na kartách produktů ────────────────────
   Fotka nahradila velký šedý symbol, ale molekulární
   myšlenka značky zůstává: symbol se zmenšil do rohu jako
   štítek. Sedí naproti kategorii, aby si nepřekážely. */
.pcard__znak {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  min-width: 30px; height: 30px; padding: 0 8px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  font-size: 12px; font-weight: 400; letter-spacing: 0.02em;
  color: rgba(20, 20, 20, 0.62);
}

/* ── Logo ────────────────────────────────────────────────
   Vektorisováno z rastrového loga studia. Písmo je jedna
   cesta s currentColor, kamínky v „O" druhá cesta s vlastní
   proměnnou. Díky tomu se logo obarví podle podkladu a nemusí
   existovat dvě verze souboru. */
.logo { display: block; text-decoration: none; line-height: 0; }
.logo__svg { display: block; width: 100%; height: auto; }
.logo { width: 152px; --logo-mark: #C8AE9E; }
/* hlavička nese značku, proto je logo v ní o poznání větší než v patičce */
.nav .logo { width: 210px; }

/* Nad tmavým herem je písmo krémové, po přilepení hlavičky ztmavne. */
.nav .logo { color: var(--cream, #F2EDE6); }
.nav.is-stuck .logo,
.menu-open .nav .logo { color: var(--ink, #141414); --logo-mark: #A8907C; }

.footer__logo { width: 200px; margin: 0; --logo-mark: #C8AE9E; }

@media (max-width: 760px) { .logo { width: 132px; } .nav .logo { width: 168px; } .footer__logo { width: 168px; } }

/* Dráha karet je teď nahoře i dole odsazená kvůli stínu, takže její
   optický střed leží o 3 px níž než střed obalu. Šipky to dorovnají. */
.rail--cards .rail__arrow { top: calc(50% + 3px); }

/* ── Plovoucí rezervace ──────────────────────────────────
   Pro stálé klientky, které jdou rovnou objednat. Sjede na sekci
   Rezervace s kalendářem Altegio. Dokud je vidět hero nebo samotná
   rezervace, schovává se, ať se nezdvojuje.
   Pod menu (55) a košíkem (60), aby je nepřekrývalo. */
.rez-fab {
  position: fixed; z-index: 50;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid; place-items: center;
  width: 60px; height: 60px; padding: 0;
  border-radius: 50%;
  background: var(--ink); color: #fff; text-decoration: none;
  box-shadow: 0 18px 40px -16px rgba(20, 20, 20, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease), background-color 0.35s var(--ease);
}
.rez-fab svg { width: 24px; height: 24px; color: var(--brown-2); }
/* kruh nese jen ikonu, popisek zůstává pro čtečky a jako title */
.rez-fab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rez-fab:hover { background: #2c2c2c; transform: translateY(-2px); }
.rez-fab:focus-visible { outline: 2px solid var(--brown-3); outline-offset: 3px; }
.rez-fab.is-skryte { opacity: 0; transform: translateY(16px); pointer-events: none; }
.menu-open .rez-fab { opacity: 0; pointer-events: none; }
@media (max-width: 760px) { .rez-fab { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .rez-fab { transition: none; } }

/* ── Rezervace přes Altegio ──────────────────────────────
   Vložené okno ve stejném rámu, jaký měla ukázka (.bk). Altegio si
   uvnitř scrolluje samo, proto pevná výška místo výšky obsahu. */
.rez {
  margin-top: clamp(34px, 4vw, 52px);
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden;
}
.rez__okno { display: block; width: 100%; height: min(820px, 86vh); border: 0; }
.rez__zaloha { margin: 14px 4px 0; font-size: 13px; color: var(--ink-2); }
.rez__zaloha a { color: var(--ink); }
@media (max-width: 760px) {
  .rez { border-radius: var(--r-lg); }
  .rez__okno { height: 82vh; }
}

/* ── Tečky v heru ────────────────────────────────────────
   Větší plocha na klik než samotná 7px tečka. */
.dots { align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(20, 20, 20, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dots i { position: relative; width: 22px; height: 22px; background: none; border-radius: 999px; }
.dots i::before { content: ""; position: absolute; inset: 7.5px; border-radius: 999px; background: rgba(255, 255, 255, 0.45); transition: background-color 0.3s var(--ease), transform 0.3s var(--ease); }
.dots i:hover::before { background: rgba(255, 255, 255, 0.8); }
.dots i.is-on { background: none; }
.dots i.is-on::before { background: #fff; transform: scale(1.35); }

/* ── Úpravy 21. 9. 2026 ──────────────────────────────────
   Vybraná záložka (služby, ceník, filtry) je hnědá místo černé,
   bílé písmo má na #765a44 kontrast přes 6:1. */
.tab.is-on, .catbtn.is-on, .chip.is-on { background: #765a44; border-color: #765a44; color: #fff; }
.tab:hover, .catbtn:hover, .chip:hover { border-color: #765a44; color: #765a44; }
.tab.is-on:hover, .catbtn.is-on:hover, .chip.is-on:hover { color: #fff; }

/* Plovoucí rezervace je větší, ať ji stálé klientky hned najdou. */
.rez-fab { width: 72px; height: 72px; }
.rez-fab svg { width: 30px; height: 30px; }
@media (max-width: 760px) { .rez-fab { width: 64px; height: 64px; } .rez-fab svg { width: 27px; height: 27px; } }

/* Slogan pod obloukem místo tří karet. */
.slogan { margin-top: clamp(30px, 3.5vw, 48px); }


/* Rezervace ve dvou sloupcích. Altegio kreslí úzký sloupec na střed,
   širší okno by jen přidalo prázdné okraje. Rám má proto šířku jeho
   sloupce a vlevo zbylé místo nese to, co se hodí vědět předem. */
.rez-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px);
  gap: clamp(24px, 4vw, 64px); align-items: start; margin-top: clamp(34px, 4vw, 52px);
}
.rez-layout .rez { margin-top: 0; }
.rez-info { position: sticky; top: 110px; }
.rez-info__kroky { list-style: none; margin: 0; padding: 0; counter-reset: krok; }
.rez-info__kroky li {
  counter-increment: krok; position: relative; padding: 18px 0 18px 58px;
  border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 15.5px;
}
.rez-info__kroky li strong { display: block; color: var(--ink); font-weight: 400; font-size: 18px; margin-bottom: 2px; }
.rez-info__kroky li::before {
  content: counter(krok, decimal-leading-zero); position: absolute; left: 0; top: 20px;
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brown-1); color: #6b5140; font-size: 13px; letter-spacing: 0.04em;
}
.rez-info__kontakt { margin: 26px 0 0; color: var(--ink-2); font-size: 15px; }
.rez-info__kontakt a { color: var(--ink); }
@media (max-width: 900px) {
  .rez-layout { grid-template-columns: 1fr; }
  .rez-info { position: static; }
}
@media (max-width: 1100px) and (min-width: 761px) { .brands { grid-template-columns: repeat(2, 1fr); } }

/* Posuvníky Altegio jsou uvnitř cizí stránky a nastylovat nejdou.
   Rám je proto o jejich šířku (--sb, změřeno v app.js) větší než
   viditelná plocha a přesah se ořízne. S překryvnými posuvníky
   (Mac s trackpadem, mobily) je --sb nula a nic se neořezává. */
.rez { height: min(820px, 86vh); }
.rez__okno {
  width: calc(100% + var(--sb, 0px));
  height: calc(100% + var(--sb, 0px));
}
@media (max-width: 760px) { .rez { height: 82vh; } .rez__okno { height: calc(100% + var(--sb, 0px)); } }

/* Seznam k vyzvednutí se od 21. 9. 2026 nepoužívá (produkty bez +),
   proto je pryč i jeho tlačítko v hlavičce. */
#open-list { display: none; }

/* Karty značek sdílí řádky přes subgrid: popisy, seznamy i věta pod
   čarou stojí ve všech třech kartách na stejné úrovni. */
@media (min-width: 761px) {
  .brands { grid-template-rows: repeat(5, auto); row-gap: 0; }
  .brand { display: grid; grid-template-rows: subgrid; grid-row: span 5; align-content: start; }
  .brand__claim { align-self: start; }
}

/* Všechna tlačítka nejvýš 40 px (21. 9. 2026). Pole pro e-mail
   vedle tlačítka odběru jde s nimi, ať řádek sedí. Plovoucí
   rezervace je výjimka, má být velká. */
.pill, .nav__links a, .nav__cta, .menu a.menu__cta,
.tab, .catbtn, .chip, .trm__cta, .news__btn, .news__input { height: 40px; }
.ico, .burger, .plus, .rail__arrow { width: 40px; height: 40px; }
.rail--thin .rail__arrow { width: 36px; height: 36px; }
.pill { padding: 0 22px; }

/* Na mobilu jsou karty značek balíček: každá se přilepí nahoře a další
   ji při scrollu celou překryje. Výšku mají stejnou (--brand-h z app.js
   podle nejvyšší), jinak by spodek předchozí karty vykukoval. */
@media (max-width: 760px) {
  .brands { display: block; }
  .brand {
    position: sticky; top: 16px;
    min-height: var(--brand-h, auto);
    margin-bottom: 16px;
    box-shadow: 0 -10px 30px -18px rgba(20, 20, 20, 0.28);
  }
  .brand:last-child { margin-bottom: 0; }
}

/* Na mobilu bez teček v heru a bez šedého orámování rezervace. */
@media (max-width: 760px) {
  .dots { display: none; }
  .rez { border: 0; }
}

/* Mobil: bez oblouku s fotkou v O nás. */
@media (max-width: 760px) {
  #pece .ph--portrait { display: none; }
}

/* Mobil: u popisů ošetření je cena vpravo a plus pod ní, vlevo název
   a pod ním délka. Pseudoprvek s plusem je sám položkou mřížky. */
@media (max-width: 760px) {
  .acc--trms summary {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nazev cena" "cas plus";
    column-gap: 16px; row-gap: 6px; align-items: baseline; padding-right: 0;
  }
  .acc--trms .trm__nazev { grid-area: nazev; }
  .acc--trms .trm__meta { display: contents; }
  .acc--trms .trm__meta time { grid-area: cas; }
  .acc--trms .trm__meta > span { grid-area: cena; justify-self: end; }
  .acc--trms summary::after {
    grid-area: plus; position: static; transform: none;
    justify-self: end; align-self: center; line-height: 1; margin-right: 4px;
  }
  .acc--trms details[open] summary::after { transform: rotate(45deg); }
}