/* landing.css — ported verbatim from design/mockups/preview-321.html <style> block.
   Mobile-only: --base-width:320, --u scales design-px to vw, capped at 480px on desktop.
   --accent fallback (#B1FFAD) is overridden inline by landing.eta per restaurant theme. */
/* Inter — самохостинг (variable woff2, same-origin) → грузится быстро и без
   зависимости от Google Fonts; цифры и весь текст сразу в Inter. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* ═══════════════════════════════════════════════════════════════════════
   Design base = 320px artboard. Все размеры в дизайн-координатах,
   масштабируются через --u (1 design-px). На десктопе закрепляются на 480px.
   ─────────────────────────────────────────────────────────────────────── */
:root{
  --base-width: 320;
  --u: calc(100vw / var(--base-width));  /* 1 design-px → vw */

  --bg:#ededf2; --card:#fff; --card-2:#f0f3f9;
  --ink:#062b47; --ink-2:#24362e; --muted:#355873; --muted-2:#3c4f5d;
  --accent:#B1FFAD; --warn:#fe204d; --highlight:#fff705; --tg:#229ed9;
  --shadow-card: 0 1px 3px rgb(0 0 0 / 0.04), 0 0 0 1px rgb(0 0 0 / 0.02);
  --shadow-cta: 0 4px 14px rgb(177 255 173 / 0.45);
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (min-width: 480px){
  :root{ --u: calc(480px / var(--base-width)); }   /* cap на десктопе */
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--font-sans);font-weight:500;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit;border:0;background:transparent;cursor:pointer}

/* ═══ PAGE ═══════════════════════════════════════════════════════════
   Полотно 320 design-units. Side-padding=0, чтобы full-width блоки
   (booking) могли сидеть от края до края. Узкие блоки (header, hours)
   сами вкручивают свои горизонтальные margin'ы. */
.page{
  max-width:480px;margin:0 auto;min-height:100vh;
  padding: calc(8 * var(--u)) 0 calc(20 * var(--u));
  display:flex;flex-direction:column;
  gap: calc(8 * var(--u));
}
/* Узкие блоки — 311 wide (margin 4.5px each side) */
.headercard,
.hours,
.brand{
  margin-left: calc(4.5 * var(--u));
  margin-right: calc(4.5 * var(--u));
}
/* NavGrid / Contacts — почти full width, но с небольшим отступом */
.nav,
.contacts{
  margin-left: calc(11 * var(--u));
  margin-right: calc(11 * var(--u));
}
/* Афиша шире прочих блоков (владелец, 22.08): те же поля, что у шапки и часов
   (4.5·u) — иначе картинка 311·u не влезла бы в свои margin'ы. */
.hero{
  margin-left: calc(4.5 * var(--u));
  margin-right: calc(4.5 * var(--u));
}

/* ═══ HEADER ═══════════════════════════════════════════════════════ */
.headercard{
  background:var(--card);
  border-radius: calc(14 * var(--u));
  box-shadow:var(--shadow-card);
  height: calc(51 * var(--u));
  padding: 0 calc(10 * var(--u));
  display:flex;align-items:center;justify-content:space-between;
  gap: calc(6 * var(--u));
}
.hc-nav{
  height: calc(31 * var(--u)); width: calc(31 * var(--u));
  border-radius: calc(9 * var(--u));
  background:var(--card-2);
  display:grid;place-items:center;flex-shrink:0;
}
.hc-nav svg{height: calc(14 * var(--u)); width: calc(14 * var(--u)); color:var(--ink-2)}
.hc-nav img{height: calc(20 * var(--u)); width: calc(20 * var(--u)); display:block}
.hc-logo{flex:1;display:grid;place-items:center;min-width:0}
.hc-logo img{height: calc(40 * var(--u));width:auto;max-width:100%}
/* Кастомный язык-переключатель: 31×31 → выпадающий список */
.hc-lang{
  position:relative;flex-shrink:0;
  width: calc(31 * var(--u));height: calc(31 * var(--u));
}
.hc-lang__btn{
  width:100%;height:100%;
  border:0;border-radius: calc(9 * var(--u));
  background:var(--card-2);color:var(--muted-2);
  font-family:inherit;font-size: calc(9 * var(--u));font-weight:700;
  cursor:pointer;
  display:grid;place-items:center;
  outline:none;
}
.hc-lang__btn:focus,.hc-lang__btn:focus-visible{outline:none}
.hc-lang__menu{
  /* меню центрировано по горизонтали относительно кнопки */
  position:absolute;top:calc(100% + 4px);
  left:50%;
  list-style:none;margin:0;padding: calc(4 * var(--u));
  background:var(--card);
  border-radius: calc(9 * var(--u));
  box-shadow: 0 6px 20px rgb(0 0 0 / .12), 0 1px 3px rgb(0 0 0 / .06);
  display:flex;flex-direction:column;
  gap: calc(2 * var(--u));
  min-width: calc(31 * var(--u));
  z-index:10;
  /* анимация открытия вниз */
  opacity:0;transform-origin:top center;
  transform: translateX(-50%) translateY(-6px) scale(.95);
  pointer-events:none;
  transition: opacity .15s ease, transform .18s cubic-bezier(.22,.61,.36,1);
}
.hc-lang[data-open="true"] .hc-lang__menu{
  opacity:1;
  transform: translateX(-50%) translateY(0) scale(1);
  pointer-events:auto;
}
.hc-lang__option{
  /* Ссылка, а не li: переключатель языка работает без JS. display/text-decoration
     сбрасывают ссылочные дефолты, чтобы плитка осталась как в эталоне. */
  display:block;text-decoration:none;
  padding: calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: calc(7 * var(--u));
  font-size: calc(9 * var(--u));font-weight:700;
  color:var(--muted-2);cursor:pointer;
  text-align:center;
  transition: background .12s ease;
  user-select:none;
}
.hc-lang__option:hover{background:var(--card-2)}
.hc-lang__option[aria-current="page"]{background:var(--card-2);color:var(--ink-2)}

/* ═══ HOURS ════════════════════════════════════════════════════════ */
.hours{
  background:var(--card);
  border-radius: calc(13 * var(--u));
  box-shadow:var(--shadow-card);
  height: calc(32 * var(--u));
  padding: 0 calc(8 * var(--u));
  margin: 0 calc(5 * var(--u));
  display:flex;align-items:center;justify-content:center;
  gap: calc(8 * var(--u));
}
.hours-row{display:flex;align-items:center;gap: calc(6 * var(--u))}
.hours-label{color:var(--muted);font-size: calc(9 * var(--u));font-weight:400;white-space:nowrap}
.hours-time{
  background:var(--card-2);color:var(--ink-2);
  font-size: calc(9 * var(--u));font-weight:700;
  border-radius: calc(6 * var(--u));
  padding: 0 calc(7 * var(--u));
  height: calc(20 * var(--u));
  display:flex;align-items:center;line-height:1;white-space:nowrap;
  font-feature-settings:"tnum" 1;
}

/* ═══ HERO — фикс 298×126 в дизайн-координатах ═══════════════════════ */
.hero{display:flex;flex-direction:column;align-items:center;gap: calc(6 * var(--u))}
.hero-image{
  position:relative;
  /* 311·u = 379px на вьюпорте 390 (ширина узких блоков: шапка, часы, футер).
     Высота — пропорцией эталона 298×126, а не числом: поменяется ширина —
     кадр не поплывёт. */
  width: calc(311 * var(--u));
  aspect-ratio: 298 / 126;
  height: auto;
  border-radius: calc(16 * var(--u));
  overflow:hidden;background:#dcdde1;
  /* .hero-image — это <button>: гасим дефолтные рамку/паддинг UA, иначе фото не
     доходило до краёв (зазор ~6px по бокам). Именно это и мешало — высоту
     фиксируем (баннеры одной высоты), фото заполняет её через cover. */
  padding:0;border:0;
  /* Свайп по афише: горизонталь забираем себе (landing.js), вертикальную
     прокрутку страницы оставляем браузеру. */
  touch-action: pan-y;
}
/* <button disabled> у слайда без попапа не должен ни гаснуть, ни менять курсор:
   картинка выглядит одинаково, просто по ней нельзя тапнуть. Кликабельный
   слайд подсвечиваем курсором-указателем. */
.hero-image:disabled{opacity:1}
.hero-image--tappable{cursor:pointer}
.hero-image img{width:100%;height:100%;object-fit:cover;display:block}
/* подпись баннера (заголовок из конструктора) — внизу поверх фото, со скримом
   для читаемости на любой картинке. Пустая — не показывается. */
.hero-caption{
  position:absolute;left:0;right:0;bottom:0;
  padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(11 * var(--u));
  font-size: calc(15 * var(--u));font-weight:700;line-height:1.2;color:#fff;
  text-align:left;
  background:linear-gradient(transparent, rgba(0,0,0,.55));
  pointer-events:none;
}
.hero-caption:empty{display:none}
/* Произвольный текстовый блок (конструктор): шрифт и размер задаются inline
   (family — из allowlist, size — px по сетке). Ширина как у карточек. */
.textblock{
  width: calc(298 * var(--u));
  margin:0 auto;
  color:var(--ink);
  line-height:1.4;
  white-space:pre-wrap;    /* переносы строк из textarea сохраняются */
  word-break:break-word;
}
.hero-dots{display:flex;gap: calc(5 * var(--u))}
.hero-dots span{display:block;height: calc(6 * var(--u));width: calc(6 * var(--u));border-radius:50%;background:rgba(53,88,115,.3)}
.hero-dots span.active{background:var(--ink)}

/* ═══ NAV GRID ═════════════════════════════════════════════════════ */
.nav{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap: calc(6 * var(--u));align-items:center;
}
/* Все три кнопки = слоистые: outer white + inner 91×38 #F0F3F9 rx14
   Боковые outer: 94×51 (padding 6.5 верт. × 1.5 гориз. → inner 91×38)
   Центральная outer: 96×56 (padding 9 верт. × 2.5 гориз. → inner 91×38) */
.nav-item{
  height: calc(51 * var(--u));
  border-radius: calc(14 * var(--u));
  background:var(--card);
  padding: calc(6.5 * var(--u)) calc(1.5 * var(--u));
  display:flex;align-items:center;justify-content:center;
  min-width:0;
}
/* Центральная outer: 96×56, padding 7×2 → inner 92×42 (крупнее боковых) */
.nav-item--center{
  height: calc(56 * var(--u));
  padding: calc(7 * var(--u)) calc(2 * var(--u));
}
.nav-inner{
  background:var(--card-2);
  border-radius: calc(14 * var(--u));
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:flex-start;
  /* 10 от левого края до иконки, 7 от иконки до текста */
  gap: calc(7 * var(--u));
  padding: 0 calc(10 * var(--u));
}
.nav-icon{
  display:grid;place-items:center;
  height: calc(22 * var(--u)); width: calc(22 * var(--u));
  flex-shrink:0;
}
.nav-icon img{height: calc(20 * var(--u));width:auto;object-fit:contain}
.nav-label{
  /* Inter Bold 10 (боковые) */
  color:var(--ink-2);font-size: calc(10 * var(--u));font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Центральная (Меню) — крупнее: 12 */
.nav-item--center .nav-label{
  font-size: calc(12 * var(--u));
}

/* ═══ BOOKING CARD ══════════════════════════════════════════════════
   outer 320×147 rx=24 (full-width, edge-to-edge, no horizontal margin)
   inner 301×133 rx=24 (центрирован внутри outer, отступ 9.5×7) */
.booking{
  background:var(--card);
  border-radius: calc(24 * var(--u));
  width: calc(320 * var(--u));
  /* min-height: calc(147 * var(--u));   ← если контент не превышает */
  padding: calc(7 * var(--u)) calc(9.5 * var(--u));
  margin: 0 auto;          /* центруется на десктопе при cap */
}
.booking-inner{
  background:var(--card-2);
  border-radius: calc(24 * var(--u));
  width: calc(301 * var(--u));
  min-height: calc(133 * var(--u));
  margin: 0 auto;
  /* Горизонтальный padding 8.5 ⇒ content 284, ровно под .fields.
     Верх 8·u (было 12·u): бокс формы поднят на ~5px — просьба владельца. */
  padding: calc(8 * var(--u)) calc(8.5 * var(--u)) calc(12 * var(--u));
  display:flex;flex-direction:column;align-items:center;
  gap: calc(10 * var(--u));
}
/* fields-wrapper: white pill 284×46 rx14, behind 4-col grid Имя/Дата/Время/Гости */
.fields{
  background:var(--card);
  border-radius: calc(14 * var(--u));
  width: calc(284 * var(--u));
  height: calc(46 * var(--u));
  margin: 0 auto;
  padding: 0 calc(8 * var(--u));
  display:grid;grid-template-columns:repeat(4, 1fr);
  gap: calc(4 * var(--u));
  place-items:center;     /* center horizontal + vertical */
}
.field{
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  gap: calc(2 * var(--u));
  width:100%;             /* fill grid cell */
  text-align:center;
}
.field-label{
  /* Inter Medium 9 — С заглавной, остальные строчные */
  margin:0;
  color:var(--muted);font-size: calc(9 * var(--u));font-weight:500;
  letter-spacing:.01em;line-height:1;
}
.field-value{
  /* Inter Bold 11 */
  margin:0;
  color:var(--ink-2);font-size: calc(11 * var(--u));font-weight:700;
  line-height:1;white-space:nowrap;
}

/* ═══ MODULE #2 — Онлайн-бронирование ═══════════════════════════════
   Тот же outer 320×147; inner — оболочка booking-widget: держит скелетон
   (.hb-skeleton из booking-widget.css) до mount и растягивается под модуль */
.booking-inner--book{
  position:relative;
  /* Inner может быть выше 133, если контента больше */
  min-height: calc(133 * var(--u));
  height:auto;
  gap: calc(8 * var(--u));
}
/* Круглая кнопка «зал/время» в правом верхнем углу карточки брони */
.halls-fab{
  position:absolute;top: calc(12 * var(--u));right: calc(12 * var(--u));
  width: calc(34 * var(--u));height: calc(34 * var(--u));
  border:0;border-radius:50%;cursor:pointer;
  background:var(--accent);color:var(--ink-2);
  display:grid;place-items:center;
  z-index:5;
  -webkit-tap-highlight-color:transparent;
  transition: transform .12s ease;
}
.halls-fab:active{transform: scale(.94)}
.halls-fab svg{width: calc(17 * var(--u));height: calc(17 * var(--u));display:block}

/* Guests wheel — колесо-«часы»: центр крупный, по бокам обрезанные */
.guests-strip{
  position:relative;
  height: calc(65 * var(--u));
  overflow:hidden;
  background:transparent;
}
/* (старый горизонтальный гостевой пикер заменён на вертикальное колесо —
   оформление теперь общее с датапикером выше) */
.guests-strip__scroll{
  height:100%;
  display:flex;align-items:center;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  scroll-snap-type: x mandatory;
  position:relative;z-index:1;
}
.guests-strip__scroll::-webkit-scrollbar{display:none}
/* боковые паддинги-«распорки», чтобы 1-й и последний центрировались */
.guests-strip__pad{flex:0 0 50%;height:1px}
.guests-num{
  flex-shrink:0;
  background:transparent;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap: calc(2 * var(--u));
  width: calc(38 * var(--u));height: calc(46 * var(--u));
  border-radius: calc(10 * var(--u));
  font-family:inherit;color:var(--muted-2);
  scroll-snap-align:center;
  transition: transform .18s ease, opacity .18s ease;
}
.guests-num__count{font-size: calc(8 * var(--u));font-weight:500;color:var(--muted);opacity:.55}
.guests-num__val{font-size: calc(13 * var(--u));font-weight:700;line-height:1.1}
/* состояния по удалённости от центра — соседние числа видны на 90% */
.guests-num--far{opacity:.9;transform:scale(.78)}
.guests-num--near{opacity:.9;transform:scale(.86)}
.guests-num--center{opacity:1;transform:scale(1)}
.guests-num--center .guests-num__count{opacity:1;color:var(--ink-2)}
.guests-num--center .guests-num__val{color:var(--ink-2)}
/* lime-«рамка» центра */
.guests-strip__pin{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width: calc(38 * var(--u));height: calc(46 * var(--u));
  background:var(--accent);
  border-radius: calc(10 * var(--u));
  z-index:0;pointer-events:none;
}
.guests-strip__edge{
  position:absolute;top:0;bottom:0;width: calc(44 * var(--u));
  z-index:2;pointer-events:none;
}
.guests-strip__edge--l{left:0;background:linear-gradient(90deg,var(--card),transparent)}
.guests-strip__edge--r{right:0;background:linear-gradient(270deg,var(--card),transparent)}

/* Группировка времени по периодам дня */
.zone-picker__title{
  font-size: calc(10 * var(--u));font-weight:700;color:var(--muted);
  margin: 0 0 calc(8 * var(--u)) calc(2 * var(--u));
  letter-spacing: calc(.2 * var(--u));
}
.zone-picker{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap: calc(8 * var(--u));
  margin: 0 0 calc(18 * var(--u));
}
.zone-chip{
  appearance:none;border:0;cursor:pointer;
  display:flex;align-items:center;gap: calc(8 * var(--u));
  background:var(--card-2);color:var(--muted-2);
  font-family:inherit;font-size: calc(11 * var(--u));font-weight:700;
  padding: calc(6 * var(--u)) calc(14 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  border-radius: 9999px;
  transition: background .15s ease, color .15s ease;
  -webkit-tap-highlight-color: transparent;
  text-align:left;
  margin: 0 calc(3 * var(--u));
}
.zone-chip[aria-selected="true"]{
  background:var(--accent);color:var(--ink-2);
}
.zone-chip__thumb{
  width: calc(34 * var(--u));height: calc(34 * var(--u));
  border-radius: 50%;
  background:#fff center/cover no-repeat;   /* белый круг */
  flex-shrink:0;
  cursor:pointer;
  position:relative;
  overflow:hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.zone-chip__thumb:hover{transform: scale(1.04)}
.zone-chip__thumb:active{transform: scale(.96)}
.zone-chip__thumb::after{ content:none }
.zone-chip__thumb__icon{
  position:absolute;top:50%;left:50%;
  transform: translate(-50%, -50%);
  width:64%;height:64%;
  object-fit:contain;
  z-index:1;
  display:block;pointer-events:none;
  /* svg в собственных цветах — белый только круг-подложка */
}
.zone-chip__thumb__count{display:none}
/* реальное фото зала из конструктора — заполняет круг-миниатюру */
.zone-chip__thumb__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;z-index:1}
.zone-chip__name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.zone-view-link{
  appearance:none;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap: calc(4 * var(--u));
  background:var(--card-2);color:var(--muted);
  font-family:inherit;font-size: calc(10 * var(--u));font-weight:600;
  padding: calc(8 * var(--u));border-radius: calc(8 * var(--u));
  margin: 0 0 calc(12 * var(--u));
  -webkit-tap-highlight-color: transparent;
}
.zone-view-link:hover{color:var(--ink-2)}
.zone-view-link svg{width: calc(10 * var(--u));height: calc(10 * var(--u));display:block}
.time-list{display:flex;flex-direction:column;gap: calc(8 * var(--u))}
.time-list__hint{
  text-align:center;
  font-size: calc(10 * var(--u));font-weight:600;color:var(--muted);
  padding: calc(14 * var(--u)) calc(8 * var(--u));
}
.time-list__hint[hidden]{display:none}
.time-period{display:flex;flex-direction:column;gap: calc(8 * var(--u))}
.time-period__title{
  font-size: calc(10 * var(--u));font-weight:700;color:var(--muted);
  letter-spacing: calc(.2 * var(--u));line-height:1;
  margin: 0 0 0 calc(2 * var(--u));
}
.time-period__grid{
  display:grid;grid-template-columns:repeat(4, 1fr);gap: calc(5 * var(--u));
}
.time-pick{
  background:var(--card-2);border:0;cursor:pointer;
  height: calc(30 * var(--u));border-radius: calc(9 * var(--u));
  font-family:inherit;font-size: calc(11 * var(--u));font-weight:700;color:var(--ink-2);
  transition: background .12s ease, color .12s ease, transform .1s ease;
  font-feature-settings: "tnum" 1;
}
.time-pick:hover{background:#e6e9f0}
.time-pick[aria-selected="true"]{background:var(--accent);color:var(--ink-2);transform:scale(1.04)}
/* Занятое время в picker dropdown — красный с перечёркиванием */
.time-pick--taken{background:var(--warn);color:#fff;opacity:.92;text-decoration:line-through;text-decoration-thickness: calc(1.5 * var(--u))}
.time-pick--taken:hover{background:#e0193e}
.time-pick--taken[aria-selected="true"]{background:var(--warn);color:#fff}
/* Депозитный таймслот — ₽ в правом верхнем углу, чтобы не наезжать на текст времени */
.time-pick--dep{position:relative}
.time-pick--dep::after{
  content:'₽';
  position:absolute;top:calc(2 * var(--u));right:calc(5 * var(--u));
  font-size:calc(9 * var(--u));font-weight:700;color:inherit;
  line-height:1;
  pointer-events:none;
  opacity:.85;
}

/* ─── Modal bottom-sheet — общий хром контент-модалок (About/Menu/Map/Zone).
   .modal-хром общий: копия для booking-модуля живёт в widget/widget.css
   (scope .hb-root) — правки зеркалить */
.modal{
  position:fixed;inset:0;z-index:1000;
  background:rgb(6 43 71 / .55);backdrop-filter: blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  padding: 0;
  opacity:0;pointer-events:none;
  transition: opacity .2s ease;
}
/* Zone modal открывается ПОВЕРХ time-picker'а (z-index:1001), поэтому 1200 */
.modal--zone{z-index:1200}
.modal[data-open="true"]{opacity:1;pointer-events:auto}
.modal__card{
  background:var(--card);
  border-radius: calc(24 * var(--u)) calc(24 * var(--u)) 0 0;
  width:100%;max-width:100%;
  padding: calc(30 * var(--u)) calc(14 * var(--u)) calc(calc(28 * var(--u)) + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap: calc(12 * var(--u));
  max-height: 90vh;
  max-height: 90dvh;
  max-height: calc(100% - env(safe-area-inset-top, 0px) - calc(20 * var(--u)));
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
  position:relative;
  touch-action: pan-y;
}
.modal[data-open="true"] .modal__card{transform:translateY(0)}
.modal__card.is-dragging{transition:none}
.modal__grabber{
  position:absolute;top: calc(8 * var(--u));left:50%;
  transform: translateX(-50%);
  width: calc(36 * var(--u));height: calc(4 * var(--u));
  background:#c8cdd6;border-radius: calc(4 * var(--u));
  cursor:grab;flex-shrink:0;
  touch-action: none;
  z-index:2;
}
.modal__grabber:active{cursor:grabbing}
.modal__head{
  display:flex;align-items:center;justify-content:space-between;
  gap: calc(8 * var(--u));
  margin-top: calc(14 * var(--u));
}
.modal__title{
  margin:0;font-size: calc(13 * var(--u));font-weight:700;color:var(--ink);
}

/* Построить маршрут — текст + иконки приложений */
.map-route{
  display:flex;align-items:center;justify-content:center;
  gap: calc(10 * var(--u));
  margin: calc(8 * var(--u)) auto 0;
}
.map-route__label{
  font-size: calc(12 * var(--u));font-weight:700;color:var(--ink);
}
.map-route__apps{display:flex;align-items:center;gap: calc(8 * var(--u))}
.map-route__app{
  display:block;
  width: calc(32 * var(--u));height: calc(32 * var(--u));
  border-radius: calc(8 * var(--u));
  overflow:hidden;
  box-shadow: 0 1px 2px rgba(6,43,71,.08);
  transition: transform .15s ease;
}
.map-route__app:active{transform: scale(.94)}
.map-route__app svg{width:100%;height:100%;display:block}

/* Меню — табы + PDF */
.modal__card--menu{
  gap: calc(10 * var(--u));
}
.menu-tabs{
  display:flex;align-items:center;
  background:var(--card-2);
  /* Высота 46px и полные скругления (владелец, 21.08): сегменты-«пилюля»,
     как у пикеров блока брони. 999px — стабильный «полный радиус»: он не
     зависит от высоты, в отличие от 50%. */
  height: 46px;
  border-radius: 999px;
  padding: calc(3 * var(--u));
  gap: calc(2 * var(--u));
}
.menu-tab{
  flex:1;
  appearance:none;border:0;background:transparent;
  font-family:inherit;font-size: calc(11 * var(--u));font-weight:600;
  color:var(--muted-2);
  /* тянемся на всю высоту пилюли: вертикальный padding сделал бы сегмент
     ниже неё и белая подложка выбранного «плавала» бы внутри */
  height:100%;
  padding: 0;
  border-radius: 999px;
  cursor:pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.menu-tab[aria-selected="true"]{
  background:var(--card);
  color:var(--ink);
  box-shadow: 0 1px 2px rgba(6,43,71,.08);
}
.menu-pdf{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4;
  max-height: 70vh;
  border-radius: calc(14 * var(--u));
  overflow:hidden;
  background:var(--card-2);
}
.menu-pdf iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
  /* до загрузки прозрачный — под ним видна надпись «Загружаем меню…» */
  background:transparent;
}
.menu-pdf.is-loaded iframe{background:#fff}
.menu-pdf__loading{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--muted-2);font-size: calc(12 * var(--u));
}
.menu-pdf.is-loaded .menu-pdf__loading{display:none}

/* Разделы меню (владелец 12.10): своих названий бывает до 6 — больше трёх
   не делим ряд поровну, а листаем вбок; длинное название не рвёт пилюлю. */
.menu-tab{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu-tabs--scroll{overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
.menu-tabs--scroll::-webkit-scrollbar{display:none}
.menu-tabs--scroll .menu-tab{flex:0 0 auto;padding:0 calc(14 * var(--u))}
.menu-sheet[hidden]{display:none}
/* Меню увеличивают пальцами: карточке шторки иначе разрешён только сдвиг по вертикали. */
.modal__card--menu{touch-action: pan-y pinch-zoom}
/* Шторка — колонка с прокруткой: ряд вкладок с прокруткой вбок иначе сжимался
   в полоску (у прокручиваемого элемента колонки нулевая минимальная высота). */
.modal__card--menu > *{flex-shrink:0}

/* Страницы меню картинками: место держит пропорция, до загрузки — размытый
   силуэт страницы (крошечное превью фоном), картинка проявляется поверх. */
.menu-pages{display:flex;flex-direction:column;gap: calc(6 * var(--u))}
.menu-page{
  position:relative;width:100%;
  border-radius: calc(14 * var(--u));
  overflow:hidden;
  background-color:var(--card-2);
  background-size:cover;background-position:center;
}
.menu-page::before{
  content:'';position:absolute;inset:0;
  background:inherit;filter:blur(12px);transform:scale(1.08);
}
.menu-page img{
  position:relative;display:block;
  width:100%;height:auto;
  opacity:0;transition:opacity .25s ease;
}
.menu-page.is-loaded img{opacity:1}
.menu-open-pdf{
  align-self:center;
  padding: calc(6 * var(--u));
  color:var(--muted-2);font-size: calc(12 * var(--u));
  text-decoration:underline;text-underline-offset:2px;
}

/* О нас — логотип + галерея + текст */
.modal__card--about{
  gap: calc(12 * var(--u));
  /* Прежние 48u сверху расчищали место под кнопку-крестик; крестиков больше
     нет (21.08, закрытие свайпом) — работает базовый отступ .modal__card,
     иначе над заголовком остаётся пустая белая полоса. */
}
/* ЕДИНЫЕ ПОЛЯ ВСЕХ ШТОРОК (решение владельца 21.08, эталон — «О нас»):
   рамка 5px по бокам, 30px сверху до первого элемента, грабер по центру
   верхней полосы. Прежние 30u сверху + 14u у шапки давали ~53px — это был
   запас под кнопку-крестик, которой больше нет. Значения точные, поэтому px.
   Крупные области (фото, PDF-лист, карта) идут почти в край; текст и подписи
   держат прежний отступ собственным padding'ом — прижатые к кромке они
   читались бы плохо. */
.modal__card{
  padding-top: 30px;
  padding-left: 5px;
  padding-right: 5px;
}
.modal__grabber{ top: 13px; }
.modal__head{ margin-top: 0; }
/* Радиусы крупных областей концентричны карточке (24u − 5px): при равных
   радиусах белая дуга на верхних углах выходит толще самого зазора. */
.about-gallery,
.menu-pdf,
.map-frame{ border-radius: calc(24 * var(--u) - 5px); }
/* Текстовые части — обратно от края (было 14u поля карточки + 2u у текста). */
.modal__head,
.map-route{ padding: 0 calc(12 * var(--u)); }
.about-gallery{
  position:relative;
  border-radius: calc(16 * var(--u));
  overflow:hidden;
  background:var(--card-2);
}
.about-gallery__track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type: x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling: touch;
  aspect-ratio: 4 / 3;
}
.about-gallery__track::-webkit-scrollbar{display:none}
.about-gallery__slide{
  flex: 0 0 100%;
  scroll-snap-align: start;
  position:relative;
  background:#dfe3eb;
}
.about-gallery__slide img{
  width:100%;height:100%;
  object-fit:cover;display:block;
}
.about-dots{
  display:flex;align-items:center;justify-content:center;
  gap: calc(4 * var(--u));
  margin-top: calc(-2 * var(--u));
}
.about-dots span{
  width: calc(6 * var(--u));height: calc(6 * var(--u));
  border-radius:50%;background:#c8cdd6;
  transition: background .2s ease, transform .2s ease;
}
.about-dots span.active{
  background:var(--ink);transform: scale(1.15);
}
/* Заголовок попапа «О нас» (21.08): жирнее и крупнее текста под ним, тон
   основного чернильного цвета — иначе на фоне серого текста не читался бы
   как заголовок. Отступы по горизонтали те же, что у .about-text. */
.about-title{
  margin: 0;
  font-size: calc(15 * var(--u));font-weight:700;color:var(--ink);
  line-height:1.3;
  padding: 0 calc(12 * var(--u)); /* поле карточки теперь 5px — текст держит отступ сам */
}
.about-text{
  font-size: calc(11 * var(--u));font-weight:500;color:var(--muted-2);
  line-height:1.5;
  padding: 0 calc(12 * var(--u)); /* поле карточки теперь 5px — текст держит отступ сам */
}
.about-text p{margin: 0 0 calc(8 * var(--u))}
.about-text p:last-child{margin-bottom: 0}

/* Карта в попапе */
.modal__card--map{
  gap: calc(10 * var(--u));
}
.map-frame{
  position:relative;
  width:100%;
  aspect-ratio: 3 / 4;
  max-height: 50vh;
  border-radius: calc(16 * var(--u));
  overflow:hidden;
  background:var(--card-2);
}
.map-frame iframe,
.map-frame__native{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;display:block;
}
.map-info{
  background:var(--card-2);
  border-radius: calc(14 * var(--u));
  padding: calc(12 * var(--u)) calc(14 * var(--u));
  display:flex;flex-direction:column;gap: calc(8 * var(--u));
}
.map-info__row{
  display:grid;grid-template-columns: calc(56 * var(--u)) 1fr;
  align-items:start;gap: calc(8 * var(--u));
}
.map-info__row--metro{grid-template-columns: 1fr}
.map-info__label{
  font-size: calc(9 * var(--u));font-weight:500;color:var(--muted);
  padding-top: calc(1 * var(--u));
}
.map-info__value{
  font-size: calc(11 * var(--u));font-weight:600;color:var(--ink-2);line-height:1.35;
}
.map-info__metro{
  display:flex;align-items:center;gap: calc(6 * var(--u));
  font-size: calc(11 * var(--u));font-weight:600;color:var(--ink-2);
}
.map-info__metro + .map-info__metro{margin-top: calc(2 * var(--u))}
.map-info__metro-dot{
  width: calc(8 * var(--u));height: calc(8 * var(--u));
  border-radius:50%;background:#0088cc;flex-shrink:0;
}
.map-info__metro-name{font-weight:600;color:var(--ink-2)}
.map-info__metro-dist{
  font-size: calc(10 * var(--u));font-weight:500;color:var(--muted);
  margin-left:auto;
}
[data-output="map-metro"]{display:flex;flex-direction:column;gap: calc(2 * var(--u))}

/* ═══ CONTACTS ════════════════════════════════════════════════════════
   Wide pill: 234×48 rx27 — текст центрируется вертикально внутри 48px */
.contacts{
  display:flex;align-items:center;justify-content:space-between;
  gap: calc(6 * var(--u));
}
.contact-wide{
  background:var(--card);
  border-radius: calc(27 * var(--u));
  width: calc(241 * var(--u));   /* было 234, +7 */
  height: calc(48 * var(--u));
  display:flex;align-items:center;
  gap: calc(8 * var(--u));
  /* padding-left 17 — текст +3 вправо; padding-right 8 — иконка -2 влево */
  padding: 0 calc(8 * var(--u)) 0 calc(17 * var(--u));
  flex-shrink:0;
}
.contact-text{flex:1;min-width:0}
.contact-title{
  /* Inter Bold 11 */
  color:var(--ink);
  font-size: calc(11 * var(--u));font-weight:700;line-height:1.15;
  white-space:nowrap;
}
.contact-sub{
  /* Inter Bold 8 */
  color:var(--muted);font-size: calc(8 * var(--u));font-weight:700;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.contact-icon{
  height: calc(34 * var(--u)); width: calc(34 * var(--u));
  border-radius:50%;background:var(--tg);
  display:grid;place-items:center;flex-shrink:0;overflow:hidden;
}
.contact-icon img{height: calc(34 * var(--u));width: calc(34 * var(--u))}
.contact-square{
  /* круглая */
  background:var(--card);
  border-radius:9999px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap: calc(2 * var(--u));
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  padding: 0;
  flex-shrink:0;
}
.contact-square-icon{
  height: calc(26 * var(--u)); width: calc(26 * var(--u));
  border-radius:50%;background:var(--ink-2);
  display:grid;place-items:center;
}
.contact-square-icon img{
  height: calc(14 * var(--u));width: calc(14 * var(--u));
  filter:invert(1) brightness(2);
}
.contact-square-label{color:var(--ink);font-size: calc(10 * var(--u));font-weight:600}

/* ═══ FOOTER BRAND ════════════════════════════════════════════════════ */
.brand{
  display:flex;align-items:center;justify-content:center;
  padding: calc(8 * var(--u)) 0;
}
.brand__wordmark{
  height: calc(18 * var(--u));width:auto;display:block;
  opacity:.85;
}