/* ============================================================================
   Плита — дизайн-система dipchel.ru
   Собрана из handoff Dipchel-Plate-Mounting-Handoff/plate-system.css
   и адаптирована под реальную вёрстку Mediapoint: убраны селекторы прототипа
   по inline-стилям, добавлены компоненты витрины, карточки, корзины и форм.
   Единственный источник токенов. Второй копии быть не должно.
   ============================================================================ */

/* ── шрифты ───────────────────────────────────────────────────────────────── */
@font-face{font-family:Oswald;font-style:normal;font-weight:500 700;font-display:swap;src:url(/f/fonts/plate/oswald-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Oswald;font-style:normal;font-weight:500 700;font-display:swap;src:url(/f/fonts/plate/oswald-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:Oswald;font-style:normal;font-weight:500 700;font-display:swap;src:url(/f/fonts/plate/oswald-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}
/* Подменное начертание с подогнанными метриками. Пока Plex едет, текст
   рисуется системным шрифтом; если ширина строки расходится, абзац меняет
   число строк и вся страница прыгает.
   Замер в браузере на контрольном абзаце (16px): Plex 1262,17 px,
   Liberation Sans 1234,17 px, Nimbus Sans 1234,69 px, DejaVu Sans 1405,16 px.
   Подмена разрешается в Liberation Sans (метрики Arial), а не в DejaVu —
   прежнее объяснение сдвига через DejaVu не подтвердилось.
   При 100,6 % подмена давала 98,26 % ширины Plex: на длинном абзаце это
   лишняя строка и прыжок на 25 px. 102,05 % дают 99,7 % — чуть уже
   оригинала, поэтому строка не переносится лишний раз. */
@font-face{font-family:'Plex Fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'),local('Nimbus Sans');
  size-adjust:102.05%;font-display:swap}
/* Oswald — узкое начертание: та же строка занимает 83,7 % ширины системного
   шрифта. Пока он едет, заголовок раздела ломался на две строки и после
   загрузки схлопывался в одну — блок товаров прыгал на 26 px вверх. */
/* Тот же замер для Oswald: при 83,7 % подмена давала 96,33 % ширины —
   заголовок ломался на лишнюю строку и схлопывался после загрузки. */
@font-face{font-family:'Oswald Fallback';src:local('Arial Narrow'),local('Arial'),local('Liberation Sans'),local('Nimbus Sans');
  size-adjust:86.60%;font-display:swap}

/* IBM Plex Sans — ВАРИАТИВНЫЙ шрифт: один файл на поднабор честно даёт все
   веса от 400 до 600 (проверено отрисовкой: 400/500/600 различаются).
   Раньше тот же файл был объявлен трижды под разными именами, и страница
   скачивала девять файлов вместо трёх — около 152 КБ впустую.
   Ось веса обрывается на 600, поэтому запрос 700 молча клампится в 600;
   диапазон объявлен честно, а <strong> ниже переведён на 600. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/f/fonts/plate/plexsans-400-cyrillic.woff2) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/f/fonts/plate/plexsans-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:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url(/f/fonts/plate/plexsans-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}

/* Мера строки задана в em, а не в ch: ch — это ширина нуля текущего шрифта
   (Arial 0,556em против Plex 0,6em), поэтому при подмене шрифта колонка
   меняла ширину и абзац прыгал на строку. 1ch Plex = 0,6em. */
/* ── токены ───────────────────────────────────────────────────────────────── */
:root{
  --gr:#0E1113; --gr2:#14181A; --gr3:#22272A;
  --y:#FFE016; --y2:#F0D200; --y3:#E3C700;
  --w:#FFFFFF; --ink:#0E1113;
  --mut:#6B7075; --mut2:#9AA0A8;
  --ln:#DDE0E3; --bg:#F2F3F4;
  --ok:#1F7A3D; --wr:#B4462A;
  --os:Oswald,'Oswald Fallback',Helvetica,Arial,'Liberation Sans','Roboto',sans-serif;
  --tx:'IBM Plex Sans','Plex Fallback',Helvetica,Arial,'Liberation Sans','Roboto',sans-serif;
  /* горизонтальные поля страницы: 16px на телефоне … 48px на 2K */
  --pad:clamp(16px,2.4vw,48px);
  /* читаемая длина строки: в em, потому что ch зависит от шрифта */
  --measure:48em;
  /* предельная ширина содержательной колонки на очень широком экране */
  --maxw:1760px;
}

/* ── база ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--w);color:var(--ink);font-family:var(--tx);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
svg{display:block}
a{color:inherit;text-decoration:none}
/* Наведение красит ссылку в цвет чернил. На тёмном блоке это цвет самого
   фона — ссылка исчезает под курсором. Владелец поймал это на «Личный сайт —
   arslan864.ru» в тёмной карточке сотрудника. Цвет наведения вынесен в
   переменную: тёмные блоки задают её один раз, и все ссылки внутри —
   нынешние и будущие — наследуют её сами. */
a:hover{color:var(--link-hover,var(--ink))}
.sec--dark,.ftr,.prof,.plate,.tile,.mega__cta,.hero__plate,.scen__d,.pmode,
.calcask,.solvis,.hmenu,.cc,.dirhero,.calcbox__vis--dark{--link-hover:var(--y)}
button{font:inherit;color:inherit}
/* Полужирный в тексте — 600: ось веса Plex заканчивается на 600, и запрос 700
   либо клампится (Chrome), либо даёт поддельное утолщение (часть браузеров). */
strong,b{font-weight:600}

/* Кольцо фокуса двойное. Одно жёлтое не годится: #FFE016 даёт 1,32:1 на белом
   и 1,18:1 на светло-сером поле при норме 3:1 — на большинстве поверхностей
   сайта оно неразличимо. Тёмная линия работает на светлом (18,95:1), жёлтый
   ореол вокруг неё — на тёмных блоках и на самой жёлтой кнопке (14,37:1). */
:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--y)}
hr{border:0;border-top:1px solid var(--ln);margin:28px 0}

/* ── сетка страницы ───────────────────────────────────────────────────────── */
.page{width:100%;background:var(--w)}
.wrap{padding:0 var(--pad)}
.sec{padding:clamp(34px,3.2vw,52px) var(--pad)}
.sec--tight{padding:clamp(24px,2.2vw,34px) var(--pad)}
.sec--dark{background:var(--gr);color:var(--w)}
.sec--grey{background:var(--bg)}
.sec--dark a:hover{color:var(--y)}

/* ── типографика ──────────────────────────────────────────────────────────── */
/* Рабочие страницы — каталог, карточка, корзина, тексты — это инструмент, а не
   рекламная страница. Заголовок в 62 px и отступы секции 72 px делали любой
   раздел похожим на посадочную страницу. Герой главной сохраняет свой размер
   (правило .hero__t h1 ниже). */
.h1{margin:0;font:700 clamp(26px,2.9vw,40px)/1.05 var(--os);letter-spacing:.005em;text-transform:uppercase}
.h2{margin:0;font:700 clamp(21px,2.1vw,31px)/1.08 var(--os);letter-spacing:.006em;text-transform:uppercase}
.h3{margin:0;font:600 clamp(18px,1.6vw,24px)/1.15 var(--os);letter-spacing:.008em;text-transform:uppercase}
/* Нижняя граница и коэффициент были те же, что у .h3, поэтому ниже 1024 px
   два уровня заголовков рисовались одинаково и иерархия пропадала. */
.h4{margin:0;font:600 clamp(15px,1.2vw,19px)/1.2 var(--os);letter-spacing:.01em;text-transform:uppercase}
.ttl{margin:0;font:600 19px/1.3 var(--tx);letter-spacing:-.01em}
.lead{margin:0;font:400 clamp(16px,1.4vw,19px)/1.55 var(--tx);color:var(--mut)}
.txt{margin:0;font:400 16px/1.6 var(--tx)}
.sm{margin:0;font:400 14px/1.5 var(--tx);color:var(--mut)}
.kick{font:600 13px/1 var(--os);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.sec--dark .lead,.sec--dark .sm{color:var(--mut2)}
.sec--dark .kick{color:var(--y)}
.y{color:var(--y)}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:28px;border-bottom:3px solid var(--ink);padding-bottom:16px}
.sec--dark .sechead{border-bottom-color:var(--y)}

/* редакционный текст из CMS */
.rich{font:400 16px/1.65 var(--tx)}
.rich > p,.rich > ul,.rich > ol,.rich > blockquote,.rich > h2,.rich > h3,.rich > h4{max-width:var(--measure)}
.rich > *:first-child{margin-top:0}
.rich > *:last-child{margin-bottom:0}
.rich h2{margin:36px 0 14px;font:700 clamp(24px,2.6vw,34px)/1.1 var(--os);letter-spacing:.006em;text-transform:uppercase}
.rich h3{margin:30px 0 12px;font:600 clamp(19px,2vw,24px)/1.15 var(--os);letter-spacing:.008em;text-transform:uppercase}
.rich h4{margin:24px 0 10px;font:600 18px/1.2 var(--os);letter-spacing:.01em;text-transform:uppercase}
.rich p{margin:0 0 16px}
.rich ul,.rich ol{margin:0 0 18px;padding-left:22px}
.rich li{margin:0 0 8px}
.rich ul{list-style:none;padding-left:0}
.rich ul > li{position:relative;padding-left:22px}
.rich ul > li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--y)}
.rich a{border-bottom:2px solid var(--y);padding-bottom:1px}
.rich a:hover{border-bottom-color:var(--ink)}
.rich img{max-width:100%;height:auto;margin:18px 0}
.rich table{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--tx);margin:0 0 20px}
.rich table th,.rich table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--ln);vertical-align:top}
.rich table th{font:600 13px/1.2 var(--os);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:var(--bg);border-bottom:2px solid var(--ink)}
.rich blockquote{margin:0 0 20px;padding:16px 20px;background:var(--bg);border-left:4px solid var(--y)}

/* ── кнопки ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;border:0;background:var(--y);color:var(--ink);font:600 16px/1 var(--os);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background-color .15s cubic-bezier(.2,0,.2,1),color .15s,box-shadow .15s;white-space:nowrap;text-align:center}
.btn:hover{background:var(--y2);color:var(--ink)}
.btn:active{background:var(--y3)}
.btn--dark{background:var(--gr);color:var(--w)}
.btn--dark:hover{background:#2B3136;color:var(--w)}
/* Цвет призрачной кнопки задаёт поверхность, а не перечень имён классов.
   Прежний список (.sec--dark, .ftr, .plate, .tile) не знал про .hero__plate,
   и на первом экране «Подобрать материал» была тёмной по тёмному:
   #0E1113 на #0E1113, отношение 1,00 — надпись не видно вовсе. Тёмные
   поверхности переопределяют три переменные, и вложенные блоки получают
   верный цвет сами, без нового правила на каждый случай. */
.btn--ghost{background:transparent;color:var(--gh-fg,var(--ink));
  box-shadow:inset 0 0 0 2px var(--gh-ln,var(--ink))}
.btn--ghost:hover{background:var(--gh-fg,var(--ink));color:var(--gh-hv,var(--w))}
/* ВНИМАНИЕ: это перечень ВСЕХ тёмных поверхностей сайта. Добавляя новый
   тёмный блок, добавьте его сюда же — иначе призрачная кнопка внутри
   получит тёмный текст по тёмному фону и станет невидимой. Так уже
   случалось трижды: на первом экране (.hero__plate), в панели согласия
   (.cc) и в блоке оговорки расчёта (.calcdisc--res). Проверка контраста
   в наборе доступности ловит это на живой странице. */
.sec--dark,.ftr,.plate,.tile,.hero__plate,.pmode,.scen__d,.mega__cta,.cc,.calcdisc--res,
.prof,.calcask,.solvis,.hmenu,.dirhero{
  --gh-fg:var(--w);--gh-ln:rgba(255,255,255,.5);--gh-hv:var(--ink);
  /* Приглушённый серый рассчитан на белый лист: на тёмном поле #6B7075 даёт
     3,79:1 при норме 4,5. На тёмных поверхностях переменная переопределяется
     светлым оттенком — и все подписи, нынешние и будущие, читаются сами. */
  --mut:#9AA0A8}
.plate--y,.scen__y{--gh-fg:var(--ink);--gh-ln:var(--ink);--gh-hv:var(--y)}
/* плашка «Цена по запросу» тёмная: без этого правила кнопка с телефоном
   рисовалась цветом var(--ink) на фоне var(--gr) — одним и тем же #0E1113 */

.btn--sm{height:42px;padding:0 18px;font-size:14px}
.btn--wide{width:100%}
.btn[disabled],.btn.is-off{opacity:.45;cursor:not-allowed;pointer-events:none}
.lnk{font:600 15px/1 var(--tx);border-bottom:2px solid var(--y);padding-bottom:3px;display:inline-block}
.lnk:hover{border-bottom-color:var(--ink)}
.sec--dark .lnk:hover{border-bottom-color:var(--w);color:var(--w)}

/* иконочная кнопка */
.ico{display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:0;background:transparent;cursor:pointer;position:relative;transition:background-color .15s;flex:none}
.ico:hover{background:#F0F1F2}
.ico--on{background:var(--y)}
.cnt{position:absolute;top:2px;right:0;min-width:20px;height:20px;padding:0 5px;background:var(--y);color:var(--ink);font:600 12px/20px var(--os);text-align:center}
.cnt[data-empty="1"]{display:none}

/* ── поля ─────────────────────────────────────────────────────────────────── */
.fld{display:flex;flex-direction:column;gap:7px}
.fld > span,.fld > label{font:500 14px/1.2 var(--tx);color:var(--mut)}
.fld .req{color:var(--wr)}
.inp{width:100%;height:50px;padding:0 14px;border:2px solid var(--ln);background:var(--w);font:400 16px/1 var(--tx);color:var(--ink);transition:border-color .15s;border-radius:0;-webkit-appearance:none;appearance:none}
.inp:hover{border-color:#BFC4C8}
.inp:focus{outline:0;border-color:var(--ink)}
.inp--err{border-color:var(--wr)}
textarea.inp{height:auto;min-height:120px;padding:12px 14px;line-height:1.5;resize:vertical}
select.inp{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230E1113' d='M6 8 0 2l2-2 4 4 4-4 2 2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px}
.chk{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font:400 15px/1.45 var(--tx)}
.chk input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--y);flex:none}
.rad{display:flex;align-items:center;gap:10px;min-height:50px;padding:0 18px;border:2px solid var(--ln);cursor:pointer;font:500 15px/1.3 var(--tx);transition:border-color .15s,background-color .15s}
.rad:hover{border-color:#BFC4C8}
.rad input{accent-color:var(--ink);width:18px;height:18px;flex:none}
.rad.is-on{border-color:var(--ink);background:#FAFAFA}
.formgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.formgrid .span2{grid-column:1/-1}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

/* ── чипы, наличие, цена ──────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:2px solid var(--ln);background:var(--w);font:500 15px/1 var(--tx);cursor:pointer;transition:border-color .15s,background-color .15s,color .15s;white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip.is-on{background:var(--ink);border-color:var(--ink);color:var(--w)}
.chip.is-on:hover{background:#2B3136;color:var(--w)}
.stk{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--tx);color:var(--ok)}
.stk::before{content:"";width:10px;height:10px;background:var(--ok);flex:none}
.stk--ask{color:var(--mut)}
.stk--ask::before{background:var(--mut)}
.prc{font:700 clamp(24px,2.4vw,30px)/1 var(--os);letter-spacing:.004em;white-space:nowrap}
.prc--lg{font-size:clamp(30px,3.6vw,44px)}
.prc--ask{font-size:20px;font-weight:600;color:var(--mut);text-transform:uppercase;letter-spacing:.02em}
.prc .unit{font:400 15px/1 var(--tx);color:var(--mut);text-transform:none;letter-spacing:0}
.vat{font:400 13px/1.4 var(--tx);color:var(--mut)}

/* ── карточка товара витрины ──────────────────────────────────────────────── */
.card{display:flex;flex-direction:column;height:100%;background:var(--w);border:1px solid var(--ln);
  transition:border-color .15s,box-shadow .15s;position:relative;min-width:0}
.card:hover{border-color:var(--ink)}
.card__ph{display:block;height:186px;background:#F6F7F7;overflow:hidden;flex:none}
.card__ph img{width:100%;height:100%;object-fit:contain}
/* Обёртка кадра каталога: <picture class="pic"> с webp-источником и
   запасным JPEG (mp_img_tag). Своей геометрии у неё быть не должно —
   размер кадра задаёт контейнер. По умолчанию picture строчный: под
   картинкой появлялась бы полоса строки высотой в межстрочный интервал. */
.pic{display:block;width:100%;height:100%}
/* В плитке кадр лежит фоном под текстом. Обёртка попадает под
   `.tile > *{position:relative;z-index:2}` и стала бы точкой отсчёта для
   `.tile img{position:absolute;inset:0}` — кадр схлопнулся бы в строку.
   Ставим на место кадра саму обёртку, картинка внутри растянется по ней. */
.tile .pic{position:absolute;inset:0;width:auto;height:auto;z-index:0}
.card__b{display:flex;flex-direction:column;gap:10px;padding:16px;flex:1 1 auto;min-width:0}
.card__meta{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;min-width:0}
.card__brand{font:600 12px/1 var(--os);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.card__code{font:400 12px/1 var(--tx);color:var(--mut2);letter-spacing:.03em}
/* Три строки, а не две. В техническом каталоге отличие позиций несёт код
   модели в конце названия, и обрезка на второй строке резала его посередине:
   «…NCC-H-25.35.06…» вместо «…060-3TR / (L)». */
.card__t{font:600 16px/1.3 var(--tx);letter-spacing:-.005em;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.card__t small{display:block;font:400 13px/1.3 var(--tx);color:var(--mut);margin-top:2px}
.card__t:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--y);
  text-underline-offset:3px;text-decoration-thickness:2px}
/* Характеристики. Обе колонки гибкие и обе имеют опору: колонка значения была
   auto, то есть по содержимому, и длинное значение («углеродная лента
   однонаправленная») сжимало подпись до нуля — «Тип материала» вытягивался
   в столбик по одной букве высотой 358 px. Теперь минимум подписи 88 px,
   соотношение 1 : 1.2, перенос только по словам. */
.card__sp{display:grid;grid-template-columns:minmax(76px,0.9fr) minmax(0,1.4fr);gap:7px 12px;
  font:400 12.5px/1.35 var(--tx);margin:0;align-items:baseline}
.card__sp dt{color:var(--mut);min-width:0;overflow-wrap:normal;word-break:normal;hyphens:none}
/* Значение переносится по словам; break-word оставлен страховкой на случай
   слова длиннее колонки — иначе оно вылезет за край плитки. */
.card__sp dd{margin:0;font-weight:600;text-align:right;min-width:0;overflow-wrap:break-word;hyphens:none}
/* На плитке витрины показываем три характеристики: плитка шириной 251 px,
   четвёртая строка делает её шумной и разной высоты. Полный список — в карточке. */
.card .card__sp > *:nth-child(n+7){display:none}
/* цена, наличие и действия прижаты к низу — карточки ряда кончаются на одной линии */
.card__bot{margin-top:auto;padding-top:12px;border-top:1px solid var(--ln);display:flex;
  flex-direction:column;gap:10px}
.card__pr{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-height:30px}
.card__pr .prc{font-size:clamp(20px,1.5vw,24px)}
.card__pr .prc .unit{font-size:13px}
.card__pr .prc--ask{font-size:16px}
.card__old{font:400 13px/1 var(--tx);color:var(--mut)}
.card__buy{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}
.card__unit{font:400 12px/1 var(--tx);color:var(--mut);white-space:nowrap}
.card__go{flex:1 1 96px}
/* сравнение — вспомогательное действие, не конкурирует с покупкой */
.card__cmp{position:absolute;top:8px;right:8px;z-index:2;margin:0}
.card__cmp button{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border:0;background:rgba(255,255,255,.86);color:var(--mut);cursor:pointer;transition:color .15s,background-color .15s}
.card__cmp button:hover{background:var(--w);color:var(--ink)}
.card__cmp button.is-on{background:var(--y);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
/* компактный счётчик количества */
.qty--sm{flex:none}
.qty--sm button{width:34px}
.qty--sm input{width:48px;height:38px;font-size:15px}

/* ── таблицы ──────────────────────────────────────────────────────────────── */
/* position:relative обязателен: без него абсолютно позиционированные потомки
   (скрытые подписи .vis-hid) не попадают под overflow обёртки и растягивают
   документ — на телефоне это давало горизонтальную прокрутку всей страницы */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;position:relative;max-width:100%;min-width:0}
.tbl{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--tx)}
.tbl th,.tbl td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--ln);vertical-align:top}
.tbl th{font:600 13px/1.2 var(--os);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);background:var(--bg);border-bottom:2px solid var(--ink);white-space:nowrap}
.tbl tbody tr:hover{background:#FAFAFA}
.tbl td.num,.tbl th.num{text-align:right;white-space:nowrap}
.spec{width:100%;border-collapse:collapse;font:400 16px/1.5 var(--tx)}
.spec th,.spec td{padding:13px 0;border-bottom:1px solid var(--ln);text-align:left}
.spec th{width:46%;font-weight:400;color:var(--mut)}
.spec td{font-weight:600}

/* ── плиты и плитки ───────────────────────────────────────────────────────── */
.plate{background:var(--gr);color:var(--w);padding:32px;display:flex;flex-direction:column;gap:14px}
.tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:180px;padding:22px;background:var(--gr2);color:var(--w);overflow:hidden;transition:color .15s}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.78;transition:opacity .25s cubic-bezier(.2,0,.2,1),transform .5s cubic-bezier(.2,0,.2,1)}
.tile:hover img{opacity:.55;transform:scale(1.05)}
/* Подпись плитки лежит на фотографии. У светлых снимков — фибра, препрег,
   рукав, композитный профиль — белый текст давал 2,97:1 при норме 4,5.
   Затемнение снизу даёт подписи опору независимо от того, какой снимок
   привезли в карточку, и не гасит саму фотографию. */
.tile img{z-index:0}
.tile::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64%;z-index:1;
  background:linear-gradient(to top,rgba(14,17,19,.94) 0,rgba(14,17,19,.8) 30%,rgba(14,17,19,.34) 68%,rgba(14,17,19,0) 100%);
  pointer-events:none}
.tile > *{position:relative;z-index:2}
.tile:hover{color:var(--y)}
.tile .txt{color:rgba(255,255,255,.7)}
/* Наличие в строке спецификации расчёта: две короткие метки в один ряд,
   не спорящие с названием позиции по весу. */
.spectbl__stk{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:5px}
.spectbl__stk .stk,.spectbl__stk .whs{font-size:12px}

/* Полоса частых задач над витриной каталога. Не кнопки и не плитки: это
   навигация словами покупателя, и весить она должна меньше самих разделов. */
.tasks{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.tasks__a{display:inline-flex;align-items:center;min-height:40px;padding:9px 15px;
  border:1px solid var(--ln);background:var(--w);color:var(--ink);
  font:600 13px/1.25 var(--os);letter-spacing:.02em;
  transition:background-color .12s,border-color .12s}
.tasks__a:hover{background:var(--y);border-color:var(--ink);color:var(--ink)}
.tasks__a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--y)}
@media (max-width:560px){.tasks__a{font-size:12px;padding:8px 12px}}

/* Числа раздела на плитке витрины. Каталог верхнего уровня был восемнадцатью
   названиями без единой цифры — не за что зацепиться и нечем сравнить. */
.tile__n{display:block;margin-top:-2px;font:400 13px/1.4 var(--tx);
  color:rgba(255,255,255,.82);font-variant-numeric:tabular-nums}
.tile:hover .tile__n{color:rgba(255,255,255,.92)}

/* ── хлебные крошки ───────────────────────────────────────────────────────── */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 14px/1.4 var(--tx);color:var(--mut);padding:18px var(--pad);border-bottom:1px solid var(--ln);list-style:none;margin:0}
.crumbs li{display:flex;align-items:center;gap:10px}
.crumbs li::after{content:"/";color:var(--ln)}
.crumbs li:last-child::after{content:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs [aria-current]{color:var(--ink);font-weight:500}

/* ── шапка ────────────────────────────────────────────────────────────────── */
.hdr{position:relative;z-index:40;min-height:104px;background:var(--w);display:flex;align-items:center;
  gap:clamp(12px,1.5vw,24px);padding:0 var(--pad);border-bottom:1px solid var(--ln);flex-wrap:nowrap}
.hdr > *{flex:none}
.hdr__logo{flex:none;display:block;line-height:0}
.hdr__logo img{display:block;width:200px;height:auto}
.hdr__cat{height:52px;padding:0 clamp(16px,1.4vw,26px);gap:10px}
.hdr__nav{display:flex;align-items:center;gap:clamp(10px,1.1vw,18px);font:500 clamp(15px,1.05vw,17px)/1 var(--os);letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;margin:0;padding:0;list-style:none}
.hdr__nav a{padding:6px 0;border-bottom:3px solid transparent;transition:border-color .15s,color .15s;display:inline-block}
.hdr__nav a:hover{border-bottom-color:var(--y)}
.hdr__nav a[aria-current]{border-bottom-color:var(--ink)}
.hdr__right{display:flex;align-items:center;gap:clamp(8px,1vw,18px);margin-left:auto;flex:none}
.hdr__tel{font:600 clamp(18px,1.3vw,22px)/1 var(--os);letter-spacing:.01em;white-space:nowrap}
.hdr__tel:hover{color:#2B3136}
.hdr__acts{display:flex;align-items:center;gap:2px;flex:none}
.hdr__burger{display:none}
.hdr--compact .hdr__nav{display:none}
.hdr--compact .hdr__burger{display:flex}
/* Телефон и почта в один столбец — иначе строка шапки не вмещает поиск */
.hdr__cnt{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.hdr__mail{font:500 14px/1 var(--tx);color:var(--mut);letter-spacing:.01em;white-space:nowrap}
.hdr__mail:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--y);
  text-underline-offset:3px;text-decoration-thickness:2px}
/* Постоянная строка поиска: раньше поле жило только в выпадающей панели,
   на странице его ширина была нулевой и покупатель искал глазами иконку */
/* Поиск собран из тех же плоских блоков, что и кнопка «Каталог»: заливка без
   обводок. Раньше поле имело собственную рамку, а кнопка — свою, и узел
   выпадал из языка шапки, где рамок нет вовсе. */
.hdr__srch{position:relative;display:flex;align-items:center;flex:1 1 280px;min-width:216px;
  max-width:560px;margin:0;border:0;background:#F1F2F3;height:48px}
.hdr__srch input{flex:1;min-width:0;height:100%;padding:0 16px;border:0;background:transparent;
  font:400 15px/1 var(--tx);border-radius:0;-webkit-appearance:none}
.hdr__srch input::placeholder{color:var(--mut)}
.hdr__srch input:focus{outline:0}
.hdr__srch button{flex:none;width:52px;height:100%;display:flex;align-items:center;justify-content:center;
  border:0;background:var(--y);color:var(--ink);cursor:pointer;transition:filter .15s ease}
.hdr__srch button:hover{filter:brightness(.93)}
.hdr__srch button:active{filter:brightness(.86)}
/* Обводка та же, что у остальных органов управления: своя тонкая линия в 2 px
   выбивалась из общего языка фокуса и была слабее по заметности. */
.hdr__srch:focus-within{background:var(--w);outline:3px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 6px var(--y)}
.hdr__srch input:focus-visible{outline:0}
.sugg--hdr{position:absolute;top:100%;left:0;right:0;z-index:60;background:var(--w);
  border:1px solid var(--ln);border-top:0;box-shadow:0 14px 34px rgba(14,17,19,.14);
  max-height:min(70vh,540px);overflow:auto}
.sugg--hdr:empty{display:none}
/* Уплотнение строки на средних ширинах. Ниже 1500 px строка всё равно не
   вмещает и меню, и рабочее поле поиска: там меню уходит в бургер, а поиску
   достаётся полная ширина — поле поиска для покупателя важнее пяти
   второстепенных ссылок, которые остаются под кнопкой меню. */
/* Плотная шапка начинается с 1366, а не с 1501. Раньше на самой массовой
   десктопной ширине вся навигация уходила под бургер: строке нужно было
   1531 px при 1366 доступных. Плотные правила дают 1459, ещё 93 px
   освобождают два коротких названия пунктов — итог 1366 с запасом 46 px,
   и поиску остаётся 262 px вместо минимальных 216. Запас нужен: Oswald
   догружается позже, и без него строка снова не собралась бы, а шапка
   прыгнула бы уже после отрисовки. */
@media (min-width:1366px) and (max-width:1700px){
  .hdr{gap:14px}
  .hdr__logo img{width:172px}
  .hdr__nav{gap:12px;font-size:15px}
  .hdr__cat{padding:0 16px}
  .hdr__tel{font-size:18px}
}
/* Узкая шапка: поиск снова уезжает под иконку, иначе строка не собирается.
   Порог 1220 совпадает с границей компактной шапки. */
@media (max-width:1220px){
  .hdr__srch{display:none}
}
@media (min-width:1221px){
  [data-search-toggle]{display:none}
}
/* Почта — только там, где для неё есть место: на 390 она выдавливала
   значки корзины и сравнения за край экрана (прокрутка 66 px) */
@media (max-width:900px){
  .hdr__mail{display:none}
}
.hmenu{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:0 40px;padding:22px var(--pad) 30px}
.hmenu ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column}
.hmenu li{margin:0}
.hmenu a{display:block;padding:14px 0;border-bottom:1px solid var(--ln);font:600 17px/1.2 var(--os);letter-spacing:.03em;text-transform:uppercase}
.hmenu a:hover{color:var(--ink);box-shadow:inset 3px 0 0 var(--y);padding-left:12px}
.hmenu a[aria-current]{box-shadow:inset 3px 0 0 var(--ink);padding-left:12px}
.hmenu__side{display:flex;flex-direction:column;gap:16px;align-items:flex-start;padding:14px 0 0}
.hmenu__tel{font:600 26px/1 var(--os)}
.drop{position:absolute;left:0;right:0;top:100%;background:var(--w);border-bottom:3px solid var(--ink);display:none;z-index:39}
.drop.is-open{display:block}
.srch{display:flex;align-items:center;gap:10px;padding:22px var(--pad);border-bottom:1px solid var(--ln)}
.srch input{flex:1;min-width:0;height:64px;padding:0 18px;border:0;background:#F1F2F3;
  font:400 20px/1 var(--tx);border-radius:0;-webkit-appearance:none}
.srch input::placeholder{color:var(--mut)}
.srch input:focus{outline:0;background:var(--w);box-shadow:inset 0 0 0 2px var(--ink)}
.srch .btn{height:64px;padding:0 34px}
.sugg{display:flex;flex-direction:column;padding:8px var(--pad) 26px}
.sugg a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid var(--ln);font:400 16px/1.3 var(--tx)}
.sugg a:hover{color:var(--ink);background:#FAFAFA}
.sugg b{font-weight:600}
.sugg em{font-style:normal;font:500 13px/1 var(--os);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.mega{display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;padding:28px var(--pad) 34px}
.mega h4,.mega__gr{margin:0 0 12px;font:600 14px/1 var(--os);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);padding-bottom:10px;border-bottom:2px solid var(--y)}
.mega ul{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.mega a{font:400 15px/1.3 var(--tx)}
.mega a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--y);text-underline-offset:4px;text-decoration-thickness:2px}
.mega__cta{background:var(--gr);color:#fff;padding:24px;display:flex;flex-direction:column;gap:14px}
.mega__cta .sm{color:var(--mut2)}
.mega__cta .kick{color:var(--y)}
.mega__cta .btn{margin-top:auto}

/* ── подвал ───────────────────────────────────────────────────────────────── */
.ftr{background:var(--gr);color:var(--w);padding:56px var(--pad) 34px}
.ftr a{color:var(--mut2)}
.ftr a:hover{color:var(--y)}
.ftr h2{margin:0 0 14px;font:600 14px/1 var(--os);letter-spacing:.12em;text-transform:uppercase;color:var(--w);padding-bottom:10px;border-bottom:2px solid var(--y)}
.ftr ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font:400 15px/1.35 var(--tx)}
.ftr__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:40px}
/* Знак в подвале стоял на белом прямоугольнике: основной файл нарисован
   тёмным и на графите пропадал, подложку добавили, чтобы его было видно.
   Теперь берётся инверсный вариант (/f/i/logo-inverse.svg): надпись и
   тёмная часть знака белые, оба фирменных золотых оттенка (#fddd10 и
   #bf9b25) сохранены без CSS-фильтров, фон прозрачный. Отступ снизу —
   охранное поле знака, а не рамка подложки. */
.ftr__logo{display:block;width:190px;height:auto;margin-bottom:6px}
.ftr__tel{color:#fff!important;font:600 22px/1 var(--os)}
.ftr__bot{margin-top:40px;padding-top:20px;border-top:1px solid var(--gr3);display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ftr__bot .sm{color:var(--mut2)}

/* ── фильтр над товарами ──────────────────────────────────────────────────── */
/* Последовательность читается сверху вниз: заголовок → группы параметров →
   что выбрано → показать. Раньше это был один ряд серых прямоугольников
   случайной ширины с подписями в 11 px, кнопкой у правого края и числом
   найденного отдельно от неё. */
.shopfilter{margin:0 0 24px;border:2px solid var(--ink);background:var(--w)}
.shopfilter__hd{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:2px solid var(--ink);background:var(--bg)}
.shopfilter__ttlb{display:flex;flex-direction:column;gap:3px;min-width:0;margin-right:auto}
.shopfilter__ttl{font:700 15px/1.2 var(--os);letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.shopfilter__sub{font:400 13px/1.35 var(--tx);color:var(--mut)}
.shopfilter__reset{font:500 14px/1 var(--tx);color:var(--mut);
  border-bottom:1px solid var(--ln);text-underline-offset:3px}
.shopfilter__reset:hover{color:var(--ink);border-bottom-color:var(--y2)}
.shopfilter__toggle{display:none}
/* Флажок-переключатель нужен только там, где панель сворачивается. */
@media (min-width:901px){ #filter-open{display:none} }
/* Пока шторка открыта, страница под ней не прокручивается. */
body:has(#filter-open:checked){overflow:hidden}
/* Тот же замок без :has(): класс ставит JS, когда шторка открыта. */
html.filter-open,html.filter-open body{overflow:hidden}
@media (min-width:901px){ html.filter-open,html.filter-open body{overflow:visible} }
@media (min-width:901px){ body:has(#filter-open:checked){overflow:visible} }
.shopfilter__b{padding:18px 20px 20px}
/* Шапка шторки нужна только в выдвижном режиме. */
.shopfilter__dhd{display:none}

/* Группы параметров: равные ячейки, читаемая подпись, согласованная высота. */
.shopfilter__grid{display:grid;gap:18px 22px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fsel__c{width:100%;height:42px;padding:0 34px 0 12px;border:1px solid var(--ln);background:var(--w);
  font:400 15px/1 var(--tx);color:var(--ink);border-radius:0;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230E1113' d='M6 8 0 2l2-2 4 4 4-4 2 2z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.fsel__c:hover{border-color:var(--gr)}
.fsel__c:focus-visible{outline:3px solid var(--y);outline-offset:1px;border-color:var(--ink)}

/* Список значений: строки одинаковой высоты, число справа по колонке. */
/* Значения показываются целиком. Прокрутка внутри группы появлялась ради
   одной-двух скрытых строк и читалась как дефект; теперь короткие списки
   видны полностью, а длинные (больше девяти значений) сворачиваются кнопкой
   «Показать ещё» — и только при работающем JS. */
.fopt{display:flex;align-items:center;gap:10px;min-height:34px;padding:4px 10px 4px 8px;margin:0;
  cursor:pointer;font:400 15px/1.3 var(--tx);border:1px solid transparent;transition:background-color .12s}
.fopt:hover{background:var(--bg)}
.fopt input{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin:0;flex:none;
  position:relative;border:1px solid var(--gr);background:var(--w);cursor:pointer}
.fopt input:checked{background:var(--y);border-color:var(--ink)}
.fopt input:checked::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fopt:has(input:checked){background:var(--bg);border-color:var(--ln);font-weight:600}
.fopt:focus-within{outline:3px solid var(--y);outline-offset:1px}
.fopt > span:first-of-type{flex:1;min-width:0;overflow-wrap:anywhere}
.fopt__n{flex:none;font:400 13px/1 var(--tx);color:var(--mut);font-variant-numeric:tabular-nums}
.fopt.is-off{color:#A8ADB2;cursor:not-allowed}

.frange{display:flex;align-items:center;gap:8px}
.frange input{width:100%;min-width:0;height:42px;padding:0 10px;border:1px solid var(--ln);
  font:400 15px/1 var(--tx);border-radius:0}
.frange input:focus-visible{outline:3px solid var(--y);outline-offset:1px;border-color:var(--ink)}

/* Что выбрано — между параметрами и действием. */
.fbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--ln)}
.fbar__t{font:600 12px/1 var(--os);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-right:4px}
.fchip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 12px;
  background:var(--ink);color:var(--w);font:500 14px/1 var(--tx);white-space:nowrap;max-width:100%}
.fchip i{font-style:normal;color:var(--mut2);font-weight:400}
.fchip a,.fchip button{width:22px;height:22px;border:0;background:transparent;color:var(--w);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;padding:0;flex:none}
.fchip a:hover,.fchip button:hover{background:rgba(255,255,255,.22);color:var(--w)}
.fchip a:focus-visible{outline:3px solid var(--y);outline-offset:1px}

/* Действие: число внутри кнопки. */
.fact{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--ln)}
.fbar + .fact{border-top:0;padding-top:0;margin-top:14px}
.fact__go{height:46px;padding:0 26px;white-space:nowrap}
.fact__clear{font:500 14px/1 var(--tx);color:var(--mut);
  border-bottom:1px solid var(--ln);text-underline-offset:3px}
.fact__clear:hover{color:var(--ink);border-bottom-color:var(--y2)}

/* ── витрина: раскладка каталога ──────────────────────────────────────────── */
.shop{display:grid;grid-template-columns:260px minmax(0,1fr);gap:40px;align-items:start}
/* Колонка рубрик выше окна: 16 рубрик дают 909 px при окне 900 и 950 px
   при окне 768. Липкая колонка при этом обрезается снизу — на 1024×768
   четыре нижние рубрики («Композитный профиль», «Композитные лотки»,
   «Блоки биологической загрузки», «Мобильные дорожные покрытия») не
   показать вовсе, пока прокручивается сетка карточек: колонка стоит на
   месте, а её низ за краем окна.
   Ограничиваем высоту окном и разрешаем прокрутку внутри колонки; когда
   рубрик мало, полосы прокрутки нет и ничего не меняется. */
.shop__aside{position:sticky;top:20px;max-height:calc(100vh - 40px);
  overflow-y:auto;overscroll-behavior:contain}
.shop__asidettl{margin:0 0 10px;font:600 13px/1 var(--os);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.shop__bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:16px;border-bottom:3px solid var(--ink);margin-bottom:22px}
.shop__found{font:500 15px/1 var(--tx);color:var(--mut)}
.shop__found--sort{margin-right:2px}
.shop__tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--cards{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.grid--tiles{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.pages{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:34px;padding:0;list-style:none}
.pages li{margin:0}
.pages a,.pages strong{display:flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 12px;border:2px solid var(--ln);font:600 15px/1 var(--tx)}
.pages a:hover{border-color:var(--ink)}
.pages strong{background:var(--ink);border-color:var(--ink);color:var(--w)}

/* ── карточка товара (страница) ───────────────────────────────────────────── */
.qty{display:flex;align-items:stretch;border:2px solid var(--ln)}
.qty button{width:46px;border:0;background:var(--w);cursor:pointer;font:600 20px/1 var(--os);color:var(--ink);transition:background-color .15s}
.qty button:hover{background:var(--bg)}
.qty input[type="number"]{width:70px;height:46px;border:0;border-left:2px solid var(--ln);border-right:2px solid var(--ln);text-align:center;font:600 16px/1 var(--tx);-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input:focus{outline:0;background:#FAFAFA}
.docs{display:flex;flex-direction:column;gap:0;padding:0;list-style:none;margin:0}
.docs li{margin:0}
.docs a{display:flex;align-items:center;gap:14px;padding:15px 0;border-bottom:1px solid var(--ln);font:500 15px/1.35 var(--tx)}
.docs a:hover{background:#FAFAFA}
.docs__ico{width:34px;height:34px;flex:none;background:var(--y);display:flex;align-items:center;justify-content:center;font:700 11px/1 var(--os);letter-spacing:.04em}
.docs__sz{margin-left:auto;font:400 13px/1 var(--tx);color:var(--mut);white-space:nowrap}
.tabs{display:flex;gap:0;border-bottom:3px solid var(--ink);margin:0 0 26px;padding:0;list-style:none;flex-wrap:wrap;overflow-x:auto}
.tabs button{height:52px;padding:0 22px;border:0;background:transparent;font:600 15px/1 var(--os);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s}
.tabs button:hover{background:var(--bg)}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--w)}
.tabp[hidden]{display:none}

/* ── корзина ──────────────────────────────────────────────────────────────── */
.cart__grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:40px;align-items:start;max-width:100%}
.cart__sum{border:2px solid var(--ink);padding:26px;display:flex;flex-direction:column;gap:16px;position:sticky;top:20px}
.cart__line{display:flex;justify-content:space-between;gap:16px;font:400 15px/1.4 var(--tx)}
.cart__line--tot{padding-top:14px;border-top:2px solid var(--ink);font:600 19px/1.2 var(--tx);align-items:baseline}

/* ── прочее ───────────────────────────────────────────────────────────────── */
.row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.col{display:flex;flex-direction:column}
.hide{display:none!important}
.note{padding:16px 20px;background:var(--bg);border-left:4px solid var(--y);font:400 15px/1.5 var(--tx)}
.sec--dark .note{background:var(--gr2);border-left-color:var(--y);color:var(--w)}
.err{border:2px solid var(--wr);border-left-width:6px;padding:18px 22px;font:400 15px/1.5 var(--tx);margin:0 0 22px}
.ok{border:2px solid var(--ok);border-left-width:6px;padding:18px 22px;font:400 15px/1.5 var(--tx);margin:0 0 22px}
.empty{padding:56px 40px;text-align:center;border:2px dashed var(--ln)}
.vis-hid{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skipl{position:absolute;left:-9999px;top:0;z-index:100;background:var(--y);color:var(--ink);padding:12px 20px;font:600 15px/1 var(--os);text-transform:uppercase}
.skipl:focus{left:0}

/* ── HERO «Плита» ──────────────────────────────────────────────────────────
   Карусель возвращена по решению владельца 06.09.2026. Прежняя высота
   складывалась в 100vh − 6 px, и обе двери сайта — «купить со склада» и
   «рассчитать изделие» — всегда оставались за сгибом: это была его же
   первая претензия. Кадр и плита ниже прежнего, чтобы на 1366×768 двери
   попадали на первый экран вместе с каруселью. */
/* ── HERO «Плита» ─────────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--gr2)}
/* Кадр не должен съедать весь первый экран. При 1366×768 фотография
   высотой 496 px уводила за сгиб и заголовок, и обе кнопки: покупатель
   видел серую текстуру и половину строки. Высота теперь считается от
   окна и оставляет место тексту, но на большом экране остаётся прежней. */
.hero__stage{position:relative;height:clamp(200px,calc(100vh - 520px),380px);
  overflow:hidden;background:var(--gr2)}
.hero__ph{position:absolute;inset:0;overflow:hidden;clip-path:inset(0 0 0 100%);transform:scale(1.07);transform-origin:50% 40%;z-index:1;
  /* Уходящий кадр закрывается без анимации и только после того, как его
     полностью накрыл приходящий, — иначе на середине перехода слева
     открывается пустой фон. */
  transition:clip-path 0s linear .92s,transform 0s linear .92s}
.hero__ph.is-on{clip-path:inset(0 0 0 0);transform:scale(1);z-index:2;
  /* Вытеснение справа налево жёстким краем, следом — медленная осадка
     масштаба с 1,07 до 1: кадр «встаёт на место» уже после того, как
     край прошёл. */
  transition:clip-path .92s cubic-bezier(.76,0,.24,1),
             transform 1.5s cubic-bezier(.22,1,.36,1)}
.hero__ph picture{display:block;width:100%;height:100%}
.hero__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:contrast(1.06) brightness(1.02)}
.hero__plate{background:var(--gr);color:var(--w);display:flex;align-items:center;gap:56px;padding:22px var(--pad);min-height:268px}
.hero__txts{position:relative;flex:1;min-width:0;min-height:200px}
.hero__t{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(26px);pointer-events:none;transition:opacity .26s ease,transform .26s ease}
.hero__t.is-on{opacity:1;transform:translateY(0);pointer-events:auto;position:relative;
  transition:opacity .6s cubic-bezier(.2,0,.2,1) .34s,
             transform .6s cubic-bezier(.2,0,.2,1) .34s}
.hero__t h1,.hero__t .h1x{margin:0;font:700 clamp(30px,4.3vw,62px)/1 var(--os);letter-spacing:.005em;text-transform:uppercase;color:#fff}
.hero__t h1 span,.hero__t .h1x span{display:block}
.hero__t h1 .y,.hero__t .h1x .y{color:var(--y)}
.hero__t p{margin:18px 0 0;font:400 clamp(15px,1.4vw,19px)/1.5 var(--tx);color:rgba(255,255,255,.72);max-width:37.2em}
.hero__cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero__cta .btn{height:60px;padding:0 34px;font-size:clamp(15px,1.4vw,19px)}
.hero__ui{display:flex;flex-direction:column;align-items:flex-end;gap:20px;white-space:nowrap;flex:none}
.hero__idx{display:flex;align-items:baseline;gap:10px;font-family:var(--os);font-weight:600}
.hero__idx b{font-size:34px;color:#fff;font-weight:600}
.hero__idx span{font-size:18px;color:rgba(255,255,255,.45)}
.hero__bar{width:180px;height:3px;background:rgba(255,255,255,.22)}
.hero__bar i{display:block;height:100%;width:100%;background:var(--y);transform:scaleX(0);transform-origin:0 50%;will-change:transform}
.hero__pause{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:0;background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.34);color:#fff;font:600 13px/1 var(--os);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background-color .15s,color .15s}
.hero__pause:hover{background:#fff;color:var(--ink)}
.hero__nav{display:flex;gap:10px}
.hero__nav button{width:60px;height:60px;border:0;background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.34);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .15s,color .15s,box-shadow .15s}
.hero__nav button:hover{background:var(--y);color:var(--ink);box-shadow:inset 0 0 0 2px var(--y)}
.hero__nav button[data-nav="next"]{background:var(--y);color:var(--ink)}
.hero__nav button[data-nav="next"]:hover{background:var(--y2)}
.hero--single .hero__ui{display:none}

/* два сценария под HERO */
.scen{display:grid;grid-template-columns:1fr 1fr}
.scen > a{padding:clamp(24px,2.4vw,34px) var(--pad);display:flex;flex-direction:column;gap:12px;transition:background-color .15s}
.scen__y{background:var(--y);color:var(--ink)}
.scen__y:hover{background:var(--y2);color:var(--ink)}
/* Тёмная карточка сценария не помечена .sec--dark, поэтому надзаголовок
   оставался приглушённо-серым: #6B7075 на #0E1113 — отношение 3,79 при
   норме 4,5. Светлый серый даёт 6,94. */
.scen__d .kick{color:var(--mut2)}
.scen__y .kick{color:rgba(14,17,19,.6)}
.scen__y .lnk{border-bottom-color:var(--ink)}
.scen__d{background:var(--gr);color:#fff}
.scen__d:hover{background:#1B2024;color:#fff}
.scen__d .h3{color:#fff}
.scen__d .txt{color:var(--mut2)}
.scen__d .lnk{color:#fff}

@media (prefers-reduced-motion:reduce){
  .hero__t,.hero__ph,.tile img,*{transition-duration:.01ms!important;animation-duration:.01ms!important;
    transition-delay:0s!important;animation-delay:0s!important}
  .hero__bar i{display:none}
}

/* ── адаптив ──────────────────────────────────────────────────────────────── */
/* Порог меню совпадает с порогом плотной шапки (1501 px): именно там зазоры
   и кегль ужимаются, и строка наконец собирается. Прежние 1365 px обещали
   меню там, где оно не помещается: на 1366…1500 браузер рисовал полную
   строку, а скрипт-страховка убирал её уже после отрисовки — шапка прыгала
   на каждой странице (сдвиг 0,020…0,041, а на странице директора 0,18 при
   допустимых 0,1). Замер: ширина, нужная строке, 1498…1556 px против
   доступных 1366…1500. */
@media (max-width:1365px){
  .hdr__nav{display:none}
  .hdr__burger{display:flex}
}
@media (max-width:1220px){
  .shop{grid-template-columns:240px 1fr;gap:28px}
  .grid--4{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1120px){
  .hdr{min-height:88px}
  .sec{padding-top:48px;padding-bottom:48px}
  .mega{grid-template-columns:repeat(2,1fr)}
  .ftr__cols{grid-template-columns:repeat(2,1fr)}
  .grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
  .cart__grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .cart__sum{position:static}
}
@media (max-width:900px){
  .shop{grid-template-columns:1fr}
  .shop__main{order:1}
  /* Ниже 900 px колонка не липкая, а обычный блок под сеткой: предел высоты
     и прокрутка внутри тут только обрезали бы список. */
  .shop__aside{position:static;order:2;margin-top:36px;padding-top:24px;border-top:3px solid var(--ink);
    max-height:none;overflow:visible}
  .shop__aside .asidenav{display:flex;flex-direction:row;flex-wrap:wrap;gap:0 8px;border-top:0}
  .shop__aside .asidenav a,.shop__aside .asidenav span{border-bottom:0;padding:8px 12px;border:2px solid var(--ln)}
  .shop__aside .asidenav .is-on > span{box-shadow:none;background:var(--ink);color:var(--w);padding-left:12px}
  /* Фильтр сворачивается в кнопку и открывается шторкой на весь экран.
     Всё на чистом CSS: работает и без JavaScript. */
  .shopfilter{border:0;background:transparent;margin-bottom:18px}
  .shopfilter__hd{padding:0;border:0;background:transparent;gap:12px}
  .shopfilter__ttlb{display:none}
  .shopfilter__reset{margin-left:auto}
  /* Тот же вид у метки (без JS) и у кнопки (с JS). */
  .shopfilter__toggle{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px;
    background:var(--ink);color:var(--w);font:600 14px/1 var(--os);letter-spacing:.06em;
    text-transform:uppercase;cursor:pointer;order:-1;border:0;-webkit-appearance:none;appearance:none}
  button.shopfilter__toggle:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--y)}
  button.shopfilter__close:focus-visible{outline:3px solid var(--y);outline-offset:-3px}
  .shopfilter__toggle b{display:inline-flex;align-items:center;justify-content:center;
    min-width:22px;height:22px;padding:0 5px;background:var(--y);color:var(--ink);
    font:700 13px/1 var(--tx);font-variant-numeric:tabular-nums}
  #filter-open:focus-visible ~ .shopfilter__hd .shopfilter__toggle{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--y)}

  /* Шторка */
  .shopfilter__b{position:fixed;inset:0;z-index:1150;display:none;
    background:var(--w);overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:0 var(--pad) 104px}
  #filter-open:checked ~ .shopfilter__b{display:block}
  .shopfilter__dhd{position:sticky;top:0;z-index:2;display:flex !important;align-items:center;
    justify-content:space-between;gap:16px;margin:0 calc(-1 * var(--pad));
    padding:14px var(--pad);background:var(--w);border-bottom:2px solid var(--ink)}
  .shopfilter__dttl{font:700 15px/1.2 var(--os);text-transform:uppercase;letter-spacing:.02em}
  .shopfilter__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
    margin-right:-10px;font:400 30px/1 var(--tx);color:var(--ink);cursor:pointer;
    background:transparent;border:0;-webkit-appearance:none;appearance:none}
  #filter-open:focus-visible ~ .shopfilter__b .shopfilter__close{outline:3px solid var(--y);outline-offset:-3px}
  .shopfilter__grid{grid-template-columns:minmax(0,1fr);gap:20px;padding-top:18px}
  .fopt{min-height:46px}
  .fbar{margin-top:18px}
  /* Нижняя зона шторки закреплена */
  .fact{position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;gap:14px;align-items:center;
    margin:0;padding:12px var(--pad);background:var(--w);border-top:2px solid var(--ink)}
  .fbar + .fact{margin:0}
  .fact__go{flex:1;height:50px;width:auto}
  .fact__clear{flex:none}
  .hero__stage{height:260px}
  .hero__plate{flex-direction:column;align-items:stretch;padding:26px var(--pad);gap:20px;min-height:0}
  .hero__txts{min-height:0}
  .hero__t{position:relative;display:none}
  .hero__t.is-on{display:flex}
  .hero__ui{flex-direction:row;align-items:center;justify-content:space-between;width:100%;flex-wrap:wrap}
  .hero__nav button{width:48px;height:48px}
  .scen{grid-template-columns:1fr}
  .scen > a{padding:32px var(--pad)}
  .formgrid{grid-template-columns:1fr}
}
@media (max-width:820px){
  .mega{grid-template-columns:1fr}
  .srch{flex-wrap:wrap}
  .srch input{width:100%;flex:1 1 100%;height:56px;font-size:17px}
  .srch .btn{width:100%;height:52px}
  .tbl th,.tbl td{padding:11px 10px;font-size:14px}
}
@media (max-width:767px){
  .sechead{flex-direction:column;align-items:flex-start;gap:12px}
  .btn{height:50px;padding:0 20px}
  /* Без этой строки малая кнопка на телефоне становилась ровно такой же,
     как обычная. 44 px — нижний порог области нажатия пальцем. */
  .btn--sm{height:44px;padding:0 16px}
  .card__ph{height:190px}
  .grid--3,.grid--4,.grid--2{grid-template-columns:1fr}
  .ftr__cols{grid-template-columns:1fr;gap:28px}
  .hdr{min-height:74px;gap:8px}
  .hdr__logo img{width:132px}
  .hdr__cat{height:44px;padding:0 13px}
  .hdr__cat span{display:none}
  .hdr__tel{display:none}
  .hdr__acts .ico{width:42px;height:42px}
  .hdr__acts [data-sm-hide]{display:none}
  .hdr__burger{width:42px;height:42px}
  .hmenu a{font-size:16px;padding:12px 0}
  .tbl{font-size:13.5px}
  .hero__stage{height:210px}
  .hero__cta{gap:10px}
  .hero__cta .btn{height:50px;padding:0 20px;font-size:15px;flex:1 1 100%}
  .empty{padding:36px 20px}
  .tabs button{height:46px;padding:0 16px;font-size:14px}
}
@media (max-width:400px){
  /* Экран 360×740: управление каруселью первого экрана (.hero__nav 695…743,
     .hero__pause 697…741) выходило за нижнюю границу окна на три пикселя —
     листать и останавливать показ было нечем, пока человек не прокрутит.
     Снимаем 14 px со сцены и 6 px с зазора блока управления: кнопки
     заканчиваются на ~723, а призыв к действию (.hero__cta, 491…601)
     остаётся на месте. */
  .hero__stage{height:196px}
  .hero__ui{gap:14px}
  .hdr__acts .ico{width:40px;height:40px}
  .grid{gap:14px}
}

/* печать */
@media print{
  .hdr,.ftr,.drop,.hero__ui,.crumbs,.shop__aside,.pages,.btn{display:none!important}
  body{font-size:12pt}
}

/* ── боковое меню раздела ─────────────────────────────────────────────────── */
.asidenav{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;border-top:2px solid var(--ink)}
.asidenav li{margin:0}
.asidenav a,.asidenav span{display:block;padding:13px 0;border-bottom:1px solid var(--ln);font:500 15px/1.35 var(--tx)}
.asidenav a:hover{color:var(--ink);background:#FAFAFA;padding-left:8px;margin-left:-8px;padding-right:8px;margin-right:-8px}
.asidenav .is-on > span,.asidenav .is-on > a{font-weight:600;box-shadow:inset 3px 0 0 var(--y);padding-left:12px}
.shop__aside:empty,.shop__aside > nav:empty{display:none}

/* ── медиа внутри редакционного текста ────────────────────────────────────── */
.rich iframe,.rich video,.rich embed,.rich object{display:block;max-width:100%;width:100%;aspect-ratio:16/9;height:auto;border:0;margin:20px 0}
.rich iframe{aspect-ratio:16/9!important;height:auto!important;width:100%!important}
.rich .videowrap{position:relative;width:100%;padding-top:56.25%;margin:20px 0;background:var(--gr2)}
.rich .videowrap iframe{position:absolute;inset:0;width:100%;height:100%;margin:0;aspect-ratio:auto}
.rich > table,.rich .tblwrap{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* страница без бокового меню — контент во всю ширину */
.shop--nobar{grid-template-columns:1fr}

/* ── пагинация движка (#pager) ────────────────────────────────────────────── */
#pager{margin-top:34px}
#pager .pager-controls{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
#pager .controls{display:flex;gap:10px;order:2}
#pager .controls > div{font:600 14px/1 var(--tx)}
#pager .controls a{display:inline-flex;align-items:center;height:46px;padding:0 16px;border:2px solid var(--ln)}
#pager .controls a:hover{border-color:var(--ink)}
#pager .controls .unactive{display:none}
#pager .pages{order:1}
#pager .pages ul{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0;padding:0;list-style:none}
#pager .pages li{margin:0}
#pager .pages a,#pager .pages strong,#pager .pages span{display:flex;align-items:center;justify-content:center;min-width:46px;height:46px;padding:0 12px;border:2px solid var(--ln);font:600 15px/1 var(--tx)}
#pager .pages a:hover{border-color:var(--ink)}
#pager .pages strong,#pager .pages .active > *,#pager .pages li.active span{background:var(--ink);border-color:var(--ink);color:var(--w)}
#pager .pagesize,#pager .pager-sizes{order:3;margin-left:auto;font:400 14px/1 var(--tx);color:var(--mut);display:flex;gap:8px;align-items:center}
#pager .pagesize a,#pager .pager-sizes a{border-bottom:2px solid var(--y);padding-bottom:2px}

/* ── список товаров: плитка и строки ──────────────────────────────────────── */
.store-items{margin:0;padding:0;list-style:none}
.store-items-block{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.store-items-table{display:flex;flex-direction:column;gap:0;border-top:2px solid var(--ink)}
.store-items-table > li{border-bottom:1px solid var(--ln)}
.store-items-table .card{flex-direction:row;border:0;align-items:center;min-height:122px}
.store-items-table .card__ph{width:132px;height:104px;flex:none}
.store-items-table .card__b{display:grid;align-items:center;gap:6px 24px;padding:14px 16px;
  grid-template-columns:minmax(190px,1fr) minmax(150px,260px) max-content;
  grid-template-areas:"meta meta meta" "name specs bot"}
.store-items-table .card__meta{grid-area:meta;gap:12px}
.store-items-table .card__t{grid-area:name;min-width:0;min-height:0;-webkit-line-clamp:2}
.store-items-table .card__sp{grid-area:specs}
.store-items-table .card__bot{grid-area:bot;margin-top:0;padding-top:0;border-top:0;
  display:flex;flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
.store-items-table .card__pr{flex-direction:column;align-items:flex-end;gap:2px;min-height:0;text-align:right}
.store-items-table .card__buy{flex-wrap:nowrap}
.store-items-table .card__go{flex:0 0 auto;min-width:112px}
.store-items-table .card__cmp{position:static;order:3;margin-right:8px}
.store-items-table .card__cmp button{background:transparent}
@media (max-width:1400px){
  .store-items-table .card__sp{display:none}
  .store-items-table .card__b{grid-template-columns:minmax(150px,1fr) max-content;
    grid-template-areas:"meta meta" "name bot"}
  /* цена над строкой покупки — иначе строка не помещается в узкую колонку */
  .store-items-table .card__bot{flex-direction:column;align-items:flex-end;gap:8px}
}
.shop__main{min-width:0}
.facets{margin:0}

@media (max-width:900px){
  .store-items-table .card{flex-direction:column;align-items:stretch}
  .store-items-table .card__ph{width:100%;height:190px}
  .store-items-table .card__b{display:flex;flex-direction:column;align-items:stretch;gap:10px}
  .store-items-table .card__bot{flex-direction:column;align-items:stretch;gap:10px;
    margin-top:auto;padding-top:12px;border-top:1px solid var(--ln)}
  .store-items-table .card__pr{flex-direction:row;align-items:baseline;text-align:left}
  .store-items-table .card__cmp{position:absolute;top:8px;right:8px;margin:0}
}

/* карточки витрины не наследуют маркеры редакционных списков */
.store-items > li::before,.grid > li::before{content:none!important}
.store-items > li{padding-left:0!important;position:static}
.card,.store-items > li,.grid > li{min-width:0}
.store-items > li{display:flex}
.store-items > li > .card{width:100%}
.shop__main > .store-items{margin-top:0}
.store-items-table .card__sp{grid-template-columns:auto 1fr}

/* ── карточка товара: галерея и блок покупки ──────────────────────────────── */
.pdp__gal{min-width:0}
.pdp__info{min-width:0}
.pdp .card__sp dt{color:var(--mut)}
.pdp .card__sp dd{max-width:none;font-weight:600}
.pdp__info .chip{text-decoration:none}

/* оценка товара */
.rate{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
.rate__s{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:2px solid var(--ln);cursor:pointer;font:600 14px/1 var(--tx);transition:border-color .15s,background-color .15s}
.rate__s:hover{border-color:var(--ink)}
.rate__s input{position:absolute;opacity:0;width:0;height:0}
.rate__s:has(input:checked){background:var(--y);border-color:var(--ink);font-weight:700}/* выбранная оценка держится не только заливкой: жёлтый на белом
   различает не каждый глаз, поэтому добавлены рамка и насыщенность */
.rate__s input:focus-visible + span{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 6px var(--y)}

@media (max-width:1120px){
}

/* ── сравнение ────────────────────────────────────────────────────────────── */
.cmp th[scope="row"]{font:400 15px/1.4 var(--tx);color:var(--mut);text-transform:none;letter-spacing:0;background:var(--w);border-bottom:1px solid var(--ln);white-space:normal}
.cmp thead th{vertical-align:top;background:var(--w);border-bottom:2px solid var(--ink)}
.cmp__card{display:block}
.cmp__card img{width:100%;height:150px;object-fit:contain;background:#F6F7F7;margin-bottom:10px}
.cmp__n{display:block;font:600 15px/1.3 var(--tx);text-transform:none;letter-spacing:0;color:var(--ink)}
.cmp__n small{display:block;font-weight:400;color:var(--mut);margin-top:2px}
.cmp td{font-weight:500}
.cmp.is-diff tr.is-match{display:none}

/* ══ Слой совместимости: легаси-разметка Mediapoint в оформлении «Плита» ════
   Формы и таблицы CMS выводятся старым кодом (table.userform, .button, .row/
   .title/.value). Логику этих форм менять нельзя — они обрабатываются на
   сервере, поэтому приводим к дизайн-системе стилями.                        */

/* кнопки движка */
.button,input[type="submit"],input[type="button"],button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 28px;
  border:0;background:var(--y);color:var(--ink);font:600 16px/1 var(--os);letter-spacing:.05em;
  text-transform:uppercase;cursor:pointer;transition:background-color .15s;white-space:nowrap;border-radius:0;
  -webkit-appearance:none;appearance:none}
.button:hover,input[type="submit"]:hover,input[type="button"]:hover{background:var(--y2);color:var(--ink)}
.button[disabled],input[type="submit"][disabled]{opacity:.45;cursor:not-allowed}

/* поля движка */
input[type="text"],input[type="tel"],input[type="email"],input[type="password"],
input[type="search"],input[type="number"],input[type="url"],input[type="date"],select,textarea{
  font:400 16px/1.4 var(--tx);color:var(--ink);background:var(--w);border:2px solid var(--ln);
  border-radius:0;-webkit-appearance:none;appearance:none;padding:0 14px;height:50px;max-width:100%}
textarea{height:auto;min-height:120px;padding:12px 14px;line-height:1.5;resize:vertical}
select{padding-right:38px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%230E1113' d='M6 8 0 2l2-2 4 4 4-4 2 2z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ink)}
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;accent-color:var(--y)}
input[type="radio"]{accent-color:var(--ink)}

/* табличные формы движка */
table.userform,.userform table.userform{width:100%;border-collapse:collapse}
table.userform > tbody > tr > th,table.userform > tr > th{
  text-align:left;font:500 14px/1.3 var(--tx);color:var(--mut);padding:12px 20px 12px 0;
  vertical-align:middle;width:30%;text-transform:none;letter-spacing:0;background:transparent;border:0}
table.userform > tbody > tr > td,table.userform > tr > td{padding:12px 0;vertical-align:middle;border:0}
table.userform input[type="text"],table.userform input[type="tel"],table.userform input[type="email"],
table.userform input[type="password"],table.userform select,table.userform textarea{width:100%}

/* блочные формы движка: .row / .title / .value */
.userform .row{display:grid;grid-template-columns:minmax(140px,30%) 1fr;gap:12px 20px;align-items:center;padding:10px 0;margin:0}
.userform .row .title{font:500 14px/1.3 var(--tx);color:var(--mut)}
.userform .row .value{min-width:0}
.userform .row input[type="text"],.userform .row input[type="tel"],.userform .row input[type="email"],
.userform .row input[type="password"],.userform .row select,.userform .row textarea{width:100%}
.userform h2,.userform h3{font-family:var(--os);text-transform:uppercase;letter-spacing:.008em}

/* таблицы товаров движка вне витрины */
table.ruler{width:100%;border-collapse:collapse;font:400 15px/1.45 var(--tx)}
table.ruler th{font:600 13px/1.2 var(--os);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  background:var(--bg);border-bottom:2px solid var(--ink);padding:14px 16px;text-align:left}
table.ruler td{padding:14px 16px;border-bottom:1px solid var(--ln);vertical-align:middle}
table.ruler tr.odd{background:#FAFAFA}
table.ruler .num,table.ruler .price,table.ruler .sum{text-align:right;white-space:nowrap}
table.ruler .photo img{width:70px;height:56px;object-fit:contain;background:#F6F7F7}
table.ruler .name .link{display:flex;align-items:center;gap:14px}
table.ruler .name strong{font-weight:600}

/* корзина */
.cart__tbl .cart__item{display:flex;align-items:center;gap:14px;min-width:220px}
.cart__tbl .cart__item img{width:70px;height:56px;object-fit:contain;background:#F6F7F7;flex:none}
.cart__tbl .cart__item span{font:600 15px/1.35 var(--tx)}
.cart__tbl .qty{display:inline-flex}
/* Четыре цифры: спецификация калькулятора кладёт в корзину и 164 мешка,
   и больше. При 56 px «164» уже не помещалось и обрезалось. */
.cart__tbl .qty input{width:74px}
.cart__list{min-width:0}
.total-summa{display:flex;justify-content:flex-end;gap:14px;align-items:baseline;
  margin:22px 0;padding-top:16px;border-top:2px solid var(--ink);font:600 19px/1.2 var(--tx)}
.total-summa #total-summa,.total-summa span:last-child{font:700 26px/1 var(--os)}

/* сообщения движка */
p.error,.error{border:2px solid var(--wr);border-left-width:6px;padding:14px 18px;margin:0 0 20px;
  font:400 15px/1.5 var(--tx);color:var(--ink);background:var(--w)}
h5{font:600 19px/1.3 var(--tx);margin:0 0 16px}

/* прочая легаси-разметка */
.store-folders{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));margin:0;padding:0;list-style:none}
.store-folders > li::before{content:none!important}
.store-folders a{display:block;border:1px solid var(--ln);transition:border-color .15s}
.store-folders a:hover{border-color:var(--ink)}
.store-folders img{width:100%;height:180px;object-fit:cover}
.store-folders strong{display:block;padding:16px 18px;font:600 17px/1.3 var(--tx)}
.share{margin:20px 0}
.cart-auth-blocks{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.cart-auth-blocks h2{font:700 clamp(22px,2.4vw,30px)/1.1 var(--os);text-transform:uppercase;margin:0 0 18px;
  padding-bottom:14px;border-bottom:3px solid var(--ink)}
@media (max-width:900px){.cart-auth-blocks{grid-template-columns:1fr;gap:32px}}
.cart-summary,.cart-final-submit{width:100%;border-collapse:collapse;margin-top:22px}
.cart-summary td,.cart-final-submit td{padding:8px 10px;vertical-align:middle}
.cart-confirmation-details{display:grid;gap:24px;margin-bottom:28px}
.cart-confirmation-details h3{font:600 21px/1.15 var(--os);text-transform:uppercase;margin:0 0 14px}
.cart-confirmation-details .row{display:grid;grid-template-columns:minmax(140px,30%) 1fr;gap:8px 20px;padding:9px 0;border-bottom:1px solid var(--ln)}
.cart-confirmation-details .title{color:var(--mut);font:400 15px/1.4 var(--tx)}
.cart-confirmation-details .value{font:500 15px/1.4 var(--tx)}
.cart-confirmation-comment{margin:22px 0}
.cart-confirmation-comment textarea{width:100%}

/* ══ Остатки сетки Bootstrap и переполнение узких экранов ══════════════════
   Bootstrap больше не подключается, но в контенте CMS остались его классы
   колонок. Без правил они не ограничены по ширине и распирают страницу. */
[class*="col-xs-"],[class*="col-sm-"],[class*="col-md-"],[class*="col-lg-"]{
  width:100%;max-width:100%;min-width:0;padding:0;float:none}
.container-fluid,.widthfixer{width:100%;max-width:100%;padding:0;margin:0}

/* ни один элемент управления не шире своего контейнера */
input,select,textarea,button{max-width:100%}
/* Правило ширины полей в редакционном тексте задумано для старой разметки,
   но накрывало и флажки с переключателями: радиокнопка растягивалась во всю
   строку и выталкивала подпись за экран (на 390 страница ехала на 128 px). */
.rich select,.rich textarea,
.rich input[type="text"],.rich input[type="tel"],.rich input[type="email"],
.rich input[type="password"],.rich input[type="search"],.rich input[type="number"],
.rich input[type="url"],.rich input[type="date"],.rich input:not([type]){width:100%}
.userform select,.userform input[type="text"],.userform input[type="tel"],
.userform input[type="email"],.userform input[type="password"],.userform textarea{max-width:100%}

/* колонки сетки витрины не должны раздуваться содержимым */
.shop > *,.shop__main,.shop__aside,.rich,.cart__grid > *,.pdp > *{min-width:0}
.rich > *{max-width:100%}

/* форма расчёта: список файлов */
.calculation-files ul{list-style:none;margin:0;padding:0}
.calculation-files li{margin:0 0 10px;padding:0}
.calculation-files li::before{content:none!important}
.fileupload{position:relative;display:flex;gap:10px;align-items:center;flex-wrap:wrap;min-width:0}
.fileupload .file-title{flex:1 1 200px;min-width:0}
.fileupload input[type="text"]{width:100%}

@media (max-width:767px){
  table.userform,table.userform > tbody,table.userform > tbody > tr,
  table.userform > tbody > tr > th,table.userform > tbody > tr > td,
  table.userform > tr,table.userform > tr > th,table.userform > tr > td{display:block;width:100%}
  table.userform > tbody > tr > th,table.userform > tr > th{padding:14px 0 6px 0}
  table.userform > tbody > tr > td,table.userform > tr > td{padding:0 0 10px 0}
  .userform .row{grid-template-columns:1fr;gap:6px}
  .cart-confirmation-details .row{grid-template-columns:1fr;gap:4px}
  .cart-summary,.cart-final-submit,.cart-summary tr,.cart-final-submit tr,
  .cart-summary td,.cart-final-submit td{display:block;width:100%;text-align:left!important}
  .cart-summary td,.cart-final-submit td{padding:8px 0}
  .fileupload{flex-direction:column;align-items:stretch}
}

/* форма расчёта: строка «Прикрепить файл» */
.calculation-files{min-width:0}
/* Поле файла показывало родную кнопку браузера — «Choose File · No file
   chosen» по-английски посреди русской формы. Родной ввод спрятан, но
   остаётся кликабельным поверх всей рамки; надпись рисуем сами, а имя
   выбранного файла подставляет plate.js в текстовое поле рядом. */
.calculation-files .fileupload{position:relative;border:2px dashed var(--ln);
  padding:14px 16px;background:var(--w);min-height:56px;display:flex;align-items:center;
  cursor:pointer;transition:border-color .15s,background-color .15s}
.calculation-files .fileupload:hover{border-color:var(--ink);background:var(--bg)}
.calculation-files .fileupload:focus-within{border-color:var(--ink);
  box-shadow:0 0 0 3px var(--y)}
.calculation-files .file-title{display:flex;align-items:center;gap:10px;width:100%;min-width:0}
.calculation-files .file-title::before{content:"+";flex:none;width:28px;height:28px;
  display:inline-flex;align-items:center;justify-content:center;background:var(--y);
  color:var(--ink);font:600 18px/1 var(--os)}
.calculation-files .file-title span{font:600 15px/1.3 var(--os);letter-spacing:.02em;white-space:nowrap}
.calculation-files .file-title input[type="text"]{order:2;border:0;padding:0;height:auto;
  font:400 14px/1.4 var(--tx);background:transparent;color:var(--mut);min-width:0;flex:1 1 auto;
  text-overflow:ellipsis}
.calculation-files input[type="file"]{position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer}
#add-calculation-file{font:600 15px/1 var(--tx);border-bottom:2px solid var(--y);padding-bottom:3px;display:inline-block;margin-top:6px}
#add-calculation-file:hover{border-bottom-color:var(--ink)}

/* широкие таблицы прокручиваются внутри своего контейнера, а не распирают страницу */
.cart__list,.shop__main{max-width:100%}
.cart__tbl{min-width:640px}
@media (max-width:767px){
  /* на телефоне таблица заказа разворачивается карточками: ни горизонтальной
     прокрутки страницы, ни прокрутки внутри блока */
  .cart__tbl{min-width:0;display:block}
  .cart__tbl thead{display:none}
  .cart__tbl tbody{display:block}
  .cart__tbl tr{display:grid;grid-template-columns:1fr auto;gap:10px 14px;padding:16px 34px 16px 0;
    border-bottom:1px solid var(--ln);position:relative}
  .cart__tbl tr:hover{background:none}
  .cart__tbl td{display:block;border:0;padding:0;text-align:left!important}
  .cart__tbl td:first-child{display:none}
  .cart__tbl td:nth-child(2){grid-column:1/-1}
  .cart__tbl td[data-l]::before{content:attr(data-l);display:block;font:400 12px/1.3 var(--tx);
    color:var(--mut);margin-bottom:3px}
  .cart__tbl td[data-l="Сумма"]{text-align:right!important}
  .cart__tbl td.cart__del{position:absolute;top:12px;right:-8px;padding:0}
  .cart__tbl .cart__item img{width:56px;height:46px}
  .cart__tbl .cart__item{min-width:0}
}

/* ── шаги оформления заказа ───────────────────────────────────────────────── */
#stages{display:flex;flex-wrap:wrap;gap:0;margin:0 0 28px;padding:0;list-style:none;counter-reset:st;
  border-bottom:3px solid var(--ink)}
#stages li{counter-increment:st;display:flex;align-items:center;gap:10px;padding:14px 22px 14px 0;
  font:600 15px/1.2 var(--tx);color:var(--mut)}
#stages li::before{content:counter(st);display:flex;align-items:center;justify-content:center;
  width:30px;height:30px;flex:none;background:var(--ln);color:var(--mut);font:700 14px/1 var(--os)}
#stages li em{font-style:normal}
#stages li.current{color:var(--ink)}
#stages li.current::before{background:var(--y);color:var(--ink)}
#stages li.passed::before,#stages li.done::before{background:var(--ink);color:var(--w)}
@media (max-width:767px){
  #stages li{padding:10px 14px 10px 0;font-size:13.5px}
  #stages li::before{width:26px;height:26px;font-size:13px}
}

/* ── подтверждение добавления в корзину ───────────────────────────────────── */
.toast{position:fixed;right:clamp(12px,2vw,28px);bottom:clamp(12px,2vw,28px);z-index:120;
  display:none;flex-direction:column;gap:8px;max-width:min(380px,92vw);padding:18px 20px;
  background:var(--gr);color:var(--w);box-shadow:0 18px 44px rgba(14,17,19,.28)}
.toast.is-on{display:flex}
.toast b{font:600 16px/1.3 var(--tx)}
.toast span{font:400 14px/1.4 var(--tx);color:var(--mut2)}
.toast .toast__t{color:var(--y);font-weight:600}
.toast .btn{margin-top:6px;align-self:flex-start}
@media (prefers-reduced-motion:no-preference){
  .toast.is-on{animation:toast-in .22s cubic-bezier(.2,0,.2,1)}
  @keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
}
@media (max-width:520px){
  .toast{left:clamp(12px,2vw,28px);max-width:none}
}

/* ══ Оформление заказа ═════════════════════════════════════════════════════ */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:44px;align-items:start}
.checkout__form{min-width:0}
.checkout__side{min-width:0;position:sticky;top:20px}
.checkout__nav{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:30px;padding-top:22px;border-top:2px solid var(--ink)}
.checkout__agree{display:flex;flex-direction:column;gap:12px;margin-top:24px;padding:18px 20px;background:var(--bg)}
@media (max-width:1120px){
  .checkout{grid-template-columns:minmax(0,1fr);gap:30px}
  /* на шаге контактов вход для постоянных покупателей полезен сверху,
     на шагах доставки и проверки итог логичнее под содержанием */
  .checkout__side{position:static;order:-1}
  .checkout--after .checkout__side{order:1}
}

/* группа переключателей (.rad.is-on объявлен выше, в блоке полей) */
.chk-group{border:0;margin:0;padding:0;min-width:0}
.chk-group__t{padding:0;margin:0 0 12px;font:500 14px/1.2 var(--tx);color:var(--mut)}
.chk-group__b{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}

/* подсказки и ошибки поля (.inp--err объявлен выше, в блоке полей) */
.fld__h{font:400 13px/1.4 var(--tx);color:var(--mut)}
/* Пояснение под полем: не ошибка, а справка (норма, ограничение состава). */
.fld__note{display:block;margin-top:4px;font-size:12px;line-height:1.35;font-style:normal;color:var(--ink-3,#6b7280)}
.fld__err{display:block;font:500 13px/1.4 var(--tx);color:var(--wr);margin-top:2px}
.chk--err{color:var(--wr)}
/* Поля прячет только работающий скрипт. Без него покупатель должен видеть всё:
   иначе юрлицо не сможет ввести реквизиты, а доставка — адрес. */
.plate-js .jur-block.is-off{display:none}

/* пары «название — значение» */
.deflist{display:grid;grid-template-columns:minmax(120px,auto) minmax(0,1fr);gap:10px 24px;margin:0;
  font:400 15px/1.45 var(--tx)}
.deflist dt{color:var(--mut)}
.deflist dd{margin:0;font-weight:600;min-width:0;overflow-wrap:break-word}

/* вход для постоянных покупателей */
.loginbox{border:2px solid var(--ln);background:var(--w)}
.loginbox > summary{display:flex;flex-direction:column;gap:4px;padding:16px 18px;cursor:pointer;list-style:none}
.loginbox > summary::-webkit-details-marker{display:none}
.loginbox > summary b{font:600 16px/1.3 var(--tx)}
.loginbox > summary:hover{background:#FAFAFA}
.loginbox[open] > summary{border-bottom:1px solid var(--ln)}
.loginbox__b{padding:18px}
.loginbox__b .userform .row{grid-template-columns:1fr;gap:6px}
.loginbox__b input[type=submit]{height:46px;font-size:15px}

/* способы получения */
.delivery{display:flex;flex-direction:column;gap:10px}
.dopt{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border:2px solid var(--ln);
  cursor:pointer;transition:border-color .15s,background-color .15s}
.dopt:hover{border-color:#BFC4C8}
.dopt.is-on{border-color:var(--ink);background:#FAFAFA}
.dopt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink);flex:none}
.dopt__b{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.dopt__n{font:600 16px/1.3 var(--tx)}
.dopt__p{font:400 14px/1.4 var(--tx)}
.dopt__note{font:400 13px/1.4 var(--tx);color:var(--mut)}
.dopt__price{font:600 15px/1.3 var(--os);white-space:nowrap;flex:none;padding-top:2px}
.dfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
/* Перевозчик один — показываем строкой вместо списка из одного пункта. */
.dfix{margin:6px 0 0;font:600 16px/1.3 var(--tx)}
.plate-js .dfields .fld.is-off{display:none}

/* блок сводки заказа */
.sumblock{margin-top:28px}
.sumblock:first-of-type{margin-top:0}
.sumblock__h{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding-bottom:12px;margin-bottom:16px;border-bottom:2px solid var(--ink)}

/* заказ принят */
.done{max-width:760px}
.done__head{display:flex;align-items:center;gap:20px}
.done__ico{flex:none;color:var(--ok)}
.done__facts{display:grid;grid-template-columns:minmax(140px,auto) minmax(0,1fr);gap:12px 26px;
  margin:26px 0 0;padding:22px 0;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);
  font:400 16px/1.45 var(--tx)}
.done__facts dt{color:var(--mut)}
.done__facts dd{margin:0;font-weight:600}
@media (max-width:767px){
  .done__head{flex-direction:column;align-items:flex-start;gap:12px}
  .done__facts{grid-template-columns:1fr;gap:4px 0}
  .done__facts dt{margin-top:12px}
  .deflist{grid-template-columns:1fr;gap:2px}
  .deflist dt{margin-top:10px}
  .dopt{flex-wrap:wrap}
  .dopt__price{width:100%;padding-left:34px}
}

/* подсказки поиска: выбранный пункт и подсветка совпадения */
.sugg a.is-on{background:#FAFAFA;box-shadow:inset 3px 0 0 var(--y)}
.sugg mark{background:var(--y);color:var(--ink);padding:0 1px}
/* фокус на поле поиска был снят вместе с обводкой — возвращаем видимый признак */
.srch input:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--y)}
/* переключатель размера страницы движок печатает классом size */
#pager .size{order:3;margin-left:auto;font:400 14px/1 var(--tx);color:var(--mut);display:flex;gap:8px;align-items:center}
#pager .size ul{display:flex;gap:8px;align-items:center;margin:0;padding:0;list-style:none}
#pager .size li{margin:0}
#pager .size a{border-bottom:2px solid var(--y);padding-bottom:2px}
#pager .size strong{color:var(--ink)}

/* сравнение: читаемая таблица вместо инлайновых ширин */
.cmp__first{min-width:150px}
.cmp thead th{min-width:210px}
.cmp thead th,.cmp__n,.cmp__n small{white-space:normal;overflow-wrap:break-word}
/* «нет данных» серым --mut2 давало контраст 2,64 — берём читаемый серый */
.cmp__no{color:var(--mut)}
/* первый столбец не уезжает при горизонтальной прокрутке */
.cmp th[scope="row"],.cmp__first{position:sticky;left:0;z-index:1;background:var(--w)}
@media (max-width:767px){
  .cmp__first{min-width:120px}
  .cmp thead th{min-width:170px}
  .cmp th,.cmp td{padding:10px 12px;font-size:14px}
  .cmp__card img{height:110px}
}

/* формы кабинета и обратной связи */
.pform{max-width:640px}
.formgrid--1{grid-template-columns:1fr}
.fbform{max-width:760px}
.fbform__item{display:flex;align-items:center;gap:18px;padding:16px 18px;border:2px solid var(--ln);margin-bottom:22px}
.fbform__item img{flex:none;background:#F6F7F7}
@media (max-width:520px){
  .fbform__item{flex-direction:column;align-items:flex-start;gap:12px}
}

/* форма «Расчёт изделий» */
.calcform__grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.calcform__main{min-width:0}
.calcform__side{min-width:0}
@media (max-width:900px){
  .calcform__grid{grid-template-columns:minmax(0,1fr);gap:26px}
}
/* остатки бутстраповского ряда внутри .userform больше не сжимают поля */
.userform .row:not(:has(> .title)):not(:has(> .value)){display:block}

/* ── классы, оставшиеся от прежней темы, но живущие в содержимом CMS ─────── */
/* список городов на странице географии продаж */
.in-3-col{columns:3;column-gap:36px;margin:0;padding:0;list-style:none}
.in-3-col > li{break-inside:avoid;margin:0 0 8px;padding-left:0}
.in-3-col > li::before{content:none!important}
@media (max-width:900px){.in-3-col{columns:2}}
@media (max-width:560px){.in-3-col{columns:1}}
/* блок реквизитов на странице контактов */
.contacts-data{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:10px 28px;
  grid-template-columns:minmax(140px,auto) minmax(0,1fr);font:400 16px/1.5 var(--tx)}
.contacts-data > li{display:contents}
.contacts-data > li::before{content:none!important}
.contacts-data > li.main{display:block;grid-column:1/-1;margin-bottom:6px}
.contacts-data > li.main strong{font:600 clamp(19px,2vw,24px)/1.2 var(--os);text-transform:uppercase;letter-spacing:.01em}
.contacts-data > li.main i,.contacts-data > li.main b{font-style:normal;font-weight:inherit}
/* подпись строки — приглушённая, значение — обычным цветом */
.contacts-data > li > strong{font:400 15px/1.5 var(--tx);color:var(--mut)}
.contacts-data > li > strong i{font-style:normal}
.contacts-data em{font-style:normal}
.contacts-data > li > span{min-width:0;overflow-wrap:break-word}
@media (max-width:640px){
  .contacts-data{grid-template-columns:1fr;gap:0}
  .contacts-data > li > strong{margin-top:12px}
}
.phone-link{white-space:nowrap;font-weight:600}

/* ── контраст: четыре места, где текст читался хуже нормы ─────────────────── */
/* артикул в карточке был серым --mut2 на белом (2,64) */
.card__code{color:var(--mut)}
/* приглушённый текст в подвале использовал «светлый» серый для белого фона
   и на тёмной плите давал 3,79 */
.ftr .sm,.ftr .txt{color:var(--mut2)}
/* жёлтая кнопка в подвале получала цвет ссылки .ftr a (серый на жёлтом — 2,0),
   а при наведении становилась жёлтой на жёлтом */
.ftr .btn,.ftr a.btn:hover{color:var(--ink)}
.ftr .btn--dark,.ftr a.btn--dark:hover{color:var(--w)}
/* выпадающий список на тёмной плите покупки: пункты рисовались тёмным по тёмному */
.plate select option,.sec--dark select option{background:var(--w);color:var(--ink)}

/* ── просмотр фотографии крупно ───────────────────────────────────────────── */
/* Ссылка увеличения занимает всю площадку (чтобы нажималось везде), но САМ
   снимок не растягивается: правило width/height:100% стояло ниже по файлу и
   перебивало ограничение выше — фото 410x292 показывалось как 585x438. */
.pdp__strong{color:var(--ink)}

/* ── постраничность витрины ───────────────────────────────────────────────── */
.pgn{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:34px}
.pgn__list{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0;padding:0;list-style:none}
.pgn__list li{margin:0}
.pgn__list a,.pgn__list strong,.pgn__gap{display:flex;align-items:center;justify-content:center;
  min-width:46px;height:46px;padding:0 12px;border:2px solid var(--ln);font:600 15px/1 var(--tx)}
.pgn__list a:hover{border-color:var(--ink)}
.pgn__list strong{background:var(--ink);border-color:var(--ink);color:var(--w)}
.pgn__gap{border-color:transparent;color:var(--mut)}
.pgn__step{white-space:nowrap}
.pgn__size{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pgn__size .chip{height:36px;padding:0 12px}
@media (max-width:520px){
  .pgn{justify-content:center}
  .pgn__list a,.pgn__list strong,.pgn__gap{min-width:40px;height:40px;padding:0 8px;font-size:14px}
}

/* подсказки: миниатюра, артикул, цена */
.sugg a{gap:14px}
.sugg__ph{width:46px;height:36px;object-fit:contain;background:#F6F7F7;flex:none}
.sugg__t{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sugg__t b{overflow-wrap:break-word}
.sugg__n{font:400 12px/1 var(--tx);color:var(--mut2);letter-spacing:.03em}
.sugg em{font:600 14px/1 var(--os);color:var(--ink);text-transform:none;letter-spacing:0}
.sugg__all{justify-content:center!important;font:600 14px/1 var(--os)!important;letter-spacing:.06em;
  text-transform:uppercase;border-bottom:0!important;margin-top:6px;background:var(--bg)}
.sugg__all:hover{background:var(--y)}

/* ── зона нажатия на телефоне ─────────────────────────────────────────────── */
@media (max-width:900px){
  /* ссылки подвала были высотой 19 px — на палец этого мало */
  .ftr ul{gap:0}
  .ftr ul a{display:block;padding:11px 0;min-height:44px}
  .ftr ul li{margin:0}
  .hmenu a{min-height:48px;display:flex;align-items:center}
}
@media (max-width:900px){
  /* текстовые ссылки-действия тоже должны попадать под палец */
  .lnk{padding-top:12px;padding-bottom:12px}
  .ftr__bot a{display:inline-block;padding:10px 0}
}

/* никакой встроенный ролик не должен распирать страницу, даже вне .rich */
iframe,video,embed,object{max-width:100%}

/* объединение корзин */
.mergeact{display:flex;gap:12px;flex-wrap:wrap}
.mergeact form{margin:0}
.mergebox{margin-bottom:8px}
.mergesum{display:flex;align-items:baseline;justify-content:flex-end;gap:14px;
  padding-top:14px;margin-top:4px;border-top:2px solid var(--ink)}

/* карточка заказа в кабинете */
.ordhead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:start;margin-bottom:26px}
.ordhead .deflist{font-size:16px}
.ordhead__doc{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
@media (max-width:767px){.ordhead{grid-template-columns:1fr}}

/* ── карты проезда ────────────────────────────────────────────────────────
   Конструктор Яндекса рисует iframe выше запрошенного: две карты занимали
   1204 px и выдавливали контакты за первый экран. Ограничиваем сверху. */
.rich iframe[src*="api-maps.yandex"],
.rich ymaps,
iframe[src*="yandex.ru/map"]{max-height:300px;height:300px;display:block;width:100%;border:1px solid var(--ln)}
@media (max-width:767px){
  .rich iframe[src*="api-maps.yandex"],
  iframe[src*="yandex.ru/map"]{max-height:220px;height:220px}
}

/* ── липкая полоска при прокрутке ─────────────────────────────────────────
   К экрану крепится не вся шапка (104 px), а строка в 58 px: каталог, поиск,
   телефон и значки. Выезжает сдвигом, без изменения размеров и мигания. */
.stick{position:fixed;top:0;left:0;right:0;z-index:60;background:var(--w);
  border-bottom:1px solid var(--ln);transform:translateY(-100%);
  transition:transform .25s ease;will-change:transform;visibility:hidden}
.stick.is-on{transform:translateY(0);visibility:visible}
.stick__in{display:flex;align-items:center;gap:clamp(10px,1.2vw,20px);height:58px;padding:0 var(--pad);
  max-width:var(--maxw);margin:0 auto}
.stick__logo{flex:none;line-height:0}
.stick__logo img{display:block;width:112px;height:auto}
.stick__cat{flex:none;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 16px;border:0;
  background:var(--y);color:var(--ink);font:600 13px/1 var(--os);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:filter .15s ease}
.stick__cat:hover{filter:brightness(.93)}
.stick__srch{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:120px;max-width:620px;
  height:38px;border:0;background:#F1F2F3;margin:0}
.stick__srch input{flex:1;min-width:0;height:100%;padding:0 14px;border:0;background:transparent;
  font:400 14px/1 var(--tx);-webkit-appearance:none}
.stick__srch input::placeholder{color:var(--mut)}
.stick__srch input:focus{outline:0}
.stick__srch button{flex:none;width:44px;height:100%;display:flex;align-items:center;justify-content:center;
  border:0;background:var(--y);color:var(--ink);cursor:pointer;transition:filter .15s ease}
.stick__srch button:hover{filter:brightness(.93)}
.stick__srch:focus-within{background:var(--w);outline:3px solid var(--ink);outline-offset:2px;
  box-shadow:0 0 0 6px var(--y)}
.stick__tel{flex:none;font:600 16px/1 var(--os);white-space:nowrap}
.stick__acts{flex:none;display:flex;align-items:center;gap:2px}
.stick__acts .ico{width:40px;height:40px}
@media (max-width:1220px){
  .stick__logo,.stick__cat span{display:none}
  .stick__tel{font-size:15px}
}
@media (max-width:767px){
  .stick__in{height:52px;gap:8px}
  .stick__tel{display:none}
  .stick__srch{height:36px}
}
/* Отдельного правила для .stick не нужно: глобальный блок
   prefers-reduced-motion выше гасит переходы у всех элементов. */

/* ── поля поиска: окончательный вид ───────────────────────────────────────
   Общее правило движка `input[type="search"]` объявлено ниже по файлу и при
   равной специфичности побеждало: поле получало белый фон и рамку 2 px, из-за
   чего у поиска оказывалось две несогласованные обводки. Блок стоит в конце
   намеренно — он должен идти после правил движка. */
.hdr__srch input[type="search"],
.stick__srch input[type="search"],
.srch input[type="search"]{
  border:0;background:transparent;max-width:none;border-radius:0;
  -webkit-appearance:none;appearance:none;color:var(--ink)}
/* Высота задаётся явно. height:100% работает только там, где у контейнера
   высота фиксирована: в выпадающей панели её нет, и поле схлопывалось
   до 27 px при кнопке 64 px рядом. */
.hdr__srch input[type="search"],
.stick__srch input[type="search"]{height:100%}
.hdr__srch input[type="search"]{padding:0 16px;font:400 15px/1 var(--tx)}
.stick__srch input[type="search"]{padding:0 14px;font:400 14px/1 var(--tx)}
.srch input[type="search"]{height:64px;padding:0 18px;font:400 20px/1 var(--tx)}
@media (max-width:767px){
  /* та же высота, что у кнопки рядом */
  .srch input[type="search"]{height:52px;font-size:17px}
}
.hdr__srch input[type="search"]:focus,
.stick__srch input[type="search"]:focus,
.srch input[type="search"]:focus{outline:0;border:0;box-shadow:none}
.hdr__srch input[type="search"]::placeholder,
.stick__srch input[type="search"]::placeholder,
.srch input[type="search"]::placeholder{color:var(--mut)}
/* крестик очистки в вебките рисуется поверх заливки — убираем */
.hdr__srch input[type="search"]::-webkit-search-decoration,
.hdr__srch input[type="search"]::-webkit-search-cancel-button,
.stick__srch input[type="search"]::-webkit-search-decoration,
.stick__srch input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none}
/* выпадающая панель: то же плоское поле, что и в строке */
.srch{align-items:stretch}
.srch input[type="search"]{background:#F1F2F3}
.srch:focus-within input[type="search"]{background:var(--w);box-shadow:inset 0 0 0 2px var(--ink)}

/* Мегаменю живёт внутри шапки. Когда шапка ушла вверх, кнопка «Каталог»
   в липкой полоске открывала его на 1497 px выше видимой области — покупатель
   не видел никакой реакции. Пока полоска на экране, панель крепится к ней. */
.stick.is-on ~ .hdr #mega.is-open,
.stick.is-on ~ .hdr #hdrsearch.is-open{
  position:fixed;top:58px;left:0;right:0;z-index:59;
  max-height:calc(100vh - 58px);overflow:auto;
  border-top:1px solid var(--ln);box-shadow:0 18px 40px rgba(14,17,19,.16)}
@media (max-width:767px){
  .stick.is-on ~ .hdr #mega.is-open,
  .stick.is-on ~ .hdr #hdrsearch.is-open{top:52px;max-height:calc(100vh - 52px)}
}

/* Карты проезда вставляются скриптом уже после отрисовки страницы. Без
   заранее отведённого места контакты уезжали вниз на 322 px (CLS 0,21).
   Высота совпадает с потолком самого iframe. */
.mapbox{min-height:300px;margin:18px 0;background:var(--bg)}
@media (max-width:767px){ .mapbox{min-height:220px} }

/* Кегль поля поиска на телефоне. Ниже 16 px Safari на iOS увеличивает всю
   страницу при постановке курсора в поле. Правило стоит в конце намеренно:
   объявления полей поиска выше по файлу перебивали его при равной
   специфичности — та же ловушка порядка, что и с input[type=search] движка. */
@media (max-width:767px){
  .hdr__srch input[type="search"],
  .stick__srch input[type="search"],
  .srch input[type="search"]{font-size:16px}
}

/* ── мобильные исправления ────────────────────────────────────────────────── */
@media (max-width:767px){
  /* Крошки занимали 116 px и пять строк — пятую часть первого экрана телефона.
     Оставляем только последний переход: этого хватает, чтобы вернуться. */
  /* Ссылка возврата — 44 px по высоте: под палец. Собственные поля полосы
     на столько же убраны, поэтому она даже ниже прежней. */
  .crumbs{padding:0 var(--pad);gap:8px;font-size:13px;flex-wrap:nowrap;overflow:hidden}
  .crumbs li{display:none}
  .crumbs li:nth-last-child(2){display:flex;min-width:0}
  .crumbs li:nth-last-child(2)::before{content:"←";margin-right:6px;color:var(--mut)}
  .crumbs li:nth-last-child(2)::after{content:none}
  .crumbs li:nth-last-child(2) a{min-height:44px;display:flex;align-items:center;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* Мегаменю было выше окна на 352 px без собственной прокрутки — нижние
     разделы каталога оставались недосягаемы. */
  #mega,#hdrmenu{max-height:calc(100vh - 74px);overflow-y:auto;-webkit-overflow-scrolling:touch}

  /* Область нажатия. На странице «География продаж» 87 ссылок городов
     имели высоту 23 px при норме 44. */
  .in-3-col > li > a,
  .hmenu a,
  .ftr__cols a{display:block;min-height:44px;display:flex;align-items:center}
  .chip{min-height:44px}
  .ico{min-width:44px;min-height:44px}
  /* Флекс-контейнер выбрасывает пробельные узлы между вложенными элементами:
     ссылка «Оценка <b>5,0</b> из 5» на телефоне читалась как «Оценка5,0из 5».
     Возвращаем интервал через gap и разрешаем перенос длинным ссылкам. */
  .lnk{min-height:44px;display:inline-flex;align-items:center;flex-wrap:wrap;gap:0 .28em}
}

/* ── карточка товара: вкладки и ключевые характеристики ───────────────────── */
/* Основные характеристики идут во всю ширину перед вкладками: в правой
   колонке они делали её на 200 px выше галереи и оставляли мёртвую полосу. */
.pdp__key{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 40px;margin:0;font:400 15px/1.45 var(--tx)}
.pdp__key > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 20px;
  align-items:baseline;padding:11px 0;border-bottom:1px solid var(--ln)}
.pdp__key dt{color:var(--mut);min-width:0}
.pdp__key dd{margin:0;font-weight:600;min-width:0;overflow-wrap:break-word;text-align:right}
.pdp__main{padding-bottom:0}

/* Полоса вкладок липнет к верху при прокрутке длинной таблицы характеристик */
.pdp__tabs{padding-top:0}
.pdp__tabs .tabs{position:sticky;top:0;z-index:20;background:var(--bg);margin-bottom:0}
.tabp{padding:28px 0 4px;min-width:0}
.tabp__h{display:none}            /* с JavaScript заголовок дублирует ярлык вкладки */
.tabp + .tabp{border-top:1px solid var(--ln)}
/* Без JavaScript видны все панели подряд — тогда заголовки нужны,
   а полоса ярлыков бесполезна и скрывается. */
html:not(.plate-ready) .pdp__tabs .tabs{display:none}
html:not(.plate-ready) .tabp__h{display:block;margin-bottom:16px}
html.plate-ready .tabp + .tabp{border-top:0}
.pdp__rich > *:first-child{margin-top:0}
.pdp__ship .deflist{margin-bottom:18px}
.pdp__rateline{padding-top:18px;padding-bottom:18px}
@media (max-width:767px){
  .pdp__tabs .tabs{margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));
    padding:0 var(--pad);scrollbar-width:none}
  .pdp__tabs .tabs::-webkit-scrollbar{display:none}
  .tabp{padding:22px 0 4px}
  .pdp__key{gap:8px 16px}
}
@media (max-width:600px){ }

/* ── карточка товара: соразмерность блоков ────────────────────────────────
   На 1920 площадка снимка была 731 px при кадре 320 px — 411 px пустоты,
   блок цены растягивался на 1052 px, а колонка подписей в таблице занимала
   887 px под слово «Ширина». Ограничиваем по содержимому. */
.spec th{width:34%;max-width:380px}
.spec td{min-width:0}
/* Оценка — обычный элемент строки, а не блок у правого края */
.pdp__rateline .row{justify-content:flex-start;flex-wrap:wrap;gap:26px}
.pdp__rateline .rate{margin-left:auto}
@media (max-width:900px){
  .pdp__gal,.pdp__info > .plate,.pdp__key{max-width:none}
  .spec th{width:44%;max-width:none}
  .pdp__rateline .rate{margin-left:0}
}

/* ══════════════════════════════════════════════════════════════════════════
   Карточка товара: шапка, галерея, коммерческая зона, связи
   Собрана заново. Предыдущий набор правил накапливался заплатами и разошёлся
   по всему файлу; здесь один связный блок, который идёт последним и потому
   выигрывает по порядку. Мёртвые правила прежней карточки снимаются отдельно,
   после того как новая разметка проверена на живых страницах.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── шапка карточки ─────────────────────────────────────────────────────── */
/* Заголовок вынесен из правой колонки на всю ширину: покупатель сначала
   понимает, что перед ним, и лишь затем видит фотографию и цену. Кегль
   сдержанный — это каталог, а не обложка. */
.pdphead{margin:0 0 26px;max-width:none}
.pdphead__t{margin:8px 0 0;font:700 clamp(23px,2.1vw,32px)/1.14 var(--os);letter-spacing:.004em}
/* Техническая подпись занимает ровно две строки. Пока едет Plex, подменный
   шрифт даёт другую ширину, подпись переходила с трёх строк на две, и вся
   карточка прыгала вверх на 25 px (CLS 0,301). Высота задана заранее, текст
   обрезается по второй строке — целиком он есть во вкладке «Описание». */
.pdphead__sub{margin:12px 0 0;max-width:49.2em;color:var(--mut);font:400 16px/1.55 var(--tx);
  min-height:calc(2 * 1.55em)}
.pdphead__rate a{border-bottom:1px solid var(--ln)}
.pdphead__rate a:hover{border-bottom-color:var(--ink)}

/* ── сетка карточки ─────────────────────────────────────────────────────── */
/* Верхняя зона карточки.
   Первая версия сетки лечила горизонтальный коридор (44 px на 1280, 289 на
   1920, 569 на 2560) и вылечила его. Но характеристики и документы остались
   ПОД галереей, и вертикаль разъехалась: на 1366 левая колонка выросла до
   872 px, коммерческая заканчивалась на 378, а под ней зияла пустота 494 px.
   Правая половина экрана после блока покупки оставалась пустой.

   Теперь колонок три и каждая несёт своё:
     1  галерея,
     2  коммерческий блок (сценарий, покупка, действия),
     3  краткие характеристики и документы одной колонкой.
   Высота верхней зоны равна высоте самой высокой колонки — галереи, и
   следующий раздел начинается сразу за ней, а не через полэкрана пустоты.
   Замеры после правки — в .data/reports/pdp-geometry.md */
/* Одна колонка задана и именами областей. Без них `grid-area:gal` у детей
   создавал неявные именованные линии, и сетка раскладывалась в три колонки
   (0px 0px 232px при окне 320) — галерея становилась уже экрана и вылезала
   за него. Порядок на узком экране: галерея, покупка, характеристики
   и документы — покупатель видит цену и кнопку сразу под фотографией. */
.pdp{display:grid;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"gal" "info" "aside";gap:28px;align-items:start}
.pdp__gal{grid-area:gal;min-width:0}
.pdp__info{grid-area:info;min-width:0;display:flex;flex-direction:column;gap:20px}
.pdp__aside{grid-area:aside;min-width:0;display:grid;gap:26px 40px;align-content:start}
.pdp__sideb{min-width:0}

/* 900…1179 — две колонки: галерея и покупка сверху, характеристики и
   документы полосой во всю ширину под ними. Полоса широкая, поэтому две
   секции встают рядом, а не столбиком, и пустоты под покупкой не остаётся. */
@media (min-width:900px){
  .pdp{grid-template-columns:minmax(0,1fr) minmax(330px,1.02fr);
    grid-template-areas:"gal info" "aside aside";gap:30px 40px}
  .pdp__info{max-width:640px}
  .pdp__aside{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  /* Уже с 900 px коммерческая колонка проектного изделия выше галереи
     (замер на 1024: 809 против 422) — полоса во всю ширину оставляла под
     галереей 387 px пустоты. Здесь боковая колонка встаёт под галерею и
     добирает высоту: та же карточка даёт разбег 70 px. */
  .pdp--project,.pdp--asidebelow{grid-template-areas:"gal info" "aside info";
    grid-template-rows:auto 1fr}
  .pdp--project .pdp__aside,.pdp--asidebelow .pdp__aside{grid-template-columns:minmax(0,1fr)}
  .pdp--noaside{grid-template-areas:"gal info"}
}
/* От 1180 px характеристики и документы уходят в третью колонку.
   Ширина колонок задана долями, поэтому лишней ширине всегда есть куда деться:
   пустой правой трети не возникает ни на 1366, ни на 1920, ни на 2560. */
/* От 1180 px колонок три, и порядок их — порядок решения покупателя:
   что это выглядит (галерея), что это такое (характеристики и документы),
   сколько стоит и как купить (коммерческий блок справа).
   Раньше цена стояла посередине, между фотографией и характеристиками, и
   взгляд заканчивал движение в центре страницы, а не на действии.
   Пропорции близки к 5/3/4 из двенадцати. */
@media (min-width:1180px){
  .pdp{grid-template-columns:minmax(0,1.05fr) minmax(230px,0.72fr) minmax(320px,0.95fr);
    grid-template-areas:"gal aside info";gap:30px 36px}
  .pdp__info{max-width:none}
  .pdp__aside{grid-template-columns:minmax(0,1fr)}
  /* Товар без характеристик и без документов: третьей колонке нечего нести,
     поэтому её просто нет — иначе справа остался бы пустой столбец. */
  .pdp--noaside{grid-template-columns:minmax(0,1fr) minmax(340px,1.1fr);
    grid-template-areas:"gal info"}
  /* Проектное изделие: коммерческая колонка несёт сценарий подбора и форму
     покупки и вырастает до 575…858 px, тогда как галерея (254…513) и
     характеристики (156…477) короткие. Замер на 1366: при трёх колонках
     справа оставалось 583 px пустоты. Поэтому здесь колонок две, а галерея
     и характеристики складываются в одну — высоты сходятся. */
  .pdp--project,.pdp--asidebelow{grid-template-columns:minmax(0,1.14fr) minmax(360px,1fr);
    grid-template-areas:"gal info" "aside info";grid-template-rows:auto 1fr}
  .pdp--project .pdp__aside,.pdp--asidebelow .pdp__aside{grid-template-columns:minmax(0,1fr)}
}
/* От 1500 px проектному изделию хватает трёх колонок: коммерческий блок
   становится шире и от этого ниже (650…676 вместо 858), а галерея с
   характеристиками расходятся по разным колонкам. Замер разбега высот на 1920:
   две колонки дают 431…534 px, три — 228…246. Поэтому здесь переключаемся. */
@media (min-width:1500px){
  .pdp{grid-template-columns:minmax(0,5fr) minmax(250px,3fr) minmax(340px,4fr);gap:34px 40px;
    grid-template-areas:"gal aside info"}
  .pdp--noaside{grid-template-columns:minmax(0,1fr) minmax(380px,1.05fr);
    grid-template-areas:"gal info"}
  /* Проектное изделие на широком экране: те же три колонки. Двухколонный
     вариант проверен и проигрывает — галерея растягивается на 909 px, страница
     вырастает до 1059…1104 px, а разбег высот становится 319…428 против
     266…376 у трёх колонок. */
  .pdp--project{grid-template-columns:minmax(0,5fr) minmax(250px,3fr) minmax(360px,4.2fr);
    grid-template-areas:"gal aside info";grid-template-rows:auto}
  .pdp--asidebelow{grid-template-columns:minmax(0,1.14fr) minmax(380px,1fr);
    grid-template-areas:"gal info" "aside info"}
}
/* Верхняя зона и техническая часть не растягиваются до бесконечности:
   таблица характеристик шириной 2464 px на 2560 не читается. */
@media (min-width:1900px){
  .pdp,.pdp__tabs .tabs,.pdp__tabs .tabp,.solrel,.relblock > *,.pdp__rateline > *{
    max-width:var(--maxw);margin-left:auto;margin-right:auto}
}
.pdp__docs-h{margin:0 0 6px;font:600 13px/1 var(--os);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}
.docs__more{padding:13px 0}

/* ── галерея ────────────────────────────────────────────────────────────── */
/* Постоянная геометрия кадра: пропорция задана заранее, поэтому смена
   фотографии не двигает страницу. object-fit:contain — товар не обрезается. */
.gal{display:flex;flex-direction:column;gap:12px;min-width:0}
/* Свайп по кадру браузер отдавал прокрутке: горизонтальное движение пальцем
   гасилось pointercancel, и фотография не листалась. pan-y оставляет
   вертикальную прокрутку странице, а горизонтальный жест — галерее. */
.gal__stage{position:relative;border:1px solid var(--ln);background:var(--w);touch-action:pan-y}
/* min-height вместе с aspect-ratio задаёт и минимальную ширину: 240px × 4/3
   это 320 px. На узком экране кадр из-за этого не мог сжаться до колонки.
   min() отпускает высоту, когда ширина колонки меньше. */
.gal__frame{margin:0;aspect-ratio:4/3;min-height:min(240px,75vw);padding:18px;
  display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Кадр держит постоянную геометрию, но снимок не растягивается выше
   собственного размера: --iw/--ih ставит сервер и обновляет переключение. */
.gal__frame img{width:100%;height:100%;object-fit:contain;
  max-width:min(100%,var(--iw,100%));max-height:min(100%,var(--ih,100%));margin:auto}
.gal--empty .gal__frame img{width:auto;height:auto;max-width:55%;opacity:.45}
/* Фирменная заглушка «изображение готовится» рисует собственную рамку и
   жёлтую метку, поэтому кадру галереи внутренний отступ не нужен, а
   гасить её не надо: это не служебная картинка, а состояние карточки. */
/* Заглушку нельзя растягивать ни в одном месте показа: у карточки, каталога,
   поиска и сравнения кадры разной формы. contain держит пропорции всегда. */
img[src*="/nophoto-"]{object-fit:contain;object-position:center;background:var(--bg)}
.gal__frame--ph{padding:0;border:0}
.gal--empty .gal__frame--ph img{width:100%;height:100%;max-width:none;
  object-fit:contain;object-position:center;opacity:1}
.gal__none{margin:10px 0 0;color:var(--mut)}

.gal__nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:56px;
  border:0;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px var(--ln);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--ink);transition:background-color .15s}
.gal__nav:hover{background:var(--y)}
.gal__nav svg{width:22px;height:22px}
.gal__nav--prev{left:0}
.gal__nav--next{right:0}
.gal__nav[hidden]{display:none}

.gal__count{position:absolute;right:10px;bottom:10px;padding:5px 10px;
  background:rgba(14,17,19,.82);color:#fff;font:600 13px/1 var(--tx);letter-spacing:.02em}
.gal__zoom{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;
  min-height:44px;padding:0 14px;background:rgba(14,17,19,.82);color:#fff;font:500 13px/1 var(--tx);cursor:zoom-in;
  transition:background-color .15s,color .15s}
.gal__zoom:hover{background:var(--y);color:var(--ink)}
.gal__zoom svg{width:16px;height:16px}
.gal__zoom[hidden]{display:none}

/* Одна горизонтальная лента вместо трёх рядов миниатюр. */
.gal__strip{position:relative;display:flex;align-items:center;gap:6px;min-width:0}
.gal__thumbs{display:flex;gap:8px;margin:0;padding:2px 0;list-style:none;
  flex:1 1 auto;min-width:0;overflow-x:auto;scroll-behavior:smooth;
  scrollbar-width:thin;overscroll-behavior-x:contain}
.gal__thumbs::-webkit-scrollbar{height:4px}
.gal__thumbs::-webkit-scrollbar-thumb{background:var(--ln)}
.gal__thumbs li{margin:0;flex:0 0 auto}
.gal__thumbs a{display:block;width:78px;aspect-ratio:4/3;border:2px solid var(--ln);
  background:var(--w);overflow:hidden;transition:border-color .15s}
.gal__thumbs a:hover{border-color:var(--mut)}
.gal__thumbs a.is-on{border-color:var(--ink)}
.gal__thumbs img{width:100%;height:100%;object-fit:cover}
.gal__slide{flex:none;width:26px;height:60px;border:1px solid var(--ln);background:var(--w);
  cursor:pointer;font:400 20px/1 var(--os);color:var(--mut);transition:color .15s,border-color .15s}
.gal__slide:hover{color:var(--ink);border-color:var(--ink)}
.gal__slide[hidden]{display:none}
.gal--single .gal__strip{display:none}

/* ── полноэкранный просмотр ─────────────────────────────────────────────── */
/* Как и на кадре карточки: горизонтальный жест уходил прокрутке и гасился
   pointercancel, поэтому листание пальцем не работало. */
.lb{touch-action:pan-y;position:fixed;inset:0;z-index:1200;background:rgba(14,17,19,.95);
  display:flex;flex-direction:column}
.lb[hidden]{display:none!important}
.lb__bar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 16px;color:#fff;font:400 14px/1.3 var(--tx)}
.lb__t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mut2)}
.lb__cnt{flex:none;font-weight:600}
.lb__close{flex:none;width:44px;height:44px;border:0;background:transparent;color:#fff;
  cursor:pointer;font:400 26px/1 var(--os)}
.lb__close:hover{color:var(--y)}
.lb__fig{flex:1 1 auto;margin:0;min-height:0;position:relative;
  display:flex;align-items:center;justify-content:center;padding:0 16px 20px}
.lb__fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
/* Режим чертежа: показываем в натуральную величину и даём прокрутку.
   Листание пальцем здесь выключено (см. plate.js) — горизонтальный жест
   отдан прокрутке самого чертежа. */
.lb--doc{touch-action:auto}
.lb--doc .lb__fig{display:block;overflow:auto;-webkit-overflow-scrolling:touch;padding:0 0 20px}
.lb--doc .lb__fig img{max-width:none;max-height:none;min-width:880px;width:auto;height:auto;
  margin:0 auto;background:var(--w)}
.lb--doc .lb__nav{display:none}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:68px;border:0;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background-color .15s}
.lb__nav:hover{background:var(--y);color:var(--ink)}
.lb__nav svg{width:24px;height:24px}
.lb__nav--prev{left:8px}
.lb__nav--next{right:8px}
.lb__nav[hidden]{display:none}
body.lb-open{overflow:hidden}

/* ── проектный сценарий ─────────────────────────────────────────────────── */
/* Графитовая плоскость закреплена за сценарием подбора: так она обозначает
   смысл, а не просто заливает правую колонку. */
.pmode{background:var(--gr);color:#fff;padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.pmode__kick{font:600 12px/1 var(--os);letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.pmode__t{margin:0;font:400 16px/1.55 var(--tx);color:#E7E9EA}
.pmode__act{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.pmode__note{margin:0;font:400 13px/1.45 var(--tx);color:var(--mut2)}
.pmode .btn--ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.pmode .btn--ghost:hover{background:#fff;color:var(--ink)}
.pmode .lnk{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.pmode .lnk:hover{border-bottom-color:var(--y);color:var(--y)}

/* ── коммерческая зона ──────────────────────────────────────────────────── */
.buy{border:2px solid var(--ink);background:var(--w);padding:22px 24px;
  display:flex;flex-direction:column;gap:16px}
.buy__lead{margin:0;font:400 14px/1.45 var(--tx);color:var(--mut)}
.buy__top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.buy__top .prc--lg{font-size:clamp(28px,3vw,38px)}
.buy__old{color:var(--mut);font:400 17px/1 var(--tx)}
.buy__unit{font:400 13px/1.4 var(--tx);color:var(--mut)}
/* --mut2 на светло-сером поле блока покупки даёт 2,37:1 при норме 4,5:1 —
   строка «с НДС 22 %» была на грани читаемости. */
.buy__vat{color:var(--mut)}
.buy__ctl{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.buy__units{min-width:180px}
/* Светлый серый годится на тёмном фоне, а здесь фон белый: #9AA0A8 давал
   отношение 2,64 при норме 4,5. Основной приглушённый — 4,55. */
.buy__u{font:400 14px/1 var(--tx);color:var(--mut);white-space:nowrap}
.buy__go{flex:0 1 210px}
.buy__rules{margin:0;font:500 14px/1.4 var(--tx);color:var(--ink)}
.buy__after,.buy__why{margin:0;font:400 13px/1.5 var(--tx);color:var(--mut)}
.buy__why{font-size:15px;line-height:1.55;max-width:37.2em}
/* Прямая покупка проектного изделия существует, но не спорит с подбором. */
.buy--second{border:1px solid var(--ln);background:var(--bg)}

/* ── закреплённая полоса покупки (телефон и планшет) ─────────────────────
   Замер карточки на 390×844: цена 927, кнопка «Купить» 1194…1246 — покупка
   на третьей странице прокрутки. На 768×1024 кнопка 1220…1272. Полоса
   повторяет приём нижней полосы фильтра (.fact) и появляется, только когда
   блок .buy ушёл с экрана; класс is-on ставит plate.js.

   display:none объявлен ВНЕ медиазапроса намеренно: на широком экране
   полосу нельзя показать даже классом — там кнопка «Купить» видна в первом
   экране (замер 1366: 723…775 при окне 768). */
.buybar{position:fixed;left:0;right:0;bottom:var(--cc-h,0px);z-index:110;display:none;
  align-items:center;gap:14px;padding:10px var(--pad);
  background:var(--w);border-top:2px solid var(--ink);
  box-shadow:0 -10px 26px rgba(14,17,19,.16)}
.buybar__p{display:flex;flex-direction:column;gap:2px;min-width:0}
.buybar__p > [data-buybar-price]{font:700 21px/1.05 var(--os);color:var(--ink);white-space:nowrap}
.buybar__p--ask{font:600 15px/1.2 var(--os);color:var(--ink)}
.buybar__u{font:400 12px/1.2 var(--tx);color:var(--mut)}
.buybar__go{flex:1 1 auto;min-width:0;height:48px;padding:0 16px;white-space:nowrap}
@media (max-width:900px){
  .buybar.is-on{display:flex}
  /* Полоса перекрывает 68 px низа страницы: подвал и последняя строка
     содержимого не должны под неё уходить. Величину отдаём переменной —
     нижнее поле body складывается из неё и высоты полосы согласия
     (см. html[data-cc="on"] body), иначе два правила одинакового веса
     затирали бы друг друга. */
  html.has-buybar{--buybar-h:68px}
  /* Уведомление корзины появляется в том же углу — поднимаем над полосой. */
  html.has-buybar .toast{bottom:calc(var(--cc-h,0px) + 78px)}
}
@media (max-width:400px){
  .buybar{gap:10px;padding:8px var(--pad)}
  .buybar__p > [data-buybar-price]{font-size:19px}
  .buybar__go{padding:0 12px}
}
.buy--second .prc--lg{font-size:clamp(22px,2.2vw,27px)}
.buy--second .btn{background:transparent;box-shadow:inset 0 0 0 2px var(--ink)}
.buy--second .btn:hover{background:var(--ink);color:#fff}
.buy--ask{border:1px solid var(--ln)}

/* ── действия карточки ──────────────────────────────────────────────────── */
.pdp__act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0}

/* ── вкладки и полноширинные полосы карточки ────────────────────────────── */
.pdp__tabs{margin:44px calc(-1 * var(--pad)) 0;background:var(--bg);padding-top:0}
.pdp__rateline{margin:0 calc(-1 * var(--pad));padding-top:18px;padding-bottom:18px;
  border-top:1px solid var(--ln)}

/* ── связанное решение ──────────────────────────────────────────────────── */
.solrel{margin:0 calc(-1 * var(--pad));background:var(--bg);
  display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:36px;align-items:start}
.solrel__t{margin:8px 0 0}
.solrel__lead{margin:12px 0 0;max-width:42em;color:var(--mut);font:400 16px/1.55 var(--tx)}
.solrel__act{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px}
.solrel__h{margin:0 0 12px;font:600 13px/1 var(--os);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;
  font:400 15px/1.45 var(--tx)}
.ticks li{position:relative;padding-left:20px}
.ticks li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--y)}

/* ── связанные позиции ──────────────────────────────────────────────────── */
.relblock{margin:0 calc(-1 * var(--pad));border-top:1px solid var(--ln)}
.relblock__note{margin:-14px 0 20px;color:var(--mut);max-width:48em}

@media (max-width:900px){
  .pdp__gal,.pdp__info{max-width:none}
  .solrel{grid-template-columns:1fr;gap:26px}
  .pdphead__sub{font-size:15px}
}
@media (max-width:600px){
  .buy,.pmode{padding:18px 16px}
  .buy__go{flex:1 1 100%}
  .gal__frame{padding:12px;min-height:min(200px,72vw)}
  .gal__thumbs a{width:66px}
  .lb__fig{padding:0 8px 14px}
  .lb__nav{width:42px;height:56px}
}

/* ══════════════════════════════════════════════════════════════════════════
   Подбор и расчёт: витрина направлений и страница направления
   ══════════════════════════════════════════════════════════════════════════ */
.solhub__lead{max-width:46em;margin:0 0 30px}   /* 52,8em при кегле 19 px давало 94 знака в строке */

/* Четыре направления. Не разноцветные плитки маркетплейса: та же графитовая
   геометрия «Плиты». Объект идёт слева от текста, а не над ним: так все
   четыре задачи помещаются в полтора экрана, а не в три. */
/* Ширина витрины ограничена: без ограничения на 2560 карточка растёт до
   1230 px, а самый крупный исходник — 1000 px, и снимок пришлось бы тянуть. */
.dirs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  margin:0 auto;padding:0;list-style:none;background:var(--ln);max-width:1760px}
.dirs li{margin:0;display:flex}
.dir{display:flex;width:100%;margin:0}
/* Изображение стоит над текстом во всю ширину карточки, а не полосой 200 px
   слева. В узкой колонке снимок объекта и фрагмент чертежа 1400x365
   превращались в вертикальный обрезок 200x297 — по нему нельзя было понять,
   что показано. Во всю ширину карточки это 640x360 на 1366. */
.dir__a{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;width:100%;background:var(--w);
  border-top:4px solid transparent;transition:background-color .15s,border-color .15s}
.dir__a:hover{background:var(--bg);border-top-color:var(--y)}
.dir__a:focus-visible{outline:3px solid var(--y);outline-offset:-3px}
/* Кадр постоянного отношения: снимок не двигает вёрстку, когда доедет. */
.solvis{margin:0;background:var(--gr);overflow:hidden;display:flex;align-items:center}
.solvis img{width:100%;height:100%;object-fit:cover;object-position:center}
.dir__vis{aspect-ratio:16/9;border-bottom:1px solid var(--ln)}
/* Значок направления рисуется в своей пропорции и не растягивается. */
.dir__vis.solvis--icon{aspect-ratio:auto;padding:18px 20px;background:var(--bg)}
.dir__vis.solvis--icon img{width:100%;max-width:320px;height:auto;margin:0 auto;display:block}
/* Рендер изделия на однотонном фоне кадрировать нельзя — обрежется изделие. */
.solvis--contain{background:var(--bg)}
.solvis--contain img{object-fit:contain;padding:8px}
.solvis--scene{padding:10px 12px;background:var(--bg)}
.solvis--scene .scn{width:100%}
.dir__body{display:flex;flex-direction:column;gap:9px;padding:20px 26px 22px;min-width:0}
.dir__kick{font:600 12px/1 var(--os);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.dir__t{margin:0;font:700 clamp(18px,1.35vw,21px)/1.2 var(--os);color:var(--ink)}
.dir__lead{margin:0;font:400 15px/1.55 var(--tx);color:var(--mut);max-width:36em}
.dir__io{font:400 13px/1.5 var(--tx);color:var(--mut);max-width:44em}
.dir__io b{color:var(--ink);font-weight:600}
.dir__go{margin-top:auto;padding-top:14px;font:600 13px/1.3 var(--os);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}
.dir__go::after{content:" →"}
.dir__go--ask{color:var(--mut)}
@media (max-width:1100px){.dirs{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.solvis{aspect-ratio:16/9}.solvis--scene{aspect-ratio:2/1}}

.solhub__how{margin:0 calc(-1 * var(--pad));background:var(--bg)}
.steps{counter-reset:s;list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px}
.steps li{counter-increment:s;position:relative;padding-top:44px;
  font:400 15px/1.55 var(--tx);color:var(--mut)}
.steps li::before{content:counter(s);position:absolute;top:0;left:0;
  width:32px;height:32px;background:var(--y);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font:700 16px/1 var(--os)}
.steps b{color:var(--ink);font-weight:600}

.solhub__any{margin:0 calc(-1 * var(--pad));border-top:1px solid var(--ln)}
.anycase{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px;align-items:center}
.anycase__t{margin:8px 0 0}
.anycase__p{margin:12px 0 0;color:var(--mut);font:400 16px/1.55 var(--tx);max-width:44.4em}
.anycase__act{display:flex;align-items:center;gap:20px;flex-wrap:wrap}

/* ── страница направления ───────────────────────────────────────────────── */
.dirpage__lead{max-width:52.8em;margin:0 0 24px}
.dirpage__ctx{margin:0 0 26px}
.dirpage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:48px;align-items:start;
  margin-top:clamp(28px,2.6vw,40px)}
.dirpage__h{margin:32px 0 12px}
.dirpage__h:first-child{margin-top:0}
.dirpage__p{margin:0;font:400 16px/1.6 var(--tx);max-width:48em}
.dirpage__io{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}  /* отступ сверху теперь у всей сетки, иначе колонки начинались на разной высоте */
.dirpage__ioh{margin:0 0 12px;font:600 13px/1 var(--os);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}
.dirpage__cta{margin-top:34px}
.dirpage__side{position:sticky;top:20px}
.dirpage__side .dirpage__ioh{margin-top:28px}
.dirpage__side .dirpage__ioh:first-child{margin-top:0}

.folderlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.folderlist li{margin:0}
.folderlist a{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 0;border-bottom:1px solid var(--ln);font:500 15px/1.35 var(--tx);
  transition:color .15s}
.folderlist a:hover{color:var(--ink)}
.folderlist a:hover span{border-bottom:1px solid var(--ink)}
.folderlist b{flex:none;font:600 13px/1 var(--tx);color:var(--mut);
  min-width:28px;text-align:right}
.folderlist--plain a{padding:11px 0}

.reqctx,.reqlead{margin:0 0 26px}
.reqlead{max-width:49.2em}

@media (max-width:1120px){
  .dirpage{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:34px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media (max-width:900px){
  .dirs{grid-template-columns:1fr}
  .dirpage{grid-template-columns:1fr;gap:32px}
  .dirpage__side{position:static}
  .dirpage__io{grid-template-columns:1fr;gap:24px}
  .anycase{grid-template-columns:1fr;gap:22px}
}
@media (max-width:600px){
  .dir{padding:22px 18px}
  .steps{grid-template-columns:1fr;gap:18px}
  .steps li{padding-top:0;padding-left:46px;min-height:32px}
  .steps li::before{top:2px}
}

/* ── поиск: группы результатов ────────────────────────────────────────────
   Поиск отвечает не только позициями каталога. Решение и страница — другие
   сущности, поэтому они идут своими группами, а не подмешиваются к товарам. */
.srchgroups{display:flex;flex-direction:column;gap:22px;margin:0 0 30px}
.srchgroup{border:1px solid var(--ln);background:var(--bg)}
.srchgroup__h{display:flex;align-items:center;gap:10px;margin:0;padding:14px 18px;
  border-bottom:1px solid var(--ln);font:600 13px/1 var(--os);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.srchgroup__h span{display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;background:var(--y);color:var(--ink);
  font:700 12px/1 var(--os);letter-spacing:0}
.srchlist{list-style:none;margin:0;padding:0}
.srchlist li{margin:0;border-bottom:1px solid var(--ln)}
.srchlist li:last-child{border-bottom:0}
.srchlist a{display:grid;grid-template-columns:96px minmax(0,1fr);gap:4px 18px;
  padding:14px 18px;align-items:baseline;transition:background-color .15s}
.srchlist a:hover{background:var(--w)}
.srchlist__k{grid-row:1 / span 2;font:600 11px/1.3 var(--os);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut2)}
.srchlist__t{font:600 16px/1.35 var(--tx)}
.srchlist a:hover .srchlist__t{border-bottom:1px solid var(--ink)}
.srchlist__d{font:400 14px/1.4 var(--tx);color:var(--mut)}
@media (max-width:600px){
  .srchlist a{grid-template-columns:1fr;gap:2px;padding:13px 14px}
  .srchlist__k{grid-row:auto}
  .srchgroup__h{padding:12px 14px}
}

/* ── главная: вход в четыре направления ───────────────────────────────────
   Ниже полноэкранного HERO и ниже двух сценариев. Тот же графит и жёлтый,
   без разноцветных SaaS-плиток: направление — это раздел инженерной работы,
   а не рекламный баннер. */
.homedirs{padding:clamp(34px,3.2vw,52px) var(--pad);background:var(--w)}
.homedirs__head{margin-bottom:24px}
/* Направлений шесть. В четыре колонки две клетки оставались пустыми, и
   владелец видел на главной два серых прямоугольника: фон сетки просвечивал
   там, где карточки нет. Три колонки заполняются ровно, а волосяная линия
   перенесена на сами карточки — тогда пустая клетка невозможна в принципе,
   сколько бы направлений ни стало. */
.homedirs__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin:0;padding:0;list-style:none}
.homedirs__list li{margin:0;display:flex;box-shadow:0 0 0 1px var(--ln)}
/* Значок стоит В КРАЙ плитки, а не внутри её полей: раньше карточка имела
   поля 22 px, значок — ещё 16 своих, и рисунок 320x200 занимал меньше
   половины серого поля. Теперь поля только у текста. */
.homedir{display:flex;flex-direction:column;gap:0;width:100%;padding:0;
  background:var(--w);border-top:4px solid transparent;
  transition:background-color .15s,border-color .15s}
.homedir:hover{background:var(--bg);border-top-color:var(--y)}
/* Надзаголовок карточки направления стоит на белом: #9AA0A8 давал 2,64
   при норме 4,5 — и это самый мелкий текст на главной, 11 px. */
/* Плитка направления несёт фирменный значок: раньше раздел расчётов на
   главной был списком ссылок и не читался как инструмент. Значки те же,
   что на /calculation/, шесть файлов общим весом 6,9 КБ. */
/* Значок — знак, а не изображение товара, и поля под него быть не должно.
   В сером поле во всю ширину карточки рисунок 320x200 занимал 171 px из
   433, то есть 262 px оставались пустым серым, и плитка читалась
   недоделанной. Убираем поле совсем: знак стоит на белом слева над
   надзаголовком, в натуральной для себя величине. */
.homedir__vis{margin:0;background:none;border:0;padding:0}
.homedir__vis img{display:block;width:196px;max-width:60%;height:auto}
.homedir__b{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}
.homedir{padding:22px 22px 20px;gap:14px}
.homedir__k{font:600 11px/1.3 var(--os);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.homedir__t{font:700 clamp(17px,1.3vw,20px)/1.2 var(--os)}
.homedir__d{font:400 14px/1.5 var(--tx);color:var(--mut);max-width:44em}
.homedir__go{margin-top:auto;padding-top:12px;font:600 13px/1 var(--os);
  letter-spacing:.06em;text-transform:uppercase}
.homedir__go::after{content:" →"}

/* ── раздел каталога → решение ────────────────────────────────────────────── */
.solbar{display:flex;align-items:center;gap:28px;justify-content:space-between;
  padding:20px 24px;background:var(--bg);border-left:4px solid var(--y);margin:0 0 28px}
.solbar__b{min-width:0}
.solbar__t{margin:6px 0 0;font:700 clamp(17px,1.3vw,20px)/1.25 var(--os)}
.solbar__d{margin:6px 0 0;font:400 14px/1.5 var(--tx);color:var(--mut);max-width:50.4em;min-height:42px}
.solbar__go{flex:none}

@media (max-width:1120px){
  .homedirs__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
  .homedirs__list{grid-template-columns:1fr}
  .solbar{flex-direction:column;align-items:flex-start;gap:16px;padding:18px}
}

/* ── подбор на странице направления ───────────────────────────────────────
   Считает сервер, поэтому форма — обычный GET и работает без JavaScript. */
.calcbox{margin:34px 0 0;border:2px solid var(--ink);padding:26px 28px 28px}
.calcbox .sechead{margin-bottom:22px}
.calcbox__src{color:var(--mut);text-align:right;max-width:31.2em;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.9em}
.calcform2__seg{border:0;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.calcform2__seg legend{padding:0;margin:0 0 10px;font:600 13px/1 var(--os);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.seg{position:relative;display:inline-flex}
.seg input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;height:44px;padding:0 18px;
  border:2px solid var(--ln);font:500 15px/1 var(--tx);transition:border-color .15s,background-color .15s}
.seg input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--w)}
.seg input:focus-visible + span{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--y)}
.calcform2__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:16px;align-items:end}
.calcform2__go{height:48px}
/* Подсказка под переключателем упиралась в заголовок следующего блока:
   две строки читались как одна. */
.calcform2__note{margin:14px 0 22px;font:400 13px/1.5 var(--tx);color:var(--mut)}
/* Подсказка под группой переключателей: не оговорка и не сноска, а перевод
   с языка формы на язык задачи покупателя. */
.calcform2__hint{margin:-6px 0 16px;font:400 13px/1.5 var(--tx);color:var(--mut)}
.fld--err .inp{border-color:var(--wr)}
.fld__err{display:block;margin-top:6px;font:400 13px/1.4 var(--tx);color:var(--wr);font-style:normal}

/* Колонка «что уточняет конструктор» занимала 1/2,5 ширины — почти 490 px
   на 1366 — и в ней после короткого списка стояла пустота, а таблица
   спецификации в это время ужималась до 775 px: название товара ломалось на
   пять строк, формула — на шесть. Боковая колонка теперь фиксированной
   ширины и прилипает при прокрутке, а таблица получает всё остальное. */
.calcres{margin:26px 0 0;padding-top:24px;border-top:2px solid var(--ink);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:34px;align-items:start}
@media (min-width:1121px){ .calcres__side{position:sticky;top:16px} }
.calcres--none{display:block}
.calcres__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 28px;margin:0}
.calcres__facts > div{margin:0;min-width:0}
.calcres__facts dt{font:400 13px/1.3 var(--tx);color:var(--mut)}
.calcres__facts dd{margin:4px 0 0;font:600 17px/1.3 var(--tx)}
.calcres__big{font:700 26px/1 var(--os)!important;letter-spacing:.01em}
.calcres__ask{font-weight:400;color:var(--mut)}
.calcnote{min-height:2.7em;margin:18px 0 0;padding:12px 16px;font:400 14px/1.5 var(--tx);background:var(--bg);border-left:4px solid var(--ln)}
.calcnote--warn{border-left-color:var(--wr)}
.calcnote--info{border-left-color:var(--y)}
.calcres__side{background:var(--bg);padding:20px}
.calcres__sku{margin:8px 0 0;font:400 15px/1.45 var(--tx)}
.calcres__price{margin:14px 0 0;font:700 22px/1 var(--os)}
.calcres__sum{margin:10px 0 16px;font:400 14px/1.5 var(--tx)}
.calcres__buy{margin:0 0 12px}
.calcres__buy .btn{width:100%}
.calcres__req{width:100%;justify-content:center}
.calcres__disc{display:block;margin:14px 0 0;color:var(--mut)}

@media (max-width:1120px){
  .calcform2__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .calcform2__go{grid-column:1 / -1}
  .calcres{grid-template-columns:1fr;gap:24px}
}
@media (max-width:700px){
  .calcbox{padding:20px 16px 22px;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));border-left:0;border-right:0}
  .calcbox .sechead{flex-direction:column;align-items:flex-start;gap:8px}
  .calcbox__src{text-align:left}
  .calcform2__row{grid-template-columns:1fr}
  .calcres__facts{grid-template-columns:1fr}
}

.dirpage__after{margin:26px 0 0}

/* Длинная надпись на кнопке не должна распирать страницу: на 390 px
   «Отправить исходные данные инженеру» давала настоящую боковую прокрутку
   (window.scrollX = 4). Ниже 700 px кнопка переносит строку и растёт вверх,
   а не вширь; nowrap остаётся на широких экранах, где он и нужен. */
@media (max-width:700px){
  .btn{white-space:normal;height:auto;min-height:50px;padding:13px 18px;
    line-height:1.25;max-width:100%}
}

/* ── комплект в подборе ───────────────────────────────────────────────────── */
.kitlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--ln)}
.kitlist li{margin:0;padding:12px 0;border-bottom:1px solid var(--ln)}
.kitlist a{display:flex;align-items:baseline;justify-content:space-between;gap:18px}
.kitlist__t{font:500 15px/1.4 var(--tx);min-width:0}
.kitlist a:hover .kitlist__t{border-bottom:1px solid var(--ink)}
.kitlist__p{flex:none;font:600 15px/1.3 var(--tx);white-space:nowrap}
.kitlist__n{display:block;margin-top:3px;font:400 13px/1.4 var(--tx);color:var(--mut)}

.calcform2__row--wide{grid-template-columns:minmax(0,2fr) auto}

/* Вводные абзацы разделов подбора занимают ровно две строки. Пока едет Plex,
   подменное начертание переносит строку иначе, абзац терял высоту на 29 px и
   вся страница прыгала вверх (CLS 0,29 на странице направления). Высота
   задана заранее — сдвига нет ни при какой подмене. */
/* Обрезка по двум строкам снята: на 390 px в неё не влезал ни один лид, и
   покупатель читал «анкерный жгут со смоло…». От прыжка вёрстки защищает
   size-adjust у подменных шрифтов выше — он выравнивает ширину строки, — а
   на широком экране высота ещё и зарезервирована. */
@media (min-width:701px){
  .dirpage__lead,.solhub__lead,.reqlead{min-height:calc(2 * 1.5em)}
}

/* ── описание раздела каталога ────────────────────────────────────────────
   Высота фиксирована четырьмя строками, поэтому смена шрифта не двигает
   витрину под описанием. Текст доступен целиком: переключатель — обычный
   чекбокс с подписью, работает без JavaScript. */
.fdesc{position:relative;margin-bottom:32px}
/* Подпись-переключатель была высотой 21 px — меньше минимальной цели 24 px. */
.fdesc__t{min-height:24px;display:inline-flex;align-items:center}
.fdesc__cb{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.fdesc__b{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;min-height:calc(4 * 1.6em);margin:0}
.fdesc__cb:checked ~ .fdesc__b{display:block;-webkit-line-clamp:none;overflow:visible;min-height:0}
.fdesc__t{display:inline-block;margin-top:8px;font:500 14px/1.4 var(--tx);color:var(--mut);
  cursor:pointer;border-bottom:1px dashed var(--ln)}
.fdesc__t::after{content:"Показать полностью"}
.fdesc__cb:checked ~ .fdesc__t::after{content:"Свернуть"}
.fdesc__t:hover{color:var(--ink);border-bottom-color:var(--ink)}
.fdesc__cb:focus-visible ~ .fdesc__t{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--y)}

/* ── инженерные схемы направлений ─────────────────────────────────────────── */
/* Одна палитра на все схемы: графит — конструкция, жёлтый — изделие,
   серый — контекст. Схема тянется по ширине контейнера и не меняет высоту
   строки, поэтому сдвига вёрстки от неё нет. */
.scn{width:100%;height:auto;display:block}
.scn-b{fill:var(--gr)}                                  /* конструкция, опоры */
.scn-f{fill:#C9CDD1}                                    /* тело элемента */
/* Изделие на чертеже — светлая подложка с чётким контуром, а не заливка
   фирменным цветом во всю площадь. Сплошной #FFE016 читался как пластиковая
   деталь: на раскладке из 24 плит в нём тонули швы, метки замков и пунктир
   заказанного участка. Фирменный цвет остаётся там, где он акцент.
   Те же значения продублированы в .data/tools/mdp-plate-build.py: файлы схем
   собираются с презентационными атрибутами, таблицы стилей у них нет. */
.scn-y{fill:#FFEE8C}                                    /* изделие */
.scn-y2{fill:#FFEE8C;stroke:var(--gr);stroke-width:2}
.scn-o{fill:none;stroke:var(--gr);stroke-width:2}       /* контур */
.scn-l{fill:none;stroke:var(--gr);stroke-width:1.5}
.scn-g{stroke:var(--gr);stroke-width:1.5;opacity:.55}   /* заполнение, сетка */
.scn-c{fill:var(--gr3)}                                 /* центратор */
.scn-end{fill:#FFD400}                                  /* концевая секция */
.scn-pipe{fill:var(--gr3)}
.scn-soil{fill:#E4E1DA}
.scn-road{stroke:var(--gr);stroke-width:2;opacity:.35}
.scn-br{fill:var(--gr3)}
.scn-w{fill:#7FA7C4}
.scn-d{stroke:var(--gr);stroke-width:1;opacity:.7}
.scn-task{fill:none;stroke:var(--gr);stroke-width:1.5;stroke-dasharray:6 4;opacity:.8}  /* заказанный участок */
.scn-t{font-family:var(--tx);font-size:10px;fill:var(--mut);letter-spacing:.01em}
.scn-t--dim{font-family:var(--os);font-size:11px;fill:var(--ink);font-weight:600;letter-spacing:.04em}
.scn-t--sec{font-size:10px}
/* На тёмной плоскости схема читается инверсно */
.scn--on-dark .scn-b{fill:#000}
.scn--on-dark .scn-f{fill:#3A4145}
.scn--on-dark .scn-o,.scn--on-dark .scn-l{stroke:var(--y)}
.scn--on-dark .scn-t{fill:var(--mut2)}
.scn--on-dark .scn-t--dim{fill:var(--w)}
.scn--on-dark .scn-g{stroke:var(--mut2)}
.scn--on-dark .scn-soil{fill:#22272A}
.scn--on-dark .scn-pipe{fill:#4A5257}
.scn--on-dark .scn-d{stroke:var(--mut2)}
.scn--on-dark .scn-task{stroke:var(--mut2)}

/* ── рабочая зона направления: параметры слева, изделие справа ──────────────
   Владелец: «Изображение перил, системы внешнего армирования, футляров и т. д.
   в калькуляторах должно быть сбоку справа или сверху, а никак не снизу».

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

   Ниже 1200 px колонок нет: кадр встаёт НАД формой во всю ширину — там он
   заведомо крупнее, чем был бы в колонке. */
.calcbox__vis{background:var(--bg);padding:16px 18px;display:flex;align-items:center;min-height:190px}
.calcbox__vis .scn{width:100%}
.calcbox__work{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
/* На узком экране форма идёт ПЕРЕД схемой. Раньше схема стояла первой и
   отодвигала форму на 800-1000 px от верха, а результат-пример — на 1500-2700:
   человек открывал страницу и видел картинку, а не работающий расчёт.
   Порядок «сначала что ввести, потом как это выглядит» и читается ровнее. */
.calcbox__form{order:1;min-width:0}
.calcbox__vis{order:2}
@media (min-width:1200px){
  /* Колонка кадра ограничена сверху. Кегль подписей внутри схемы задан в
     единицах viewBox, то есть растёт вместе с колонкой: на 1920 колонка в
     доле от ширины давала 840 px, и подпись «концевой модуль FT-End CT»
     выходила 22 px — крупнее заголовка соседнего блока. Предел 560 px держит
     подпись в 11…15 px на всех широких экранах. */
  .calcbox__work{grid-template-columns:minmax(0,1fr) clamp(400px,34vw,560px);
    gap:clamp(22px,2.1vw,32px)}
  .calcbox__form{order:1}
  /* Панель не уезжает: таблица расхода тянется на два экрана, и всё это время
     на глазах остаётся то, что считается. Верхняя отметка учитывает липкую
     полосу шапки, предельная высота — чтобы панель не переросла окно. */
  .calcbox__vis{order:2;position:sticky;top:96px;align-self:start;
    max-height:calc(100vh - 120px);overflow:auto;overscroll-behavior:contain}
}
.calcbox__form .calcform2{margin:0}

/* Направление без автоматического расчёта: перечень исходных данных и заявка. */
.calcask{margin-top:22px;padding:20px 22px;background:var(--gr);color:var(--w)}
/* Жёлтый работает только на тёмном поле самого блока. В светлой колонке
   результата тот же класс давал 1,19:1 — заголовок «Что уточняет конструктор»
   был не виден вовсе на четырёх калькуляторах. */
.calcask__t{margin:0 0 12px;font:600 13px/1 var(--os);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.calcask .calcask__t,.sec--dark .calcask__t{color:var(--y)}
.calcask .ticks li{color:var(--mut2)}
.calcask .ticks li::before{background:var(--y)}
.calcask__go{margin-top:16px}
.calcask__note{margin:12px 0 0;color:var(--mut2)}
.ticks--sm li{font-size:14px;line-height:1.5}
.ticks--wide{columns:2;column-gap:36px}
@media (max-width:700px){.ticks--wide{columns:1}}

/* ── бриф заявки: что уходит инженеру ─────────────────────────────────────── */
.reqbrief{margin:0 0 26px;border:2px solid var(--ink);padding:22px 24px 20px}
.reqbrief__h{margin:0 0 18px;font:700 18px/1.2 var(--os);letter-spacing:.01em}
.reqbrief__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.reqbrief__dl{margin:10px 0 0;display:grid;gap:7px}
.reqbrief__dl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:baseline;
  border-bottom:1px dotted var(--ln);padding-bottom:6px}
.reqbrief__dl dt{margin:0;font-size:14px;color:var(--mut)}
.reqbrief__dl dd{margin:0;font:600 14px/1.35 var(--tx);text-align:right}
.reqbrief__items{margin:18px 0 0;font-size:14px;line-height:1.6}
.reqbrief__note{margin:14px 0 0;color:var(--mut)}
@media (max-width:760px){.reqbrief__cols{grid-template-columns:minmax(0,1fr);gap:18px}}

/* ── основные характеристики в узком слоте ────────────────────────────────── */
/* В колонке список идёт в одну колонку и той же типографикой, что полоса. */
.pdp__keybox,.pdp__docs .pdp__key{margin:0}
.pdp__keybox-h,.pdp__docs-h{margin:0 0 10px;font:600 12px/1 var(--os);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.pdp__keybox .pdp__key,.pdp__docs .pdp__key{grid-template-columns:minmax(0,1fr);gap:0}
.pdp__key-more dt{display:none}
.pdp__key-more{grid-template-columns:minmax(0,1fr)!important;border-bottom:0!important}
.pdp__key-more dd{text-align:left!important;font-weight:400!important}

/* ── маленький исходник: показываем как есть ──────────────────────────────── */
/* Кадр ужимается до самого крупного снимка товара, поэтому при переключении
   он не меняет размер и вёрстка не прыгает. Растяжения нет: программное
   увеличение делает мыло, а нового исходника в CMS всё равно нет. */
.gal--compact .gal__frame{aspect-ratio:auto;min-height:0;
  padding:clamp(14px,2.4vw,26px);align-items:center;justify-content:center}
.gal--compact .gal__frame img{width:auto;height:auto;object-fit:contain}

/* Подписи на схеме — в единицах viewBox. На телефоне схема ужимается почти
   вдвое, и подпись в 10 единиц превращается в 6 px. Кегль растёт вместе с
   уменьшением кадра, чтобы читаемый размер оставался прежним. */
@media (max-width:900px){
  .scn-t{font-size:17px}
  .scn-t--dim{font-size:18px}
}
@media (max-width:480px){
  .scn-t{font-size:20px}
  .scn-t--dim{font-size:21px}
}
/* На узком экране остаются только подписи узлов изделия: пояснительные при
   выросшем кегле налезают друг на друга. Их содержание есть в тексте рядом. */
@media (max-width:700px){.scn-t--sec{display:none}}

/* ── Тумблеры состава системы ──────────────────────────────────────────────
   Сделаны такими же, как в калькуляторе МПКМ: переключатель и под ним строка
   с нормой и оговоркой. Работают без JavaScript — это обычный чекбокс в той
   же форме, а зависимые поля прячутся правилом :has(). Там, где :has() не
   поддержан, поля просто видны всегда: расчёт от этого не меняется, потому
   что выключенный слой всё равно не считается. */
/* Пример расчёта. Калькулятор открывается посчитанным, и это надо сказать
   словами: иначе покупатель примет чужие цифры за свои. */
/* Пример расчёта не продаёт. Пока на странице пример, кнопок «в корзину»
   быть не должно вовсе: человек, долиставший до «12 600 000 ₽ · В корзину»,
   принимает чужие числа за свой заказ. Признак стоит на всей секции, поэтому
   ни одна кнопка покупки не проскочит — их рисуют семь шаблонов и общий
   помощник комплекта. */
.calcbox--demo .kitbuy,
.calcbox--demo .calcres__buy,
.calcbox--demo .specbuy,
.calcbox--demo .calcpdf,
.calcbox--demo form[data-buy],
.calcbox--demo [data-buy-all]{display:none!important}
.calcbox--demo .calcres ~ .calcres .calcres__main::before,
.calcbox--demo .calcres ~ .calcres .calcres__main::after{content:none}
.calcbox--demo .calcres__main::before{content:"Пример расчёта";display:inline-block;
  margin:0 0 12px;padding:5px 10px;border-radius:999px;background:var(--y);color:var(--ink);
  font:600 12px/1 var(--os);letter-spacing:.06em;text-transform:uppercase}
.calcbox--demo .calcres__main::after{content:"Это пример: числа посчитаны по значениям, которые уже стоят в форме. Задайте свои — расчёт пересчитается, и появится кнопка заказа.";
  display:block;margin-top:16px;padding:12px 16px;border-left:4px solid var(--y);
  background:#FFFBE6;font:400 14px/1.5 var(--tx);color:var(--ink)}
.calcdemo{margin:0 0 18px;padding:12px 16px;border-left:4px solid var(--y);background:#FFFBE6;
  font:400 14px/1.5 var(--tx)}
.calcres__demo{display:inline-block;vertical-align:middle;margin-left:10px;padding:4px 10px;
  border-radius:999px;background:var(--y);color:var(--ink);
  font:600 12px/1 var(--os);letter-spacing:.06em;text-transform:uppercase}
.pillset{border:1px solid var(--ln);border-radius:10px;padding:16px 18px;margin-top:28px}
.pillset__t{margin:0 0 14px;font:600 14px/1.3 var(--os);letter-spacing:.02em}
.pillset__t .sm{display:block;margin-top:4px;font-weight:400;color:var(--mut)}
.pillrow + .pillrow{margin-top:14px;padding-top:14px;border-top:1px solid var(--ln)}
/* Состояние тумблера обязано читаться с одного взгляда, без сравнения с
   соседом. Раньше «включено» и «выключено» отличались только положением
   бегунка: дорожка была почти чёрной в обоих состояниях (#14181A против
   #0E1113 — глазом один цвет), а сам бегунок оставался жёлтым и там, и там.
   Теперь различий три сразу: цвет дорожки (белая против фирменной жёлтой),
   цвет бегунка (серый против графитового) и подпись словом справа. */
.pill{display:flex;align-items:center;gap:12px;cursor:pointer;min-height:44px}
.pill input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.pill__sw{flex:0 0 auto;width:52px;height:30px;border-radius:15px;background:var(--w);
  border:2px solid var(--ln);position:relative;
  transition:background .15s ease,border-color .15s ease}
.pill__sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--mut2);transition:transform .15s ease,background .15s ease}
.pill:hover .pill__sw{border-color:#BFC4C8}
.pill input:checked + .pill__sw{background:var(--y);border-color:var(--ink)}
.pill input:checked + .pill__sw::after{transform:translateX(22px);background:var(--ink)}
.pill input:focus-visible + .pill__sw{outline:3px solid var(--ink);outline-offset:3px}
.pill__l{font-weight:600}
/* Подпись состояния. Слово надёжнее оттенка: его видно и в чёрно-белой
   печати, и человеку, который не различает жёлтый и серый. */
.pill__st{margin-left:auto;flex:none;padding:5px 10px;border:1px solid var(--ln);border-radius:999px;
  background:var(--w);color:var(--mut);font:600 12px/1 var(--os);letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap}
.pill__st::after{content:"выключено"}
.pill input:checked ~ .pill__st{background:var(--y);border-color:var(--ink);color:var(--ink)}
.pill input:checked ~ .pill__st::after{content:"включено"}
.pill__h{margin:6px 0 0 58px;font-size:13px;line-height:1.45;color:var(--mut)}
.pillrow__more{margin:10px 0 0 58px;display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.pillrow__more .fld{min-width:190px}
/* Скрывать состав и толщину, пока слой выключен. Селектор бьёт ТОЛЬКО по
   самому тумблеру: внутри .pillrow__more есть текстовое поле, и общий
   :has(input:not(:checked)) срабатывал на нём — блок пропадал всегда. */
.pillrow:has(> .pill > input[type=checkbox]:not(:checked)) .pillrow__more{display:none}
@media (max-width:560px){
  .pill__h,.pillrow__more{margin-left:0}
}
@media (max-width:420px){
  .pill{flex-wrap:wrap}
  .pill__l{flex:1 1 auto;min-width:0}
  .pill__st{margin-left:auto;padding:4px 8px;font-size:11px;letter-spacing:.04em}
}

/* Позиция, выключенная в каталоге: страница живёт, продажи нет. */
.note--off{border-left:4px solid var(--wr);background:#FBF1EE}

/* Фрагмент сборочного чертежа рядом со схемой подбора. */
.docfig{margin:0;background:var(--w);border:1px solid var(--ln);padding:10px}
/* Чертёж показывается в своём масштабе и не крупнее: почти все схемы
   нарисованы под 880 px, и растяжка до ширины колонки (1218 px на 1366)
   превращала чертёж в слайд презентации. */
.docfig img{display:block;width:100%;max-width:880px;height:auto;margin:0 auto}
.docfig figcaption{margin-top:8px;font:400 12px/1.4 var(--tx);color:var(--mut)}
.docfig figcaption b{color:var(--ink);font-weight:600}

/* ── расчёт расхода на главной: отдельная полоса под четырьмя направлениями ── */
.homerash{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:center;
  margin-top:2px;padding:24px 30px;background:var(--gr);color:var(--w)}
.homerash__k{display:block;font:600 12px/1 var(--os);letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.homerash__t{margin:10px 0 0;font:700 clamp(18px,1.4vw,22px)/1.2 var(--os)}
.homerash__d{margin:8px 0 0;font:400 15px/1.55 var(--tx);color:var(--mut2);max-width:42em}  /* без предела строка выходила 127 знаков на 1920 и 174 на 2560 */
.homerash__act{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.homerash__note{color:var(--mut2)}
@media (max-width:820px){.homerash{grid-template-columns:minmax(0,1fr);gap:18px;padding:22px var(--pad)}}

/* Документированное ограничение поставки — сообщение, а не ограничение поля:
   в CMS у всех позиций минимум 1 и кратность 1, выдумывать их нельзя. */
.buy__rules--doc{color:var(--mut);font-weight:400}

.dirpage__ioh--2{margin-top:20px}

/* Список того, что назначает проект: визуально отличается от того, что
   страница выдаёт сама. Иначе оба читаются как обещание. */
.ticks--ask li{color:var(--mut)}
.ticks--ask li::marker{color:var(--mut)}
/* Таблица спецификации в результатах подбора */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spectbl{width:100%;border-collapse:collapse;font-size:15px}
.spectbl th,.spectbl td{padding:10px 12px;border-bottom:1px solid var(--ln);vertical-align:top;text-align:left}
.spectbl th{font:600 12px/1.2 var(--os);letter-spacing:.08em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.spectbl__n{text-align:right;white-space:nowrap}
/* Ширины колонок спецификации заданы явно: при авторазметке числовые
   колонки с nowrap забирали место у названия и формулы. */
.spectbl--arm th:nth-child(1),.spectbl--arm td:nth-child(1){width:26%}
.spectbl--arm th:nth-child(2),.spectbl--arm td:nth-child(2){width:32%}
.spectbl--arm th:nth-child(3),.spectbl--arm td:nth-child(3),
.spectbl--arm th:nth-child(4),.spectbl--arm td:nth-child(4){width:10%}
.spectbl tfoot td{border-bottom:0;padding-top:14px;color:var(--mut)}
.spectbl tfoot td:last-child{color:var(--ink);font-size:17px}
.calcbox__form--wide{min-width:0}
.calcres__side--ask .calcres__req{width:100%}

/* Фрагмент чертежа: кнопка увеличения поверх картинки. Подпись «увеличить»
   видна сразу — иначе никто не догадается, что схему можно раскрыть. */
.docfig__zoom{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
.docfig__zoom picture{display:block}
.docfig__zoom img{display:block;width:100%;height:auto}
.docfig--zoom{position:relative}
/* убрано: см. подпись фигуры ниже */

.docfig__zoom:focus-visible{outline:3px solid var(--y);outline-offset:2px}
@media (hover:hover){ .docfig__zoom:hover::after{background:var(--y);color:var(--ink)} }

/* Витрина направлений: четыре разных источника — снимок с объекта, фрагменты
   двух сборочных чертежей и фотография изделия — сведены в один ряд одной
   пропорцией, одной рамкой и одной подписью с источником. Ничего не
   растягивается: кадр вписывается в рамку целиком. */
.dir__vis{margin:0;background:var(--w)}
.dir__vis img{display:block;width:100%;height:100%}
.solvis--doc img,.solvis--contain img{object-fit:contain;background:var(--w);padding:6px}
.dir__src{display:block;margin-top:6px;color:var(--mut);font:400 12px/1.35 var(--tx)}

/* Заглушка «нет фотографии» показывается в натуральную величину: растягивать
   служебный GIF 240x180 до 477 px незачем, а рамку рисует стиль. */
.card__ph img.ph-none{width:auto;height:auto;max-width:100%;max-height:100%;
  margin:auto;opacity:.5;object-fit:none}
.card__ph:has(img.ph-none){display:flex;align-items:center;justify-content:center;background:var(--bg)}

/* Таблица спецификации шире экрана заставляла колонку сетки раздуться до
   484 px при окне 390 — страница получала горизонтальную прокрутку 110 px.
   Явный min-width:0 возвращает колонку в норму, а таблица прокручивается
   внутри своей обёртки. */
.calcres__main,.calcres__side{min-width:0}
.calcres__main > *{max-width:100%}
@media (max-width:600px){
  .spectbl{font-size:14px}
  .spectbl th,.spectbl td{padding:8px}
  .spectbl th{white-space:normal}
}

/* Инженерная схема не рисует за пределами своей рамки: подпись, съехавшая за
   viewBox, давала 12 px горизонтальной прокрутки на 360. */
.scn{overflow:hidden}

/* ── звёздный рейтинг ────────────────────────────────────────────────────── */
.stars{position:relative;display:inline-block;line-height:0;white-space:nowrap;vertical-align:-3px}
.stars svg{fill:var(--ln)}
.stars__fill{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;line-height:0}
.stars__fill svg{fill:#E8B800}
/* Строка оценки — ссылка на форму отзыва, а на телефоне это была цель
   высотой 17 px. Минимальная высота поднята до 24 px без изменения вида. */
.rateline{display:inline-flex;align-items:center;gap:7px;min-height:24px;font:400 13px/1 var(--tx);
  color:var(--mut);text-decoration:none}
.rateline__v{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
a.rateline{border-bottom:1px solid transparent}
a.rateline:hover{border-bottom-color:var(--ln)}
a.rateline:focus-visible{outline:3px solid var(--y);outline-offset:3px}
.rateline--none{font-size:12px}

/* Шапка коммерческого блока: артикул, статус и оценка стоят там же, где цена
   и кнопка, а не отдельной полосой над галереей. */
.buyhd{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;
  margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--ln)}
.buyhd__sku{font:400 13px/1 var(--tx);color:var(--mut)}
.buyhd__sku b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.buyhd .stk{margin:0}
.buyhd .rateline{margin-left:auto}
@media (max-width:600px){ .buyhd .rateline{margin-left:0;width:100%} }

/* Оценка звёздами вместо цифр 1…5 */
.rate__pick{display:inline-flex;flex-direction:row-reverse;gap:2px}
.rate__pick input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rate__pick label{display:inline-flex;padding:4px;cursor:pointer;line-height:0}
.rate__pick svg{width:22px;height:22px;fill:var(--ln);transition:fill .12s}
.rate__pick label:hover svg,
.rate__pick label:hover ~ label svg,
.rate__pick input:checked + label svg,
.rate__pick input:checked + label ~ label svg{fill:#E8B800}
.rate__pick input:focus-visible + label{outline:3px solid var(--y);outline-offset:2px}
@media (prefers-reduced-motion:reduce){ .rate__pick svg{transition:none} }
.stk--off{background:var(--ln);color:var(--ink)}

.rate__fs{display:flex;align-items:center;gap:12px;border:0;padding:0;margin:0;flex-wrap:wrap}
.rate__fs legend{float:left;padding:0;margin-right:12px}

/* Пять звёзд рисуются в строку, а не столбиком: внутри inline-flex набор
   сжимался и переносился по одной. */
.stars{flex:0 0 auto}
.stars__base,.stars__fill{display:flex;gap:1px}
/* Жёлтый слой ограничен по ширине и должен ОБРЕЗАТЬСЯ по ней. Без этого
   правила flex-shrink сжимал каждую звезду с 16 до 14,5 px, жёлтый ряд
   уезжал влево, и из-под него выступал серый контур — звёзды двоились. */
.stars__base svg,.stars__fill svg{flex:0 0 auto}
.rateline{flex:0 0 auto}

/* Коммерческий блок на первом экране. При 1280×720 кнопка «Купить»
   оказывалась на 729 px — ниже сгиба. Единица продажи и количество встают в
   одну строку, поля чуть плотнее, шапка компактнее. Замер после правки — в
   .data/reports/pdp-geometry.md */
.buy{padding:18px 20px}
.buyhd{margin-bottom:12px;padding-bottom:10px}
.buy__top{gap:10px}
.buy__ctl{gap:10px 12px}
.buy__units{min-width:0;flex:1 1 150px}
.buy__units .inp{height:50px}
.buy__go{flex:1 1 100%;height:52px}
@media (min-width:1180px){
  .pdphead{margin-bottom:20px}
  .pdphead__sub{margin-top:10px;max-width:62ch}
}

/* ═══ фильтр: выпадающие списки ═══════════════════════════════════════════
   Постоянно раскрытые наборы чекбоксов занимали до 306 px по высоте каждый и
   выталкивали первую карточку товара за пределы первого экрана. Теперь группы
   свёрнуты в строку кнопок; панель раскрывается по нажатию.
   Основа — <details>/<summary>: без JavaScript это работает нативно, с
   JavaScript добавляются aria-expanded, Escape, клик снаружи и возврат фокуса. */
.shopfilter__grid{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start}
.fdd{position:relative;min-width:0}
.fdd__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  padding:0 14px;background:var(--w);border:2px solid var(--ln);cursor:pointer;
  font:600 14px/1.2 var(--os);color:var(--ink);list-style:none;user-select:none;
  transition:border-color .12s,background-color .12s}
.fdd__btn::-webkit-details-marker{display:none}
.fdd__btn::after{content:"";width:8px;height:8px;flex:none;margin-left:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .12s}
.fdd[open] > .fdd__btn::after{transform:rotate(-135deg) translate(-2px,-2px)}
.fdd__btn:hover{border-color:var(--ink)}
.fdd__btn:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.fdd.is-on > .fdd__btn{border-color:var(--ink);background:var(--ink);color:var(--w)}
.fdd__n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;
  height:22px;padding:0 6px;background:var(--y);color:var(--ink);
  font:700 13px/1 var(--tx);font-variant-numeric:tabular-nums}
.fdd__n--one{background:transparent;color:inherit;font:600 13px/1 var(--tx);
  max-width:15ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0}
.fdd__pnl{position:absolute;z-index:60;top:calc(100% + 4px);left:0;min-width:260px;
  max-width:min(94vw,380px);background:var(--w);border:2px solid var(--ink);
  padding:10px;box-shadow:0 10px 30px rgba(15,18,20,.13)}
.fdd__list{display:flex;flex-direction:column;gap:2px;max-height:min(58vh,340px);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
.fopt--any{border-bottom:1px solid var(--ln);margin-bottom:4px;padding-bottom:8px}
.fdd .frange{padding:4px 2px}
@media (prefers-reduced-motion:reduce){ .fdd__btn,.fdd__btn::after{transition:none} }

/* Строка фильтра компактна: заголовок, кнопки групп, действие. */
.shopfilter__hd{align-items:center}
.shopfilter__ttlb{flex:0 1 auto}
.shopfilter__sub{display:none}
@media (min-width:1180px){ .shopfilter__sub{display:block} }

/* Панель внутри мобильной шторки открывается на всю ширину, а не всплывает. */
@media (max-width:900px){
  .shopfilter__grid{flex-direction:column;gap:6px}
  .fdd{width:100%}
  .fdd__btn{width:100%;justify-content:space-between}
  .fdd__pnl{position:static;min-width:0;max-width:none;border-width:0 0 0 2px;
    box-shadow:none;padding:8px 0 8px 12px;margin:4px 0 6px}
  .fdd__list{max-height:none;overflow:visible}
}

/* Строка фильтра занимала 288 px, и первая карточка уходила на 853 px при
   окне 1366×768. Заголовок в одну строку, действие — в той же строке, что и
   кнопки групп, отступы плотнее. Замер после правки — в отчёте прогона. */
@media (min-width:901px){
  .shopfilter{padding:14px 16px}
  .shopfilter__hd{padding:0 0 10px;margin-bottom:10px}
  .shopfilter__ttlb{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .shopfilter__ttl{font-size:13px}
  .shopfilter__sub{font-size:12px;color:var(--mut)}
  /* «Показать N товаров» стоит в конце той же строки, что и группы:
     отдельная строка действия добавляла к фильтру 62 px. */
  .shopfilter__grid{align-items:center}
  .shopfilter__grid .fact{display:flex;gap:12px;align-items:center;margin:0 0 0 auto;padding:0;border:0}
  .shopfilter__grid .fact__go{height:44px;padding:0 22px}
  .shopfilter__b > .fact{display:none}
}

/* Ритм шапки раздела. Плотность «Плиты» — 8 из 10 по выбранной шкале, а между
   крошками, H1 и описанием стояло 43 и 47 px. Первая карточка из-за этого
   начиналась на 797 px при окне 1366×768. Здесь сжимается только шапка
   каталожного раздела; заголовки остальных страниц не меняются. */
@media (min-width:901px){
  .shop .crumbs{padding-bottom:10px}
  .shop h1.h1{margin-top:16px;margin-bottom:14px}
  .fdesc{margin-bottom:14px}
  .shop__bar{margin-top:12px;margin-bottom:12px}
  /* Свёрнутое описание раздела — три строки вместо четырёх: одна строка
     это 26 px, и именно их не хватало первой карточке до сгиба на 1366.
     Полный текст по-прежнему открывается кнопкой и работает без JavaScript.
     Резерв высоты меняется вместе с обрезкой, иначе вернётся сдвиг вёрстки. */
  .fdesc__b{-webkit-line-clamp:3;min-height:calc(3 * 1.6em)}
}

/* ═══ страница человека ═══════════════════════════════════════════════════
   Графитовая полоса в духе «Плиты»: прямоугольная геометрия, жёлтый акцент,
   без градиентов и скруглений. Портрет — настоящая фотография 800×1000,
   отдаётся в трёх размерах и в WebP, не растягивается. */
.prof{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  margin:0 calc(-1 * var(--pad)) 34px;background:var(--ink);color:var(--w)}
.prof__ph{margin:0;background:#101314}
.prof__ph img{display:block;width:100%;height:100%;max-height:520px;object-fit:cover;object-position:50% 22%}
.prof__b{padding:26px var(--pad) 30px;min-width:0}
.prof__b .kick{color:var(--y)}
.prof__job{margin:10px 0 0;font:700 clamp(19px,1.7vw,24px)/1.2 var(--os);color:var(--w)}
.prof__lead{margin:14px 0 0;max-width:62ch;font:400 16px/1.6 var(--tx);color:#D5D9DB}
.prof__facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px 26px;margin:22px 0 0}
.prof__facts dt{font:600 12px/1.2 var(--os);letter-spacing:.12em;text-transform:uppercase;color:#8D9598}
.prof__facts dd{margin:6px 0 0;font:700 17px/1.25 var(--os);color:var(--w)}
.prof__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:26px 0 0}
.prof__site{color:var(--y);border-bottom:1px solid rgba(255,224,22,.45)}
.prof__site:hover{color:var(--y);border-bottom-color:var(--y)}
.prof__site:focus-visible{outline:3px solid var(--y);outline-offset:3px}
@media (min-width:900px){
  .prof{grid-template-columns:minmax(0,360px) minmax(0,1fr);align-items:stretch}
  .prof__ph img{max-height:none;height:100%}
  .prof__b{padding:34px 40px 38px;align-self:center}
}
@media (min-width:1500px){ .prof{max-width:var(--maxw);margin-left:auto;margin-right:auto} }

/* Профессиональный путь: годы слева, событие справа, без декора. */
.wayline{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--ln)}
.wayline li{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;background:var(--w);padding:16px 18px}
.wayline b{font:700 15px/1.3 var(--os);color:var(--ink)}
.wayline span{font:400 15px/1.55 var(--tx);color:var(--mut)}
@media (min-width:768px){
  .wayline li{grid-template-columns:minmax(180px,0.3fr) minmax(0,1fr);gap:18px;align-items:baseline}
}
.prof__p{margin:0 0 12px;max-width:78ch;font:400 16px/1.6 var(--tx);color:var(--ink)}
.prof__note{margin:16px 0 0;max-width:78ch}
.prof__req{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 26px;margin:18px 0}
.prof__req dt{font:400 13px/1.2 var(--tx);color:var(--mut)}
.prof__req dd{margin:4px 0 0;font:600 16px/1.3 var(--os);color:var(--ink);font-variant-numeric:tabular-nums}
.prof__cta{margin-top:30px}
.scen--3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* Выбор границы нормы расхода. Диапазон нормы — не запас, и решение внутри
   него принимает покупатель: раньше единственная кнопка молча клала верхнюю
   границу (69 комплектов вместо 39, разница 2,1 млн ₽). */
.qpick{display:grid;gap:2px;border:0;padding:0;margin:0 0 14px;background:var(--ln)}
/* Подпись лежит не на белом, а на подложке --ln (#DDE0E3): приглушённый
   серый давал 3,77. Основной цвет текста — 14,6. */
.qpick__lg{padding:0 0 8px;font:600 12px/1 var(--os);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink)}
.qpick__o{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:center;
  background:var(--w);padding:12px 14px;cursor:pointer;min-height:44px}
.qpick__o input{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0)}
.qpick__n{font:700 22px/1 var(--os);color:var(--mut);font-variant-numeric:tabular-nums;min-width:2.2ch;text-align:right}
.qpick__t{font:600 14px/1.35 var(--os);color:var(--ink)}
.qpick__t .sm{display:block;font-weight:400;color:var(--mut)}
.qpick__o:has(input:checked){background:var(--ink)}
.qpick__o:has(input:checked) .qpick__n{color:var(--y)}
.qpick__o:has(input:checked) .qpick__t{color:var(--w)}
.qpick__o:has(input:checked) .qpick__t .sm{color:#B9C0C3}
.qpick__o:has(input:focus-visible){outline:3px solid var(--y);outline-offset:-3px}
.calcres__buy{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.calcres__buy .qty{flex:0 0 auto}
.calcres__buy .btn{flex:1 1 100%}

/* Шапка на самых узких экранах. Логотип 132 + «Каталог» 58 + правая группа 150
   плюс зазоры давали 372 px при окне 320 и 360: страница получала
   горизонтальную прокрутку 52 и 12 px. Композиция шапки не меняется — меняется
   только её посадка: правой группе разрешено ужиматься, поля кнопок и зазоры
   плотнее, почта уходит в бургер (она там есть). */
@media (max-width:420px){
  .hdr__right{flex:0 1 auto;min-width:0;gap:4px}
  .hdr__acts{gap:0;min-width:0}
  .hdr__burger{margin-left:0}
  .hdr__mail{display:none}
  .hdr__cnt{display:none}
  .hdr__cat{padding:0 10px}
  .hdr__logo img{width:112px}
  .stick__acts{gap:0;min-width:0;flex:0 1 auto}
  .stick__logo img{width:96px}
}
/* Ниже 340 px кнопки НЕ уменьшаются: 44x44 — минимальный размер цели касания,
   и нарушать его ради посадки нельзя. Место находится иначе: боковое поле
   страницы и логотип чуть меньше, зазоры нулевые. */
@media (max-width:340px){
  /* --pad здесь НЕ трогаем: полосы во всю ширину считают отступ через
     calc(-1 * var(--pad)), и уменьшение поля выносило плитки за экран. */
  .hdr__logo img{width:96px}
  .hdr__cat{padding:0 8px}
  .hdr__right{gap:0}
  /* При 320 px ряд «логотип + Каталог + четыре цели касания» не помещается в
     одну строку, а уменьшать цели ниже 44x44 нельзя. Поэтому на этой ширине
     шапка переносится на две строки: состав и порядок прежние, ничего не
     скрыто, прокрутки нет. */
  .hdr__in{flex-wrap:wrap;row-gap:4px}
  .hdr__right{width:100%;justify-content:flex-end;margin-left:0}
  /* Липкая шапка живёт по своим правилам и переполняла экран так же. */
  .stick__in{flex-wrap:wrap;row-gap:2px}
  .stick__acts{width:100%;justify-content:flex-end}
}

/* Минимальная колонка сетки плиток была шире контейнера: при окне 320
   контейнер 288 px, а minmax(320px,1fr) требовал 320 — плитки вылезали на
   32 px. min() ограничивает минимум шириной контейнера. */
.grid--tiles{grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr))}
@media (max-width:560px){
  .grid--tiles{grid-template-columns:1fr 1fr;gap:10px}
  .grid--tiles .tile{min-height:132px!important;padding:14px}
  .grid--tiles .tile .h3,.grid--tiles .tile .h4{font-size:15px;line-height:1.2}
}

/* Кадр HERO увеличен на 7 % для перехода между слайдами: при 320 px это 342 px
   и 11 px за экраном. Сцена обрезает всё, что выходит за её границы, —
   полноэкранный HERO и его композиция при этом не меняются. */


/* Атрибут hidden должен побеждать любое авторское display. Без этого
   .cc__set{display:grid} и .btn{display:inline-flex} показывали скрытые
   блоки: панель согласия занимала почти весь экран телефона. */
[hidden]{display:none!important}

/* ── согласие на cookies ──────────────────────────────────────────────────
   Полоса снизу, а не окно на весь экран: панель не перекрывает ни первый
   экран, ни кнопки покупки. На телефоне занимает столько, сколько нужно
   тексту и кнопкам, и оставляет содержимое видимым. Страница не блокируется:
   читать сайт можно, не отвечая на панель. */
/* Панель согласия и первый экран. Замер на 1366×900: кнопки «Перейти в
   каталог» и «Подобрать материал» стоят на x 33…556, y 726…786.
   Карточка в углу не спасает ни с той, ни с другой стороны: слева она
   занимала 20…400 по x и 667…880 по y и накрывала обе кнопки целиком,
   справа — тёмную дверь «Рассчитать под объект». Свободного угла у
   полноэкранного HERO нет.
   Дело было не в ширине полосы, а в её ВЫСОТЕ: прежняя полоса разворачивала
   текст и кнопки в два ряда и занимала 213 px, поэтому доставала до кнопок
   снизу. Полоса в одну строку — около 73 px, начинается на 827 и кнопок уже
   не касается. */
.cc{position:fixed;bottom:0;z-index:900;background:var(--ink);color:var(--w);
  border-top:3px solid var(--y);box-shadow:0 -12px 32px rgba(14,17,19,.28);
  left:0;right:0}
.cc__in{padding:14px var(--pad);display:grid;gap:12px}
@media (min-width:900px){
  /* Карточка стояла в правом нижнем углу и на 1366 закрывала три пятых
     тёмной двери «Рассчитать под объект» — то есть ровно тот вход, ради
     которого первый экран и переделан. Уводим её левее и уже. */
  /* Карточка стояла справа и закрывала 367 px из 650 у тёмной двери
     «Рассчитать под объект» — то есть больше половины того входа, ради
     которого первый экран и переделан, вместе с половиной заголовка.
     Уводим её к ЛЕВОМУ краю: там жёлтая дверь, и под панелью остаётся
     только продолжение текста, а не заголовок и не ссылка. */
  .cc{left:0;right:0;bottom:0;width:auto;
    border:0;border-top:3px solid var(--y);box-shadow:0 -12px 32px rgba(14,17,19,.28)}
  .cc__in{padding:12px var(--pad);gap:8px 28px;
    grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .cc__txt{grid-column:1;grid-row:1;display:flex;align-items:baseline;
    flex-wrap:wrap;gap:2px 12px}
  .cc__h{margin:0}
  .cc__d{max-width:none}
  .cc__act{grid-column:2;grid-row:1;justify-content:flex-end;flex-wrap:nowrap}
  /* Развёрнутые настройки — отдельной строкой во всю ширину: в правой
     колонке рядом с кнопками они сжались бы до нечитаемого. */
  .cc__set{grid-column:1/-1;grid-row:2}
}
/* Блок @media (max-width:560px) снят: он стоял ВЫШЕ базовых правил .cc__h,
   .cc__d, .cc__act и .cc__more, вес одинаковый — побеждали базовые, то есть
   на телефоне не применялось ни одно его объявление. Всё, что нужно узкому
   окну, собрано ниже в одном блоке (max-width:899px). */
.cc__h{margin:0 0 4px;font:600 14px/1.2 var(--os);letter-spacing:.1em;text-transform:uppercase;color:var(--y)}
.cc__d{margin:0;max-width:74ch;font-size:14px;line-height:1.5;color:#C6CBCE}
.cc__d a{color:var(--w);text-decoration-color:var(--y)}
.cc__act{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Отказ не сложнее согласия: обе кнопки одного размера, рядом, в один клик. */
.cc__act .btn{height:46px;padding:0 22px;font-size:14px;flex:0 0 auto}
.cc__more{min-height:44px;padding:0 6px;background:none;border:0;color:var(--w);
  font:600 14px/1 var(--os);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  border-bottom:2px solid rgba(255,255,255,.45)}
.cc__more:hover{border-bottom-color:var(--y)}
.cc__set{display:grid;gap:2px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16)}
.cc__opt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:start;
  background:var(--gr2);padding:12px 14px;cursor:pointer;min-height:44px}
.cc__opt--fixed{cursor:default}
.cc__opt input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--y);flex:none}
.cc__opt-t b{display:block;font:600 14px/1.3 var(--os);letter-spacing:.03em}
.cc__opt-t .sm{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:#B9C0C3}
.cc :focus-visible{outline:3px solid var(--y);outline-offset:2px}
/* Полоса согласия и первый экран на узком окне.
   Замер 390×844: заголовок, описание в две строки и три кнопки в два ряда
   давали 213 px — четверть окна. Полоса начиналась на 631, а управление
   каруселью стоит на 665…683 (.hero__nav) и 670…683 (.hero__pause): пока
   согласие не дано, листать и останавливать первый экран было нечем.
   Собираем в две строки: подпись со ссылками сверху, три кнопки решения
   в один ряд снизу. Выходит около 88 px, полоса начинается на 756 —
   управление свободно. Пояснительная фраза уходит из показа, но остаётся
   в разметке (.cc__d-t спрятан по-старому, а не display:none), потому что
   на неё указывает aria-describedby панели.
   Отказ по-прежнему не сложнее согласия: «Только необходимые» стоит рядом
   с «Принять», того же роста и в одно нажатие. */
@media (max-width:899px){
  .cc__in{padding:8px var(--pad);gap:6px}
  .cc__txt{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
  .cc__h{margin:0;font-size:12px;letter-spacing:.08em}
  .cc__d{font-size:12.5px;line-height:1.35}
  .cc__d-t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .cc__act{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
  /* min-height, а не только height: ниже 700 px .btn получает
     height:auto и min-height:50px ради переноса длинных надписей, и
     высота 44 иначе не действует. Перенос здесь не нужен — три кнопки
     решения помещаются в строку (70 + 150 + 70 + 16 = 306 при 358). */
  .cc__act .btn{flex:0 1 auto;min-width:0;width:auto;height:44px;min-height:44px;
    padding:0 10px;font-size:12.5px;letter-spacing:.02em;white-space:nowrap;
    line-height:1.1}
  .cc__more{flex:0 0 auto;min-height:44px;padding:0 2px;font-size:12.5px}
  .cc__act .btn[data-consent-save]{flex:1 1 100%}
  .cc__set{max-height:44vh;overflow-y:auto}
}
/* Ниже 360 px три кнопки в строку не помещаются: «Только необходимые»
   ужимается сильнее «Принять», и обе теряют читаемость. Кнопки решения
   встают в столбик — каждая всё так же в одно нажатие. */
@media (max-width:359px){
  .cc__act{flex-wrap:wrap}
  .cc__act .btn{flex:1 1 100%}
  .cc__more{flex:1 1 100%;text-align:left}
}
/* Полоса висит поверх страницы, и низ документа остаётся под ней: подвал
   с правовыми ссылками не прокручивался до конца, пока выбор не сделан.
   Скрипт кладёт высоту полосы в --cc-h, низ страницы получает такой же
   отступ. Атрибут ставится только на время показа полосы. */
body{padding-bottom:var(--buybar-h,0px)}
html[data-cc="on"] body{padding-bottom:calc(var(--cc-h,0px) + var(--buybar-h,0px))}

/* Правовые ссылки подвала: настоящие адреса вместо одной фразы про куки. */
.ftr__legal{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.ftr__legal a,.ftr__legal-btn{font-size:13px;color:#B9C0C3;text-decoration:underline;
  text-decoration-color:rgba(255,224,22,.5);text-underline-offset:3px}
.ftr__legal-btn{min-height:24px;padding:0;background:none;border:0;cursor:pointer;
  font-family:var(--tx);line-height:1.5}
.ftr__legal a:hover,.ftr__legal-btn:hover{color:var(--w);text-decoration-color:var(--y)}
.ftr__legal a:focus-visible,.ftr__legal-btn:focus-visible{outline:3px solid var(--y);outline-offset:2px}


/* Правовая информация на карточке товара. Длина строки держится в границах
   удобного чтения, кегль меньше основного текста — это сопроводительный
   раздел, а не описание товара. */
.pdp__legal{border-top:1px solid var(--ln);padding-top:22px}
.pdp__legal h2{margin:0 0 10px;color:var(--mut)}
.pdp__legal-t{margin:0 0 10px;max-width:78ch;font-size:14px;line-height:1.6;color:var(--mut)}
.pdp__legal-d{margin:0 0 4px;max-width:78ch}
.pdp__legal-d a{color:var(--ink)}


/* Оговорка о предварительном характере расчёта. Один компонент, два вида:
   строка статуса у формы и развёрнутый блок у результата. Раньше похожие
   фразы были рассыпаны по шаблонам поодиночке и повторялись. */
.calcdisc--form{margin:0 0 16px;padding:10px 14px;background:var(--bg);
  border-left:4px solid var(--y);font-size:14px;line-height:1.5;color:var(--mut);max-width:80ch}
.calcdisc--form b{color:var(--ink)}
.calcdisc--res{margin:22px 0 0;padding:18px 20px;background:var(--ink);color:var(--w);
  display:grid;gap:10px;max-width:none}
.calcdisc__h{margin:0;font:600 13px/1.2 var(--os);letter-spacing:.12em;
  text-transform:uppercase;color:var(--y)}
.calcdisc__t{margin:0;max-width:78ch;font-size:14.5px;line-height:1.55;color:#C6CBCE}
.calcdisc__a{margin:2px 0 0}


/* Кнопка выгрузки расчёта. Заметная, но не спорит с основным действием
   страницы: цвет фирменный, положение — сразу под результатом. */
.calcpdf{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 0}
.calcpdf__go{height:50px;padding:0 24px}
.calcpdf .sm{color:var(--mut)}


/* Действия страницы сравнения: выгрузка и очистка стоят рядом. */
.cmp__act{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.cmp__act form{margin:0}


/* Вопросы и ответы по рубрике. Раскрытие на <details>: без JavaScript
   работает так же, с клавиатуры доступно средствами браузера. */
.faq{border-top:1px solid var(--ln);padding-top:26px}
.faq__list{display:grid;gap:1px;background:var(--ln);border:1px solid var(--ln);margin-top:14px}
.faq__i{background:var(--w)}
.faq__q{list-style:none;cursor:pointer;padding:15px 46px 15px 18px;position:relative;
  font:600 15.5px/1.4 var(--os);letter-spacing:.01em;color:var(--ink);min-height:44px;
  display:flex;align-items:center}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{content:"";position:absolute;right:18px;top:50%;width:12px;height:12px;
  margin-top:-8px;border-right:2px solid var(--mut);border-bottom:2px solid var(--mut);
  transform:rotate(45deg);transition:transform .15s}
.faq__i[open] > .faq__q::after{transform:rotate(-135deg);margin-top:-3px}
.faq__q:hover{background:var(--bg)}
.faq__q:focus-visible{outline:3px solid var(--y);outline-offset:-3px}
.faq__a{padding:0 18px 18px;max-width:78ch}
.faq__a p{margin:0 0 10px;font-size:15px;line-height:1.6;color:var(--mut)}
.faq__a p:last-child{margin-bottom:0}
.faq__a a{color:var(--ink);text-decoration-color:var(--y3)}
.faq__a ul{margin:0 0 10px;padding-left:1.1em;color:var(--mut)}
@media (max-width:520px){
  .faq__q{font-size:14.5px;padding:14px 40px 14px 14px}
  .faq__a{padding:0 14px 16px}
}


/* ── раздел «Компания» и страница директора ───────────────────────────────
   Редакционная раскладка, а не набор одинаковых карточек: текст держится
   в удобной для чтения ширине, временная линия читается сверху вниз. */
.colead__ph{float:right;width:min(240px,38%);margin:0 0 18px 24px;border:1px solid var(--ln);background:var(--bg)}
.colead__ph img{display:block;width:100%;height:auto}
@media (max-width:600px){
  .colead__ph{float:none;width:min(220px,60%);margin:0 0 16px}
}

/* Временная линия профессионального пути. Год — отдельной колонкой, чтобы
   годы читались столбиком, а не терялись в тексте. */
.tl{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:1px;background:var(--ln);
  border:1px solid var(--ln)}
.tl li{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:0 18px;align-items:baseline;
  background:var(--w);padding:14px 18px}
.tl__y{font:700 17px/1.2 var(--os);color:var(--ink);font-variant-numeric:tabular-nums;
  letter-spacing:.02em}
.tl__t{font-size:15px;line-height:1.6;color:var(--mut)}
.tl__t b{color:var(--ink);font-weight:600}
@media (max-width:520px){
  .tl li{grid-template-columns:1fr;gap:4px;padding:13px 14px}
  .tl__y{font-size:15px;color:var(--mut)}
}

/* Плитки категорий сравнения в тексте раздела */
.cmp-cats{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr))}
.cmp-cats li{background:var(--bg);padding:14px 16px;font-size:14.5px;line-height:1.5}
.cmp-cats b{display:block;margin-bottom:3px;font:600 15px/1.3 var(--os);color:var(--ink)}

/* Текстовые разделы страницы директора: ширина строки под чтение */
.prof__rich{max-width:74ch}
.prof__rich p{margin:0 0 12px;font-size:15.5px;line-height:1.65;color:var(--mut)}
.prof__rich p:last-child{margin-bottom:0}
.prof__rich ul{margin:0 0 12px;padding-left:1.15em;color:var(--mut)}
.prof__rich li{margin:0 0 6px;font-size:15.5px;line-height:1.6}
.prof__rich a{color:var(--ink);text-decoration-color:var(--y3)}
.prof__rich b,.prof__rich strong{color:var(--ink)}


/* Перечень рубрик на странице компании: список, а не строка через запятую —
   при переносе запятая оставалась висеть в начале следующей строки. */
.colist__h{margin:18px 0 8px;font:600 11px/1 var(--os);letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut)}
.colist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.colist li{margin:0}
.colist a{display:inline-block;padding:7px 12px;background:var(--bg);font-size:14px;
  line-height:1.3;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.colist a:hover{border-bottom-color:var(--y);background:var(--ln)}
.colist a:focus-visible{outline:3px solid var(--y);outline-offset:2px}


/* Пояснение к единице цены в подборе футляра */
.calcres__unit{margin:6px 0 12px;padding:9px 12px;background:var(--bg);
  border-left:3px solid var(--y);line-height:1.5;color:var(--mut);max-width:52ch}


/* Галерея настоящих фотографий изделий. Кадры одной высоты, подписи под
   ними; открытие во весь экран — тем же механизмом, что у чертежей. */
.photogal{border-top:1px solid var(--ln);padding-top:24px}
/* Кадры одной высоты и подписи на одном уровне: четыре снимка в ряд читаются
   как одна вещь только так. Прежде каждый кадр жил своей высотой, и в ряду
   из четырёх подписи стояли на четырёх разных уровнях.
   Обрезки при этом нет: object-fit:contain показывает снимок целиком и
   вписывает его в постоянную рамку — портретный кадр получает поля по бокам,
   а не срез, как было бы с cover. Постоянное отношение сторон заодно
   резервирует место, и вёрстка при загрузке не прыгает. */
.photogal__grid{display:grid;gap:16px;margin-top:14px;align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.photogal__i{margin:0;border:1px solid var(--ln);background:var(--w);
  display:flex;flex-direction:column}
.photogal__i picture{display:block;background:var(--bg);aspect-ratio:4/3}
.photogal__i img{display:block;width:100%;height:100%;object-fit:contain}
.photogal__i figcaption{margin-top:auto}
.photogal__i figcaption{padding:10px 12px;font-size:13.5px;line-height:1.45;color:var(--mut);
  border-top:1px solid var(--ln)}
/* Светлый серый по белому даёт 2,64 при норме 4,5 — тот же промах,
   что уже правился у надзаголовков. Основной приглушённый — 4,55. */
.photogal__i figcaption .sm{color:var(--mut)}


/* Инженерные схемы направлений. Одна манера на весь раздел: белое поле,
   тонкая рамка, подпись под кадром. Ширина адаптивная, обрезки нет. */
.schfig{margin:0 0 16px;border:1px solid var(--ln);background:var(--w)}
.schfig img{display:block;width:100%;max-width:880px;height:auto;margin:0 auto}
.schfig figcaption{padding:9px 12px;font-size:13px;line-height:1.45;color:var(--mut);
  border-top:1px solid var(--ln)}
.schsheet{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 6px}
.schsheet .sm{color:var(--mut)}





/* ── Комплект системы у блока покупки ──────────────────────────────────────
   Без связующего армирующий материал усилие не передаёт, и узнать об этом
   надо до корзины. Сеткой карточек внизу страницы этот блок занимал 608 px
   ради одной карточки; здесь то же самое строкой в 3–4 раза ниже. */
.syskit{margin-top:14px;border:1px solid var(--ln);background:var(--bg);padding:14px 16px}
.syskit__h{margin:0 0 10px;font:600 12px/1 var(--os);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut)}
.syskit__l{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.syskit__l li{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.syskit__n{flex:1 1 240px;min-width:0;font:600 15px/1.35 var(--tx);color:var(--ink);
  border-bottom:1px solid var(--ln)}
.syskit__n:hover{border-bottom-color:var(--ink)}
.syskit__p{flex:none;font:600 15px/1 var(--os);white-space:nowrap;font-variant-numeric:tabular-nums}
.syskit__l form{flex:none;margin:0}
.syskit__note{margin:10px 0 0;font:400 13px/1.5 var(--tx);color:var(--mut)}
.syskit__note a{color:var(--ink)}
@media (max-width:560px){
  .syskit{padding:12px 13px}
  .syskit__n{flex:1 1 100%}
  .syskit__l li{gap:6px 10px}
}

/* Цена в единицах материала. Вторая строка под ценой: «7 173 ₽ за пог. м ·
   100 пог. м в рулоне». Каталог продаёт рулонами и комплектами, инженер
   считает в метрах и квадратах — без пересчёта ламель за 717 300 ₽ и ламель
   за 46 740 ₽ в одном ряду нельзя сопоставить даже приблизительно. */
.prc__unit,.card__unit{display:block;margin-top:3px;font:400 13px/1.35 var(--tx);
  color:var(--mut);font-variant-numeric:tabular-nums}
.card__unit{font-size:12px}
.prc__unit .sm,.card__unit .sm{font-size:inherit;color:var(--mut)}

/* Пересчёт идёт: блок подбора приглушается и перестаёт принимать нажатия.
   Полосы прогресса нет намеренно — ответ приходит за десятые доли секунды,
   и мелькающая полоса читалась бы как ошибка. */
.calcbox.is-busy{position:relative}
.calcbox.is-busy > *{opacity:.55;transition:opacity .12s linear}
.calcbox.is-busy::after{content:"";position:absolute;inset:0;cursor:progress}
@media (prefers-reduced-motion:reduce){.calcbox.is-busy > *{transition:none}}

/* ── панель изделия ────────────────────────────────────────────────────────
   Кадров у расчёта бывает четыре: раскладка, устройство изделия, снимок
   производителя, фотография монтажа. Стопкой они вытягивают панель на 1200 px
   и под формой образуется пустота. Поэтому панель показывает ОДИН кадр, а
   остальные — переключателями под ним. Без JavaScript переключателей нет и
   видны все кадры подряд: расчёт от этого не меняется. */
.calcbox__vis--doc{display:grid;gap:12px;background:none;padding:0;min-height:0;
  grid-template-columns:minmax(0,1fr);align-items:start}
.calcbox__vis--doc .schfig{margin:0}
.calcbox__vis--doc .schsheet{margin:0}
.calcbox__vis--doc .scn{width:100%}

/* Переключатели кадров. Подпись словом, а не точкой: «Раскладка», «Изделие»,
   «Монтаж» — по ним видно, что ещё можно посмотреть, не открывая. */
.calcvis__tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.calcvis__tab{font:600 12px/1 var(--os);letter-spacing:.06em;text-transform:uppercase;
  padding:9px 12px;min-height:34px;border:1px solid var(--ln);background:var(--w);
  color:var(--mut);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.calcvis__tab:hover{color:var(--ink);border-color:var(--ink)}
.calcvis__tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--w)}
.calcvis__tab:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--y)}

/* Кнопка полноэкранного просмотра видна всегда, а не только под курсором:
   на чертеже в колонке 600 px подписи мелкие, и человек должен видеть выход
   на крупный размер, а не догадываться о нём. */
.calcvis__open{display:inline-flex;align-items:center;gap:7px;align-self:start;
  font:600 12px/1 var(--os);letter-spacing:.06em;text-transform:uppercase;
  min-height:34px;padding:9px 12px;border:1px solid var(--ink);background:var(--w);
  color:var(--ink);cursor:zoom-in}
.calcvis__open:hover{background:var(--y)}
.calcvis__open:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--y)}
.calcvis__open svg{flex:none}

/* Кадр в колонке. Предел ширины прежний — растягивать чертёж на 1920 нельзя:
   подписи выходят крупнее основного текста страницы. */
.calcbox__vis--doc .schfig img{max-width:100%}
.calcbox__vis--doc .scn--mdp,
.calcbox__vis--doc .scn--futl{max-width:100%}

/* Подписи схем, которые рисует код, в колонке 460…560 px выходили по 7 px.
   Кегль задан стилями, а не атрибутом, поэтому его можно поднять именно
   здесь. Прятать пояснительные подписи нельзя: без «контрольная трубка»
   на схеме футляра остаётся необъяснённый чёрный штрих. Они остаются, но
   на ступень мельче основных — так они не спорят с числами. */
@media (min-width:1200px){
  .calcbox__vis--doc .scn-t{font-size:14px}
  .calcbox__vis--doc .scn-t--dim{font-size:15px}
  .calcbox__vis--doc .scn-t--sec{font-size:12px}
  /* Предел ширины снимка не зависит от ширины окна: он о том, сколько
     места кадр вправе занять над формой. Раньше стоял только в полосе
     1000–1199, и на 1920 снимок изделия расходился до 560 px. */
  .calcbox__vis--doc > .schfig--ph{max-width:520px}
}

/* Во всю ширину (ниже 1200 px и на печати) кадры идут обычной сеткой:
   снимок не шире 520 px, чертёж — во всю строку. */
@media (max-width:1199px) and (min-width:1000px){
  /* Кадр над формой не должен занимать экран целиком: замер показал 671 px
     у лотков и 760 px у загрузки до первого поля ввода. */
  .calcbox__vis--doc .schfig img,
  .calcbox__vis--doc .scn{max-height:330px;width:auto;max-width:100%;margin:0 auto}
  .calcbox__vis--doc{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  .calcbox__vis--doc > *{grid-column:1/-1}
  .calcbox__vis--doc > .schfig--ph{grid-column:auto;max-width:520px}
  .calcbox__vis--doc > .schfig--ph img{height:230px;width:auto;max-width:100%;
    object-fit:contain;margin-left:auto;margin-right:auto;display:block}
  .calcbox__vis--doc .schfig img{max-width:880px}
}


/* Раздел схем во всю ширину. На широком экране — две в ряд, но не уже
   440 px: при меньшей ширине подписи на схеме перестают читаться. */
.schset{border-top:1px solid var(--ln);padding-top:24px}
/* Предел ширины: без него на 1920 схема растягивалась до 1714 px и подписи
   выходили 25…31 px — крупнее основного текста страницы. */
.schset .schfig{max-width:1240px;margin:0}
/* Колонка одна. Замер фактического кегля решает: при двух колонках схема
   получает 545…586 px и подпись в 13 единиц viewBox выходит 8…10,6 px —
   на грани читаемости. В одну колонку схема получает около 1230 px, и та же
   подпись становится 17…21 px. Мерилось на фактическом размере показа,
   а не на размере файла. */
.schset__grid{display:grid;gap:18px;margin-top:14px;grid-template-columns:minmax(0,1fr)}
.schset .schsheet{margin-top:14px}


/* Схема открывается во весь экран тем же механизмом, что чертежи: на телефоне
   254…324 px физически не хватает для подписей сложной схемы, и полноразмерный
   просмотр — не украшение, а способ её прочитать. */
.schfig.docfig--zoom .docfig__zoom{display:block;width:100%;border:0;padding:0;
  background:none;cursor:zoom-in}
.schfig .docfig__zoom:focus-visible{outline:3px solid var(--y);outline-offset:-3px}
.docfig--zoom figcaption::after{content:" · нажмите, чтобы открыть крупно";color:var(--ink)}


/* Прежнее решение было такое: ниже 1000 px схема сохраняла минимальную ширину
   (820 и 640 px) и прокручивалась ВНУТРИ своего кадра — иначе подписи выходили
   4 px и читать было нечего. Приёмка 04.09.2026 это решение отменила: схема
   выходила за рамку на 374 px, то есть часть чертежа была не видна без
   бокового движения пальцем, а требование прямое — на мобильном схема не
   должна ни обрезаться, ни прокручиваться вбок.

   Теперь схема на узком экране вписывается в кадр целиком и работает как
   миниатюра, а читается полноэкранным просмотром — кнопка «Увеличить» стоит
   на каждой схеме, и подпись прямо приглашает нажать. Это честнее: видно всю
   схему сразу, а не её левую треть. */
@media (max-width:1000px){
  .schset .schfig,.calcbox__vis--doc .schfig{overflow-x:hidden}
  .schset .schfig img,.calcbox__vis--doc .schfig img{min-width:0;width:100%}
}
.schset .schfig:focus-visible,.calcbox__vis--doc .schfig:focus-visible{outline:3px solid var(--y);outline-offset:2px}

/* Калькулятор внешнего армирования: пометка обязательного ядра системы и
   оговорка о слоях, которых в каталоге нет. */
/* --mut2 на белом даёт контраст 2,64 — ниже нормы. Пометка ядра системы
   служебная, но читать её должны все, поэтому цвет обычного пояснения. */
.fld__core{color:var(--mut);font-weight:400;white-space:nowrap}
.calcform2__note--absent{color:var(--mut);border-left:3px solid var(--ln);padding-left:10px}

/* Найдено при приёмке: у поля поиска в шапке не было видимого фокуса —
   обход табом «терял» его на одном шаге. Кольцо то же, что у остальных полей. */
.search__input:focus-visible,input[data-search-input]:focus-visible{
  outline:3px solid var(--y);outline-offset:2px}

/* ── Цель пальца: 44 × 44 на узком экране ───────────────────────────────────
   Ночной обход 04.09.2026 нашёл 12 видов управляющих элементов ниже нормы:
   кнопка сравнения в карточке 36 × 36, стрелки галереи 26 × 60, «Каталог» и
   поиск в липкой шапке 38 и 36 по высоте, телефон и почта в подвале 23,
   «Настройки cookies» 24, ссылка на отзывы 24, «Добавить ещё файл» 20.
   Правило собрано в одном месте, чтобы не разъезжалось по файлу. */
@media (max-width: 767px) {
  .skipl{padding-top:14px;padding-bottom:14px}
  .fld--check,.fld--check span,label.consent,.consent__l{min-height:44px}
  .stick__cat,.stick__srch{height:44px}
  .stick__srch button{width:44px;height:44px}
  .hdr__logo{display:flex;align-items:center;min-height:44px}
  .card__cmp button{width:44px;height:44px}
  .gal__slide{width:44px}
  a.rateline{min-height:44px}
  .ftr__tel,.ftr__col a[href^="mailto:"],.ftr__col a[href^="tel:"]{
    display:inline-flex;align-items:center;min-height:44px}
  .ftr__legal-btn,.ftr__legal a{min-height:44px;display:inline-flex;align-items:center}
  /* Кнопка «Во весь экран» — единственный способ прочитать схему на
     телефоне: 34 px мало, поднимаем до 44. */
  .calcvis__open{min-height:44px;padding:12px}
  .calcvis__tab{min-height:44px;padding-top:10px;padding-bottom:10px}
  .hero__pause{height:44px}
  /* Ссылки полосы согласия: область нажатия растягивается псевдоэлементом,
     чтобы не менять высоту самой полосы (она подобрана под первый экран). */
  .cc__d a{display:inline-block;padding:12px 0;position:relative}
  .cc__d a::after{content:"";position:absolute;left:0;right:0;top:50%;
    transform:translateY(-50%);height:44px}
  #add-calculation-file{display:inline-flex;align-items:center;min-height:44px}
  .mega__col a,.hmenu a{min-height:44px;display:flex;align-items:center}
  /* Звёзды оценки — 30 px вместе с полем: на телефоне промахнуться легко. */
  .rate__pick label{padding:11px}
  /* Строка списка позиций каталога — тоже цель: открывает карточку товара. */
  .kitlist a{min-height:44px;align-items:center}

}

/* ── покупка прямо из спецификации ─────────────────────────────────────────
   Расход посчитан, но купить его было нельзя: покупатель переписывал
   позиции руками. Теперь у каждой строки своя форма (работает и без
   JavaScript), а кнопка под таблицей нажимает их подряд. */
.spectbl__buy{white-space:nowrap;width:1%}
.spectbl__buy form{margin:0}
.spectbl__buy .btn{padding:0 12px;height:34px;font-size:12px}
.spectbl__total{font:700 20px/1 var(--os)}
.specbuy{margin:16px 0 0}
.specbuy .btn{display:inline-block;height:auto;padding:16px 24px;line-height:1.3;
  white-space:normal;text-align:center}
.specbuy .btn .sm{display:inline;color:inherit;opacity:.7;font-weight:400;white-space:nowrap}
html:not(.plate-js) .specbuy{display:none}
@media (max-width:600px){
  .spectbl__buy .btn{padding:0 10px;height:32px}
}
.kitbuy{margin:14px 0 0}
.kitbuy .btn{width:auto}

/* «Добавить ещё файл» был <a href="#"> — ссылка в никуда: без JavaScript она
   прыгала в начало страницы, а для читалки экрана выглядела ссылкой. Теперь
   это кнопка, и её надо привести к виду ссылки. */
button.interactive{padding:0;border:0;background:none;font:inherit;color:inherit;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
button.interactive:hover{text-decoration-color:var(--y)}

/* ── ссылка в строке текста всегда видна ──────────────────────────────────
   «Согласен с политикой конфиденциальности» — ссылка была того же цвета,
   что и текст, без подчёркивания и без линии: отличить её от обычных слов
   было нельзя, а согласие дают именно по ней. Дом стиля — жёлтая линия
   снизу, как у .rich a и .lnk; повторяем её для безклассовых ссылок внутри
   строк текста. Списки навигации не затрагиваются: там у ссылки нет
   соседнего текста, и она в списке, а не в абзаце. */
.sm a:not([class]),
label span a:not([class]),
.calcform2__note a:not([class]),
.calcnote a:not([class]),
figcaption a:not([class]),
.cc__d a:not([class]),
.fld__hint a:not([class]){
  border-bottom:2px solid var(--y);padding-bottom:1px}
.sm a:not([class]):hover,
label span a:not([class]):hover,
.calcform2__note a:not([class]):hover,
.calcnote a:not([class]):hover,
figcaption a:not([class]):hover,
.cc__d a:not([class]):hover,
.fld__hint a:not([class]):hover{border-bottom-color:currentColor}

/* Пояснения к расчёту одним блоком, а не стеной серых плашек. */
.calcfacts{margin:22px 0 0}
.calcfacts__l{margin:12px 0 0;display:grid;gap:0}
.calcfacts__l > div{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:8px 22px;
  padding:12px 0;border-top:1px solid var(--ln)}
.calcfacts__l > div:last-child{border-bottom:1px solid var(--ln)}
.calcfacts__l dt{font:600 14px/1.45 var(--tx);color:var(--mut)}
.calcfacts__l dd{margin:0;font:400 15px/1.5 var(--tx)}
@media (max-width:700px){
  .calcfacts__l > div{grid-template-columns:1fr;gap:4px}
}

/* ── спецификация усиления на телефоне ─────────────────────────────────────
   Семь колонок на 390 px превращались в боковую прокрутку: покупатель видел
   название и должен был тянуть таблицу вбок, чтобы дойти до суммы. На узком
   экране строка разворачивается карточкой, а подписи колонок подставляются
   из data-th. Разметка при этом остаётся таблицей — читалка экрана и печать
   видят её как таблицу. */
@media (max-width:700px){
  .spectbl--arm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .spectbl--arm,.spectbl--arm tbody,.spectbl--arm tfoot,.spectbl--arm tr,.spectbl--arm td{display:block;width:auto}
  /* Проценты ширины колонок заданы для широкого экрана и сильнее по весу:
     без сброса ячейка остаётся 26 % и текст жмётся в столбик по три слова. */
  .spectbl--arm th:nth-child(n),.spectbl--arm td:nth-child(n){width:auto}
  .spectbl--arm tr{padding:14px 0;border-bottom:1px solid var(--ln)}
  .spectbl--arm td{border:0;padding:2px 0}
  /* Подпись слева, значение справа: обтекание держит их на одной строке,
     даже когда значение состоит из числа и знака рубля отдельными узлами. */
  .spectbl--arm td.spectbl__n,.spectbl--arm td[data-th]{display:block;text-align:right;padding:3px 0}
  .spectbl--arm td[data-th]::before{content:attr(data-th);float:left;
    color:var(--mut);font:400 13px/1.5 var(--tx)}
  .spectbl--arm td.spectbl__n::before{content:attr(data-th);float:left;
    color:var(--mut);font:400 13px/1.5 var(--tx)}
  .spectbl--arm td.spectbl__buy{display:block;margin-top:10px}
  .spectbl--arm td.spectbl__buy .btn{width:100%}
  .spectbl--arm tfoot tr{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-bottom:0}
  .spectbl--arm tfoot td{padding:0}
  .tblwrap:has(.spectbl--arm){overflow:visible}
}

/* ── склад отгрузки ─────────────────────────────────────────────────────────
   Складов четыре, и до этой правки покупатель не знал ни одного: строка
   появляется там же, где он смотрит наличие и цену. Форма повторяет .stk,
   но метка полая, а не залитая, — «наличие» и «откуда поедет» не сливаются
   в одну строчку одинаковых квадратов. Цвет один, приглушённый: склад — это
   уточнение к наличию, а не второй его статус. */
.whs{display:inline-flex;align-items:center;gap:8px;font:400 14px/1.3 var(--tx);color:var(--mut)}
.whs::before{content:"";width:10px;height:10px;flex:none;box-shadow:inset 0 0 0 2px var(--mut)}

/* В шапке коммерческого блока строка встаёт третьей, а звёзды остаются
   прижатыми вправо (.buyhd .rateline{margin-left:auto}). */
.buyhd .whs{margin:0}
@media (max-width:600px){ .buyhd .whs{width:100%} }

/* В плитке витрины цена и наличие стоят в строку по базовой линии; склад
   уходит на свою строку, иначе на 320 px он разрывает пару «цена — наличие». */
.card__pr .whs{flex:1 0 100%;font-size:13px}
.card__pr .whs::before{width:8px;height:8px}
.store-items-table .card__pr .whs{flex:0 0 auto;justify-content:flex-end}

/* Строка корзины: подпись под названием позиции, с отступом на ширину
   миниатюры, чтобы читалась как продолжение названия, а не как новая ячейка. */
.whs--row{margin-top:6px;font-size:13px}
.cart__tbl .whs--row{padding-left:84px}
@media (max-width:1000px){ .cart__tbl .whs--row{padding-left:70px} }
@media (max-width:600px){ .cart__tbl .whs--row{padding-left:0} }

/* Шаг «доставка»: строка о складах стоит над выбором способа получения,
   потому что самовывоз зависит от неё. Лента как у .note, но тише —
   это уточнение, а не предупреждение. */
.whsnote{margin:0 0 18px;padding:12px 16px;background:var(--bg);
  border-left:4px solid var(--ln);font:400 15px/1.5 var(--tx);color:var(--ink)}

/* Блок «Склады отгрузки» в тексте страниц (/dostavka-oplata/, /kontakty/,
   /about/geografiya-prodazh/). Плитки, а не таблица: у складов разное по
   длине содержимое, и колонки таблицы пустовали бы. Селекторы продублированы
   с .rich: маркер и отступ списка в .rich объявлены через два типа элементов
   и по весу перебивают одиночный класс. */
.whs-cards,.rich .whs-cards{list-style:none;margin:20px 0 24px;padding:0;display:grid;gap:1px;
  background:var(--ln);border:1px solid var(--ln);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.whs-cards > li,.rich .whs-cards > li{position:static;margin:0;padding:16px 18px;
  background:var(--w);display:flex;flex-direction:column;gap:6px}
.whs-cards > li::before,.rich .whs-cards > li::before{content:none}
.whs-cards b{font:600 17px/1.2 var(--os);letter-spacing:.01em}
.whs-cards b::after{content:"";display:block;width:26px;height:3px;background:var(--y);margin-top:8px}
.whs-cards span{font:400 14px/1.5 var(--tx);color:var(--mut)}
/* Адрес самовывоза: покупателю нужен не только город, но и куда ехать. */
/* Пояснение под названием документа: шифр и объём — мелким, чтобы
   название читалось строкой, а не абзацем. */
.docs__note{display:block;margin-top:3px;font:400 12px/1.4 var(--tx);font-style:normal;color:var(--mut)}
.whs-cards em,.rich .whs-cards em{display:block;margin-top:8px;font:400 13px/1.45 var(--tx);
  font-style:normal;color:var(--ink)}

/* ── подпись схемы: пометка «пример» ───────────────────────────────────────
   Калькулятор раскладки открывается уже посчитанным: пока размеры не заданы,
   схема показана на примере. Пометка об этом стоит в подписи кадра и не
   должна читаться как часть его названия. */
.schfig__demo{color:var(--mut);font-weight:400;white-space:nowrap}
@media (max-width:560px){.schfig__demo{display:block;white-space:normal}}

/* Единица ввода площади усиления. Объект меряют рулеткой, и человек держит
   в руках погонные метры: даём выбрать, а пересчёт показываем строкой. */
.unitsw{display:flex;flex-direction:column;gap:7px;min-width:0}
.unitsw__lb{font:400 13px/1.3 var(--tx);color:var(--mut)}
.unitsw__row{display:flex;gap:8px;flex-wrap:wrap}
.unitsw__i{display:inline-flex;align-items:center;gap:7px;height:50px;padding:0 14px;
  border:2px solid var(--ln);background:var(--w);cursor:pointer;
  font:400 15px/1 var(--tx);color:var(--ink);transition:border-color .15s,background-color .15s}
.unitsw__i:hover{border-color:var(--mut2)}
.unitsw__i input{width:16px;height:16px;margin:0;accent-color:var(--ink)}
.unitsw__i:has(input:checked){border-color:var(--ink);background:var(--bg)}
.unitsw__i:focus-within{outline:2px solid var(--y);outline-offset:2px}
.fldnote{flex:1 1 100%;margin:0;font:400 13.5px/1.5 var(--tx);color:var(--mut)}
.fldnote b{color:var(--ink);font-weight:600}

/* ══ Сбор исходных данных на расчёт усиления (/calculation/ishodnye-dannye/) ══
   Форма разбита на четыре шага, но живёт одним <form>: без скриптов все шаги
   видны подряд и отправляются как обычная форма — задание всё равно соберётся
   на сервере. Скрипт лишь прячет лишние шаги, считает заполнение и печатает
   готовый текст. Поэтому здесь нет ни одного правила вида display:none по
   умолчанию: скрытие ставит сам скрипт. */
.zad{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;align-items:start;margin:22px 0 0}
.zad__side{position:sticky;top:20px;display:flex;flex-direction:column;gap:0}

/* Шаг. Рамка нужна, чтобы поля одного шага читались как один блок, когда
   скрипта нет и все четыре идут подряд. */
.zad__step{border:2px solid var(--ln);margin:0 0 18px;padding:20px 22px}
.zad__step legend{padding:0 8px;margin-left:-8px;
  font:600 13px/1 var(--os);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.zad__step > p{margin:0 0 16px;font:400 14px/1.55 var(--tx);color:var(--mut);max-width:60em}

/* Группа выбора. Кнопки — те же .seg, что в калькуляторах. */
.zad__g{border:0;margin:0 0 18px;padding:0}
.zad__g legend{padding:0;margin:0 0 10px;font:600 13px/1 var(--os);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink)}
.zad__opts{display:flex;flex-wrap:wrap;gap:2px}
.zad__opts .seg span{height:40px;padding:0 14px;font-size:14px}

/* Поле со статусом. Значение и «не знаю» стоят рядом, потому что ответ
   «данных нет» для инженера так же полезен, как число: он подскажет, чем
   пробел закрыть. */
.zad__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 20px}
.zad__f{display:flex;flex-direction:column;gap:6px;min-width:0}
.zad__f > span{font:400 13px/1.3 var(--tx);color:var(--mut)}
.zad__f .zad__in{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:8px}
.zad__f input,.zad__f select{height:44px;padding:0 12px;border:2px solid var(--ln);background:var(--w);
  font:400 15px/1 var(--tx);color:var(--ink);min-width:0;width:100%}
.zad__f select{font-size:13.5px;color:var(--mut)}
.zad__f input:focus,.zad__f select:focus{outline:2px solid var(--y);outline-offset:1px;border-color:var(--ink)}
/* Статус «не знаю» и «нет данных» гасит поле значения: два ответа сразу
   сбивают инженера с толку. */
.zad__f[data-off="1"] input{background:var(--bg);color:var(--mut)}

.zad__docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 20px;margin:0 0 18px}
.zad__docs label{display:flex;align-items:flex-start;gap:10px;font:400 15px/1.4 var(--tx);cursor:pointer}
.zad__docs input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--ink)}

.zad__nav{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* Правая колонка: что уже названо, сколько шагов пройдено, чего не хватает. */
.zad__card{border:2px solid var(--ln);padding:18px 20px;margin:0 0 14px;background:var(--w)}
.zad__card h3{margin:0 0 10px;font:600 13px/1 var(--os);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.zad__task{margin:0 0 12px;font:600 17px/1.3 var(--os);color:var(--ink)}
.zad__task--none{font-weight:400;font-family:var(--tx);font-size:15px;color:var(--mut)}
.zad__bar{height:6px;background:var(--bg);margin:0 0 8px}
.zad__bar i{display:block;height:100%;background:var(--y);transition:width .2s}
.zad__prog{margin:0;font:400 13px/1.4 var(--tx);color:var(--mut)}
.zad__miss{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.zad__miss li{position:relative;padding-left:20px;font:400 14px/1.45 var(--tx);color:var(--ink)}
.zad__miss li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--y)}
.zad__miss--ok li::before{background:var(--ok)}

/* Готовое задание. Показываем текстом, а не прячем в письмо: человек должен
   видеть, что именно уходит инженеру, и вправе это скопировать себе. */
.zad__out{width:100%;min-height:220px;padding:14px 16px;border:2px solid var(--ln);background:var(--bg);
  font:400 13.5px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);resize:vertical}
.zad__outrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}
.zad__copied{font:400 13px/1 var(--tx);color:var(--ok)}

@media (max-width:1000px){
  .zad{grid-template-columns:minmax(0,1fr);gap:22px}
  .zad__side{position:static}
}
@media (max-width:560px){
  .zad__step{padding:16px 14px}
  .zad__f .zad__in{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* Заголовок витрины расчётов. У раздела нет ни героя, ни снимка: первое, что
   видит человек, — строка заголовка, и на общем кегле она читалась как
   служебная подпись, а не как вход в инструменты. Кегль поднят до размера
   заголовка главной. Правило привязано к лиду витрины (:has), потому что
   заголовок печатает общий шаблон страницы — своего класса у него нет. */
main:has(> .solhub__lead) .sechead .h1{font-size:clamp(32px,4.4vw,54px);line-height:1.02}
main:has(> .solhub__lead) > .solhub__lead{font-size:clamp(17px,1.5vw,21px);max-width:62em}

/* ── Ссылка в тексте вне редакционной обёртки ────────────────────────────────
   Пока текстовые страницы жили внутри .rich, подчёркивание ссылкам давала
   она. После перевода на common-wide обёртки не стало — и 28 ссылок стали
   неотличимы от обычного текста: «Нанотехнологического центра композитов» на
   странице компании, телефоны во врезках, все пункты оглавления правовых
   страниц. Человек не видел, что по ним можно нажать.

   Правило берёт ссылки БЕЗ класса: у каждого компонента сайта класс есть, а
   безымянная ссылка внутри абзаца или списка — всегда ссылка в тексте.
   Списки документов и разделов оформляют свои строки сами. */
main :is(p,li,dd,dt,td,figcaption,blockquote) a:not([class]):not(.docs *):not(.folderlist *):not(.whs-cards *){
  border-bottom:2px solid var(--y);padding-bottom:1px}
main :is(p,li,dd,dt,td,figcaption,blockquote) a:not([class]):not(.docs *):not(.folderlist *):not(.whs-cards *):hover{
  border-bottom-color:var(--ink)}
/* На тёмных плитах жёлтая черта и есть акцент, ink на них не виден. */
.sec--dark :is(p,li,dd) a:not([class]):hover,.pmode :is(p,li,dd) a:not([class]):hover,
.calcask :is(p,li,dd) a:not([class]):hover{border-bottom-color:var(--w)}

/* ── Полоса фактов о компании ────────────────────────────────────────────────
   Страница «О компании» начиналась тремя плотными абзацами во всю ширину:
   первое, что видел человек, — стена текста. Цифры вынесены наверх и
   считаются кодом, а не вписаны словами: каталог правят в админке, и
   написанное число разошлось бы с товаром молча. */
.cofacts{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:1px;background:var(--ln);
  border:1px solid var(--ln);grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.cofacts > li{background:var(--w);padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.cofacts b{font:700 clamp(26px,2.6vw,34px)/1 var(--os);color:var(--ink);font-variant-numeric:tabular-nums}
.cofacts span{font:400 13.5px/1.4 var(--tx);color:var(--mut)}

/* Кадр во всю ширину колонки: странице нужен зрительный якорь, иначе она
   читается как договор. Пропорция фиксирована, чтобы блок не прыгал до
   загрузки снимка. */
.cowide{margin:30px 0 0;padding:0}
.cowide img{display:block;width:100%;height:auto;aspect-ratio:1366/420;object-fit:cover}
.cowide figcaption{margin-top:10px;font:400 13px/1.5 var(--tx);color:var(--mut)}

/* Разделы каталога списком в три колонки: восемнадцать чипов в строку
   читались как облако тегов, а не как оглавление каталога. */
.colinks{list-style:none;margin:14px 0 0;padding:0;columns:3;column-gap:34px}
.colinks li{break-inside:avoid;margin:0 0 9px}
@media (max-width:900px){ .colinks{columns:2} }
@media (max-width:560px){ .colinks{columns:1} }
/* На узком экране кадр 1366:420 превращается в полоску 120 px — снимок
   перестаёт читаться. Узкие исходники сняты вертикальнее, даём им место. */
@media (max-width:899px){ .cowide img{aspect-ratio:16/9} }
@media (max-width:560px){ .cowide img{aspect-ratio:4/3} }

/* Боковое меню разделов на телефоне: строка была 33 px при норме цели пальца
   в 44. Восемнадцать разделов подряд, промах по соседней строке — обычное
   дело. На широком экране высота остаётся прежней: там целится курсор. */
@media (max-width:767px){
  .asidenav a,.asidenav span{min-height:44px;display:flex;align-items:center;padding:9px 0}
}

/* Ссылка на источник нормы обрезалась двумя строками. На широком экране она
   в них укладывается, на 390 px — нет, и у расчёта пропадало главное:
   откуда взяты цифры. Ограничение снимаем только там, где оно врёт. */
@media (max-width:767px){
  .calcbox__src{-webkit-line-clamp:none;display:block;overflow:visible;min-height:0}
}