/* Start:/bitrix/templates/agromax/template_styles.css?179153851798078*/
/* Агромакс — витрина каталога.
   Указатель деталей, а не магазин: ведёт артикул, фотография вторична.
   С 03.10.2026 переносится дизайн B2 «Цех» (design/napravleniya-2026-10-01/b2):
   светлая серая гамма, красный — только главные действия, зелёный — кант, черта, точки. */

/* Шрифты раздаются с нашего сервера, а не с Google Fonts: иначе IP каждого
   посетителя уходит в Google до всякого согласия (152-ФЗ, решение 23.09.2026).
   PT Sans 400/700 и PT Sans Narrow 700 — файлы Google Fonts без изменений: статические веса,
   по четыре поднабора, unicode-range — из ответа CSS2 API (tools/build/fonts_b2.css).
   JetBrains Mono — переменная, 400–500.
   Лицензия SIL OFL 1.1, тексты лежат рядом: fonts/OFL-*.txt. */

@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-400-latin.woff2') format('woff2');
  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: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-700-latin.woff2') format('woff2');
  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: 'PT Sans Narrow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-narrow-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-narrow-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-narrow-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'PT Sans Narrow'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/pt-sans-narrow-700-latin.woff2') format('woff2');
  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'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/bitrix/templates/agromax/fonts/jetbrains-mono-latin.woff2') format('woff2');
  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 {
  /* ---- B2 «Цех» — дословно из b2/style.css 14–47 ---- */
  --paper: #FFFFFF;
  --ink: #1F1F1F;                 /* текст */
  --ink-2: #575757;               /* второстепенный текст, 7.2:1 на белом */
  --ink-3: #666666;               /* подписи и подсказки, 5.7:1 */
  --mute: #969696;                /* значки, неактивное */
  --mute-2: #A7A7A7;
  --bg-1: #F4F4F4;                /* светло-серые плоскости */
  --bg-2: #E6E6E6;
  --bg-cat: #F3F3F3;              /* поле под мозаикой каталога — как у боевого сайта */
  --line: #DADADA;
  --line-2: #D1D1D3;
  --field: #8A8A8A;               /* рамка поля, 3.4:1 */
  --red: #E31818;                 /* только главные действия */
  --red-dk: #C41313;
  --green: #50A125;               /* фирменный: кант, точки, рамки, значки, подчёркивания — не текст */
  --green-ink: #3A7D1B;           /* зелёный ТЕКСТ ссылок: 5.1:1 на белом, 4.6:1 на #F3F3F3 и #F4F4F4 */
  --green-ink-dk: #336E18;        /* то же на #E6E6E6 подвала: 5.0:1 (обычный --green-ink там 4.1) */
  --green-wash: #EEF6E9;          /* лёгкая подложка контурной кнопки при наведении */
  --green-line: rgba(80, 161, 37, .5);  /* подчёркивание зелёной ссылки в покое */
  --kant: 3px;                    /* зелёная кромка у кнопок */

  --f-display: "PT Sans Narrow", "Arial Narrow", "PT Sans", Arial, sans-serif;
  --f-text: "PT Sans", Arial, "Helvetica Neue", sans-serif;
  --f-mono: "JetBrains Mono", Consolas, "Courier New", monospace;

  --t1: 54px;                     /* H1 первого экрана и страницы */
  --t2: 38px;                     /* заголовки разделов */
  --t3: 24px;                     /* подзаголовки, плитки */

  --wrap: 1200px;
  --gut: 40px;
  --sec: 88px;

  /* ---- сверх макета ---- */
  --err: #B3261E;                 /* ошибки полей (Р35): состояние, а не действие — не фирменный красный */
  --hd-h: 77px;                   /* видимая часть липкой шапки от 1101 px: строка меню 76 + линия; ниже шапка не липкая — 0 (Р8) */

  /* ---- переходный слой: старые имена ссылаются на B2 и уходят на чистке (Т5.1) ---- */
  --steel-900: var(--ink);
  --steel-700: var(--ink-2);      /* #575757 */
  --steel-500: var(--ink-3);      /* #666 */
  --steel-400: var(--mute);       /* #969696 */
  --steel-300: var(--line-2);
  --steel-200: var(--line);
  --steel-100: var(--bg-2);
  --steel-050: var(--bg-1);
  /* янтарь стал зелёным только после того, как заливки кнопок, бейджей и отметок
     переведены явно (красный, --bg-2): по --signal остались черты, рамки и точки */
  --signal: var(--green);
  --signal-deep: var(--green-ink);
  --sans: var(--f-text);
  --mono: var(--f-mono);

  /* ширина — как в B2 (Р6): 1200 + 2 × --gut, у шапки, подвала, полос и содержимого одна сетка */
  --max: calc(var(--wrap) + 2 * var(--gut));
  --rail: 252px;
}
/* поля и шкала заголовков — ступенями макета (b2/style.css 683, 738) */
@media (max-width: 1100px) {
  :root { --gut: 32px; --hd-h: 0px; }
}
@media (max-width: 760px) {
  :root { --gut: 16px; --sec: 60px; --t1: 36px; --t2: 30px; --t3: 21px; }
}

/* ---------- основа — b2/style.css 49–74 ----------
   Без глобального сброса h1–h3/p/ul/ol (Р4): описания из 1С, новости, политика
   и согласия держат свои отступы и маркеры. Сброс действует только внутри компонентов B2. */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.5 var(--f-text);
  overflow-x: clip;
}

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }
button, input, textarea { font: inherit; color: inherit; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }

/* визуально скрытый текст шаблона: ловушки форм, подписи. Не путать с .vh макета (отступ страницы) */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
/* секция на всю ширину окна изнутри .main (Р6) */
.bleed { margin-inline: calc(50% - 50vw); }
/* моноширинный — только артикулы и телефоны */
.mono, .art { font-family: var(--f-mono); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: #fff; padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }

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

/* Сброс отступов, которого в шаблоне нет (Р4), компоненты B2 делают сами: у .sh__t, .sh__lead,
   .h-sub, .eye и .crumbs — свой margin. */

/* ---------- кнопки — b2/style.css 75–97 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 0; background: none;
  font: 700 16px/1.1 var(--f-text); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
/* зелёный кант — нижняя кромка кнопки: 1 px рамки + внутренняя тень, вместе --kant.
   Нижняя рамка тоже зелёная — иначе под зелёным оставалась бы красная нитка */
.btn--red { background: var(--red); border-color: var(--red) var(--red) var(--green); color: #fff; box-shadow: inset 0 calc(1px - var(--kant)) 0 var(--green); }
.btn--red:hover { background: var(--red-dk); border-color: var(--red-dk) var(--red-dk) var(--green); }
.btn--redline { border: 2px solid var(--red); border-bottom-color: var(--green); color: var(--red); background: #fff; box-shadow: inset 0 calc(2px - var(--kant)) 0 var(--green); }
.btn--redline:hover { background: var(--red); color: #fff; }
/* «В заявку» в выдаче: красный текст в серой рамке, заливка — по наведению; дюжина кнопок не красит сетку.
   Кант тоньше (2 px) — в сетке из дюжины карточек полный кант рябил бы */
.btn--add { border-color: var(--line-2) var(--line-2) var(--green); color: var(--red); background: #fff; box-shadow: inset 0 -1px 0 var(--green); }
.btn--add:hover { border-color: var(--red) var(--red) var(--green); background: var(--red); color: #fff; }
/* спокойная кнопка: серая рамка, тёмный текст, зелёная кромка снизу; при наведении — зелёная рамка и лёгкая подложка */
.btn--line { border-color: var(--field) var(--field) var(--green); color: var(--ink); background: #fff; box-shadow: inset 0 calc(1px - var(--kant)) 0 var(--green); }
.btn--line:hover { border-color: var(--green); background: var(--green-wash); }
.btn--sm { --kant: 2px; min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn svg { flex: none; }

/* ---------- состояния и количество — b2/style.css 108–138 ---------- */
/* зелёное — только «Из наличия» */
.tag-g {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 4px 10px 4px 9px; border: 1px solid var(--line); background: #fff;
  color: var(--ink); font: 700 14px/1.2 var(--f-text); white-space: nowrap;
}
.tag-g::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
/* уже в заявке — состояние, а не кнопка: белая ячейка с зелёной кромкой и галочкой */
.in-req {
  display: flex; align-items: stretch; min-height: 40px;
  border: 1px solid var(--line); border-left: 3px solid var(--green); background: #fff;
  color: var(--ink); font: 700 15px/1.1 var(--f-text);
}
.in-req__t { display: inline-flex; flex: 1; align-items: center; gap: 7px; min-width: 0; padding: 0 10px; white-space: nowrap; }
.in-req__t svg { flex: none; color: var(--green); }
.in-req__t .mono { font-size: 14px; }
.in-req__x {
  display: grid; place-items: center; flex: none; width: 38px;
  border: 0; border-left: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink-3); cursor: pointer;
}
.in-req__x:hover { background: var(--bg-1); color: var(--ink); }

/* количество */
.qty { display: inline-flex; border: 1px solid var(--field); background: #fff; }
.qty__b { width: 44px; border: 0; border-radius: 0; background: none; font: 700 20px/1 var(--f-text); cursor: pointer; }
.qty__b:hover { background: var(--bg-1); }
.qty__i { width: 52px; border: 0; border-inline: 1px solid var(--line); border-radius: 0; text-align: center; font: 500 17px var(--f-mono); -moz-appearance: textfield; }
.qty__i::-webkit-outer-spin-button, .qty__i::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm { height: 36px; }
.qty--sm .qty__b { width: 32px; font-size: 17px; }
.qty--sm .qty__i { width: 38px; font-size: 15px; }

/* ---------- заголовок раздела и ссылки — b2/style.css 140–152 ---------- */
.sec { padding-top: var(--sec); }
.sh { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px 32px; margin-bottom: 28px; }
.sh__t { margin: 0; font: 700 var(--t2)/1.05 var(--f-display); letter-spacing: .005em; text-wrap: balance; }
.sh__lead { max-width: 38em; margin: 10px 0 0; color: var(--ink-2); font-size: 17px; }
/* зелёные ссылки: «Весь каталог», «Спецпредложение…», «Отправьте списком», «Запчасти раздела», «Смотреть позиции» —
   текст --green-ink (контраст ≥ 4.5), подчёркивание полупрозрачным фирменным, по наведению — сплошное */
.sh__more { color: var(--green-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--green-line); text-decoration-thickness: 1px; text-underline-offset: 5px; white-space: nowrap; }
.sh__more:hover { text-decoration-color: var(--green-ink); }
.h-sub { margin: 0; font: 700 var(--t3)/1.1 var(--f-display); letter-spacing: .005em; }
.eye { margin: 0; color: var(--ink-3); font: 700 13px/1.3 var(--f-text); letter-spacing: .08em; text-transform: uppercase; }
/* зелёная ссылка B2 (.lnk макета): имя .lnk занято нейтральной ссылкой-кнопкой шаблона (карта имён) */
.lnk-g { color: var(--green-ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--green-line); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.lnk-g:hover { text-decoration-color: var(--green-ink); }
/* серая подчёркнутая ссылка — b2/style.css 497 */
.lnk-u { color: var(--ink-2); font-size: 14px; text-underline-offset: 3px; }
/* артикул-подсказка — b2/style.css 340–342 */
.chip { padding: 6px 10px; border: 1px solid transparent; background: #fff; font: 500 14px/1.1 var(--f-mono); text-decoration: none; }
.chip--w { font: 400 15px/1.1 var(--f-text); }
.chip:hover { border-color: var(--green); }

/* ---------- логотипы брендов — b2/style.css 309–316 ----------
   одна оптическая высота, серые, в цвете — по наведению. Высота = общая (--lh) × поправка знака (--k);
   тон — яркость (--b), контраст (--c) и непрозрачность (--o): поправки задаёт AGX_BRAND_LOGO (Т1.3) */
.logo {
  display: block; flex: none; width: auto; height: calc(var(--lh, 26px) * var(--k, 1)); max-width: none; object-fit: contain;
  filter: grayscale(1) brightness(var(--b, 1)) contrast(var(--c, 1)); opacity: var(--o, .74); transition: filter .2s, opacity .2s;
}
.logo--txt { height: auto; color: var(--ink); font: 700 calc(var(--lh, 26px) * .95)/1 var(--f-text); letter-spacing: -.01em; white-space: nowrap; filter: none; }

/* ---------- поля — b2/style.css 485–497, без секции .ask (она станет .reqf, Т2.3) ---------- */
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field--wide { grid-column: 1 / -1; }
.field__l { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.inp { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--field); border-radius: 0; background: #fff; font-size: 16px; }
.inp:focus-visible { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 0; }
textarea.inp { height: 84px; padding: 12px 14px; resize: vertical; line-height: 1.4; }
.checks { display: grid; gap: 10px; margin-top: 18px; }
.chk { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; cursor: pointer; }
/* без висячих коротких слов в подписи согласия */
.chk span { text-wrap: pretty; }
.chk input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }

/* ---------- постраничность B2 — b2/style.css 581–587 под именем .pgn (карта имён) ---------- */
.pgn { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.pgn__info { color: var(--ink-2); font-size: 15px; }
/* перенос строки — сверх макета: окно «← Назад 1 … 4 5 6 … N Дальше →» на 360 в строку не входит */
.pgn__list { display: flex; flex-wrap: wrap; gap: 6px; }
.pg { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); font: 500 15px var(--f-mono); text-decoration: none; }
.pg:hover { border-color: var(--green); }
.pg[aria-current] { border: 2px solid var(--ink-2); background: var(--bg-1); font-weight: 700; }
.pg--prev, .pg--next { font: 700 15px var(--f-text); }
/* пропуск в окне «1 … 4 5 6 … N» (agx_pager) — не ссылка: без рамки и без отклика на наведение */
.pg--gap, .pg--gap:hover { min-width: 0; padding: 0 4px; border-color: transparent; color: var(--ink-3); }

@media (max-width: 760px) {
  .sh { margin-bottom: 22px; }
  .sh__lead { font-size: 16px; }
  .fields { grid-template-columns: 1fr; }
  /* флажки и ссылка на политику — под палец: строка не ниже 40 px, флажок 22 px */
  .checks { gap: 0; margin-top: 10px; }
  .chk { min-height: 40px; padding-block: 8px; }
  .chk input { width: 22px; height: 22px; margin-top: -1px; }
  .lnk-u { display: inline-block; padding-block: 10px; }
  .pgn { flex-direction: column; align-items: flex-start; }
}

/* ---------- форма запроса в раскладке B2 — b2/style.css 469–498 и 844–857 ----------
   Секция .ask макета здесь .reqf (карта имён: .ask в шаблоне — кнопка). Разметка —
   agx_raschet_form(…, ['layout' => 'b2']): главная и /zapros/ (Р34). Фон как на боевом сайте:
   #F3F3F3 и мозаика чёрно-белого каталога по правому нижнему краю; верхняя и левая кромки
   картинки растворяются (две маски пересекаются). На всю ширину окна — .bleed */
.reqf { position: relative; isolation: isolate; overflow: hidden; margin-top: var(--sec); padding-block: 64px; background: var(--bg-cat); }
.reqf::before {
  content: ""; position: absolute; right: 0; bottom: 0; z-index: -1; width: 1062px; max-width: none; height: 318px;
  background: url('/bitrix/templates/agromax/img/bg-catalog.jpg') 100% 100% no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 96px), linear-gradient(to right, transparent 0, #000 120px);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0, #000 96px), linear-gradient(to right, transparent 0, #000 120px);
          mask-composite: intersect;
}
/* сверх макета: сразу под заголовком страницы (/zapros/) — отступ как у .cat каталога, а не секции главной */
.pagehead + .reqf { margin-top: 32px; }
.reqf__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
/* у <p> шаблона свои отступы (глобального сброса нет, Р4) — нижний обнуляем явно */
.reqf__note { margin: 20px 0 0; color: var(--ink-2); font-size: 15px; }
.reqf__form { padding-top: 6px; }
.reqf .sh__lead { text-wrap: pretty; }
.reqf__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
/* состояние ошибки (Р35): рамка поля и подпись под ним — --err; ошибка согласия — под текстом
   подписи (флажок 18 + зазор 10), общая плашка .alert — над полями */
.reqf [aria-invalid="true"] { border-color: var(--err); }
.reqf .checks .kform__err { margin: 0 0 0 28px; }
/* серая плашка .alert на сером поле секции не видна — белая, как поля */
.reqf .alert { background: #fff; }
.reqf__form .kform__ctx { margin: 0 0 16px; }
@media (max-width: 760px) {
  .reqf { padding-block: 44px; }
  .pagehead + .reqf { margin-top: 20px; }
  .reqf__in { grid-template-columns: 1fr; gap: 24px; }
  .reqf__form { padding-top: 0; }
  /* мозаика меньше и сдвинута вправо: на узком экране видны квадраты, а не ровное серое поле */
  .reqf::before { width: 760px; height: 228px; right: -170px; background-size: 100% 100%; }
  .reqf__foot { margin-top: 14px; }
  .reqf__foot .btn { width: 100%; }
  .reqf .checks .kform__err { margin-left: 32px; }
}

/* ---------- шапка — b2/style.css 154–220 (разметка — header.php, пункты — include/menu.php) ---------- */
/* белая, как у боевого сайта. На компьютере липкая: серая строка с телефоном уезжает, строка
   с меню и поиском остаётся (Р8); видимая высота — --hd-h */
.hdr { position: relative; z-index: 20; background: #fff; }
@media (min-width: 1101px) {
  .hdr { position: sticky; top: -37px; }
  html { scroll-padding-top: 96px; }
}
.top { background: var(--bg-1); border-bottom: 1px solid var(--bg-2); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 36px; font-size: 14px; }
.top__ph { display: flex; align-items: baseline; gap: 10px; flex: none; text-decoration: none; white-space: nowrap; }
.top__ph .mono { font-size: 14px; }
.top__ph small { color: var(--ink-3); font-size: 13px; }
.top__ph:hover .mono { text-decoration: underline; text-underline-offset: 3px; }
.top__aux { display: flex; gap: 22px; flex: none; margin-left: auto; white-space: nowrap; }
.top__aux a { color: var(--ink-2); text-decoration: none; }
.top__aux a:hover { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; }
/* сверх макета: плашка «предварительная сборка» — серым текстом, чтобы сборку не приняли за сайт (Р10) */
.top__build { flex: none; color: var(--ink-3); font-size: 13px; white-space: nowrap; }

.hdr__bar { position: relative; border-bottom: 1px solid var(--line); }
.hdr__in { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; min-height: 76px; }
.hdr__logo { flex: none; }
.hdr__logo picture { display: block; }
.hdr__logo img { height: 40px; width: auto; }
.hdr__nav { display: flex; align-items: center; gap: 22px; flex: none; }
.nav-l { padding: 6px 0 4px; border-bottom: 2px solid transparent; font-weight: 700; text-decoration: none; white-space: nowrap; }
/* меню: наведение — зелёным, как на боевом (a:hover {color:#50a125}); текущий раздел — зелёная черта */
.nav-l:hover { color: var(--green-ink); border-bottom-color: var(--green-line); }
.nav-l[aria-current] { border-bottom-color: var(--green); }
/* сезон в меню — светлая плашка с тонкой рамкой */
.season-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px;
  border: 1px solid var(--line); background: var(--bg-1); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.season-pill svg { flex: none; color: var(--ink-2); }
.season-pill:hover { border-color: var(--green); color: var(--green-ink); }
.season-pill:hover svg { color: var(--green-ink); }

/* поиск в шапке: в каталоге и карточке всегда; на главной — пока плита поиска не видна */
.hsearch { position: relative; display: flex; flex: 1 1 200px; min-width: 180px; height: 42px; }
.hdr--nosearch .hsearch { display: none; }
.hsearch:has(.hsearch__inp:focus-visible) { outline: 3px solid var(--ink); outline-offset: 2px; }
.hsearch__inp {
  flex: 1; min-width: 0; height: 100%; padding: 0 36px 0 12px;
  border: 1px solid var(--field); border-right: 0; border-radius: 0; background: #fff; color: var(--ink);
  font: 500 15px var(--f-mono);
}
.hsearch__inp:focus-visible { outline: none; }
.hsearch__inp::placeholder { color: var(--ink-3); font: 400 15px var(--f-text); }
.hsearch__btn { display: grid; place-items: center; flex: none; width: 46px; border: 0; border-radius: 0; background: var(--red); color: #fff; box-shadow: inset 0 calc(-1 * var(--kant)) 0 var(--green); cursor: pointer; }
.hsearch__btn:hover { background: var(--red-dk); }
/* крестик (Р40): кнопка, поле очищает скрипт; без скрипта скрыт атрибутом hidden */
.clr {
  position: absolute; top: 50%; right: 52px; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px;
  border: 0; background: none; color: var(--ink-2); cursor: pointer;
}
.clr:hover { background: var(--bg-1); }
.clr[hidden], :placeholder-shown + .clr { display: none; }

.hdr__tools { display: flex; align-items: center; gap: 22px; flex: none; margin-left: auto; }
.tool { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tool svg { flex: none; display: none; }
.tool:hover { color: var(--green-ink); text-decoration: underline; text-underline-offset: 4px; }
/* счётчик заявки — .cnt макета; имя .cnt занято сеткой контактов (карта имён) */
.hdr__cnt { min-width: 24px; height: 24px; padding: 0 6px; background: var(--bg-2); color: var(--ink); font: 700 14px/24px var(--f-text); text-align: center; }
.hdr__btn {
  display: none; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--line-2); background: #fff; color: var(--ink); font-weight: 700; text-decoration: none; cursor: pointer;
}
.hdr__btn[aria-expanded="true"] { background: var(--bg-1); border-color: var(--field); }
.mnav { display: none; }


/* ---------- каркас ---------- */

/* содержимое 1200 + 2 × --gut (40/32/16), как .wrap макета (Р6). Снизу отступа нет: воздух
   до подвала даёт фирменная полоса (.stripe, margin-top: --sec), как в макете — без двойного */
.main { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
/* viewport-fit=cover (Т1.5, ради выреза снизу у полосы cookie) отдаёт странице и края экрана:
   на iPhone с вырезом в альбомной ориентации поля не уже выреза. Без выреза env() = 0 — поле --gut */
.wrap, .main { padding-left: max(var(--gut), env(safe-area-inset-left, 0px)); padding-right: max(var(--gut), env(safe-area-inset-right, 0px)); }

/* хлебные крошки — b2/style.css 532–537: nav > ol.crumbs > li (agx_crumbs, Т1.3) */
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 24px 0 0; list-style: none; color: var(--ink-2); font-size: 14px; }
.crumbs a { color: var(--ink-2); text-underline-offset: 3px; }
.crumbs a:hover { color: var(--ink); }
.crumbs li + li::before { content: "/"; margin-right: 10px; color: var(--mute-2); }
.crumbs [aria-current] { color: var(--ink); }
/* переходно — старая разметка div.crumbs: a, span[aria-hidden] «/», span текущей страницы.
   Нижний отступ — вместо margin-top у .pagehead макета: следом идёт .head. Уходит со страницами на agx_crumbs() */
div.crumbs { padding-bottom: 18px; }
div.crumbs > span[aria-hidden] { color: var(--mute-2); }
div.crumbs > span:not([aria-hidden]) { color: var(--ink); }

/* заголовок страницы — b2/style.css 539–540 и 870 (agx_pagehead, Т1.3): Narrow 700, --t1, на телефоне 40 px.
   --doc — документы и формы: шкала --t2 (38/30, Р36), длинные заголовки вроде «Политика обработки…» */
.pagehead { margin-top: 18px; }
.pagehead__t { font: 700 var(--t1)/1 var(--f-display); }
.pagehead--doc .pagehead__t { font-size: var(--t2); line-height: 1.05; }
/* телефон в подзаголовке («Запрос принят») не рвётся по дефису: «902-» / «58-69» */
.pagehead a[href^="tel:"] { white-space: nowrap; }
@media (max-width: 760px) { .pagehead__t { font-size: 40px; } }

/* ---------- боковой указатель разделов ---------- */

/* ---------- заголовок раздела ---------- */

.head { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 20px; }

.head__row { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }

h1 {
  font: 700 30px/1.15 var(--f-display); letter-spacing: .005em; margin: 0;
}
/* заголовок страницы — как .pagehead__t макета: Narrow 700, --t1 (54/36, Р36) */
.head h1 { font: 700 var(--t1)/1 var(--f-display); }
/* переходно — карточка товара: заголовок как .card__h1 макета (b2/style.css 619, 901), до Т3.3 */

.head__n {
  font: 500 13px/1 var(--mono); color: var(--steel-500);
  border: 1px solid var(--steel-300); padding: 5px 8px; white-space: nowrap;
}

/* подзаголовок — вид .sh__lead */
.head__d { max-width: 38em; margin: 10px 0 0; color: var(--ink-2); font-size: 17px; }
@media (max-width: 760px) {
  .head__d { font-size: 16px; }
}

/* ---------- подразделы плиткой ---------- */

.subs { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1px;
        background: var(--steel-200); border: 1px solid var(--steel-200); margin-bottom: 28px; }

.sub {
  background: var(--paper); padding: 14px 16px; text-decoration: none;
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.sub:hover { background: var(--bg-1); }
.sub__n { font: 400 11px/1.6 var(--mono); color: var(--steel-400); flex: none; }
.sub b { font-weight: 500; font-size: 14px; }

/* список типов: много коротких ссылок, плитками вышла бы простыня */

/* ---------- страницы ---------- */

/* старая постраничность — вид .pgn/.pg макета, пока страницы не перейдут на agx_pager() (Т1.3) */
.pager { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.pager__i {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink);
  font: 500 15px var(--f-mono); text-decoration: none;
}
.pager__i:hover { border-color: var(--green); }
.pager__i--on, .pager__i--on:hover { border: 2px solid var(--ink-2); background: var(--bg-1); font-weight: 700; }

/* ---------- карточка товара ---------- */





/* таблица на линиях — как .specs макета (b2/style.css 637–640): название серым, значение жирным */
.spec { width: 100%; border-collapse: collapse; margin: 4px 0 24px; font-size: 16px; border-top: 1px solid var(--line); }
.spec th, .spec td { text-align: left; padding: 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { font-weight: 400; color: var(--ink-2); font-size: 15px; width: 45%; padding-right: 16px; }
.spec td { font-weight: 700; font-variant-numeric: tabular-nums; }
.spec .num { font-family: var(--mono); font-weight: 400; }

/* старая главная кнопка — вид .btn .btn--red. Страницы переводятся на .btn .btn--red (карта имён).
   Без white-space: nowrap макета: у старых раскладок кнопка бывает уже текста */
.ask {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; text-align: center;
  border: 1px solid; border-color: var(--red) var(--red) var(--green); border-radius: 0;
  background: var(--red); color: #fff; box-shadow: inset 0 calc(1px - var(--kant)) 0 var(--green);
  font: 700 16px/1.1 var(--f-text); text-decoration: none; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.ask:hover { background: var(--red-dk); border-color: var(--red-dk) var(--red-dk) var(--green); }

.docs { list-style: none; margin: 20px 0 0; padding: 0; }
.docs li { border-top: 1px solid var(--steel-200); }
.docs a { display: flex; gap: 10px; align-items: baseline; padding: 10px 0; text-decoration: none; font-size: 14px; }
.docs a:hover { color: var(--signal-deep); }
.docs .ext { font: 500 10px/1 var(--mono); text-transform: uppercase; color: var(--steel-500);
             border: 1px solid var(--steel-300); padding: 4px 5px; flex: none; }

.body { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--steel-200); max-width: 70ch; font-size: 14.5px; }
/* описания из 1С приходят со своими шрифтами («x-small», Arial) — на экране выходило 10 px */
.body [style*="font-size"], .body [style*="font-family"], .body font {
  font-size: inherit !important; font-family: inherit !important;
}

/* ---------- страница марки ---------- */

.body--brand { margin-top: 0; border-top: 0; padding-top: 0; max-width: 74ch; }
.body--brand h3 {
  font: 700 16px/1.3 var(--sans); margin: 26px 0 10px; letter-spacing: -.01em;
}
.body--brand ul { margin: 0; padding: 0; list-style: none; }
.body--brand li {
  padding: 8px 0 8px 14px; border-bottom: 1px solid var(--steel-200); position: relative;
}
.body--brand li::before {
  content: ""; position: absolute; left: 0; top: 15px; width: 6px; height: 1px; background: var(--signal);
}
.body--brand li b { font-family: var(--mono); font-weight: 500; font-size: 13px; margin-right: 6px; }
.body--brand p { margin: 0 0 12px; }

/* статус у марки: дилер, представитель. Первое, что проверяют по брендовому запросу */
/* марка, каталог которой живёт на отдельном сайте */
.site {
  display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  border: 1px solid var(--steel-300); background: var(--paper);
  padding: 22px 24px; margin: 28px 0 8px;
  border-left: 4px solid var(--signal);
}
.site__t { font: 700 17px/1.25 var(--sans); letter-spacing: -.01em; }
.site__d { margin: 6px 0 0; color: var(--steel-500); font-size: 14px; max-width: 56ch; }

/* ---------- новости ---------- */

.news { display: grid; gap: 1px; background: var(--steel-200); border: 1px solid var(--steel-200); }
.ni {
  display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: start;
  background: var(--paper); padding: 18px 20px; text-decoration: none; color: inherit;
}
.ni:hover { background: var(--bg-1); }
.ni__fig { overflow: hidden; }
.ni__fig img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.ni__fig--none {
  aspect-ratio: 4/3;
  background: repeating-linear-gradient(135deg, var(--steel-050) 0 7px, var(--steel-100) 7px 8px);
}
.ni__body { display: block; }
.ni__d { display: block; font: 400 12px/1 var(--mono); color: var(--steel-400); margin-bottom: 8px; }
.ni__t { display: block; font: 700 17px/1.3 var(--sans); letter-spacing: -.01em; margin-bottom: 8px; }
.ni__p { display: block; font-size: 14px; color: var(--steel-500); line-height: 1.5; }

@media (max-width: 640px) {
  .ni { grid-template-columns: 1fr; gap: 12px; }
  .ni__fig img { aspect-ratio: 16/9; }
}

/* ---------- кабинет: формы и таблицы ---------- */

/* ошибка формы: серая плашка с кромкой --err (Р35), не фирменный красный */
.alert {
  border: 0; border-left: 4px solid var(--err); background: var(--bg-1); color: var(--ink);
  padding: 12px 16px; margin-bottom: 20px; max-width: 460px; font-size: 14px;
}

.form { max-width: 380px; }
/* подпись поля — вид .field__l */
.form__l { display: block; margin: 14px 0 6px; color: var(--ink); font-size: 14px; font-weight: 700; }
/* поле — вид .inp */
.form__i {
  display: block; width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--field); border-radius: 0; background: #fff; color: var(--ink);
  font: 400 16px/1.4 var(--f-text);
}
.form__i:focus-visible { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 0; }
/* галочки — вид .chk; согласия (label.consent) — тоже: разметку и подписи не трогаем */
.form__c, .kform__c, .consent {
  display: flex; align-items: flex-start; gap: 10px; color: var(--ink);
  font-size: 14px; line-height: 1.4; cursor: pointer;
}
.form__c input, .kform__c input, .consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); }
.consent span { text-wrap: pretty; }
.form__c { margin: 16px 0 20px; }

.spec--orders th, .spec--basket th { font-weight: 700; color: var(--steel-900); border-bottom: 2px solid var(--steel-900); }
.spec--orders td, .spec--basket td { font-weight: 400; }
.spec--orders th.r, .spec--orders td.r, .spec--basket th.r, .spec--basket td.r { text-align: right; }
.spec--orders th:first-child, .spec--basket th:first-child { width: auto; }
.spec .num { font-family: var(--mono); font-size: 13px; }
.spec--orders a.num { text-decoration: none; border-bottom: 1px solid var(--steel-300); }
.spec--orders a.num:hover { color: var(--signal-deep); border-color: var(--signal); }

/* статус заказа в кабинете: серая гамма; выполненный — зелёной рамкой, текст тёмный (как .tag-g) */
.tag {
  font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em;
  border: 1px solid var(--line-2); background: #fff; padding: 4px 6px; color: var(--ink-3); white-space: nowrap;
}
.tag--ok { border-color: var(--green); color: var(--ink); }

/* ---------- заголовок блока и ссылка «все …» (каталог, «О компании», заявка) ----------
   Главная B2 — своим файлом css/home.css (Т2.3) */

/* заголовок блока — Narrow, --t3 (как .h-sub макета) */
.h2 { font: 700 var(--t3)/1.1 var(--f-display); letter-spacing: .005em; margin: 0; }
.more { font-size: 13px; color: var(--steel-500); text-decoration: none; border-bottom: 1px solid var(--steel-300); margin-left: auto; }
.more:hover { color: var(--steel-900); border-color: var(--steel-500); }

/* Поисковый «прибор» в цвет шапки — на пустой выдаче поиска */
.two__eye { margin: 0 0 6px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }

/* «О компании»: четыре проверяемых факта строкой, дальше текст и реквизиты */
.abt__k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 0 0 30px;
          background: var(--steel-200); border: 1px solid var(--steel-200); }
.abt__k div { display: flex; flex-direction: column-reverse; padding: 16px 18px; background: var(--paper); }
.abt__k dd { margin: 0; font: 700 24px/1.1 var(--sans); letter-spacing: -.01em; }
.abt__k dt { margin-top: 5px; font-size: 13px; color: var(--steel-500); }
.abt { max-width: 76ch; }
.abt .h2 { margin: 30px 0 10px; }
.abt .h2:first-child { margin-top: 0; }
.abt li a { text-decoration: none; border-bottom: 1px solid var(--steel-300); }
.abt li a:hover { color: var(--signal-deep); border-color: var(--signal); }
.abt__req { margin-top: 4px; }
.abt__req th { width: 34%; }
@media (max-width: 640px) { .abt__k { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Пустая выдача поиска: тот же тёмный «прибор» поиска, что на главной, и два блока ссылок */
/* minmax(0, 1fr): иначе колонку раздувает поле поиска до своей ширины по атрибуту size —
   на 360 и 390 страница уезжала вбок (до Т3.2) */
/* выдача по другому написанию артикула: «FS80» → «FS 80» */
.srch__alt { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--signal); background: #fff; font-size: 14px; }

/* ---------- заявка ---------- */

.add { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.add__l { display: block; font-size: 13px; color: var(--steel-500); margin-bottom: 6px; }
.add__n { margin: 10px 0 0; font-size: 13px; color: var(--steel-500); max-width: 46ch; }
.form__i--q { width: 92px; text-align: right; font-family: var(--mono); }

.form--wide { max-width: 720px; }
.form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.form__c a, .kform__c a, .consent a { color: inherit; text-decoration: underline; text-underline-offset: 3px; border: 0; }
.form__c a:hover, .kform__c a:hover, .consent a:hover { text-decoration-thickness: 2px; }

.bt { display: flex; gap: 18px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
/* вторая кнопка — вид .btn--line */
.ask--ghost {
  border-color: var(--field) var(--field) var(--green); background: #fff; color: var(--ink);
  box-shadow: inset 0 calc(1px - var(--kant)) 0 var(--green);
}
.ask--ghost:hover { border-color: var(--green); background: var(--green-wash); }
/* нейтральная ссылка-кнопка («очистить», «удалить») — вид .lnk-u */
.lnk {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: 400 14px/1.4 var(--f-text); color: var(--ink-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.lnk:hover { color: var(--ink); }

/* высота — по rows: в «Написать нам» поле на семь строк */
textarea.form__i { height: auto; min-height: 84px; padding: 12px 14px; line-height: 1.4; resize: vertical; }

@media (max-width: 640px) { .form__grid { grid-template-columns: 1fr; } }

/* ---------- согласие у форм ----------
   Галочка согласия и ссылка на политику — разными строками: с 01.09.2025 согласие
   оформляется отдельно от иных документов (ч. 1 ст. 9 152-ФЗ). */
/* строка политики — вид .lnk-u, под текстом подписи: флажок 18 + зазор 10 */
.consent__pol { margin: -10px 0 18px 28px; font-size: 14px; }
.kform .consent__pol { margin: 6px 0 0 28px; }
.consent__pol a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; border: 0; }
.consent__pol a:hover { color: var(--ink); }
@media (max-width: 760px) {
  /* под палец, как .chk и .lnk-u макета на телефоне: строка не ниже 40 px, флажок 22 px */
  .form__c, .kform__c, .consent { min-height: 40px; padding-block: 8px; }
  .form__c input, .kform__c input, .consent input { width: 22px; height: 22px; margin-top: -1px; }
  .consent__pol, .kform .consent__pol { margin-left: 32px; }
  .consent__pol a { display: inline-block; padding-block: 10px; }
}

/* Horizontal rows: arrows share one behavior; touch and trackpad scrolling stay native. */
.scroll-rail { scrollbar-width: none; overscroll-behavior-x: contain; }
.scroll-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }
.scroll-controls { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
.scroll-controls--heading { flex: none; margin-left: auto; margin-bottom: 0; }
.scroll-controls[hidden], [data-scroll][hidden] { display: none; }
.scroll-arrow { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); background: #fff; color: var(--ink); font: 24px/1 var(--f-text); cursor: pointer; }
.scroll-arrow:disabled { opacity: .3; cursor: default; }
.scroll-arrow:not(:disabled):hover { border-color: var(--green); color: var(--green-ink); }
.scroll-controls:not([hidden]) + .compare-panel { margin-top: 0; }
.pagehead__t, .head h1 { min-width: 0; overflow-wrap: anywhere; }

/* ---------- юридические тексты ----------
   Строки не шире 80 знаков, таблицы целей и cookie — во всю ширину с прокруткой
   на телефоне; места, которые должен заполнить оператор, — жёлтым. */
.legal { max-width: 80ch; overflow-wrap: anywhere; }
html { scroll-padding-top: 96px; }
.legal p { margin: 0 0 12px; }
.legal p, .legal li, .legal h2, .legal h3 { max-width: 80ch; }
.legal h2 { margin: 30px 0 10px; font: 700 30px/1.25 var(--f-display); letter-spacing: .005em; }
.legal h3 { margin: 20px 0 8px; font: 700 18px/1.3 var(--f-text); }
.legal table { display: block; overflow-x: auto; width: 100%; margin: 12px 0 18px; border-collapse: collapse; font-size: 13.5px; }
.legal th, .legal td { padding: 8px 10px; text-align: left; vertical-align: top; border: 1px solid var(--steel-200); min-width: 120px; }
.legal thead th { background: var(--bg-1); font-weight: 700; }
.legal mark.todo { background: #ffe59a; color: var(--steel-900); padding: 0 3px; }
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 24px; }
.legal ul { list-style: disc; }
.legal ol { list-style: decimal; }
.legal ul ul { list-style: circle; }
.legal li { padding: 0; border: 0; margin-bottom: 6px; }
.legal li::before { content: none; }

/* ---------- уведомление о cookie (Р13) ----------
   Светлая полоса внизу, не закрывает страницу и не мешает работать (разбор конкурентов:
   у ТОПИКС баннер согласия закрывал весь экран телефона). В макете полосы нет — собрана из
   компонентов B2: белая плоскость с линией и тенью, как липкая строка карточки (.buybar);
   «Понятно» — не главное действие, контурная .btn--line .btn--sm. Содержимое — по .wrap. */
.ck {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -14px rgba(31, 31, 31, .3);
}
.ck__in { display: flex; align-items: center; gap: 12px 32px; }
.ck__t { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.ck__t a { color: var(--ink); text-underline-offset: 3px; }
.ck__t a:hover { color: var(--green-ink); }
.ck__ok { flex: none; }
@media (max-width: 760px) {
  .ck { padding-top: 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .ck__in { flex-direction: column; align-items: stretch; gap: 10px; }
  .ck__t { font-size: 13px; }
  /* в карточке полоса стоит над липкой строкой «В заявку» (Р13; класс has-buybar ставит Т3.3).
     69 px — высота .buybar: линия 1 + 10 + кнопка 48 + 10; вырез экрана снизу учитывает она сама */
  body.has-buybar .ck { bottom: calc(69px + env(safe-area-inset-bottom, 0px)); padding-bottom: 12px; }
}

/* ---------- сравнение и баннеры в колонке ---------- */

.add--cmp { margin-top: 12px; }

.cmp { overflow-x: auto; border: 1px solid var(--steel-200); background: var(--paper); }
.cmp__t { border-collapse: collapse; width: 100%; font-size: 14px; }
.cmp__t th, .cmp__t td { border-bottom: 1px solid var(--steel-200); vertical-align: top; }
.cmp__h {
  text-align: left; font-weight: 400; color: var(--steel-500); font-size: 13px;
  padding: 10px 16px; width: 210px; background: var(--steel-050);
  position: sticky; left: 0; border-right: 1px solid var(--steel-200);
}
.cmp__v { padding: 10px 16px; min-width: 190px; }
.cmp__d { color: var(--steel-300); }
.cmp__c { padding: 14px 16px 16px; text-align: left; position: relative; min-width: 190px; vertical-align: top;
          border-bottom: 2px solid var(--steel-900); }
.cmp__c img { width: 100%; max-width: 150px; aspect-ratio: 4/3; object-fit: contain; margin: 6px 0 10px; }
.cmp__none { display: block; aspect-ratio: 4/3; max-width: 150px; margin: 6px 0 10px;
  background: repeating-linear-gradient(135deg, var(--steel-050) 0 7px, var(--steel-100) 7px 8px); }
.cmp__a { font: 500 11.5px/1 var(--mono); color: var(--steel-700); display: block; }
.cmp__n { display: block; font-weight: 500; text-decoration: none; line-height: 1.3; }
.cmp__n:hover { color: var(--signal-deep); }
.cmp__b { display: block; margin-top: 6px; font: 500 10px/1 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; color: var(--steel-400); text-decoration: none; }
.cmp__x {
  position: absolute; right: 8px; top: 8px; cursor: pointer;
  background: none; border: 0; font: 400 18px/1 var(--sans); color: var(--steel-400); padding: 2px 5px;
}
.cmp__x:hover { color: var(--signal-deep); }

/* ---------- пусто ---------- */

/* пусто: светло-серая плашка без рамки, заголовок — как .h-sub */
.agx-empty { background: var(--bg-1); border: 0; padding: 32px; max-width: 62ch; }
.agx-empty h2 { font: 700 var(--t3)/1.1 var(--f-display); letter-spacing: .005em; margin: 0 0 10px; }
.agx-empty p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* ---------- фирменная полоса — единственная, над подвалом (b2/style.css 503–509) ---------- */
/* воздух до неё — её margin-top: у .main нижнего отступа нет */
.stripe { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; margin-top: var(--sec); }
.stripe__r, .stripe__g { display: block; height: 5px; }
.stripe__r { background: var(--red); }
.stripe__g { background: var(--green); }
.stripe__m { width: auto; height: 26px; }

/* ---------- подвал: светло-серый, тёмный текст (b2/style.css 510–531) ----------
   Глобального сброса h2/p/ul в шаблоне нет (Р4) — отступы и маркеры подвал обнуляет сам */
.ftr { margin-top: 12px; background: var(--bg-2); }
.ftr__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.35fr); gap: 40px; padding-top: 48px; }
.ftr__co { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ftr__logo { margin-bottom: 14px; }
.ftr__logo picture { display: block; }
.ftr__logo img { height: 40px; width: auto; }
.ftr__ph { font-size: 19px; text-decoration: none; }
.ftr__muted { margin: 0; color: var(--ink-2); font-size: 14px; }
.ftr__co a { text-decoration: none; }
/* подвал: наведение — зелёным, тон темнее обычного: на #E6E6E6 --green-ink не добирает до 4.5 */
.ftr__co a:hover { color: var(--green-ink-dk); text-decoration: underline; text-underline-offset: 3px; }
.ftr__h { margin: 0 0 14px; color: var(--ink-2); font: 700 13px/1.3 var(--f-text); letter-spacing: .08em; text-transform: uppercase; }
.ftr__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.ftr__list a { text-decoration: none; }
.ftr__list a:hover { color: var(--green-ink-dk); text-decoration: underline; text-underline-offset: 4px; }
.ftr__cta { padding: 24px 24px 26px; background: var(--bg-1); }
.ftr__cta-t { margin: 0; font: 700 var(--t3)/1.1 var(--f-display); }
.ftr__cta p { margin: 10px 0 18px; color: var(--ink-2); }
.ftr__bot { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 48px; padding-block: 22px 28px; border-top: 1px solid var(--line-2); color: var(--ink-2); font-size: 14px; }
.ftr__bot a { color: var(--ink-2); text-underline-offset: 3px; }
.ftr__bot a:hover { color: var(--green-ink-dk); }

/* узкий экран — b2/style.css 715 и 862–868 */
@media (max-width: 1100px) {
  .ftr__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .stripe { column-gap: 8px; }
  .stripe__r, .stripe__g { height: 4px; }
  .stripe__m { height: 22px; }
  .ftr__grid { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-top: 36px; }
  .ftr__co, .ftr__cta { grid-column: 1 / -1; }
  .ftr__logo img { height: 32px; }
  .ftr__bot { margin-top: 36px; }
}

/* ---------- узкий экран ---------- */

@media (max-width: 1000px) {
  /* на узком экране товары идут первыми: указатель разделов уезжает под них,
     иначе до первой позиции нужно пролистать полтора десятка строк навигации */
}

@media (max-width: 640px) {
  h1 { font-size: 24px; }
}

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

/* ---------- вход, регистрация, восстановление ---------- */

.tabs { display: flex; gap: 0; margin: -4px 0 22px; border-bottom: 1px solid var(--steel-200); flex-wrap: wrap; }
.tab {
  padding: 9px 16px 10px; text-decoration: none; font-size: 15px; color: var(--ink-2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
/* текущая вкладка — зелёная черта 2 px, как текущий пункт меню */
.tab--on { color: var(--ink); font-weight: 700; border-bottom-color: var(--green); }

/* подтверждение — пара к .alert: серая плашка, кромка --green */
.ok {
  border: 0; border-left: 4px solid var(--green); background: var(--bg-1); color: var(--ink);
  padding: 12px 16px; margin-bottom: 20px; max-width: 62ch; font-size: 14px;
}

.note { margin: 16px 0 0; font-size: 14px; color: var(--ink-3); max-width: 52ch; }
.note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; border: 0; }
.note a:hover { color: var(--ink); }

.form__h { font: 400 11px/1 var(--mono); color: var(--steel-400); margin-left: 6px; }
.alert a { color: inherit; }

/* ---------- отбор по назначению ---------- */

/* Р14: на марках, типах и комплектах — светлая полоса под шапкой (agx_dlya_bar), в каталоге —
   колонка (agx_dlya_rail, разметка — b2/catalog.html 47–51). Чисел нет (Р16). По умолчанию
   отмечено всё — это «без отбора». Со скриптом отбор применяется по галочке и кнопки «Показать»
   нет: site.js ставит ей hidden; без скрипта работает она. */
.dlya__go[hidden], .rail__go[hidden] { display: none; }

/* Со скриптом кнопка уходит, но site.js подключён с defer и выполняется уже после первой
   отрисовки. Если бы в первую отрисовку кнопка стояла в строке, её уход сдвигал бы страницу:
   на 641–833 px строка полосы переносилась иначе (88 -> 76 px, с отбором 70 -> 49 px, CLS до 0,56).
   Поэтому, пока у html нет .js, кнопка невидима и размера не имеет. Кнопка в разметке последняя
   (после «сбросить»), так что её уход не трогает ничего, что стоит в строке. Если site.js так и не
   выполнился (заблокирован, сбой сети), через 4 с кнопка возвращается и отбор работает ею.
   Без скрипта (scripting: none) условие не выполняется — кнопка на месте с первой отрисовки.
   !important — против общего «animation: none !important» при prefers-reduced-motion (выше):
   без него у тех, кто убрал анимацию в системе, кнопка не вернулась бы никогда. Движения тут нет —
   длительность 0, кнопка просто появляется; специфичность (0,2,1) выше, чем у «*». */
@media (scripting: enabled) {
  html:not(.js) .dlya__go, html:not(.js) .rail__go {
    visibility: hidden; width: 0; height: 0; min-height: 0; margin: 0; padding: 0; border-width: 0; overflow: hidden;
    animation: agx-go 0s 4s forwards !important;
  }
  html:not(.js) .rail__go { animation-name: agx-go-rail !important; }
}
@keyframes agx-go { to { visibility: visible; width: auto; height: auto; min-height: 40px; padding: 0 16px; border-width: 1px; } }
@keyframes agx-go-rail { to { visibility: visible; width: auto; height: auto; min-height: 40px; margin-top: 12px; padding: 0 16px; border-width: 1px; } }

/* полоса: серая плоскость, как строка .top; галочки — вид .chk, «Показать» — .btn--line .btn--sm,
   содержимое — по .wrap. Строка ростом 40 px — по подписям; кнопка той же высоты и на телефоне
   (без отступов сверху и снизу), чтобы без скрипта строка с ней была не выше, чем без неё */
.dlya { background: var(--bg-1); border-bottom: 1px solid var(--line); }
.dlya__in { display: flex; align-items: center; flex-wrap: wrap; gap: 0 24px; padding-block: 4px; }
.dlya__t { color: var(--ink-3); font: 700 13px/1.3 var(--f-text); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.dlya__c { align-items: center; min-height: 40px; white-space: nowrap; }
/* у .chk флажок сдвинут под первую строку подписи; в полосе строка одна — по центру */
.dlya__c input { margin: 0; }

@media (max-width: 760px) {
  .dlya__in { gap: 0 18px; padding-block: 6px; }
  .dlya__t { width: 100%; padding-top: 6px; }
}

/* Свёрнутая полоса — только на телефоне и только там, где работает скрипт (аудит, п. 7). Условие —
   @media (scripting: enabled), а не класс из site.js: скрипт с defer выполняется после первой
   отрисовки, и полоса схлопывалась бы на глазах (сдвиг всей страницы, CLS ≈ 0,09 на каждом списке).
   Переключатель — ссылка #dlya-in: site.js ведёт её как кнопку (.is-open), а не загрузился он
   (html без .js) — раскрывает :target. Без скрипта условие не выполняется: полоса развёрнута.
   Браузер, который этого условия не знает, тоже показывает полосу развёрнутой. */
.dlya__tg { display: none; }
@media (max-width: 640px) and (scripting: enabled) {
  .dlya__in { padding-block: 0; }
  .dlya__tg {
    display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px;
    color: var(--ink-2); font: 400 15px/1.3 var(--f-text); text-decoration: none; cursor: pointer;
  }
  .dlya__tg b { font-weight: 700; color: var(--ink); }
  .dlya__tg::after {
    content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 auto; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg);
  }
  .dlya.is-open .dlya__tg::after, html:not(.js) .dlya__in:target .dlya__tg::after { transform: translateY(2px) rotate(-135deg); }
  .dlya__t { display: none; }
  html.js .dlya:not(.is-open) .dlya__in > :not(.dlya__tg),
  html:not(.js) .dlya__in:not(:target) > :not(.dlya__tg) { display: none; }
  .dlya.is-open .dlya__in, html:not(.js) .dlya__in:target { padding-bottom: 6px; }
}

/* колонка каталога — b2/style.css 543, 552–554, 879–880. .rail__h — общий заголовок колонки:
   им же Т3.2 подписывает «Разделы» (h2), поэтому свой margin — глобального сброса нет (Р4) */
.rail__h { margin: 0 0 10px; padding: 0; color: var(--ink-3); font: 700 13px/1.3 var(--f-text); letter-spacing: .08em; text-transform: uppercase; }
.rail__f { min-width: 0; margin: 32px 0 0; padding: 0; border: 0; }
.fl { display: flex; align-items: center; gap: 10px; padding: 7px 0; cursor: pointer; }
.fl input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ink); }
.rail__go { margin-top: 12px; }
@media (max-width: 760px) {
  .rail__f { margin-top: 18px; }
  .rail__fl { display: flex; flex-wrap: wrap; gap: 0 18px; }
}

/* Отбор прячет часть позиций — надпись объясняет, почему их стало меньше. */
.head__f { margin: 10px 0 0; font-size: 13px; color: var(--steel-500); }
.head__f b { font-weight: 700; color: var(--steel-900); }
.head__f a { margin-left: 8px; text-decoration: none; border-bottom: 1px solid var(--steel-300); }
.head__f a:hover { color: var(--signal-deep); border-color: var(--signal); }

/* ---------- комплекты ---------- */

/* Шапка раздела: слева заголовок и факты, справа заявка — на первом экране и на телефоне. */
.kh { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: end;
      border-bottom: 2px solid var(--steel-900); padding-bottom: 16px; margin-bottom: 22px; }
.kh__eye { margin: 0 0 8px; }
.kh__lead { margin: 10px 0 0; max-width: 66ch; font-size: 15px; color: var(--steel-700); }
.kh__lead p { margin: 0 0 6px; }
.kh__facts { margin: 8px 0 0; font: 400 12.5px/1.5 var(--mono); color: var(--steel-500); }
.kh__cta { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.kh__cta span { font-size: 12px; color: var(--steel-400); }
.kh__cta .lnk { font-size: 13px; }
.ktile__pod { grid-column: 1 / -1; justify-self: start; margin-top: 4px; padding: 2px 7px; font-size: 11.5px;
              color: var(--signal-deep); background: var(--bg-1); border-left: 3px solid var(--signal); }

.ktog { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.ktog__i { font-size: 13px; padding: 6px 12px; border: 1px solid var(--steel-300); background: var(--paper);
           color: var(--steel-700); text-decoration: none; }
.ktog__i--on { background: var(--steel-900); border-color: var(--steel-900); color: #fff; }
.ktog__one { margin: 0 0 10px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
             color: var(--steel-500); }

/* Схема корпуса — сборочный чертёж на миллиметровке, с номерами позиций. */
.ksch { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(250px, 1fr); gap: 28px; align-items: start; }
.ksch__fig {
  margin: 0; border: 1px solid var(--steel-200);
  background: linear-gradient(var(--steel-050) 1px, transparent 1px) 0 0 / 24px 24px,
              linear-gradient(90deg, var(--steel-050) 1px, transparent 1px) 0 0 / 24px 24px, var(--paper);
}
.ksch__fig svg { display: block; width: 100%; height: auto; }
.ksch .dw { fill: none; stroke: var(--steel-700); stroke-width: 1.4; stroke-linejoin: round; }
.ksch .thin { stroke-width: .8; stroke: var(--steel-400); }
.ksch .dash { stroke-dasharray: 2 3; stroke: var(--steel-500); }
.ksch .fill { fill: var(--steel-500); stroke: none; }
.ksch .cage { fill: var(--steel-050); }
.ksch .fill-a { fill: var(--bg-2); stroke: var(--signal); }
.ksch g.z.is-hot { stroke: var(--signal-deep); stroke-width: 2.2; }
.ksch g.z.is-hot .thin, .ksch g.z.is-hot .dash { stroke: var(--signal-deep); }
.ksch g.z.is-hot .fill { fill: var(--green); }   /* метки 8 × 5 — точки, а не плоскость */
.ksch g.z.is-hot .cage { fill: var(--green-wash); }
.zn { cursor: pointer; }
.zn__l { stroke: var(--steel-400); stroke-width: 1; }
.zn__c { stroke-width: 1.5; }
.zn__t { font: 500 18px/1 var(--mono); text-anchor: middle; }
.zn--on .zn__c { fill: var(--bg-2); stroke: var(--signal); }
.zn--on .zn__t { fill: var(--steel-900); }
.zn--off .zn__c { fill: var(--paper); stroke: var(--steel-400); }
.zn--off .zn__t { fill: var(--steel-500); }
.zn:hover .zn__c { stroke: var(--steel-900); stroke-width: 2.5; }
.zn:focus { outline: none; }
.zn:focus-visible .zn__c { stroke: var(--steel-900); stroke-width: 3.5; }

.zl { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--steel-900); }
.zl li { border-bottom: 1px solid var(--steel-200); }
.zl__a { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center;
         padding: 9px 4px; text-decoration: none; color: var(--steel-500); font-size: 14px; }
.zl__a:hover { background: var(--bg-1); color: var(--steel-900); }
.zl__n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
         font: 500 12px/1 var(--mono); border: 1.5px solid var(--steel-400); color: var(--steel-500); background: var(--paper); }
.zl__a--on { color: var(--steel-900); font-weight: 500; }
.zl__a--on .zl__n { background: var(--bg-2); border-color: var(--signal); color: var(--steel-900); }
.zl__s { font: 400 12px/1 var(--mono); color: var(--steel-400); white-space: nowrap; }
.zl__a--on .zl__s { color: var(--signal-deep); }
.zl__note { margin: 10px 0 0; font-size: 12.5px; color: var(--steel-500); line-height: 1.5; }

/* плитки типов систем направления */
.ktiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ktile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px;
         background: var(--paper); border: 1px solid var(--steel-200); border-left: 3px solid var(--signal);
         text-decoration: none; color: inherit; }
.ktile:hover { border-color: var(--steel-500); border-left-color: var(--signal); }
.ktile b { font-weight: 700; font-size: 15px; }
.ktile__n { font: 400 12px/1.6 var(--mono); color: var(--steel-400); }
.ktile__s { grid-column: 1 / -1; font-size: 13px; color: var(--steel-500); }

/* системы ячейки строками: цифры выровнены — так их сравнивают глазами */
.krows { display: grid; gap: 12px; }
.krow { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(0, 300px); gap: 20px; align-items: center;
        background: var(--paper); border: 1px solid var(--steel-200); padding: 12px; }
.krow:hover { border-color: var(--steel-400); }
.krow__fig { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--steel-050); }
.krow__fig img { width: 100%; height: 100%; object-fit: cover; }
.krow__none { display: grid; place-items: center; height: 100%; font: 500 11px/1 var(--sans); letter-spacing: .1em;
              text-transform: uppercase; color: var(--steel-400);
              background: repeating-linear-gradient(135deg, var(--steel-050) 0 7px, var(--steel-100) 7px 8px); }
.kbrand { margin: 0 0 6px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--steel-400); }
.kbrand a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--steel-300); }
.kbrand a:hover { color: var(--steel-900); }
.krow__n { margin: 0; font: 700 17px/1.3 var(--sans); letter-spacing: -.01em; }
.krow__n a { color: inherit; text-decoration: none; }
.krow__n a:hover { color: var(--signal-deep); }
.krow__d { margin: 6px 0 0; font-size: 14px; color: var(--steel-500); }

/* ключевые цифры: значение крупно, подпись под ним */
.kkf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; border: 1px solid var(--steel-300); background: var(--paper); }
.kkf div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; padding: 10px 14px; border-left: 1px solid var(--steel-200); }
.kkf div:first-child { border-left: 0; }
.kkf dd { margin: 0; font: 500 22px/1.1 var(--mono); letter-spacing: -.02em; color: var(--steel-900); }
.kkf dt { font-size: 12px; color: var(--steel-500); }
.kkf--row { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 0; border-left: 1px solid var(--steel-200); }
.kkf--row div { border-left: 0; padding: 6px 12px; }
.kkf--row dd { font-size: 16px; }

.kcmp-w { overflow-x: auto; }
.kcmp { border-collapse: collapse; width: 100%; font-size: 14px; }
.kcmp th, .kcmp td { text-align: left; vertical-align: top; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--steel-200); }
.kcmp thead th { border-bottom: 2px solid var(--steel-900); font-weight: 700; }
.kcmp thead a { color: inherit; text-decoration: none; }
.kcmp thead a:hover { color: var(--signal-deep); }
.kcmp tbody th { width: 26%; font-weight: 400; color: var(--steel-500); }
.kcmp td { font: 400 13.5px/1.45 var(--mono); }

.kchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 28px 0 0; font-size: 13px; color: var(--steel-500); }
.kchip { border: 1px solid var(--steel-300); background: var(--paper); padding: 5px 10px; color: var(--steel-700); text-decoration: none; }
.kchip:hover { border-color: var(--steel-500); color: var(--steel-900); }
.kchip span { margin-left: 4px; font-family: var(--mono); color: var(--steel-400); }

/* карточка системы */
.ksys { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; padding-top: 6px; }
.ksys__main { min-width: 0; }
.ksys__lead { margin: 10px 0 0; max-width: 62ch; font-size: 16px; color: var(--steel-700); }
.ksys__t { margin: 38px 0 12px; }
.ksys__t .head__n { margin-left: 8px; vertical-align: middle; }
.ksys__body { margin-top: 0; padding-top: 0; border-top: 0; }
.ksys__note { margin: -4px 0 12px; font-size: 13px; color: var(--steel-500); }
.kgal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.kgal__i { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper); border: 1px solid var(--steel-200); }
.kgal__i img { width: 100%; height: 100%; object-fit: cover; }
.kgal__i--main { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.kgal__none { grid-column: 1 / -1; aspect-ratio: 16 / 7; display: grid; place-items: center;
              font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--steel-400);
              background: repeating-linear-gradient(135deg, var(--steel-050) 0 7px, var(--steel-100) 7px 8px); }
.kben { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.kben li { position: relative; padding: 12px 0 12px 17px; border-top: 1px solid var(--steel-200); }
.kben li::before { content: ""; position: absolute; left: 0; top: 19px; width: 7px; height: 7px; background: var(--signal); }
.kben b { display: block; font-size: 15px; font-weight: 700; }
.kben span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--steel-500); }
.ksos th { color: var(--steel-900); font-weight: 500; }
.ksos td { font-weight: 400; }
.ksos a { text-decoration: none; border-bottom: 1px solid var(--steel-300); }
.ksos a:hover { color: var(--signal-deep); border-color: var(--signal); }
.ksos__in { font-size: 13px; color: var(--steel-400); }
.kdraw { margin: 4px 0 0; padding: 16px; background: var(--paper); border: 1px solid var(--steel-200); }
.kdraw img { width: 100%; height: auto; }
.kdraw figcaption { margin-top: 8px; font-size: 12px; color: var(--steel-400); }
.docs__s { margin-left: auto; font: 400 12px/1 var(--mono); color: var(--steel-400); }
.kobj { list-style: none; margin: 0; padding: 0; }
.kobj li { padding: 10px 0; border-top: 1px solid var(--steel-200); font-size: 14px; }

.ksys__side { position: sticky; top: calc(var(--hd-h) + 16px); }
.kpanel { background: var(--paper); border: 1px solid var(--steel-300); border-top: 3px solid var(--signal); padding: 20px; }
.kpanel__t { display: block; font: 700 16px/1.3 var(--sans); }
.kpanel p { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--steel-500); }
.kpanel .ask { display: flex; }   /* во всю ширину панели; .ask теперь inline-flex, block сбил бы середину по высоте */
.kpanel .kpanel__tel { margin: 16px 0 0; }
.kpanel__tel a { display: block; font: 700 15px/1 var(--sans); color: var(--steel-900); text-decoration: none; }
.kpanel__tel span { display: block; margin-top: 4px; font-size: 12px; color: var(--steel-400); }
.kpanel .kpanel__svc { margin: 14px 0 12px; padding-top: 12px; border-top: 1px solid var(--steel-200); font-size: 12.5px; }
.kpanel__oth { margin-top: 16px; font-size: 13px; }
.kpanel__oth span { display: block; margin-bottom: 4px; color: var(--steel-400); }
.kpanel__oth a { display: block; padding: 7px 0; border-bottom: 1px solid var(--steel-200); text-decoration: none; }
.kpanel__oth a:hover { color: var(--signal-deep); }

/* форма расчёта. .kform__ctx и .kform__err держит и форма запроса в раскладке B2 (.reqf: главная
   и /zapros/) — при переносе комплектов в css/kits.css (Т4.4) форма .kform* остаётся здесь */
.kform { margin-top: 44px; padding: 22px 24px 24px; background: var(--paper); border: 1px solid var(--steel-200);
         border-top: 3px solid var(--steel-900); scroll-margin-top: calc(var(--hd-h) + 14px); }
.kform__h p { margin: 6px 0 0; font-size: 14px; color: var(--steel-500); }
.kform__ctx { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0 0; font-size: 13px; color: var(--steel-500); }
.kform__ctx[hidden] { display: none; }
.kform__ctx b { font-weight: 500; color: var(--steel-900); background: var(--bg-1); border-left: 3px solid var(--signal); padding: 3px 8px; }
.kform__x { border: 0; background: none; cursor: pointer; padding: 2px 6px; font-size: 18px; line-height: 1; color: var(--steel-400); }
.kform__x:hover { color: var(--steel-900); }
.kform__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; margin-top: 16px; }
/* подпись поля — вид .field__l; поле — .form__i (вид .inp); галочки — .kform__c (вид .chk, выше) */
.kform__f > span { display: block; margin-bottom: 6px; color: var(--ink); font-size: 14px; font-weight: 700; }
.kform__f i { font-style: normal; color: inherit; }
.kform__f--wide { grid-column: 1 / -1; }
.kform__err { display: block; margin-top: 5px; font-size: 13px; color: var(--err); }
.kform [aria-invalid="true"] { border-color: var(--err); }
.kform__c { margin: 16px 0 0; }
.kform__go { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 18px; }
.kform__go span { font-size: 12.5px; color: var(--steel-400); }

/* «Как мы работаем» — порядок настоящий, номера по делу */
.ksteps { list-style: none; counter-reset: st; margin: 0; padding: 0; display: grid;
          grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--steel-200); }
.ksteps li { counter-increment: st; padding: 16px 18px 0 0; }
.ksteps li::before { content: counter(st); display: block; margin-bottom: 8px; font: 500 13px/1 var(--mono); color: var(--signal-deep); }
.ksteps b { display: block; font-size: 15px; font-weight: 700; }
.ksteps span { display: block; margin-top: 3px; font-size: 13px; color: var(--steel-500); }

.kbar { display: none; }

@media (max-width: 1000px) {
  .ksys { grid-template-columns: 1fr; gap: 28px; }
  .ksys__side { position: static; }
  .ksch { grid-template-columns: 1fr; }
  .krow { grid-template-columns: 160px minmax(0, 1fr); }
  .krow .kkf--row { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr));
                    border-left: 0; border-top: 1px solid var(--steel-200); padding-top: 6px; }
}
@media (max-width: 760px) {
  .kh { grid-template-columns: 1fr; align-items: start; gap: 14px; }
  .kh__cta { align-items: flex-start; }
  .kkf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kkf div:nth-child(3) { border-left: 0; }
  .kkf div:nth-child(n+3) { border-top: 1px solid var(--steel-200); }
  .kben { grid-template-columns: 1fr; }
  .kform__grid { grid-template-columns: 1fr; }
  .ksteps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kgal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ksys h1 { font-size: 24px; }
  /* на телефоне кнопка расчёта всегда под рукой */
  .kbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px 16px;
          background: var(--paper); border-top: 1px solid var(--steel-300); }
  .kbar .ask { display: flex; padding: 13px 16px; }
  body:has(.kbar) { padding-bottom: 66px; }
}
@media (max-width: 520px) {
  .krow { grid-template-columns: 1fr; }
  .krow__fig { aspect-ratio: 16 / 9; }
  .krow .kkf--row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kform { padding: 18px 16px 20px; }
}

/* ---------- подбор под корпус ---------- */

/* Слева шаги, справа живой чертёж, который прилипает при прокрутке.
   На узком экране чертёж встаёт между вторым и третьим шагом. */
.kpod { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 0 28px;
        grid-template-areas: "a d" "b d"; align-items: start; }
.kpod__a { grid-area: a; }
.kpod__b { grid-area: b; }
.kpod__d { grid-area: d; position: sticky; top: calc(var(--hd-h) + 16px); }

.kst { background: var(--paper); border: 1px solid var(--steel-200); padding: 16px 18px 18px; margin-bottom: 14px; }
.kst__t { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; font: 700 17px/1.25 var(--sans); }
.kst__t span { font: 500 13px/1 var(--mono); color: var(--signal-deep); }
.kst__hint { margin: 8px 0 0; font-size: 12.5px; color: var(--steel-500); }

/* выбор карточками с пиктограммой: сама радиокнопка скрыта, выбор — рамкой */
.kopts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kopt { position: relative; display: flex; gap: 10px; align-items: center; padding: 9px 10px; cursor: pointer;
        border: 1px solid var(--steel-300); background: var(--paper); font-size: 14px; }
.kopt input { position: absolute; opacity: 0; pointer-events: none; }
.kopt small { display: block; margin-top: 2px; font-size: 12px; color: var(--steel-500); }
.kopt small.mono { font-family: var(--mono); }
.kopt:hover { border-color: var(--steel-500); }
.kopt:has(input:checked) { border: 2px solid var(--steel-900); padding: 8px 9px; background: var(--bg-1); }
.kopt:has(input:focus-visible) { outline: 2px solid var(--signal); outline-offset: 2px; }
.kopts--sm .kopt { padding: 6px 9px; font-size: 13px; }
.kopts--sm .kopt:has(input:checked) { padding: 5px 8px; }
.kpic { flex: none; width: 48px; height: 32px; fill: none; stroke: var(--steel-700); stroke-width: 1.4; stroke-linejoin: round; }
.kopt:not(:has(input:checked)) .kpic { stroke: var(--steel-400); }
.kpic .pb { fill: var(--steel-050); }
.kpic .pa { fill: var(--bg-2); stroke: var(--signal); }
.kpic .pd { stroke-dasharray: 3 2; }

.kflds { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px 12px; margin-top: 12px; }
.kfld > span:first-child { display: block; margin-bottom: 5px; font-size: 13px; color: var(--steel-500); }
.kstep { display: flex; align-items: stretch; border: 1px solid var(--steel-300); background: var(--paper); }
.kstep:focus-within { border-color: var(--signal); }
.kstep button { flex: none; width: 32px; border: 0; background: var(--steel-050); cursor: pointer; font-size: 16px; color: var(--steel-700); }
.kstep button:hover { background: var(--steel-100); color: var(--steel-900); }
.kstep input { min-width: 0; width: 100%; border: 0; padding: 8px 6px; text-align: center; font: 500 15px/1.2 var(--mono);
               -moz-appearance: textfield; appearance: textfield; }
.kstep input::-webkit-inner-spin-button, .kstep input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kstep input:focus { outline: none; }
.kstep i { flex: none; align-self: center; padding: 0 8px 0 2px; font-style: normal; font-size: 12px; color: var(--steel-400); }
.kroof { display: grid; grid-template-columns: minmax(0, 1fr) minmax(140px, .8fr); gap: 12px; align-items: end; margin-top: 12px; }

/* стены корпуса на мини-плане: жёлтая свободна, серая штриховка — пристройка */
.kwalls { margin: 14px 0 0; padding: 0; border: 0; }
.kwalls legend { padding: 0; font-size: 13px; color: var(--steel-500); }
.kwalls p { margin: 2px 0 8px; font-size: 12px; color: var(--steel-400); }
.kwalls__plan { display: grid; grid-template-columns: 34px minmax(0, 1fr) 34px; grid-template-rows: 30px 56px 30px;
                grid-template-areas: ". n ." "w c e" ". s ."; max-width: 380px; }
.kwalls__in { grid-area: c; display: grid; place-items: center; background: var(--steel-050); font-size: 11px; color: var(--steel-400); }
.kwall { border: 0; cursor: pointer; font-size: 11.5px; color: var(--steel-900); background: var(--bg-1); position: relative; }
.kwall--n { grid-area: n; border-bottom: 5px solid var(--signal); }
.kwall--s { grid-area: s; border-top: 5px solid var(--signal); }
.kwall--w { grid-area: w; border-right: 5px solid var(--signal); }
.kwall--e { grid-area: e; border-left: 5px solid var(--signal); }
.kwall--w span, .kwall--e span { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; }
.kwall[aria-pressed="false"] { background: repeating-linear-gradient(135deg, var(--steel-100) 0 5px, var(--steel-200) 5px 6px);
                               color: var(--steel-500); border-color: var(--steel-400); }
.kwall:focus-visible { outline: 2px solid var(--signal-deep); outline-offset: -2px; }

/* ярусы: зачёркнутые не встанут по высоте, но выбрать их можно — покажем почему */
.kseg { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.kseg label { position: relative; cursor: pointer; }
.kseg input { position: absolute; opacity: 0; pointer-events: none; }
.kseg span { display: block; min-width: 38px; padding: 7px 10px; text-align: center; border: 1px solid var(--steel-300);
             background: var(--paper); font: 500 14px/1 var(--mono); }
.kseg label:first-child span { font: 400 13px/1 var(--sans); }
.kseg input:checked + span { background: var(--steel-900); border-color: var(--steel-900); color: #fff; }
.kseg input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 2px; }
.kseg .is-no span { color: var(--steel-300); text-decoration: line-through; }
.kseg .is-no input:checked + span { background: #b3261e; border-color: #b3261e; color: #fff; }

/* живой чертёж */
.kpod__kf { margin: 0 0 8px; }
.kpod__line { margin: 0; font: 400 12.5px/1.5 var(--mono); color: var(--steel-500); }
.kpod__warn { margin: 6px 0 0; font-size: 13px; color: var(--err); }
.kpod__warn:empty { display: none; }
.kpod__cap { margin: 14px 0 6px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--steel-500); }
.kpod__fig { border: 1px solid var(--steel-200);
  background: linear-gradient(var(--steel-050) 1px, transparent 1px) 0 0 / 20px 20px,
              linear-gradient(90deg, var(--steel-050) 1px, transparent 1px) 0 0 / 20px 20px, var(--paper); }
.kpod__fig svg { display: block; width: 100%; height: auto; }
.kpod__fig .pw { fill: none; stroke: var(--steel-700); stroke-width: 1.5; }
.kpod__fig .pv { fill: none; stroke: var(--signal); stroke-width: 4; }
.kpod__fig .pt { fill: none; stroke: var(--steel-400); stroke-width: .8; }
.kpod__fig .pb { fill: var(--steel-050); stroke: var(--steel-900); stroke-width: 1; }
.kpod__fig .pa { fill: var(--bg-2); stroke: var(--signal); stroke-width: .8; }
.kpod__fig .pa2 { stroke: var(--signal-deep); stroke-width: 2; }
.kpod__fig .px { fill: var(--steel-200); stroke: var(--steel-400); stroke-width: .8; }
.kpod__fig .pr { stroke: #b3261e; stroke-width: 1.2; stroke-dasharray: 4 3; }
.kpod__fig .pr-t { fill: #b3261e; font: 400 11px/1 var(--mono); }
.kpod__fig .pd { fill: var(--steel-500); font: 400 11px/1 var(--mono); }
.kpod__fig .pd2 { fill: var(--steel-900); font: 500 12px/1 var(--mono); }
.kpod__note { margin: 10px 0 0; font-size: 12.5px; color: var(--steel-500); line-height: 1.5; }
.kpod__fig .ph { fill: var(--bg-2); stroke: var(--signal); stroke-width: .8; }
.kpod__fig .pr2 { fill: #f6d4d1; stroke: #b3261e; stroke-width: 1; }
.kpod__fig .pl-f { stroke: var(--signal); stroke-width: 2.5; }
.kpod__fig .pl-d { stroke: var(--steel-500); stroke-width: 1; stroke-dasharray: 3 2; }
.kopt.is-off { opacity: .45; cursor: not-allowed; }

/* вход в подбор с карточки и из ячейки */
.kpodcta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: -4px 0 18px; }
.kpodcta span { font-size: 13px; color: var(--steel-500); }
.kpodcta .ask, .kpanel__pod { padding: 11px 18px; font-size: 14px; }
.kpanel .kpanel__pod { margin-top: 8px; }
.krow__pod { margin: 8px 0 0; font-size: 13px; }
.krow__pod a { text-decoration: none; border-bottom: 1px solid var(--signal); }
.krow__pod a:hover { color: var(--signal-deep); }

.kbar--pod { align-items: center; gap: 12px; }
.kbar--pod span { flex: 1; font: 500 13px/1.3 var(--mono); }

@media (max-width: 1000px) {
  .kpod { grid-template-columns: 1fr; grid-template-areas: "a" "d" "b"; }
  .kpod__d { position: static; margin-bottom: 14px; }
}
@media (max-width: 760px) {
  .kbar--pod { display: flex; }
  .kbar--pod .ask { flex: none; padding: 12px 16px; }
  .kroof { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .kopts { grid-template-columns: 1fr; }
  .kopts--sm { grid-template-columns: 1fr 1fr; }
  .kst { padding: 14px 14px 16px; }
}

/* ---------- контакты и карта ---------- */

.cnt { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 36px; align-items: start; }
.cnt__t {
  font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-500); margin: 22px 0 8px;
}
.cnt__col > .cnt__t:first-child { margin-top: 0; }
.cnt__v { margin: 0; font-size: 15px; line-height: 1.55; }
.cnt__v a { text-decoration: none; border-bottom: 1px solid var(--steel-300); }
.cnt__v a:hover { color: var(--signal-deep); border-color: var(--signal); }
.cnt__cta { margin: 28px 0 0; }

.cnt__map { border: 1px solid var(--steel-200); background: var(--paper); padding: 1px; }
.cnt__map iframe { display: block; width: 100%; height: 430px; border: 0; }
.cnt__img { display: block; width: 100%; height: auto; }
.cnt__go { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 12px 14px; border-top: 1px solid var(--steel-200); }
.cnt__mn { margin: 0; padding: 10px 14px; font-size: 12px; color: var(--steel-400); border-top: 1px solid var(--steel-200); }

@media (max-width: 900px) {
  .cnt { grid-template-columns: 1fr; gap: 26px; }
  .cnt__map iframe { height: 320px; }
}

/* ---------- шапка на узком экране — b2/style.css 672–680, 682–704, 739–747, 940–944 ---------- */

/* узкий компьютер: «Сравнение» и «Вход» — значками */
@media (max-width: 1279px) {
  .hdr__in { column-gap: 20px; }
  .hdr__logo img { height: 36px; }
  .hdr__nav { gap: 16px; }
  .hdr__tools { gap: 16px; }
  .tool--cmp svg, .tool--login svg { display: block; }
  .tool--cmp .tool__t, .tool--login .tool__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* сверх макета: с «Комплектами» в меню шесть пунктов — без ужатия строка компьютера уходит во второй
   ряд (на 1101 не хватало ~30 px со счётчиком заявки, от 1280 — ~50 px: там «Сравнение» и «Вход»
   словами). Ужимаем зазоры и основу поиска — перенос строки считается по flex-basis, а не по
   min-width. Только от 1101: ниже поиск — отдельным рядом во всю ширину (flex-basis 100%).
   Зазоры от 1280 — такие, чтобы подсказка «Артикул или название» в поле не обрезалась */
@media (min-width: 1101px) {
  .hdr--kits .hdr__in { column-gap: 16px; }
  .hdr--kits .hdr__nav, .hdr--kits .hdr__tools { gap: 14px; }
  .hdr--kits .hsearch { flex-basis: 150px; min-width: 150px; }
}
@media (min-width: 1101px) and (max-width: 1279px) {
  .hdr--kits .hdr__in { column-gap: 14px; }
  .hdr--kits .hdr__nav, .hdr--kits .hdr__tools { gap: 12px; }
}

/* планшет: серой строки нет, меню — списком по кнопке, поиск — вторым рядом */
@media (max-width: 1100px) {
  .top { display: none; }
  .hdr__nav, .tool--cmp, .tool--login { display: none; }
  .hdr__in { min-height: 68px; column-gap: 12px; }
  /* высота первого ряда задана явно: строка поиска уходит вторым рядом и его не сжимает */
  .hdr__logo, .hdr__tools { display: flex; align-items: center; height: 68px; }
  .hdr__btn { display: inline-flex; }
  .hdr__tools { gap: 12px; }
  .tool--req { order: 2; margin-right: 8px; }
  .hdr__srch { order: 1; }
  .hdr__menu { order: 3; }
  .hsearch { display: none; order: 9; flex: 1 0 100%; height: 48px; margin-bottom: 14px; }
  .hdr.is-search .hsearch { display: flex; }
  .hsearch__inp { font-size: 17px; }
  .hsearch__inp::placeholder { font-size: 17px; }
  .hsearch__btn { width: 56px; }
  .hsearch .clr { right: 62px; }
  .mnav { position: absolute; top: 100%; left: 0; right: 0; padding: 8px var(--gut) 24px; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px -24px rgba(31, 31, 31, .3); }
  .menu-open .mnav { display: block; }
  .mnav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 700; text-decoration: none; }
  .mnav a:hover { color: var(--green-ink); }
  .mnav .mnav__ph { border-bottom: 0; font-family: var(--f-mono); font-weight: 500; }
  /* без скрипта «Меню» и «Поиск» — якоря: панель открывает :target (со скриптом — классы выше) */
  html:not(.js) .mnav:target { display: block; }
  html:not(.js) .hsearch:target { display: flex; }
  html:not(.js) .hdr__bar:has(.mnav:target) .hdr__menu,
  html:not(.js) .hdr__bar:has(.hsearch:target) .hdr__srch { background: var(--bg-1); border-color: var(--field); }
}

/* телефон */
@media (max-width: 760px) {
  .hdr__in { min-height: 60px; column-gap: 8px; }
  .hdr__logo, .hdr__tools { height: 60px; }
  .hdr__logo img { height: 29px; }
  .hdr__tools { gap: 8px; }
  .tool--req { margin-right: 2px; }
  .hdr__btn { padding: 0 10px; }
  .hdr__srch { width: 40px; padding: 0; justify-content: center; }
  .hdr__srch .tool__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .hsearch { height: 48px; margin-bottom: 12px; }
}

/* самый узкий телефон: шапка в один ряд и на 360 */
@media (max-width: 380px) {
  .hdr__logo img { height: 26px; }
  .hdr__tools { gap: 6px; }
  .tool--req { margin-right: 0; }
  .hdr__btn { padding: 0 8px; }
  .hdr__srch { padding: 0; }
}

/* End */
/* /bitrix/templates/agromax/template_styles.css?179153851798078 */