/* ================================================================
   На обед в буфет - слой блоков поверх brand.css.
   brand.css даёт токены и шрифты, здесь только раскладка и компоненты.
   Тема одна, светлая: сайт про еду, тёмный режим тут не к месту.
   ================================================================ */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 50;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: var(--space-3) var(--space-4); border-radius: 0 0 var(--radius-md) 0;
}
.skip:focus { left: 0; }

body { background: var(--color-bg); }

/* Рисованная пометка под словом. Файл общий, тянется по ширине слова.
   S6-TEXTS: .mark в brand.css блочная, поэтому без width черта растягивалась
   на всю строку и подчёркивала пустоту (замер на главной: 587 px черты под
   словом в 497 px, в заголовке меню - 703 под 354). Ужимаем до слова ВЕЗДЕ:
   правило жило только в .page-intro, и главная оставалась с дефектом. */
.mark {
  background: url("sketch/underline.svg") no-repeat center bottom / 100% 0.42em;
  padding-bottom: 0.16em;
  width: fit-content;
}

/* ================================================================ кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-sm);
  min-height: 52px; padding: 0 var(--space-6); border: 1.5px solid transparent;
  border-radius: var(--radius-full); cursor: pointer; text-decoration: none;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--ghost {
  background: transparent; color: var(--color-primary-text);
  border-color: var(--color-border);
}
.btn--ghost:hover { background: var(--color-surface-offset); color: var(--color-primary-text); }
.btn--sm { min-height: 46px; padding: 0 var(--space-5, 1.25rem); font-size: var(--text-sm); }
.btn:active { transform: translateY(1px); }

/* ================================================================ шапка */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-divider);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--space-4);
  padding-block: var(--space-3);
}
.logo { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.logo picture { display: block; flex: none; line-height: 0; }
.logo-mark { display: block; }
.logo__txt {
  display: flex; flex-direction: column; line-height: 1.02;
  font-family: var(--font-head); letter-spacing: -0.02em; font-size: 0.86rem;
}
.logo__txt b { font-weight: 800; font-size: 1.34em; color: var(--color-text); }
.logo__txt i { font-weight: 800; font-size: 1.34em; font-style: normal; color: var(--color-primary-text); }

.site-head__contacts { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; }
.site-head__phone {
  font-family: var(--font-head); font-weight: 800; font-size: 1.05rem;
  color: var(--color-text); text-decoration: none; letter-spacing: -0.01em;
}
.site-head__phone:hover { color: var(--color-primary-text); }
.site-head__hint { font-size: var(--text-xs); color: var(--color-text-muted); }

/* ================================================================ секции */
.section { padding-block: clamp(2.75rem, 5.5vw, 5rem); }
.section + .section { border-top: 1px solid var(--color-divider); }
.section__head { max-width: 64ch; margin-bottom: var(--space-8); }
.section__head h2 { margin-bottom: var(--space-3); }
.section__lead { color: var(--color-text-muted); margin: 0; }

/* ================================================================ первый экран */
.hero { padding-block: clamp(2rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem); }
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 4vw, 4rem); align-items: center;
}
.hero h1 { font-size: clamp(2rem, 1.1rem + 3.1vw, 3.35rem); margin-bottom: var(--space-4); }
.hero__lead { font-size: var(--text-lg); line-height: 1.45; color: var(--color-text-muted); margin: 0 0 var(--space-6); }
/* S6-TEXTS: вторая строка оффера - цена и условия. Тоном ниже подводки,
   чтобы первым читался сам оффер, а не приписка под ним. */
.hero__sub { font-size: var(--text-base); color: var(--color-text-muted); margin: 0 0 var(--space-6); }
.hero__facts { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: var(--space-2); }
.hero__facts li {
  border-left: 3px solid var(--brand-amber); padding-left: var(--space-3);
  font-size: var(--text-sm); color: var(--color-text-muted);
}
.hero__facts b { font-family: var(--font-head); font-weight: 800; color: var(--color-text); }

.hero__media { position: relative; margin: 0; }
/* Фото лежит в picture (avif, запасной webp). Контейнер по умолчанию
   строчный и оставляет под картинкой щель по line-height: делаем блочным. */
picture { display: block; }
.photo { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); }
.hero__cap {
  margin-top: var(--space-3); text-align: center;
  font-size: var(--text-xs); color: var(--color-text-faint);
}

/* ================================================================ форма */
.lead-form {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-sm);
}
.lead-form__title { font-size: var(--text-lg); margin-bottom: var(--space-4); }
/* S8-FORM: колонки minmax(0, 1fr), а не 1fr: поле ввода несёт собственную
   min-content ширину (229 px), и в узкой колонке блока заказа ряд из двух
   полей не сжимался - страница ехала вбок на 901-1080 (24 px на 1024). */
.lead-form__row { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: var(--text-xs); color: var(--color-text-muted); }
.field__label i { color: var(--color-primary); font-style: normal; }
.field__input {
  min-width: 0; min-height: 50px; padding: 0 var(--space-4); font: inherit; font-size: var(--text-sm);
  color: var(--color-text); background: var(--color-surface-2);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
.field__input:focus { outline: none; border-color: var(--color-primary); }
.field__input--bad {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--brand-tomato) 12%, var(--color-surface-2));
}
.lead-form .btn { width: 100%; }
.lead-form__note { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-faint); }
.lead-form__done {
  margin: var(--space-3) 0 0; font-size: var(--text-sm); font-weight: 500;
  color: var(--brand-herb);
}

/* ================================================================ меню */
.mgrid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcard {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-5, 1.25rem);
  display: flex; flex-direction: column;
}
.mcard__name { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.mcard__photo { margin-bottom: var(--space-4); }
.mcard__price {
  margin: 0 0 var(--space-2); display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap;
}
.mcard__price b { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; color: var(--color-primary-text); }
.mcard__price span { font-size: var(--text-xs); color: var(--color-text-muted); }
.mcard__note { margin: 0 0 var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.mcard__days { margin: 0; border-top: 1px solid var(--color-divider); }
.daycard { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-divider); }
.daycard:last-child { border-bottom: 0; padding-bottom: 0; }
.daycard__day {
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint);
  margin-bottom: 2px;
}
.daycard__dishes { margin: 0; font-size: var(--text-sm); line-height: 1.5; }

.callout {
  margin-top: var(--space-6); background: var(--color-surface-offset);
  border-left: 4px solid var(--brand-amber); border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6);
}
.callout__title { font-family: var(--font-head); font-weight: 800; font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.callout p { margin: 0 0 var(--space-4); max-width: 74ch; }
.callout .btn { margin: 0; }

/* ================================================================ состав комплекса */
.cx {
  list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}
.cx__item {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-4);
}
.cx__item picture { line-height: 0; }
.cx__icon { display: block; width: 62px; height: 62px; }
.cx__name { font-family: var(--font-head); font-weight: 800; font-size: var(--text-base); }
.cx__note { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }

/* ================================================================ сегменты */
.seg__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.seg__head picture { line-height: 0; }
.seg__icon { display: block; width: 52px; height: 52px; }
.seg-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.seg {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-top: 4px solid var(--brand-tomato); border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.seg__name { font-size: var(--text-lg); margin-bottom: var(--space-1); }
.seg__lead { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--color-primary-text); }
.seg__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ================================================================ карта */
.geo { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.geo__list { list-style: none; margin: var(--space-6) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.geo__list li {
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-sm);
  background: var(--color-surface-offset); border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
}
/* PRAVKI-6: живой текст в колонке зоны. Отбивка сверху своя: у подводки
   margin 0, а список районов ниже отбит сам (.geo__list). */
.geo__para { margin: var(--space-4) 0 0; }
.geo__note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }
.geo__map { margin: 0; }
.mapbox {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid var(--color-border); aspect-ratio: 640 / 440; background: var(--color-surface-offset);
}
.mapbox__still { display: block; width: 100%; height: 100%; object-fit: cover; }
.mapbox__zone {
  position: absolute; inset: 0; width: 100%; height: 100%;
  color: var(--brand-tomato); pointer-events: none;
}
.mapbox__btn {
  position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%);
  background: var(--color-surface-2); box-shadow: var(--shadow-md);
}
.mapbox--live { aspect-ratio: 640 / 440; }
.mapbox iframe { display: block; width: 100%; height: 100%; border: 0; }
.geo__cap { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--color-text-faint); }

/* ================================================================ шаги */
.steps {
  list-style: none; margin: 0; padding: 0;
  /* ICONSET-3: колонки под стрелки (1fr auto 1fr auto 1fr) остались от
     рисованного слоя; без стрелок карточки схлопывались в вертикальную
     лапшу. Три равные колонки, шаг тот же, что у остальных сеток. */
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch; gap: var(--space-4);
  counter-reset: step;
}
.step {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-6); height: 100%;
}
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-full);
  background: var(--brand-tomato); color: var(--color-on-primary);
  font-family: var(--font-head); font-weight: 800; margin-bottom: var(--space-3);
}
.step__name { font-size: var(--text-base); margin-bottom: var(--space-2); }
.step__text { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ================================================================ почему мы */
/* S8-WHY (п.22): пять пунктов - пять равных колонок в один ряд.
   Было (S6-WHY-5): шестидольная сетка, пункт - две доли, последней паре по
   три. Ряд закрывался, но модуль в рядах выходил разный - 383 px против 582
   на 1280 - и линейки пунктов не вставали друг под друга: блок читался
   разъехавшимся. Стало: один ряд, один модуль. Правило условное: вернут
   шестой пункт - раскладка станет прежней трёхколоночной без правки CSS.
   PRAVKI-PASHA: рифма с рядом клиентов ниже больше не держится - пунктов
   пять, логотипов шесть. Совпадение шага было приятным, а не обязательным.
   Зазор шире общего (--space-6): между текстом колонки и линейкой соседней
   при 16 px оставалось тесно. */
.why { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4) var(--space-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.why__item { grid-column: span 1; }
.why:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.why__item {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding-left: var(--space-4); border-left: 2px solid var(--brand-amber);
}
.why__name { font-family: var(--font-head); font-weight: 800; font-size: var(--text-base); }
.why__text { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ================================================================ клиенты */
.clients {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--space-3); grid-template-columns: repeat(6, minmax(0, 1fr));
  /* Ряды равной высоты: знак КиноГорыныча выше остальных, и на узких ширинах
     его ряд иначе выпирал на 14 px относительно соседних. Подгонять чужой
     логотип под сетку неправильно - пусть сетка держит ряды. */
  grid-auto-rows: 1fr;
}
.client { display: flex; align-items: center; justify-content: center; }
/* PRAVKI-7: правило рыбы-плейсхолдера убрано - логотипу размер задаёт .client__logo */

/* ================================================================ вопросы */
.faq { display: grid; gap: var(--space-6) var(--space-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.faq__item { border-top: 1px solid var(--color-divider); padding-top: var(--space-4); }
.faq__q { font-size: var(--text-base); margin-bottom: var(--space-2); }
.faq__a { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; }

/* ================================================================ финальный CTA */
.section--cta { background: var(--color-surface-offset); border-top: 1px solid var(--color-border); }
.cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: center; }
.cta h2 { margin-bottom: var(--space-3); }
.cta__text p { color: var(--color-text-muted); margin: 0 0 var(--space-4); max-width: 56ch; }
.cta__phone { display: flex; flex-direction: column; }
.cta__phone a {
  font-family: var(--font-head); font-weight: 800; font-size: 1.55rem;
  color: var(--color-text); text-decoration: none;
}
.cta__phone a:hover { color: var(--color-primary-text); }
.cta__phone span { font-size: var(--text-xs); color: var(--color-text-faint); }

/* ================================================================ подвал */
.site-foot { background: var(--brand-cocoa); color: #E7DCCF; padding-block: var(--space-12) var(--space-6); margin-top: 0; }
.site-foot__in { display: grid; gap: var(--space-8); grid-template-columns: 1.4fr 1fr 1.2fr 1fr; }
.site-foot a { color: #F0E5D6; }
.site-foot .logo__txt b { color: #F7EFE3; }
.site-foot .logo__txt i { color: var(--brand-amber); }
/* Знак растровый, темой не перекрашивается: на какао он темнеет, поэтому в
   подвале даём ему тёплую подложку-кружок вместо смены цвета. */
.site-foot .logo-mark {
  background: #F7EFE3; border-radius: var(--radius-full); padding: 3px;
  box-sizing: content-box;
}
.site-foot__about { font-size: var(--text-sm); color: #B7A695; margin: var(--space-4) 0 0; max-width: 34ch; }
.site-foot__h { display: block; font-family: var(--font-head); font-weight: 800; margin-bottom: var(--space-3); color: #F7EFE3; }
.site-foot p { margin: 0; font-size: var(--text-sm); line-height: 1.7; color: #C6B5A3; }
.site-foot__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
.site-foot__bottom {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-8); padding-top: var(--space-4);
  border-top: 1px solid #3D3129; font-size: var(--text-xs); color: #9C8B7B;
}

/* ================================================================ дизайн-кит */
.kit { padding-block: var(--space-8) var(--space-16); }
.kit__intro { max-width: 66ch; margin-bottom: var(--space-8); }
.kit__link { font-size: var(--text-sm); }
.kit__block { margin-bottom: var(--space-12); }
.kit__head { border-left: 3px solid var(--brand-tomato); padding-left: var(--space-4); margin-bottom: var(--space-4); }
.kit__name { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.kit__note { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); max-width: 74ch; }
.kit__code { font-size: var(--text-xs); color: var(--color-text-faint); font-family: ui-monospace, Menlo, Consolas, monospace; }
.kit__demo {
  border: 1px dashed var(--color-border); border-radius: var(--radius-lg);
  overflow: hidden; background: var(--color-bg);
}
.kit__off {
  margin: 0; padding: var(--space-6); color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.kit__off code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.95em; }
.kit__demo--plain { padding: var(--space-6); display: grid; gap: var(--space-8); }
.kit__demo .section { padding-block: var(--space-8); }
.kit__demo .site-head { position: static; }
.kit__demo .wrap { width: min(1180px, 100% - 2 * var(--space-6)); }
.kit__swatches { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.kit__sw { display: grid; grid-template-columns: 46px auto; gap: 0 var(--space-3); align-items: center; }
.kit__sw span { grid-row: span 2; width: 46px; height: 46px; border-radius: var(--radius-md); border: 1px solid rgba(42,33,28,0.15); }
.kit__sw b { font-family: var(--font-head); font-size: var(--text-sm); align-self: end; }
.kit__sw code { font-size: var(--text-xs); color: var(--color-text-muted); align-self: start; }
.kit__icons { display: flex; flex-wrap: wrap; gap: var(--space-6); color: var(--brand-tomato); }
.kit__icon { margin: 0; text-align: center; }
.kit__icon figcaption { font-size: var(--text-xs); color: var(--color-text-faint); margin-top: var(--space-1); }
.kit__deco { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; color: var(--brand-amber); }
.kit__deco-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.kit__deco-item span { font-size: var(--text-xs); color: var(--color-text-muted); }
.kit__deco-item--zone { color: var(--brand-tomato); }
.mark--demo { font-family: var(--font-head); font-weight: 800; font-size: var(--text-lg); color: var(--color-text); }

/* ================================================================ PRAVKI-1 */

/* Иконка в целевой кнопке. Статичная: анимация тут конкурировала бы за
   внимание с поваром у формы, а он на странице главный. */
.btn__ic { flex: none; margin-inline-end: var(--space-2); }

/* ---------------------------------------------------------------- табы дней */
.daytabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.daytab {
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-xs);
  min-height: 44px; padding: 0 var(--space-4); cursor: pointer;
  background: var(--color-surface); color: var(--color-text-muted);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-full);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.daytab:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
.daytab.is-on {
  background: var(--color-primary); border-color: var(--color-primary);
  color: var(--color-on-primary);
}
/* PRAVKI-1g: отличаем цветом, а не весом. Montserrat 500 нет в наборе, и
   ради одной кнопки грузился montserrat-600 - те же 20 КБ на пустом месте. */
.daytab--all { color: var(--color-text-faint); }
/* Скрытие включает только скрипт: без него в разметке видна вся неделя. */
.menu--tabs .daycard--off { display: none; }

/* ---------------------------------------------------------------- калькулятор */
.section--calc { background: var(--color-surface-offset); }
.calc {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
}
.calc__panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
}
.calc__label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); font-family: var(--font-head); font-weight: 700;
  font-size: var(--text-sm); margin-bottom: var(--space-4);
}
.calc__num { font-size: 1.5rem; font-weight: 800; color: var(--color-primary-text); white-space: nowrap; }

.calc__range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 12px;
  border-radius: var(--radius-full); cursor: pointer; background: var(--color-surface-offset);
  background-image: linear-gradient(var(--color-primary), var(--color-primary));
  background-repeat: no-repeat; background-size: var(--fill, 12%) 100%;
  border: 1px solid var(--color-border);
}
.calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-primary); border: 3px solid var(--color-surface-2);
  box-shadow: var(--shadow-md); cursor: pointer;
}
.calc__range::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--color-surface-2);
  background: var(--color-primary); box-shadow: var(--shadow-md); cursor: pointer;
}
.calc__range:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.calc__ticks {
  display: flex; justify-content: space-between; margin-top: var(--space-2);
  font-size: var(--text-xs); color: var(--color-text-faint);
}

.calc__set { border: 0; padding: 0; margin: var(--space-6) 0 0; }
.calc__legend {
  padding: 0; margin-bottom: var(--space-3); font-family: var(--font-head);
  font-weight: 700; font-size: var(--text-sm);
}
.calc__opts { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.calc__opt {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 46px; padding: 0 var(--space-4); cursor: pointer;
  font-size: var(--text-sm); background: var(--color-surface-2);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-full);
  transition: border-color var(--transition), background var(--transition);
}
.calc__opt input { width: 18px; height: 18px; accent-color: var(--color-primary); cursor: pointer; }
.calc__opt:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface-2));
}
.calc__opt:has(input:focus-visible) { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.calc__hint { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-faint); }

.calc__total {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--shadow-sm);
  /* PRAVKI-1d: высота по содержимому. Тянуть панель было нечем: под кнопкой
     копилась дыра. Вместо распорки в панели живёт строка состава. */
  align-self: start;
}
.calc__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin: 0; }
/* PRAVKI-1b: приглушаем ТОЛЬКО подпись строки. Раньше селектор ловил и span
   со значением внутри b, и цифра дня выходила мельче слова "руб." рядом. */
.calc__row > span:first-child { font-size: var(--text-sm); color: var(--color-text-muted); }
.calc__row b { font-family: var(--font-head); font-weight: 800; white-space: nowrap; }
.calc__big { font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem); color: var(--color-primary-text); line-height: 1.1; }
.calc__row--sub b { font-size: var(--text-base); }
.calc__total .btn { margin-top: var(--space-4); }
.calc__note { margin: 0; font-size: var(--text-xs); color: var(--color-text-faint); }
.calc__what {
  margin: var(--space-2) 0 0; padding-top: var(--space-3);
  border-top: 1px solid var(--color-divider); font-size: var(--text-sm);
  color: var(--color-text-muted); line-height: 1.5;
}
/* PRAVKI-1f: 500, а не 700: manrope-700 не нужен больше нигде на странице. */
.calc__what b { font-family: var(--font-body); font-weight: 500; color: var(--color-text); }

/* ---------------------------------------------------------------- возим ли к вам */
.zone { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; margin-top: var(--space-6); }
.zone__field { flex: 1 1 16rem; }
.zone__out {
  margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4);
  border-left: 4px solid var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-sm); background: var(--color-surface);
}
.zone__out b { font-family: var(--font-head); }
.zone__out--yes {
  border-left-color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
}
.zone__out--ask {
  border-left-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
}
.zone__cta { margin-top: var(--space-3); display: inline-flex; background: var(--color-surface-2); }

/* ---------------------------------------------------------------- PRAVKI-2: сквозные виджеты */
/* Повар переехал из блока у формы в угол экрана: виден на всём скролле и
   говорит про тот раздел, где человек сейчас. Слот под будущий ИИ-виджет
   (chef__slot) переехал вместе с ним, вёрстка чата осталась прежней.
   Углы разведены: повар справа (главный аттрактор), рубрикатор слева. */
/* PRAVKI-2d: запас под липкую шапку при прыжке по якорю. Замер живой
   страницы: шапка 76 px на широком экране и 127 px на узком - на глаз
   ставить нельзя, заголовок раздела уезжал под неё. */
html { scroll-padding-top: 6rem; }

.chef-dock {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 30;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3);
  /* PRAVKI-2b: облачко уже, чем было: широкое накрывало целевую кнопку блока. */
  width: min(18rem, calc(100vw - 2rem));
  /* сама колонка кликов не ловит - иначе съела бы полосу вдоль края экрана */
  pointer-events: none;
}
.chef-dock > * { pointer-events: auto; }
.chef__toggle {
  position: relative; flex: none; width: 76px; height: 76px; padding: 0;
  border: 2px solid var(--color-surface); border-radius: var(--radius-full);
  background: var(--color-surface-offset); box-shadow: var(--shadow-md);
  cursor: pointer; transition: transform var(--transition), box-shadow var(--transition);
}
.chef__toggle:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.chef__toggle:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.chef__ava { display: block; width: 72px; height: 72px; border-radius: var(--radius-full); }
.chef__toggle-txt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.chef__dot {
  position: absolute; top: 0; right: 0; width: 14px; height: 14px;
  border-radius: var(--radius-full); background: var(--color-accent);
  border: 2px solid var(--color-surface);
}
.chef__bubble {
  position: relative; width: 100%;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-4);
  box-shadow: var(--shadow-lg); animation: chef-in 220ms ease both;
}
.chef__bubble::after {
  content: ""; position: absolute; right: 30px; bottom: -8px; width: 14px; height: 14px;
  background: var(--color-surface); border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border); transform: rotate(45deg);
  border-radius: 0 0 3px 0;
}
.chef__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-2); margin-bottom: var(--space-2);
}
.chef__name {
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-xs);
  line-height: 1.3; color: var(--color-text);
}
/* PRAVKI-1f: подпись роли - шрифтом тела. У Montserrat 500 файла нет, браузер
   ради двух слов тянул montserrat-600 (20 КБ по проводу). */
.chef__name span {
  display: block; font-family: var(--font-body); font-weight: 500;
  font-size: var(--text-xs); color: var(--color-text-faint);
}
.chef__close {
  flex: none; width: 44px; height: 44px; margin: -10px -10px -10px 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--radius-md); background: transparent;
  color: var(--color-text-faint); cursor: pointer;
}
.chef__close:hover { background: var(--color-surface-offset); color: var(--color-text); }
.chef__msg {
  margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-text);
  animation: chef-in 220ms ease both;
}
.chef__slot:not([hidden]) { margin-top: var(--space-3); }
.chef__cta { width: 100%; margin-top: var(--space-3); }
@keyframes chef-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.rubric { position: fixed; left: var(--space-4); bottom: var(--space-4); z-index: 29; }
/* PRAVKI-2b: список раскрывается ВВЕРХ - вниз ему некуда, он у нижнего края
   экрана и уезжал за него. column-reverse ставит summary под списком.
   PRAVKI-2f: у details с display, отличным от block, браузер перестаёт прятать
   содержимое сам. Замер закрытого виджета: список 184x225 существовал и лез в
   порядок фокуса, его просто резал overflow. Прячем руками. */
.rubric__box:not([open]) .rubric__list { display: none; }
.rubric__box {
  display: flex; flex-direction: column-reverse;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
/* PRAVKI-2c: кнопка круглая и без подписи на любой ширине. С подписью она
   заезжала на угол целевой кнопки блока - утилитарный виджет так себя не
   ведёт. Подпись осталась в разметке, её читает скринридер. */
.rubric__toggle {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; padding: 0; cursor: pointer; list-style: none;
  color: var(--color-text);
}
.rubric__toggle span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
}
.rubric__box { border-radius: var(--radius-full); }
.rubric__box[open] { border-radius: var(--radius-lg); }
/* PRAVKI-2e: раскрытый список шире кнопки, и справа от бургера зияла пустая
   белая полоса. В раскрытом виде кнопка занимает всю строку и показывает
   подпись - заодно видно, чем закрыть. */
.rubric__box[open] .rubric__toggle {
  width: 100%; height: 44px; justify-content: flex-start;
  gap: var(--space-2); padding: 0 var(--space-4);
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-xs);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted);
}
.rubric__box[open] .rubric__toggle span {
  position: static; width: auto; height: auto; clip-path: none;
}
.rubric__toggle::-webkit-details-marker { display: none; }
.rubric__toggle:hover { background: var(--color-surface-offset); }
.rubric__list {
  list-style: none; margin: 0; padding: var(--space-2); min-width: 11.5rem;
  display: grid; gap: 2px; border-bottom: 1px solid var(--color-divider);
}
.rubric__list a {
  display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); font-size: var(--text-xs);
  color: var(--color-text-muted); text-decoration: none;
}
.rubric__list a:hover { background: var(--color-surface-offset); color: var(--color-text); }
.rubric__list a[aria-current] {
  font-weight: 600; color: var(--color-primary-text);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
}
/* Подвалу нужен запас снизу: иначе виджеты в углах накрывают строку копирайта. */
.site-foot { padding-bottom: var(--space-24); }

/* В дизайн-ките оба виджета показаны как обычные блоки - тот же код, но не
   приклеен к углу, иначе они висели бы поверх всей библиотеки. */
.chef-dock--demo, .rubric--demo { position: static; z-index: auto; }
/* PRAVKI-2g: в ките пара медальон-облачко прижималась к правому краю демо, а
   слева зияла дыра: при row-reverse flex-start это ПРАВЫЙ край. Прижимаем
   влево (flex-end по обратной оси) и разворачиваем хвостик облачка к лицу. */
.chef-dock--demo {
  flex-direction: row-reverse; align-items: center;
  justify-content: flex-end; width: auto; gap: var(--space-4);
}
.chef-dock--demo .chef__bubble { width: min(21rem, 100%); }
.chef-dock--demo .chef__bubble::after {
  right: auto; left: -8px; bottom: auto; top: 50%; margin-top: -7px;
  border: 0; border-left: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border); border-radius: 0 0 0 3px;
}
.rubric--demo .rubric__box { width: max-content; }


/* ================================================================ фото
   S15-NOCROP: кадры показываем целиком, кропа нет. Первая редакция подгоняла всё
   под 4:3 и срезала края тары - у съёмки три разные пропорции, семь кадров
   альбомные и три портретные. Ровную сетку держит КВАДРАТНАЯ ячейка, а кадр
   вписывается в неё по большей стороне. object-fit тут намеренно не стоит:
   бокс картинки и есть сам кадр, обрезать нечем.
   S-GALLERY-20260925: восемь кадров партии 25.09, 4 и 2 колонки - делители
   восьми, висячего ряда нет ни на одной ширине. Ячейка, отступы и мобила
   прежние, поменялось только число колонок на широком экране. */
.shots { display: grid; gap: var(--space-4); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.shots__cell { margin: 0; min-width: 0; }
.shots__box { position: relative; aspect-ratio: 1 / 1; }
.shots__img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto; }
.shots__cap { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
@media (max-width: 1080px) {
  .shots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================ адаптив */
@media (max-width: 1080px) {
  .mgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* S8-WHY: с 1080 колонка становится теснее 200 px и пункты разъезжаются
     на пять строк - блок уходит в столбец. Ширина ограничена мерой, иначе
     строка описания на планшете растягивается за 100 знаков. */
  .why,
  .why:has(> :nth-child(5):last-child) { grid-template-columns: minmax(0, 46rem); }
  .why__item { grid-column: 1; }
  .clients { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .hero__in { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .geo { grid-template-columns: 1fr; }
  .cta { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .faq { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .site-head__in { flex-wrap: wrap; row-gap: var(--space-2); }
  .site-head__contacts { align-items: flex-end; }
  .site-head .btn { flex: 1 1 100%; }
  .mgrid { grid-template-columns: 1fr; }
  .seg-grid { grid-template-columns: 1fr; }
  .cx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* S8-WHY: на узком мера уже шире экрана - столбец во всю ширину. */
  .why,
  .why:has(> :nth-child(5):last-child) { grid-template-columns: 1fr; }
  .why__item { grid-column: 1 / -1; }
  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-form__row { grid-template-columns: 1fr; }
  .site-foot__in { grid-template-columns: 1fr; gap: var(--space-6); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


/* ------------------------------------------------- NAOBED-CALC: расчёт для команды */
/* Панель ответа рисуется скриптом, поэтому у неё фиксированный минимум
   высоты: без него блок прыгал на месте, пока считает служба. */
.acalc {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start;
}
.acalc__panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.acalc__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.acalc__panel .calc__set { margin: 0; }
.acalc__panel .btn { align-self: start; }
.acalc__out {
  background: var(--color-surface-offset); border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: var(--space-6);
  display: flex; flex-direction: column; gap: var(--space-2);
  min-height: 12rem; align-self: start; box-shadow: var(--shadow-sm);
}
.acalc__idle, .acalc__msg, .acalc__err {
  margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);
}
.acalc__err { color: var(--color-primary-text); }
.acalc__msg { color: var(--color-text); }
.acalc__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--space-4); margin: 0;
}
.acalc__row > span:first-child { font-size: var(--text-sm); color: var(--color-text-muted); }
.acalc__row b { font-family: var(--font-head); font-weight: 800; white-space: nowrap; }
.acalc__big { font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem); color: var(--color-primary-text); line-height: 1.1; }
.acalc__row--sub b { font-size: var(--text-base); }
.acalc__what {
  margin: 0; font-size: var(--text-sm); color: var(--color-text-muted);
  padding-top: var(--space-2); border-top: 1px dashed var(--color-border);
}
.acalc__what b { font-family: var(--font-body); font-weight: 500; color: var(--color-text); }
.acalc__out .btn { margin-top: var(--space-2); }
.acalc__info { margin: 0; font-size: var(--text-xs); color: var(--color-text-faint); }

/* ---------------------------------------------------------------- PRAVKI-1, адаптив */
@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
  .acalc { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .daytab { flex: 1 1 auto; }
  /* PRAVKI-1h: в колонке flex-basis становится ВЫСОТОЙ - поле адреса раздувалось
     до 16rem и между ним и кнопкой зияла дыра в 200 px. Замер: 358x256. */
  .zone { flex-direction: column; align-items: stretch; }
  .zone__field { flex: 0 0 auto; }
  /* PRAVKI-1i: на узкой карте кнопка занимала всю ширину и накрывала схему. */
  .mapbox__btn { font-size: var(--text-xs); padding: 0 var(--space-4); min-height: 44px; }
  .zone .btn { width: 100%; }
  /* PRAVKI-2: на узком экране виджеты компактнее и жмутся к самым углам,
     облачко раскрывается по тапу почти во всю ширину. */
  .chef-dock { right: var(--space-3); bottom: var(--space-3); width: calc(100vw - 1.5rem); }
  .chef__toggle { width: 60px; height: 60px; }
  .chef__ava { width: 56px; height: 56px; }
  .chef__bubble::after { right: 24px; }
  .rubric { left: var(--space-3); bottom: var(--space-3); }
  .rubric__list a { min-height: 44px; }
  html { scroll-padding-top: 9rem; }
  .calc__total .btn { width: 100%; }
  .acalc__fields { grid-template-columns: 1fr; }
  .acalc__out .btn, .acalc__panel .btn { width: 100%; }
}

/* PRAVKI-1b */

/* PRAVKI-1c */

/* PRAVKI-1d */

/* PRAVKI-1f */

/* PRAVKI-1g */

/* PRAVKI-1h */

/* PRAVKI-1i */

/* PRAVKI-2 */

/* PRAVKI-2b */

/* PRAVKI-2c */

/* PRAVKI-2d */

/* PRAVKI-2e */

/* PRAVKI-2f */

/* ---------------------------------------------------------------- PRAVKI-3: тема */
/* Кнопка солнце-луна в шапке. Показываем ТУ тему, в которую переключит клик:
   в светлой висит луна, в тёмной - солнце. 44px - нижний предел для пальца. */
.theme-btn {
  flex: none; width: 44px; height: 44px; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface-2); color: var(--color-text-muted);
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}
.theme-btn:hover { color: var(--color-primary-text); border-color: var(--color-primary); }
.theme-btn:active { transform: translateY(1px); }
.theme-btn__i { display: block; }
.theme-btn__i--sun { display: none; }
[data-theme="dark"] .theme-btn__i--sun { display: block; }
[data-theme="dark"] .theme-btn__i--moon { display: none; }

/* PRAVKI-3c: подвал тёмный в ОБЕИХ темах, и фирменный тёмный томат в логотипе
   там не читался - на какао это 2.4:1 при норме 3:1 для крупного текста.
   Светлый томат даёт 5.4:1 и не зависит от того, какая тема снаружи. */
.site-foot .logo__txt i { color: var(--brand-tomato-lite); }

/* PRAVKI-2g */


/* ================================================================ S5-PAGES */
/* Многостраничность: навигация в шапке, крошки, слоты под живой текст,
   карточки перелинковки, реквизиты и контакты. Токены те же, своих чисел нет. */

.site-nav { min-width: 0; }
.site-nav__list {
  display: flex; align-items: center; gap: var(--space-5, 1.25rem);
  margin: 0; padding: 0; list-style: none;
}
.site-nav a {
  display: inline-block; padding: var(--space-1) 0; white-space: nowrap;
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-sm);
  color: var(--color-text); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--color-primary-text); }
.site-nav a[aria-current="page"] {
  color: var(--color-primary-text); border-bottom-color: var(--color-primary);
}

/* ---- хлебные крошки */
.crumbs { background: var(--color-surface-offset); border-bottom: 1px solid var(--color-divider); }
.crumbs__list {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: 0; padding: var(--space-3) 0; list-style: none;
  font-size: var(--text-xs); color: var(--color-text-muted);
}
.crumbs__item { display: flex; align-items: center; gap: var(--space-2); }
.crumbs__item + .crumbs__item::before { content: "/"; color: var(--color-text-faint); }
.crumbs a { color: var(--color-text-muted); }
.crumbs a:hover { color: var(--color-primary-text); }
.crumbs [aria-current] { color: var(--color-text); font-weight: 600; }

/* PRAVKI-6: правила .slot удалены вместе с рамкой на экране - слот теперь
   HTML-комментарий. Заглушка под фото (.photo-slot ниже) осталась: она
   вернётся вместе с блоком кухни, когда придут факты и снимок. */

/* ---- шапка страницы.
   Ширину строки ограничиваем ДЕТЯМ, а не самой .wrap: max-width на элементе с
   margin-inline:auto центрирует колонку, и вступление уезжало вправо от всех
   остальных разделов. Замер до правки: h1 начинался на 233 px при левом крае
   секций 50 px. */
.section--intro { padding-block: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.page-intro > * { max-width: 74ch; }
/* Пометка ужата до слова общим правилом .mark выше - здесь дубля больше нет. */
.page-intro h1 { margin-bottom: var(--space-4); }
/* S6-TEXTS-B: одна мера на всю текстовую колонку вступления. 74ch у подводки
   (24px) - это 1110 px, у абзаца (18px) - 814: три абзаца подряд вставали
   лесенкой. Заголовку 74ch оставляем, ему широкая строка идёт. */
.page-intro__lead,
.page-intro__text { max-width: 50rem; }
.page-intro__lead { margin: 0 0 var(--space-4); }
.page-intro__lead:last-child { margin-bottom: 0; }
/* S6-TEXTS: живой текст заказчика абзацами под подводкой. */
.page-intro__text { margin: 0 0 var(--space-4); }
.page-intro__text:last-child { margin-bottom: 0; }

/* ---- условия цифрами */
.facts {
  display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.facts__item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-5, 1.25rem);
}
.facts__big {
  display: block; margin-bottom: var(--space-2);
  font-family: var(--font-head); font-weight: 800; font-size: var(--text-lg);
  color: var(--color-text);
}
.facts__text { color: var(--color-text-muted); font-size: var(--text-sm); }
.facts__note { margin: var(--space-6) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- перелинковка */
.links {
  display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.links__card {
  display: flex; flex-direction: column; gap: var(--space-2); height: 100%;
  padding: var(--space-5, 1.25rem); text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), background var(--transition);
}
.links__card:hover { border-color: var(--color-primary); background: var(--color-surface-2); }
.links__name { font-family: var(--font-head); font-weight: 700; color: var(--color-primary-text); }
.links__text { color: var(--color-text-muted); font-size: var(--text-sm); }

/* ---- реквизиты */
.req {
  display: grid; gap: var(--space-4) var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.req__k {
  display: block; margin-bottom: var(--space-1);
  font-size: var(--text-xs); color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.req__v {
  font-family: var(--font-head); font-weight: 700; color: var(--color-text);
  overflow-wrap: anywhere;
}

/* ---- своя кухня */
.kitchen { display: grid; gap: var(--space-8); grid-template-columns: 1.1fr 0.9fr; align-items: start; }
.kitchen__text h2 { margin-bottom: var(--space-4); }
.photo-slot {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 280px; padding: var(--space-6);
  border: 1.5px dashed var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-surface-offset); color: var(--color-text-faint);
  font-family: var(--font-head); font-weight: 700; font-size: var(--text-sm);
}
.photo-slot i { display: block; margin-top: var(--space-2); font-style: normal; font-weight: 500; }

/* ---- контакты */
.contacts { display: grid; gap: var(--space-8); grid-template-columns: 1fr 1fr; align-items: start; }
.contact-list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.contact-list li {
  display: grid; gap: var(--space-1);
  padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-divider);
}
.contact-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-list__k { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.contact-list__v { font-family: var(--font-head); font-weight: 700; font-size: var(--text-lg); color: var(--color-text); }

/* ---- ссылка на полный FAQ и текущий район в списке зон */
.faq__more { margin: var(--space-6) 0 0; font-family: var(--font-head); font-weight: 700; }
.geo__here { color: var(--color-text); }
.geo__here span {
  margin-inline-start: var(--space-2); font-size: var(--text-xs);
  color: var(--color-text-muted); font-weight: 400;
}

/* ---- адаптив навигации.
   До 1100 полоса разделов уходит на свою строку, ниже 720 делит строку с
   кнопкой заказа: третий ряд в липкой шапке съедал бы пятую часть экрана. */
@media (max-width: 1100px) {
  .site-head__in { flex-wrap: wrap; }
  .site-nav { order: 3; flex: 1 1 100%; overflow-x: auto; }
  .site-head__cta { order: 4; }
}
@media (max-width: 720px) {
  /* Полосу разделов убираем: на 390 она уводила кнопку заказа на третий ряд, и
     липкая шапка вырастала со 122 до 168 px (21% экрана). Навигацию по сайту
     тут несёт сквозной рубрикатор - он для этого и сделан, - плюс подвал. */
  .site-nav { display: none; }
  .kitchen { grid-template-columns: 1fr; }
  .contacts { grid-template-columns: 1fr; }
  .req { gap: var(--space-4); }
}

/* ================================================================ PRAVKI-7 */

/* п.16, ТОЛЬКО ДЕСКТОП: фото еды целиком в первом экране.
   Было: левая колонка вместе с формой заявки - 954 px, фото выровнено по её
   центру и потому начиналось на 380 px (замер 1366x768: низ кадра 835 при
   окне 768, в живом браузере окно ещё меньше на высоту его панелей).
   Стало: фото прижато к верху сетки, а форма встала под него во вторую
   строку правой колонки - это и подняло кадр, и закрыло пустоту, которая
   иначе осталась бы справа. Разметка одна на все ширины, на узком экране
   порядок прежний (фото, текст, форма) - мобилу правка не трогает.
   Страховка для низких окон: кадр не выше окна минус шапка с полями. */
.hero__facts { margin-bottom: 0; }

@media (min-width: 901px) {
  .hero__in { align-items: start; row-gap: var(--space-8); }
  .hero__text { grid-column: 1; grid-row: 1; }
  .hero__media { grid-column: 2; grid-row: 1; }
  .hero__media .photo { max-height: calc(100svh - 15rem); object-fit: cover; }
  /* Форма шире колонки: под фото она оставляла слева дыру в 283 px (кадр с
     заявкой выше текстовой колонки на эту разницу). Полосой на всю ширину
     она эту разницу забирает себе, а поля становятся в один ряд. */
  .hero__form { grid-column: 1 / -1; grid-row: 2; }
}

/* Полосой заявка встаёт в одну строку: три поля и кнопка справа от них,
   выровненная по нижнему краю полей. Ниже 1140 px в строку они не лезут:
   на 960 подпись "Компания и сколько человек кормим" вставала в две строки и
   роняла третье поле ниже соседей - там форма остаётся обычной, в два поля. */
@media (min-width: 1140px) {
  .hero__form .lead-form {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-6); align-items: end;
  }
  .hero__form .lead-form__title { grid-column: 1 / -1; }
  .hero__form .lead-form__row {
    grid-column: 1; margin-bottom: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hero__form .field--wide { grid-column: auto; }
  .hero__form .lead-form .btn { grid-column: 2; width: auto; min-width: 15rem; }
  .hero__form .lead-form__note { grid-column: 1 / -1; margin: var(--space-3) 0 0; }
}

/* п.20: логотипы клиентов.
   Лого фирменные и темой не перекрашиваются (у половины тёмная краска),
   поэтому каждому дана тёплая плашка - тем же приёмом, что подложка знака в
   тёмном подвале и медальон у иконок. Высота лого приходит из разметки
   (--logo-h): у широкого лого при равной высоте оптический вес больше. */
.clients { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-3); }
.client {
  background: #FFFDF8; border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); min-height: 112px; padding: var(--space-4);
}
.client .client__logo {
  width: auto; max-width: 100%; height: var(--logo-h, 34px);
  object-fit: contain; opacity: 1;
}
/* Плашка светлая в обеих темах, в тёмной - на тон теплее и с рамкой погуще,
   иначе пять белых прямоугольников выжигают тёмную страницу. */
[data-theme="dark"] .client { background: #F7EFE3; border-color: #6E5B49; }
/* PRAVKI-7b */

/* PRAVKI-PASHA п11: клиентов стало шесть. Шестидольная сетка с долей на две
   даёт два ровных ряда по три; добор последней пары до трёх долей (он закрывал
   ряд при пяти карточках) больше не нужен - иначе шестая осталась бы одна. */
@media (max-width: 1080px) {
  .clients { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .client { grid-column: span 2; }
}

@media (max-width: 720px) {
  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .client { grid-column: span 1; }
  .client:last-child:nth-child(odd) { grid-column: span 2; }
}

/* S7-HEAD (найдено рендером по ходу пачки 16-20, до правки было так же):
   между 901 и 1220 px шапке не хватает ширины - логотип рвался на три строки
   ("На / обед / в буфет"), кнопка заказа налезала на пункт "Контакты".
   Ширина берётся из зазоров и кегля навигации, а не из самих слов. */
@media (min-width: 901px) and (max-width: 1219px) {
  .site-head__in { gap: var(--space-3); }
  .site-nav__list { gap: var(--space-4); }
  .site-nav a { font-size: 0.8125rem; }
  .logo { gap: var(--space-2); }
  .logo__txt b, .logo__txt i { white-space: nowrap; }
  .site-head .btn { padding: 0 var(--space-4); white-space: nowrap; font-size: 0.8125rem; }
  .site-head__phone { font-size: 0.95rem; }
}


/* PRAVKI-PASHA п6: правило бейджа кухни убрано вместе с самим бейджем -
   пометка у восточной кухни снята по правке заказчика, других нет. */

/* CHEF375-S1: повар на телефоне. Развёрнутое облачко занимало 351x246 - треть
   экрана 375x667 - и ложилось на текст первого экрана и на поля формы заявки
   (замер: под карточкой оказывались company, people и кнопка "Заказать
   звонок"). Слово заказчика "облачко открыто сразу" оставлено в силе, но на
   телефоне оно теперь здоровается ОДНОЙ строкой рядом с медальоном. Полный
   вид - по тапу по медальону (класс chef-dock--open), как и на десктопе.
   Дизайн-кит (chef-dock--demo) не трогаем: там виджет экспонат, а не угол. */
@media (max-width: 480px) {
  .chef-dock:not(.chef-dock--demo) {
    width: auto; max-width: calc(100vw - 1.5rem); gap: var(--space-2);
  }
  .chef-dock:not(.chef-dock--demo):not(.chef-dock--open) .chef__bubble {
    max-width: 62vw; margin-left: auto;
    padding: var(--space-2) var(--space-3);
  }
  .chef-dock:not(.chef-dock--demo):not(.chef-dock--open) .chef__top,
  .chef-dock:not(.chef-dock--demo):not(.chef-dock--open) .chef__cta,
  .chef-dock:not(.chef-dock--demo):not(.chef-dock--open) .chef__slot {
    display: none;
  }
  /* одна строка с многоточием: длинная реплика не раздувает плашку в блок */
  .chef-dock:not(.chef-dock--demo):not(.chef-dock--open) .chef__msg {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden; font-size: var(--text-xs); line-height: 1.4;
  }
  .chef-dock:not(.chef-dock--demo).chef-dock--open .chef__bubble {
    width: calc(100vw - 1.5rem);
  }
}