/* dymohod.store — витрина. Графитовая оболочка, светлое содержимое, огонь на действии. */

/* Браузерное правило для [hidden] — display:none со специфичностью типа,
   и его перебивает любой наш класс с display. Так пометка «+0 взамен убранного»
   осталась на экране: `.kitlist__auto{display:block}` оказался сильнее.
   Ставим один раз здесь, чтобы `el.hidden = true` работал везде и всегда. */
[hidden] { display: none !important; }

/* Onest — гротеск с полноценной кириллицей, лицензия OFL. Лежит у нас же:
   внешние CDN шрифтов из России отвечают через раз, а шрифт нужен раньше текста. */
@font-face {
  font-family: 'Onest';
  src: url('/fonts/onest-cyrillic.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest';
  src: url('/fonts/onest-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2212;
}

/* JetBrains Mono — для всего, что на самом деле код: Ø150×250, AISI 430, артикул,
   количество, суммы. Это язык самого товара, и он же даёт странице характер.
   Лицензия Apache 2.0.
   ⚠️ Знака ₽ (U+20BD) в этих подмножествах НЕТ, и это сделано намеренно: шрифт
   подставляется посимвольно по unicode-range, поэтому рубль возьмётся из Onest —
   следующего в стеке. Полный файл JetBrains Mono весит 90 КБ против 26 КБ здесь,
   и платить 64 КБ за один символ незачем. */
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jbm-cyrillic-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jbm-latin-400.woff2') format('woff2');
  font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jbm-cyrillic-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jbm-latin-500.woff2') format('woff2');
  font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Графит — оболочка: служебная полоса, шапка, меню, подвал, полоса производства.
     Не чёрный и не синий: на нём нержавейка выглядит нержавейкой. */
  --ink: #0e1419;
  --ink-2: #18222b;
  --on-dark: #dce3e9;
  --on-dark-dim: #93a1ac;
  --on-dark-faint: #6c7b87;
  --dark-line: rgba(232, 238, 243, .10);
  --dark-rule: rgba(232, 238, 243, .22);

  /* Свет — содержимое. Фон холодный: тёплая подложка делает сталь желтоватой. */
  --paper: #eef0f2;
  --surface: #fff;
  --raised: #f6f8f9;

  --line: #e9edef;   /* граница, которую почти не видно */
  --rule: #c4ccd3;   /* граница, которую видно: поля, чипсы */

  --muted: #5a6671;
  /* Третий уровень: 4,9:1 на белом и 4,7:1 на --raised. Прежние #8b97a2 давали 3,0:1 —
     ниже порога AA, и подписи читались не как второстепенные, а как выцветшие. */
  --faint: #65727f;

  /* Огонь. Только две роли: кнопка действия и текущая цена. Больше нигде. */
  --accent: #d94a11;
  --accent-hot: #ef5c1f;
  --accent-soft: #fbe6dc;
  --accent-line: #e8b9a4;
  --accent-ink: #fff;
  --ok: #216a4b;
  --ok-soft: #e8f3ee;

  /* Тени мягкие и холодные. Их ровно две: лёгкий подъём плитки и глубокая
     под плитой расчёта, которая наезжает на графит. */
  --lift-1: 0 1px 2px rgba(14, 20, 25, .05), 0 1px 3px rgba(14, 20, 25, .04);
  --lift-2: 0 4px 10px rgba(14, 20, 25, .07), 0 14px 30px rgba(14, 20, 25, .08);
  --lift-3: 0 26px 60px rgba(0, 0, 0, .42);

  /* Радиус почти прямой: 3 px. Это подпись облика — так выглядит цеховая
     документация, а не приложение из магазина. */
  --r: 3px;

  --sans: 'Onest', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Onest', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Сетка страницы — ТРИ числа на весь сайт. Раньше боковых колонок было шесть
     разных (268, 320, 340, 380, 380, 440) и три промежутка, и страницы не
     складывались в один макет: при переходе между ними содержимое дёргалось.
     Теперь колонка-навигация слева всегда `--rail`, колонка-сводка справа
     всегда `--side`, промежуток всегда `--colgap`. Внутри `.wrap` (1232 px)
     это даёт ровно 868 px основной колонки на любой странице со сводкой. */
  --rail: 232px;
  --side: 340px;
  --colgap: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* Колонка на всю высоту окна: на короткой странице подвал иначе встаёт сразу
   под текстом, и ниже остаётся пустая полоса фона. */
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
/* width:100% обязателен: `body` — flex-колонка ради прижатого подвала, а у `.wrap`
   стоит `margin: 0 auto`, и в колонке горизонтальные auto-поля отменяют растягивание. */
main.wrap { flex: 1 0 auto; width: 100%; padding-top: 28px; padding-bottom: 64px; }

a { color: var(--accent); }
a:hover { color: var(--accent-hot); }
img { max-width: 100%; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* Моноширинный: цифры, коды, артикулы. `tnum` — чтобы столбцы сумм
   выравнивались по разрядам, а не плясали. */
.m { font-family: var(--mono); font-feature-settings: 'tnum'; }

/* ================================ ОБОЛОЧКА ================================ */

/* Шапка целиком графитовая. Это и есть главное отличие облика: тёмная рама,
   светлое содержимое внутри. Раньше шапка была белой и сливалась со страницей. */
.top {
  background: var(--ink);
  position: sticky; top: 0; z-index: 40;
}

.topbar { border-bottom: 1px solid var(--dark-line); }
.topbar__in {
  display: flex; align-items: center; gap: 22px;
  min-height: 38px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--on-dark-faint);
}
.topbar__note { margin-right: auto; }
.topbar a { color: var(--on-dark-dim); text-decoration: none; }
.topbar a:hover { color: #fff; }

.top__in {
  display: flex; align-items: center; gap: 24px;
  min-height: 72px; flex-wrap: wrap;
  border-bottom: 1px solid var(--dark-line);
}

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.logo__mark {
  width: 30px; height: 30px; border-radius: var(--r);
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.logo__text { font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.logo__text b { color: var(--accent); font-weight: 800; }

/* Поле и кнопка — одна фигура: так поиск читается как инструмент,
   а не как два соседних элемента. */
.topsearch {
  display: flex; align-items: center; flex: 1 1 240px; max-width: 440px; min-width: 0;
  background: rgba(232, 238, 243, .07);
  border: 1px solid var(--dark-rule); border-radius: var(--r);
  padding: 0 4px 0 14px; height: 42px;
  transition: border-color .15s, background .15s;
}
.topsearch:focus-within { background: rgba(232, 238, 243, .12); border-color: rgba(232, 238, 243, .4); }
.topsearch input {
  flex: 1 1 auto; min-width: 0; padding: 0; height: 40px;
  font: inherit; font-size: 15px; border: 0; background: none; color: #fff; outline: none;
}
.topsearch input::placeholder { color: var(--on-dark-faint); }
.topsearch__go {
  flex: none; width: 32px; height: 32px; border: 0; border-radius: 2px; cursor: pointer;
  background: var(--accent); color: #fff; display: grid; place-items: center;
  transition: background .15s;
}
.topsearch__go:hover { background: var(--accent-hot); }

/* Частник чаще звонит, чем оформляет: у него всегда есть вопрос про диаметр. */
.top__phone { text-decoration: none; color: #fff; line-height: 1.15; white-space: nowrap; }
.top__phone b { display: block; font-family: var(--mono); font-weight: 500; font-size: 16px; letter-spacing: -.02em; }
.top__phone span { color: var(--on-dark-faint); font-size: 12px; }
.top__phone:hover b { color: var(--accent-hot); }

.cart-link {
  text-decoration: none; color: var(--on-dark);
  border: 1px solid var(--dark-rule); border-radius: var(--r);
  padding: 9px 17px; font-size: 14px; white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.cart-link:hover { border-color: rgba(232, 238, 243, .45); color: #fff; }
.cart-link--full {
  border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600;
}
.cart-link--full:hover { background: var(--accent-hot); border-color: var(--accent-hot); color: #fff; }
.cart-link__n { font-weight: 700; }

.topnav__in { display: flex; gap: 4px; flex-wrap: wrap; min-height: 46px; align-items: center; }
.topnav a {
  color: var(--on-dark-dim); text-decoration: none; font-size: 15px;
  padding: 8px 13px; border-radius: var(--r); transition: background .15s, color .15s;
}
.topnav a:hover { color: #fff; background: rgba(232, 238, 243, .07); }
/* Первый пункт — расчёт, ради которого сайт и сделан. Отделяем его чертой
   от списка разделов, иначе он теряется среди «Крепежа». */
.topnav a:first-child { color: #fff; font-weight: 600; margin-right: 16px; position: relative; }
.topnav a:first-child::after {
  content: ''; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--dark-line);
}

/* ================================ ЗАГОЛОВКИ ================================ */

h1 {
  font-size: clamp(30px, 4.2vw, 44px); line-height: 1.03; margin: 0 0 10px;
  font-weight: 800; letter-spacing: -.038em; text-wrap: balance;
}
.h2 {
  font-size: clamp(21px, 2.4vw, 28px); margin: 44px 0 18px;
  font-weight: 700; letter-spacing: -.03em; line-height: 1.15; text-wrap: balance;
}
/* Размерный ряд рвать переносом нельзя: «Ø100–» и «300» на разных строках
   читаются как другой товар. */
.nb { white-space: nowrap; }

.crumbs { font-size: 13.5px; color: var(--faint); margin-bottom: 16px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

/* ================================= ГЛАВНАЯ ================================= */

/* Первый экран: текст слева, кадр справа уходит в край и гасится градиентом.
   Рамки у кадра нет намеренно — снимок должен быть частью полосы, а не картинкой
   в коробке. */
.hero {
  position: relative; overflow: hidden; border-radius: var(--r);
  background: var(--ink); color: var(--on-dark);
  margin: 0 0 30px; min-height: 372px;
}
.hero__pic {
  position: absolute; inset: 0 0 0 auto; width: 46%; min-width: 360px;
}
.hero__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__pic::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(96deg, var(--ink) 0%, rgba(14, 20, 25, .88) 24%,
                                     rgba(14, 20, 25, .2) 74%, rgba(14, 20, 25, 0) 100%);
}
.hero__in { position: relative; padding: 40px 34px 38px; max-width: 64%; }
.hero__eyebrow {
  font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.hero h1 { color: #fff; max-width: 18ch; font-size: clamp(32px, 4.4vw, 52px); }
.hero__lead { color: var(--on-dark-dim); max-width: 52ch; margin: 16px 0 0; font-size: 17.5px; line-height: 1.55; }

.hero__facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 14px 40px;
  margin: 26px 0 0; padding: 0;
}
.hero__facts li { line-height: 1.3; }
.hero__facts b {
  display: block; font-family: var(--mono); font-weight: 500; font-size: 23px;
  color: #fff; letter-spacing: -.035em;
}
.hero__facts span { display: block; color: var(--on-dark-faint); font-size: 12.5px; line-height: 1.4; margin-top: 5px; }

.hero__go { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 28px; }
.hero__go .btn { text-decoration: none; display: inline-block; }
.hero__go .btn--ghost {
  background: none; color: #fff; border: 1px solid var(--dark-rule); box-shadow: none;
}
.hero__go .btn--ghost:hover { background: rgba(232, 238, 243, .09); border-color: rgba(232, 238, 243, .45); }

/* Условия оплаты и доставки — светлой полосой сразу под графитом.
   Абзац держит свою меру, ссылка уходит вправо: место занято делом,
   а не строкой в 145 знаков. */
.hero__ship {
  background: var(--surface); border-radius: var(--r); box-shadow: var(--lift-1);
  margin: -30px 0 34px; padding: 20px 24px; position: relative;
  color: var(--muted); font-size: 15.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 14px 32px; flex-wrap: wrap;
}
.hero__ship p { margin: 0; max-width: 64ch; }
.hero__ship b { color: var(--ink); font-weight: 600; }
.hero__ship a { white-space: nowrap; }

/* ================================== ПЛИТКИ ================================= */

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 18px; }

/* Неполный ряд. В разделе из трёх позиций auto-fill оставлял пустую четвёртую
   ячейку: плитки жались влево, справа зияла дыра. auto-fit схлопывает лишние треки,
   justify-content ставит короткий ряд посередине.
   ⚠️ Только для трёх позиций и меньше: число повторов auto-fit считается по ВЕРХНЕЙ
   границе minmax, если она в пикселях, и общее правило отняло бы у полного каталога
   целую колонку (4 → 3). На телефоне не включаем: там свои две колонки. */
@media (min-width: 561px) {
  .cards:not(.cards--pick):has(> :last-child:nth-child(-n+3)) {
    grid-template-columns: repeat(auto-fit, minmax(248px, 300px));
    justify-content: center;
  }
}

/* Выбор схемы в расчёте: три равных входа, плитки крупнее каталожных.
   Колонки заданы числом, а не auto-fit: тот считает их по ВЕРХНЕЙ границе minmax,
   и три схемы вставали в два столбца, оставляя дыру справа от третьей. */
.cards--pick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Рамка выше каталожной (158 px): в плитках выбора схемы лежат монтажные
   чертежи, а они вытянутые — у вертикальной пропорции 1:3,5, и на каталожной
   высоте труба превращалась бы в чёрточку. */
.cards--pick .card__pic { height: 290px; }

.card {
  background: var(--surface); border-radius: var(--r);
  text-decoration: none; color: var(--ink);
  display: flex; flex-direction: column; gap: 0;
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
/* Подъём вместо перекраски рамки: сетка из двенадцати плиток с оранжевыми
   обводками при наведении выглядела как список ошибок. */
.card:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }

/* Область изображения одной высоты во всём ряду: снимки сняты в разных пропорциях,
   и без рамки плитки в ряду шли ступенькой.
   ⚠️ flex, а не grid. В grid-ячейке процентная высота ребёнка не разрешается —
   строка задана как auto, её размер известен только после раскладки, — и снимок
   брал свой квадрат по ширине рамки, обрезаясь сверху и снизу. */
.card__pic {
  display: flex; align-items: center; justify-content: center;
  height: 158px; background: var(--raised);
  color: var(--faint); overflow: hidden;
  transition: background .18s;
}
.card:hover .card__pic { background: #edf1f3; }
.card__pic .pic--photo,
.card__pic svg { width: 100%; height: 100%; object-fit: contain; }

.card__name {
  font-weight: 700; font-size: 16px; letter-spacing: -.018em; line-height: 1.25;
  padding: 14px 16px 0;
}
.card__note { font-size: 12.5px; color: var(--muted); line-height: 1.4; padding: 5px 16px 0; }
.card__meta { color: var(--faint); font-size: 12.5px; line-height: 1.45; padding: 5px 16px 0; font-family: var(--mono); }
.card__price {
  margin-top: auto; padding: 12px 16px 16px;
  font-size: 16.5px; font-weight: 700; color: var(--accent); letter-spacing: -.02em;
}
.card__price s {
  font-family: var(--mono); font-size: 11.5px; font-weight: 400;
  color: var(--faint); margin-left: 7px; letter-spacing: 0;
}

/* ============================== КАРТОЧКА ТОВАРА ============================ */

.prodgrid { display: grid; grid-template-columns: 560px minmax(0, 1fr); gap: var(--colgap); align-items: start; }
/* В расчёте слева схема, справа спецификация из тринадцати строк с количеством
   и суммами. При колонке 560 px таблице оставалось 640, и названия деталей
   ломались в три строки. Схема в 360 px читается не хуже, а таблица получает
   на 200 px больше — этого хватает, чтобы строка встала в одну. */
.prodgrid--calc { grid-template-columns: var(--side) minmax(0, 1fr); }
.prodfig { margin: 0; }
/* В карточке товара подложку даёт `.gallery__stage`, а в расчёте схема лежит
   прямо в figure — без карточки она висела бы на фоне страницы. */
.prodfig:has(> .pic--big) {
  background: var(--surface); border-radius: var(--r);
  padding: 22px; box-shadow: var(--lift-1);
}
.prodfig > .pic--big { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.prod { background: var(--surface); border-radius: var(--r); padding: 24px 26px 26px; box-shadow: var(--lift-1); }

.prod__exec { color: var(--faint); margin: 0 0 6px; font-size: 13.5px; font-family: var(--mono); }
.prod__about { color: var(--muted); font-size: 16.5px; max-width: 70ch; margin: 0 0 22px; line-height: 1.6; }

/* Галерея: крупный кадр и переключатель «фото / схема».
   ⚠️ flex по той же причине, что и в плитке: в grid снимок обрезался. */
.gallery__stage {
  background: var(--surface); border-radius: var(--r); box-shadow: var(--lift-1);
  height: 380px; padding: 22px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gallery__item { align-self: stretch; flex: 1 1 auto; min-width: 0; display: grid; place-items: center; }
img.gallery__item { width: 100%; height: 100%; object-fit: contain; }
#view-scheme .pic--big { max-height: 100%; width: auto; }

.gallery__tabs { display: flex; gap: 7px; margin-top: 12px; align-items: center; }
.gtab {
  font: inherit; font-size: 13.5px; padding: 8px 15px; cursor: pointer;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--rule); border-radius: var(--r); transition: all .15s;
}
.gtab:hover { color: var(--ink); border-color: var(--ink); }
.gtab--on { background: var(--ink); color: #fff; border-color: var(--ink); }
.gtab--on:hover { color: #fff; }
.prodfig__note { color: var(--faint); font-size: 12.5px; margin: 10px 0 0; line-height: 1.45; }
.prodfig__photo { display: block; width: 100%; height: auto; margin-top: 14px; border-radius: var(--r); }

/* Переключатели. Моноширинные потому, что Ø150×250 и 430/0,5 + 430/0,5 —
   это коды, и выглядеть должны кодами. */
.opt + .opt { margin-top: 24px; }
.opt[id], .specs__h[id] { scroll-margin-top: 14px; }
.opt__label {
  font-family: var(--mono); font-size: 11.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .14em; margin-bottom: 11px;
}
.opt__row { display: flex; flex-wrap: wrap; gap: 7px; }
.opt__hint { color: var(--muted); font-size: 13px; margin: 11px 0 0; max-width: 66ch; line-height: 1.5; }

.chip {
  font-family: var(--mono); font-size: 13px; padding: 9px 11px; cursor: pointer;
  background: var(--surface); color: #35414b;
  border: 1px solid var(--rule); border-radius: var(--r);
  text-decoration: none; display: inline-block;
}
.chip:hover:not(:disabled):not(.chip--off) { border-color: var(--ink); color: var(--ink); }
.chip--on { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Недоступное сочетание показываем серым, а не прячем: видно, что оно вообще бывает. */
.chip:disabled, .chip--off { color: #b3bcc3; background: #f4f6f7; border-color: var(--line); cursor: not-allowed; }

/* Блок покупки: подложка и рамка вместо голого потока — это главное действие
   страницы, и оно не должно выглядеть как очередной абзац. */
.buybox { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 20px 22px; margin: 22px 0 0; }
.buybox .buy { border-top: 0; padding-top: 0; margin-top: 0; }

.buy { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 18px; margin-top: 6px; }
.buy__price { font-size: 34px; font-weight: 800; line-height: 1; color: var(--accent); letter-spacing: -.04em; }
.buy__old { font-family: var(--mono); font-size: 14px; color: var(--faint); text-decoration: line-through; align-self: center; }
.buy__sku { color: var(--faint); font-size: 12.5px; align-self: center; font-family: var(--mono); }
.buy__qty { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--faint); }
.buy__qty input { width: 84px; padding: 11px; font: inherit; font-family: var(--mono); border: 1px solid var(--rule); border-radius: var(--r); text-align: right; }
.buy__miss { color: var(--accent); margin: 12px 0 0; }
.buy__terms { color: var(--faint); font-size: 13px; margin: 14px 0 0; line-height: 1.5; }

.terms {
  list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;
}
.terms b { display: block; font-size: 14.5px; font-weight: 600; }
.terms span { display: block; color: var(--faint); font-size: 12.5px; line-height: 1.45; margin-top: 3px; }

.specs { width: 100%; border-collapse: collapse; font-size: 14.5px; }
/* padding-right обязателен: на узком экране колонка сжимается, и длинная подпись
   («Налогообложение») упиралась в значение без единого пробела между ними. */
.specs th { text-align: left; font-weight: 400; color: var(--muted); padding: 11px 14px 11px 0; border-bottom: 1px solid var(--line); width: 240px; vertical-align: top; }
.specs td { padding: 11px 0; border-bottom: 1px solid var(--line); color: var(--ink); }

/* Выход с карточки: расчёт и каталог. */
.crossnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 34px; }
.crossnav__i { background: var(--surface); border-radius: var(--r); padding: 22px; box-shadow: var(--lift-1); }
.crossnav__i b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 7px; }
.crossnav__i span { display: block; color: var(--muted); font-size: 14.5px; margin-bottom: 16px; line-height: 1.5; }
.crossnav__i .btn { text-decoration: none; display: inline-block; }

/* ================================== КНОПКИ ================================= */

.btn {
  font: inherit; font-weight: 600; padding: 14px 26px; cursor: pointer;
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--r);
  font-size: 15.5px;
  transition: background .15s, transform .08s;
}
/* Кнопкой бывает и ссылка. Без этого правила у «прозрачной» кнопки
   оставалось браузерное подчёркивание, и она читалась как обычная ссылка
   в рамке. Раньше это чинили точечно в двух местах — теперь один раз. */
a.btn { text-decoration: none; display: inline-block; }
.btn:hover:not(:disabled) { background: var(--accent-hot); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { background: var(--rule); cursor: not-allowed; }
.btn--slim { padding: 11px 20px; font-size: 14.5px; }
.btn--big { padding: 16px 34px; font-size: 16.5px; }
/* Второстепенное действие рядом с главным. На тёмном фоне героя свои цвета —
   там правило со своей специфичностью перебивает это. */
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); }
.btn--ghost:hover:not(:disabled) { background: var(--surface); border-color: var(--ink); }

.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }
.linkbtn:hover { color: var(--accent); }

/* =============================== ТАБЛИЦА СОСТАВА ========================== */

/* Состав расчёта. Все строки одной высоты: пояснения написаны так, чтобы влезть
   в одну строку. Ровная сетка строк — это и есть разница между таблицей
   и выгрузкой со склада. */
.kitlist { width: 100%; border-collapse: collapse; }
.kitlist th {
  font-family: var(--mono); font-size: 10.5px; font-weight: 400; color: var(--faint);
  text-transform: uppercase; letter-spacing: .12em;
  text-align: left; padding: 0 0 9px; border-bottom: 1px solid var(--line);
}
.kitlist td { padding: 11px 0; border-bottom: 1px solid var(--line); vertical-align: middle; }
.kitlist tr:last-child td { border-bottom: 0; }
.kitlist .num { text-align: right; white-space: nowrap; padding-left: 12px; font-family: var(--mono); }

.kitlist__pic { width: 58px; padding-right: 14px; color: var(--faint); }
.kitlist__pic svg { width: 44px; height: 46px; }
.kitlist__pic .pic--photo { width: 46px; height: 46px; object-fit: cover; border-radius: 2px; background: var(--raised); }

.kitlist__name { font-size: 14.5px; }
.kitlist__name a { color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.012em; }
.kitlist__name a:hover { color: var(--accent); }
.kitlist__why { display: block; color: var(--faint); font-size: 12.5px; margin-top: 3px; max-width: 54ch; line-height: 1.35; }
.kitlist__qty { color: var(--muted); width: 150px; }
.kitlist__qty .qtyform { display: inline-flex; gap: 5px; }
.kitlist__qty input { width: 48px; padding: 7px; font: inherit; font-family: var(--mono); text-align: right; border: 1px solid var(--rule); border-radius: var(--r); }
/* Цена за штуку. Без неё в строке «5 шт — 17 000 ₽» непонятно, сколько стоит
   одна труба, и человек считает делением в уме. */
.kitlist__unit { width: 96px; color: var(--muted); }
.kitlist__sum { width: 110px; font-weight: 500; }
.kitlist__act { width: 70px; text-align: right; }
.kitlist__gone { display: block; color: var(--accent); font-size: 12.5px; margin-top: 3px; }
.kitlist--gone { opacity: .7; }
/* Зелёным помечены позиции, которые сайт пересчитывает сам. Без пометки
   такая правка выглядит как ошибка сайта. */
.kitlist__auto {
  display: inline-block; color: var(--ok); background: var(--ok-soft);
  font-family: var(--mono); font-size: 10.5px; border-radius: 2px;
  padding: 2px 5px; margin-top: 4px; letter-spacing: .02em;
}
.kitlist--filled { box-shadow: inset 3px 0 0 var(--ok); }
.kitlist--filled .kitlist__name { padding-left: 10px; }
.kitlist--off { opacity: .45; }
.kitlist--off .kitlist__name a { text-decoration: line-through; }

.qtyform { display: flex; gap: 5px; justify-content: flex-end; }
.qtyform__step {
  font: inherit; font-size: 16px; line-height: 1; width: 28px; padding: 8px 0; cursor: pointer;
  background: var(--surface); color: var(--muted); border: 1px solid var(--rule); border-radius: var(--r);
}
.qtyform__step:hover { border-color: var(--ink); color: var(--ink); }
.qtyform input { width: 56px; font-family: var(--mono); }
/* Кнопка «ОК» видна только без JS — со скриптом форма уходит сама. */
.qtyform__ok { display: none; }
.nojs .qtyform__ok { display: inline-block; }
.nojs .qtyform__step { display: none; }

/* ================================== РАСЧЁТ ================================= */

/* Ввод своих размеров. Серая подложка, а не белая рамка на белом: блок стоит
   внутри белой карточки, и одной границей от неё не отделялся. */
.opt--calc { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; margin-bottom: 22px; }
.opt--calc .btn { margin-top: 2px; }
.calcfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }
.calcfields .field { margin-bottom: 12px; }

/* ================================= КОРЗИНА ================================= */

/* Состав лежит группами, а не одной таблицей: расчёт отдельно, добранное руками
   отдельно. Таблица этого не умеет — у каждой группы своя шапка с размерами. */

.cartgrid { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--colgap); align-items: start; }

.grp { background: var(--surface); border-radius: var(--r); box-shadow: var(--lift-1); }
.grp + .grp { margin-top: 18px; }
.grp__h {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 15px 28px; border-bottom: 1px solid var(--ink);
}
.grp__t { font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.grp__m { font-size: 13.5px; color: var(--muted); }
/* Оба действия группы держим одним блоком: форма «убрать весь расчёт» —
   отдельный flex-элемент, и без обёртки она переносилась на свою строку. */
.grp__act { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.grp__edit { font-size: 13.5px; }
.grp__drop { font-size: 13.5px; text-decoration: none; border-bottom: 1px dotted var(--rule); }
.grp__b { padding: 6px 28px 10px; }
.grp__f {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 28px 15px; border-top: 1px solid var(--line);
}
.grp__f span { font-size: 11.5px; color: var(--faint); letter-spacing: .1em; text-transform: uppercase; }
.grp__f b { margin-left: auto; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }

/* Условия расчёта: буква участка и его длина. */
.cond { display: inline-flex; align-items: stretch; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.cond i { font-style: normal; font-size: 11px; color: var(--faint); background: var(--raised); padding: 4px 6px; }
.cond b { font-size: 12px; font-weight: 500; padding: 4px 7px; }
.cond--on { background: var(--ink); color: #fff; border-color: var(--ink); font-size: 12px; padding: 4px 9px; }

.ln { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ln:last-child { border-bottom: 0; }
.ln__n { flex: 1 1 auto; min-width: 0; font-size: 14.5px; }
.ln__n a { color: var(--ink); text-decoration: none; font-weight: 600; letter-spacing: -.012em; }
.ln__n a:hover { color: var(--accent); }
.ln__sku { display: block; color: var(--faint); font-size: 11.5px; margin-top: 3px; }
.ln__q { flex: 0 0 auto; }
.ln__u { flex: 0 0 86px; text-align: right; color: var(--muted); font-size: 13.5px; }
.ln__s { flex: 0 0 100px; text-align: right; font-weight: 500; white-space: nowrap; }
.ln__d { flex: 0 0 60px; text-align: right; }

.paybox { background: var(--surface); border-radius: var(--r); padding: 22px 24px 24px; box-shadow: var(--lift-1); position: sticky; top: 96px; }
.paybox__sum { font-size: 34px; font-weight: 500; letter-spacing: -.04em; color: var(--accent); line-height: 1; margin-top: 8px; }
.paybox__old { display: flex; align-items: baseline; gap: 9px; margin-top: 9px; }
.paybox__old s { font-size: 13px; color: var(--faint); }
.paybox__old span { font-size: 11px; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 2px; padding: 3px 6px; letter-spacing: .04em; }
/* Разбивка «товары + доставка» под итогом: человек должен видеть, за что
   с него берут сверх товара, а не искать разницу вычитанием. */
.paybox__split { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.paybox__city { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.paybox__city .field { margin-bottom: 10px; }
.paybox__hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 16px 0 0; }
.paybox__city .paybox__hint { margin-top: 12px; }
.sum__ship { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 4px; }
.sum__ship[hidden] { display: none; }
.paybox__go { display: block; text-align: center; margin-top: 18px; }
.paybox__back { display: block; text-align: center; color: var(--muted); font-size: 14px; margin-top: 12px; }

/* ================================ ОФОРМЛЕНИЕ =============================== */

.checkout { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--colgap); align-items: start; }
.checkout__form { background: var(--surface); border-radius: var(--r); padding: 26px 28px 28px; box-shadow: var(--lift-1); }
.checkout__sum { background: var(--surface); border-radius: var(--r); padding: 22px 24px 24px; position: sticky; top: 96px; box-shadow: var(--lift-1); }

/* Надпись-ярлык над блоком. `.sum__h` — прежнее имя того же самого,
   осталось в разметке оформления. */
.lab, .sum__h { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.lab--ok { color: var(--ok); }

/* Белая карточка-панель: общая основа для блоков, которые лежат на бумаге. */
.pane { background: var(--surface); border-radius: var(--r); padding: 26px 28px 28px; box-shadow: var(--lift-1); }
.pane--side { padding: 22px 24px 24px; }
.sum__row { display: flex; gap: 12px; align-items: baseline; font-size: 14px; padding: 7px 0; }
.sum__row span { min-width: 0; }
/* Сумма позиции не переносится: «17 000 ₽» разрывалось на «17 000» и «₽»
   на отдельной строке, и колонка цен переставала читаться как колонка. */
.sum__row b { margin-left: auto; white-space: nowrap; font-family: var(--mono); font-weight: 500; }
.sum__row small { color: var(--faint); font-family: var(--mono); font-size: 11.5px; }
.sum__total { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; }
.sum__total b { margin-left: auto; font-family: var(--mono); font-weight: 500; font-size: 28px; color: var(--accent); letter-spacing: -.04em; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-size: 13.5px; color: var(--muted); margin-bottom: 6px; }
.field i { color: var(--accent); font-style: normal; margin-left: 3px; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.field__err { display: block; color: var(--accent); font-size: 12.5px; margin-top: 5px; }
.field__hint { display: block; color: var(--faint); font-size: 12.5px; margin-top: 6px; line-height: 1.45; }

.radio { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 15px; }
.dlbox { margin: 4px 0 16px 26px; padding-left: 16px; border-left: 2px solid var(--line); }
.agree { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0; }
.agree span { font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.hint { color: var(--faint); font-size: 12.5px; margin: 12px 0 0; line-height: 1.5; }
/* Ловушка для ботов: поле есть в разметке, но человек его не видит. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ================================= СПАСИБО ================================= */

/* Человек только что оставил заявку на десятки тысяч и ещё ничего не заплатил.
   Ему нужны три ответа: что будет дальше, что именно он заказал и куда это
   поедет. Поэтому экран — две колонки, а не абзац с галочкой. */

.done__head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.done__title { display: flex; align-items: baseline; gap: 14px; margin-top: 10px; }
.done__title h1 { margin: 0; }
.done__num { font-size: 20px; font-weight: 500; color: var(--faint); letter-spacing: -.02em; }
.done__lead { color: var(--muted); font-size: 15.5px; line-height: 1.5; max-width: 44ch; margin: 0; padding-bottom: 6px; }

.done__grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--colgap); align-items: start; }

.steps { display: flex; flex-direction: column; gap: 22px; margin-top: 20px; }
.step { display: flex; gap: 16px; align-items: flex-start; }
.step__n {
  width: 30px; height: 30px; flex: none; border-radius: var(--r);
  display: grid; place-items: center; font-size: 14px; font-weight: 500;
  border: 1px solid var(--rule); color: var(--faint); background: var(--surface);
}
.step--now .step__n { background: var(--ink); border-color: var(--ink); color: #fff; }
/* span внутри span: без display:block шаги слипаются в один абзац. */
.step__b, .step__t, .step__m, .step__w { display: block; }
.step__t { font-size: 16px; font-weight: 700; letter-spacing: -.018em; line-height: 1.3; }
.step__m { font-size: 13.5px; color: var(--muted); margin-top: 5px; line-height: 1.5; max-width: 62ch; }
.step__w { font-size: 11px; color: var(--accent); letter-spacing: .06em; text-transform: uppercase; margin-top: 7px; }

.done__call {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line);
}
.done__callb, .done__callt, .done__callm { display: block; }
.done__callt { font-size: 15px; font-weight: 600; }
.done__callm { font-size: 13.5px; color: var(--muted); margin-top: 4px; }
.done__phone { margin-left: auto; font-size: 19px; font-weight: 500; letter-spacing: -.025em; white-space: nowrap; color: var(--ink); }
.done__phone:hover { color: var(--accent); }

.recap { list-style: none; margin: 16px 0 0; padding: 0; }
/* Название занимает всю строку, количество и сумма стоят под ним: в колонке
   340 px «Сэндвич-труба 1,0 м (430/0,5 + 430/0,5) Ø150×250» рядом с двумя
   числами сжималось до четырёх строк в узкий столбик. */
.recap__l {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 12px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.recap__t { grid-column: 1 / -1; }
.recap__q { color: var(--faint); font-size: 12px; }
.recap__s { text-align: right; font-weight: 500; }
.recap__count { font-size: 11.5px; color: var(--faint); margin-top: 10px; }
.recap__pay { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.recap__pay .lab { margin-bottom: 0; }
.recap__sum { margin-left: auto; font-size: 28px; font-weight: 500; letter-spacing: -.04em; color: var(--accent); line-height: 1; }
.recap__way { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.recap__row { display: flex; align-items: baseline; gap: 12px; font-size: 13.5px; margin-top: 9px; }
.recap__row:first-child { margin-top: 0; }
.recap__row span { color: var(--faint); }
.recap__row b { margin-left: auto; font-weight: 500; text-align: right; }
.recap__row i { margin-left: auto; font-style: normal; color: var(--faint); font-size: 12.5px; }
.recap__fine {
  font-size: 11.5px; color: var(--faint); line-height: 1.6;
  margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}

/* Кнопка оплаты на «спасибо»: человек, закрывший окно кассы, возвращается сюда
   именно за ней, поэтому она стоит до списка шагов и не спорит с ним за внимание. */
.done__pay { margin: 0 0 22px; }
.done__back { margin-top: 26px; }

/* ============================== ТЕКСТОВЫЕ СТРАНИЦЫ ========================= */

/* Меру держит колонка, а не карточка: прежний `max-width: 78ch` был нужен,
   пока текст шёл во всю ширину страницы, а теперь только не давал карточке
   дотянуться до края своей колонки. */
.doc { background: var(--surface); border-radius: var(--r); padding: 26px 28px 28px; box-shadow: var(--lift-1); }
.doc h2.h2:first-of-type { margin-top: 6px; }
.doc p, .doc ul { color: var(--muted); font-size: 16px; line-height: 1.65; }
.doc ul { padding-left: 20px; }
.doc b { color: var(--ink); font-weight: 600; }
.doc__meta { color: var(--faint); font-size: 12.5px; margin-top: 0; }

/* Меру держит сама карточка, а не абзац внутри неё: белая коробка во всю ширину
   с текстом, обрезанным по мере, читалась как недогруженная. */
.note-block {
  background: var(--surface); border-radius: var(--r);
  padding: 26px 28px; margin-top: 34px; box-shadow: var(--lift-1);
  max-width: calc(68ch + 56px);
}
.note-block p { color: var(--muted); max-width: 68ch; line-height: 1.65; }
.note-block b { color: var(--ink); font-weight: 600; }
.empty { color: var(--muted); font-size: 16.5px; }

/* ============================== РАЗДЕЛ КАТАЛОГА ============================ */

/* Список всех разделов слева. Без него из «Крепежа» можно уйти только назад
   в главную: соседних разделов человек попросту не видит. */

.sechead { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.sechead h1 { margin: 0; }
.sechead__lead { font-size: 15px; color: var(--muted); max-width: 62ch; margin: 0; padding-bottom: 4px; line-height: 1.5; }

.catgrid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--colgap); align-items: start; }

.seclist { background: var(--surface); border-radius: var(--r); padding: 12px 10px; box-shadow: var(--lift-1); }
.seclist > .lab { padding: 4px 10px 10px; margin-bottom: 0; }
.sec {
  display: flex; align-items: baseline; gap: 10px;
  padding: 8px 10px; border-radius: var(--r);
  color: var(--ink); text-decoration: none; font-size: 14px; line-height: 1.3;
}
.sec:hover { background: var(--raised); color: var(--accent); }
.sec i { margin-left: auto; font-style: normal; font-size: 11.5px; color: var(--faint); }
.sec--on, .sec--on:hover { background: var(--ink); color: #fff; font-weight: 600; }
.sec--on i { color: var(--on-dark-faint); }

.seclist__cta { margin: 14px 10px 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.seclist__cta b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.seclist__cta span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.seclist__cta a { display: inline-block; font-size: 12.5px; margin-top: 9px; }

/* ================================== ПОИСК ================================== */

/* Результаты разложены по разделам: плоской сеткой «тройник» выдаёт четыре
   внешне похожих плитки, и главное различие — сэндвич или одностенка — теряется. */

.searchgrid { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--colgap); align-items: start; }
.resgroup + .resgroup { margin-top: 26px; }
.resgroup__h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.resgroup__h .lab { margin-bottom: 0; text-decoration: none; }
.resgroup__h .lab:hover { color: var(--accent); }
.resgroup__h span { font-size: 11.5px; color: var(--rule); }
/* Линейка до конца строки. `--line` рассчитан на белую карточку и на бумаге
   не виден вовсе, поэтому берём `--rule` вполсилы. */
.resgroup__h i { flex: 1 1 auto; height: 1px; background: var(--rule); opacity: .55; }

.helpbox { background: var(--ink); border-radius: var(--r); padding: 22px 24px 24px; }
.helpbox b { display: block; font-size: 19px; font-weight: 700; color: #fff; letter-spacing: -.025em; line-height: 1.25; }
.helpbox span { display: block; font-size: 14px; color: var(--on-dark-dim); line-height: 1.6; margin-top: 12px; }
.helpbox .btn { display: block; text-align: center; margin-top: 18px; }

.asks { margin-top: 18px; }
.asks__row { display: flex; flex-wrap: wrap; gap: 7px; }

/* ============================ ТЕКСТОВАЯ СТРАНИЦА =========================== */

/* Юридический текст одной колонкой не читают — по нему ищут ответ на один вопрос.
   Слева оглавление и соседние документы, справа то же самое числами. */

.docgrid { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--side); gap: var(--colgap); align-items: start; }
.docgrid--nofacts { grid-template-columns: var(--rail) minmax(0, 1fr); }
.docbody .doc { margin: 0; }

/* Ссылки «рядом» — не абзац, а список: без display:block они склеивались в строку. */
.seclist__cta a { display: block; font-size: 12.5px; margin-top: 6px; }
.seclist__cta a:first-child { margin-top: 2px; }

.fact { background: var(--surface); border-radius: var(--r); padding: 17px 19px; box-shadow: var(--lift-1); }
.fact + .fact { margin-top: 12px; }
.fact b { display: block; font-size: 25px; font-weight: 500; letter-spacing: -.035em; line-height: 1; }
.fact--key b { color: var(--accent); }
.fact span { display: block; font-size: 13px; color: var(--muted); margin-top: 7px; line-height: 1.45; }

.ask { background: var(--ink); border-radius: var(--r); padding: 22px 24px 24px; margin-top: 16px; }
.ask b { display: block; font-size: 15px; font-weight: 600; color: #fff; line-height: 1.3; }
.ask span { display: block; font-size: 13px; color: var(--on-dark-dim); margin-top: 7px; line-height: 1.5; }
.ask a { display: inline-block; font-size: 15px; font-weight: 500; color: #fff; margin-top: 12px; letter-spacing: -.02em; text-decoration: none; }
.ask a:hover { color: var(--accent-hot); }

/* =============================== СТАТЬИ ==================================== */

/* Список на /stati/. Плитками не делаем: у статьи нет ни снимка, ни цены,
   и плитка вышла бы пустой коробкой с заголовком. Строка с подзаголовком
   говорит, о чём материал, ещё до перехода. */
.arts { display: grid; gap: 12px; }
.art {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--surface); border-radius: var(--r);
  padding: 20px 22px 21px; box-shadow: var(--lift-1);
  transition: box-shadow .18s, transform .18s;
}
.art:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.art__h { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.022em; line-height: 1.25; }
.art:hover .art__h { color: var(--accent); }
.art__lead { display: block; font-size: 14.5px; color: var(--muted); line-height: 1.55; margin-top: 8px; max-width: 72ch; }

/* Группа списка: «Что выбрать», «Монтаж», «Эксплуатация». Двенадцать статей
   подряд человек не читает — он ищет свой вопрос, и заголовок группы
   сокращает путь до него. */
.artgroup + .artgroup { margin-top: 30px; }
.artgroup > .lab { margin-bottom: 10px; }

/* Подзаголовки внутри статьи. Без правила h3 брал браузерный размер и вставал
   вровень с h2 — читалось как второй раздел, а не как его часть. */
.doc h3 {
  font-size: 17px; font-weight: 600; letter-spacing: -.018em;
  line-height: 1.3; margin: 26px 0 8px;
}
/* Выбор региона и доставка в расчёте. Стоят НАД блоком с ценой: сначала человек
   говорит, куда везти, потом видит полную сумму — обратный порядок заставлял бы
   его переспрашивать себя «а это с доставкой или без». */
.buy__region { max-width: 320px; margin: 18px 0 0; }
.buy__deliv {
  margin: 8px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5;
}
.buy__deliv b { color: var(--ink); font-weight: 600; }

/* Четвёртый уровень нужен на странице доставки: под общим заголовком раздела
   идут названия регионов, и каждому — своя таблица ступеней. Без правила
   браузер даёт h4 размер мельче основного текста, и название теряется. */
.doc h4 {
  font-size: 15px; font-weight: 600; letter-spacing: -.012em;
  line-height: 1.3; margin: 20px 0 6px; color: var(--ink);
}
.doc ol { color: var(--muted); font-size: 16px; line-height: 1.65; padding-left: 20px; }
.doc li + li { margin-top: 6px; }
/* Таблица в статье шире колонки на телефоне не помещается — пусть едет сама,
   а не растягивает страницу. Отдельным классом, а не правилом для `.rates`:
   та же таблица стоит на странице доставки, и трогать её вид незачем. */
.arttab { width: 100%; display: block; overflow-x: auto; }

/* Выход в каталог под текстом. Стоит здесь, а не в подвале: до подвала
   дочитывают единицы, а решение принимается в момент, когда ответ получен. */
.artnext {
  background: var(--surface); border-radius: var(--r);
  padding: 20px 22px 22px; margin-top: 22px; box-shadow: var(--lift-1);
}
.artnext .lab { margin-bottom: 12px; }
.artnext__i {
  display: block; padding: 11px 0; border-top: 1px solid var(--line);
  font-size: 15.5px; font-weight: 500; letter-spacing: -.015em;
  color: var(--ink); text-decoration: none;
}
.artnext__i:hover { color: var(--accent); }
.artnext__i::after { content: ' →'; color: var(--faint); }
.artnext__i:hover::after { color: var(--accent); }
.artnext__meta { margin-top: 16px; padding: 0 2px; }

/* Диаметр не из нашего ряда: такой выбрать можно, но в состав добавится переход.
   Точка, а не цвет: цветом в этом ряду уже показан выбранный размер, и второй
   цвет превратил бы ряд из сорока кнопок в светофор. */
.chip--via::after {
  content: ''; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent); margin-left: 5px;
}
.chip--on.chip--via::after { background: #fff; }
.chip--tiny { padding: 2px 7px; font-size: 11px; }

/* Монтажный чертёж на странице расчёта. Ограничение по ВЫСОТЕ, а не по ширине:
   у листов пропорции разные и вытянутые — вертикальная схема 1:3,5, и по ширине
   колонки она уехала бы на полтора экрана вниз. */
.shema {
  display: block; margin: 0 auto;
  max-width: 100%; max-height: 520px; width: auto; height: auto;
}

/* ============================= ЗАКАЗЫ В АДМИНКЕ ============================ */

/* Продавец открывает эту страницу, чтобы ответить себе на один вопрос: пришли
   деньги или нет. Поэтому состояние оплаты — цветом и словами, а не кодом кассы. */

.ord { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-top: 12px; }
.ord--ok   { border-left: 3px solid var(--ok); }
.ord--wait { border-left: 3px solid var(--accent); }
.ord--bad  { border-left: 3px solid var(--rule); }

.ord__h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.ord__n { font-size: 15px; font-weight: 500; }
.ord__when { font-size: 12px; color: var(--faint); }
.ord__state { font-size: 11.5px; padding: 3px 8px; border-radius: 2px; }
.ord__state--ok   { background: var(--ok-soft); color: var(--ok); }
.ord__state--wait { background: var(--accent-soft); color: var(--accent); }
.ord__state--bad  { background: var(--raised); color: var(--muted); }
.ord__sum { margin-left: auto; font-size: 17px; font-weight: 500; letter-spacing: -.02em; }

.ord__who { display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; margin-top: 8px; font-size: 14px; }
.ord__way, .ord__note { font-size: 13px; color: var(--muted); margin-top: 6px; }
.ord__more { margin-top: 8px; font-size: 13px; }
.ord__more summary { cursor: pointer; color: var(--muted); }
.ord__items { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.ord__items td { padding: 5px 0; border-bottom: 1px solid var(--line); }
.ord__items .num { text-align: right; padding-left: 12px; white-space: nowrap; }
.ord__act { margin-top: 8px; }

/* ================================= КОНТАКТЫ ================================ */

/* Частник звонит чаще, чем пишет, поэтому телефон здесь самое крупное на странице.
   Справа — цех: адрес проще узнать по фотографии ворот, чем по названию улицы. */

.conts { display: grid; grid-template-columns: minmax(0, 1fr) var(--side); gap: var(--colgap); align-items: start; }
.conts__tel { display: inline-block; font-size: 36px; font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-top: 10px; color: var(--ink); text-decoration: none; }
.conts__tel:hover { color: var(--accent); }
.conts__when { color: var(--muted); font-size: 14.5px; margin: 10px 0 0; }
.conts__two {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
}
.conts__mail { display: inline-block; font-size: 16px; font-weight: 500; margin-top: 8px; }
.conts__addr { font-size: 16px; font-weight: 600; line-height: 1.35; margin: 8px 0 0; }
.conts__m { font-size: 13px; color: var(--muted); margin: 7px 0 0; line-height: 1.45; }
.conts__req { margin-top: 18px; }
.conts__req .specs th { width: 210px; }

.pane--flush { padding: 0; overflow: hidden; }
.conts__pic { display: block; width: 100%; height: 240px; object-fit: cover; }
.conts__cap { padding: 18px 22px 20px; }
.conts__cap b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.conts__cap span { display: block; font-size: 14px; color: var(--muted); line-height: 1.55; margin-top: 8px; }

.conts__way { background: var(--ink); border-radius: var(--r); padding: 22px 24px 24px; margin-top: 18px; }
.conts__way .lab { color: var(--on-dark-faint); }
.conts__way p { color: var(--on-dark-dim); font-size: 14.5px; line-height: 1.6; margin: 12px 0 0; }
/* В строку три числа не помещаются: колонка теперь общесайтовая, 340 px,
   и «0 ₽» уезжало на вторую строку одно. Складываем их столбиком — число
   слева, подпись справа: так они читаются парами, а не сеткой в два ряда. */
.conts__facts {
  display: flex; flex-direction: column; gap: 11px; list-style: none;
  margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--dark-line);
}
.conts__facts li { display: flex; align-items: baseline; gap: 12px; }
.conts__facts b { flex: none; font-size: 17px; font-weight: 500; color: #fff; letter-spacing: -.03em; }
.conts__facts span { font-size: 12px; color: var(--on-dark-faint); line-height: 1.35; }

/* ============================ ПУСТЫЕ СОСТОЯНИЯ ============================= */

/* 404 и пустая корзина. Пустоту до подвала нельзя убрать стилями — её закрывают
   содержанием: список выходов с пояснением, куда каждый ведёт. */
.lost { max-width: 720px; }
.lost__code { font-size: 46px; font-weight: 500; color: #cdd5da; letter-spacing: -.04em; line-height: 1; margin-bottom: 14px; }
.lost__call { color: var(--muted); font-size: 14.5px; margin-top: 20px; }
.lost__call a { font-weight: 500; }

.waylist { background: var(--surface); border-radius: var(--r); box-shadow: var(--lift-1); margin-top: 20px; padding: 4px 20px; }
.way {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink);
}
.way:last-child { border-bottom: 0; }
.way__n { font-size: 15.5px; font-weight: 600; letter-spacing: -.015em; flex: 0 0 auto; }
.way__m { font-size: 13px; color: var(--muted); flex: 1 1 240px; line-height: 1.4; }
.way__a { color: var(--accent); font-size: 14px; flex: none; }
.way:hover .way__n { color: var(--accent); }

.rates { border-collapse: collapse; margin: 12px 0 6px; min-width: 320px; }
.rates th, .rates td { padding: 9px 0; border-bottom: 1px solid var(--line); text-align: left; }
.rates th { font-weight: 400; color: var(--muted); padding-right: 32px; }
.rates td { font-weight: 600; white-space: nowrap; font-family: var(--mono); }

.secref { color: var(--ink); text-decoration: none; }
.secref:hover { color: var(--accent); }

/* ============================== ФОТО ПРОИЗВОДСТВА ========================== */

/* Полоса «делаем сами» — доказательство, а не картинки для красоты. */
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.shot { margin: 0; background: var(--surface); border-radius: var(--r); overflow: hidden; box-shadow: var(--lift-1); }
/* Одинаковая высота кадра: снимки сняты в разных пропорциях, и ряд без рамки
   шёл ступенькой. Здесь cover уместен — это репортаж, а не товар. */
.shot img { display: block; width: 100%; height: 200px; object-fit: cover; }
.shot figcaption { color: var(--muted); font-size: 13px; padding: 13px 15px 15px; line-height: 1.45; }

/* ================================== ПЛАШКИ ================================= */

/* Скидка. Не полоса во всю ширину: сообщение осталось, крик ушёл. */
.sale {
  background: var(--accent-soft); color: var(--ink);
  border: 1px solid var(--accent-line); border-radius: var(--r);
  padding: 11px 16px; margin-bottom: 24px;
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
}
.sale b { font-size: 15.5px; color: var(--accent); font-weight: 700; }
.sale span { color: var(--muted); font-size: 13.5px; }

.added {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--ok-soft); border-left: 3px solid var(--ok); border-radius: var(--r);
  padding: 12px 16px; margin-bottom: 18px;
}
.added__mark { width: 22px; height: 22px; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 13px; flex: none; }
.added__text { margin-right: auto; font-size: 15px; }
.added .btn--slim { background: var(--ok); }
.added .btn--slim:hover { background: #1a5a3e; }

.alert { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: var(--r); padding: 12px 16px; margin-bottom: 16px; color: var(--ink); font-size: 14.5px; }
.ok-note { background: var(--ok-soft); border-left: 3px solid var(--ok); border-radius: var(--r); padding: 12px 16px; margin-bottom: 18px; font-size: 14.5px; }

/* ================================== АДМИНКА ================================ */

.months { border-collapse: collapse; margin-top: 8px; }
.months th { text-align: left; font-weight: 400; padding: 6px 16px 6px 0; color: var(--muted); white-space: nowrap; }
.months th span { color: var(--accent); font-size: 12px; }
.months--now th { font-weight: 600; color: var(--ink); }
.months td { padding: 4px 0; }
.months input { width: 84px; padding: 8px; font: inherit; font-family: var(--mono); border: 1px solid var(--rule); border-radius: var(--r); text-align: right; }
.months__pct { color: var(--faint); margin-left: 6px; }
.fs { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; margin: 0 0 18px; }
.fs legend { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); padding: 0 6px; }

/* ================================== ПОДВАЛ ================================= */

.foot { background: var(--ink); color: var(--on-dark-dim); padding: 42px 0 26px; }
.foot__in { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px; }
.foot__h { font-weight: 600; margin-bottom: 11px; color: #fff; font-size: 14.5px; }
.foot p { color: var(--on-dark-dim); font-size: 13.5px; margin: 0; line-height: 1.65; }
.foot a { color: var(--on-dark); text-decoration: none; border-bottom: 1px solid var(--dark-line); }
.foot a:hover { color: #fff; border-bottom-color: var(--accent); }
.foot__phone { font-family: var(--mono); font-size: 16px; font-weight: 500; letter-spacing: -.02em; }
.foot__legal {
  color: var(--on-dark-faint); font-size: 12.5px; border-top: 1px solid var(--dark-line);
  margin-top: 28px; padding-top: 18px; line-height: 1.6;
}

/* ========================== ПОЛОСА ПОКУПКИ НА ТЕЛЕФОНЕ ===================== */

.stickybuy { display: none; }

/* ================================ АДАПТИВ ================================== */

@media (max-width: 980px) {
  .prodgrid { grid-template-columns: minmax(0, 1fr); }
  .checkout { grid-template-columns: minmax(0, 1fr); }
  .checkout__sum { position: static; }
  .cartgrid { grid-template-columns: minmax(0, 1fr); }
  .paybox { position: static; }
  .done__grid { grid-template-columns: minmax(0, 1fr); }
  .conts { grid-template-columns: minmax(0, 1fr); }
  /* Список разделов уходит ПОД товары: иначе на телефоне человек пролистывает
     двенадцать ссылок прежде, чем увидит то, за чем пришёл. */
  .catgrid { grid-template-columns: minmax(0, 1fr); }
  .seclist { order: 2; }
  .searchgrid { grid-template-columns: minmax(0, 1fr); }
  .docgrid, .docgrid--nofacts { grid-template-columns: minmax(0, 1fr); }
  /* А на текстовой странице оглавление остаётся сверху: это короткий список
     ссылок, по нему на телефоне и прыгают к нужному разделу. */
  .docgrid .seclist { order: 0; }
  .cards--pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__in { max-width: 100%; }
  .hero__pic { width: 100%; min-width: 0; }
  .hero__pic::after { background: linear-gradient(180deg, rgba(14,20,25,.7) 0%, rgba(14,20,25,.9) 45%, var(--ink) 100%); }
}

@media (max-width: 720px) {
  .gallery__stage { height: 280px; }
  .kitlist__pic { display: none; }
  .kitlist__why { font-size: 12px; }
  .kitlist__qty, .kitlist__unit, .kitlist__sum, .kitlist__act { width: auto; }
  .kitlist td { padding: 9px 0; }
  .kitlist__act { padding-left: 10px; }
  .note-block { max-width: none; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  main.wrap { padding-top: 20px; padding-bottom: 52px; }

  .top__in { gap: 12px; min-height: 64px; }
  /* flex-basis сбрасываем в 100%: иначе меню втискивается в остаток первой строки
     и обтекает кнопку корзины вместо того, чтобы уйти под неё целиком. */
  .topnav { order: 3; width: 100%; flex: 1 1 100%; }
  /* Телефон остаётся в верхней строке рядом с корзиной — режем подпись,
     а не саму кнопку звонка: на мобильном это главный способ задать вопрос. */
  .top__phone { margin-left: auto; }
  .top__phone b { font-size: 15px; }
  .top__phone span { display: none; }

  .hero { min-height: 0; }
  .hero__in { padding: 26px 20px 30px; }
  .hero__facts { gap: 14px 26px; }
  .hero__facts b { font-size: 20px; }
  .hero__ship { margin-top: -22px; padding: 16px 18px; font-size: 14.5px; }

  .buy { gap: 12px; }
  .buy__price { font-size: 30px; }
  .ln__u { display: none; }
  .pane { padding: 20px 18px 22px; }
  .pane--flush { padding: 0; }
  .done__title h1 { font-size: 28px; }
  .done__num { font-size: 17px; }
  .conts__two { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .conts__tel { font-size: 30px; }
  .conts__req .specs th { width: 128px; }
  .doc { padding: 22px 20px; }
  .note-block { padding: 20px 18px; }
  .prod { padding: 20px 18px; }

  /* Полоса покупки снизу: на телефоне кнопка уезжает за экран, пока человек
     листает характеристики, и вернуться к ней он уже не пытается. */
  .stickybuy {
    display: flex; align-items: center; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--surface); border-top: 1px solid var(--line);
    padding: 10px 16px; box-shadow: 0 -4px 16px rgba(14, 20, 25, .1);
  }
  .stickybuy[hidden] { display: none; }
  .stickybuy__price { font-size: 21px; font-weight: 800; margin-right: auto; color: var(--accent); letter-spacing: -.03em; }
  .stickybuy .btn { padding: 12px 22px; }
  /* Чтобы полоса не перекрывала последний абзац страницы. */
  main.wrap { padding-bottom: 92px; }
}

@media (max-width: 560px) {
  /* Каталог на телефоне — в два столбца. Одной колонкой двенадцать разделов
     растягивались на четыре экрана прокрутки. */
  .cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  /* Сорок один диаметр на телефоне занимал полтора экрана. Кнопки здесь короткие
     («Ø135»), поэтому поля им можно урезать, не рискуя попасть мимо пальцем. */
  .opt__row--dia { gap: 5px; }
  .opt__row--dia .chip { padding: 7px 8px; font-size: 12.5px; }

  .cards--pick { grid-template-columns: 1fr; }
  .card__pic { height: 112px; }
  /* На телефоне плитка схемы идёт во всю ширину, и чертежу можно дать высоту:
     112 px хватает каталожной фотографии, но не вытянутому чертежу. */
  .cards--pick .card__pic { height: 260px; }
  .card__name { font-size: 14.5px; padding: 11px 12px 0; }
  .card__note, .card__meta { font-size: 11.5px; padding: 4px 12px 0; }
  .card__price { font-size: 15px; padding: 10px 12px 13px; }
  .card__price s { font-size: 11px; }

  /* Корзина на телефоне. В строку не помещается всё сразу: одно только «− 1 +» —
     134 px, и строка уезжала вбок, пряча сумму и «убрать» за краем экрана.
     Ломаем её надвое: название сверху, под ним количество, сумма и «убрать». */
  .ln { flex-wrap: wrap; gap: 10px; }
  .ln__n { flex: 1 0 100%; }
  /* Артикул на телефоне не помещается в строку и переносится на вторую,
     а в расчёте позиций пятнадцать — это полтысячи лишних пикселей прокрутки.
     Покупателю он здесь и не нужен: артикулы есть в письме о заказе. */
  .ln__sku { display: none; }
  .ln__s { flex: 1 1 auto; }
  .ln__d { flex: 0 0 auto; }
  .grp__b { padding: 4px 14px 8px; }
  .grp__h, .grp__f { padding-left: 14px; padding-right: 14px; }

  .kitlist, .kitlist tbody { display: block; }
  /* Шапка и цена за штуку уходят: строка на телефоне и так ломается на две,
     а четыре числа подряд в ней уже не читаются. */
  .kitlist thead { display: none; }
  .kitlist td.kitlist__unit { display: none; }
  .kitlist tr[hidden] { display: none; }
  .kitlist tr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
  .kitlist td { display: block; border-bottom: 0; padding: 0; }
  /* Селектор с тегом обязателен: правило из блока 720 px — просто `.kitlist__pic`,
     специфичность (0,1,0), — здесь проиграло бы соседнему `.kitlist td` (0,1,1). */
  .kitlist td.kitlist__pic { display: none; }
  .kitlist__name { flex: 1 0 100%; }
  .kitlist__qty { flex: 0 0 auto; }
  .kitlist .num.kitlist__sum { flex: 1 1 auto; text-align: right; padding-left: 0; }
  .kitlist__act { flex: 0 0 auto; padding-left: 0; }
}

/* ========================== ШАПКА НА ТЕЛЕФОНЕ ============================== */

/* Чекбокс держим в потоке, но уводим за экран: он должен оставаться фокусируемым
   с клавиатуры, поэтому display:none тут нельзя. */
.navtoggle { position: absolute; left: -9999px; }
.navtoggle__btn { display: none; }

@media (max-width: 640px) {
  .navtoggle__btn {
    display: block; margin-left: auto; cursor: pointer; user-select: none;
    font-size: 20px; line-height: 1; padding: 8px 11px;
    border: 1px solid var(--dark-rule); border-radius: var(--r); color: var(--on-dark);
  }
  .navtoggle:focus-visible ~ .top__in .navtoggle__btn { outline: 2px solid var(--accent); }
  /* Под кнопкой прячется каталожное меню и поиск. Служебная полоса уходит совсем:
     доставка и контакты есть в подвале, а вверху они съедали строку. */
  .topbar { display: none; }
  .topnav { display: none; }
  .topsearch { display: none; }
  .navtoggle:checked ~ .topnav,
  .navtoggle:checked ~ .top__in .topsearch { display: flex; }
  .navtoggle:checked ~ .topnav { display: block; border-top: 1px solid var(--dark-line); }
  .navtoggle:checked ~ .topnav .topnav__in { flex-direction: column; align-items: stretch; padding-bottom: 10px; }
  .navtoggle:checked ~ .topnav a { border-radius: 0; padding: 11px 0; }
  .navtoggle:checked ~ .topnav a:first-child { margin-right: 0; border-bottom: 1px solid var(--dark-line); }
  .navtoggle:checked ~ .topnav a:first-child::after { display: none; }
  .navtoggle:checked ~ .top__in .topsearch { order: 4; flex: 1 1 100%; max-width: none; margin-bottom: 10px; }
}