﻿:root{--lime:#01514f;--ink:#101110;--paper:#fff;--muted:#73756f;--line:#dedfd8}
.site-header{z-index:30}.logo{white-space:nowrap}.header-inner{width:min(var(--container),calc(100% - 72px))}
/* Заголовки ломаем только по словам: перенос внутри слова читался как ошибка,
   а `text-wrap` держит строки ровными и не оставляет по одной короткой букве. */
h1,h2,h3,h4,.hero-title,.promo-title,.section-title,.dark-cta h2,.booking-aside h2{overflow-wrap:break-word;text-wrap:balance;hyphens:none}
p,li,.lead,.section-note,.card p,.dish-text{text-wrap:pretty}
.page-cover{height:min(54vw,570px);margin-top:34px}.page-cover img{width:100%;height:100%;object-fit:cover}
.format-card-image{height:220px}.format-card-button{margin-top:20px}
.block-button{margin-top:24px}.messages{padding-top:12px}.message{margin:0;padding:13px 17px;background:#e9f7bd;border-left:3px solid #87a91c;font-size:14px}
.muted-inline{font-weight:400;color:var(--muted)}.booking-intro{max-width:650px}.booking-page{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);gap:18px;align-items:start}
.booking-form-card{padding:0;overflow:hidden}.booking-step{display:flex;align-items:center;gap:13px;padding:22px 28px;background:#f1f2ec;border-bottom:1px solid var(--line)}
.booking-step>span{display:grid;place-items:center;width:34px;height:34px;border:1px solid #b8b9b2;border-radius:50%;font-size:11px;font-weight:800}
.booking-step>div{display:grid;gap:3px;margin-right:20px}.booking-step strong{font-size:13px}.booking-step small{font-size:11px;color:var(--muted)}
.booking-form{padding:28px}.booking-form .field{min-width:0;margin-bottom:18px}.booking-form .field label{display:block;font-size:12px;font-weight:750;margin-bottom:7px}
.booking-form input:not([type=checkbox]):not([type=hidden]),.booking-form select,.booking-form textarea{display:block;width:100%;min-height:48px;padding:11px 13px;border:1px solid #d2d3cc;border-radius:0;background:#fff;color:var(--ink)}
.booking-form textarea{resize:vertical}.booking-form input:focus,.booking-form select:focus,.booking-form textarea:focus{outline:2px solid #8ba800;outline-offset:1px}
.booking-form .form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.booking-form .form-row:nth-of-type(2){grid-template-columns:repeat(3,minmax(0,1fr))}
.booking-form .errorlist,.event-registration-form .errorlist{margin:6px 0 0;padding:0;list-style:none;color:#a32622;font-size:12px}.form-errors{margin:0 0 18px;padding:12px;background:#fff0ef;color:#8f201c}
.booking-equipment{padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.booking-form .check{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:13px}.booking-form .check input{accent-color:#111}
.booking-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:19px 0;margin:5px 0;border-top:1px solid var(--line);font-size:14px}.booking-total strong{font-size:22px}
.consent-check{align-items:flex-start!important;margin:16px 0}.booking-submit{width:100%;justify-content:space-between}.booking-submit span{font-size:20px}
.privacy-note{font-size:11px;color:var(--muted);line-height:1.55;margin-bottom:0}.booking-aside{position:sticky;top:105px;background:var(--dark);color:white;padding:30px}
.booking-aside h2{font-size:clamp(36px,4vw,57px);line-height:.94;letter-spacing:-.06em;margin:25px 0}.booking-aside ol{padding-left:20px;color:#cbcdc7;font-size:14px}
.booking-aside li{padding:0 0 15px 5px}.booking-contact{display:grid;gap:7px;border-top:1px solid #3a3a38;padding-top:19px;margin-top:25px}.booking-contact span{font-size:10px;color:#aaa;letter-spacing:.1em}.booking-contact a{font-weight:800}
.form-result{min-height:54vh;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding-top:70px;padding-bottom:90px;max-width:880px}
.form-result h1{font-size:clamp(48px,8vw,96px);line-height:.89;letter-spacing:-.075em;margin:20px 0}.form-result>p{max-width:610px;color:#60615b;font-size:17px;margin:0 0 26px}
.result-icon{width:58px;height:58px;background:var(--lime);display:grid;place-items:center;margin-bottom:28px}.result-icon svg{width:30px;height:30px;fill:none;stroke:var(--on-lime,#111);stroke-width:2}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.contact-card{background:#fff;border:1px solid var(--line);padding:26px;display:grid;gap:12px;min-height:145px}.contact-card span{font-size:10px;letter-spacing:.1em;color:#777}.contact-card a,.contact-card strong{font-size:20px;font-weight:800}.contact-card small{color:#777}
.site-footer a:hover{text-decoration:underline;text-underline-offset:4px}
.feature>*{min-width:0}
@media(max-width:1200px){.header-inner{gap:16px}.site-header .nav{gap:14px;font-size:11px;white-space:nowrap}.site-header .phone{display:none}}
@media(max-width:980px){.booking-page{grid-template-columns:1fr}.booking-aside{position:static}.header-inner{width:calc(100% - 40px)}}
@media(max-width:760px){.booking-form{padding:19px}.booking-step{padding:16px;gap:8px}.booking-step>div{margin-right:4px}.booking-step small{font-size:9px}.contact-grid{grid-template-columns:1fr}.page-cover{height:62vw}.booking-aside{padding:24px}}
@media(max-width:520px){.booking-form .form-row,.booking-form .form-row:nth-of-type(2){grid-template-columns:1fr;gap:0}.booking-total{align-items:flex-start;flex-direction:column}.booking-step{flex-wrap:wrap}.booking-step>span:nth-of-type(2){margin-left:0}.booking-step>div{flex:1}.site-footer{grid-template-columns:1fr;gap:15px}.header-inner{width:calc(100% - 28px)}}
.booking-form{margin:0;padding:0}
.booking-main{min-width:0}
.space-option.active{border-color:#111;background:var(--lime)}
.space-option:focus-visible,.day:focus-visible,.time-slot:focus-visible,.working-plan:focus-visible{outline:2px solid #8ba800;outline-offset:2px}
.day{font:inherit;color:inherit;width:100%;border-top:0;border-left:0;border-radius:0;position:relative}
.day.muted{color:#aaa;background:#fafaf8}
.day.selected{background:var(--lime);font-weight:900}
.day:disabled{cursor:not-allowed}
/* Занятость дня: точка — есть занятые часы, перечёркнутая точка — день занят целиком. */
.day-num{display:block}
.day-dot{display:block;width:6px;height:6px;margin:4px auto 0;border-radius:50%;background:transparent}
.day.has-busy .day-dot{background:#d9a13a}
.day.is-full .day-dot{background:#b0453c}
.day.muted .day-dot{background:transparent}
.day-pad{min-height:43px;padding:7px 3px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.calendar-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0 12px}
.chip{font:inherit;font-size:12px;font-weight:650;color:inherit;background:#fff;border:1px solid var(--line);padding:7px 12px;cursor:pointer}
.chip:hover{border-color:#111}
.chip.is-active{background:var(--lime);border-color:#111;color:var(--on-lime,#111)}
.chip:focus-visible{outline:2px solid #8ba800;outline-offset:2px}
.calendar-hint{margin-left:auto;font-size:12px;color:var(--muted)}
.calendar-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--muted)}
.calendar-legend span{display:inline-flex;align-items:center;gap:6px}
.calendar-legend i{width:6px;height:6px;border-radius:50%;background:#d9a13a;font-style:normal}
.calendar-legend i.is-free{background:#d5d6cf}
.calendar-legend i.is-full{background:#b0453c}
.time-slot.active{background:var(--dark);color:#fff;border-color:var(--dark)}
/* Недоступные часы: занятые бронью, ждущие решения и уже прошедшие. */
.time-slot{display:grid;gap:2px;justify-items:center}
.time-slot-note{display:none;font-size:9px;font-weight:800;letter-spacing:.06em;line-height:1.2;text-transform:uppercase}
.time-slot.is-taken{cursor:not-allowed}
.time-slot.is-taken .time-slot-note{display:block}
.time-slot.is-confirmed,.time-slot.is-pending{border-style:dashed}
.time-slot.is-confirmed{background:#f2f2ef;border-color:#dcdcd6;color:#9c9c96}
.time-slot.is-confirmed .time-slot-time{text-decoration:line-through}
.time-slot.is-confirmed .time-slot-note{color:#8d8d86}
.time-slot.is-pending{background:#fdf7e6;border-color:#eddfb4;color:#8a6d24}
.time-slot.is-pending .time-slot-note{color:#a4811f}
.time-slot.is-past,.time-slot.is-past.is-confirmed{background:#e8e8e4;border-color:#dcdcd6;color:#b0b0aa}
.time-slot.is-past .time-slot-note{color:#a8a8a2}
.time-slot.is-past .time-slot-time{text-decoration:none}
.time-slot-warning{margin:11px 0 0;padding:10px 13px;background:#fff6e6;border-left:3px solid #e0a83a;color:#7a5a12;font-size:12px;line-height:1.45}
.time-slot-warning[hidden]{display:none}
.equipment-check{margin-top:22px}
.booking-contact-fields{border-top:1px solid var(--line);margin-top:28px;padding-top:22px}
.booking-contact-fields>h3{font-size:24px;letter-spacing:-.04em;margin:0 0 5px}
.booking-contact-fields>p{font-size:13px;color:var(--muted);margin:0 0 18px}
.booking-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.booking-contact-grid .field{min-width:0;margin-bottom:15px}
.booking-contact-grid .field label{display:block;font-size:12px;font-weight:750;margin-bottom:7px}
.booking-contact-grid .field label span{font-weight:400;color:var(--muted)}
.booking-contact-grid input,.booking-contact-grid textarea{display:block;width:100%;min-height:46px;padding:10px 12px;border:1px solid #d2d3cc;background:#fff;color:var(--ink);font:inherit}
.booking-contact-grid textarea{resize:vertical}
.booking-contact-grid input:focus,.booking-contact-grid textarea:focus{outline:2px solid #8ba800;outline-offset:1px}
.consent-check{align-items:flex-start!important;margin:14px 0}.consent-check input{margin-top:2px;flex:0 0 auto;accent-color:#111}
.consent-check a{text-decoration:underline;text-underline-offset:3px}
.booking-summary-note{font-size:11px;color:#aaa;line-height:1.5;margin:14px 0 0}
.booking-summary .booking-submit{width:100%}
/* Ответ AJAX-отправки: подсказка о незаполненных полях живёт под контактами. */
.booking-form-feedback{margin:16px 0 0;padding:14px 16px;background:#fff0ef;color:#8f201c;font-size:13px;line-height:1.45}
.booking-form-feedback[hidden]{display:none}
.booking-form-feedback.is-ok{background:#f3fae8;color:#3f6b17}
.booking-form-feedback p{margin:0}
.booking-form-feedback ul{margin:8px 0 0;padding-left:18px}
.booking-form-feedback li{margin:0 0 4px}
.booking-contact-grid .is-invalid{border-color:#c0392b!important;background:#fff7f7}
.booking-contact-grid .is-invalid:focus{outline-color:#c0392b}
.booking-summary .booking-submit[aria-busy="true"]{opacity:.7}
.time-grid-note{font-size:12px;color:var(--muted);margin:0}
.working-price-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.working-price-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 13px;background:#fff;font-size:13px}
.working-price-list span{color:var(--muted)}
.working-price-list strong{font-weight:850}
.booking-form .errorlist,.event-registration-form .errorlist{margin:6px 0 0;padding:0;list-style:none;color:#a32622;font-size:12px}
.booking-form .errorlist li,.event-registration-form .errorlist li{margin:3px 0}
.booking-form .form-errors{margin:0 0 20px;padding:13px 16px;background:#fff0ef;color:#8f201c}
@media(max-width:760px){.booking-contact-grid{grid-template-columns:1fr}.booking-contact-fields{margin-top:20px;padding-top:18px}}

/* ---------- мероприятия ----------------------------------------------------- */
.event-card .media{height:205px}
.event-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:15px}
.event-date{font-size:11px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}
.event-price{background:var(--lime);color:var(--on-lime,#111);padding:5px 10px;font-size:11px;font-weight:850;letter-spacing:.06em}
.event-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:18px}
.event-status{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#3f7a1f}
.event-status.is-muted{color:var(--muted)}
.cards-muted .card.is-past{opacity:.62}
.event-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:30px}
.event-fact{background:#fff;padding:18px 20px;display:grid;gap:8px}
.event-fact span{font-size:10px;letter-spacing:.1em;color:#777}
.event-fact strong{font-size:17px;font-weight:800}
.event-description{max-width:760px;font-size:16px;line-height:1.65;color:#4b4c47}
.event-description p{margin:0 0 16px}
.event-closed{border:1px solid var(--line);background:#fff;padding:30px;display:grid;gap:10px;justify-items:start;max-width:620px}
.event-closed strong{font-size:26px;letter-spacing:-.04em}
.event-closed p{color:var(--muted);margin:0}
.event-registration{display:grid;gap:26px;max-width:100%;background:#fff;border:1px solid var(--line);padding:clamp(20px,3vw,34px)}
.event-registration-title{font-size:clamp(28px,3.4vw,42px);line-height:.98;letter-spacing:-.05em;margin:0 0 10px}
.event-registration-sub{color:var(--muted);font-size:13.5px;margin:0 0 20px;max-width:540px}
.event-registration-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:20px}
.event-registration-foot .btn{margin-top:0}
.event-registration-note{color:var(--muted);font-size:12.5px;max-width:330px;line-height:1.5}
.event-registration-aside{background:var(--bg);border:1px solid var(--line);padding:22px;display:grid;gap:20px;align-content:start}
.event-steps{counter-reset:event-step;list-style:none;margin:0;padding:0;display:grid;gap:16px}
.event-steps li{position:relative;padding-left:36px;display:grid;gap:4px}
.event-steps li::before{counter-increment:event-step;content:counter(event-step);position:absolute;left:0;top:0;width:24px;height:24px;display:grid;place-items:center;background:var(--ink);color:#fff;font-size:12px;font-weight:800}
.event-steps strong{font-size:15px;letter-spacing:-.02em}
.event-steps span{color:var(--muted);font-size:13px;line-height:1.55}
.event-registration-contact{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:18px}
.event-registration-contact span{font-size:10px;letter-spacing:.1em;color:var(--muted)}
.event-registration-contact a{font-weight:800}
.event-registration-link{font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(min-width:900px){.event-registration{grid-template-columns:minmax(0,1.35fr) minmax(260px,.85fr);gap:30px}}
@media(max-width:760px){.event-card .media{height:170px}.event-facts{grid-template-columns:1fr}.event-closed{padding:22px}}

/* Логотипы из настроек: картинка переводится в WebP, поэтому показываем эскиз. */
.logo--image{display:flex;align-items:center;gap:12px;letter-spacing:normal;line-height:1}
.logo--image img{display:block;width:auto;max-height:34px}
.logo--image .logo-caption{font-size:11px;letter-spacing:.12em;font-weight:800;text-transform:uppercase;color:var(--ink)}
.footer-logo img{display:block;width:auto;max-height:26px}

/* ---------- подвал: реквизиты и юридические документы --------------------- */
.site-legal {
  display: grid; gap: 18px; padding: 22px 0 42px; margin-top: 0;
  border-top: 1px solid var(--line); font-size: 12px; color: var(--muted);
}
.site-legal .legal-title {
  display: block; margin-bottom: 8px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink);
}
.legal-requisites dl { display: grid; gap: 4px 26px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0; }
.legal-requisites dl > div { display: flex; gap: 8px; flex-wrap: wrap; }
.legal-requisites dt { color: var(--faint, #9a9a9a); }
.legal-requisites dd { margin: 0; color: var(--ink); font-weight: 600; }
.legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-weight: 600; }
.legal-links a { text-decoration: underline; text-underline-offset: 3px; }
.legal-links a:hover { color: var(--ink); }

/* ---------- текст документа на странице ---------------------------------- */
.page-document { max-width: 860px; }
.page-document h2 { margin-top: 30px; }
/* Фото материала: ширина по колонке текста, размеры приходят из редактора. */
.page-document img,
.event-description img { display: block; max-width: 100%; height: auto; margin: 22px 0; border-radius: 14px; }
.page-document img + img,
.event-description img + img { margin-top: 14px; }
/* Фото с подписью: картинка и строка «Подпись — Фото: автор». */
.page-document figure,
.event-description figure { margin: 22px 0; }
.page-document figure img,
.event-description figure img { margin: 0; width: 100%; }
.page-document figcaption,
.event-description figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- Контакты: карточки-ссылки и карта ---------------------------- */
.contact-cards .card h3 a { color: inherit; text-decoration: none; border-bottom: 2px solid transparent; transition: border-color .2s ease; }
.contact-cards .card h3 a:hover { border-color: currentColor; }
.contact-cards .card h3 a[target="_blank"]::after { content: "↗"; margin-left: .3em; vertical-align: .3em; font-size: .58em; color: var(--muted); }
.contact-cards .card h3 a[target="_blank"]:hover::after { color: inherit; }

.map-card { position: relative; margin-top: 18px; border: 1px solid var(--line); background: var(--paper); height: min(60vw, 440px); min-height: 300px; overflow: hidden; }
.map-frame { display: block; width: 100%; height: 100%; border: 0; }
.map-canvas { position: absolute; inset: 0; }
/* Карта ещё грузится: вместо пустого прямоугольника — спокойный фон с подписью. */
.map-card:not(.is-ready):not(.is-failed) .map-canvas::after { content: "Загружаем карту…"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 13px; letter-spacing: .04em; }
.map-card.is-failed .map-canvas { display: none; }
.map-fallback { position: absolute; inset: 0; display: grid; place-items: center; }
/* hidden у .map-fallback должно побеждать display: grid, иначе ссылка перекрывает карту. */
.map-fallback[hidden] { display: none; }
.map-pin { position: relative; width: 22px; height: 22px; cursor: pointer; }
/* Метка, которую скрипт ставит поверх карты API 2.1: кончик булавки — на координате. */
.map-pin--overlay { position: absolute; z-index: 3; margin: -22px 0 0 -11px; }
.map-pin-dot { position: absolute; inset: 0; border-radius: 50% 50% 50% 0; background: var(--lime); border: 2px solid #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .28); transform: rotate(-45deg); }
.map-pin-pulse { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: var(--lime); opacity: .22; animation: map-pulse 2.4s ease-out infinite; }
@keyframes map-pulse { 0% { transform: scale(.45); opacity: .3; } 70% { transform: scale(1); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-pin-pulse { animation: none; } }
/* Подсказка у точки: появляется при наведении, как в примерах Яндекс Карт. */
.map-pin-hint { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5; display: grid; gap: 2px; min-width: 180px; padding: 10px 13px; background: var(--dark); color: #fff; font-size: 13px; font-weight: 750; line-height: 1.3; white-space: nowrap; opacity: 0; transform: translate(-50%, 6px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; box-shadow: 0 10px 26px rgba(0, 0, 0, .28); }
.map-pin-hint::after { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: 0; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--dark); }
.map-pin-hint small { font-size: 11px; font-weight: 500; color: #c9c9c4; }
.map-pin:hover .map-pin-hint, .map-pin:focus-within .map-pin-hint { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .map-card { height: min(72vw, 340px); min-height: 240px; }
}

/* Цена по числу гостей: ставки, которые показываются для выбранного пространства. */
.tier-pricing { background: #f4f4ef; border: 1px solid var(--line); padding: 18px; margin-top: 20px; }
.tier-pricing[hidden] { display: none; }
.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.tier-option { font: inherit; color: inherit; display: grid; gap: 4px; align-content: start; min-width: 0; border: 1px solid var(--line); background: #fff; padding: 14px; text-align: left; cursor: pointer; }
.tier-option strong { display: block; font-size: 14px; line-height: 1.3; }
.tier-option small { display: block; color: #777; margin-top: 0; font-size: 13px; line-height: 1.35; }
.tier-option.active { background: var(--lime); border-color: #111; color: var(--on-lime, #111); }
.tier-option.active small { color: inherit; opacity: .8; }
.tier-option:focus-visible { outline: 2px solid #8ba800; outline-offset: 2px; }
.tier-option[hidden] { display: none; }
.tier-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; }

/* Форматы участия на странице мероприятия: выбор формата и диалог с ценой. */
.price-options { margin: 22px 0 24px; }
.price-option-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.price-option { font: inherit; color: inherit; display: grid; gap: 6px; border: 1px solid var(--line); background: #fff; padding: 16px 18px; text-align: left; cursor: pointer; }
.price-option strong { font-size: 15px; }
.price-option-value { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.price-option small { color: #777; font-size: 12px; line-height: 1.4; }
.price-option:hover { border-color: #111; }
.price-option.is-current { border-color: #111; box-shadow: inset 0 0 0 1px #111; }
.price-option.is-current .price-option-value { color: var(--link); }
.price-option:focus-visible { outline: 2px solid #8ba800; outline-offset: 2px; }
.price-option-note { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.price-option-seats { font-size: 12px; font-weight: 700; color: var(--link); }
.price-option-seats.is-full { color: #b23; }
.price-option.is-full { cursor: not-allowed; background: #fafaf8; color: #9c9c96; }
.price-option.is-full .price-option-value { color: #9c9c96; }
.price-option.is-full small { color: #a8a8a2; }
/* В окне формата нет списка: карточка только показывает выбор, а не предлагает его. */
.price-option--static { cursor: default; }
.price-option--static:hover { border-color: #111; }
.price-options-pb-0 { margin-bottom: 0; }
.price-current-change { font: inherit; font-size: 13px; font-weight: 650; color: var(--link); background: none; border: 0; padding: 10px 0 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.price-current-change:hover { text-decoration-thickness: 2px; }
.price-current-change:focus-visible { outline: 2px solid #8ba800; outline-offset: 2px; }
.price-summary { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: baseline; margin-top: 16px; padding: 12px 15px; background: #f4f4ef; border: 1px solid var(--line); font-size: 13px; }
.price-summary[hidden] { display: none; }
.price-summary strong { font-size: 15px; }

.price-dialog {
  width: min(560px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  background: var(--paper, #fff);
  color: var(--ink);
  max-height: min(92vh, 900px);
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(17, 17, 17, .28);
}

.price-dialog::backdrop { background: rgba(17, 17, 17, .55); }

/* Тени у краёв окна показывают, что внутри есть прокрутка. */
.price-dialog::before,
.price-dialog::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px;
  pointer-events: none; opacity: 0; transition: opacity .18s ease; z-index: 2;
}
.price-dialog::before { top: 0; background: linear-gradient(rgba(255, 255, 255, .96), rgba(255, 255, 255, 0)); }
.price-dialog::after { bottom: 0; background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, .96)); }
.price-dialog.is-scrolled::before { opacity: 1; }
.price-dialog:not(.is-scroll-end)::after { opacity: 1; }

.price-dialog-inner {
  padding: 24px; display: grid; gap: 20px; overflow-y: auto; max-height: inherit;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #c8ccbe transparent;
}
.price-dialog-inner::-webkit-scrollbar { width: 12px; }
.price-dialog-inner::-webkit-scrollbar-track { background: transparent; }
.price-dialog-inner::-webkit-scrollbar-thumb { background: #d5d9cb; border: 4px solid var(--paper, #fff); border-radius: 99px; }
.price-dialog-inner::-webkit-scrollbar-thumb:hover { background: #b8bda9; }

.price-dialog-head { position: sticky; top: -24px; z-index: 3; display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; margin: -24px -24px 0; padding: 24px 24px 14px; background: var(--paper, #fff); }
.price-dialog-head h2 { font-size: 22px; letter-spacing: -.03em; margin: 6px 0 0; }
.price-dialog-sub { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.price-dialog-close { font: inherit; font-size: 22px; line-height: 1; background: none; border: 0; cursor: pointer; padding: 2px 6px; color: inherit; }
.price-dialog-close:hover { color: var(--link); }
.price-dialog-close:focus-visible { outline: 2px solid #8ba800; outline-offset: 2px; }
/* В окне поля идут друг за другом: две колонки в узком окне тесные. */
.price-dialog .booking-contact-grid { grid-template-columns: 1fr; }
.price-dialog .booking-contact-grid .field { margin-bottom: 14px; }
/* Сводка формата есть в окне выше — строка «Формат участия» здесь была бы повтором. */
.price-dialog:modal .price-summary { display: none; }

@media (max-width: 520px) {
  .tier-grid, .price-option-grid { grid-template-columns: 1fr; }
  .price-dialog-inner { padding: 18px; }
  .price-dialog-head { margin: -18px -18px 0; padding: 18px 18px 12px; top: -18px; }
}

/* Скрипты прячут блоки атрибутом hidden, и собственный display у класса его перебивает. */
[hidden] { display: none !important; }

/* ---------- меню кафе: страница /menu/ ------------------------------------ */

/* Пометка о демо-режиме: раздел включён на пробу, посетитель это видит. */
.menu-note { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 24px; padding: 14px 17px; background: #f2f5ff; border-left: 3px solid #4b6bd6; font-size: 13.5px; line-height: 1.55; color: #2f3a55; }
.menu-note svg { width: 19px; height: 19px; flex: 0 0 auto; margin-top: 1px; }

/* Планшет: логотип, меню и кнопка брони не помещаются в одну строку до 1024 px —
   до этой ширины показываем бургер и мобильное меню, как на телефоне. */
@media (max-width: 1024px) {
  .site-header { height: 72px; }
  .site-header .nav,
  .site-header .phone { display: none; }
  .site-header .menu-btn { display: flex; }
}

/* Шапка сайта не липкая, поэтому вкладки крепим к самому верху окна:
   с отступом сверху над планкой оставалась полоса с просвечивающим фото. */
.menu-tabs { position: sticky; top: 0; z-index: 6; display: flex; gap: 8px; overflow-x: auto; margin: 0 0 30px; padding: 10px 0; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 12px 18px -14px rgba(17, 17, 17, .38); }
.menu-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid var(--line); color: var(--ink); font-size: 13px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.menu-tab span { font-size: 11px; font-weight: 700; color: var(--muted); }
.menu-tab:hover, .menu-tab:focus-visible { border-color: #111; }

.menu-section { margin: 0 0 46px; scroll-margin-top: 78px; }
.menu-section-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; }
.menu-section-head h2 { margin: 0; font-size: clamp(26px, 3.2vw, 38px); letter-spacing: -.05em; }
.menu-section-head span { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.menu-section-note { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }

.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 16px; }
.dish { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); }
.dish-photo { position: relative; aspect-ratio: 4 / 3; background: #f1f2ec; overflow: hidden; }
.dish-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Без фото карточка не пустует: показываем первую букву названия. */
.dish-photo--none { display: grid; place-items: center; font-size: 44px; font-weight: 800; color: #c3c4bd; }
.dish-body { display: grid; gap: 7px; padding: 15px 17px 18px; }
.dish-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dish-name { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.dish-price { font-size: 17px; font-weight: 800; white-space: nowrap; }
.dish-weight { font-size: 12px; color: var(--muted); }
.dish-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: #5f615b; }
.dish-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dish-tag { padding: 3px 9px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: #f1f2ec; color: #5f615b; }
.dish-tag--new { background: var(--lime); color: var(--on-lime, #111); }
.dish-tag--vegan { background: #e4f5e8; color: #2f6b3c; }
.dish-tag--spicy { background: #fdeceb; color: #a32622; }
.dish-tag--off { background: #f7e6e5; color: #a32622; }
/* Стоп-лист: блюдо остаётся в меню, но видно, что его сейчас нет. */
.dish--off .dish-photo img { filter: grayscale(1); opacity: .5; }
.dish--off .dish-price { color: var(--muted); }

@media (max-width: 760px) {
  .menu-grid { grid-template-columns: 1fr; gap: 12px; }
  .dish { flex-direction: row; }
  /* Плитка фото одного размера у всех блюд: раньше высоту задавал текст рядом,
     и у блюд с длинным названием фото получалось выше. */
  .dish-photo { width: 104px; flex: 0 0 auto; aspect-ratio: 1; align-self: center; }
  /* Название и цена идут строками, а не в одну строку: в узкой колонке
     цена выдавливала название и разрывала слова. */
  .dish-body {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "name name" "price weight" "text text" "tags tags";
    gap: 4px 10px;
    padding: 12px 14px 14px;
    align-content: start;
  }
  .dish-head { display: contents; }
  .dish-name { grid-area: name; font-size: 16.5px; }
  .dish-price { grid-area: price; font-size: 16.5px; }
  .dish-weight { grid-area: weight; align-self: baseline; }
  .dish-text { grid-area: text; }
  .dish-tags { grid-area: tags; }
}

/* На узком телефоне плитка меньше: иначе название не помещается в строку. */
@media (max-width: 430px) {
  .dish-photo { width: 92px; }
}


/* ---------- страница «Тарифы»: карточки по пространствам -------------------- */

.tariffs-section + .tariffs-section { margin-top: 42px; }
.tariffs-space { margin: 0 0 4px; font-size: 22px; letter-spacing: -.02em; }
.tariffs-space-note { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.tariffs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; }
.tariff-card {
  display: grid; gap: 10px; align-content: start;
  padding: 18px; border: 1px solid var(--line); background: var(--paper, #fff);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.tariff-card:hover { border-color: #111; box-shadow: var(--shadow, 0 8px 30px rgba(0, 0, 0, .06)); }
.tariff-head { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; }
.tariff-head h3 { margin: 0; font-size: 16px; letter-spacing: -.01em; }
.tariff-price { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.tariff-price small { font-size: 13px; font-weight: 600; color: var(--muted); }
.tariff-note { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.tariff-tiers { display: grid; gap: 6px; margin: 0; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; }
.tariff-tiers li { display: flex; gap: 12px; justify-content: space-between; font-size: 13px; }
.tariff-tiers strong { white-space: nowrap; }
.tariff-book { margin-top: 2px; font-size: 13px; font-weight: 650; color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.tariff-book:hover { text-decoration-thickness: 2px; }
.tariffs-hint { margin: 18px 0 0; font-size: 13px; color: var(--muted); }
.tariffs-hint a { color: var(--link); }
