/* ============================================================
   PER LA PIZZA — design system & stylesheet
   Neapolská pizzerie, Dolní Bojanovice

   Obsah:
   01 Tokeny        02 Base           03 Typografie
   04 Utility       05 Tlačítka       06 Chipy (výběry)
   07 Formuláře     08 Badge & notice 09 Stavová lišta
   10 Header & nav  11 Mobilní menu   12 Spodní lišta
   13 Hero          14 Marquee pás    15 Sekce & editorial
   16 Foto placeholdery              17 Menu
   18 Rezervace     19 Galerie        20 Mapa
   21 Footer        22 Design system  23 Pohyb & přístupnost
   ============================================================ */

/* ---------- 01 TOKENY ---------- */
:root {
  /* Barvy značky */
  --cream: #F3EBDD;        /* hlavní světlé pozadí */
  --cream-2: #EAE0CB;      /* tmavší krémová — karty, pruhy */
  --cream-3: #FBF7EE;      /* nejsvětlejší — inputy, plochy */
  --red: #C9342F;          /* rajčatová — primární akce */
  --red-deep: #A82722;     /* hover / pressed */
  --ink: #171714;          /* téměř černá — text */
  --ink-60: rgba(23, 23, 20, .60);
  --ink-40: rgba(23, 23, 20, .40);
  --ink-15: rgba(23, 23, 20, .15);
  --ink-08: rgba(23, 23, 20, .08);
  --green: #384B39;        /* zahradní zelená */
  --green-deep: #2C3B2D;
  --teal: #2F9290;         /* tyrkys vozítka — akcenty, focus */
  --teal-soft: rgba(47, 146, 144, .16);
  --white: #FFFFFF;

  /* Typografie */
  --font-display: "Fraunces", "Georgia", serif;
  --font-sans: "Manrope", "Segoe UI", system-ui, sans-serif;

  /* Typografická škála (fluidní) */
  --fs-hero:    clamp(2.75rem, 1.2rem + 6.8vw, 6.5rem);   /* H1 hero */
  --fs-display: clamp(2.25rem, 1.2rem + 4.4vw, 4.5rem);   /* H2 sekce */
  --fs-title:   clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem);    /* H3 */
  --fs-sub:     clamp(1.25rem, 1.1rem + .8vw, 1.65rem);   /* H4 / lead menu */
  --fs-lead:    clamp(1.075rem, 1rem + .45vw, 1.3rem);    /* perex */
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-caption: .75rem;

  /* Rytmus */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem;
  --space-4: 1rem;   --space-5: 1.5rem; --space-6: 2rem;
  --space-7: 3rem;   --space-8: 4.5rem; --space-9: 7rem;

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 26px;
  --radius-pill: 999px;

  --shadow-soft: 0 10px 30px -12px rgba(23, 23, 20, .22);
  --shadow-lift: 0 18px 44px -16px rgba(23, 23, 20, .32);

  --header-h: 76px;
  --bottombar-h: 62px;

  /* Jemný papírový šum */
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  overflow-x: clip;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--red); color: var(--cream); }

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

.skip-link {
  position: fixed; top: -100px; left: 16px; z-index: 300;
  background: var(--ink); color: var(--cream);
  padding: 10px 18px; border-radius: var(--radius-pill);
  text-decoration: none; font-weight: 700; font-size: var(--fs-small);
  transition: top .2s ease;
}
.skip-link:focus-visible { top: 12px; }

/* Skryje text před očima, ale nechá ho pro čtečky obrazovky a vyhledávače.
   Používáme u hlavních nadpisů (h1) — bez nich by stránka pro Google
   ztratila téma. Běžný text, který má zmizet úplně, se zakomentuje. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- 03 TYPOGRAFIE ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); }
h2 { font-size: var(--fs-display); }
h3 { font-size: var(--fs-title); }
h4 { font-family: var(--font-sans); font-weight: 800; font-size: var(--fs-sub); line-height: 1.2; margin: 0 0 var(--space-3); }
p { margin: 0 0 var(--space-4); }

.accent-i { font-style: italic; font-weight: 500; }
.accent-red { color: var(--red); }
.accent-teal { color: var(--teal); }
.accent-green { color: var(--green); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 34em;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .6em;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--space-4);
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px;
}
.eyebrow--plain::before { display: none; }

/* Číslované popisky sekcí (》01 — Kdo jsme《) jsou interní číslování
   z návrhu, návštěvníkovi nic neříkají — dočasně skryté. Popisky bez
   čísla (》Menu《, 》Náš příběh《) jsou běžný obsah a zůstávají.
   Zobrazit zpátky: smazat tenhle blok. */
.eyebrow--num { display: none; }

.small { font-size: var(--fs-small); }
.muted { color: var(--ink-60); }

/* ---------- 04 UTILITY ---------- */
.container { width: min(1240px, 92vw); margin-inline: auto; }
.container--wide { width: min(1400px, 95vw); }
.container--narrow { width: min(760px, 92vw); }

.section { padding-block: clamp(3.5rem, 3rem + 4vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--ink .lead, .section--ink .muted { color: rgba(243, 235, 221, .66); }
.section--green { background: var(--green); color: var(--cream); }
.section--green .lead, .section--green .muted { color: rgba(243, 235, 221, .72); }
.section--cream2 { background: var(--cream-2); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.hr-dotted {
  border: 0; border-top: 2px dashed var(--ink-15); margin: var(--space-6) 0;
}

/* Poznámka „ukázková data“ */
.sample-note {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--teal-soft); color: var(--teal);
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 14px; border-radius: var(--radius-pill);
}

/* ---------- 05 TLAČÍTKA ---------- */
.btn {
  --btn-bg: var(--red);
  --btn-fg: var(--cream);
  --btn-bg-hover: var(--red-deep);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .85em 1.7em;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 800; font-size: var(--fs-body); letter-spacing: .01em;
  text-decoration: none; cursor: pointer; user-select: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.btn:active { transform: translateY(0) scale(.985); box-shadow: none; }
.btn:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.btn[disabled], .btn.is-disabled {
  opacity: .45; pointer-events: none; box-shadow: none; transform: none;
}

.btn--secondary {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bg-hover: var(--ink);
  border-color: var(--ink);
}
.btn--secondary:hover { color: var(--cream); }

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink); --btn-bg-hover: var(--ink-08);
  min-height: 44px; padding: .6em 1.2em; font-size: var(--fs-small);
}
.btn--ghost:hover { color: var(--ink); box-shadow: none; }

.btn--on-dark { --btn-bg: var(--cream); --btn-fg: var(--ink); --btn-bg-hover: var(--white); }
.btn--outline-light {
  --btn-bg: transparent; --btn-fg: var(--cream); --btn-bg-hover: var(--cream);
  border-color: var(--cream);
}
.btn--outline-light:hover { color: var(--ink); }

.btn--teal { --btn-bg: var(--teal); --btn-fg: var(--white); --btn-bg-hover: #257a78; }
.btn--lg { min-height: 60px; font-size: 1.1rem; padding: 1em 2.2em; }
.btn--block { width: 100%; }

/* Loading stav */
.btn.is-loading { pointer-events: none; }
.btn.is-loading .btn__label { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; width: 22px; height: 22px;
  border: 3px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  animation: plp-spin .7s linear infinite;
}
@keyframes plp-spin { to { transform: rotate(360deg); } }

.btn__arrow { transition: transform .18s ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- 06 CHIPY — výběr data, hostů, času ---------- */
.chip {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 52px; min-width: 52px; padding: 8px 16px;
  border: 2px solid var(--ink-15); border-radius: var(--radius-m);
  background: var(--cream-3); color: var(--ink);
  font-weight: 700; font-size: var(--fs-body);
  cursor: pointer; user-select: none;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
.chip:hover { border-color: var(--ink); transform: translateY(-1px); }
.chip:active { transform: scale(.97); }
.chip:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.chip[aria-pressed="true"], .chip.is-selected {
  background: var(--ink); border-color: var(--ink); color: var(--cream);
}
.chip[disabled], .chip.is-disabled {
  border-style: dashed; color: var(--ink-40); background: transparent;
  cursor: not-allowed; pointer-events: none; text-decoration: line-through;
}
.chip__sub { font-size: var(--fs-caption); font-weight: 600; opacity: .65; letter-spacing: .02em; }

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-scroll {
  display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.chip-scroll .chip { scroll-snap-align: start; flex: 0 0 auto; }

/* Krokovač počtu (8+) */
.stepper-num {
  display: inline-flex; align-items: center; gap: 4px;
  border: 2px solid var(--ink-15); border-radius: var(--radius-m);
  background: var(--cream-3); padding: 4px;
}
.stepper-num button {
  width: 44px; height: 44px; border: 0; border-radius: 12px;
  background: transparent; font-size: 1.3rem; font-weight: 800; cursor: pointer;
  transition: background-color .15s ease;
}
.stepper-num button:hover { background: var(--ink-08); }
.stepper-num input {
  width: 56px; height: 44px; border: 0; background: transparent;
  text-align: center; font: 800 1.1rem var(--font-sans); color: var(--ink);
}
.stepper-num input:focus { outline: none; }

/* ---------- 07 FORMULÁŘE ---------- */
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-5); }
.field__label {
  font-size: var(--fs-caption); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60);
}
.field__label .req { color: var(--red); }
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="number"],
.field textarea,
.field select {
  width: 100%;
  border: 2px solid var(--ink-15); border-radius: var(--radius-m);
  background: var(--cream-3); color: var(--ink);
  padding: 14px 16px; font: 600 1rem var(--font-sans);
  min-height: 52px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 104px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink-40); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--teal-soft);
}
.field.has-error input, .field.has-error textarea { border-color: var(--red); }
.field__error {
  display: none; align-items: center; gap: 6px;
  color: var(--red); font-size: var(--fs-small); font-weight: 700;
}
.field.has-error .field__error { display: inline-flex; }
.field__hint { font-size: var(--fs-small); color: var(--ink-60); }

/* Checkbox (souhlas) */
.check {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  font-size: var(--fs-small); line-height: 1.5; color: var(--ink-60);
}
.check input {
  appearance: none; flex: 0 0 auto; width: 26px; height: 26px; margin: 0;
  border: 2px solid var(--ink-40); border-radius: 8px; background: var(--cream-3);
  display: grid; place-content: center; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.check input::before {
  content: ""; width: 12px; height: 12px;
  clip-path: polygon(14% 44%, 0 62%, 42% 100%, 100% 16%, 82% 0%, 40% 66%);
  background: var(--cream); transform: scale(0);
  transition: transform .15s ease;
}
.check input:checked { background: var(--green); border-color: var(--green); }
.check input:checked::before { transform: scale(1); }
.check input:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.check a { color: var(--ink); font-weight: 700; }
.check.has-error input { border-color: var(--red); }

/* ---------- 08 BADGE & NOTICE ---------- */
.badge {
  display: inline-flex; align-items: center; gap: .4em;
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .06em;
  padding: 4px 10px; border-radius: var(--radius-pill);
}
.badge--veg { background: rgba(56, 75, 57, .14); color: var(--green); }
.badge--vegan { background: rgba(56, 75, 57, .22); color: var(--green-deep); }
.badge--spicy { background: rgba(201, 52, 47, .12); color: var(--red); }
.badge--allergen { background: var(--ink-08); color: var(--ink-60); font-weight: 700; }

.notice {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: var(--radius-m); padding: 16px 18px;
  font-size: var(--fs-small); font-weight: 600; line-height: 1.5;
  border: 2px solid transparent;
}
.notice__icon { flex: 0 0 auto; margin-top: 1px; }
.notice--info { background: var(--teal-soft); border-color: rgba(47,146,144,.3); color: #1d5f5e; }
.notice--warn { background: rgba(201, 52, 47, .08); border-color: rgba(201, 52, 47, .3); color: var(--red-deep); }
.notice--error { background: rgba(201, 52, 47, .12); border-color: var(--red); color: var(--red-deep); }
.notice--success { background: rgba(56, 75, 57, .1); border-color: rgba(56, 75, 57, .4); color: var(--green-deep); }

/* ---------- 09 STAVOVÁ LIŠTA ---------- */
.status-bar {
  position: relative; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 16px;
  background: var(--ink); color: var(--cream);
  font-size: var(--fs-small); font-weight: 700; letter-spacing: .02em;
  text-align: center;
}
.status-bar__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: #7fbf6a;
  box-shadow: 0 0 0 3px rgba(127, 191, 106, .25);
}
.status-bar--closed .status-bar__dot { background: var(--red); box-shadow: 0 0 0 3px rgba(201, 52, 47, .3); }
.status-bar--special { background: var(--red); }
.status-bar--special .status-bar__dot { background: var(--cream); box-shadow: 0 0 0 3px rgba(243, 235, 221, .25); }
.status-bar--teal { background: var(--teal); color: var(--white); }
.status-bar--teal .status-bar__dot { background: var(--white); box-shadow: 0 0 0 3px rgba(255,255,255,.3); }
.status-bar a { color: inherit; font-weight: 800; }

/* ---------- 10 HEADER & NAVIGACE ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  transition: box-shadow .25s ease;
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--ink-15), var(--shadow-soft); }
#faq { scroll-margin-top: calc(var(--header-h) + 16px); }
.site-header__inner {
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  display: inline-flex; align-items: center;
  color: var(--red); text-decoration: none; white-space: nowrap;
}
.brand svg { display: block; height: 22px; width: auto; }
.admin-header .brand svg { height: 18px; }

.main-nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 34px); }
.main-nav a {
  position: relative; text-decoration: none;
  font-weight: 700; font-size: var(--fs-small); letter-spacing: .04em;
  color: var(--ink); padding: 6px 2px;
}
.main-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0;
  height: 2px; background: var(--red);
  transition: right .2s ease;
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after { right: 0; }
.main-nav a[aria-current="page"] { color: var(--red); }

.header-cta { display: inline-flex; }
.header-cta .btn { min-height: 46px; padding: .6em 1.4em; font-size: var(--fs-small); }

.nav-burger {
  display: none;
  width: 48px; height: 48px; border: 2px solid var(--ink); border-radius: 50%;
  background: transparent; cursor: pointer;
  place-items: center;
  transition: background-color .15s ease;
}
.nav-burger:hover { background: var(--ink-08); }
.nav-burger svg { pointer-events: none; }

@media (max-width: 980px) {
  .main-nav, .header-cta { display: none; }
  .nav-burger { display: grid; }
}

/* ---------- 11 FULLSCREEN MOBILNÍ MENU ---------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--ink); color: var(--cream);
  display: flex; flex-direction: column;
  padding: 20px clamp(20px, 6vw, 40px) calc(24px + env(safe-area-inset-bottom, 0px));
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .28s ease, transform .28s ease, visibility 0s .28s;
}
.mobile-menu.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .28s ease, transform .28s ease;
}
.mobile-menu__top { display: flex; justify-content: space-between; align-items: center; height: var(--header-h); }
.mobile-menu__top .brand { color: var(--cream); }
.mobile-menu__close {
  width: 48px; height: 48px; border: 2px solid var(--cream); border-radius: 50%;
  background: transparent; color: var(--cream); cursor: pointer; display: grid; place-items: center;
}
.mobile-menu__nav {
  flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 4px;
}
.mobile-menu__nav a {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 9vw, 3.4rem);
  line-height: 1.18; text-decoration: none; color: var(--cream);
  display: flex; align-items: baseline; gap: 14px;
  padding: 6px 0;
}
.mobile-menu__nav a .num {
  font-family: var(--font-sans); font-size: var(--fs-caption);
  font-weight: 800; letter-spacing: .2em; color: var(--red);
}
.mobile-menu__nav a:active { color: var(--red); }
.mobile-menu__nav a[aria-current="page"] { color: var(--red); font-style: italic; }
.mobile-menu__foot { display: grid; gap: 14px; }
.mobile-menu__meta {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: var(--fs-small); color: rgba(243,235,221,.6); font-weight: 600;
}
.mobile-menu__meta a { color: var(--cream); text-decoration: none; font-weight: 700; }

/* ---------- 12 SPODNÍ MOBILNÍ LIŠTA ---------- */
/* Plovoucí „pilulka“ nad obsahem. Zobrazená je ve výchozím stavu a nad
   breakpointem se skrývá — kdyby media dotaz na starším mobilu selhal,
   lišta zůstane, ne naopak. */
.bottom-bar {
  position: fixed; z-index: 150;
  left: 50%; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  width: min(430px, calc(100% - 24px));
  transform: translateX(-50%);
  /* Plná barva, žádný backdrop-filter: v iOS Safari se fixní prvek
     s rozmazaným pozadím při rolování odlepí od spodku obrazovky
     a zůstane viset uprostřed textu. */
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 34px rgba(23,23,20,.34);
  overflow: hidden;
  /* Safari občas neořízne barevné pozadí potomků podle border-radius —
     červené tlačítko by pak mělo ostré rohy a vyčnívalo. */
  clip-path: inset(0 round var(--radius-pill));
  transition: width .3s ease, bottom .3s ease, box-shadow .3s ease;
}
/* Rezerva pod posledním prvkem stránky, aby ho lišta nikdy nezakryla.
   Administrace plovoucí lištu nemá — tam by to jen ukrajovalo výšku,
   která v Knize rezervací chybí na mřížku. */
body:not(.rb):not([data-page^="admin"]):not([data-page="dashboard"]) {
  padding-bottom: calc(var(--bottombar-h) + 40px + env(safe-area-inset-bottom, 0px));
}
.bottom-bar__inner {
  display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 4px;
  min-height: var(--bottombar-h);
  padding: 6px;
  transition: min-height .3s ease, padding .3s ease;
}
/* Dlaždice jsou samostatné „pilulky“ uvnitř lišty — zvýrazněná akce tak
   nikdy nenaráží ostrým rohem do zaobleného okraje. */
.bottom-bar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  text-decoration: none; color: var(--cream);
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-align: center;
}
.bottom-bar a svg { width: 21px; height: 21px; flex: 0 0 auto; }
.bottom-bar a span {
  line-height: 1.15; overflow: hidden;
  max-height: 1.3em; opacity: 1;
  transition: max-height .28s ease, opacity .2s ease;
}
.bottom-bar a:active { background: rgba(243,235,221,.08); }
.bottom-bar .bottom-bar__primary {
  background: var(--red); font-weight: 800;
}
.bottom-bar .bottom-bar__primary:active { background: var(--red-deep); }

/* Scroll dolů = lišta se scvrkne na samotné ikony, ať nepřekáží ve čtení.
   Scroll nahoru ji vrátí do plné velikosti (chování jako v Instagramu). */
.bottom-bar.is-compact {
  width: min(288px, calc(100% - 72px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 8px 22px rgba(23,23,20,.28);
}
.bottom-bar.is-compact .bottom-bar__inner { min-height: 52px; padding: 5px; }
.bottom-bar.is-compact a span { max-height: 0; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .bottom-bar, .bottom-bar__inner, .bottom-bar a span { transition: none; }
}

@media (min-width: 981px) {
  .bottom-bar { display: none; }
  body { padding-bottom: 0; }
}

/* ---------- 13 HERO ---------- */
.hero {
  position: relative;
  min-height: max(560px, calc(94svh - var(--header-h)));
  display: flex; align-items: flex-end;
  color: var(--cream);
  overflow: clip;
}
.hero__media { position: absolute; inset: 0; z-index: 0; }
/* Ztmavení pod nadpisem. Řeší dvě věci naráz: text je vlevo dole a musí
   být čitelný i na světlé fotce (bílá košile, bílé dveře), zatímco motiv
   vpravo nahoře má zůstat vidět. Proto svislý přechod pro text plus
   vodorovný, který drží pravou stranu světlou. */
.hero__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; /* nad fotkou (z-index 1) */
  background:
    linear-gradient(to top, rgba(23,23,20,.90) 0%, rgba(23,23,20,.50) 45%, rgba(23,23,20,.18) 100%),
    linear-gradient(to right, rgba(23,23,20,.38) 0%, rgba(23,23,20,0) 55%);
}
/* popisek fotky v hero musí zůstat nad ztmavením */
.hero__media .ph::after { z-index: 3; }
.hero__inner {
  position: relative; z-index: 1;
  width: min(1400px, 95vw); margin-inline: auto;
  padding: clamp(2rem, 5vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
}
.hero__loc {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid rgba(243,235,221,.5); border-radius: var(--radius-pill);
  padding: 8px 16px; font-size: var(--fs-small); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
  margin-bottom: var(--space-5);
}
.hero__loc svg { width: 14px; height: 14px; }
.hero h1 { margin-bottom: var(--space-4); max-width: 11em; }
.hero__sub { font-size: var(--fs-lead); max-width: 30em; color: rgba(243,235,221,.85); margin-bottom: var(--space-6); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__media .ph::after { top: 16px; left: 16px; bottom: auto; }

.hero__stamp {
  position: absolute; z-index: 2;
  top: clamp(18px, 4vw, 52px); right: clamp(18px, 4vw, 56px);
  width: clamp(120px, 15vw, 190px); aspect-ratio: 1;
  color: #E21E2B; /* oficiální červená z brand exportu loga */
}

/* Razítko — rotující kruhové logo */
.stamp { width: 100%; height: 100%; }
.stamp__spin { transform-origin: 50% 50%; animation: plp-rotate 26s linear infinite; }
@keyframes plp-rotate { to { transform: rotate(360deg); } }

/* ---------- 14 MARQUEE PÁS ---------- */
.marquee {
  /* hidden, ne clip — clip je v Safari novější a s posouvanou vrstvou
     uvnitř se chová hůř než léty prověřený hidden */
  overflow: hidden; white-space: nowrap;
  background: var(--red); color: var(--cream);
  /* Pás byl na úvodní stránce příliš dominantní — odsazení i písmo zmenšené
     o pětinu. Linky nahoře a dole zůstávají 3px, tenčí by se rozmazaly. */
  padding: 11px 0;
  border-block: 3px solid var(--ink);
}
.marquee--cream { background: var(--cream); color: var(--ink); border-block: 3px solid var(--ink); }
.marquee__track {
  display: inline-flex; gap: 0;
  /* Dobu běhu přepíše main.js podle délky pásu, ať je rychlost pořád
     stejná. Tahle hodnota platí jen než skript doběhne. */
  animation: plp-marquee 46s linear infinite;
  will-change: transform;
}
.marquee__seq { display: inline-flex; align-items: center; flex: 0 0 auto; }
.marquee__item {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.88rem, .8rem + .96vw, 1.44rem);
  letter-spacing: .04em; text-transform: uppercase;
  padding: 0 .8em; display: inline-flex; align-items: center; gap: 1.6em;
}
.marquee__item.is-outline {
  color: transparent;
  -webkit-text-stroke: 1.2px currentColor;
  -webkit-text-stroke-color: var(--cream);
  color: transparent;
}
.marquee--cream .marquee__item.is-outline { -webkit-text-stroke-color: var(--ink); }
.marquee__dot { font-size: .6em; }
/* Posun v pixelech (dopočítá main.js) a translate3d — obojí kvůli tomu,
   aby animaci převzala grafická karta. Procentní posun Safari nezrychlí.
   Záložní -50 % platí, než skript doběhne. */
@keyframes plp-marquee {
  to { transform: translate3d(var(--plp-marquee-shift, -50%), 0, 0); }
}

/* ---------- 15 SEKCE & EDITORIAL ---------- */
.sec-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 3rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }

/* Editorialový blok s přesahem fotky */
.editorial {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(1.5rem, 4vw, 5rem); align-items: center;
}
.editorial--flip { grid-template-columns: .95fr 1.05fr; }
.editorial--flip .editorial__media { order: -1; }
.editorial__media { position: relative; }
.editorial__media .ph { box-shadow: var(--shadow-lift); }
/* Menší přesah — fotka má hlavní snímek doplnit, ne ho zakrýt. */
.editorial__media .ph--float {
  position: absolute; width: 36%;
  right: -5%; bottom: -10%;
  border: 6px solid var(--cream);
  box-shadow: var(--shadow-lift);
}
.editorial--on-dark .editorial__media .ph--float { border-color: var(--ink); }
@media (max-width: 900px) {
  .editorial, .editorial--flip { grid-template-columns: 1fr; }
  .editorial--flip .editorial__media { order: 0; }
  /* Na mobilu drží float fotka u pravého okraje a zabírá jen roh,
     ať nepřekryje popisek hlavní fotky. */
  .editorial__media .ph--float { right: 0; bottom: -8%; width: 34%; border-width: 4px; }
  /* Popisek v malé fotce musí zůstat čitelný, ale nesmí ji přerůst. */
  .editorial__media .ph--float::after {
    left: 7px; bottom: 7px; max-width: calc(100% - 14px);
    font-size: .58rem; padding: 4px 8px; letter-spacing: .03em;
  }
  /* Popisek hlavní fotky končí tam, kde začíná ta malá — jinak se oba
     texty na mobilu překryjí a nepřečtou. */
  .editorial__media .ph:not(.ph--float)::after {
    max-width: calc(64% - 14px);
    font-size: .62rem; padding: 5px 10px;
  }
  .editorial__media { margin-bottom: var(--space-6); }
}

/* Fotka přesahující mezi sekcemi */
.bleed-up { margin-top: clamp(-6rem, -8vw, -3rem); position: relative; z-index: 2; }

/* Číslované mini-štítky */
.tag-num {
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .2em;
  color: var(--ink-40);
}

/* Tým */
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2.5rem); }
/* align-content: start — karty se v mřížce roztahují na stejnou výšku a bez
   tohoto by se přebytek rozdělil do řádků: fotka u karty s kratším popiskem
   by se natáhla a text pod ní by začínal níž než u sousedů. */
.team-card { display: grid; align-content: start; gap: 14px; }
.team-card:nth-child(odd) .ph { transform: rotate(-1.2deg); }
.team-card:nth-child(even) .ph { transform: rotate(1deg); }
.team-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; margin: 0; }
.team-card .role { color: var(--red); font-weight: 700; font-size: var(--fs-small); letter-spacing: .06em; text-transform: uppercase; }
.team-card p { font-size: var(--fs-small); color: var(--ink-60); margin: 0; }
.section--ink .team-card p { color: rgba(243,235,221,.6); }
@media (max-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }

/* Recenze — ručně vkládané z Google */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); align-items: start; }
.review-card {
  display: grid; gap: 10px; align-content: start;
  background: var(--cream-3); border-radius: var(--radius-l);
  padding: clamp(1.25rem, 2vw, 1.75rem);
}
.review-card__stars { color: var(--red); font-size: 1.1rem; letter-spacing: 2px; }
.review-card__text { font-size: var(--fs-small); color: var(--ink-60); margin: 0; }
.review-card__name { font-weight: 800; font-family: var(--font-sans); font-size: var(--fs-small); }
@media (max-width: 900px) { .review-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .review-grid { grid-template-columns: 1fr; } }

/* ---------- 16 FOTO PLACEHOLDERY ----------
   Každý .ph reprezentuje konkrétní autentickou fotografii.
   data-label nese číslo slotu (01–41) + zadání snímku —
   např. „04 — FOTO — …“ → soubor 04.jpg. */
.ph {
  position: relative; overflow: clip;
  border-radius: var(--radius-l);
  background: linear-gradient(135deg, var(--cream-2), #DCCFB4);
  min-height: 180px;
  /* Pojistka: u širokoúhlých rámů (např. 21:9 s min-height 240px) by si
     aspect-ratio dopočítalo šířku přes celý displej a fotka by na mobilu
     vyjela z obrazovky. Šířku vždy drží rodič. */
  max-width: 100%;
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--noise); opacity: .5; mix-blend-mode: multiply;
  pointer-events: none;
}
/* Popisky slotů (》04 — FOTO — …《) se návštěvníkovi neukazují — na ostrém
   webu by přes fotky svítilo interní zadání. Atribut data-label ale
   v HTML ZŮSTÁVÁ, aby šlo snímky adresovat číslem („vyměň foto 26“).
   Zobrazit zpátky: smazat tenhle blok display:none. */
.ph::after { display: none; }

/* Výjimka: interní přehled designu je katalog slotů — tam popisky dávají
   smysl a některé rámečky ani skutečnou fotku nemají. */
body[data-page="design"] .ph::after { display: block; }

.ph::after {
  content: attr(data-label);
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  max-width: calc(100% - 28px);
  background: rgba(23,23,20,.78); color: var(--cream);
  font: 700 .7rem/1.35 var(--font-sans); letter-spacing: .06em;
  padding: 7px 12px; border-radius: var(--radius-pill);
  backdrop-filter: blur(3px);
}
/* Skutečná fotografie uvnitř rámu. */
.ph > img {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* zdroje jsou focené na výšku — u širokých rámů řídíme ořez ručně */
.ph > img[data-pos="top"] { object-position: center 22%; }
.ph > img[data-pos="upper"] { object-position: center 35%; }
.ph > img[data-pos="lower"] { object-position: center 65%; }
.ph:has(img)::before { display: none; }
.ph:has(img) .ph__mark { display: none; }

.ph__mark {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: rgba(23,23,20,.22);
}
.ph--dark { background: linear-gradient(150deg, #2A2A25, #171714); }
.ph--dark .ph__mark { color: rgba(243,235,221,.2); }
.ph--red { background: linear-gradient(150deg, #C9342F, #8E211D); }
.ph--red .ph__mark { color: rgba(243,235,221,.3); }
.ph--green { background: linear-gradient(150deg, #46604A, #2C3B2D); }
.ph--green .ph__mark { color: rgba(243,235,221,.28); }
.ph--teal { background: linear-gradient(150deg, #2F9290, #1D5F5E); }
.ph--teal .ph__mark { color: rgba(255,255,255,.32); }

.ph--43 { aspect-ratio: 4 / 3; }
.ph--34 { aspect-ratio: 3 / 4; }
.ph--11 { aspect-ratio: 1 / 1; }
.ph--169 { aspect-ratio: 16 / 9; }
/* Mírnější poměr pro fotky, kde širší ořez bere lidem hlavy — drží skoro
   celý zdrojový snímek, ořízne jen okraje. */
.ph--85 { aspect-ratio: 8 / 5; }
.ph--215 { aspect-ratio: 21 / 9; min-height: 240px; }

/* ---------- 17 MENU ---------- */
/* Navigace kategorií — na desktopu zalamování, na mobilu jedna posuvná řada.
   Výšku měří JS do --menu-nav-h (scroll-margin nadpisů). */
.menu-nav {
  position: sticky; top: var(--header-h); z-index: 50;
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 0; margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--cream);
  box-shadow: 0 10px 12px -10px rgba(23, 23, 20, .18);
}
.menu-nav a {
  flex: 0 0 auto;
  padding: 9px 16px; border-radius: var(--radius-pill);
  border: 2px solid var(--ink-15); background: var(--cream-3);
  font-size: var(--fs-small); font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.menu-nav a:hover { border-color: var(--ink); }
.menu-nav a.is-current { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* Mobil / užší tablet: jedna řada, vodorovný swipe místo mnoha řádků.
   Scroll je uvnitř lišty — stránka nikdy nepřeteče do strany. */
@media (max-width: 900px) {
  .menu-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    scrollbar-width: none;                 /* Firefox */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .menu-nav::-webkit-scrollbar { display: none; }   /* WebKit */
  .menu-nav a { scroll-snap-align: start; }
}

.menu-cat {
  margin-bottom: clamp(2.5rem, 4vw, 4.5rem);
  /* header + sticky menu-nav + malá rezerva, ať nadpis kategorie není schovaný */
  scroll-margin-top: calc(var(--header-h) + var(--menu-nav-h, 120px) + 12px);
}
.menu-cat__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 3px solid var(--ink); padding-bottom: 12px; margin-bottom: 8px;
}
.menu-cat__head h3 { margin: 0; }
.menu-cat__head .count { font-weight: 800; color: var(--ink-40); font-size: var(--fs-small); }

.menu-item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 4px 24px; align-items: baseline;
  padding: 18px 10px;
  border-bottom: 2px dashed var(--ink-15);
  border-radius: var(--radius-s);
  transition: background-color .15s ease;
}
.menu-item:hover { background: rgba(255,255,255,.5); }
.menu-item__name {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sub);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.menu-item__price {
  font-weight: 800; font-size: var(--fs-sub); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.menu-item__desc { grid-column: 1; color: var(--ink-60); font-size: var(--fs-small); margin: 0; }
.menu-item__meta { grid-column: 1; display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }

.menu-pick { border: 0; background: transparent; padding: 0; text-align: left; }

/* Výběr na homepage */
.picks-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.75rem);
}
.pick-card {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center;
  background: var(--cream-3); border: 2px solid var(--ink-08);
  border-radius: var(--radius-l); padding: 16px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); border-color: var(--ink-15); }
.pick-card .ph { border-radius: 50%; aspect-ratio: 1; min-height: 0; }
.pick-card .ph::after { display: none; }
.pick-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; margin: 0 0 2px; }
.pick-card .desc { font-size: var(--fs-small); color: var(--ink-60); margin: 0 0 6px; }
.pick-card .price { font-weight: 800; font-size: 1.15rem; white-space: nowrap; align-self: start; padding-top: 6px; }
@media (max-width: 900px) { .picks-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
  .pick-card { grid-template-columns: 72px 1fr auto; gap: 12px; }
}

/* ---------- 18 REZERVACE ---------- */
.rez-shell { max-width: 720px; margin-inline: auto; }

.rez-intro {
  text-align: center;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.rez-intro__lead {
  margin: .65rem auto 0;
  max-width: 28em;
  color: var(--ink-60);
  font-size: var(--fs-lead);
}

/* Průběh kroků */
.rez-progress {
  display: flex; align-items: center; gap: 0;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.rez-progress__step {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
}
.rez-progress__dot {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 2px solid var(--ink-40); color: var(--ink-60);
  font-weight: 800; font-size: var(--fs-small);
  background: transparent;
  transition: all .25s ease;
}
.rez-progress__label { font-size: var(--fs-caption); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); }
.rez-progress__line { flex: 1 1 auto; height: 2px; background: var(--ink-15); margin: 0 12px; min-width: 16px; }
.rez-progress__step.is-current .rez-progress__dot { background: var(--red); border-color: var(--red); color: var(--cream); }
.rez-progress__step.is-current .rez-progress__label { color: var(--ink); }
.rez-progress__step.is-done .rez-progress__dot { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.rez-progress__step.is-done + .rez-progress__line,
.rez-progress__step.is-done .rez-progress__line { background: var(--ink); }
@media (max-width: 640px) {
  .rez-progress__label { display: none; }
  .rez-progress__step.is-current .rez-progress__label { display: block; }
  /* Popisek aktivního kroku se musí umět zkrátit, jinak ukazatel
     na úzkém displeji (320 px) vytlačí stránku do šířky. */
  .rez-progress__step { min-width: 0; }
  .rez-progress__step.is-current .rez-progress__label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  }
}
@media (max-width: 380px) {
  .rez-progress__dot { width: 32px; height: 32px; }
  .rez-progress__line { margin: 0 6px; min-width: 8px; }
}

/* Panel kroku */
.rez-panel {
  background: var(--cream-3);
  border: 2px solid var(--ink-08);
  border-radius: var(--radius-l);
  padding: clamp(1.25rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-soft);
}
.rez-panel h2 { font-size: var(--fs-title); }
.rez-group { margin-bottom: var(--space-6); }
.rez-group__label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: var(--fs-caption); font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-60);
  margin-bottom: 12px;
}
/* Rozbalovací měsíční kalendář (vzdálenější termín) */
.rez-cal-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px; padding: 8px 2px;
  background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-small); font-weight: 800;
  color: var(--red);
}
.rez-cal-toggle svg { width: 17px; height: 17px; flex: 0 0 auto; }
.rez-cal-toggle span { text-decoration: underline; text-underline-offset: 3px; }
.rez-cal-toggle:hover { color: var(--red-deep); }
.rez-cal-toggle:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }

.cal {
  margin-top: 14px; padding: 14px;
  background: var(--white); border: 2px solid var(--ink-08);
  border-radius: var(--radius-m);
}
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.cal__title { font-size: var(--fs-body); font-weight: 800; text-transform: capitalize; }
.cal__nav {
  width: 40px; height: 40px; flex: 0 0 auto;
  border: 2px solid var(--ink-15); border-radius: 12px;
  background: var(--cream-3); cursor: pointer;
  font-size: 1.25rem; font-weight: 800; line-height: 1; color: var(--ink);
}
.cal__nav:hover:not([disabled]) { border-color: var(--ink); }
.cal__nav[disabled] { opacity: .3; cursor: not-allowed; }
.cal__weekdays, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__weekdays {
  margin-bottom: 6px;
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .06em;
  color: var(--ink-40); text-align: center;
}
.cal__cell {
  min-height: 42px; display: grid; place-items: center;
  border: 2px solid transparent; border-radius: 10px;
  background: var(--cream-3); color: var(--ink);
  font: inherit; font-size: var(--fs-small); font-weight: 700; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.cal__cell.is-empty { background: none; }
.cal__cell:hover:not([disabled]) { border-color: var(--ink); }
.cal__cell[disabled] { background: none; color: var(--ink-40); cursor: not-allowed; text-decoration: line-through; }
.cal__cell[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.cal__cell:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }
.cal__note { margin: 12px 0 0; font-size: var(--fs-caption); color: var(--ink-60); }
/* Datum vybrané z kalendáře zůstane v pásu dnů vidět jako první. */
.chip.is-far { order: -1; border-style: solid; }

.rez-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-top: var(--space-6); }
.rez-actions .btn--back { order: -1; }
@media (max-width: 560px) {
  .rez-actions { flex-direction: column-reverse; align-items: stretch; }
  .rez-actions .btn { width: 100%; }
}

/* Časové skupiny */
.slot-group { margin-bottom: var(--space-5); }
.slot-group__title {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: var(--fs-small); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-60); margin-bottom: 12px;
}
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 10px; }
.slot-grid .chip { width: 100%; min-height: 54px; font-size: 1.05rem; }

/* ---------- Rezervace na mobilu: větší písmo a cíle prstu ----------
   Formulář se vyplňuje ve stoje, často v šeru — drobné popisky
   a těsné chipy se na displeji telefonu čtou špatně. */
@media (max-width: 560px) {
  .rez-panel { padding: 18px 16px; }
  .rez-panel h2 { font-size: 1.6rem; }
  .rez-group { margin-bottom: 1.75rem; }
  .rez-group__label {
    font-size: 13px; letter-spacing: .1em; color: var(--ink-60);
    gap: 10px; flex-wrap: wrap;
  }
  /* jen doprovodný údaj vpravo (vybrané datum), ne samotný nadpis skupiny */
  .rez-group__label span + span { letter-spacing: .02em; text-transform: none; }
  .chip { min-height: 58px; font-size: 1.05rem; padding: 8px 18px; }
  .chip__sub { font-size: 13px; opacity: .8; }
  .slot-group__title { font-size: 13px; }
  .slot-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
  .slot-grid .chip { min-height: 60px; font-size: 1.15rem; }
  .field__label { font-size: 13px; letter-spacing: .08em; }
  .field input[type="text"], .field input[type="tel"],
  .field input[type="email"], .field input[type="number"],
  .field textarea, .field select { font-size: 1.05rem; padding: 14px 16px; }
  .rez-summary dt, .rez-summary dd { font-size: 1rem; }
}

/* Skeleton načítání */
.skeleton {
  border-radius: var(--radius-m);
  background: linear-gradient(100deg, var(--ink-08) 30%, rgba(23,23,20,.03) 50%, var(--ink-08) 70%);
  background-size: 220% 100%;
  animation: plp-shimmer 1.3s ease infinite;
  min-height: 54px;
}
@keyframes plp-shimmer { to { background-position: -120% 0; } }

/* Souhrn (krok 4 + potvrzení) */
.rez-summary { display: grid; gap: 0; margin-bottom: var(--space-5); }
.rez-summary__row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 13px 2px; border-bottom: 2px dashed var(--ink-15);
}
.rez-summary__key { font-size: var(--fs-caption); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); }
.rez-summary__val { font-weight: 700; text-align: right; }
.rez-summary__row .edit-link {
  font-size: var(--fs-caption); font-weight: 800; color: var(--teal);
  background: none; border: 0; cursor: pointer; padding: 4px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px;
}

/* Výsledkové obrazovky */
.rez-result { text-align: center; padding-block: var(--space-5); }
.rez-result__icon { width: 92px; height: 92px; margin: 0 auto var(--space-5); }
.rez-result h2 { font-size: var(--fs-display); }
.rez-result .lead { margin-inline: auto; }
.rez-result .rez-summary { max-width: 420px; margin: var(--space-6) auto; text-align: left; }
.rez-result__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Upozornění na rušení za deště + jak dlouho stůl držíme.
   Musí být vidět, ale nesmí překřičet samotné potvrzení. */
.rez-weather-note,
.rez-hold-note {
  max-width: 460px; margin: var(--space-5) auto; padding: 14px 16px;
  border-radius: 14px; text-align: left;
  font-size: .95rem; line-height: 1.55;
}
.rez-weather-note {
  background: rgba(201, 52, 47, .07);
  border: 1px solid rgba(201, 52, 47, .22);
}
.rez-hold-note {
  background: rgba(20, 20, 20, .04);
  border: 1px solid rgba(20, 20, 20, .12);
}
.rez-weather-note strong { color: var(--red); }

/* Zrušení rezervace hostem — záměrně nenápadné, aby se netrefilo omylem. */
.rez-cancel { margin-top: var(--space-6); text-align: center; }
.rez-cancel__ask { margin: 0 0 12px; font-size: .95rem; }
.rez-cancel__row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.rez-cancel__msg { display: block; margin-top: 10px; font-size: .9rem; color: var(--red); }
.btn--danger { background: var(--red); color: #fff; border-color: var(--red); }
.btn--danger:hover { filter: brightness(.92); }
.btn--ghost.btn--danger { background: transparent; color: var(--red); }

/* Mini widget rezervace na homepage */
.rez-teaser {
  background: var(--ink); color: var(--cream);
  border-radius: clamp(20px, 3vw, 40px);
  padding: clamp(1.5rem, 4vw, 4rem);
  position: relative; overflow: clip;
}
.rez-teaser::before {
  content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .35; pointer-events: none;
}
.rez-teaser .rez-group__label { color: rgba(243,235,221,.55); }
.rez-teaser .chip {
  background: rgba(243,235,221,.06); border-color: rgba(243,235,221,.25); color: var(--cream);
}
.rez-teaser .chip:hover { border-color: var(--cream); }
.rez-teaser .chip[aria-pressed="true"] { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.rez-teaser__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; position: relative; }
/* Bez min-width:0 roztáhne vodorovný pás dnů (chip-scroll) celý grid track
   nad šířku displeje — widget pak na mobilu přetéká a nejde ovládat. */
.rez-teaser__grid > * { min-width: 0; }
@media (max-width: 900px) { .rez-teaser__grid { grid-template-columns: 1fr; } }
.rez-teaser__widget { position: relative; min-width: 0; }
/* Pás dnů si musí scrollovat sám, ne tlačit rodiče do šířky. */
.rez-teaser__widget .chip-scroll { max-width: 100%; }
.rez-teaser__phone-note { font-size: var(--fs-small); color: rgba(243,235,221,.55); margin-top: 14px; }
.rez-teaser__phone-note a { color: var(--cream); font-weight: 700; }

/* Demo přepínač stavů (prezentace) */
.demo-panel {
  position: fixed; right: 14px; bottom: calc(var(--bottombar-h) + 20px); z-index: 250;
  background: var(--white); border: 2px solid var(--ink); border-radius: var(--radius-m);
  box-shadow: var(--shadow-lift);
  padding: 12px 14px; width: 250px; font-size: var(--fs-caption);
}
@media (min-width: 981px) { .demo-panel { bottom: 20px; } }
.demo-panel h5 { margin: 0 0 8px; font-size: var(--fs-caption); letter-spacing: .1em; text-transform: uppercase; }
.demo-panel label { display: flex; gap: 8px; align-items: center; padding: 3px 0; cursor: pointer; font-weight: 600; }

/* ---------- 19 GALERIE ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(.75rem, 1.6vw, 1.5rem);
}
/* Šířku dlaždice určuje sloupec mřížky, ne poměr stran. Bez width:100%
   dopočítá aspect-ratio šířku z min-height (180 × 4/3 = 240 px) a dlaždice
   přeteče na úzkém displeji ven z obrazovky. */
.gallery .g-item { border-radius: var(--radius-l); min-width: 0; width: 100%; }
.g-span-7 { grid-column: span 7; }
.g-span-6 { grid-column: span 6; }
.g-span-5 { grid-column: span 5; }
.g-span-4 { grid-column: span 4; }
.g-span-8 { grid-column: span 8; }
.g-span-3 { grid-column: span 3; }
/* Posuny rozbíjejí pravidelnost mřížky. Všechny jsou KLADNÉ (dolů) —
   záporný posun vytahoval fotku nahoru přes tu v řádku nad ní a snímky
   se překrývaly. Rozházenost dělá střídání dvou velikostí. */
.g-offset { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.g-offset-sm { margin-top: clamp(.5rem, 1.6vw, 1.5rem); }
/* Ponecháno kvůli starším stránkám; nově nepoužívat — způsobuje překryv. */
.g-offset-neg { margin-top: 0; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: repeat(6, 1fr); }
  .g-span-7, .g-span-8, .g-span-6, .g-span-5 { grid-column: span 6; }
  .g-span-4, .g-span-3 { grid-column: span 3; }
  /* Na mobilu jsou fotky pod sebou, posuny by dělaly jen nerovné mezery. */
  .g-offset, .g-offset-sm, .g-offset-neg { margin-top: 0; }
}

/* ---------- 20 MAPA (consent) ---------- */
.map-card {
  position: relative; border-radius: var(--radius-l); overflow: clip;
  background: var(--green); color: var(--cream);
  min-height: 340px; display: grid; place-items: center; text-align: center;
  padding: var(--space-6);
}
.map-card::before {
  content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .4; pointer-events: none;
}
.map-card__content { position: relative; display: grid; gap: 14px; justify-items: center; max-width: 380px; }
.map-card__content svg { width: 44px; height: 44px; }
.map-card__note { font-size: var(--fs-caption); color: rgba(243,235,221,.65); }
.map-card iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Kontaktní řádky */
.contact-list { display: grid; gap: 4px; }
.contact-list__row {
  display: flex; gap: 14px; align-items: baseline;
  padding: 14px 2px; border-bottom: 2px dashed var(--ink-15);
}
.contact-list__key {
  flex: 0 0 118px; font-size: var(--fs-caption); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40);
}
.contact-list__val { font-weight: 700; }
.contact-list__val a { text-decoration-color: var(--red); text-underline-offset: 3px; }

.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: 10px 2px; border-bottom: 2px dashed var(--ink-15); font-weight: 600; }
.hours-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 800; }
.hours-table tr.is-today td { color: var(--red); font-weight: 800; }
.hours-table tr.is-closed td:last-child { color: var(--ink-40); font-weight: 600; }

/* ---------- 20b FAQ ---------- */
.faq { display: grid; gap: 0; }
.faq__item { border-bottom: 2px dashed var(--ink-15); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 2px; cursor: pointer; list-style: none;
  font-weight: 800; font-size: var(--fs-sub); line-height: 1.3;
  transition: color .15s ease;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; flex: 0 0 auto;
  width: 14px; height: 14px; margin-right: 4px;
  border-right: 2.5px solid var(--red); border-bottom: 2.5px solid var(--red);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .22s ease;
}
.faq__item[open] summary::after { transform: rotate(-135deg) translate(-4px, -4px); }
.faq__item summary:hover { color: var(--red); }
.faq__item summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
.faq__item p {
  margin: 0 0 20px; padding-right: 34px;
  color: var(--ink-60); font-size: var(--fs-small); line-height: 1.6;
}
.faq__item p a { color: var(--ink); font-weight: 700; }

/* ---------- 21 FOOTER ---------- */
.site-footer {
  background: var(--ink); color: var(--cream);
  padding: clamp(3rem, 5vw, 5rem) 0 calc(2rem + env(safe-area-inset-bottom, 0px));
  position: relative; overflow: clip;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0; background-image: var(--noise); opacity: .3; pointer-events: none;
}
.site-footer__grid {
  position: relative;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: var(--space-7);
}
@media (max-width: 900px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .site-footer__grid { grid-template-columns: 1fr; } }
.site-footer h5 {
  margin: 0 0 14px; font-size: var(--fs-caption); font-weight: 800;
  letter-spacing: .18em; text-transform: uppercase; color: rgba(243,235,221,.5);
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--cream); text-decoration: none; font-weight: 600; font-size: var(--fs-small); }
.site-footer a:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.site-footer li { font-size: var(--fs-small); color: rgba(243,235,221,.75); }
.site-footer .brand { color: var(--cream); margin-bottom: 10px; display: inline-flex; }
.site-footer .brand svg { height: 28px; }
.site-footer__tag { color: rgba(243,235,221,.55); font-size: var(--fs-small); max-width: 24em; }
.site-footer__bottom {
  position: relative;
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(243,235,221,.15); padding-top: var(--space-5);
  font-size: var(--fs-caption); color: rgba(243,235,221,.45);
}
.site-footer__bottom a { font-size: var(--fs-caption); color: rgba(243,235,221,.65); }
.footer-stamp { width: 84px; opacity: .9; }

/* ---------- 22 DESIGN SYSTEM PAGE ---------- */
.ds-section { padding-block: var(--space-7); border-bottom: 2px dashed var(--ink-15); }
.ds-swatches { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.ds-swatch { border-radius: var(--radius-m); overflow: clip; border: 2px solid var(--ink-08); background: var(--cream-3); }
.ds-swatch__color { height: 110px; }
.ds-swatch__meta { padding: 12px 14px; display: grid; gap: 2px; }
.ds-swatch__meta strong { font-size: var(--fs-small); }
.ds-swatch__meta code { font-size: var(--fs-caption); color: var(--ink-60); }
.ds-swatch__meta span { font-size: var(--fs-caption); color: var(--ink-60); }

.ds-type-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 20px; align-items: baseline;
  padding: 18px 0; border-bottom: 2px dashed var(--ink-15);
}
.ds-type-row code { font-size: var(--fs-caption); color: var(--ink-60); }
@media (max-width: 700px) { .ds-type-row { grid-template-columns: 1fr; gap: 4px; } }

.ds-states { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; padding: 10px 0 22px; }
.ds-label { font-size: var(--fs-caption); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); margin: 18px 0 6px; }
.ds-dark-strip { background: var(--ink); border-radius: var(--radius-m); padding: 20px; display: flex; gap: 14px; flex-wrap: wrap; }

/* simulace focus stavu pro ukázku */
.demo-focus { outline: 3px solid var(--teal) !important; outline-offset: 3px; border-radius: var(--radius-pill); }
.chip.demo-focus { border-radius: var(--radius-m); }

/* ---------- 22b ADMIN ---------- */
.admin-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink); color: var(--cream);
  padding: 14px 0;
}
.admin-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-header .brand { color: var(--cream); font-size: 1.3rem; }
.admin-header__meta { display: flex; align-items: center; gap: 14px; font-size: var(--fs-small); }
.admin-header__meta a { color: var(--cream); font-weight: 700; }
.admin-badge {
  background: var(--teal); color: var(--white);
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 12px; border-radius: var(--radius-pill);
}

.admin-card {
  background: var(--cream-3); border: 2px solid var(--ink-08);
  border-radius: var(--radius-l);
  padding: clamp(1.25rem, 3vw, 2rem);
  margin-bottom: 1.5rem;
}
.admin-card > h2 { font-size: var(--fs-title); margin-bottom: .5rem; }
.admin-card__hint { font-size: var(--fs-small); color: var(--ink-60); margin-bottom: 1.25rem; }
.admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 760px) { .admin-cols { grid-template-columns: 1fr; } }

.admin-item {
  border: 2px dashed var(--ink-15); border-radius: var(--radius-m);
  background: rgba(255, 255, 255, .55);
  padding: 14px; margin-bottom: 12px;
}
.admin-item__row { display: grid; grid-template-columns: 1fr 130px auto; gap: 10px; align-items: start; }
@media (max-width: 640px) { .admin-item__row { grid-template-columns: 1fr; } }
.admin-item .field { margin-bottom: 10px; }
.admin-item input, .admin-item textarea { min-height: 44px; padding: 9px 12px; }
.admin-item textarea { min-height: 44px; }
.admin-flags { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.admin-flags .check { font-size: var(--fs-caption); align-items: center; }
.admin-flags .check input { width: 22px; height: 22px; }
.admin-photo-library {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border: 2px solid var(--ink-08);
  border-radius: var(--radius-m);
  background: var(--cream);
}
.admin-photo-library__row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
}
.admin-photo-row {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-top: .85rem;
}
.admin-photo-thumb {
  width: 56px; height: 56px; object-fit: cover; border-radius: 50%;
  border: 2px solid var(--ink-08); background: var(--cream-2); flex: 0 0 auto;
}
.admin-photo-thumb--empty { display: inline-block; }
.admin-photo-upload { min-height: 44px; cursor: pointer; margin: 0; }
.admin-photo-upload input { display: none; }

.icon-btn {
  width: 38px; height: 38px; border: 2px solid var(--ink-15); border-radius: 10px;
  background: var(--cream-3); cursor: pointer; font-weight: 800; font-size: .95rem;
  display: inline-grid; place-items: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.icon-btn:hover { border-color: var(--ink); }
.icon-btn--danger:hover { border-color: var(--red); color: var(--red); }
.icon-row { display: inline-flex; gap: 6px; }

.hours-row {
  display: grid; grid-template-columns: 110px auto 1fr; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 2px dashed var(--ink-15);
}
.hours-row__times { display: flex; gap: 8px; align-items: center; }
.hours-row select {
  border: 2px solid var(--ink-15); border-radius: 10px; background: var(--cream-3);
  padding: 8px 10px; font: 600 1rem var(--font-sans); min-height: 44px;
}
.hours-row.is-closed .hours-row__times { opacity: .35; pointer-events: none; }

.admin-savebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--ink); color: var(--cream);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(23, 23, 20, .25);
}
.admin-savebar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.admin-savebar__status { font-size: var(--fs-small); color: rgba(243, 235, 221, .6); }
.admin-savebar__status.is-ok { color: #7fbf6a; font-weight: 700; }
.admin-savebar__status.is-err { color: #ff8f8a; font-weight: 700; }
body.has-savebar { padding-bottom: 96px; }

/* ---------- Přepínač režimu (stoly vs. jen kapacita) ---------- */
.mode-switch {
  display: grid; gap: 10px;
  margin-bottom: 1.5rem; padding: 16px;
  background: var(--cream-2); border-radius: var(--radius-m);
}
.mode-switch__title {
  font-size: var(--fs-caption); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60);
}
.mode-switch__opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; cursor: pointer;
  background: var(--cream-3); border: 2px solid var(--ink-08); border-radius: var(--radius-m);
  font-size: var(--fs-small); line-height: 1.45;
}
.mode-switch__opt:hover { border-color: var(--ink-15); }
.mode-switch__opt input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--red); }
.mode-switch__opt:has(input:checked) { border-color: var(--red); background: var(--white); }
.mode-switch__opt .muted { font-weight: 400; }

/* ---------- Uzavírky a dovolené ---------- */
.closure-form { padding-bottom: 4px; }
.closure-title {
  margin: 1.75rem 0 .75rem; font-family: var(--font-sans);
  font-size: var(--fs-caption); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-60);
}
.closure-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.closure-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--cream-2); border-radius: var(--radius-m);
  border-left: 5px solid var(--red);
}
.closure-row__span { flex: 1 1 14rem; font-weight: 700; }
.closure-row__reason {
  display: inline-block; margin-left: 6px;
  font-weight: 600; font-size: var(--fs-small); color: var(--ink-60);
}
.closure-row__del { flex: 0 0 auto; color: var(--red); }
.closure-empty {
  padding: 14px; border: 2px dashed var(--ink-15); border-radius: var(--radius-m);
  color: var(--ink-60); font-size: var(--fs-small);
}

/* ---------- Stoly a kategorie posezení ---------- */
.tbl-summary {
  background: var(--cream-2); border-radius: var(--radius-m);
  padding: 12px 16px; margin-bottom: 1.25rem;
  font-size: var(--fs-small);
}
.tbl-zone {
  border: 2px dashed var(--ink-15); border-radius: var(--radius-m);
  padding: 14px; margin-bottom: 12px;
}
.tbl-zone__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tbl-zone__name {
  flex: 1 1 12rem; min-width: 0;
  border: 2px solid transparent; border-radius: 10px; background: transparent;
  padding: 6px 10px; font: 800 1.05rem var(--font-sans); color: var(--ink);
}
.tbl-zone__name:hover { border-color: var(--ink-15); }
.tbl-zone__name:focus { outline: none; border-color: var(--ink); background: var(--cream-3); }
.tbl-zone__count { font-size: var(--fs-caption); font-weight: 700; color: var(--ink-60); white-space: nowrap; }
/* přenosná kategorie — stoly jde přisunout k jiné (dvojky O, party čtyřky) */
.tbl-zone__movable {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink-60); cursor: pointer;
}
.tbl-zone__movable input { width: 15px; height: 15px; accent-color: var(--teal); margin: 0; }
.tbl-zone__movable:has(input:checked) { color: var(--teal); }

.tbl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 8px; }
.tbl-item {
  background: var(--cream-3); border: 2px solid var(--ink-08);
  border-radius: 10px; padding: 6px 8px;
}
.tbl-item__row { display: flex; align-items: center; gap: 6px; }

/* přístupnost + okno přímého slunce */
.tbl-item__flags {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--ink-15);
}
.tbl-item__flags label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink-60);
  cursor: pointer; white-space: nowrap;
}
.tbl-item__flags input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--teal); margin: 0; }
.tbl-item__flags label:has(input:checked) { color: var(--ink); }
.tbl-item__sun { display: inline-flex; align-items: center; gap: 3px; }
.tbl-item__sunlabel {
  font-size: var(--fs-caption); font-weight: 700; color: var(--ink-40);
  text-transform: uppercase; letter-spacing: .04em;
}
.tbl-item__flags select {
  flex: 0 0 auto;
  border: 2px solid var(--ink-15); border-radius: 7px; background: var(--white);
  padding: 2px 3px; font: 700 var(--fs-caption) var(--font-sans); color: var(--ink);
}

/* hromadné nastavení slunce pro celou kategorii */
.tbl-zonebulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ink-15);
}
.tbl-zonebulk select {
  border: 2px solid var(--ink-15); border-radius: 8px; background: var(--cream-3);
  padding: 6px 8px; font: 700 var(--fs-small) var(--font-sans); min-height: 36px;
  color: var(--ink);
}
.tbl-zonebulk .btn { min-height: 36px; padding: .3em .9em; font-size: var(--fs-caption); }
.tbl-item__row input[type="text"] {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; padding: 4px 6px;
  font: 700 var(--fs-small) var(--font-sans); color: var(--ink);
}
.tbl-item input[type="number"] {
  width: 3.4rem; flex: 0 0 auto; text-align: center;
  border: 2px solid var(--ink-15); border-radius: 8px; background: var(--white);
  padding: 4px; font: 800 var(--fs-small) var(--font-sans);
}
.tbl-item input:focus { outline: 2px solid var(--teal); outline-offset: 1px; }
.tbl-item__unit { font-size: var(--fs-caption); color: var(--ink-40); }
.tbl-item .icon-btn { width: 30px; height: 30px; border-radius: 8px; }

.tbl-add {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 12px; padding-top: 12px; border-top: 2px dashed var(--ink-15);
}
.tbl-add input[type="number"] { width: 4rem; }
.tbl-add input {
  border: 2px solid var(--ink-15); border-radius: 10px; background: var(--cream-3);
  padding: 8px 10px; font: 700 var(--fs-small) var(--font-sans); min-height: 40px;
}
.tbl-add .btn { min-height: 40px; padding: .4em 1.1em; }

/* ---------- nástěnka administrace ---------- */
.dash-head { margin-bottom: 1.5rem; }
.dash-head h1 { font-size: var(--fs-title); margin: .2rem 0 .4rem; }

.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 1.25rem; }
.dash-stat {
  background: var(--cream-3); border: 2px solid var(--ink-08); border-radius: var(--radius-m);
  padding: 12px 16px; display: flex; flex-direction: column; gap: 2px;
}
.dash-stat b { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1; }
.dash-stat small { font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-60); font-weight: 700; }

.dash-alerts { display: grid; gap: 8px; margin-bottom: 1.25rem; }
.dash-alert {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius-m); border: 2px solid;
  text-decoration: none; color: var(--ink); font-size: var(--fs-small);
}
.dash-alert b { white-space: nowrap; font-weight: 800; }
.dash-alert--warn { background: #fdf6e3; border-color: #efdca8; }
.dash-alert--info { background: var(--teal-soft); border-color: rgba(47,146,144,.35); }
.dash-alert--danger { background: rgba(201,52,47,.08); border-color: rgba(201,52,47,.4); }
.dash-alert:hover { filter: brightness(.97); }
.dash-ok {
  background: rgba(56,75,57,.08); border: 2px solid rgba(56,75,57,.25);
  border-radius: var(--radius-m); padding: 12px 16px; margin-bottom: 1.25rem;
  font-size: var(--fs-small); font-weight: 700; color: var(--green-deep);
}

.dash-occ { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-occ__slot {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--cream-3); border: 1px solid var(--ink-15); border-radius: var(--radius-s);
  padding: 4px 9px; font-size: var(--fs-caption); font-variant-numeric: tabular-nums;
}
.dash-occ__slot i { width: 9px; height: 9px; border-radius: 2px; }
.dash-occ__slot b { font-weight: 800; }
.dash-occ__slot.free i { background: var(--ink-15); }
.dash-occ__slot.free b { color: var(--ink-40); }
.dash-occ__slot.ok i { background: var(--green); }
.dash-occ__slot.mid i { background: #C98A2F; }
.dash-occ__slot.full i { background: var(--red); }
.dash-occ__slot.full { border-color: var(--red); background: rgba(201,52,47,.08); }

.dash-next { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dash-next li {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; background: var(--cream-3); border-radius: var(--radius-s);
  font-size: var(--fs-small);
}
.dash-next__time { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 3.5rem; }
.dash-next__name { font-weight: 700; flex: 1 1 auto; }
.dash-next__meta { color: var(--ink-60); }
.dash-next__new {
  background: #fdf6e3; border: 1px solid #efdca8; border-radius: var(--radius-pill);
  padding: 1px 8px; font-size: var(--fs-caption); font-weight: 800;
}

.dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.dash-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 16px; border-radius: var(--radius-m);
  background: var(--cream-3); border: 2px solid var(--ink-08);
  text-decoration: none; color: var(--ink);
  transition: border-color .18s ease, transform .18s ease;
}
.dash-tile:hover { border-color: var(--red); transform: translateY(-2px); }
.dash-tile b { font-size: 1.05rem; font-weight: 800; }
.dash-tile small { font-size: var(--fs-caption); color: var(--ink-60); line-height: 1.35; }

/* ---------- jednotné přihlášení administrace ----------
   Stejné okno na Nástěnce, Obsahu webu, Menu, Knize i Nastavení —
   dřív si každá stránka kreslila vlastní variantu. */
.admin-login { max-width: 26rem; margin: 8vh auto 3rem; text-align: center; padding: 0 1rem; }
.admin-login h1 { font-size: var(--fs-display); margin: 0 0 .35rem; }
.admin-login__lead { color: var(--ink-60); margin: 0 0 1.5rem; font-size: var(--fs-small); }
.admin-login__card {
  text-align: left;
  background: var(--cream-3);
  border: 2px solid var(--ink-08);
  border-radius: var(--radius-l);
  padding: 1.5rem;
  box-shadow: var(--shadow-soft);
}
.admin-login__label {
  display: block; margin-bottom: .4rem;
  font-size: var(--fs-caption); font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-60);
}
.admin-login__input {
  width: 100%; box-sizing: border-box; margin-bottom: 1rem;
  border: 2px solid var(--ink-15); border-radius: var(--radius-m);
  background: var(--white); padding: 12px 14px; min-height: 48px;
  font: 700 1.05rem var(--font-sans); color: var(--ink);
}
.admin-login__input:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }
.admin-login__msg {
  background: #fdf6e3; border: 1px solid #efdca8;
  border-radius: var(--radius-m); padding: 10px 13px; margin-bottom: 1rem;
  font-size: var(--fs-small); font-weight: 700; color: #8a6d1f;
}
.admin-login__err:empty { display: none; }
.admin-login__err {
  margin: .85rem 0 0; padding: 10px 13px;
  background: rgba(201,52,47,.08); border: 1px solid rgba(201,52,47,.35);
  border-radius: var(--radius-m);
  font-size: var(--fs-small); font-weight: 700; color: var(--red-deep);
}

/* ---------- účty zaměstnanců ---------- */
.acc-list { display: grid; gap: 8px; }
.acc-item {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) 11rem minmax(0, 2fr) auto auto;
  gap: 8px; align-items: center;
  background: var(--cream-3); border: 2px solid var(--ink-08);
  border-radius: 12px; padding: 8px 10px;
}
.acc-item.is-off { opacity: .55; }
.acc-item input[type="text"], .acc-item select {
  min-width: 0; border: 2px solid var(--ink-15); border-radius: 8px; background: var(--white);
  padding: 7px 9px; font: 700 var(--fs-small) var(--font-sans); color: var(--ink);
}
.acc-item__hint { font-size: var(--fs-caption); color: var(--ink-60); line-height: 1.3; }
.acc-item .btn--sm { min-height: 34px; padding: .25em .8em; font-size: var(--fs-caption); }
.acc-item .icon-btn { width: 34px; height: 34px; border-radius: 8px; }

.acc-off { margin-top: 12px; }
.acc-off summary { cursor: pointer; font-size: var(--fs-small); font-weight: 700; color: var(--ink-60); margin-bottom: 8px; }

.acc-new {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 14px; padding-top: 14px; border-top: 2px dashed var(--ink-15);
}
.acc-new input, .acc-new select {
  border: 2px solid var(--ink-15); border-radius: 10px; background: var(--cream-3);
  padding: 9px 11px; font: 700 var(--fs-small) var(--font-sans); min-height: 42px; color: var(--ink);
}
.acc-new #accName { flex: 1 1 12rem; min-width: 0; }
.acc-new #accPin { width: 10rem; }
@media (max-width: 720px) {
  .acc-item { grid-template-columns: 1fr auto; }
  .acc-item__hint { grid-column: 1 / -1; }
  .acc-item select { grid-column: 1 / -1; }
}

.tbl-newzone { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 1rem; }
.tbl-newzone input {
  flex: 1 1 18rem; min-width: 0;
  border: 2px solid var(--ink-15); border-radius: var(--radius-m); background: var(--cream-3);
  padding: 12px 14px; font: 600 1rem var(--font-sans); min-height: 48px;
}
.tbl-newzone input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px var(--teal-soft); }

/* Kniha rezervací (personál) */
.admin-nav { display: inline-flex; gap: 4px; background: rgba(243,235,221,.12); border-radius: var(--radius-pill); padding: 4px; }
.admin-nav a {
  padding: 6px 16px; border-radius: var(--radius-pill); text-decoration: none;
  color: var(--cream); font-size: var(--fs-small); font-weight: 700;
}
.admin-nav a.is-active { background: var(--cream); color: var(--ink); }

/* Telefon: horní lišta administrace na jeden řádek, který se posouvá
   do stran. Zalomená na dva řádky ukrajovala z obrazovky ~45 px, které
   v Knize rezervací chybí na mřížku. */
@media (max-width: 720px) {
  .admin-header { padding: 8px 0; }
  .admin-header__inner { gap: 10px; }
  .admin-header .brand svg { height: 14px; }
  .admin-header__meta { gap: 8px; min-width: 0; }
  .admin-nav {
    flex-wrap: nowrap; overflow-x: auto; max-width: 100%;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav a { padding: 5px 11px; white-space: nowrap; font-size: var(--fs-caption); }
  /* „Zobrazit web" je na Nástěnce jako dlaždice — v liště jen zalamuje. */
  .admin-header__meta > a[target="_blank"] { display: none; }
  .admin-header .brand { display: none; }
  .admin-header__meta .btn { min-height: 32px !important; padding: .2em .7em !important; }
}

/* Spuštěno z plochy (bez adresního řádku) — stavový řádek telefonu
   překrývá obsah, tak si pod něj lišta udělá místo. */
@media (display-mode: standalone) {
  .admin-header { padding-top: calc(8px + env(safe-area-inset-top, 0px)); }
  body.rb { height: 100dvh; }
}

.rbook-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 1.25rem; }
.rbook-toolbar input[type="date"] {
  border: 2px solid var(--ink-15); border-radius: var(--radius-m); background: var(--cream-3);
  padding: 10px 14px; font: 700 1rem var(--font-sans); min-height: 48px;
}
.rbook-summary { font-size: var(--fs-small); color: var(--ink-60); font-weight: 600; margin-left: auto; }

.rbook-row {
  display: grid; grid-template-columns: 76px 1fr auto; gap: 8px 16px; align-items: center;
  background: var(--cream-3); border: 2px solid var(--ink-08);
  border-radius: var(--radius-m); padding: 14px 16px; margin-bottom: 10px;
}
.rbook-row.is-new { border-color: var(--red); box-shadow: 0 0 0 3px rgba(201,52,47,.1); }
.rbook-row.is-muted { opacity: .55; }
.rbook-row__time { font: 800 1.25rem var(--font-sans); font-variant-numeric: tabular-nums; }
.rbook-row__time b { display: block; font: inherit; }
.rbook-row__time small { display: block; font-size: var(--fs-small); font-weight: 600; color: var(--ink-60); }
.rbook-inbox {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 1.5px solid rgba(201, 52, 47, .35);
  border-radius: var(--radius, 12px);
  background: rgba(201, 52, 47, .06);
}
.rbook-inbox__head {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 8px 12px;
  align-items: baseline;
  margin-bottom: 1rem;
}
.rbook-inbox__head h2 { font-size: var(--fs-title); margin: 0; }
.rbook-inbox__head p {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--fs-small);
  color: var(--ink-60);
}
.rbook-inbox__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.75rem; height: 1.75rem; padding: 0 .45rem;
  border-radius: 999px; background: var(--red); color: #fff;
  font: 800 .85rem var(--font-sans);
}
.rbook-inbox .rbook-row { background: var(--paper, #fff); }
.rbook-search {
  margin: 0 0 1.5rem;
  max-width: 420px;
}
.rbook-search .field__label { margin-bottom: .35rem; }
.rbook-search input[type="search"] {
  width: 100%;
  min-height: 48px;
  font: 600 1rem var(--font-sans);
  padding: .65rem 1rem;
  border: 2px solid var(--ink-15);
  border-radius: var(--radius, 10px);
  background: var(--cream-3);
  color: var(--ink);
}
.rbook-search input[type="search"]:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-soft);
}
.rbook-search .small { margin-top: .4rem; }
.rbook-search-results {
  margin-bottom: 1.5rem;
  padding: 1.1rem 1.15rem 1.15rem;
  border: 2px solid var(--ink);
  border-radius: var(--radius, 12px);
  background: var(--cream-3);
}
.rbook-search-results .rbook-row { background: var(--white); }
.rbook-row__who { min-width: 0; }
.rbook-row__who strong { font-size: 1.05rem; }
.rbook-row__meta { font-size: var(--fs-small); color: var(--ink-60); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rbook-row__meta a { color: var(--ink); font-weight: 700; }
.rbook-row__note { font-size: var(--fs-small); color: var(--ink-60); font-style: italic; margin-top: 2px; }
.rbook-row__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.rbook-row__actions .btn { min-height: 40px; padding: .4em 1em; font-size: var(--fs-caption); }
@media (max-width: 720px) {
  .rbook-row { grid-template-columns: 60px 1fr; }
  .rbook-row__actions { grid-column: 1 / -1; justify-content: flex-start; }
}

.status-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption); font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 12px; border-radius: var(--radius-pill);
}
.status-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-chip--new { background: rgba(201,52,47,.12); color: var(--red); }
.status-chip--confirmed { background: rgba(56,75,57,.14); color: var(--green); }
.status-chip--arrived { background: var(--teal-soft); color: #1d5f5e; }
.status-chip--cancelled { background: var(--ink-08); color: var(--ink-40); }
.status-chip--no_show { background: var(--ink-08); color: var(--ink-60); }
.status-chip--bad { background: rgba(201,52,47,.12); color: var(--red); }

/* Dialog: oznámit hostovi po potvrzení / zrušení */
.notify-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(23, 23, 20, .72);
  display: grid; place-items: center;
  padding: 1.25rem; overflow: auto;
}
.notify-dialog {
  width: min(520px, 100%);
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-m, 12px);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: 0 28px 64px rgba(23, 23, 20, .4);
}
.notify-dialog h2 { font-size: var(--fs-title); margin-bottom: .35rem; }
.notify-dialog__msg {
  width: 100%; resize: vertical; min-height: 7rem;
  font: 500 .95rem/1.45 var(--font-sans);
  padding: .75rem 1rem; border-radius: var(--radius, 10px);
  border: 2px solid var(--ink-15); background: var(--cream-3);
  margin-bottom: 1rem;
  color: var(--ink);
}
.notify-dialog__actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.notify-dialog__actions .btn { min-height: 44px; }

/* ---------- 23 POHYB & PŘÍSTUPNOST ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .08s; }
.reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee__track { animation: none; transform: none; }
  .stamp__spin { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .chip, .pick-card { transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .btn.is-loading::after { animation: plp-spin 1.4s linear infinite !important; }
  .skeleton { animation: none; }
}

/* Drobnosti pro tisk / velmi malé displeje */
@media (max-width: 360px) {
  .hero__stamp { width: 96px; }
}