/* КРАФТТ — стили страницы.
   Цвета, шрифты и ритм берутся только из assets/css/tokens.css.
   Здесь нет ни одного сырого цвета — иначе перекраска перестанет быть точечной. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  --header-h: 3.4rem;
  margin: 0;
  font-family: var(--font-text);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  background: var(--surface);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.15; margin: 0; }
p { margin: 0 0 var(--step-2); }
ul { margin: 0; padding: 0; list-style: none; }
/* Скрытием управляет скрипт через hidden. Контейнеры ниже раздают display,
   а он сильнее встроенного правила для [hidden] — поэтому перебиваем явно. */
[hidden] { display: none !important; }

/* ── Служебное ───────────────────────────────────────────────────── */
.skip-link {
  position: absolute; left: -9999px; top: var(--step-2);
  background: var(--accent); color: var(--text-on-accent);
  padding: var(--step-1) var(--step-2); border-radius: var(--radius-sm); z-index: 10;
}
.skip-link:focus { left: var(--step-2); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ── Шапка ───────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--step-3);
  padding: var(--step-2) var(--step-3);
  background: color-mix(in srgb, var(--brand-ink-900) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--brand-ink-600);
}
.site-header__mark { font-size: 1.05rem; text-decoration: none; }
.site-nav { display: flex; gap: var(--step-3); flex-wrap: wrap; }
.site-nav a {
  color: var(--brand-wood-100); text-decoration: none; font-size: 0.95rem;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--accent); }
.site-header__actions { display: flex; align-items: center; gap: var(--step-3); }
.site-header__phone { color: var(--brand-gold-100); text-decoration: none; font-weight: 700; white-space: nowrap; }
.site-header__phone:hover { color: var(--accent); }
@media (max-width: 46rem) { .site-nav { display: none; } }

/* ── Первый экран ────────────────────────────────────────────────
   Фотография заполняет экран, текст стоит слева, поверх тёмной подложки.
   Плотность подложки подобрана по САМОЙ СВЕТЛОЙ точке под текстом
   (расплавленный сыр), а не по среднему: без неё контраст падает до 1.0:1,
   то есть текст исчезает. С подложкой худшая точка даёт около 6:1. */
.hero {
  position: relative; isolation: isolate;
  /* Полная высота экрана. Шапка липкая и стоит в потоке, поэтому её высота
     вычитается: иначе стрелка внизу оказывается за краем экрана.
     svh вместо vh — из-за адресной строки на телефонах. */
  min-height: calc(100vh - var(--header-h));
  min-height: calc(100svh - var(--header-h));
  display: grid; align-items: center; justify-items: start;
  padding: var(--step-5) var(--step-4);
  background: var(--brand-ink-800);
  overflow: hidden;
}
.hero__media { position: absolute; inset: 0; z-index: -1; }
.hero__media img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
  /* Смещение вправо: слева место под текст, справа пицца.
     На узком экране это же смещение не даёт кадру съехать на один сыр. */
  object-position: 62% center;
}
/* Подложка под текстом: тёмное слева, чистая фотография справа. */
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(10, 9, 8, 0.88) 0%,
    rgba(10, 9, 8, 0.50) 64%,
    rgba(10, 9, 8, 0) 82%);
}
.hero__inner { position: relative; max-width: 32rem; text-align: left; }
/* Название и строка под ним читаются как единый блок, поэтому разрыв минимальный. */
.hero__title { font-size: clamp(2.6rem, 1.5rem + 5.5vw, 6rem); margin-bottom: 0.35rem; }
.hero__since {
  font-size: clamp(1.2rem, 1rem + 1vw, 1.9rem);
  font-weight: 600;
  color: var(--brand-wood-100);
  /* 3.65rem = прежние 2.5rem плюс 1.15rem, снятые с отступа под названием:
     блок стал плотнее, а кнопка осталась ровно там же, где стояла. */
  margin-bottom: 3.65rem;
}

/* Десктоп: композиция кадра.
   1) Кадр слегка сдвинут вправо. object-position тут бессилен: при таких
      пропорциях картинка масштабируется по ширине и обрезается только сверху и снизу,
      то есть горизонтально двигать нечего. Сдвиг делается шириной 106%:
      лишнее уходит за правый край, содержимое смещается вправо.
      Больше 106% брать нельзя — начнёт срезаться правый край пиццы.
   2) Текстовый блок опущен вниз: вверху слева по кадру идёт светлая лопатка,
      а ниже 44% высоты кадра тень чистая, там название садится на тёмное. */
@media (min-width: 64.01rem) {
  /* Блок привязан к доле высоты, а не к низу экрана: тёмная полоса задана
     в координатах кадра, а кадр обрезается по высоте по-разному при разных окнах.
     Привязка к низу разъезжалась уже на 1600. */
  .hero { align-items: start; padding-top: 42svh; }
  .hero__media img { width: 106%; object-position: left center; }
}

/* Телефон: кадр остаётся вертикальным, поэтому подложка тоже становится
   вертикальной — тёмный верх под текстом, чистая пицца снизу. */
@media (max-width: 64rem) {
  .hero { align-items: start; padding-top: var(--step-5); }
  .hero__inner { max-width: none; }
  .hero__media::after {
    background: linear-gradient(to bottom,
      rgba(10, 9, 8, 0.95) 0%,
      rgba(10, 9, 8, 0.65) 62%,
      rgba(10, 9, 8, 0) 88%);
  }
}

/* ── Кнопка ──────────────────────────────────────────────────────── */
.button {
  display: inline-block;
  font: inherit; border: 0; cursor: pointer; padding: var(--step-2) var(--step-4);
  background: var(--accent); color: var(--text-on-accent);
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  transition: background 0.18s ease, transform 0.18s ease;
}
.button:hover { background: var(--accent-hover); transform: translateY(-1px); }
.button:active { background: var(--accent-pressed); transform: none; }

/* ── Секции ──────────────────────────────────────────────────────── */
.section { background: var(--surface); color: var(--text); padding: var(--step-6) var(--step-3); }
.section--about { background: var(--brand-ink-800); }
.section__inner { max-width: 68rem; margin-inline: auto; }
.section__title {
  font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem);
  font-weight: 700; margin-bottom: var(--step-3);
}
.section__lead { max-width: 44rem; color: var(--text-muted); margin-bottom: var(--step-5); }
.section__note { color: var(--text-muted); margin-top: var(--step-3); }

/* ── Заглушки изображений ────────────────────────────────────────
   Оформлены как задуманный элемент: тёплая диагональная фактура,
   золотая рамка-волосок и подпись, что здесь появится. */
.placeholder {
  position: relative; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-md);
  background:
    var(--glow-warm),
    repeating-linear-gradient(115deg,
      color-mix(in srgb, var(--surface-sunken) 90%, var(--accent)) 0 14px,
      var(--surface-sunken) 14px 28px);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.placeholder--tall { aspect-ratio: 4 / 5; }
.placeholder__note {
  position: relative;
  font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--brand-gold-100);
  background: color-mix(in srgb, var(--brand-ink-900) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-gold-500) 40%, transparent);
  padding: var(--step-1) var(--step-2); border-radius: 999px;
  text-align: center;
}

/* ── Кто мы ──────────────────────────────────────────────────────── */
.section__inner--split {
  display: grid; gap: var(--step-5);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
}
@media (max-width: 52rem) { .section__inner--split { grid-template-columns: 1fr; } }
.about__text .lead { font-size: 1.2rem; font-weight: 600; }
.about__text p { color: var(--text-muted); max-width: 40rem; }
.about__text .lead { color: var(--text); }

/* ── Секция «Пицца»: главный раздел страницы ─────────────────────
   Карточки крупные: фотография еды должна быть аппетитной, а не миниатюрой.
   Минимальная ширина колонки 17rem, поэтому на широком экране их 4–5 в ряд,
   на планшете 3, на телефоне 1–2. */
.section--pizza { background: var(--surface-sunken); }
.section__inner--wide { max-width: 82rem; }

.pizza-grid {
  display: grid; gap: var(--step-3);
  /* Ровно четыре в ряд: восемь карточек дают два полных ряда без обрыва. */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: var(--step-4);
}
@media (max-width: 64rem) { .pizza-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 34rem) { .pizza-grid { grid-template-columns: 1fr; } }
.pizza-card {
  position: relative;               /* точка отсчёта для растянутой ссылки, см. ниже */
  display: flex; flex-direction: column;
  height: 100%;                     /* карточка занимает всю высоту строки сетки */
  background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.pizza-card:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-2px); }
.pizza-card__media {
  border: 0; border-radius: 0;
  aspect-ratio: 1 / 1;              /* карточки квадратные, кадры сняты 1:1 */
  width: 100%; height: auto; display: block;
  object-fit: cover;
}
.pizza-card__body {
  display: flex; flex-direction: column; gap: var(--step-2);
  align-items: flex-start;
  padding: var(--step-3);
  flex: 1;                          /* тело тянется, чтобы «Заказать» ушло вниз */
}
.pizza-card__name { font-size: 1.25rem; font-weight: 700; }
/* Место под подпись «фирменная» резервируется во ВСЕХ карточках, иначе она
   сдвигает название вниз только у одной, и ряд перестаёт читаться линией.
   Селектор :first-child срабатывает там, где подписи нет. */
.pizza-card__body > .pizza-card__name:first-child::before {
  content: ""; display: block;
  height: calc(1.1rem + var(--step-2));
}
/* Это <button>, а не ссылка: нажатие кладёт позицию в корзину, а не уводит со страницы.
   Собственный вид кнопки сброшен — в ряду карточек нужна строка, а не серая плашка. */
.pizza-card__order {
  margin-top: auto;                 /* прижато к низу: подписи выстроены в одну линию */
  font: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: color 0.18s ease;
}
/* Подтверждение нажатия. Без него непонятно, легла позиция в корзину или нет:
   счётчик стоит в шапке и в этот момент может быть за краем экрана. */
.pizza-card__order.is-added { color: var(--brand-gold-100); }
.pizza-card__order.is-added::before { content: "Добавлено — "; }
.pizza-card__order:hover { color: var(--accent-hover); border-bottom-color: currentColor; }
/* Вся карточка — одна большая мишень: ссылка «Заказать» растягивается на всю
   её площадь. Ссылка остаётся ровно одна, поэтому клавиатура и озвучка получают
   один понятный переход, а не восемь одинаковых «Заказать» подряд.
   ВАЖНО: других ссылок и кнопок внутри карточки быть не должно —
   они окажутся под этим слоем и перестанут нажиматься. */
.pizza-card__order::after { content: ""; position: absolute; inset: 0; }
/* Наведение на любую часть карточки подсвечивает и саму ссылку: иначе
   карточка нажимается, но выглядит неактивной. */
.pizza-card:hover .pizza-card__order { color: var(--accent-hover); border-bottom-color: currentColor; }
/* Обводка от клавиатуры рисуется по всей карточке, а не по двум словам внизу. */
.pizza-card:has(.pizza-card__order:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.pizza-card__order:focus-visible { outline: none; }

/* Фирменная: та же величина и та же рамка, что у остальных.
   Золотая рамка с подсветкой снята 20.08.2026 — выделяет только подпись.
   Причина: восемь позиций в ряд, и обведённая карточка читалась как
   единственная настоящая, а остальные — как её фон. */
.pizza-card__badge {
  margin: 0; line-height: 1.1rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
}


/* ── Почему мы: одна композиция во всю ширину ─────────────────────
   Кадр лежит во всю ширину секции, текст стоит слева на тёмной части кадра.

   КОНТРАСТ ПОСЧИТАН ПО ХУДШЕЙ ТОЧКЕ, а не по среднему и не на глаз.
   Замер идёт по самому светлому пикселю под ВСЕМ текстовым блоком: блок
   занимает по горизонтали от 5% до 45% ширины кадра, по вертикали — весь кадр
   целиком, потому что при разной высоте окна кадр обрезается сверху и снизу
   по-разному, и заранее неизвестно, какая полоса окажется под текстом.
     без подложки            2.33:1  — на светлой точке текст пропадает;
     с подложкой ниже        6.61:1  — худшая точка, доля 45.7% ширины кадра.
   Приглушённый --text-muted в той же точке даёт 3.35:1 и порог не проходит,
   поэтому весь текст секции набран основным --text. Замер — в РЕШЕНИЯ.md.

   ДВА ОГРАНИЧЕНИЯ, которые нельзя двигать по отдельности:
   1) правый край текста не заходит за 45vw (5vw отступ + не более 40vw ширины);
   2) стопы градиента ниже. Сдвинуть первое без пересчёта второго —
      значит вынести текст на печь, где подложки уже почти нет. */
.why {
  position: relative; isolation: isolate;
  background: var(--surface);
  display: grid; align-items: center;
  /* Высота задана долей ШИРИНЫ, а не содержимым. Пока секция шире 16:9,
     object-fit: cover обрезает кадр только сверху и снизу, и тёмная левая
     часть остаётся в кадре при любой ширине окна. При высоте от содержимого
     на узком окне cover срезал бы кадр по горизонтали, и текст оказался бы
     на кирпичной печи. */
  min-height: clamp(24rem, 46vw, 38rem);
  padding: var(--step-5) 0;
  overflow: hidden;
}
.why__media { position: absolute; inset: 0; z-index: -1; }
.why__media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
/* Подложка под текстом: тёмное слева, чистый кадр справа.
   К 62% ширины подложка сходит на нет — пекарь и печь остаются как сняты. */
.why__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to right,
    rgba(10, 9, 8, 0.94) 0%,
    rgba(10, 9, 8, 0.86) 26%,
    rgba(10, 9, 8, 0.55) 44%,
    rgba(10, 9, 8, 0) 62%);
}
.why__inner {
  position: relative;
  width: min(34rem, 40vw);
  margin-inline-start: 5vw;
  padding-inline-end: var(--step-3);
}
.why__lead {
  font-size: clamp(1.15rem, 0.9rem + 1.1vw, 1.6rem);
  font-weight: 700; color: var(--text);
  margin-bottom: var(--step-2);
}
.why p { color: var(--text); }
.why p:last-child { margin: 0; }

/* Телефон и планшет: композиция раскладывается на кадр и текст под ним.
   Наложить текст на кадр здесь нечем — тёмная часть слева, а на узком экране
   она уходит из кадра первой. Текст садится на сплошную тёмную поверхность,
   и вопрос контраста снимается совсем. */
@media (max-width: 64rem) {
  .why { display: block; min-height: 0; padding: 0; }
  .why__media { position: static; z-index: auto; }
  .why__media img { height: auto; }
  .why__media::after { content: none; }
  .why__inner {
    width: auto; margin-inline-start: 0;
    padding: var(--step-5) var(--step-3);
    background: var(--surface-sunken);
  }
}

/* ── Секция заказа ──────────────────────────────────────────────── */
.section--order { background: var(--surface-raised); }
.order {
  display: grid; gap: var(--step-5);
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 52rem) { .order { grid-template-columns: 1fr; } }
.order__note { color: var(--text-muted); max-width: 30rem; margin-bottom: var(--step-4); }

/* Колонка формы ограничена и стоит по центру своей стороны.
   420 px — потому что длинная строка ввода не помогает: глаз теряет,
   к какому полю относится подпись, а адрес и имя короткие по сути. */
.order-form {
  display: grid; gap: var(--step-3);
  max-width: 420px;
  margin-inline: auto;
}
.field { display: grid; gap: 6px; }
.field__label { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.field__input {
  font: inherit; color: var(--text);
  background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--step-2);
  /* Ширина по колонке, а внутренние отступы считаются внутрь этой ширины.
     Без border-box padding прибавился бы к 100% и выдавил поле за край. */
  width: 100%;
  box-sizing: border-box;
}
.field__input:focus-visible { border-color: var(--accent); }
.field__hint { margin: 0; font-size: 0.85rem; color: var(--brand-gold-300); }
.field__hint[hidden] { display: none; }
.order-form .button { justify-self: start; }
.order-form__status {
  margin: 0; padding: var(--step-2);
  font-weight: 600; color: var(--brand-gold-100);
  background: color-mix(in srgb, var(--brand-gold-500) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand-gold-500) 40%, transparent);
  border-radius: var(--radius-md);
}
/* Отказ выглядит иначе, чем успех: одинаковая плашка на «Спасибо» и на
   «не отправилось» — это способ не заметить, что заказ не ушёл. */
.order-form__status--error {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-green-700) 22%, transparent);
  border-color: color-mix(in srgb, var(--brand-wood-400) 45%, transparent);
}
.order-form__status[hidden] { display: none; }

/* Телефон рядом с формой: многие звонят, а не заполняют поля. */
.order__call {
  padding: var(--step-4);
  background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.order__call-label { font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--step-1); }
.order__call-note { color: var(--text-muted); font-size: 0.95rem; margin: var(--step-2) 0 0; }
.phone {
  display: inline-block;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.3rem);
  font-weight: 700; letter-spacing: 0.02em;
  color: var(--brand-gold-100); text-decoration: none;
}
.phone:hover { color: var(--accent); }


/* ── Корзина ─────────────────────────────────────────────────────
   Счётчик в шапке он же кнопка: отдельная иконка рядом со счётчиком
   означала бы две мишени для одного действия. */
.cart-button {
  display: inline-flex; align-items: center; gap: var(--step-1);
  font: inherit; cursor: pointer;
  font-size: 0.9rem; font-weight: 700;
  color: var(--brand-wood-100);
  background: none;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px var(--step-2);
  transition: border-color 0.18s ease, color 0.18s ease;
}
.cart-button:hover { border-color: var(--accent); color: var(--brand-gold-100); }
.cart-button__count {
  display: inline-grid; place-items: center;
  min-width: 1.5rem; height: 1.5rem; padding: 0 5px;
  font-size: 0.8rem; font-weight: 700; line-height: 1;
  color: var(--text-on-accent); background: var(--accent);
  border-radius: 999px;
}
@media (max-width: 30rem) {
  /* На узком экране слово уходит, счётчик остаётся: мишень та же, места меньше. */
  .cart-button { font-size: 0; gap: 0; padding: 5px; border-color: transparent; }
}

.cart {
  width: min(30rem, calc(100vw - 2 * var(--step-3)));
  padding: var(--step-4);
  color: var(--text);
  background: var(--surface-raised);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}
.cart::backdrop { background: rgba(10, 9, 8, 0.72); }
.cart__head { display: flex; align-items: center; justify-content: space-between; gap: var(--step-3); margin-bottom: var(--step-3); }
.cart__title { font-size: 1.4rem; font-weight: 700; }
.cart__close {
  font: inherit; cursor: pointer; line-height: 1;
  font-size: 1.6rem; color: var(--text-muted);
  background: none; border: 0; padding: 0 4px;
}
.cart__close:hover { color: var(--text); }
.cart__empty { color: var(--text-muted); margin: 0; }
.cart__empty a { color: var(--accent); }
.cart__list { display: grid; gap: 0; }
.cart__checkout { margin-top: var(--step-4); }

.cart-item {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--step-2);
  padding: var(--step-2) 0;
  border-top: 1px solid var(--border);
}
.cart-item:last-child { border-bottom: 1px solid var(--border); }
.cart-item__name { font-weight: 600; }
.cart-item__qty { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.cart-item__remove {
  font: inherit; cursor: pointer; line-height: 1;
  font-size: 1.3rem; color: var(--text-muted);
  background: none; border: 1px solid transparent; border-radius: 999px;
  width: 1.9rem; height: 1.9rem;
}
.cart-item__remove:hover { color: var(--text); border-color: var(--border); }

/* ── Состав заказа над формой ────────────────────────────────────
   Список рисует скрипт из корзины: это отражение, а не второй источник правды. */
.order-summary {
  margin-bottom: var(--step-4);
  padding: var(--step-3);
  background: var(--surface-sunken);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.order-summary__title {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: var(--step-2);
}
.order-summary__list { display: grid; gap: var(--step-1); }
.order-summary__row { display: flex; justify-content: space-between; gap: var(--step-3); }
.order-summary__qty { color: var(--text-muted); white-space: nowrap; }

/* ── Поля адреса ─────────────────────────────────────────────────── */
.field-group { border: 0; padding: 0; margin: 0; display: grid; gap: var(--step-3); }
.field-group__legend {
  padding: 0; margin-bottom: var(--step-1);
  font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.field-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--step-2); }
@media (max-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }
.field__optional { text-transform: none; letter-spacing: 0; opacity: 0.7; }
.field__input--area { resize: vertical; min-height: 4.5rem; font-family: inherit; }
.field__input[aria-invalid="true"] { border-color: var(--brand-gold-300); }

/* ── Пустой заказ ───────────────────────────────────────────────── */
.order__empty .button { margin-top: var(--step-2); }

/* Узкий экран: колонка занимает всю ширину минус поля по 16 px с боков.
   Поля задаются секцией, а не формой: иначе рамка полей уехала бы внутрь,
   а заголовок и состав заказа остались бы шире неё. */
@media (max-width: 480px) {
  .section--order { padding-inline: 16px; }
  .order-form { max-width: none; }
}

/* ── Контакты ──────────────────────────────────────────────────── */
.section--contacts { background: var(--surface-sunken); }

/* ── Контакты, детали ────────────────────────────────────────────────────── */
.address { font-style: normal; display: grid; gap: 2px; }
.address__city { font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.address__street { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.2rem); font-weight: 700; }
.address__phone {
  margin-top: var(--step-2);
  font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); font-weight: 700;
  color: var(--accent); text-decoration: none;
}
.address__phone:hover { color: var(--accent-hover); }

/* ── Подвал ──────────────────────────────────────────────────────── */
.site-footer { background: var(--brand-ink-900); color: var(--brand-wood-100); padding: var(--step-4) var(--step-3); }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--step-3); flex-wrap: wrap; }
.site-footer__mark { font-size: 0.95rem; }
.site-footer__years { color: var(--text-muted); font-size: 0.9rem; }


/* ── Согласие на обработку данных ────────────────────────────────
   Мишень — вся строка вместе с текстом, а не квадратик 13×13. */
.field--consent { gap: var(--step-1); }
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: var(--step-2);
  align-items: start; cursor: pointer;
}
.consent__box {
  width: 1.15rem; height: 1.15rem; margin: 0.2rem 0 0;
  accent-color: var(--accent); cursor: pointer;
}
.consent__text { font-size: 0.95rem; color: var(--text-muted); }
.consent__text a { color: var(--accent); }
.consent__text a:hover { color: var(--accent-hover); }
/* Непоставленная галочка после нажатия «Отправить»: обводка ведёт глаз к причине. */
.consent__box[aria-invalid="true"] { outline: 2px solid var(--brand-gold-300); outline-offset: 3px; }

/* ── Документ: политика обработки ────────────────────────────────
   Узкая колонка: юридический текст читают строками, а не абзацами во всю ширину. */
.doc { max-width: 44rem; margin-inline: auto; }
.doc__title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem); font-weight: 700; margin-bottom: var(--step-3); }
.doc__lead { color: var(--text); font-size: 1.1rem; margin-bottom: var(--step-5); }
.doc h2 {
  font-size: 1.15rem; font-weight: 700;
  margin: var(--step-5) 0 var(--step-2);
  padding-top: var(--step-3);
  border-top: 1px solid var(--border);
}
.doc p { color: var(--text-muted); }
.doc__list { display: grid; gap: var(--step-1); margin: 0 0 var(--step-2); padding-left: var(--step-3); }
.doc__list li { color: var(--text-muted); list-style: disc; }
.doc__date { margin-top: var(--step-5); color: var(--text-muted); font-size: 0.9rem; }
.doc__back { color: var(--accent); }
/* Ссылки внутри документа (почта для обращений). Глобального правила для ссылок
   на сайте нет, и без этой строки браузер нарисовал бы их своим синим —
   на тёмном фоне он нечитаем. Цвет тот же, что у остальных ссылок сайта. */
.doc a { color: var(--accent); }
.doc a:hover { color: var(--accent-hover); }

/* ── Ссылка на политику в подвале ───────────────────────────────── */
.site-footer__policy {
  color: var(--text-muted); font-size: 0.9rem; text-decoration: none;
  border-bottom: 1px solid transparent;
}
.site-footer__policy:hover { color: var(--brand-wood-100); border-bottom-color: var(--border); }

/* ── Появление секций ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}