/* Базовая типографика, сетка и общие элементы витрины. */
@import url("tokens.2f7869cb784e.css");

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: var(--tracking);
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

/* Видимый фокус обязателен: без него с клавиатуры по сайту не пройти,
 * а стандартную обводку браузера мы всё равно перекрашиваем. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* На фирменном тёмном фоне тёмная рамка сливается — там медь и нужна. */
.hero, .tabbar, .btn, .card__buy, .drawer__city.is-active { --focus: var(--accent); }

h1, h2, h3 { font-weight: 400; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(26px, 4vw, 40px); }
h2 { font-size: clamp(20px, 3vw, 28px); }
h3 { font-size: 18px; }

.caps {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 500;
}
.muted { color: var(--ink-mute); }
.small { font-size: 14px; }
.tiny  { font-size: 12px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Поля по краям растут со скоростью экрана. Фиксированные 16px на
 * телефоне прижимали строку к самому краю: текст от этого читается
 * заметно хуже, чем видно на макете. */
:root { --gutter: var(--s5); }
@media (max-width: 1080px) { :root { --gutter: var(--s5); } }
@media (max-width: 720px)  { :root { --gutter: 20px; } }
@media (max-width: 380px)  { :root { --gutter: var(--s4); } }

.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s4); align-items: center; }
.row--between { justify-content: space-between; }
.grow { flex: 1; }

/* --- Кнопки ---
 *
 * Форма одна на весь сайт — таблетка. Прямоугольник с еле заметным
 * скруглением читался как «не доделали»; таблетка читается как
 * решение, и она же связывает кнопки с полями ввода.
 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 14px var(--s6);
  border: 1px solid var(--brand);
  border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font-size: 13px; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
/* Нажатие должно ощущаться, а не только меняться в цвете. */
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--white); border-color: var(--white); }
.btn--quiet { background: var(--cream-soft); border-color: var(--cream-soft); color: var(--ink); }
.btn--quiet:hover { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.btn--wide { width: 100%; }
.btn--sm { padding: 9px var(--s5); font-size: 11px; }
.btn--pill { border-radius: var(--r-pill); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* Стрелка внутри кнопки: уезжает вбок при наведении — движение
 * подсказывает, что кнопка ведёт дальше, а не совершает действие. */
.btn__arrow { transition: transform var(--base) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --- Поля --- */
.field { display: block; }
.field__label {
  display: block; font-size: 12px; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); color: var(--ink-mute);
  margin-bottom: var(--s2);
}
.input, select.input, textarea.input {
  width: 100%; padding: 12px var(--s3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--white); font: inherit; color: var(--ink);
  transition: border-color .2s var(--ease);
}
.input:focus { border-color: var(--ink); outline: none; }
.input::placeholder { color: var(--ink-mute); }
.field__error { color: var(--sale); font-size: 13px; margin-top: var(--s2); }

/* --- Плашки --- */
.badge {
  display: inline-block; padding: 4px var(--s2);
  font-size: 11px; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  background: var(--ink); color: var(--white); border-radius: var(--radius);
}
.badge--sale { background: var(--sale); }
.badge--soft { background: var(--beige); color: var(--ink); }
/* Плашка «под заказ» лежит на бежевой подложке карточки, поэтому фон
 * у неё белый: бежевое на бежевом не читается вовсе. */
.badge--out  { background: var(--white); color: var(--ink-soft); }

/* --- Сообщения --- */
.alert {
  padding: var(--s3) var(--s4); border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--sand); font-size: 14px;
}
.alert--error { border-color: var(--error-line); background: var(--error-bg); color: var(--error-ink); }
.alert--ok { border-color: var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }

/* --- Пустые состояния ---
 * Пустой раздел без объяснения выглядит как поломка. Поэтому у каждого
 * списка на сайте есть этот блок. */
.empty { text-align: center; padding: var(--s9) var(--s4); color: var(--ink-soft); }
.empty__title { font-size: 20px; margin-bottom: var(--s2); }

.section { padding: var(--s8) 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--s5); gap: var(--s4); }
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Поле, на которое ругается сервер: человек должен видеть, что менять. */
.input--bad { border-color: var(--sale); background: #fdf7f6; }

/* Атрибут hidden отменяется любым display в правилах — а display мы
 * задаём почти всему. Из-за этого значок корзины рисовал «0» при
 * пустой корзине на каждой странице. Скрытое должно быть скрытым. */
[hidden] { display: none !important; }

/* --- Согласие на обработку данных ---
 *
 * Отметка, а не строчка мелким шрифтом под кнопкой: с сентября 2025
 * согласие должно быть отдельным действием человека, а не следствием
 * нажатия кнопки, которую он нажал бы в любом случае.
 *
 * Квадратик не уменьшаем: по маленькой цели на телефоне не попасть,
 * а форма без отметки не отправится — и человек не поймёт почему. */
.consent {
  display: grid; grid-template-columns: auto 1fr; gap: var(--s3);
  align-items: start; margin-top: var(--s4);
  font-size: 13px; line-height: 1.45; color: var(--ink-soft);
}
.consent input { width: 18px; height: 18px; margin-top: 1px; flex: none; }
.consent__text a { color: var(--accent-ink); border-bottom: 1px solid currentColor; }