/* ============================================================
   «Магазин дверей» — стили сайта.
   Токены: css/tokens.css (копия design/tokens.css).
   Бриф: design/DESIGN.md — утилитарный каталог (ориентир dveribravo.ru):
   белый фон, чёрный текст, TildaSans, компактная шапка с текстовым
   названием, фильтры в левой колонке, плотная сетка карточек,
   один акцент — глубокий зелёный (цены, primary-кнопки).
   Mobile-first, светлая тема.
   ============================================================ */

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* Липкая шапка не должна накрывать цель якорного перехода (#about, #zayavka) */
  scroll-padding-top: calc(var(--header-height) + var(--space-2));
}
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-ink);
  background: var(--color-bg);
}
img { max-width: 100%; height: auto; display: block; }
/* Атрибут hidden обязан побеждать любые display-правила классов
   (.card, .form-success и т.п.) — иначе фильтры и формы «не прячут» */
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
a { color: var(--color-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
/* Прозрачный outline вместо none: в forced-colors (Windows High Contrast)
   box-shadow отбрасывается, а прозрачный outline закрашивается системным цветом */
:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--focus-ring); border-radius: var(--radius-s); }

/* Заголовки: скромные, по левому краю — утилитарный каталог, не витрина */
h1 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); text-align: left; }
h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-heading); text-align: left; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semibold); line-height: 1.3; }

.container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); }
.container--narrow { max-width: 46rem; }
.section { margin-block: var(--section-gap); }
.section--soft { background: var(--color-bg-soft); }
.section-more { margin-top: var(--space-6); }
.muted { color: var(--color-ink-soft); font-size: var(--fs-small); }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: var(--z-modal);
  background: var(--color-surface); color: var(--color-ink);
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-m);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-2); }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-height); padding: 0 var(--space-4);
  border-radius: var(--radius-m); font-size: var(--fs-body); font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn--primary { background: var(--color-btn-primary); color: var(--color-ink-inverse); }
.btn--primary:hover { background: var(--color-btn-primary-hover); }
.btn--secondary { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); }
.btn--secondary:hover { background: var(--color-bg-soft); }
.btn--header { min-height: var(--btn-height-header); }
.btn--card { min-height: var(--btn-height-card); padding: 0 var(--space-2); font-size: var(--fs-small); }
.btn--wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: default; }

/* Тач-устройства: компактные контролы (36/40px) добирают зону касания
   до 44px (--tap-target-min) — DESIGN.md §10 */
@media (pointer: coarse) {
  .btn--card, .btn--header, .sort-select { min-height: var(--tap-target-min); }
  .breadcrumbs { align-items: center; }
  .breadcrumbs a,
  .price-phone a { min-height: var(--tap-target-min); display: inline-flex; align-items: center; }
}

/* ---------- Шапка: компактная, текстовое название, без логотипа ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-line);
}
.header-inner { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-height); }
.site-name {
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: 1.125rem; color: var(--color-ink);
  margin-right: auto; white-space: nowrap;
}
.site-name:hover { text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: var(--space-6); }
.nav-links { display: flex; align-items: center; gap: var(--space-4); }
.nav-links a {
  color: var(--color-ink); font-size: var(--fs-nav); font-weight: var(--fw-semibold);
  min-height: var(--tap-target-min); display: inline-flex; align-items: center;
}
.nav-links a:hover { text-decoration: underline; }
.nav-links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.nav-extra { display: flex; align-items: center; gap: var(--space-4); }
.nav-phone { color: var(--color-ink); font-size: var(--fs-nav); font-weight: var(--fw-semibold); }

/* Бургер: простой, без круга-подложки */
.burger {
  display: none; width: var(--tap-target-min); height: var(--tap-target-min);
  align-items: center; justify-content: center; flex: none;
}
.burger-box { position: relative; display: block; width: 22px; height: 14px; }
.burger-line, .burger-box::before, .burger-box::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--color-ink); border-radius: 1px;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.burger-box::before { top: 0; }
.burger-line { top: 6px; }
.burger-box::after { top: 12px; }
.burger[aria-expanded="true"] .burger-box::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-line { opacity: 0; }
.burger[aria-expanded="true"] .burger-box::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 767px) {
  /* Без JS меню остаётся видимым второй строкой шапки */
  .header-inner { flex-wrap: wrap; padding-block: var(--space-2); gap: var(--space-3); }
  .site-nav { flex-wrap: wrap; gap: var(--space-3); flex-basis: 100%; }
  .nav-links { flex-wrap: wrap; gap: var(--space-3); }
  .nav-extra { flex-wrap: wrap; gap: var(--space-3); }
  /* С JS — выпадающая белая панель под шапкой: список пунктов,
     телефон и кнопка «Заявка» */
  .js .header-inner { flex-wrap: nowrap; padding-block: 0; }
  .js .burger { display: inline-flex; }
  .js .site-nav {
    display: none;
    position: absolute; left: 0; right: 0; top: var(--header-height);
    z-index: var(--z-sheet);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line);
    box-shadow: var(--shadow-md);
    padding: var(--space-2) var(--container-pad) var(--space-4);
  }
  .js .site-nav.is-open { display: flex; }
  .js .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav-links a { min-height: var(--tap-target-min); border-bottom: 1px solid var(--color-line); }
  .js .nav-extra { flex-direction: column; align-items: stretch; gap: var(--space-3); padding-top: var(--space-4); }
  .js .nav-phone { min-height: var(--tap-target-min); display: inline-flex; align-items: center; }
}

/* ---------- Каталог: заголовок и тулбар ---------- */
.catalog-page h1 { margin-top: var(--space-6); margin-bottom: var(--space-2); }
.catalog-intro { color: var(--color-ink-soft); max-width: 46rem; margin-bottom: var(--space-6); }

/* Чипы покрытий над каталогом (идея владельцев 14.08.2026, по образцу
   mk-doors.ru): быстрый выбор фасета «Отделка» одним касанием, активный
   чип — акцентная заливка (как чипы активных фильтров). Дублируют
   чекбоксы фильтра (двусторонняя синхронизация в catalog.js), поэтому
   без JS ряд скрыт. На мобиле скроллятся по горизонтали, без переноса. */
.no-js .facing-tabs { display: none; }
.facing-tabs {
  display: flex; gap: var(--space-2);
  margin-bottom: var(--space-3);
  overflow-x: auto;
  scrollbar-width: none;
  /* Просвет под focus-кольцо: overflow не должен резать обводку */
  padding: 4px; margin-inline: -4px;
}
.facing-tabs::-webkit-scrollbar { display: none; }
.facing-tab {
  flex: none; display: inline-flex; align-items: center;
  min-height: var(--btn-height-header); padding: 0 var(--space-4);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.facing-tab:hover { border-color: var(--color-accent); }
.facing-tab[aria-pressed="true"] {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-ink-inverse);
}
.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-block: var(--space-2); margin-bottom: var(--space-3);
  border-block: 1px solid var(--color-line);
}
.catalog-count { color: var(--color-ink-soft); font-size: var(--fs-small); }
.toolbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.sort-wrap { display: flex; align-items: center; gap: var(--space-2); }
.no-js .sort-wrap { display: none; }
.sort-label { color: var(--color-ink-soft); font-size: var(--fs-small); }
.sort-select {
  min-height: var(--btn-height-header);
  padding: 0 var(--space-2);
  border: 1px solid var(--color-line-input); border-radius: var(--radius-m);
  background: var(--color-surface); font-size: var(--fs-small);
}

/* Чипы активных фильтров: единственный «активный» акцент вне цен и кнопок */
.active-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 2rem; padding: 0 var(--space-3);
  background: var(--color-accent); color: var(--color-ink-inverse);
  border-radius: var(--radius-pill); font-size: var(--fs-caption); font-weight: var(--fw-semibold);
}
/* Зона касания крестика — 44px (--tap-target-min); отрицательные поля
   сохраняют визуальную высоту чипа 2rem */
.chip button {
  color: inherit; font-size: 1em; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--tap-target-min); min-height: var(--tap-target-min);
  margin-block: calc((2rem - var(--tap-target-min)) / 2);
  margin-inline-end: calc((var(--tap-target-min) - 1.5rem) / -2);
}

/* ---------- Сетка каталога: фильтры-колонка + карточки ---------- */
.catalog-layout { display: grid; gap: var(--space-6); }
@media (min-width: 1024px) {
  .catalog-layout { grid-template-columns: var(--sidebar-w) 1fr; align-items: start; gap: var(--space-8); }
}

/* Фильтры: bottom sheet на мобильном/планшете, колонка на десктопе */
.filters-backdrop {
  position: fixed; inset: 0; z-index: calc(var(--z-sheet) - 1);
  background: rgba(17, 17, 17, .4);
}
.filter-group { border: 0; margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-line); }
.filter-group:first-child { padding-top: 0; }
.filter-group legend { float: left; width: 100%; font-weight: var(--fw-semibold); font-size: 0.875rem; margin-bottom: var(--space-2); padding: 0; }
.filter-group legend + * { clear: both; }
.check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--tap-target-min); cursor: pointer; }
.check input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-accent); flex: none; }
.filter-colors { display: flex; flex-direction: column; }
.check-color { display: flex; align-items: center; gap: var(--space-2); min-height: var(--tap-target-min); cursor: pointer; font-size: var(--fs-small); }
.check-color input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-accent); flex: none; }
.check-color .swatch { width: 1.5rem; height: 1.5rem; }
.filters-reset { width: 100%; margin-block: var(--space-4) var(--space-3); }
.filters-apply { width: 100%; }
.filters-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.filters-title { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.filters-close { width: var(--tap-target-min); height: var(--tap-target-min); border-radius: var(--radius-m); }

@media (max-width: 1023px) {
  /* Bottom sheet — только при включённом JS (по аналогии с .js .site-nav);
     без JS фильтры остаются видимым статичным блоком над сеткой */
  .js .filters {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
    max-height: 82vh; overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-l) var(--radius-l) 0 0;
    box-shadow: var(--shadow-sheet);
    padding: var(--space-4) var(--container-pad) var(--space-6);
    transform: translateY(105%);
    /* visibility прячется с задержкой в длительность выезда — иначе шторка
       закрывается мгновенно, без анимации (DESIGN.md §13: выезд 300ms) */
    transition: transform var(--dur-base) var(--ease),
                visibility 0s linear var(--dur-base);
    visibility: hidden;
  }
  .js .filters.is-open {
    transform: translateY(0); visibility: visible;
    transition: transform var(--dur-base) var(--ease), visibility 0s;
  }
  /* Без JS кнопки шторки мертвы — прячем, чтобы не вводить в заблуждение */
  .no-js .filters-open, .no-js .filters-close, .no-js .filters-apply { display: none; }
}
@media (min-width: 1024px) {
  .filters { position: sticky; top: calc(var(--header-height) + var(--space-4)); }
  .filters-head, .filters-close, .filters-apply, .filters-open, .filters-backdrop { display: none; }
}

/* ---------- Карточка товара: плотная сетка, видимая граница ---------- */
.cards-grid { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .cards-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .cards-grid { grid-template-columns: repeat(4, 1fr); } }
.cards-grid--similar { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .cards-grid--similar { grid-template-columns: repeat(4, 1fr); } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius-m);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.card:hover { border-color: var(--color-line-hover); box-shadow: var(--shadow-sm); }
.card-media {
  position: relative; aspect-ratio: var(--ratio-card);
  background: #fff; overflow: hidden;
}
/* Обложки заранее нормализованы на белый канвас 600x800 (normalize_cards.py):
   дверь единой высоты на общей базовой линии. contain на белом фоне
   контейнера идентичен cover при 3:4, но не кропит нестандартный файл. */
.card-media img { width: 100%; height: 100%; object-fit: contain; transition: opacity 150ms ease; }
/* Перекраска карточки при фильтре по цвету (catalog.js): короткий fade,
   габариты не меняются — все варианты на одном канвасе 600x800 */
.card-media img.is-swapping { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .card-media img { transition: none; }
}
.card-badges { position: absolute; top: var(--space-2); left: var(--space-2); display: flex; gap: var(--space-1); }
.card-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); flex: 1; width: 100%; }
.card-title a { color: var(--color-ink); }
.card-title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card-title a, .card-title a:hover { text-decoration: underline; }
.card-sub { color: var(--color-ink-soft); font-size: var(--fs-small); }
/* Цена — главный визуальный якорь карточки: жирная, акцентным зелёным */
.card-price { color: var(--color-accent); font-size: var(--fs-price); font-weight: var(--fw-bold); line-height: 1.2; margin-top: auto; }
.card-price--na { color: var(--color-ink-soft); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.card-actions { position: relative; z-index: 1; display: grid; gap: var(--space-2); width: 100%; }
@media (min-width: 768px) { .card-actions { grid-template-columns: 1fr 1fr; } }

/* ---------- Бейджи ПГ/ПО: технический чип ---------- */
.badge {
  display: inline-flex; align-items: center; height: var(--badge-height);
  padding: 0 var(--space-2); border-radius: var(--radius-s);
  background: var(--color-surface); border: 1px solid var(--color-line);
  color: var(--color-ink-soft); font-size: var(--fs-caption);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-caption);
}
.badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }

/* ---------- Наличие со склада: бейдж карточки и пометки в таблицах ---------- */
.badge--stock-in {
  background: var(--color-accent); border-color: var(--color-accent);
  color: var(--color-ink-inverse);
}
.badge--stock-out { background: var(--color-bg-soft); }
.stock-line { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.stock-line--in { color: var(--color-accent); }
.stock-line--out { color: var(--color-ink-soft); font-weight: var(--fw-regular); }

/* ---------- Свотчи отделок ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.swatch {
  width: var(--swatch-size); height: var(--swatch-size); border-radius: 50%;
  box-shadow: var(--swatch-ring); display: inline-block; flex: none;
}
.swatch-more { color: var(--color-ink-soft); font-size: var(--fs-caption); }
.swatch-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-target-min); padding: 0 var(--space-3) 0 var(--space-1);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-surface); font-size: var(--fs-small); color: var(--color-ink);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.swatch-chip .swatch { width: 1.75rem; height: 1.75rem; }
.swatch-chip:hover { border-color: var(--color-accent); }
.swatch-chip[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }

/* ---------- Кликабельные свотчи карточек (каталог и «Похожие модели») ----------
   Кнопка-кружок ≥28px; без JS стоит disabled и выглядит как индикатор.
   Лежит поверх растянутой ссылки заголовка (z-index, как .card-actions). */
.card-swatch {
  position: relative; z-index: 1;
  display: inline-flex; flex: none;
  width: 1.75rem; height: 1.75rem;
  padding: 0; border: 0; background: none; border-radius: 50%;
  cursor: pointer;
}
.card-swatch[disabled] { cursor: default; }
.card-swatch .swatch { width: 100%; height: 100%; }
/* Активный свотч — кольцо акцентного цвета (как выбранный свотч
   на странице модели) с просветом в цвет карточки */
.card-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-accent);
}
.card-swatch:focus-visible { border-radius: 50%; }
/* Тап-зона ≥44px на touch-экранах — невидимое расширение кнопки */
@media (pointer: coarse) {
  .card-swatch::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: var(--tap-target-min); height: var(--tap-target-min);
    transform: translate(-50%, -50%);
  }
}

.catalog-empty { color: var(--color-ink-soft); padding: var(--space-12) 0; }

/* ---------- Погонаж — секция под каталогом ---------- */
.pogonazh-section { margin-top: var(--section-gap); }
.pogonazh-card {
  display: grid; gap: var(--space-6);
  border: 1px solid var(--color-line); border-radius: var(--radius-m);
  padding: var(--space-4);
}
.pogonazh-media { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.pogonazh-media img { background: var(--color-bg-soft); border-radius: var(--radius-s); aspect-ratio: 1; object-fit: contain; padding: 8%; width: 100%; height: auto; }
.pogonazh-copy h2 { margin-bottom: var(--space-2); }
.pogonazh-copy p { color: var(--color-ink-soft); font-size: var(--fs-small); margin-bottom: var(--space-4); }
@media (min-width: 768px) {
  .pogonazh-card { grid-template-columns: 1fr 1fr; align-items: center; padding: var(--space-6); }
}

/* ---------- УТП-лента: одна строка фактов ---------- */
.usp-strip { background: var(--color-bg-soft); margin-block: var(--section-gap); }
.usp-line {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  color: var(--color-ink-soft); font-size: var(--fs-small);
}
.usp-line li { display: inline-flex; align-items: center; gap: var(--space-3); }
.usp-line li + li::before { content: "·"; color: var(--color-ink-soft); }

/* ---------- Как мы работаем ---------- */
.steps h2, .faq h2, .about h2 { margin-bottom: var(--space-6); }
.steps-list { list-style: none; counter-reset: step; display: grid; gap: var(--space-4); }
.steps-list li { counter-increment: step; position: relative; padding-left: 2.5rem; }
.steps-list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-body); color: var(--color-ink);
}
.steps-list h3 { margin-bottom: var(--space-1); }
.steps-list p { color: var(--color-ink-soft); font-size: var(--fs-small); }
@media (min-width: 768px) {
  .steps-list { grid-template-columns: repeat(5, 1fr); gap: var(--space-4); }
  .steps-list li { padding-left: 0; padding-top: 1.75rem; }
}

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--color-line); }
.faq-item:first-child { border-top: 1px solid var(--color-line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: var(--tap-target-min); padding-block: var(--space-3);
  font-weight: var(--fw-semibold); cursor: pointer; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; flex: none; color: var(--color-ink);
  font-size: 1.375rem; line-height: 1; transition: transform var(--dur-fast) var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { color: var(--color-ink-soft); padding-bottom: var(--space-4); }

/* ---------- О нас ---------- */
.about p { color: var(--color-ink-soft); }
.about p + p { margin-top: var(--space-4); }

/* ---------- Блок заявки и форма ---------- */
.lead { padding-block: var(--section-gap); margin-block: var(--section-gap); }
.lead-inner { display: grid; gap: var(--space-8); }
.lead-copy h2 { margin-bottom: var(--space-3); }
.lead-copy p { color: var(--color-ink-soft); }
.lead-phone { margin-top: var(--space-6); color: var(--color-ink); font-weight: var(--fw-semibold); }
.lead-address { margin-top: var(--space-3); }
@media (min-width: 768px) {
  .lead-inner { grid-template-columns: 1fr 1fr; gap: var(--space-16); }
}

.lead-form {
  background: var(--color-surface); border: 1px solid var(--color-line);
  border-radius: var(--radius-m); padding: var(--space-6);
  display: grid; gap: var(--space-4);
}
.field { display: grid; gap: var(--space-1); }
.field label { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.field input, .field textarea {
  width: 100%; min-height: var(--input-height);
  padding: var(--space-3) var(--space-4);
  font: inherit; font-size: var(--fs-input); color: var(--color-ink);
  background: var(--color-surface); border: 1px solid var(--color-line-input);
  border-radius: var(--radius-m);
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-ink-soft); }
.field input:focus-visible, .field textarea:focus-visible { border-color: var(--color-accent); box-shadow: var(--focus-ring); }
.field.has-error input, .field.has-error textarea { border-color: var(--color-error); }
.field-error { color: var(--color-error); font-size: var(--fs-caption); min-height: 1em; }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--fs-caption); color: var(--color-ink-soft); cursor: pointer; }
.consent a { text-decoration: underline; }
.consent input { width: 1.125rem; height: 1.125rem; margin-top: .1rem; flex: none; accent-color: var(--color-accent); }
.consent.has-error { color: var(--color-error); }
.form-alt { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); color: var(--color-ink-soft); font-size: var(--fs-small); }
.form-alt-phone { font-weight: var(--fw-semibold); color: var(--color-ink); }
.form-success { display: grid; gap: var(--space-3); align-content: center; }
.form-success h3 { color: var(--color-ink); }
.form-success p { color: var(--color-ink-soft); }
.form-success a { text-decoration: underline; }

/* ---------- SEO-текст ---------- */
.catalog-seo h2 { margin-bottom: var(--space-4); }
.catalog-seo p { color: var(--color-ink-soft); }
.catalog-seo p + p { margin-top: var(--space-4); }

/* ---------- Хлебные крошки ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--fs-small); color: var(--color-ink-soft); margin-block: var(--space-4) var(--space-6); }
.breadcrumbs a { color: var(--color-ink-soft); }

/* ---------- Страница модели ---------- */
.model-layout { display: grid; gap: var(--space-8); }
@media (min-width: 768px) {
  .model-layout { grid-template-columns: 1.05fr .95fr; gap: var(--space-16); align-items: start; }
}
.model-info h1 { margin-bottom: var(--space-4); }
.gallery-zoom { display: block; width: 100%; aspect-ratio: var(--ratio-card); background: var(--color-bg); cursor: zoom-in; border: 1px solid var(--color-line); border-radius: var(--radius-m); overflow: hidden; }
.gallery-zoom img { width: 100%; height: 100%; object-fit: contain; }
.gallery-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.gallery-thumb {
  aspect-ratio: 3 / 4; background: var(--color-bg);
  border: 1px solid var(--color-line); border-radius: var(--radius-s);
  overflow: hidden; padding: 0;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb[aria-current="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
/* Листание галереи (model.js): стрелки поверх главного фото и счётчик
   кадров. В разметке они с hidden — без JS листают миниатюры-ссылки.
   Монохром, полупрозрачная белая подложка; кнопки прижаты к краям,
   чтобы не закрывать полотно на узких экранах. box-shadow не задаём —
   его место занимает focus-кольцо из базовых стилей. */
.gallery-main { position: relative; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: var(--tap-target-min); height: var(--tap-target-min);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink); background: rgba(255, 255, 255, .8);
  border: 1px solid var(--color-line); border-radius: 50%;
  transition: background var(--dur-fast) var(--ease);
}
.gallery-nav:hover { background: var(--color-surface); border-color: var(--color-line-hover); }
.gallery-prev { left: var(--space-2); }
.gallery-next { right: var(--space-2); }
.gallery-counter {
  position: absolute; right: var(--space-2); bottom: var(--space-2);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .8); color: var(--color-ink-soft);
  font-size: var(--fs-caption); line-height: var(--lh-small);
}

.model-short { color: var(--color-ink-soft); margin-bottom: var(--space-6); }
.model-colors { margin-bottom: var(--space-6); }
.model-colors h2 { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); margin-bottom: var(--space-3); }
/* Переключатель «Стекло» (страница модели, model.js): те же таблетки,
   что и свотчи, но без кружка цвета */
.glass-chip { padding: 0 var(--space-3); }
/* Погасшие таблетки: стекло без выбранной отделки и отделка без
   выбранного стекла (model.js гасит несуществующие пары прайса) */
.swatch-chip[disabled] { opacity: .45; cursor: not-allowed; }
.swatch-chip[disabled]:hover { border-color: var(--color-line); }
.model-price {
  border: 1px solid var(--color-line); border-radius: var(--radius-m);
  padding: var(--space-4); margin-bottom: var(--space-6);
}
/* Цена модели — акцентным зелёным, как в карточках */
.price-label { color: var(--color-accent); font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading); margin-bottom: var(--space-1); }
/* Плавная смена цены при выборе комбинации (model.js меняет текст в паузе
   затухания) и строка «за полотно …» под точной ценой выбранного варианта */
.price-label, .price-variant { transition: opacity .15s ease; }
.price-variant { color: var(--color-ink-soft); font-size: var(--fs-small); margin-bottom: var(--space-1); }
.price-note { color: var(--color-ink-soft); font-size: var(--fs-small); margin-bottom: var(--space-4); }
/* Телефон рядом с primary-кнопкой блока цены (DESIGN.md §2) */
.price-phone { margin-top: var(--space-3); color: var(--color-ink-soft); font-size: var(--fs-small); }
.price-phone a { color: var(--color-ink); font-weight: var(--fw-semibold); }

/* ---------- Плитки «Полотно | Комплект» (референс владельцев 18.08.2026)
   Одна сравнительная полоса внутри карточки цены: две цены рядом,
   разделённые волосяной линией (не «коробка в коробке»). Обе цены —
   акцентным зелёным (цены — единственный акцент системы). ---------- */
.price-tiles {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  margin-bottom: var(--space-2);
}
.price-tile { min-width: 0; padding-right: var(--space-3); }
.price-tile--kit {
  border-left: 1px solid var(--color-line);
  padding-left: var(--space-4); padding-right: 0;
}
/* Надпись-ярлык плитки: тихий верхний регистр, как у бейджей */
.price-tile-name {
  color: var(--color-ink-soft); font-size: var(--fs-caption);
  font-weight: var(--fw-semibold); letter-spacing: var(--ls-caption);
  text-transform: uppercase; margin-bottom: 2px;
}
/* Цена комплекта — та же типографика, что у цены полотна (.price-label) */
.kit-price {
  color: var(--color-accent); font-size: var(--fs-h2);
  font-weight: var(--fw-bold); line-height: var(--lh-heading);
  margin-bottom: var(--space-1); transition: opacity .15s ease;
}
/* «по запросу»: у выбранной отделки нет погонажа в прайсе — не выдумываем */
.kit-price--na { color: var(--color-ink-soft); font-size: var(--fs-body); font-weight: var(--fw-semibold); padding-block: var(--space-1); }
/* «Состав ▾» — тихая текстовая кнопка-раскрывашка (работает только с JS) */
.kit-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: var(--space-1) 0; margin: 0;
  color: var(--color-ink); font: inherit; font-size: var(--fs-small);
  font-weight: var(--fw-semibold); cursor: pointer;
  text-decoration: underline; text-decoration-style: dotted;
  text-decoration-color: var(--color-line-input);
  text-underline-offset: 3px; min-height: 2rem;
}
.kit-toggle:hover { color: var(--color-accent); text-decoration-color: var(--color-accent); }
.kit-caret { transition: transform .15s ease; }
.kit-toggle[aria-expanded="true"] .kit-caret { transform: rotate(180deg); }
/* Раскрывающийся «Состав» — компактный чек под плитками: строки
   «N шт · позиция», выравненные табличные суммы, линия перед итогом */
.kit-pop {
  position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0;
  z-index: 30; background: var(--color-surface);
  border: 1px solid var(--color-line); border-radius: var(--radius-m);
  padding: var(--space-4); box-shadow: 0 10px 28px rgba(17, 17, 17, .14);
}
.kit-pop-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.kit-pop-title { font-weight: var(--fw-bold); }
.kit-close {
  background: none; border: 0; cursor: pointer; color: var(--color-ink-soft);
  font-size: 1rem; line-height: 1; padding: var(--space-2);
  margin: calc(-1 * var(--space-2)); border-radius: var(--radius-s);
}
.kit-close:hover { color: var(--color-ink); }
.kit-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--fs-small); }
.kit-row { display: flex; align-items: baseline; gap: var(--space-2); }
.kit-row-math { margin-left: auto; color: var(--color-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kit-row-sum { min-width: 4.75rem; text-align: right; font-weight: var(--fw-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kit-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--color-line);
  margin-top: var(--space-2); padding-top: var(--space-2);
  font-weight: var(--fw-bold);
}
.kit-total-sum { color: var(--color-accent); font-variant-numeric: tabular-nums; }
.kit-formula { color: var(--color-ink-soft); font-size: var(--fs-caption); margin: var(--space-2) 0 var(--space-3); }
/* Мобильный столбик: плитки одна под другой, линия — горизонтальная */
@media (max-width: 479px) {
  .price-tiles { grid-template-columns: 1fr; }
  .price-tile { padding-right: 0; }
  .price-tile--kit {
    border-left: 0; padding-left: 0;
    border-top: 1px solid var(--color-line);
    margin-top: var(--space-3); padding-top: var(--space-3);
  }
}
@media (prefers-reduced-motion: reduce) {
  .kit-price, .kit-caret { transition: none; }
}
/* «Особенности» — самостоятельный блок под секцией допродажи (#furnitura):
   заголовок как у соседних секций, на широком экране список в две колонки,
   чтобы короткие пункты не растягивались на всю ширину контейнера */
.model-features { margin-top: var(--section-gap); }
.model-features h2 { margin-bottom: var(--space-4); }
.model-features ul { list-style: none; display: grid; gap: var(--space-2); }
@media (min-width: 768px) {
  .model-features ul { grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-8); }
}
.model-features li { position: relative; padding-left: var(--space-6); color: var(--color-ink-soft); font-size: var(--fs-small); }
.model-features li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-ink); }

/* ---------- Таблицы цен (варианты модели, прайс погонажа) ---------- */
.model-variants { margin-top: var(--section-gap); }
.model-variants h2 { margin-bottom: var(--space-4); }
.pogonazh-prices h3 { margin: var(--space-6) 0 var(--space-3); }
/* Хинт прокрутки широких таблиц: тень у края появляется, только когда
   часть таблицы скрыта («уезжающие» под край фоновые слои прикрывают
   тени за счёт background-attachment: local) */
.table-wrap {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--color-bg) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-bg) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)),
    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.price-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.price-table th, .price-table td { text-align: left; padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.price-table th:last-child, .price-table td:last-child { padding-right: 0; }
.price-table thead th { color: var(--color-ink-soft); font-weight: var(--fw-semibold); font-size: var(--fs-caption); letter-spacing: var(--ls-caption); }
.price-cell { white-space: nowrap; font-weight: var(--fw-semibold); }
/* Заголовки групп покрытия в таблицах моделей с двумя покрытиями */
.price-table tr.facing-group th { padding-top: var(--space-5); font-weight: var(--fw-bold); font-size: var(--fs-small); letter-spacing: 0; color: var(--color-ink); border-bottom: 1px solid var(--color-ink-soft); }
/* Подсветка строк выбранной отделки в «Варианты и цены» (model.js) */
.price-table tr.is-active td { background: var(--color-bg-soft); }
.price-table tr.is-active td:first-child { box-shadow: inset 2px 0 0 var(--color-accent); }
.price-sizes { color: var(--color-ink-soft); font-size: var(--fs-small); margin-top: var(--space-3); }
/* Пометка «фото уточняется» под свотчами (модель, model.js) */
.swatch-nophoto-note { margin-top: var(--space-2); }

/* ---------- Фурнитура: раздел и блок на странице модели ---------- */
.furn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-4); }
.furn-card {
  display: flex; flex-direction: column; gap: var(--space-1);
  border: 1px solid var(--color-line); border-radius: var(--radius-m);
  padding: var(--space-3);
}
/* Единый квадратный контейнер: фото 600×600, но пропорция закреплена
   в CSS (contain на светлой подложке) — нестандартный файл не растянет
   и не порвёт сетку карточек (ревизия фото 19.08.2026) */
.furn-card img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: var(--color-bg-soft); border-radius: var(--radius-s); margin-bottom: var(--space-2); }
.furn-name { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.furn-sub, .furn-note { color: var(--color-ink-soft); font-size: var(--fs-caption); }
.furn-card .card-price { margin-top: auto; padding-top: var(--space-2); }

/* ---------- «С этим товаром покупают»: карточки допродажи ----------
   Секция стоит сразу под галереей и блоком цены (#furnitura). Одна колонка
   на телефоне, две на планшете, три на десктопе; карточки — тонкая рамка
   --color-line, цена акцентным зелёным, кнопка-ссылка прижата к низу. */
/* align-items: start — карточки не тянутся до высоты самой длинной:
   у «Погонажа» содержимого меньше, при растяжении внутри оставалась пустота */
.needs-grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 600px) {
  .needs-grid { grid-template-columns: repeat(2, 1fr); }
  /* Нечётная последняя карточка занимает всю строку — иначе рядом с ней
     стоит пустая колонка (две колонки на 600–1023px, карточек три) */
  .needs-grid > .need-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .needs-grid { grid-template-columns: repeat(3, 1fr); }
  .needs-grid > .need-card:last-child:nth-child(odd) { grid-column: auto; }
}
.need-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--color-line); border-radius: var(--radius-m);
  padding: var(--space-4);
}
.need-card h3 { margin-bottom: var(--space-2); }
.need-price { color: var(--color-accent); font-size: var(--fs-price); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.need-price-note { color: var(--color-ink-soft); font-size: var(--fs-small); font-weight: var(--fw-regular); }
.need-note { color: var(--color-ink-soft); font-size: var(--fs-small); line-height: var(--lh-small); margin-top: var(--space-2); }
.need-note strong { color: var(--color-ink); font-weight: var(--fw-semibold); }
/* Состав комплекта: название слева, цифра справа */
.need-list { list-style: none; display: grid; margin-top: var(--space-3); font-size: var(--fs-small); }
.need-list li { display: flex; gap: var(--space-3); justify-content: space-between; padding: var(--space-2) 0; border-top: 1px solid var(--color-line); }
.need-num { white-space: nowrap; font-weight: var(--fw-semibold); margin-left: auto; }
/* Погонаж дополнительно: термин + пояснение */
/* margin задаём явно: у dl браузерный дефолт 1em ломает ритм трёх карточек */
.need-defs { margin: var(--space-3) 0 0; font-size: var(--fs-small); }
.need-defs dt { font-weight: var(--fw-semibold); padding-top: var(--space-2); border-top: 1px solid var(--color-line); }
.need-defs dd { color: var(--color-ink-soft); margin: 0 0 var(--space-3); line-height: var(--lh-small); }
.need-defs dd:last-child { margin-bottom: 0; }
/* Базовый набор фурнитуры: миниатюра 48×48 не ломает сетку на мобиле */
.need-items { list-style: none; display: grid; margin-top: var(--space-3); font-size: var(--fs-small); }
.need-item { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-line); }
.need-thumb {
  width: 48px; height: 48px; flex: none;
  object-fit: contain; /* нестандартный файл не растягивается в квадрате */
  background: var(--color-bg-soft); border: 1px solid var(--color-line);
  border-radius: var(--radius-s);
}
.need-item-body { min-width: 0; line-height: var(--lh-small); }
/* Опции — нативный <details>, без JS: карточка не разрастается */
.need-details { margin-top: var(--space-3); border-top: 1px solid var(--color-line); }
.need-details > summary {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-target-min); cursor: pointer; list-style: none;
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
}
.need-details > summary::-webkit-details-marker { display: none; }
.need-details > summary::after {
  content: "+"; margin-left: auto; color: var(--color-ink-soft);
  font-weight: var(--fw-regular); font-size: var(--fs-body);
}
.need-details[open] > summary::after { content: "−"; }
.need-opts { list-style: none; display: grid; gap: var(--space-3); padding-bottom: var(--space-2); font-size: var(--fs-small); }
.need-opt { position: relative; min-height: var(--tap-target-min); }
.need-opt-head { display: flex; gap: var(--space-3); align-items: baseline; }
.need-opt-sub { color: var(--color-ink-soft); font-size: var(--fs-caption); line-height: var(--lh-small); margin-top: var(--space-1); }
/* Ссылки внутри карточек: подчёркиваем (иначе неотличимы от текста —
   цвет тот же) и растягиваем на всю строку псевдоэлементом: сам текст
   узкий (32–34px), а зона касания должна быть 44px — DESIGN.md §10 */
.need-item-body a, .need-opt-head a { text-decoration: underline; text-underline-offset: 2px; }
.need-item-body a::after, .need-opt-head a::after { content: ""; position: absolute; inset: 0; }
/* Ссылка-кнопка карточки: прижата к низу, ряд карточек выравнен */
.need-foot { margin-top: auto; padding-top: var(--space-4); }

.model-details { display: grid; gap: var(--space-8); margin-top: var(--section-gap); }
@media (min-width: 768px) { .model-details { grid-template-columns: .9fr 1.1fr; gap: var(--space-16); } }
.model-specs h2, .model-desc h2 { margin-bottom: var(--space-4); }
.specs-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.specs-table th, .specs-table td { text-align: left; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); vertical-align: top; }
.specs-table th { color: var(--color-ink-soft); font-weight: var(--fw-regular); width: 40%; padding-right: var(--space-4); }
.model-desc p { color: var(--color-ink-soft); }
.model-desc p + p { margin-top: var(--space-4); }

.lead--model { border-radius: var(--radius-m); padding: var(--space-6); margin-top: var(--section-gap); }
.similar { margin-top: var(--section-gap); }
.similar h2 { margin-bottom: var(--space-6); }

/* ---------- Лайтбокс ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  background: rgba(17, 17, 17, .92);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox-img { max-width: min(92vw, 1100px); max-height: 88vh; width: auto; height: auto; object-fit: contain; }
.lightbox-close, .lightbox-prev, .lightbox-next {
  position: absolute; width: var(--tap-target-min); height: var(--tap-target-min);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ink-inverse); font-size: 1.5rem; border-radius: var(--radius-m);
  background: rgba(255, 255, 255, .12);
}
.lightbox-close { top: var(--space-4); right: var(--space-4); }
.lightbox-prev { left: var(--space-2); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: var(--space-2); top: 50%; transform: translateY(-50%); }

/* ---------- Модалка «Рассчитать стоимость» (страница модели) ----------
   Нативный <dialog>: showModal() затемняет фон через ::backdrop и держит
   фокус, Esc закрывает сам. В стиле сайта — белая карточка, зелёная
   primary-кнопка. Кнопка .calc-open видна только с JS (правило .no-js выше). */
.calc-modal {
  width: min(30rem, calc(100vw - 2 * var(--space-4)));
  max-height: calc(100vh - 2 * var(--space-4));
  overflow-y: auto;
  border: 0; border-radius: var(--radius-l);
  padding: 0;
  background: var(--color-surface); color: var(--color-ink);
  box-shadow: var(--shadow-md);
}
.calc-modal::backdrop { background: rgba(17, 17, 17, .5); }
.calc-inner { padding: var(--space-6); display: grid; gap: var(--space-4); }
.calc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.calc-close {
  flex: none; width: var(--tap-target-min); height: var(--tap-target-min);
  display: inline-flex; align-items: center; justify-content: center;
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0 0;
  color: var(--color-ink-soft); border-radius: var(--radius-m);
}
.calc-close:hover { color: var(--color-ink); background: var(--color-bg-soft); }
.calc-sub { color: var(--color-ink-soft); font-size: var(--fs-small); }
.calc-form { display: grid; gap: var(--space-4); }
.calc-group { border: 0; margin: 0; padding: 0; }
.calc-group legend { font-size: var(--fs-small); font-weight: var(--fw-semibold); margin-bottom: var(--space-1); padding: 0; }
.calc-radios { display: flex; flex-wrap: wrap; gap: 0 var(--space-8); }
.calc-status { color: var(--color-ink-soft); font-size: var(--fs-small); }
.calc-fallback { display: grid; gap: var(--space-2); grid-template-columns: 1fr 1fr; }
@media (max-width: 479px) {
  .calc-fallback { grid-template-columns: 1fr; }
}

/* ---------- Контакты ---------- */
.contacts-page h1 { margin-bottom: var(--space-3); }
.contacts-intro { color: var(--color-ink-soft); max-width: 46rem; margin-bottom: var(--space-6); }
.contacts-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--section-gap); }
@media (min-width: 480px) { .contacts-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .contacts-grid { grid-template-columns: repeat(4, 1fr); } }
.contact-card { border: 1px solid var(--color-line); border-radius: var(--radius-m); padding: var(--space-4); }
.contact-title { font-family: var(--font-body); font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-ink-soft); margin-bottom: var(--space-2); }
.contact-value { font-weight: var(--fw-semibold); }
.lead--contacts { border-radius: var(--radius-m); padding: var(--space-6); }

/* ---------- Политика ---------- */
.privacy-text h2 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: var(--fw-semibold); margin: var(--space-8) 0 var(--space-3); }
.privacy-text p { color: var(--color-ink-soft); }
.privacy-text p + p { margin-top: var(--space-3); }
.privacy-text ul { margin: var(--space-3) 0 0 var(--space-6); color: var(--color-ink-soft); }
.privacy-text li + li { margin-top: var(--space-1); }

/* ---------- Футер ---------- */
.site-footer { background: var(--color-bg-soft); padding-block: var(--space-8) var(--space-6); margin-top: var(--section-gap); }
.footer-grid { display: grid; gap: var(--space-6); margin-bottom: var(--space-6); }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.footer-nav a { color: var(--color-ink); font-size: var(--fs-small); min-height: var(--tap-target-min); display: inline-flex; align-items: center; }
.footer-contacts p { color: var(--color-ink-soft); font-size: var(--fs-small); }
.footer-contacts p + p { margin-top: var(--space-2); }
.footer-name { font-weight: var(--fw-bold); }
.footer-note { color: var(--color-ink-soft); font-size: var(--fs-small); margin-top: var(--space-2); }
.footer-bottom { border-top: 1px solid var(--color-line); padding-top: var(--space-4); display: grid; gap: var(--space-2); }
.footer-bottom p { color: var(--color-ink-soft); font-size: var(--fs-caption); }
.footer-bottom a { text-decoration: underline; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1.2fr; }
  .footer-bottom { grid-template-columns: 1fr auto; }
}

/* ---------- Корзина ----------
   Бэкенда нет: состав в localStorage (js/cart.js), оформление на /cart.html
   (Telegram / письмо). Прогрессивная деградация: без JS кнопки корзины,
   ссылка в шапке и селектор размера скрыты — работают формы заявки. */
.no-js .cart-link, .no-js .cart-add, .no-js .model-size,
.no-js .calc-open, .no-js .kit-toggle { display: none !important; }

/* Иконка в шапке со счётчиком позиций (badge прячется при пустой корзине) */
.cart-link {
  position: relative; flex: none;
  width: var(--tap-target-min); height: var(--tap-target-min);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-ink); border-radius: var(--radius-m);
}
.cart-link:hover { color: var(--color-accent); }
.cart-count {
  position: absolute; top: 1px; right: 0;
  min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-ink-inverse);
  font-size: 0.6875rem; font-weight: var(--fw-bold);
  line-height: 1.125rem; text-align: center;
}

/* Селектор «Размер полотна» в блоке цены: таблетки с бейджем наличия;
   недоступные для выбранной пары отделка×стекло размеры гаснут (model.js) */
.model-size { margin-block: var(--space-4); }
.model-size-title {
  font-family: var(--font-body); font-size: var(--fs-small);
  font-weight: var(--fw-semibold); margin-bottom: var(--space-2);
}
.size-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.size-chip {
  display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  min-height: var(--tap-target-min); padding: var(--space-1) var(--space-4);
  border: 1px solid var(--color-line); border-radius: var(--radius-pill);
  background: var(--color-surface); font-size: var(--fs-small);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.size-chip:hover { border-color: var(--color-accent); }
.size-chip[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
.size-chip[disabled] { opacity: .45; cursor: not-allowed; }
.size-chip[disabled]:hover { border-color: var(--color-line); }
.size-dim { font-weight: var(--fw-semibold); white-space: nowrap; }
.size-stock { font-size: var(--fs-caption); line-height: var(--lh-small); }
.size-stock--in { color: var(--color-accent); font-weight: var(--fw-semibold); }
.size-stock--out { color: var(--color-ink-soft); }

/* «В корзину» + «Оставить заявку» в блоке цены */
.price-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.price-actions .btn { flex: 1 1 10rem; }

/* Отклик добавления (cart.js меняет текст кнопки на 1.4 с) */
.btn--secondary.is-added { border-color: var(--color-accent); color: var(--color-accent); }
.btn--primary.is-added { background: var(--color-accent-hover); }

/* Кнопки корзины в карточках допродажи и на карточках фурнитуры */
.need-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.need-foot .btn { flex: 1 1 auto; }
.furn-card .cart-add { margin-top: var(--space-2); }
/* «+» у опции: поверх растянутой ссылки опции (см. need-opt-head a::after) */
.cart-plus {
  position: relative; z-index: 1; flex: none;
  min-width: 2.25rem; padding: 0 var(--space-2);
  margin-left: var(--space-2); align-self: center;
}
.price-table .cart-add { white-space: nowrap; }

/* ---------- Страница /cart.html ---------- */
.cart-page h1 { margin-bottom: var(--space-4); }
.cart-stock-note { margin-bottom: var(--space-3); }
.cart-item-name {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-weight: var(--fw-semibold);
}
.cart-item-var { margin-top: var(--space-1); max-width: 34rem; }
.cart-item .stock-line { display: block; margin-top: var(--space-1); }
.cart-qty {
  display: inline-flex; align-items: center;
  border: 1px solid var(--color-line-input); border-radius: var(--radius-m);
}
.cart-qty-btn {
  width: 2.25rem; height: 2.25rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem; line-height: 1;
}
.cart-qty-btn:hover { background: var(--color-bg-soft); }
.cart-qty-btn[disabled] { opacity: .4; cursor: default; }
.cart-qty-num { min-width: 2rem; text-align: center; font-weight: var(--fw-semibold); }
@media (pointer: coarse) {
  .cart-qty-btn { width: var(--tap-target-min); height: var(--tap-target-min); }
}
.cart-remove {
  width: var(--tap-target-min); height: var(--tap-target-min);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-ink-soft); border-radius: var(--radius-m);
}
.cart-remove:hover { color: var(--color-error); background: var(--color-bg-soft); }
/* Узкие телефоны (390px и уже): ужимаем зазоры и шрифт цен, чтобы все
   5 колонок корзины (включая ✕) влезали без горизонтальной прокрутки;
   тап-таргеты (qty, ✕) не трогаем — их ширина задана фиксированно */
@media (max-width: 419px) {
  .cart-table { font-size: var(--fs-caption); }
  .cart-table th, .cart-table td { padding-right: var(--space-1); }
  .cart-qty-num { min-width: 1rem; }
  .cart-item-var { max-width: 10rem; }
}
.cart-summary {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--space-4);
  margin-block: var(--space-4) var(--space-3);
}
.cart-total { font-size: var(--fs-price); font-weight: var(--fw-bold); }
.cart-total span { color: var(--color-accent); }
.cart-send { display: grid; gap: var(--space-2); }
.cart-send-alt { display: grid; gap: var(--space-2); grid-template-columns: 1fr 1fr; }
/* Третья кнопка («Скопировать заказ») — на всю ширину под парой отправки */
.cart-send-alt .btn:nth-child(3) { grid-column: 1 / -1; }
@media (max-width: 479px) {
  .cart-send-alt { grid-template-columns: 1fr; }
}
.cart-note { font-size: var(--fs-small); }
.cart-sent { color: var(--color-accent); font-size: var(--fs-small); font-weight: var(--fw-semibold); }