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

: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__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); }
.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);
}
.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__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; }
.dish__opt{
  display:flex; align-items:baseline; gap:7px;
  font-size:15px; color:var(--ink); white-space:nowrap;
}
.dish__optLabel{ 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; }
.field{ grid-column:span 2; display:flex; flex-direction:column; gap:7px; }
.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; }

/* Канал подтверждения брони: три кнопки-переключателя в ряд.
   Под ними живут обычные 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; }

/* ═══════════ КОНТАКТЫ ═══════════ */
.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; }

/* ═══════════ ПРАВОВЫЕ СТРАНИЦЫ ═══════════ */
.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; }

/* ═══════════ 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); }
}

/* ───── мобильные: шапка → нижняя панель ───── */
@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; }

  /* панель */
  .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);
  }
  .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
    color:var(--ink-2); font-size:10px; letter-spacing:.04em;
    -webkit-tap-highlight-color:transparent; transition:color .25s; position:relative;
  }
  .tab svg{ width:21px; height:21px; fill:none; 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; }
}