/* ═══════════════════════════════════════════════
   ИСТОМА Lounge — стили
   Палитра снята с рендеров: светлый камень, оливковый
   велюр, латунь на потолке, тёплое дерево пола.
   ═══════════════════════════════════════════════ */

/* ── Шрифты ─────────────────────────────────────────
   Свои, а не с Google Fonts. Раньше страница ждала CSS с
   fonts.googleapis.com, а он тянул файлы с третьего домена —
   PageSpeed считал это ~780 мс блокировки отрисовки на мобильных.
   Файлы те же, что отдаёт Google: вариативные, один файл на
   семейство и алфавит, все веса внутри. Браузер скачивает только
   тот алфавит, символы которого есть на странице (unicode-range).
   Источник — npm @fontsource-variable, лицензия OFL 1.1
   (assets/fonts/OFL-*.txt). */
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/cormorant-garamond-cyrillic-wght-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:'Cormorant Garamond'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('../fonts/cormorant-garamond-latin-wght-normal.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter-cyrillic-wght-normal.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('../fonts/inter-latin-wght-normal.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+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --stone:      #f6f3ee;   /* светлый камень — основной фон */
  --stone-2:    #ece7df;   /* тёплый бежевый — секции-подложки */
  --stone-3:    #e0d9cf;
  --ink:        #23231f;   /* тёмный потолок — текст */
  --ink-2:      #6b675f;   /* вторичный текст */
  --ink-read:   #4d4a44;   /* текст, который реально читают: состав блюд */
  --line:       rgba(35,35,31,.14);
  --line-soft:  rgba(35,35,31,.08);

  --olive:      #8b9c58;   /* оливковый велюр кресел */
  --olive-deep: #5d6b36;
  --olive-soft: #e6ebd8;
  --brass:      #b08f4f;   /* латунь воздуховодов */

  --dark:       #16160f;   /* тёмная секция «Атмосфера» */
  --dark-2:     #23231b;

  --radius:   4px;
  --radius-lg:6px;
  --shadow:   0 18px 50px -24px rgba(35,35,31,.32);
  --shadow-lg:0 30px 70px -30px rgba(35,35,31,.45);

  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --pad: clamp(20px, 5vw, 64px);
  --tabbar-h: 66px;
}

/* ───────── база ───────── */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--stone); color:var(--ink);
  font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; line-height:1.12; margin:0; }
p{ margin:0 0 1em; }
::selection{ background:var(--olive); color:#fff; }

.container{ width:100%; max-width:1240px; margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:clamp(72px,10vw,132px); position:relative; }
.muted{ color:var(--ink-2); }

/* ───────── типографика секций ───────── */
.eyebrow{
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--olive-deep); font-weight:500; margin:0 0 18px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width:28px; height:1px; background:var(--olive); flex:none; }
.sec-head{ max-width:720px; margin-bottom:clamp(36px,5vw,64px); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow{ justify-content:center; }
.sec-title{ font-size:clamp(30px,4.6vw,54px); letter-spacing:-.01em; }
.sec-note{ margin-top:16px; color:var(--ink-2); font-size:15px; }
.lead{ font-size:clamp(17px,1.6vw,20px); line-height:1.62; color:var(--ink); }

/* ───────── логотип ───────── */
.logo{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; line-height:1; }
.logo__word{
  font-family:var(--serif); font-weight:500; font-size:23px;
  letter-spacing:.14em; display:inline-flex; align-items:center; white-space:nowrap;
}
.logo__word--xl{ font-size:clamp(46px,8.4vw,88px); letter-spacing:.09em; }
/* Знак вместо буквы «О» — эмблема заведения.
   Через mask, а не <img>: файл остаётся внешним (один запрос, кэш, ноль
   лишних килобайт в HTML), но цвет по-прежнему берётся от текста — это
   нужно и для светлой шапки, и для тёмного подвала.
   mask с внешним файлом не работает по file:// — открывать через сервер. */
.logo__mark{
  display:inline-block; width:.94em; height:.94em;
  margin-inline:.06em; transform:translateY(.02em);
  background-color:currentColor;
  -webkit-mask:url(../img/favicon.svg) center/contain no-repeat;
          mask:url(../img/favicon.svg) center/contain no-repeat;
}
.logo__sub{
  font-size:9px; letter-spacing:.52em; text-transform:uppercase;
  color:var(--ink-2); font-weight:400; padding-left:.5em;
}

/* ───────── кнопки ───────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px; border:1px solid var(--ink); background:var(--ink); color:var(--stone);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  border-radius:var(--radius); cursor:pointer;
  transition:background .3s, color .3s, border-color .3s, transform .3s;
}
.btn:hover{ background:var(--olive-deep); border-color:var(--olive-deep); transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ background:transparent; color:var(--olive-deep); border-color:var(--olive); }
.btn--sm{ padding:11px 20px; font-size:11px; }
.btn--full{ width:100%; }

/* ═══════════ ШАПКА ═══════════ */
.header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding-block:22px; transition:background .4s, padding .4s, box-shadow .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.header.is-stuck{
  background:rgba(246,243,238,.9); backdrop-filter:blur(14px);
  padding-block:12px; border-bottom-color:var(--line-soft);
}
.header__inner{
  max-width:1240px; margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav{ display:flex; gap:clamp(16px,2.4vw,34px); }
.nav__link{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  padding-block:6px; position:relative; transition:color .25s;
}
.nav__link::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--olive); transition:width .3s;
}
.nav__link:hover{ color:var(--ink); }
.nav__link:hover::after, .nav__link.is-active::after{ width:100%; }
.nav__link.is-active{ color:var(--ink); }
.header__actions{ display:flex; align-items:center; gap:14px; }
.header__phone{ font-size:13px; letter-spacing:.06em; color:var(--ink-2); transition:color .25s; }
.header__phone:hover{ color:var(--olive-deep); }

/* Круглые кнопки связи. Телеграм и вотсап видны всегда,
   телефон — только на мобильных: на ПК номер показан текстом. */
.header__ico{
  display:grid; place-items:center; flex:none; width:38px; height:38px;
  border:1px solid var(--line); border-radius:50%; color:var(--ink);
  transition:border-color .25s, color .25s, background .25s;
}
.header__ico svg{
  width:17px; height:17px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}
.header__ico:hover{ border-color:var(--olive); color:var(--olive-deep); background:var(--olive-soft); }
.header__call{ display:none; }

/* ═══════════ HERO ═══════════ */
.hero{ padding-top:clamp(120px,16vw,180px); padding-bottom:clamp(72px,9vw,120px); overflow:hidden; }
.hero::before{
  content:''; position:absolute; inset:0 0 auto 0; height:78%; z-index:-1;
  background:linear-gradient(180deg,var(--stone-2),var(--stone));
}
.hero__grid{
  max-width:1240px; margin-inline:auto; padding-inline:var(--pad);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,6vw,80px); align-items:center;
}
/* Кальянная: сетка из трёх блоков — фото занимает правую колонку целиком,
   слева сверху заголовок и тезисы, слева снизу адрес и часы работы.
   Ресторанная версия делит эти стили, но у неё hero из двух блоков,
   поэтому всё новое живёт под модификатором --split. */
.hero__grid--split{ row-gap:clamp(28px,3.4vw,44px); align-items:start; }
.hero__grid--split .hero__visual{ grid-column:2; grid-row:1 / 3; align-self:center; }
.hero__grid--split .hero__aside{ grid-column:1; grid-row:2; }
.hero__grid--split .hero__title{ margin-bottom:20px; }
/* на телефоне логотип упирался в 46px и терялся в пустоте справа */
.hero__grid--split .logo__word--xl{ font-size:clamp(52px,13.5vw,88px); }

/* ── размытая подложка ──
   isolation нужна, чтобы слои с z-index:-1 (эта подложка и градиент
   .hero::before) остались внутри секции и не ушли под фон страницы. */
.hero--split{ isolation:isolate; }
.hero__bg{ position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.hero__bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  /* scale прячет прозрачные края, которые оставляет blur */
  transform:scale(1.25); filter:blur(34px) saturate(1.5) brightness(1.04);
  opacity:.34;
}
/* Ореол вокруг самой карточки: тот же кадр, растянутый чуть шире неё.
   Пропорции коробки близки к пропорциям снимка, поэтому сквозь блюр
   читаются настоящие пятна — зелень, окно, камень, — а не ровная заливка.
   Карточка из-за этого выглядит поднятой над своим же отражением. */
.hero__grid--split .hero__visual::before{
  content:''; position:absolute; z-index:-1; pointer-events:none;
  inset:-16% -14%;
  background:url(../img/hall-day-blur.webp) center/cover no-repeat;
  /* brightness — чтобы тёмный потолок со снимка не оставлял грязного пятна */
  filter:blur(32px) saturate(1.6) brightness(1.18);
  opacity:.5;
  /* без маски прямоугольник ореола виден краями — растворяем его к углам */
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%,
    #000 34%, rgba(0,0,0,.5) 66%, transparent 100%);
          mask-image:radial-gradient(ellipse closest-side at 50% 50%,
    #000 34%, rgba(0,0,0,.5) 66%, transparent 100%);
}

/* Вуаль поверх: сверху почти чистый камень — заголовок и логотип должны
   читаться, — к фото она расступается, а у нижней границы секции снова
   сходится в фон, чтобы стык с «О месте» не был виден. */
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(246,243,238,.88) 0%,
    rgba(246,243,238,.62) 30%,
    rgba(246,243,238,.34) 60%,
    rgba(246,243,238,.72) 88%,
    var(--stone) 100%);
}
/* левая колонка стала выше — тянем фото, чтобы оно не висело маленьким */
.hero__grid--split .hero__img--main img{ max-height:min(76vh,740px); }
.hero__title{ margin-bottom:26px; }
.hero__lounge{
  display:block; font-family:var(--sans); font-weight:300;
  font-size:12px; letter-spacing:.62em; text-transform:uppercase;
  color:var(--ink-2); margin-top:14px; padding-left:.4em;
}
.hero__lead{ max-width:470px; color:var(--ink-2); font-size:clamp(15px,1.5vw,17.5px); }

/* Живой статус «открыто / закрыто». Значение подставляет script.js по
   московскому времени — до этого элемент скрыт атрибутом hidden. */
.hero__status{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 20px;
  padding:7px 15px 7px 12px; border-radius:100px;
  background:var(--olive-soft); border:1px solid rgba(93,107,54,.2);
  font-size:12.5px; line-height:1.3; font-weight:500; color:var(--olive-deep);
}
.hero__status[hidden]{ display:none; }
.hero__status--closed{
  background:rgba(35,35,31,.05); border-color:var(--line-soft); color:var(--ink-2);
}
.hero__dot{ width:8px; height:8px; flex:none; border-radius:50%; background:var(--olive-deep); animation:pulseDot 2.6s ease-out infinite; }
.hero__status--closed .hero__dot{ background:var(--ink-2); animation:none; }
@keyframes pulseDot{
  0%  { box-shadow:0 0 0 0 rgba(139,156,88,.6); }
  70% { box-shadow:0 0 0 9px rgba(139,156,88,0); }
  100%{ box-shadow:0 0 0 0 rgba(139,156,88,0); }
}

/* Тезисы: что это за место — видно до первого скролла. */
.hero__chips{ display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0; list-style:none; }
.hero__chips li{
  padding:7px 14px; border:1px solid var(--line); border-radius:100px;
  background:rgba(255,255,255,.55); color:var(--ink-2);
  font-size:12px; letter-spacing:.03em; line-height:1.25;
}
.hero__chip--age{ border-color:rgba(93,107,54,.28); color:var(--olive-deep); font-weight:500; }

.hero__addr{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  margin:0 0 26px; font-size:14px; line-height:1.5; color:var(--ink-2);
}
.hero__pin{ width:17px; height:17px; flex:none; fill:none; stroke:var(--olive-deep); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.hero__addr a{ color:var(--olive-deep); text-decoration:underline; text-underline-offset:3px; }
.hero__addr a:hover{ color:var(--ink); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero__facts{
  display:flex; flex-wrap:wrap; gap:clamp(20px,3.4vw,46px);
  margin:46px 0 0; padding-top:26px; border-top:1px solid var(--line-soft);
}
/* в трёхблочной сетке отступ уже даёт row-gap */
.hero__grid--split .hero__facts{ margin-top:0; }
.hero__facts dt{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.hero__facts dd{ margin:6px 0 0; font-family:var(--serif); font-size:19px; }

.hero__visual{ position:relative; }
.hero__img{ margin:0; overflow:hidden; border-radius:var(--radius-lg); background:var(--stone-3); }
.hero__img--main{ box-shadow:var(--shadow-lg); }
.hero__img--main img{ width:100%; aspect-ratio:3/4; max-height:min(66vh,620px); object-fit:cover; }
.hero__img--float{
  position:absolute; right:-6%; bottom:-9%; width:44%;
  border:7px solid var(--stone); box-shadow:var(--shadow);
}
.hero__img--float img{ width:100%; aspect-ratio:3/4; object-fit:cover; }
.hero__badge{
  position:absolute; top:20px; left:-14px; z-index:2;
  background:var(--olive-deep); color:#fff; padding:8px 16px;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase; border-radius:2px;
}
.hero__scroll{
  position:absolute; left:50%; bottom:26px; translate:-50% 0;
  width:1px; height:52px; background:var(--line); overflow:hidden;
}
.hero__scroll span{
  position:absolute; inset:0; background:var(--olive);
  animation:scrollLine 2.4s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* ═══════════ О МЕСТЕ ═══════════ */
.about{ background:var(--stone); }
.about__grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(32px,5.5vw,80px); align-items:start; }
.about__text p{ color:var(--ink-2); }
.about__text .lead{ color:var(--ink); margin-bottom:1.2em; }

.features{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.feature{ background:var(--stone); padding:clamp(22px,2.6vw,32px); transition:background .35s; }
.feature:hover{ background:var(--olive-soft); }
/* Карточек может быть нечётное число — в ресторанном варианте их три.
   Без этого последняя оставляла в сетке пустую серую клетку. */
.feature:last-child:nth-child(odd){ grid-column:span 2; }
.feature__ico{ display:block; width:30px; height:30px; color:var(--olive-deep); margin-bottom:16px; }
.feature__ico svg{ width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.feature h3{ font-size:22px; margin-bottom:8px; }
.feature p{ font-size:14px; color:var(--ink-2); margin:0; line-height:1.6; }

/* ═══════════ ГАЛЕРЕЯ ═══════════ */
.gallery{ background:var(--stone-2); }
.gallery__grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.4vw,18px);
}
.shot{
  margin:0; position:relative; overflow:hidden; cursor:zoom-in;
  border-radius:var(--radius); background:var(--stone-3);
}
.shot img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.3,1), filter .5s; }
.shot:hover img{ transform:scale(1.05); }
.shot figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 18px 16px;
  background:linear-gradient(transparent,rgba(22,22,15,.72));
  color:#fff; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  opacity:0; translate:0 8px; transition:opacity .4s, translate .4s;
}
.shot:hover figcaption{ opacity:1; translate:0 0; }

/* ═══════════ МЕНЮ ═══════════ */
.menu{ background:var(--stone); }

/* — управление: вкладки, подвкладки, поиск — */
.menu__controls{ margin-bottom:clamp(28px,3.4vw,44px); }

/* на широких экранах все разделы видны сразу, на узких — лента со скроллом */
.menu__tabs{ display:flex; flex-wrap:wrap; gap:8px; }
@media (max-width:900px){
  .menu__tabs{
    flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px;
    scrollbar-width:none; -ms-overflow-style:none;
    -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);
            mask-image:linear-gradient(90deg,#000 92%,transparent);
  }
  .menu__tabs::-webkit-scrollbar{ display:none; }
}
.mtab{
  flex:none; padding:11px 19px; border:1px solid var(--line);
  background:transparent; color:var(--ink-2); border-radius:100px;
  font-size:13px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  cursor:pointer; transition:background .25s, color .25s, border-color .25s;
}
.mtab:hover{ color:var(--ink); border-color:var(--ink); }
.mtab.is-active{ background:var(--ink); border-color:var(--ink); color:var(--stone); }

.menu__subtabs{
  display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:18px;
  padding-top:16px; border-top:1px solid var(--line-soft);
}
.msub{
  padding:4px 0; border:none; background:none; cursor:pointer;
  color:var(--ink-2); font-size:15px; letter-spacing:.01em;
  border-bottom:1px solid transparent; transition:color .25s, border-color .25s;
}
.msub:hover{ color:var(--ink); }
.msub.is-active{ color:var(--olive-deep); border-bottom-color:var(--olive); }

.menu__search{ position:relative; margin-top:22px; max-width:420px; }
.menu__search input{
  width:100%; font-family:var(--sans); font-weight:400; font-size:16px; color:var(--ink);
  background:var(--stone-2); border:1px solid transparent; border-radius:100px;
  padding:13px 42px 13px 44px; transition:border-color .25s, background .25s;
}
.menu__search input:focus{ outline:none; border-color:var(--olive); background:#fff; }
.menu__search input::placeholder{ color:var(--ink-2); opacity:.7; }
.menu__searchIco{
  position:absolute; left:16px; top:50%; translate:0 -50%;
  width:17px; height:17px; fill:none; stroke:var(--ink-2);
  stroke-width:1.5; stroke-linecap:round; pointer-events:none;
}
.menu__searchClear{
  position:absolute; right:8px; top:50%; translate:0 -50%;
  width:28px; height:28px; border:none; background:none; cursor:pointer;
  color:var(--ink-2); font-size:22px; line-height:1; border-radius:50%;
}
.menu__searchClear:hover{ color:var(--ink); background:var(--stone-3); }

/* — список позиций — */
.menu__status{ padding:40px 0; color:var(--ink-2); font-size:15px; }
.mgroup{
  font-size:14px; letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
  font-family:var(--sans); font-weight:500;
  margin:clamp(28px,3vw,42px) 0 16px; padding-bottom:10px;
  border-bottom:1px solid var(--line-soft);
}
.mgroup:first-child{ margin-top:0; }

.dishes{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:2px 40px;
}
.dish{
  display:flex; align-items:flex-start; gap:16px; padding:16px 12px;
  margin-inline:-12px; border-radius:var(--radius); cursor:pointer;
  transition:background .25s;
}
.dish:hover{ background:var(--stone-2); }
.dish:focus-visible{ outline:2px solid var(--olive); outline-offset:-2px; }

.dish__thumb{
  flex:none; width:74px; height:74px; object-fit:cover;
  border-radius:var(--radius); background:var(--stone-3);
}
.dish__thumb--empty{ background:var(--stone-2); }
.dish__body{ flex:1; min-width:0; }
.dish__title{ margin:0; font-family:var(--serif); font-weight:500; font-size:23px; line-height:1.22; }
/* Состав показываем целиком: гость должен видеть всё, что в блюде. */
.dish__descr{ margin:7px 0 0; font-size:15px; line-height:1.55; color:var(--ink-read); }
.dish__meta{
  margin:8px 0 0; font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-2);
}
.dish__prices{
  flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:3px;
  padding-top:2px; font-variant-numeric:tabular-nums;
}
.dish__price{ font-family:var(--serif); font-weight:500; font-size:22px; white-space:nowrap; }
/* Цена варианта — та же цифра, что и обычная цена, и выглядеть должна так же.
   Здесь не хватало font-family: строка «600 мл 500 ₽» рисовалась Inter'ом,
   а соседние позиции без вариантов — Cormorant'ом, и в сетке это читалось
   как «у одного блюда сломался шрифт».
   Размер чуть меньше, чем у .dish__price: вариантов бывает три-четыре,
   и столбик из 22px распирал бы строку по высоте. */
.dish__opt{
  display:flex; align-items:baseline; gap:7px;
  font-family:var(--serif); font-weight:500; font-size:19px;
  color:var(--ink); white-space:nowrap;
}
/* Подпись объёма остаётся служебной — мелкий Inter, как и было. */
.dish__optLabel{
  font-family:var(--sans); font-weight:400;
  font-size:12px; letter-spacing:.05em; color:var(--ink-2);
}

.menu__foot{
  margin:clamp(36px,4vw,56px) 0 0; padding-top:22px;
  border-top:1px solid var(--line-soft);
  font-size:14px; color:var(--ink-read); max-width:70ch;
}
/* Появляется, только когда меню приехало не с бэкенда, а из резервного файла. */
.menu__stale{ color:var(--brass); }

/* — карточка позиции — */
.dish-dialog{
  position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center;
  background:rgba(22,22,15,.72); padding:clamp(16px,4vw,48px);
  opacity:0; transition:opacity .26s;
}
.dish-dialog.is-open{ opacity:1; }
.dish-dialog[hidden]{ display:none; }
.dishCard{
  position:relative; width:min(100%,460px); max-height:86vh; overflow-y:auto;
  background:var(--stone); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
}
.dishClose{
  position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; border:none; border-radius:50%; cursor:pointer;
  background:rgba(246,243,238,.9); color:var(--ink); font-size:24px; line-height:1;
  backdrop-filter:blur(6px);
}
.dishClose:hover{ background:#fff; }
.dish__hero{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.dish__full{ padding:clamp(22px,3vw,30px); }
.dish__full h3{ font-size:28px; margin-bottom:12px; }
.dish__fullPrices{ display:flex; flex-wrap:wrap; gap:6px 20px; margin-bottom:16px; }
.dish__fullPrices .dish__price{ font-size:24px; color:var(--olive-deep); }
.dish__composition{ margin:0; font-size:16px; line-height:1.65; color:var(--ink-read); }
.dish__nutri{
  display:flex; flex-wrap:wrap; gap:10px 28px; margin:20px 0 0;
  padding-top:18px; border-top:1px solid var(--line-soft);
}
.dish__nutri dt{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.dish__nutri dd{ margin:4px 0 0; font-family:var(--serif); font-size:20px; }

/* ═══════════ АТМОСФЕРА (тёмная) ═══════════ */
.evening{ background:var(--dark); color:#efece4; }
.evening .eyebrow{ color:#b9c78a; }
.evening .eyebrow::before{ background:#b9c78a; }
.evening .sec-note{ color:rgba(239,236,228,.6); }
.evening__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,26px); }
.ecard{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--dark-2); cursor:zoom-in;
}
.ecard img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .9s cubic-bezier(.2,.7,.3,1), opacity .5s; opacity:.88; }
.ecard:hover img{ transform:scale(1.05); opacity:1; }
.ecard__body{
  position:absolute; inset:auto 0 0 0; padding:clamp(48px,6vw,72px) clamp(18px,2vw,26px) clamp(18px,2vw,26px);
  background:linear-gradient(transparent,rgba(10,10,6,.92));
}
.ecard__body h3{ font-size:26px; margin-bottom:6px; }
.ecard__body p{ margin:0; font-size:14px; color:rgba(239,236,228,.72); line-height:1.55; }

/* ═══════════ БРОНИРОВАНИЕ ═══════════ */
.booking{ background:var(--stone-2); }
.booking__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(32px,5vw,72px); align-items:center; }
.booking__visual{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); }
.booking__visual img{ width:100%; aspect-ratio:3/4; object-fit:cover; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:28px; }
/* min-width:0 обязателен: по умолчанию элемент грида не ужимается меньше
   своего min-content, и одно широкое поле распирает всю колонку. */
.field{ grid-column:span 2; display:flex; flex-direction:column; gap:7px; min-width:0; }
.field--half{ grid-column:span 1; }
.field label{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:15px; font-weight:300; color:var(--ink);
  background:var(--stone); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 15px; transition:border-color .25s, background .25s; width:100%;
}
.field textarea{ resize:vertical; min-height:88px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--olive); background:#fff;
}
.field input.is-error, .field select.is-error{ border-color:#b5563f; }

/* iOS не считает date и time обычными полями: нативный контрол игнорирует
   width, растягивается по своему содержимому и вылезает за колонку, а текст
   внутри центрирует. appearance:none снимает нативную отрисовку — и дальше
   работают те же правила, что и для остальных полей. Календарь по нажатию
   при этом никуда не девается. */
.field input[type="date"],
.field input[type="time"]{
  -webkit-appearance:none; appearance:none;
  min-width:0; max-width:100%; text-align:left;
}
/* Сафари на айфоне зумит страницу при фокусе, если шрифт поля меньше 16px.
   Ставим ровно 16 — и зум пропадает, и поля перестают прыгать. */
@media (max-width:820px){
  .field input, .field select, .field textarea{ font-size:16px; }
}

/* Канал подтверждения брони: три кнопки-переключателя в ряд.
   Под ними живут обычные radio — скрыты визуально, но доступны
   с клавиатуры и для скринридера, поэтому :focus-visible ловим
   через :has() на обёртке. */
.confirm{ border:0; margin:0; padding:0; min-width:0; }
.confirm__legend{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); padding:0; margin-bottom:7px;
}
.confirm__row{ display:flex; gap:8px; }
.confirm__opt{ flex:1 1 0; min-width:0; cursor:pointer; }
.field .confirm__opt{ font-size:inherit; letter-spacing:normal; text-transform:none; }
.field .confirm__opt input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.confirm__btn{
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:46px; padding:10px 8px; text-align:center;
  font-family:var(--sans); font-size:14px; font-weight:400; color:var(--ink-2);
  background:var(--stone); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .25s, background .25s, color .25s;
  /* без min-width:0 «WhatsApp» держит min-content и выталкивает ряд
     за пределы узкого экрана */
  min-width:0;
}
.confirm__btn svg{
  flex:none; width:17px; height:17px; fill:currentColor; stroke:none;
}
.confirm__opt:hover .confirm__btn{ border-color:var(--olive); color:var(--ink); }
.confirm__opt input:checked + .confirm__btn{
  background:#fff; border-color:var(--olive-deep); color:var(--ink); font-weight:500;
}
.confirm__row.is-error .confirm__btn{ border-color:#b5563f; }
.confirm__opt input:focus-visible + .confirm__btn{
  outline:2px solid var(--olive-deep); outline-offset:2px;
}
.form .btn{ grid-column:span 2; }
.form__legal{ grid-column:span 2; margin:0; font-size:12px; color:var(--ink-2); line-height:1.5; }
/* Согласие на обработку данных: обязательная галочка, а не строка петитом. */
.form__consent{
  grid-column:span 2; display:flex; align-items:flex-start; gap:11px;
  font-size:13px; line-height:1.55; color:var(--ink-2); cursor:pointer;
}
.form__consent input{
  flex:none; width:19px; height:19px; margin:1px 0 0; accent-color:var(--olive-deep); cursor:pointer;
}
.form__consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.form__consent a:hover{ color:var(--olive-deep); }
.form__consent.is-error{ color:#b5563f; }
.form__consent.is-error input{ outline:2px solid #b5563f; outline-offset:2px; }
.form__status{
  grid-column:span 2; margin:0; font-size:14px; color:var(--olive-deep);
  min-height:1.2em; opacity:0; transition:opacity .35s;
}
.form__status.is-visible{ opacity:1; }

/* ───────── карточка «Бронь принята» ─────────
   Встаёт на место формы и должна выглядеть её продолжением, а не
   всплывшим окном: тот же камень, что у полей, та же тонкая линия,
   без тени и белого фона. */
.form[hidden]{ display:none; }
.booking-done{
  --accent: var(--olive-deep);
  --accent-soft: rgba(93,107,54,.10);
  --accent-line: rgba(93,107,54,.28);
  margin-top:28px; padding:clamp(32px,4.5vw,48px) clamp(20px,4vw,40px) clamp(26px,3.5vw,34px);
  background:var(--stone); border:1px solid var(--line);
  border-radius:var(--radius);
  text-align:center; outline:none;
  animation:bookingDoneIn .6s cubic-bezier(.2,.7,.2,1) both;
}
.booking-done--dup{
  --accent: #8a6d34;
  --accent-soft: rgba(176,143,79,.12);
  --accent-line: rgba(176,143,79,.38);
}

.booking-done__icon{
  width:58px; height:58px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; color:var(--accent);
  border:1px solid var(--accent-line);
  animation:bookingIconIn .55s .1s cubic-bezier(.3,1.4,.5,1) both;
}
.booking-done__icon svg{
  width:26px; height:26px; fill:none; stroke:currentColor;
  stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.booking-done__mark{ stroke-dasharray:24; stroke-dashoffset:24; animation:bookingDraw .45s .45s ease-out forwards; }

.booking-done__title{
  margin:0; font-family:var(--serif); font-weight:500;
  font-size:clamp(28px,3.6vw,36px); line-height:1.1; letter-spacing:.01em;
}
.booking-done__badge{
  display:inline-flex; align-items:center; gap:9px; margin:14px 0 0;
  padding:7px 15px; border-radius:999px; background:var(--accent-soft); color:var(--accent);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
}
.booking-done__dot{
  position:relative; width:7px; height:7px; border-radius:50%; background:currentColor; flex:none;
}
.booking-done__dot::after{
  content:""; position:absolute; inset:0; border-radius:50%; background:currentColor;
  animation:bookingPulse 1.8s ease-out infinite;
}

.booking-done__facts{
  display:flex; margin:28px 0 0;
  border-block:1px solid var(--line-soft);
}
.booking-done__fact{ flex:1 1 0; padding:16px 10px; min-width:0; }
.booking-done__fact:first-child{ flex-grow:1.7; }
.booking-done__fact + .booking-done__fact{ border-left:1px solid var(--line-soft); }
.booking-done__fact dt{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.booking-done__fact dd{ margin:6px 0 0; font-family:var(--serif); font-size:21px; line-height:1.2; color:var(--ink); white-space:nowrap; }

.booking-done__text{ margin:20px auto 0; max-width:36ch; font-size:14.5px; line-height:1.6; color:var(--ink-read); }

.booking-done__actions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:14px 20px; margin-top:22px; }
.booking-done__again{
  padding:6px 2px; border:0; background:none; cursor:pointer;
  font:inherit; font-size:12px; letter-spacing:.08em; color:var(--ink-2);
  border-bottom:1px solid var(--line); transition:color .25s, border-color .25s;
}
.booking-done__again:hover{ color:var(--olive-deep); border-color:var(--olive); }

@keyframes bookingDoneIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes bookingIconIn{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
@keyframes bookingDraw{ to{ stroke-dashoffset:0; } }
@keyframes bookingPulse{ from{ transform:scale(1); opacity:.6; } to{ transform:scale(3); opacity:0; } }

@media (max-width:420px){
  .booking-done__fact dd{ font-size:16.5px; }
  .booking-done__fact{ padding:12px 4px; }
}
@media (prefers-reduced-motion: reduce){
  .booking-done, .booking-done__icon{ animation:none; }
  .booking-done__mark{ animation:none; stroke-dashoffset:0; }
  .booking-done__dot::after{ animation:none; }
}

/* ═══════════ КОНТАКТЫ ═══════════ */
.contacts{ background:var(--stone); }
.contacts__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start; }
.cline{ padding-block:22px; border-top:1px solid var(--line-soft); }
.cline:first-child{ border-top:none; padding-top:0; }
.cline__label{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.cline__value{ margin:8px 0 0; font-family:var(--serif); font-size:22px; line-height:1.45; }
.cline__value a:hover{ color:var(--olive-deep); }
.cline__value .muted{ font-family:var(--sans); font-size:14px; }
.cline__route{ margin-top:16px; }
.cline__route svg{
  width:16px; height:16px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
}

.socials{ display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }
.social{
  display:inline-flex; align-items:center; gap:9px; padding:11px 17px;
  border:1px solid var(--line); border-radius:var(--radius);
  font-size:12px; letter-spacing:.08em; transition:border-color .25s, color .25s, background .25s;
}
.social svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linejoin:round; }
.social:hover{ border-color:var(--olive); color:var(--olive-deep); background:var(--olive-soft); }

.contacts__map{ position:relative; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; }
.contacts__map img{ width:100%; height:100%; object-fit:cover; }
.map__overlay{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center;
  background:rgba(22,22,15,.5); color:#fff; backdrop-filter:blur(2px); padding:24px;
}
.map__overlay p{ margin:0; font-size:14px; line-height:1.6; }
.map__btns{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.map__overlay .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.4); }
.map__overlay .btn--ghost:hover{ color:#fff; border-color:#fff; background:rgba(255,255,255,.12); }

/* ═══════════ ПОДВАЛ ═══════════ */
.footer{ background:var(--dark); color:rgba(239,236,228,.75); padding-block:56px; }
.footer__inner{ display:flex; flex-direction:column; align-items:center; gap:24px; text-align:center; }
.logo--footer{ color:#efece4; }
.logo--footer .logo__sub{ color:rgba(239,236,228,.5); }
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px 26px; }
.footer__nav a{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; transition:color .25s; }
.footer__nav a:hover{ color:#b9c78a; }
.footer__note{ margin:0; font-size:12px; color:rgba(239,236,228,.45); line-height:1.7; }

/* Обязательные предупреждения: их читают, поэтому не прячем в петит. */
.footer__warn{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  margin:0; max-width:62ch; font-size:13px; line-height:1.6;
  color:rgba(239,236,228,.8);
}
.footer__age{
  flex:none; display:grid; place-items:center; min-width:38px; height:26px; padding-inline:8px;
  border:1px solid rgba(239,236,228,.5); border-radius:3px;
  font-size:12px; font-weight:600; letter-spacing:.06em; color:#efece4;
}
.footer__legal{ display:flex; flex-direction:column; gap:12px; }
.footer__legal p{ margin:0; font-size:12px; line-height:1.7; color:rgba(239,236,228,.5); }
.footer__legal a{ color:rgba(239,236,228,.72); text-decoration:underline; text-underline-offset:2px; transition:color .25s; }
.footer__legal a:hover{ color:#b9c78a; }
.footer__copy{ color:rgba(239,236,228,.35) !important; }
/* Требование закона: упоминание Instagram сопровождается сноской. */
.footer__meta{ margin:0; font-size:11px; line-height:1.6; color:rgba(239,236,228,.4); max-width:620px; }
.social__note{ font-size:.75em; line-height:0; vertical-align:super; }

/* ═══════════ ПРАВОВЫЕ СТРАНИЦЫ ═══════════ */
.legal{ padding:clamp(96px,12vw,150px) 0 clamp(64px,8vw,110px); background:var(--stone); }
.legal__inner{ max-width:760px; margin-inline:auto; padding-inline:var(--pad); }
.legal__back{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:34px;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  transition:color .25s;
}
.legal__back:hover{ color:var(--olive-deep); }
.legal__back svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.legal h1{ font-size:clamp(28px,4.2vw,44px); margin-bottom:14px; }
.legal__meta{ font-size:13px; color:var(--ink-2); margin-bottom:clamp(32px,4vw,48px); }
.legal h2{
  font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brass);
  margin:clamp(34px,4vw,48px) 0 14px; padding-bottom:10px;
  border-bottom:1px solid var(--line-soft);
}
.legal p, .legal li{ font-size:15.5px; line-height:1.7; color:var(--ink-read); }
.legal ul, .legal ol{ padding-left:22px; margin:0 0 1em; }
.legal li{ margin-bottom:8px; }
.legal strong{ color:var(--ink); font-weight:500; }
/* Таблица cookie: на узком экране уезжает горизонтально внутри себя,
   а не тянет за собой всю страницу. */
.legal__tableWrap{ overflow-x:auto; margin:0 0 1em; }
.legal__table{
  width:100%; min-width:560px; border-collapse:collapse;
  font-size:14px; line-height:1.6; color:var(--ink-read);
}
.legal__table th, .legal__table td{
  padding:11px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line-soft);
}
.legal__table th{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-2); white-space:nowrap;
}
.legal__table code{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:12.5px; color:var(--ink); white-space:nowrap;
}
.legal__table td span{ font-size:12px; color:var(--ink-2); white-space:nowrap; }
.legal__table tbody tr:last-child td{ border-bottom:0; }

.legal__req{
  margin-top:clamp(34px,4vw,48px); padding:clamp(20px,2.6vw,28px);
  background:var(--stone-2); border-radius:var(--radius-lg);
}
.legal__req p{ margin:0; font-size:14.5px; line-height:1.75; }

/* ═══════════ НИЖНЯЯ ПАНЕЛЬ (МОБИЛЬНЫЕ) ═══════════ */
.tabbar{ display:none; }
.tabbar__img{ width:21px; height:21px; object-fit:contain; display:block; filter:brightness(0); }

/* ═══════════ БОКОВОЕ МЕНЮ (МОБИЛЬНЫЕ) ═══════════
   На телефоне .nav из шапки скрыта, а в нижнюю панель помещаются только
   быстрые действия. Полная навигация живёт здесь: тёмная панель справа,
   в тонах подвала и секции «Атмосфера».
   Слой 190: выше шапки (60), нижней панели (70) и cookie (180), но ниже
   лайтбокса (200) и карточки блюда (210). */
.header__burger{
  display:none; padding:0; background:none; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.header__burger svg{ stroke-width:1.6; }

.side{ position:fixed; inset:0; z-index:190; }
.side[hidden]{ display:none; }
.side__backdrop{
  position:absolute; inset:0; background:rgba(14,14,9,.56);
  opacity:0; transition:opacity .35s;
}
.side__panel{
  position:absolute; inset:0 0 0 auto; width:min(86vw,360px);
  display:flex; flex-direction:column;
  /* нижний отступ отдан .side__cta: кнопки прилипают к низу панели */
  padding:calc(16px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) 0 28px;
  background:var(--dark); color:#efece4;
  border-left:1px solid rgba(176,143,79,.34);
  box-shadow:-30px 0 70px -30px rgba(0,0,0,.7);
  /* на низких экранах панель листается сама, страница под ней стоит */
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  transform:translateX(100%); transition:transform .42s cubic-bezier(.2,.7,.3,1);
  outline:none;
}
.side.is-open .side__backdrop{ opacity:1; }
.side.is-open .side__panel{ transform:none; }

/* Блоки панели доезжают по очереди — вслед за самой панелью. */
.side__panel > *{
  opacity:0; transform:translateX(18px);
  transition:opacity .45s, transform .5s cubic-bezier(.2,.7,.3,1);
}
.side.is-open .side__panel > *{ opacity:1; transform:none; }
.side.is-open .side__panel > :nth-child(1){ transition-delay:.10s; }
.side.is-open .side__panel > :nth-child(2){ transition-delay:.16s; }
.side.is-open .side__panel > :nth-child(3){ transition-delay:.22s; }
.side.is-open .side__panel > :nth-child(4){ transition-delay:.28s; }

.side__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.side__close{
  display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0;
  margin-right:-6px; background:none; color:#efece4; cursor:pointer;
  border:1px solid rgba(239,236,228,.2); border-radius:50%;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .25s, color .25s, transform .3s;
}
.side__close svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
/* только для мыши: на тачскрине :hover залипает после касания */
@media (hover:hover){
  .side__close:hover{ border-color:#b9c78a; color:#b9c78a; transform:rotate(90deg); }
}

.side__nav{ display:flex; flex-direction:column; margin-top:clamp(22px,5vh,44px); }
.side__link{
  display:flex; align-items:center; padding-block:9px;
  font-family:var(--serif); font-size:27px; line-height:1.15; letter-spacing:.01em;
  color:rgba(239,236,228,.86); -webkit-tap-highlight-color:transparent;
  transition:color .25s;
}
/* латунная черта выезжает перед активным пунктом */
.side__link::before{
  content:''; flex:none; width:0; height:1px; background:var(--brass);
  transition:width .35s, margin .35s;
}
.side__link:hover, .side__link:active{ color:#fff; }
.side__link.is-active{ color:#b9c78a; }
.side__link.is-active::before{ width:22px; margin-right:12px; }

.side__info{
  margin-top:clamp(20px,4vh,34px); padding-top:clamp(18px,3.4vh,26px);
  border-top:1px solid rgba(239,236,228,.12);
}
.side__phone{
  display:inline-block; padding-block:4px;
  font-family:var(--serif); font-size:25px; line-height:1.2; letter-spacing:.02em; color:#efece4;
  transition:color .25s;
}
.side__phone:hover{ color:#b9c78a; }
.side__hours{
  margin:8px 0 0; font-size:12.5px; line-height:1.75; letter-spacing:.04em;
  color:rgba(239,236,228,.6);
}
.side__socials{ display:flex; gap:10px; margin-top:18px; }
.side__social{
  position:relative; display:grid; place-items:center; width:44px; height:44px;
  border:1px solid rgba(239,236,228,.2); border-radius:50%; color:#efece4;
  transition:border-color .25s, color .25s, background .25s;
}
.side__social svg{
  width:18px; height:18px; fill:none; stroke:currentColor;
  stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round;
}
.side__social:hover{ border-color:#b9c78a; color:#b9c78a; background:rgba(185,199,138,.08); }
.side__star{ position:absolute; top:1px; right:-7px; font-size:12px; line-height:1; color:rgba(239,236,228,.55); }

/* margin-top:auto прижимает кнопки к низу, когда панель выше содержимого.
   Если содержимое не помещается (низкий экран), кнопки остаются на виду,
   а пункты меню листаются под ними — отсюда sticky и непрозрачный фон. */
.side__cta{
  display:flex; flex-direction:column; gap:10px; margin-top:auto;
  position:sticky; bottom:0; z-index:1;
  padding:22px 0 calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, rgba(22,22,15,0), var(--dark) 20px);
}
/* узкий экран: длинная подпись не должна переноситься на вторую строку */
.side__cta .btn{ width:100%; padding-inline:12px; white-space:nowrap; text-align:center; }
.side__book{ background:#efece4; border-color:#efece4; color:var(--ink); }
.side__book:hover{ color:#fff; }
.side__route{ background:transparent; border-color:rgba(239,236,228,.28); color:#efece4; }
.side__route:hover{ background:transparent; border-color:#b9c78a; color:#b9c78a; }

/* Клавиатурный фокус на тёмном фоне: системная обводка здесь не видна. */
.side a:focus-visible, .side button:focus-visible{ outline:2px solid #b9c78a; outline-offset:3px; }

@media (max-width:760px){
  .header__burger{ display:grid; }
}
/* низкие экраны (iPhone SE, альбомная ориентация) — ужимаем, чтобы
   кнопки внизу были видны без прокрутки */
@media (max-height:640px){
  .side__nav{ margin-top:14px; }
  .side__link{ font-size:22px; padding-block:6px; }
  .side__info{ margin-top:14px; padding-top:14px; }
  .side__phone{ font-size:22px; }
  .side__hours{ display:none; }
  .side__socials{ margin-top:10px; }
  .side__cta{ gap:8px; padding-top:18px; padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .side__cta .btn{ padding-block:12px; }
}

/* ═══════════ COOKIE ═══════════ */
/* Уведомление, а не выбор: кнопка одна, отклонять нечего. */
.cookie{
  position:fixed; z-index:180; left:clamp(12px,3vw,28px); right:clamp(12px,3vw,28px);
  bottom:clamp(12px,3vw,28px); margin-inline:auto; max-width:720px;
  display:flex; align-items:center; gap:clamp(14px,3vw,24px);
  padding:16px clamp(16px,3vw,22px);
  background:rgba(246,243,238,.97); backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow);
  transform:translateY(16px); opacity:0; transition:opacity .35s, transform .35s;
}
.cookie.is-visible{ transform:none; opacity:1; }
.cookie__text{ margin:0; flex:1 1 auto; min-width:0; font-size:13.5px; line-height:1.55; color:var(--ink-read); }
.cookie__text a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.cookie__text a:hover{ color:var(--olive-deep); }
.cookie__ok{ flex:none; min-width:96px; }

@media (max-width:640px){
  .cookie{ flex-direction:column; align-items:stretch; gap:12px; text-align:left; }
  .cookie__ok{ width:100%; }
  /* на главной снизу висит панель навигации */
  .cookie--above-tabbar{
    bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);
  }
}

@media (prefers-reduced-motion:reduce){
  .cookie{ transition:none; transform:none; }
}

/* ═══════════ ЛАЙТБОКС ═══════════ */
.lightbox{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(14,14,9,.94); padding:clamp(16px,4vw,56px);
  opacity:0; transition:opacity .3s;
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }
.lb__img{ max-width:min(100%,760px); max-height:82vh; object-fit:contain; border-radius:var(--radius); }
.lb__caption{
  position:absolute; left:0; right:0; bottom:clamp(14px,3vw,30px); margin:0; text-align:center;
  color:rgba(255,255,255,.72); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
}
.lb__close, .lb__nav{
  position:absolute; background:none; border:none; color:#fff; cursor:pointer;
  opacity:.65; transition:opacity .25s; line-height:1;
}
.lb__close{ top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px); font-size:38px; }
.lb__nav{ top:50%; translate:0 -50%; font-size:52px; padding:12px 18px; }
.lb__nav--prev{ left:clamp(2px,1vw,16px); }
.lb__nav--next{ right:clamp(2px,1vw,16px); }
.lb__close:hover, .lb__nav:hover{ opacity:1; }

/* ═══════════ АНИМАЦИЯ ПОЯВЛЕНИЯ ═══════════ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* ═══════════════════════════════════════════════
   АДАПТИВ
   ═══════════════════════════════════════════════ */

@media (max-width:1080px){
  .header__phone{ display:none; }
  .about__grid, .contacts__grid, .booking__grid{ grid-template-columns:1fr; }
  .booking__visual{ max-height:340px; }
  .booking__visual img{ aspect-ratio:16/9; }
  .dishes{ gap:2px 28px; }
  .evening__grid{ grid-template-columns:repeat(2,1fr); }
  .ecard:last-child{ grid-column:span 2; }
  .ecard:last-child img{ aspect-ratio:16/9; }
}

@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__visual{ order:-1; max-width:440px; margin:0 auto 46px; width:100%; }
  .hero__img--float{ width:38%; right:-10px; bottom:-24px; }
  .hero__badge{ left:12px; }
  .hero__scroll{ display:none; }
  .gallery__grid{ grid-template-columns:repeat(2,1fr); }

  /* Кальянная. Раньше фото стояло первым и первый экран телефона был
     «просто фото». Теперь сверху — кто мы, статус работы и тезисы,
     фото идёт следом, адрес и часы — под ним. */
  .hero--split{ padding-top:clamp(92px,20vw,124px); padding-bottom:clamp(56px,9vw,90px); }
  .hero__grid--split{ row-gap:0; }
  .hero__grid--split .hero__copy{ order:1; grid-column:auto; grid-row:auto; }
  .hero__grid--split .hero__visual{ order:2; grid-column:auto; grid-row:auto; margin:38px auto 0; }
  .hero__grid--split .hero__aside{ order:3; grid-column:auto; grid-row:auto; margin-top:46px; }
  .hero__grid--split .hero__img--main img{ aspect-ratio:4/3; max-height:44vh; }
  .hero__grid--split .hero__img--float{ width:34%; }
  .hero__grid--split .hero__img--float img{ aspect-ratio:1/1; }
  /* На телефоне подложка и есть «наполненность»: берём её в полную силу,
     а карточку приподнимаем над ней тенью потеплее. */
  .hero--split .hero__bg img{ opacity:.5; filter:blur(26px) saturate(1.6) brightness(1.06); }
  .hero__grid--split .hero__visual::before{ inset:-20% -18%; opacity:.72; filter:blur(26px) saturate(1.7) brightness(1.14); }
  .hero--split .hero__bg::after{
    background:linear-gradient(180deg,
      rgba(246,243,238,.9) 0%,
      rgba(246,243,238,.58) 24%,
      rgba(246,243,238,.22) 52%,
      rgba(246,243,238,.62) 86%,
      var(--stone) 100%);
  }
  .hero__grid--split .hero__img--main{ box-shadow:0 26px 60px -26px rgba(35,35,31,.55); }
  /* Подложка и так размыта, поэтому чипам хватает полупрозрачного фона:
     backdrop-filter на семи элементах сразу — лишняя работа для слабых
     телефонов и лишние миллисекунды в PageSpeed. */
  .hero__grid--split .hero__chips li{ background:rgba(255,255,255,.62); }
}

/* ───── мобильные: шапка → нижняя панель ───── */
@media (max-width:760px){
  html{ scroll-padding-top:76px; }
  body{ padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }

  .nav{ display:none; }
  .header{ padding-block:12px; background:rgba(246,243,238,.92); backdrop-filter:blur(14px); border-bottom-color:var(--line-soft); }
  .header__inner{ justify-content:space-between; }
  .header__book{ display:none; }
  .header__actions{ gap:9px; }
  .header__call{ display:grid; }
  .header__ico{ width:40px; height:40px; }
  .header__ico svg{ width:18px; height:18px; }
  .header__ico:active{ border-color:var(--olive); color:var(--olive-deep); }
  .logo__word{ font-size:20px; }

  .features{ grid-template-columns:1fr; }
  .dishes{ grid-template-columns:1fr; gap:0; }
  .dish{ gap:14px; padding:16px 12px; }
  .dish__thumb{ width:64px; height:64px; }
  .dish__title{ font-size:21px; }
  .dish__descr{ font-size:14.5px; }
  .menu__search{ max-width:none; }
  .mtab{ padding:10px 16px; font-size:12px; }
  .msub{ font-size:14.5px; }
  .evening__grid{ grid-template-columns:1fr; }
  .ecard:last-child{ grid-column:span 1; }
  .ecard:last-child img{ aspect-ratio:4/5; }
  .form{ grid-template-columns:1fr; }
  .field, .field--half{ grid-column:span 1; }
  .form .btn, .form__legal, .form__consent, .form__status{ grid-column:span 1; }
  .confirm{ grid-column:span 1; }
  .confirm__btn{ font-size:13.5px; gap:6px; padding:10px 6px; }
  /* высоту задаёт aspect-ratio; min-height здесь спорил с ним
     и на узких экранах растягивал страницу по горизонтали */
  .contacts__map{ aspect-ratio:3/2; }
  .hero__facts dd{ font-size:17px; }
  .hero__facts{ gap:18px 26px; }
  .hero__facts > div{ flex:1 1 40%; }
  .hero__chips li{ font-size:11.5px; padding:6px 12px; }
  .hero__lead{ font-size:15.5px; }

  /* панель */
  .tabbar{
    display:flex; position:fixed; z-index:70;
    inset:auto 0 0 0; height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom);
    background:rgba(246,243,238,.94); backdrop-filter:blur(18px) saturate(1.3);
    border-top:1px solid var(--line-soft);
    box-shadow:0 -10px 30px -20px rgba(35,35,31,.5);
  }
  .tabbar__img {
    width: 21px;        
    height: 21px;       
    object-fit: contain;
    display: block;

    filter: brightness(0)
  }
.tab {
    flex: 1; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    gap: 5px;
    color: #000000; 
    font-size: 10px; 
    letter-spacing: .04em;
    -webkit-tap-highlight-color: transparent; 
    transition: color .25s; 
    position: relative;
    text-decoration: none; /* Убирает подчеркивание у ссылок, если оно есть */
  }
  .tab svg{ width:21px; height:21px; fill:none; filter: brightness(0); stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
  .tab.is-active{ color:var(--olive-deep); }
  .tab.is-active::before{
    content:''; position:absolute; top:0; left:50%; translate:-50% 0;
    width:26px; height:2px; background:var(--olive); border-radius:0 0 2px 2px;
  }
  /* центральная кнопка «Бронь» */
  .tab--accent{ color:var(--ink); }
  .tab--accent .tab__pill{
    display:grid; place-items:center; width:46px; height:46px; margin-top:-20px;
    background:var(--ink); color:var(--stone); border-radius:50%;
    border:4px solid var(--stone); box-shadow:0 8px 20px -8px rgba(35,35,31,.6);
    transition:background .3s, transform .3s;
  }
  .tab--accent .tab__pill svg{ width:20px; height:20px; }
  .tab--accent.is-active .tab__pill, .tab--accent:active .tab__pill{ background:var(--olive-deep); transform:scale(.96); }
  .tab--accent.is-active::before{ display:none; }
  .tab--accent.is-active{ color:var(--olive-deep); }

  .lb__nav{ font-size:38px; padding:10px 12px; }
}

/* На самых узких экранах «WhatsApp» упирается в рамку — иконки убираем,
   текста достаточно. */
@media (max-width:359px){
  .confirm__btn{ font-size:13px; gap:0; padding:10px 4px; }
  .confirm__btn svg{ display:none; }
}

@media (max-width:420px){
  /* на узких экранах три кружка связи не должны толкать логотип */
  .header__actions{ gap:7px; }
  .header__ico{ width:36px; height:36px; }
  .header__ico svg{ width:16px; height:16px; }
  .logo__word{ font-size:18px; }
  .gallery__grid{ grid-template-columns:1fr; }
  .hero__cta{ flex-direction:column; }
  .hero__cta .btn{ width:100%; }
  .socials{ gap:8px; }
  .social{ padding:10px 13px; font-size:11px; }
}

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