/* ═══════════ «Котелок» — общие стили всех страниц ═══════════ */

/* ─────────── ТОКЕНЫ ───────────
   Чёрный и красный — из логобука. Жёлтый живёт только в логотипе. */
:root{
  --ink:#231f20;
  --ink-2:#57524e;
  --ink-3:#736e68;
  --paper:#f7f5f1;
  --paper-2:#eeeae3;      /* плашки под будущие фото */
  --rule:#e0dbd3;
  --red:#c13039;          /* действия заказа и метка акции */
  --red-deep:#9c262e;
  --shell:min(1200px, calc(100vw - 48px));
  --header-h:72px;
  --display:"Geologica", system-ui, sans-serif;
  --text:"Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23736e68' stroke-width='1.2'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--text); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:var(--display); font-weight:300; letter-spacing:-.025em; margin:0}
h1{font-size:clamp(2.7rem,5.8vw,4.6rem); line-height:1.04}
h2{font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.08}
h3,h4{margin:0; font-size:1rem; font-weight:500; line-height:1.35}
p{margin:0 0 1rem}
a{color:inherit}
img{max-width:100%; display:block}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.shell{width:var(--shell); margin-inline:auto}
.section{padding-top:clamp(80px,11vw,144px)}
.lead{font-size:1.06rem; color:var(--ink-2); max-width:56ch}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.link{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.28em; text-decoration-color:var(--rule);
  transition:text-decoration-color .15s ease}
.link:hover{text-decoration-color:currentColor}
.note{margin:4.5rem 0 0; font-size:.85rem; color:var(--ink-3)}

/* ─────────── кнопки и поля ─────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  min-height:48px; padding:0 1.6rem; border:1px solid var(--ink); border-radius:0;
  background:transparent; color:var(--ink); font-weight:500; font-size:.95rem; text-decoration:none;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn-ink{background:var(--ink); color:var(--paper)}
.btn-ink:hover{background:#3b3536; border-color:#3b3536}
.btn-red{background:var(--red); border-color:var(--red); color:#fff}
.btn-red:hover{background:var(--red-deep); border-color:var(--red-deep); color:#fff}
.btn-wide{width:100%}
.btn + .btn-wide{margin-top:.6rem}

select{
  -webkit-appearance:none; appearance:none; width:100%; height:44px; padding:0 2.2rem 0 .8rem;
  border:1px solid var(--rule); border-radius:0; font-size:.92rem;
  background:transparent var(--chevron) no-repeat right .85rem center;
  transition:border-color .15s ease;
}
select:hover{border-color:var(--ink-3)}
input:focus-visible, select:focus-visible, textarea:focus-visible{outline:1px solid var(--ink); outline-offset:0; border-color:var(--ink)}

/* ─────────── шапка ─────────── */
/* шапка всегда вверху экрана: sticky (для Safari до iOS 13 — с приставкой -webkit-) */
.header{position:-webkit-sticky; position:sticky; top:0; z-index:60; height:var(--header-h);
  background:rgba(247,245,241,.96); border-bottom:1px solid var(--rule)}
.header-in{height:100%; display:flex; align-items:center; gap:2.2rem}
.brand{flex:none; margin-right:auto; line-height:0}   /* логотип не сжимается, когда кнопкам тесно */
.brand img{height:46px; width:auto}
.nav{display:flex; gap:1.8rem}
.nav a{text-decoration:none; font-size:.93rem; color:var(--ink-2); transition:color .15s ease; white-space:nowrap;
  text-underline-offset:.45em; text-decoration-thickness:1px}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink); text-decoration-line:underline}
.header-phone{text-decoration:none; font-size:.93rem; white-space:nowrap}
.cart-btn{display:inline-flex; align-items:center; gap:.55rem; height:40px; padding:0 1rem;
  border:1px solid var(--ink); background:transparent; font-size:.93rem;
  transition:background-color .15s ease, color .15s ease}
.cart-btn:hover{background:var(--ink); color:var(--paper)}
.cart-count{font-variant-numeric:tabular-nums; color:var(--ink-3)}
.cart-btn.has-items .cart-count{color:var(--red)}
.cart-btn:hover .cart-count{color:inherit}
.cart-ico{display:none; flex:none}
/* бронь — тёмная кнопка в шапке, видна на всех страницах */
.book-btn{display:inline-flex; align-items:center; gap:.5rem; height:40px; padding:0 1rem; border:1px solid var(--ink);
  background:var(--ink); color:var(--paper); font-size:.93rem; text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease}
.book-btn:hover{background:#3b3536; border-color:#3b3536}
.book-short{display:none}
.ext{font-size:.8em; opacity:.7}
.burger{display:none; background:none; border:0; padding:.6rem; margin-right:-.6rem; line-height:0}

/* ─────────── главная: первый экран ─────────── */
.hero{padding-top:clamp(40px,6vw,80px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(32px,5vw,80px); align-items:center}
.hero-meta{display:flex; flex-wrap:wrap; gap:.3rem 1.6rem; margin:0 0 2.2rem; font-size:.9rem; color:var(--ink-3)}
.hero-text{margin:1.8rem 0 2.4rem; font-size:1.08rem; color:var(--ink-2); max-width:40ch}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.8rem}
.booking-note{margin:1rem 0 0; font-size:.85rem; color:var(--ink-3)}
/* В .hero-photo — видео с кухни (.hero-video) или фото (.hero-img), оба ложатся на весь блок */
.hero-photo{position:relative; margin:0; overflow:hidden; background:var(--paper-2);
  height:clamp(420px, calc(100vh - var(--header-h) - 120px), 680px);
  height:clamp(420px, calc(100svh - var(--header-h) - 120px), 680px);
  display:grid; place-items:center}
.hero-photo .hero-logo{width:44%; height:auto}
.hero-photo .hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* ─────────── главная: акция ─────────── */
.promo{padding-top:clamp(64px,9vw,112px)}
.promo-in{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto; gap:1.6rem clamp(24px,4vw,56px); align-items:end;
  padding:2.4rem 0; border-top:1px solid var(--ink); border-bottom:1px solid var(--rule)}
.promo-tag{display:inline-block; margin:0 0 1rem; padding:.2rem .6rem; border:1px solid var(--red); color:var(--red);
  font-size:.8rem; line-height:1.4}
.promo h2{font-size:clamp(1.6rem,2.6vw,2.1rem); margin-bottom:.7rem}
.promo-about p:last-child{margin:0; color:var(--ink-2); max-width:46ch}
.promo-pick label{display:block; font-size:.82rem; color:var(--ink-3); margin-bottom:.4rem}
.promo-buy{display:flex; align-items:center; gap:1.6rem}
.promo-price{font-family:var(--display); font-weight:300; font-size:2.2rem; line-height:1; letter-spacing:-.02em; white-space:nowrap}

/* ─────────── места под фотографии ───────────
   Когда появится фото: раскомментировать <img> внутри .photo-slot — подпись-заглушка спрячется сама */
.photo-slot{position:relative; margin:0; overflow:hidden; background:var(--paper-2); min-height:180px}
.photo-slot img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.photo-slot figcaption{position:absolute; left:1rem; right:1rem; bottom:.85rem; font-size:.8rem; line-height:1.35; color:#9c958c}
.photo-slot img ~ figcaption{display:none}

/* ─────────── главная: о кафе ─────────── */
.home-about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:center}
.home-about h2{margin-bottom:1.6rem}
.home-about-actions{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.8rem; margin-top:2rem}
.home-photos{display:grid; grid-template-columns:1.3fr 1fr; grid-template-rows:1fr 1fr; gap:.75rem; height:clamp(360px,40vw,540px)}
.home-photos .photo-slot:first-child{grid-row:1 / 3}

/* ─────────── главная: указатель разделов ─────────── */
.index-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.index-link{display:grid; grid-template-columns:minmax(180px,.8fr) minmax(0,1.4fr) auto; gap:1rem 2rem; align-items:baseline;
  padding:1.6rem 0; border-bottom:1px solid var(--rule); text-decoration:none}
.index-name{font-family:var(--display); font-weight:300; font-size:clamp(1.6rem,2.8vw,2.2rem); letter-spacing:-.02em; line-height:1.15}
.index-desc{color:var(--ink-2)}
.index-arrow{color:var(--ink-3); transition:transform .2s ease, color .2s ease}
.index-link:hover .index-arrow{transform:translateX(4px); color:var(--ink)}

/* ─────────── внутренние страницы ─────────── */
.page-head{padding-top:clamp(48px,7vw,96px)}
.page-head .lead{margin:1.2rem 0 0}
.page-head-row{display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; flex-wrap:wrap}

/* ─────────── меню ─────────── */
.search{position:relative; width:min(320px,100%)}
.search input{width:100%; height:44px; padding:0 2.2rem 0 1.9rem; border:0; border-bottom:1px solid var(--ink);
  border-radius:0; background:transparent; -webkit-appearance:none; appearance:none}
.search input::placeholder{color:var(--ink-3)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search input:focus-visible{outline:none; box-shadow:0 1px 0 var(--ink)}
.search svg{position:absolute; left:0; top:50%; transform:translateY(-50%); pointer-events:none}
.search-clear{position:absolute; right:-.5rem; top:50%; transform:translateY(-50%);
  background:none; border:0; padding:.5rem; line-height:0}
.search-clear[hidden]{display:none}

/* разделы — колонкой слева, как оглавление */
.menu-layout{display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:start; margin-top:3.4rem}
.cats{position:sticky; top:calc(var(--header-h) + 28px); display:flex; flex-direction:column; border-left:1px solid var(--rule)}
.cat{text-align:left; background:none; border:0; border-left:1px solid transparent; margin-left:-1px;
  padding:.55rem 0 .55rem 1.1rem; color:var(--ink-3); font-size:.95rem; line-height:1.35; transition:color .15s ease}
.cat:hover{color:var(--ink)}
.cat[aria-selected="true"]{color:var(--ink); border-left-color:var(--ink)}
.cat:focus-visible{outline-offset:-2px}

#filterPane > :not(.sr-only):last-child{margin-bottom:2.4rem}
.cat-note{margin:0; font-size:.88rem; color:var(--ink-3)}
/* фильтр по бульонам внутри супов */
.subcats{display:flex; flex-wrap:wrap; gap:.4rem 1.6rem}
.cat-note + .subcats{margin-top:1rem}
.subcat{background:none; border:0; padding:.2rem 0; font-size:.88rem; color:var(--ink-3);
  text-decoration:underline; text-decoration-color:transparent; text-underline-offset:.4em; text-decoration-thickness:1px;
  transition:color .15s ease, text-decoration-color .15s ease}
.subcat:hover{color:var(--ink)}
.subcat[aria-pressed="true"]{color:var(--ink); text-decoration-color:currentColor}
.group-title{font-family:var(--display); font-weight:300; font-size:1.5rem; letter-spacing:-.01em; line-height:1.25; margin:0 0 1.8rem}

.dishes{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3.4rem 2rem}
.dish{display:flex; flex-direction:column}
/* фото блюд скруглены (карточка, окно блюда, корзина) — остальной сайт с прямыми углами */
.dish-media{position:relative; margin:0 0 1.15rem; aspect-ratio:4/5; overflow:hidden; background:var(--paper-2); border-radius:16px}
.dish-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.plate{position:absolute; left:1.1rem; right:1.1rem; bottom:1rem;
  font-family:var(--display); font-weight:300; font-size:1.25rem; line-height:1.15; letter-spacing:-.01em; color:#b3aca3}
.dish-name{font-size:1.02rem}
.dish-desc{font-size:.92rem; color:var(--ink-2); margin:.35rem 0 0}
.dish-meta{font-size:.84rem; color:var(--ink-3); margin:.45rem 0 0}
.opt{margin-top:1rem}
.opt label{display:block; font-size:.8rem; color:var(--ink-3); margin-bottom:.35rem}
.dish-foot{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:auto; padding-top:1.3rem}
.price{font-family:var(--display); font-weight:400; font-size:1.2rem; font-variant-numeric:tabular-nums; white-space:nowrap}
.add{height:38px; padding:0 1rem; border:1px solid var(--ink); background:transparent; font-size:.88rem; white-space:nowrap;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease}
.add:hover{background:var(--ink); color:var(--paper)}
/* счётчик вместо кнопки, когда блюдо уже в корзине */
.stepper{display:inline-flex; align-items:center; height:38px; background:var(--red); color:#fff}
.stepper button{width:36px; height:100%; border:0; background:none; color:#fff; font-size:1.1rem; line-height:1;
  transition:background-color .15s ease}
.stepper button:hover{background:var(--red-deep)}
.stepper span{min-width:26px; text-align:center; font-size:.95rem; font-variant-numeric:tabular-nums}
.stepper button:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* стоп-лист: блюдо видно, но заказать нельзя */
.off-label{display:inline-flex; align-items:center; height:38px; padding:0 .9rem; border:1px dashed var(--ink-3);
  color:var(--ink-3); font-size:.86rem; white-space:nowrap}
.dish.is-off .dish-media, .dish.is-off .dish-name, .dish.is-off .price,
.extra.is-off .dish-name, .extra.is-off .price, .drink.is-off .drink-name{opacity:.45}
.btn[disabled], .add[disabled]{opacity:.45; cursor:not-allowed}
.btn[disabled]:hover{background:inherit}
.btn-red[disabled]:hover{background:var(--red); border-color:var(--red)}

/* кадр-кнопка и «Подробнее» у блюд с описанием */
button.dish-media{display:block; width:100%; padding:0; border:0; cursor:pointer; text-align:left}
button.dish-media .plate{transition:color .2s ease}
button.dish-media:hover .plate{color:var(--ink-3)}
.more{align-self:flex-start; margin-top:.3rem; padding:0; border:0; background:none; font-size:.86rem; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:.28em; text-decoration-color:var(--rule)}
.more:hover{color:var(--ink); text-decoration-color:currentColor}

/* гарниры и добавки — списком, без фото */
.extras{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.dishes + .extras, .dishes + .drinks, .extras + .drinks{margin-top:3.4rem}
.extra{display:grid; grid-template-columns:minmax(0,1fr) 64px 90px auto; gap:1rem 1.4rem; align-items:center;
  padding:1.15rem 0; border-bottom:1px solid var(--rule)}
.extra .dish-desc{margin:.15rem 0 0}
.extra .opt{margin-top:.6rem; max-width:240px}
.extra .opt select{height:36px; font-size:.86rem}
.extra-weight{font-size:.86rem; color:var(--ink-3)}
.extra .price{text-align:right}
.no-results{color:var(--ink-2)}

/* ─────────── бар ─────────── */
.bar-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(40px,6vw,96px); align-items:start; margin-top:3.4rem}
.bar-block + .bar-block{margin-top:3.6rem}
.bar-title{font-family:var(--display); font-weight:300; font-size:1.5rem; letter-spacing:-.01em; line-height:1.25; margin-bottom:1.1rem}
.drinks{list-style:none; margin:0; padding:0; border-top:1px solid var(--ink)}
.drink{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.7rem 1.2rem; align-items:center;
  padding:.95rem 0; border-bottom:1px solid var(--rule)}
.drink-name{font-size:1rem}
.drink-note{font-weight:400; font-size:.86rem; color:var(--ink-3)}
.drink-desc{margin:.2rem 0 0; font-size:.86rem; color:var(--ink-3)}
.drink-buy{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.5rem}
.drink-info{font-family:var(--display); font-size:1.05rem; white-space:nowrap; font-variant-numeric:tabular-nums}
.size{display:inline-flex; align-items:center; gap:.6rem; height:36px; padding:0 .75rem 0 .85rem;
  border:1px solid var(--rule); background:none; font-size:.82rem; color:var(--ink-3); white-space:nowrap;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease}
.size-price{font-family:var(--display); font-size:.98rem; color:var(--ink); font-variant-numeric:tabular-nums}
.size-mark{color:var(--ink-3)}
.size:hover{border-color:var(--ink)}
.size:hover .size-mark{color:var(--ink)}
.size.in-cart{background:var(--red); border-color:var(--red); color:rgba(255,255,255,.82)}
.size.in-cart .size-price, .size.in-cart .size-mark{color:#fff}
.size.in-cart:hover{background:var(--red-deep); border-color:var(--red-deep)}
.size-group{display:inline-flex}
.size-dec{width:34px; height:36px; border:0; border-right:1px solid rgba(255,255,255,.35); background:var(--red); color:#fff;
  font-size:1.05rem; line-height:1; transition:background-color .15s ease}
.size-dec:hover{background:var(--red-deep)}

/* ─────────── о кафе: визитка ─────────── */
.vcard{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,6vw,96px); align-items:stretch}
.vcard-logo{width:88px; height:auto; margin-bottom:1.6rem}
.vcard-tag{margin:.8rem 0 0; font-size:1.1rem; color:var(--ink-2)}
.vcard-facts{margin:2.2rem 0 0; border-top:1px solid var(--ink)}
.vcard-facts div{display:grid; grid-template-columns:110px minmax(0,1fr); gap:1rem; padding:.8rem 0; border-bottom:1px solid var(--rule)}
.vcard-facts dt{color:var(--ink-3); font-size:.88rem}
.vcard-facts dd{margin:0}
.vcard-actions{display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2rem}
.vcard-photo{min-height:520px}

/* текст о кафе: заголовок слева, текст справа */
.story{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:1.2rem clamp(32px,6vw,96px);
  padding-top:2rem; margin-top:clamp(64px,9vw,112px); border-top:1px solid var(--ink)}
.story h2{font-size:clamp(1.6rem,2.6vw,2.1rem); line-height:1.15}
.story-text p{font-size:1.04rem; color:var(--ink-2); max-width:60ch}
.principles{list-style:none; margin:1.6rem 0 0; padding:0; border-top:1px solid var(--rule)}
.principles li{padding:1rem 0; border-bottom:1px solid var(--rule); color:var(--ink-2)}
.principles b{display:block; font-weight:500; color:var(--ink); margin-bottom:.2rem}
.signature{margin-top:1.6rem; color:var(--ink) !important}
.signature span{display:block; margin-top:.6rem; font-size:.92rem; color:var(--ink-3)}

/* галерея на 5 фото: большое слева, четыре справа */
.gallery{display:grid; grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2, clamp(180px,20vw,280px)); gap:.75rem;
  margin-top:clamp(64px,9vw,112px)}
.gallery .photo-slot:first-child{grid-row:1 / 3}

/* ─────────── мероприятия ─────────── */
.event-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(32px,6vw,96px); align-items:start; margin-top:3.4rem}
.event-form{border-top:1px solid var(--ink); padding-top:.4rem}
.field-row{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0 1rem}
.field-row.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.event-form .field input:not([type="radio"]):not([type="checkbox"]){background:#fff}
.choice-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px,1fr)); gap:.5rem}
.choice-row .radio + .radio{margin-top:0}
.fieldset{border:0; padding:0; margin:1.3rem 0 0; min-width:0}
.fieldset legend{padding:0; margin-bottom:.4rem; font-size:.85rem; color:var(--ink-2)}
.field-hint{margin:.35rem 0 0; font-size:.82rem; color:var(--ink-3)}
.event-form .btn-wide{margin-top:1.6rem}
.event-aside .photo-slot{aspect-ratio:4/5; min-height:0}
.event-facts{list-style:none; margin:1.6rem 0 0; padding:0; border-top:1px solid var(--ink)}
.event-facts li{padding:.85rem 0; border-bottom:1px solid var(--rule); color:var(--ink-2); font-size:.95rem}
.event-facts b{display:block; font-weight:500; color:var(--ink)}
.event-done{outline:none}

/* ─────────── контакты ─────────── */
.contacts-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2.4rem 2rem; margin-top:3.2rem}
.contact{border-top:1px solid var(--ink); padding-top:1.1rem}
.contact h2{font-family:var(--text); font-size:.85rem; font-weight:400; letter-spacing:0; color:var(--ink-3); margin-bottom:.7rem}
.contact p{margin:0; font-size:.95rem; color:var(--ink-2)}
.contact p a{color:var(--ink)}
.contact-main{display:block; color:var(--ink); margin-bottom:.3rem}
.map{margin-top:3.6rem; aspect-ratio:16/7; background:var(--paper-2); border:1px solid var(--rule)}
.map iframe{display:block; width:100%; height:100%; border:0}

/* ─────────── подвал ─────────── */
.footer{margin-top:clamp(96px,12vw,160px); border-top:1px solid var(--rule); padding:3.4rem 0 2rem; font-size:.9rem; color:var(--ink-2)}
.footer a{text-decoration:none}
.footer a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:.28em}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.4rem; margin-bottom:3rem}
.footer-logo{height:64px; width:auto; margin-bottom:1.2rem}
.footer h2{font-family:var(--text); font-size:.85rem; font-weight:400; letter-spacing:0; color:var(--ink-3); margin-bottom:.8rem}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:.45rem}
.footer-bottom{border-top:1px solid var(--rule); padding-top:1.3rem; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.82rem; color:var(--ink-3)}

/* ─────────── корзина ─────────── */
.overlay{position:fixed; inset:0; background:rgba(35,31,32,.28); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .2s ease}
.overlay.open{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; bottom:0; width:min(440px,100%); z-index:100;
  background:var(--paper); border-left:1px solid var(--rule); display:flex; flex-direction:column;
  transform:translateX(100%); visibility:hidden;
  transition:transform .28s cubic-bezier(.3,0,.2,1), visibility 0s linear .28s}
.drawer.open{transform:none; visibility:visible; transition:transform .28s cubic-bezier(.3,0,.2,1)}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:1.2rem 1.6rem; border-bottom:1px solid var(--rule)}
.drawer-head h2{font-size:1.5rem}
.drawer-title{display:flex; align-items:center; gap:.3rem; min-width:0}
.drawer-back{margin:0 0 0 -.6rem; color:var(--ink)}
.drawer-back[hidden]{display:none}
.icon-btn{background:none; border:0; padding:.5rem; margin-right:-.5rem; line-height:0; transition:background-color .15s ease}
.icon-btn:hover{background:var(--paper-2)}
.drawer-body{flex:1; overflow-y:auto; padding:0 1.6rem 1.4rem}
.drawer-foot{border-top:1px solid var(--rule); padding:1.3rem 1.6rem 1.6rem}
.line-item{display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:1rem; padding:1.2rem 0; border-bottom:1px solid var(--rule)}
.line-item:last-child{border-bottom:0}
.line-item.no-thumb{grid-template-columns:minmax(0,1fr) auto}   /* напитки и блюда без фото — без картинки */
.line-thumb{position:relative; width:64px; height:64px; overflow:hidden; background:var(--paper-2); border-radius:10px}
.line-thumb img{width:100%; height:100%; object-fit:cover}
.line-name{font-weight:500; font-size:.95rem; line-height:1.3}
.line-price{font-size:.84rem; color:var(--ink-3); margin-top:.2rem}
.qty{display:inline-flex; align-items:center; border:1px solid var(--rule); margin-top:.6rem}
.qty button{width:32px; height:32px; border:0; background:none; font-size:1rem; line-height:1; transition:background-color .15s ease}
.qty button:hover{background:var(--paper-2)}
.qty span{min-width:26px; text-align:center; font-size:.9rem; font-variant-numeric:tabular-nums}
.line-sum{font-family:var(--display); white-space:nowrap; font-variant-numeric:tabular-nums}
/* добавки под своим блюдом */
.line-addons{list-style:none; margin:.55rem 0 0; padding:.1rem 0 0 .8rem; border-left:1px solid var(--rule)}
.line-addons li{display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:.6rem; align-items:center;
  font-size:.86rem; color:var(--ink-2); padding:.15rem 0}
.line-addons li span:nth-child(2){font-variant-numeric:tabular-nums; color:var(--ink-3)}
.line-x{width:26px; height:26px; border:0; background:none; color:var(--ink-3); font-size:1rem; line-height:1}
.line-x:hover{color:var(--ink); background:var(--paper-2)}
.line-remove{margin-top:.6rem; padding:0; border:0; background:none; color:var(--ink-2); font-size:.86rem;
  text-decoration:underline; text-underline-offset:.28em}
.line-warn{margin:.5rem 0 0; font-size:.84rem; color:var(--red)}
.line-item.has-problem .line-name{color:var(--ink-3)}
.consent{margin:1.2rem 0 0; font-size:.8rem; color:var(--ink-3)}
.totals{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:1rem; color:var(--ink-2)}
.totals .price{font-size:1.5rem; color:var(--ink)}
.pickup-note{font-size:.82rem; color:var(--ink-3); margin:.8rem 0 0; text-align:center}
.cart-empty{text-align:center; padding:3.2rem 0; color:var(--ink-2)}
.cart-empty img{width:120px; height:auto; margin:0 auto 1.6rem}
.back-link{background:none; border:0; padding:0; margin-top:1.4rem; color:var(--ink-2); font-size:.9rem;
  text-decoration:underline; text-underline-offset:.28em}

.field{margin-top:1.3rem; display:flex; flex-direction:column; gap:.4rem}
.field label, .field legend{font-size:.85rem; color:var(--ink-2)}
.field .opt-note{color:var(--ink-3)}
.field input:not([type="radio"]):not([type="checkbox"]), .field textarea{width:100%; height:46px; padding:0 .85rem; border:1px solid var(--rule); border-radius:0; background:#fff;
  transition:border-color .15s ease}
.field textarea{height:auto; min-height:84px; padding:.7rem .85rem; resize:vertical}
.field select{background-color:#fff}
.field input:hover, .field textarea:hover{border-color:var(--ink-3)}
.field.invalid input{border-color:var(--red)}
.err{font-size:.82rem; color:var(--red)}
.err:empty{display:none}

/* способ оплаты */
.pay-choice{border:0; padding:0; margin:1.3rem 0 0; min-width:0}
.pay-choice legend{padding:0; margin-bottom:.4rem}
.radio{display:flex; gap:.8rem; align-items:flex-start; padding:.85rem .95rem; border:1px solid var(--rule); background:#fff; cursor:pointer;
  transition:border-color .15s ease}
.radio + .radio{margin-top:.5rem}
.radio:hover{border-color:var(--ink-3)}
.radio:has(input:checked){border-color:var(--ink)}
.radio input{accent-color:var(--ink); margin:.25rem 0 0; flex:none}
.radio b{display:block; font-weight:500; font-size:.93rem}
.radio small{display:block; font-size:.82rem; color:var(--ink-3)}
.form-err{margin:1.2rem 0 0; padding:.8rem .95rem; border:1px solid var(--red); color:var(--red); font-size:.88rem}

.result{padding-top:1.8rem}
.result-num{font-family:var(--display); font-weight:300; font-size:2.4rem; letter-spacing:-.02em; line-height:1.1}
.result p{color:var(--ink-2); margin:.7rem 0 0}
.result dl{display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.4rem; margin:1.6rem 0 2rem; padding-top:1.4rem;
  border-top:1px solid var(--rule); font-size:.95rem}
.result dt{color:var(--ink-3)}
.result dd{margin:0}
.test-tag{display:inline-block; margin-bottom:1rem; padding:.2rem .6rem; border:1px dashed var(--ink-3); color:var(--ink-3); font-size:.8rem}

/* мобильная панель корзины */
.mobile-bar{position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  padding:.75rem 16px calc(.75rem + env(safe-area-inset-bottom)); background:var(--paper); border-top:1px solid var(--rule)}
.mobile-bar button{width:100%; height:50px; display:flex; align-items:center; justify-content:space-between;
  padding:0 1.2rem; background:var(--ink); color:var(--paper); border:0; font-size:.95rem}

/* ─────────── окно: описание блюда и добавки ─────────── */
.modal{width:min(560px, calc(100vw - 32px)); max-height:calc(100vh - 48px); padding:0; border:1px solid var(--rule);
  background:var(--paper); color:var(--ink); overflow:hidden; flex-direction:column}
.modal[open]{display:flex}
.modal::backdrop{background:rgba(35,31,32,.35)}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1.3rem 1.6rem 1rem;
  border-bottom:1px solid var(--rule)}
.modal-head h2{font-size:1.5rem; line-height:1.2}
.modal-body{overflow-y:auto; padding:1.3rem 1.6rem 1.6rem}
.modal-media{position:relative; margin:0 0 1rem; aspect-ratio:4/3; overflow:hidden; background:var(--paper-2); border-radius:14px}
.modal-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.modal-text{margin:.8rem 0 0; color:var(--ink-2)}
.modal-body .dish-foot{padding-top:1.4rem}
.added-line{margin:0 0 1rem; padding:.8rem .95rem; background:#fff; border:1px solid var(--rule); font-size:.92rem}
.undo{margin-left:.4rem; padding:0; border:0; background:none; color:var(--ink); text-decoration:underline; text-underline-offset:.28em; font-size:.92rem}
.modal-body .cat-note{margin-bottom:.8rem}
.modal-sub{margin:1.4rem 0 .7rem; font-size:.85rem; font-weight:400; color:var(--ink-3)}
.modal-sub + .extras, .modal-sub + .cat-note + .extras{margin-top:0}
.modal-body .extras + .drinks{margin-top:0; border-top:0}
.added-addons{display:block; margin-top:.25rem; font-size:.84rem; color:var(--ink-3)}
.modal-body .drink{grid-template-columns:minmax(0,1fr) auto}
.modal-body .extra{grid-template-columns:minmax(0,1fr) auto auto; gap:.6rem 1rem}
.modal-body .extra-weight{display:none}
.modal-actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem}
.modal-actions .btn{flex:1 1 180px}

/* ─────────── плашка «Добавлено · Отменить» ─────────── */
.toast{position:fixed; left:24px; bottom:24px; z-index:80; display:flex; align-items:center; gap:1.2rem;
  max-width:min(460px, calc(100vw - 32px)); padding:.85rem 1.1rem; background:var(--ink); color:var(--paper); font-size:.92rem}
.toast[hidden]{display:none}
.toast button{flex:none; padding:0; border:0; background:none; color:var(--paper); font-size:.92rem;
  text-decoration:underline; text-underline-offset:.28em}
.toast button:focus-visible{outline-color:var(--paper)}

/* ─────────── адаптив ─────────── */
@media (max-width:1100px){
  .header-in{gap:1.6rem}
  .nav{gap:1.3rem}
  .header-phone{display:none}
  .dishes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-photo{height:auto; aspect-ratio:4/3}
  .promo-in{grid-template-columns:minmax(0,1fr) auto}
  .promo-about{grid-column:1 / -1}
  .index-link{grid-template-columns:minmax(0,1fr) auto}
  .index-desc{grid-column:1; grid-row:2; font-size:.95rem}
  .index-arrow{grid-column:2; grid-row:1}
  .menu-layout{grid-template-columns:1fr; margin-top:2.6rem}
  .cats{position:static; flex-direction:row; gap:1.5rem; overflow-x:auto; border-left:0; border-bottom:1px solid var(--rule); scrollbar-width:none}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:none; white-space:nowrap; border-left:0; margin-left:0; padding:0 0 1rem;
    border-bottom:1px solid transparent; margin-bottom:-1px}
  .cat[aria-selected="true"]{border-bottom-color:var(--ink)}
  .bar-grid{grid-template-columns:1fr}
  .bar-col + .bar-col{margin-top:3.6rem}
  .book-long{display:none}
  .book-short{display:inline}
  .home-about-grid, .vcard, .story, .event-grid{grid-template-columns:1fr}
  .event-aside{order:-1}
  .event-aside .photo-slot{aspect-ratio:16/9}
  .vcard-photo{min-height:0; aspect-ratio:4/3}
  .gallery{grid-template-columns:1fr 1fr; grid-template-rows:none; grid-auto-rows:clamp(160px,34vw,260px)}
  .gallery .photo-slot:first-child{grid-row:auto; grid-column:1 / -1}
  .contacts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .map{aspect-ratio:4/3}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > :first-child{grid-column:1 / -1}
}
/* меню разделов прячется в кнопку уже с 900 px: на планшете пункты в шапку не помещаются и переносятся */
@media (max-width:900px){
  .nav{position:absolute; top:var(--header-h); left:0; right:0; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule); padding:.4rem max(16px, calc((100vw - var(--shell)) / 2)) 1rem; display:none;
    max-height:calc(100vh - var(--header-h)); overflow-y:auto}
  .nav.open{display:flex}
  .nav a{padding:.9rem 0; border-bottom:1px solid var(--rule); font-size:1rem; color:var(--ink)}
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]{text-decoration:none; font-weight:500}
  .burger{display:block}
  .header-in{gap:1rem}
}
@media (max-width:720px){
  .brand img{height:40px}
  .mobile-bar.show{display:block}
  body.has-cart{padding-bottom:80px}
  body.has-cart .toast{bottom:88px}
  .toast{left:16px; right:16px; max-width:none; justify-content:space-between}
  .book-btn{padding:0 .8rem}
  .promo-in{grid-template-columns:1fr}
  .promo-buy{justify-content:space-between}
  .search{width:100%}
  .contacts-grid, .footer-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--shell:calc(100vw - 32px)}
  .dishes{grid-template-columns:1fr; gap:2.8rem}
  .dish-media{aspect-ratio:4/3}
  .extra{grid-template-columns:auto minmax(0,1fr) auto; gap:.6rem 1rem}
  .extra-text{grid-column:1 / -1}
  .extra .price{text-align:left}
  .drink{grid-template-columns:1fr}
  .drink-buy{justify-content:flex-start}
  .size, .size-dec{height:40px}
  .home-photos{height:auto; grid-template-rows:repeat(2, 160px)}
  .modal-head{padding:1.1rem 16px .9rem}
  .modal-body{padding:1.1rem 16px 1.4rem}
  .vcard-facts div{grid-template-columns:90px minmax(0,1fr)}
  .field-row, .field-row.two{grid-template-columns:1fr}
  .drawer-head, .drawer-foot{padding-inline:16px}
  .drawer-body{padding-inline:16px}
}
/* самые узкие телефоны (320–400 px): логотип, «Бронь», корзина и меню в одну строку без наложений */
@media (max-width:400px){
  .header-in{gap:.55rem}
  .brand img{height:36px}
  .book-btn{padding:0 .65rem; gap:.35rem}
  .cart-btn{padding:0 .65rem; gap:.35rem}
  .cart-label{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}   /* диктор читает */
  .cart-ico{display:block}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important}
}

/* ─────────── СТАТУС ЗАКАЗА: экран корзины после оплаты и страница order.html ───────────
   Точка у заголовка: серая — ждёт подтверждения, янтарная — готовится, зелёная — готов, красная — отменён. */
#orderPage{max-width:640px; margin-top:2.2rem}
.order-status-label{color:var(--ink-3); font-size:.9rem}
.order-status-title{display:flex; align-items:center; gap:.6rem; margin:.2rem 0 .6rem;
  font-family:var(--display); font-weight:300; font-size:clamp(1.9rem,4vw,2.6rem); line-height:1.1; letter-spacing:-.02em}
.order-status-title::before{content:""; flex:none; width:.45em; height:.45em; border-radius:50%; background:var(--ink-3)}
.order-status[data-state="accepted"] .order-status-title::before{background:#c98a14}
.order-status[data-state="ready"] .order-status-title::before{background:#2f8a4e}
.order-status[data-state="canceled"] .order-status-title::before{background:var(--red)}
.order-status-text{color:var(--ink-2)}
.order-status dl{display:grid; grid-template-columns:auto 1fr; gap:.6rem 1.4rem; margin:1.6rem 0; padding-top:1.4rem; border-top:1px solid var(--rule)}
.order-status dt{color:var(--ink-3)}
.order-status dd{margin:0}
.order-lines{list-style:none; margin:0 0 1.6rem; padding:0}
.order-lines li{padding:.55rem 0; border-bottom:1px solid var(--rule)}
.order-lines span{color:var(--ink-2); font-size:.9rem}
.order-status-note{color:var(--ink-3); font-size:.9rem}
/* напоминание в корзине о заказе, который ещё в работе, пока гость собирает новый */
.order-reminder{margin:0 0 1rem; padding:.7rem 0; border-bottom:1px solid var(--rule); color:var(--ink-2); font-size:.9rem}

/* видео на первом экране вертикальное (снято на телефон): на узком экране блок тоже вертикальный, чтобы борщ был виден целиком */
@media (max-width:900px){
  .hero-photo.hero-has-video{aspect-ratio:4/5}
}

/* крестик «Скрыть заказ» на надписи о заказе в корзине */
.order-status{position:relative}
.order-status .order-dismiss{position:absolute; top:-.45rem; right:0; color:var(--ink-3)}
.order-status .order-dismiss:hover{color:var(--ink)}
.order-status .order-status-title{padding-right:2.4rem}
.order-reminder{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.order-reminder .order-dismiss{flex:none; margin:-.5rem -.5rem -.5rem 0; color:var(--ink-3)}

/* галочка согласия в формах заказа и заявки */
.check{display:flex; gap:.7rem; align-items:flex-start; font-size:.88rem; color:var(--ink-2); cursor:pointer; line-height:1.45}
.check input{accent-color:var(--ink); width:1.05rem; height:1.05rem; margin:.15rem 0 0; flex:none}
.check a{color:inherit; text-decoration:underline; text-underline-offset:.2em}
.check a:hover{color:var(--ink)}
.field.invalid .check{color:var(--red)}

/* подвал: документы */
.footer-docs{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem}

/* страницы документов: оферта, политика, согласие */
.legal{max-width:760px}
.legal-date{margin:.8rem 0 0; font-size:.85rem; color:var(--ink-3)}
.legal h2{font-family:var(--text); font-size:1.12rem; font-weight:500; letter-spacing:0; margin:2.6rem 0 .8rem}
.legal p, .legal li{color:var(--ink-2); line-height:1.6}
.legal p{margin:0 0 .8rem}
.legal ul{padding-left:1.2rem; margin:0 0 .8rem}
.legal li + li{margin-top:.4rem}
.legal a{color:inherit; text-decoration:underline; text-underline-offset:.2em}
.legal .lead{margin-top:1.4rem}
.legal-card{display:grid; grid-template-columns:minmax(9rem,auto) 1fr; gap:.45rem 1.4rem; margin:1rem 0 0; padding:1.2rem 1.4rem;
  border:1px solid var(--rule); background:#fff; font-size:.92rem}
.legal-card dt{color:var(--ink-3)}
.legal-card dd{margin:0}
@media (max-width:600px){ .legal-card{grid-template-columns:1fr; gap:.15rem} .legal-card dd{margin-bottom:.6rem} }
/* реквизит ещё не заполнен — до запуска таких пометок не должно остаться */
mark.todo{background:#fff1a8; color:#5a4a00; padding:0 .2em}

/* поле даты в заявке на мероприятие: маска __.__.____ и мини-календарь */
.date-box{position:relative}
.event-form .date-box input{padding-right:3rem; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.date-btn{position:absolute; top:0; right:0; width:46px; height:46px; display:grid; place-items:center;
  border:0; background:none; color:var(--ink-2); cursor:pointer}
.date-btn:hover, .date-btn[aria-expanded="true"]{color:var(--ink); background:var(--paper-2)}
.cal{position:absolute; z-index:20; top:calc(100% + 6px); left:0; width:min(19rem, calc(100vw - 32px));
  padding:.9rem; background:#fff; border:1px solid var(--rule); box-shadow:0 12px 32px rgba(35,31,32,.12)}
.cal[hidden]{display:none}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem}
.cal-title{font-weight:500}
.cal-nav{width:36px; height:36px; border:0; background:none; font-size:1.3rem; line-height:1; color:var(--ink); cursor:pointer}
.cal-nav:hover:not(:disabled){background:var(--paper-2)}
.cal-nav:disabled{color:var(--rule); cursor:default}
.cal-week, .cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); text-align:center}
.cal-week{font-size:.75rem; color:var(--ink-3); margin-bottom:.2rem}
.cal-week span{padding:.3rem 0}
.cal-grid button{aspect-ratio:1; border:0; background:none; font:inherit; font-size:.9rem; color:var(--ink); cursor:pointer;
  font-variant-numeric:tabular-nums}
.cal-grid button:hover:not(:disabled){background:var(--paper-2)}
.cal-grid button:disabled{color:#c9c3ba; cursor:default}
.cal-grid button.is-today{box-shadow:inset 0 0 0 1px var(--rule)}
.cal-grid button.is-picked{background:var(--ink); color:var(--paper)}
.cal-note{margin:.6rem 0 0; font-size:.78rem; color:var(--ink-3)}
/* Заказ с сайта выключен (ORDERING_ENABLED = false в app.js): прячем корзину и всё, что с ней связано */
.no-ordering .cart-btn, .no-ordering .mobile-bar, .no-ordering .overlay, .no-ordering .drawer, .no-ordering .toast, .no-ordering .promo{display:none !important}
.size-static{display:inline-flex; align-items:center; gap:.6rem; height:36px; padding:0 .15rem; font-size:.82rem; color:var(--ink-3); white-space:nowrap}
.order-off{max-width:38rem; margin-top:1.2rem}
.order-off p{margin:0 0 1.2rem}
.notice{background:var(--ink); color:var(--paper); font-size:.92rem; padding:.7rem 0; text-align:center}
.notice .shell{padding-top:0; padding-bottom:0}
.notice a{color:inherit; text-decoration:underline; text-underline-offset:.2em}