@import url('fonts.css?v=8f8e12af2e62234e');

:root {
  color-scheme: only light;

  --u1: 4px;  --u2: 8px;  --u3: 12px; --u4: 16px;
  --u5: 20px; --u6: 24px; --u8: 32px; --u10: 40px;
  --u12: 48px; --u16: 64px;

  --t-micro: 11px;  --lh-micro: 16px;
  --t-small: 12px;  --lh-small: 16px;
  --t-data: 13px;   --lh-data: 20px;
  --t-base: 15px;   --lh-base: 24px;
  --t-lead: 17px;   --lh-lead: 24px;
  --t-h2: 21px;     --lh-h2: 28px;
  --t-h1: 27px;     --lh-h1: 32px;

  --paper: #FBFAF7;
  --paper-2: #F3F1EC;
  --ink: #16150F;
  --ink-2: #55524A;
  --ink-3: #6F6B63;   /* было #86827A (3,4–3,7:1 — ниже WCAG AA); с 10.09.2026 ≥4,7:1 на любой бумаге, иерархия с ink-2 сохранена */
  --rule: #D6D2C8;
  --rule-2: #BFBAAE;

  --lube: #0B5FBF;
  --parts: #B35A00;
  --fire: #B3121E;
  --fuel: #0E6B3C;
  --stock: #0E6B3C;
  --order: #8A6D00;

  --dir: var(--ink);            /* цвет направления страницы; задаётся по body[data-dir] */
  --dir-ink: var(--ink);        /* его читаемая версия для текста и ссылок */
  --hl: #FFD400;
  --hl-soft: #FFF7D6;
  --hl-edge: #F0C400;

  --col: 1240px;
  --rail: 224px;
  --gutter: var(--u8);
}

/* Цвет направления (ADR-0012, исследование эталонов 04.09.2026, схема «Метка направления»).
   --dir     — сам цвет: лента под шапкой, подчёркивание активного пункта меню, квадрат-метка;
   --dir-ink — «чернильная» версия для текста и ссылок: у Освещения и Запчастей исходный цвет
               на бумаге не читается (1.6:1 и 2.7:1), поэтому текстом идут тёмная охра и жжёный оранжевый.
   Главная направления не имеет: лента чёрная, ссылки чёрные. */
body[data-dir="lube"]  { --dir: #0B5FBF; --dir-ink: #0B5FBF; }
body[data-dir="parts"] { --dir: #F07C00; --dir-ink: #8F4700; }
body[data-dir="fire"]  { --dir: #C81E2B; --dir-ink: #C81E2B; }
body[data-dir="fuel"]  { --dir: #0E7A44; --dir-ink: #0E7A44; }
body[data-dir="light"] { --dir: #F5C400; --dir-ink: #6B5600; }
body[data-dir="ctrl"]  { --dir: #7B2CBF; --dir-ink: #7B2CBF; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Golos Text', 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--t-base);
  line-height: var(--lh-base);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--dir-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: -0.012em; }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: -0.008em; }
h3 { font-size: var(--t-base); line-height: var(--lh-base); }
p { margin: 0 0 var(--u3); }

:where(a, button, input, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.wrap { max-width: var(--col); margin: 0 auto; padding: 0 var(--u6); }
.dim { color: var(--ink-3); }
.sec { color: var(--ink-2); }
.lbl {
  font-size: var(--t-micro); line-height: var(--lh-micro);
  text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: var(--ink-3);
}

.util { background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.util .wrap { display: flex; align-items: center; gap: var(--u5); height: var(--u8); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.util a { color: var(--ink-2); }
.util .r { margin-left: auto; display: flex; gap: var(--u4); }

/* лента 3 px под шапкой — в цвете направления (Hilti 3 px, McMaster 2 px, Festo 4 px под активным пунктом) */
.masthead { background: var(--paper); border-bottom: 3px solid var(--dir); }
.masthead .wrap { display: flex; align-items: center; gap: var(--u6); height: var(--u16); }
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
/* знак и название — файлы владельца (Труд/Машинерис/Логотип), не шрифт; указание владельца 14.09.2026 */
.logo .mark { display: block; width: 39px; height: 40px; }
.logo .wm { display: flex; align-items: center; }
.logo .wm img { display: block; width: auto; height: 22px; }
.logo:hover { text-decoration: none; }

.find { flex: 1; max-width: 520px; display: flex; border: 1px solid var(--ink); background: #fff; }
.find input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--u3); height: 34px; font: inherit; font-size: var(--t-data); color: var(--ink); }
.find input:focus { outline: 0; }
.find:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }   /* фокус видно на всей форме: у поля рамки нет */
.find button { flex: none; border: 0; background: var(--ink); color: var(--paper); font: inherit; font-size: var(--t-data); font-weight: 500; padding: 0 var(--u4); height: 34px; cursor: pointer; }

.tel { margin-left: auto; text-align: right; flex: none; }
.tel b { display: block; font-size: var(--t-lead); line-height: var(--lh-small); font-weight: 600; white-space: nowrap; }
.tel span { display: block; font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ink-3); }

.dirs { border-bottom: 1px solid var(--rule); background: var(--paper); }
.dirs .wrap { display: flex; overflow-x: auto; scrollbar-width: none; }
.dirs .wrap::-webkit-scrollbar { display: none; }
.dirs a {
  padding: var(--u3) 0; margin-right: var(--u5); font-size: var(--t-data); line-height: var(--lh-data);
  color: var(--ink-2); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.dirs a:hover { color: var(--ink); text-decoration: none; }
.dirs a.on { color: var(--ink); font-weight: 500; border-bottom: 3px solid var(--dir); margin-bottom: -2px; }

.crumb { display: flex; align-items: center; gap: var(--u2); padding: var(--u4) 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }
.crumb a { color: var(--ink-3); }
.crumb .r { margin-left: auto; display: flex; gap: var(--u4); }

.head { padding: var(--u3) 0 var(--u5); border-bottom: 1px solid var(--rule); }
.head .row { display: flex; align-items: baseline; gap: var(--u3); flex-wrap: wrap; }
.head .cnt { font-size: var(--t-data); line-height: var(--lh-data); color: var(--ink-3); }
.head .lede { max-width: 74ch; margin: var(--u2) 0 0; color: var(--ink-2); font-size: var(--t-base); }


.cols { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--gutter); align-items: start; padding-top: var(--u6); }

.rail { position: sticky; top: var(--u3); }
.rail .grp { margin-bottom: var(--u6); }
.rail .lbl { display: block; margin-bottom: var(--u2); padding-bottom: var(--u1); border-bottom: 1px solid var(--rule); }
.rail ul { list-style: none; margin: 0; padding: 0; }
.rail li { display: flex; align-items: baseline; gap: var(--u2); font-size: var(--t-data); line-height: var(--lh-data); padding: var(--u1) 0; }
.rail li a, .rail li .nm { color: var(--ink-2); }
.rail li a:hover { color: var(--ink); }
.rail li.on > a, .rail li.on > .nm { color: var(--ink); font-weight: 500; background: var(--hl); padding: 1px 5px; margin-left: -5px; }
.rail li.cur > a, .rail li.cur > .nm { color: var(--ink); font-weight: 500; }   /* раздел, внутри которого читаем: чёрный без заливки — жёлтая метка ушла на группу */
.rail li.on > a, .rail li.on > .nm { transition: background .12s linear; }
.rail li.sub { padding-left: var(--u3); }
.rail li.sub a { color: var(--ink-2); }
.rail li:hover a { color: var(--ink); }
.rail li .off { color: var(--ink-3); }   /* подраздел каталога, которого ещё нет: текст, а не ссылка в никуда */
.rail li .n { margin-left: auto; font-size: var(--t-micro); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rail .shape { display: flex; align-items: center; gap: var(--u2); padding: var(--u1) 0; font-size: var(--t-data); line-height: var(--lh-data); color: var(--ink-2); }
.rail .shape:hover { color: var(--ink); text-decoration: none; }
.rail .shape svg { filter: grayscale(1); transition: filter .12s linear; }
.rail .shape:hover svg { filter: none; }
.rail .shape:hover svg path, .rail .shape:hover svg rect, .rail .shape:hover svg circle { stroke: var(--dir-ink); }
.rail .shape svg { flex: none; }

.tbl-wrap { overflow-x: auto; }   /* при ширине ≥1240 таблица помещается и прокрутки нет */
table.cat { width: 100%; border-collapse: collapse; font-size: var(--t-data); line-height: var(--lh-data); }
table.cat thead th {
  position: sticky; top: 0; z-index: 2; background: var(--paper);
  text-align: left; vertical-align: bottom; font-weight: 500;
  font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ink-2);
  padding: var(--u2) var(--u3) var(--u2) 0; border-bottom: 1.5px solid var(--ink);
}
table.cat thead th .unit { display: block; color: var(--ink-3); font-weight: 400; }
table.cat th.num, table.cat td.num { text-align: right; padding-right: var(--u4); }
table.cat tbody td { border-bottom: 1px solid var(--rule); vertical-align: middle; }
/* подсветка строки: не заливка, а яркая линия-подчёркивание во всю ширину строки (box-shadow не меняет высоту) */
table.cat tbody td { transition: box-shadow .12s linear; }
table.cat tbody tr:hover td { box-shadow: inset 0 -3px 0 var(--hl); }
table.cat tbody tr:hover .act { border-color: var(--ink); background: #fff; }

table.cat tr.grp { height: auto; }
table.cat tr.grp td {
  padding: var(--u6) 0 var(--u2) 0; background: var(--paper);
  border-bottom: 1px solid var(--rule-2); font-weight: 600; font-size: var(--t-data);
}
table.cat tr.grp .hint { display: inline; margin-left: var(--u2); font-weight: 400; color: var(--ink-2); }
table.cat .art { white-space: nowrap; color: var(--ink); font-size: var(--t-small); font-weight: 500; }
table.cat .nm a { color: var(--dir-ink); }   /* ссылки в теле и таблицах — чернильный цвет направления (схема «Метка направления») */
table.cat tbody tr:hover .nm a { text-decoration: underline; text-underline-offset: 2px; }
table.cat .price { white-space: nowrap; font-weight: 600; }
table.cat .st.in { color: var(--stock); }
table.cat .st.wait { color: var(--order); }
table.cat .dash { color: var(--rule-2); }
table.cat .act { border: 1px solid var(--rule-2); background: transparent; color: var(--ink); font: inherit; font-size: var(--t-small); line-height: var(--lh-small); padding: var(--u1) var(--u3); cursor: pointer; white-space: nowrap; }
table.cat .act:hover { border-color: var(--ink); background: #fff; }

.gloss { margin-top: var(--u12); padding-top: var(--u5); border-top: 1px solid var(--rule); }

.pfoot { margin-top: var(--u16); border-top: 2px solid var(--ink); background: var(--paper-2); }
.pfoot .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: var(--u8); padding-top: var(--u6); padding-bottom: var(--u6); font-size: var(--t-data); line-height: var(--lh-data); color: var(--ink-2); }
.pfoot .lbl { display: block; margin-bottom: var(--u2); }
.pfoot .brand-name { text-transform: none; letter-spacing: normal; }
.pfoot ul { list-style: none; margin: 0; padding: 0; }
.pfoot li { padding: 2px 0; }
.pfoot a { color: var(--ink-2); }
.pfoot .big { font-size: var(--t-lead); color: var(--ink); font-weight: 600; }
.req { border-top: 1px solid var(--rule); background: var(--paper-2); }
.req .wrap { display: flex; gap: var(--u5); flex-wrap: wrap; padding-top: var(--u3); padding-bottom: var(--u3); font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ink-3); }

@media screen and (max-width: 900px) {
  .cols { grid-template-columns: minmax(0, 1fr); gap: var(--u5); }
  .rail { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--u5); padding-bottom: var(--u4); border-bottom: 1px solid var(--rule); }
  .rail .grp { margin-bottom: 0; }
  .pfoot .wrap { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 620px) {
  .find, .util .r { display: none; }
  .masthead .wrap { height: 56px; gap: var(--u4); }
  .logo .mark { width: 34px; height: 35px; }
  .logo .wm img { height: 19px; }
  h1 { font-size: var(--t-h2); line-height: var(--lh-h2); }
  .pfoot .wrap { grid-template-columns: 1fr; gap: var(--u5); }
}

@media print {
  .util, .dirs, .find, .rail, .crumb .r, .act, .pfoot { display: none !important; }
  body { background: #fff; font-size: 10pt; }
  .masthead { border-bottom: 1pt solid #000; }
  .cols { display: block; }
  .tbl-wrap { overflow-x: auto; }   /* при ширине ≥1240 таблица помещается и прокрутки нет */
  table.cat { min-width: 0; }
  table.cat thead th { position: static; border-bottom: 1pt solid #000; }
  tr, .guide { break-inside: avoid; }
}

/* левая колонка — фиксированные 560 px под квадратный кадр; правая — остальное */
.prod { display: grid; grid-template-columns: minmax(560px, 44%) minmax(0, 1fr); gap: var(--u12); padding-top: var(--u6); align-items: start; }   /* кадр не уже 560, на широком контейнере растёт */
.prod-id { border-bottom: 1px solid var(--rule); padding-bottom: var(--u4); margin-bottom: var(--u5); }
/* кикер над H1: единственное место цвета направления в тексте; сам H1 остаётся чёрным */
.prod-id .kind, .kick { font-size: var(--t-micro); line-height: var(--lh-micro); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; color: var(--dir-ink); }
.kick { display: block; margin-bottom: var(--u1); }
.prod-id h1 { margin: var(--u1) 0 var(--u2); }
.prod-id .codes { display: flex; gap: var(--u5); flex-wrap: wrap; font-size: var(--t-data); line-height: var(--lh-data); color: var(--ink-2); }
.prod-id .codes b { color: var(--ink); font-weight: 500; }

.draw { border: 1px solid var(--rule); background: #fff; padding: var(--u4); }
.draw svg { display: block; width: 100%; height: auto; color: #4A473F; --sk-port: #8A857C; transition: color .16s linear; }
.draw:hover svg { color: var(--dir-ink); --sk-port: var(--parts); --sk-txt: var(--ink-2); }
.draw:hover { border-color: var(--rule-2); }
.draw figcaption { margin-top: var(--u3); padding-top: var(--u2); border-top: 1px solid var(--rule); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }

.spec { width: 100%; border-collapse: collapse; font-size: var(--t-data); line-height: var(--lh-data); }
.spec th, .spec td { text-align: left; padding: var(--u2) var(--u3) var(--u2) 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.spec tbody tr:hover th, .spec tbody tr:hover td { box-shadow: inset 0 -3px 0 var(--hl); }
.docs a:hover { box-shadow: inset 0 -3px 0 var(--hl); }
.spec th { font-weight: 400; color: var(--ink-2); width: 46%; }
.spec td { font-weight: 500; }
.spec tr.pos th { color: var(--ink); font-weight: 500; }
.spec .num { text-align: right; }

.rightcol { position: sticky; top: var(--u3); display: grid; gap: var(--u4); max-width: 560px; }
.buy { border: 1px solid var(--ink); padding: var(--u4); }
.key { border: 1px solid var(--rule); padding: var(--u4); }
.key .lbl { display: block; margin-bottom: var(--u2); padding-bottom: var(--u1); border-bottom: 1px solid var(--rule); }
.key dl { margin: 0; font-size: var(--t-data); line-height: var(--lh-data); }
.key dl > div { display: flex; justify-content: space-between; gap: var(--u4); padding: var(--u1) 0; border-bottom: 1px solid var(--rule); }
.key dl > div:hover { box-shadow: inset 0 -3px 0 var(--hl); }
.key dl > div:hover dd { background: var(--hl); padding: 0 4px; margin: 0 -4px; }
.key dl > div:last-of-type { border-bottom: 0; }
.key dt { color: var(--ink-2); }
.key dd { margin: 0; font-weight: 500; }
.key .cmp { display: inline-block; margin-top: var(--u3); font-size: var(--t-data); }
.buy .price { font-size: 27px; line-height: 32px; font-weight: 600; letter-spacing: -0.012em; }
.buy .price small { font-size: var(--t-data); font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
.buy .tiers { margin: var(--u2) 0 0; font-size: var(--t-data); line-height: var(--lh-data); color: var(--ink-2); }
.buy .tiers span { display: flex; justify-content: space-between; gap: var(--u4); padding: 2px 0; }
.buy .stock { margin-top: var(--u4); padding-top: var(--u3); border-top: 1px solid var(--rule); font-size: var(--t-data); line-height: var(--lh-data); }
.buy .stock b { color: var(--stock); font-weight: 500; }
.buy .btns { display: grid; gap: var(--u2); margin-top: var(--u4); }
.buy button { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: inherit; font-size: var(--t-base); font-weight: 500; padding: var(--u2) var(--u4); cursor: pointer; }
.buy button.alt { background: transparent; color: var(--ink); }
.buy button:hover { opacity: .88; }
.buy .note { margin-top: var(--u3); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }

.block { margin-top: var(--u12); }
.block > h2 { padding-bottom: var(--u2); border-bottom: 1.5px solid var(--ink); margin-bottom: var(--u4); }
.docs { display: grid; gap: 0; }
.docs a { display: flex; align-items: baseline; gap: var(--u3); padding: var(--u3) 0; border-bottom: 1px solid var(--rule); color: var(--ink); font-size: var(--t-data); line-height: var(--lh-data); }
.docs a:hover { text-decoration: none; }
.docs a .meta { margin-left: auto; color: var(--ink-3); font-size: var(--t-small); white-space: nowrap; }

.cross th.st, .cross td.st { white-space: nowrap; }
.cross td.ok { color: var(--stock); }
.cross td.warn { color: var(--order); }

@media screen and (max-width: 900px) {
  .prod { grid-template-columns: minmax(0, 1fr); gap: var(--u6); }
  .gal .main { max-width: 560px; }
  .rightcol { position: static; grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 620px) {
  .rightcol { grid-template-columns: 1fr; }
}

/* Карточка: галерея фото. Главный кадр 4:3 на всю ширину колонки — у всех карточек один размер;
   изделие в кадре по центру силуэта. Миниатюры полосой под кадром. Ч/б в покое, цвет под курсором. */
.gal { display: block; }
/* кадр владельца квадратный, с его отступами; внутреннее поле 12 px — чтобы изделие не упиралось в рамку */
.gal .main { display: block; width: 100%; aspect-ratio: 1 / 1; padding: var(--u3); border: 1px solid var(--rule); background: #fff; box-sizing: border-box; }
.gal .main img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); transition: filter .16s linear; }
.gal .main:hover img, .gal .main:focus-within img { filter: none; }
.gal .main:hover { border-color: var(--rule-2); }
.gal .thumbs { display: flex; flex-wrap: wrap; gap: var(--u2); margin: var(--u2) 0 0; padding: 0; list-style: none; }
.gal .thumbs button { display: block; width: 96px; aspect-ratio: 1 / 1; padding: 4px; border: 1px solid var(--rule); background: #fff; cursor: pointer; }
.gal .thumbs button img { display: block; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); transition: filter .16s linear; }
.gal .thumbs button:hover img, .gal .thumbs button[aria-current="true"] img { filter: none; }
.gal .thumbs button[aria-current="true"] { border-color: var(--ink); }
.gal .cap { margin: var(--u2) 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }
.gal .cap b { color: var(--ink-2); font-weight: 500; }
@media print {
  .gal .main img, .gal .thumbs img { filter: none; }
}

/* ---- v2.2: подписи групп, лист чертежа, боковые заметки ---- */

@media screen and (max-width: 900px) { .sheet { grid-template-columns: minmax(0, 1fr); } .sheet-side { position: static; } }
@media print { .sheet { display: block; } .sheet-view { border: 1pt solid #000; page-break-inside: avoid; } .backlink, .dwglink { display: none; } }

/* ================================================================
   Таблица каталога (v2.4, 04.09.2026). Один блок вместо наслоений.
   Принципы: раскладка auto — текст переносится, наложение невозможно;
   у крайних колонок одинаковая предпочтительная ширина во всех группах;
   чертёж в строке не подменяется — при наведении окрашивается, фото показывается рядом.
   ================================================================ */
table.cat[id] { scroll-margin-top: var(--u10); }   /* переход по ссылке из рельса: заголовок группы не уходит под закреплённую шапку */

/* маркер артикула — на самом коде, не на всей ячейке */

/* чертёж в покое, фотография под курсором: оба — квадрат с одинаковым полем, поэтому центр и масштаб совпадают */
table.cat .pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
table.cat .pic .d { transition: opacity .14s linear; }
table.cat .pic .p { opacity: 0; transition: opacity .14s linear; }
table.cat tbody tr:hover .pic.swap .d { opacity: 0; }   /* прячем чертёж только когда есть фото на замену */
table.cat tbody tr:hover .pic .p { opacity: 1; }

table.cat td.num.dash, table.cat td.st.dash { color: var(--ink-3); }

.dwglink { display: flex; align-items: baseline; gap: var(--u3); margin-top: var(--u4);
  padding: var(--u3); border: 1px solid var(--ink); color: var(--ink); font-size: var(--t-data); }
.dwglink:hover { box-shadow: inset 0 -3px 0 var(--hl); text-decoration: none; }
.dwglink span:first-child { font-weight: 500; }
.dwglink .meta { margin-left: auto; color: var(--ink-3); font-size: var(--t-small); }

.sheet { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: var(--u8); padding: var(--u6) 0 0; align-items: start; }
.sheet-view { border: 1.4px solid var(--ink); background: #fff; padding: var(--u8); display: flex; align-items: center; justify-content: center; min-height: 420px; }
.sheet-view img { max-width: 100%; height: auto; display: block; }
.sheet-side { position: sticky; top: var(--u3); }
.sheet-tb { border: 1px solid var(--ink); }
.sheet-tb .t1 { padding: var(--u3); border-bottom: 1px solid var(--ink); font-weight: 600; font-size: var(--t-base); line-height: var(--lh-base); }
.sheet-tb .t2 { display: flex; align-items: baseline; gap: var(--u3); padding: var(--u2) var(--u3); border-bottom: 1px solid var(--rule); }
.sheet-tb .t2 .lbl { flex: none; width: 84px; }
.sheet-tb .t2 b { font-size: var(--t-base); font-weight: 600; }
.sheet-tb .t3 { display: flex; padding: var(--u2) var(--u3); font-size: var(--t-small); color: var(--ink-2); }
.sheet-tb .t3 span { margin-left: auto; color: var(--ink-3); }
.dimtbl { width: 100%; border-collapse: collapse; margin-top: var(--u5); font-size: var(--t-data); line-height: var(--lh-data); }
.dimtbl caption { text-align: left; caption-side: top; padding-bottom: var(--u2); font-weight: 600; }
.dimtbl th, .dimtbl td { text-align: left; padding: var(--u2) var(--u3) var(--u2) 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.dimtbl thead th { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 600; border-bottom: 1.5px solid var(--ink); }
.dimtbl tbody th { font-weight: 600; width: 62px; }
.dimtbl .v { text-align: right; padding-right: 0; font-weight: 500; white-space: nowrap; }
.dimtbl tbody tr:hover th, .dimtbl tbody tr:hover td { box-shadow: inset 0 -3px 0 var(--hl); }
.srcnote { margin-top: var(--u4); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }
.backlink { display: inline-block; margin-top: var(--u3); font-size: var(--t-data); }
@media screen and (max-width: 900px) { .sheet { grid-template-columns: minmax(0, 1fr); } .sheet-side { position: static; } }
@media print { .sheet { display: block; } .sheet-view { border: 1pt solid #000; page-break-inside: avoid; } .backlink, .dwglink { display: none; } }

/* ================================================================
   Таблица каталога (v2.4, 04.09.2026). Один блок вместо наслоений.
   Принципы: раскладка auto — текст переносится, наложение невозможно;
   у крайних колонок одинаковая предпочтительная ширина во всех группах;
   чертёж в строке не подменяется — при наведении окрашивается, фото показывается рядом.
   ================================================================ */
table.cat { table-layout: auto; width: 100%; }
table.cat + table.cat { margin-top: var(--u8); }
table.cat caption { text-align: left; caption-side: top; padding: 0 0 var(--u2); font-weight: 600; font-size: var(--t-base); line-height: var(--lh-base); color: var(--ink); }
table.cat caption .ttl { font-weight: 600; }
table.cat caption .hint { font-weight: 400; color: var(--ink-2); font-size: var(--t-data); }
table.cat caption .n { color: var(--ink-3); font-weight: 400; font-size: var(--t-data); margin-left: var(--u2); }

table.cat thead th { white-space: normal; vertical-align: bottom; padding: var(--u2) var(--u2) var(--u2) var(--u2); }
table.cat thead th .unit { white-space: nowrap; }
table.cat thead th:first-child { padding-left: 0; }

table.cat tbody tr { height: 64px; }
table.cat tbody td { padding: var(--u2) var(--u2); white-space: normal; overflow-wrap: normal; }
table.cat tbody td:first-child { padding-left: 0; padding-right: var(--u3); }
table.cat tbody td.art { padding-left: var(--u1); }
table.cat .art, table.cat .num, table.cat .ph { white-space: nowrap; }
table.cat .st { white-space: nowrap; font-size: var(--t-small); }
table.cat .ph { color: var(--ink-3); font-size: var(--t-small); }
table.cat td.num.dash, table.cat td.st.dash { color: var(--ink-3); white-space: nowrap; }
table.cat .act { white-space: nowrap; font-size: var(--t-micro); padding: 4px 8px; }

/* маркер артикула — на самом коде, не на всей ячейке */
table.cat .mk { padding: 2px 5px; margin-left: -5px; transition: background .12s linear; }
table.cat tbody tr:hover .mk { background: var(--hl); }

table.cat .pic { position: relative; display: block; width: 56px; height: 56px; }

table.cat.sib tbody tr { height: 56px; }
table.cat.sib .ph { white-space: normal; color: var(--ink-2); font-size: var(--t-small); }
.tbl-wrap .tblnote { margin: var(--u6) 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); max-width: 82ch; }
.rail .railnote { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); margin: 0 0 var(--u2); }

@media print {
  table.cat .pic .p { display: none; }
}

/* общие колонки держат ширину жёстко; разницу между группами принимают колонки параметров */
table.cat td.sk, table.cat th.sk { width: 62px; min-width: 62px; }
table.cat td.art { width: 104px; min-width: 104px; }
table.cat td.nm { width: 140px; min-width: 140px; max-width: 140px; }
table.cat td.tx { white-space: nowrap; }
table.cat td.st { width: 90px; min-width: 90px; }
table.cat td.price { width: 92px; min-width: 92px; }   /* только колонка цены, не любой прочерк */
table.cat td:last-child, table.cat th:last-child { width: 74px; min-width: 74px; }

/* ================================================================
   Главная страница (v2.4). Первый экран — рабочий вход, не плакат.
   ================================================================ */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: var(--u12); padding: var(--u8) 0 var(--u6); border-bottom: 1px solid var(--rule); align-items: start; }
.hero h1 { font-size: var(--t-h1); line-height: var(--lh-h1); }
.hero .offer { margin: var(--u4) 0 0; font-size: var(--t-lead); line-height: var(--lh-lead); font-weight: 500; }
.hero .offer .mk { background: var(--hl); padding: 2px 6px; margin-left: -6px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero .lede { margin: var(--u4) 0 0; max-width: 62ch; color: var(--ink-2); }
.hero-e { display: grid; gap: var(--u6); }
.bigfind .lbl { display: block; margin-bottom: var(--u2); }
.bigfind .row { display: flex; border: 1px solid var(--ink); background: #fff; }
.bigfind input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--u3); height: 44px; font: inherit; font-size: var(--t-base); color: var(--ink); }
.bigfind input:focus { outline: 0; }
.bigfind .row:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.bigfind button { flex: none; border: 0; background: var(--ink); color: var(--paper); font: inherit; font-size: var(--t-base); font-weight: 500; padding: 0 var(--u5); height: 44px; cursor: pointer; }
.bigfind .hint { margin: var(--u2) 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }
.bymachine .lbl { display: block; margin-bottom: var(--u2); padding-bottom: var(--u1); border-bottom: 1px solid var(--rule); }
.bymachine ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--u5); }
.bymachine li { font-size: var(--t-data); line-height: var(--lh-data); padding: var(--u1) 0; border-bottom: 1px solid var(--rule); }
.bymachine li a { color: var(--ink); }

.block > h2 .more { font-size: var(--t-data); font-weight: 400; margin-left: var(--u3); }
.dirlist { width: 100%; border-collapse: collapse; font-size: var(--t-base); line-height: var(--lh-base); }
.dirlist td { padding: var(--u3) var(--u3) var(--u3) 0; border-bottom: 1px solid var(--rule); vertical-align: top; transition: box-shadow .12s linear; }
.dirlist tr:hover td { box-shadow: inset 0 -3px 0 var(--hl); }
.dirlist td.c { width: 22px; padding-top: 17px; }
.dirlist td.c i { display: block; width: 10px; height: 10px; }
.dirlist td.n { width: 30%; font-weight: 500; }
.dirlist td.n a { color: var(--ink); }
.dirlist td.d { color: var(--ink-2); font-size: var(--t-data); line-height: var(--lh-data); }
.dirlist td.s { width: 15%; text-align: right; padding-right: 0; font-size: var(--t-small); color: var(--ink-3); white-space: nowrap; }

.dirlist.useful td.n { width: 30%; }
.block .lede { margin: 0 0 var(--u4); max-width: 74ch; color: var(--ink-2); }
.block.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--u12); }
.facts { margin: 0; }
.facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--u4); padding: var(--u3) 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.facts dt { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 600; letter-spacing: -0.012em; }
.facts dd { margin: 0; color: var(--ink-2); }
.small { font-size: var(--t-small); line-height: var(--lh-small); margin-top: var(--u3); }
.steps { margin: 0; padding-left: 1.4em; color: var(--ink-2); }
.steps li { padding: var(--u2) 0; border-bottom: 1px solid var(--rule); }
.steps li b { color: var(--ink); font-weight: 500; }
.contact .big { font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: 600; margin: 0 0 var(--u1); }
@media screen and (max-width: 900px) {
  .hero, .block.two { grid-template-columns: minmax(0, 1fr); gap: var(--u6); }
  .dirlist td.d { display: none; }
}

/* ================================================================
   Поиск по артикулу и спецификация (v2.5)
   ================================================================ */
.find, .bigfind { position: relative; }
.sr { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: var(--paper); border: 1px solid var(--ink); border-top: 0; max-height: 420px; overflow: auto; }
.bigfind .sr { top: auto; margin-top: -1px; }
.sr-row { display: grid; grid-template-columns: 40px 150px minmax(0, 1fr) auto; gap: var(--u3); align-items: center; padding: var(--u2) var(--u3); border-bottom: 1px solid var(--rule); color: var(--ink); font-size: var(--t-data); line-height: var(--lh-data); }
.sr-row:last-child { border-bottom: 0; }
.sr-row:hover { text-decoration: none; box-shadow: inset 0 -3px 0 var(--hl); }
.sr-row img { width: 40px; height: 40px; object-fit: contain; display: block; }
.sr-code { font-weight: 500; white-space: nowrap; }
.sr-code .sr-m { color: var(--ink-3); font-weight: 400; }
.sr-name { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-grp { color: var(--ink-3); font-size: var(--t-small); white-space: nowrap; }
.sr-none { padding: var(--u3); font-size: var(--t-data); color: var(--ink-2); }
.speclink .n { color: var(--ink); font-weight: 600; }
/* выбранное — жёлтым, как везде */
table.cat .act.on { background: var(--hl); border-color: var(--hl-edge); }
.buy button.on { background: var(--hl); color: var(--ink); border-color: var(--hl-edge); }
.buy .btns .btn.alt { display: block; text-align: center; border: 1px solid var(--ink); color: var(--ink); padding: var(--u2) var(--u4); font-size: var(--t-base); font-weight: 500; }
.buy .btns .btn.alt:hover { text-decoration: none; background: #fff; }
.spec-t .qty { width: 64px; padding: 4px 6px; border: 1px solid var(--rule-2); background: #fff; font: inherit; font-size: var(--t-data); text-align: right; }
table.cat.spec-t td.nm { max-width: none; min-width: 0; width: 34%; }   /* наименование — главная колонка списка */
table.cat.spec-t td.tx { white-space: normal; }
.specempty { margin: var(--u6) 0; color: var(--ink-2); }
.specact { display: flex; gap: var(--u3); margin-top: var(--u6); }
.btn { display: inline-block; border: 1px solid var(--ink); padding: var(--u2) var(--u5); font: inherit; font-size: var(--t-base); font-weight: 500; cursor: pointer; }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { opacity: .88; text-decoration: none; }
.btn.alt { background: transparent; color: var(--ink); }
@media print { .sr, .specact, .speclink, .spec-t .act { display: none !important; } .spec-t .qty { border: 0; } }

/* ================================================================
   Мобильная вёрстка (v2.6). Точки перелома по дизайн-системе §3: 900 и 620 px.
   ================================================================ */
@media screen and (max-width: 900px) {
  /* рельс разделов — «чипсы» в несколько строк, а не длинный столбец над таблицей */
  .rail { display: block; border-bottom: 0; padding-bottom: 0; }
  .rail .grp { margin-bottom: var(--u3); }
  .rail .grp:not(:first-child) { display: none; }
  .rail .lbl { display: none; }
  /* чипсы переносятся на новые строки — без прокрутки вбок (замечание владельца 08.09.2026) */
  .rail ul { display: flex; flex-wrap: wrap; gap: var(--u2); padding: var(--u1) 0 var(--u3); margin: 0; }
  .rail li { flex: none; padding: 0; }
  .rail li a, .rail li .nm { display: inline-block; border: 1px solid var(--rule-2); padding: var(--u1) var(--u3); color: var(--ink); white-space: nowrap; }
  .rail li.on > a, .rail li.on > .nm { background: var(--hl); border-color: var(--hl-edge); margin: 0; padding: var(--u1) var(--u3); }
  .rail li .off { border-style: dashed; }
  .rail li.sub { padding-left: 0; }
  .rail li .n { margin-left: var(--u1); }
  .crumb { flex-wrap: wrap; row-gap: 0; }
}
@media screen and (max-width: 620px) {
  /* поиск остаётся: второй строкой шапки, во всю ширину */
  .masthead .wrap { flex-wrap: wrap; height: auto; padding-top: var(--u3); padding-bottom: var(--u3); gap: var(--u3) var(--u4); }
  .find { display: flex; order: 3; flex: 1 1 100%; max-width: none; }
  .tel { margin-left: auto; }
  /* в служебной полосе оставляем только город и спецификацию — в одну строку */
  .util .place .more { display: none; }
  .util .r { display: flex; flex: none; white-space: nowrap; }
  .util .r a:not(.speclink) { display: none; }
  .crumb .r { display: none; }
  .head .row { flex-direction: column; gap: var(--u1); }
  .prod-id .codes { gap: var(--u2) var(--u4); }
  .gal .thumbs button { width: 72px; }
  .specact { flex-direction: column; }
  .specact .btn { text-align: center; }
}

/* печать: чистый документ без интерфейса; чертежи и фото карточки печатаются */
@media print {
  .hero-e, .bymachine, .speclink, .sr, .dwglink, .gal .thumbs, .gal .cap, .buy .btns, .buy .note { display: none !important; }
  .prod { display: block; }
  .rightcol { position: static; max-width: none; display: block; margin-top: 12pt; }
  .gal .main { max-width: 90mm; border: 0; padding: 0; }
  table.cat tbody tr { height: auto; }
  table.cat .pic { width: 40px; height: 40px; }
  a { color: #000; }
  .masthead { border-bottom: 1.5pt solid #000; }
  .kick { color: #000; }
}

/* ================================================================
   Каталог на узком экране (v2.7, 08.09.2026). Горизонтальной прокрутки нет:
   строка таблицы становится карточкой — чертёж, артикул, исполнение, ниже параметры
   столбиком «название · значение» (подписи из data-l), внизу цена, наличие и кнопка.
   На планшете карточки встают в две колонки, на телефоне — в одну.
   ================================================================ */
@media screen and (max-width: 900px) {
  .tbl-wrap { margin: 0; padding: 0; overflow: visible; }
  table.cat { display: block; width: auto; min-width: 0; }
  table.cat colgroup, table.cat thead { display: none; }
  table.cat caption { display: block; }
  table.cat tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--u3); }
  table.cat tbody tr { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--u3); align-content: start;
    height: auto; padding: var(--u3); border: 1px solid var(--rule); background: #fff; }
  table.cat tbody tr:hover { border-color: var(--ink); }
  table.cat tbody tr:hover td { box-shadow: none; }          /* подсветка строки — только у таблицы */
  /* !important — единственное место: ширины колонок таблицы (td.price 92 px, td:last-child 74 px и т. п.) заданы
     более специфичными правилами табличного режима, а в карточке любая фиксированная ширина ломает строку */
  table.cat tbody td { display: block; padding: 0; border: 0; white-space: normal; width: auto !important; min-width: 0 !important; max-width: none !important; }
  table.cat tbody td.sk { grid-row: 1 / span 2; }
  table.cat tbody td.art { grid-column: 2; align-self: end; font-weight: 600; padding-left: 5px; }
  table.cat tbody td.nm { grid-column: 2; align-self: start; }
  table.cat tbody td.nm a { color: var(--ink); }
  table.cat tbody td[data-l] { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: var(--u3);
    padding: var(--u1) 0; border-top: 1px solid var(--rule); text-align: right; font-variant-numeric: tabular-nums; }
  table.cat tbody td[data-l]::before { content: attr(data-l); flex: none; max-width: 58%; text-align: left; color: var(--ink-2); font-weight: 400; font-size: var(--t-data); }
  table.cat tbody td.nm + td[data-l] { margin-top: var(--u2); }
  table.cat tbody td.st { font-size: var(--t-data); }
  table.cat tbody td:last-child { grid-column: 1 / -1; margin-top: var(--u2); }
  table.cat tbody td:last-child .act { width: 100%; padding: var(--u2); font-size: var(--t-small); }
  table.cat.sib tbody tr { grid-template-columns: 48px minmax(0, 1fr); }
  table.cat.sib tbody tr { height: auto; }
  table.cat.sib td.ph { grid-column: 2; margin-top: var(--u1); white-space: normal; }
  .spec-t tbody td:last-child .act { width: auto; }
  .spec-t .qty { width: 72px; }
}

/* ================================================================
   Счётчик позиции в спецификации (v2.8, 08.09.2026). Пока позиции нет — кнопка «В спец.»;
   когда есть — на том же месте группа [−] N [+]: число на жёлтом (= «выбрано»), «−» при одной штуке
   становится «×» и убирает позицию. Число — поле ввода. Счётчик тихий: тонкая серая рамка (как у кнопки
   «В спец.»), белый фон, знаки и число обычного начертания; рамка не темнеет ни в фокусе, ни при наведении
   (указание владельца 08.09.2026: «обводку и цифры сделать обычными, не жирными»).
   Отвергнуто владельцем 08.09.2026 и не возвращать: залитые красный/зелёный квадраты («светофор»),
   жёлтая заливка числа, тёмные внутренние рамки и толстая обводка в фокусе («позорно»).
   Красный и зелёный остались только откликом на нажатие — бледная подложка и цветной знак, пока кнопка под курсором или пальцем.
   Удержание «+»/«−» — авто-повтор с ускорением в три фазы (app.js).
   ================================================================ */
.ctl { display: inline-block; }
.qc { display: inline-flex; align-items: stretch; height: 28px; border: 1px solid var(--rule-2); background: #fff; font-size: var(--t-small); line-height: 1; vertical-align: middle; transition: border-color .12s linear; }
.qc button { width: 28px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1; cursor: pointer; }
.qc button:hover { background: var(--hl); }
.qc button { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.qc .inc, .qc .dec { background: #fff; color: var(--ink); font-weight: 400; transition: background .1s linear, color .1s linear; }
.qc .inc:hover, .qc .inc:active, .qc .inc.held { background: #E3F0E8; color: var(--stock); }
.qc .dec:hover, .qc .dec:active, .qc .dec.held { background: #F9E4E5; color: var(--fire); }
@media (hover: none) { .qc .inc:hover { background: #fff; color: var(--ink); } .qc .dec:hover { background: #fff; color: var(--ink); } }   /* на сенсорном «наведение» залипает после касания — не показываем */
.qc .n { display: flex; align-items: center; justify-content: center; min-width: 28px; padding: 0 4px; background: #fff; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); font-weight: 400; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: text; }
.qc .q { box-sizing: content-box; min-width: 2ch; padding: 0 2px; border: 0; background: transparent; font: inherit; font-weight: 400; text-align: center; color: var(--ink); outline: 0; -moz-appearance: textfield; }
.qc .q::-webkit-outer-spin-button, .qc .q::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qc .q:focus-visible { outline: 2px solid var(--ink); outline-offset: -3px; }   /* фокус с клавиатуры виден, но рамка счётчика не темнеет */
.qc .q::selection { background: #EDEBE5; color: var(--ink); }   /* выделение цифры при фокусе — цвета бумаги, не системный синий/серый */
.qc .u { display: none; margin-left: .45em; font-weight: 400; }   /* подпись «шт в спецификации» — только в широком счётчике */
table.cat td.ac { white-space: nowrap; }
/* карточка позиции: счётчик во всю ширину, высотой с кнопку */
.ctl.big { display: block; }
.ctl.big > button { width: 100%; }
.qc.big { display: flex; width: 100%; height: 42px; font-size: var(--t-base); }
.qc.big button { width: 48px; font-size: 22px; }
.qc.big .n { flex: 1; }
.qc.big .u { display: inline; }
@media screen and (max-width: 900px) {
  table.cat tbody td.ac .ctl { display: block; }
  table.cat tbody td.ac .qc { display: flex; width: 100%; height: 38px; font-size: var(--t-data); }
  table.cat tbody td.ac .qc button { width: 48px; font-size: 20px; }
  table.cat tbody td.ac .qc .n { flex: 1; }
  table.cat tbody td.ac .qc .u { display: inline; }
  table.cat tbody tr { cursor: pointer; }
}
@media print { .qc, .ctl { display: none !important; } }

/* ================================================================
   Широкие экраны (v2.9, 08.09.2026). Замечание владельца: на его мониторе (≈3000 CSS px по ширине)
   сайт занимал 40 % экрана. Два слоя: контейнер растёт (1240 → 1440 → 1600), таблица каталога получает
   больше места под параметры; на очень широких экранах страница масштабируется целиком (zoom на body,
   не на html — чтобы медиазапросы считались от настоящей ширины окна), иначе текст 12 px на 4K-мониторе мелок.
   ================================================================ */
@media screen and (min-width: 1600px) { :root { --col: 1440px; --rail: 240px; } }
@media screen and (min-width: 1900px) { :root { --col: 1600px; } }
/* ступени масштаба сдержанные: 1.4 на ≈3000 px владелец отверг («слишком крупно»), 08.09.2026 */
@media screen and (min-width: 2200px) { body { zoom: 1.08; } }
@media screen and (min-width: 2700px) { body { zoom: 1.15; } }
@media screen and (min-width: 3400px) { body { zoom: 1.3; } }

/* ================================================================
   Подбор по резьбе (v2.10, 10.09.2026) — единственный фильтр раздела: у 32 позиций
   осмысленный общий параметр один — присоединительная резьба (трубка везде ⌀6).
   Чипсы как в рельсе: выбранная — жёлтая. Строки и группы без совпадений скрываются,
   счётчики групп в рельсе показывают, сколько осталось. Состояние — в адресе (?th=), ссылку можно переслать.
   ================================================================ */
.facet { margin: 0 0 var(--u6); padding: var(--u4) 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.facet .chips { display: flex; flex-wrap: wrap; gap: var(--u2); }
.facet .chips button { border: 1px solid var(--rule-2); background: #fff; color: var(--ink); font: inherit; font-size: var(--t-data); line-height: var(--lh-data); padding: var(--u1) var(--u3); cursor: pointer; white-space: nowrap; }
.facet .chips button:hover { border-color: var(--ink); }
.facet .chips button.on { background: var(--hl); border-color: var(--hl-edge); }
.facet .chips button .n { margin-left: var(--u1); color: var(--ink-3); font-size: var(--t-small); }
.facet .chips button.on .n { color: var(--ink-2); }
.facet .fnote { margin: var(--u3) 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); max-width: 82ch; }
.facet .fstate { margin: var(--u3) 0 0; font-size: var(--t-data); line-height: var(--lh-data); }
.facet .fstate b { font-weight: 600; }
.rail li.dim > a, .rail li.dim > .nm, .rail li.dim .n { color: var(--ink-3); }   /* нет совпадений: цвет третьего тона, не прозрачность — иначе контраст падает ниже нормы */
@media screen and (max-width: 900px) {
  .facet { margin-bottom: var(--u4); }
}
@media print { .facet { display: none; } }

/* служебные страницы: реквизиты, оплата и доставка */
.svc { max-width: 76ch; padding-top: var(--u4); }
.svc h2 { font-size: var(--t-base); line-height: var(--lh-base); font-weight: 600; margin: var(--u6) 0 var(--u2); }
.svc h2:first-child { margin-top: 0; }
.svc p { margin: 0 0 var(--u3); }
.svc .note { margin-top: var(--u4); font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }
.req-t th { width: 34%; }
.req-t td { font-weight: 400; }

/* ================================================================
   Ссылки и заглушки (v2.11, 10.09.2026). Правило: ссылка ведёт в реальное место, иначе это не ссылка.
   Пункты меню, у которых ещё нет раздела, ведут на строку своего направления на главной (там статус
   и описание); подразделы каталога и справочника, которых нет, остаются текстом. Действия страницы
   («Печать», «Скопировать», «Показать все») — кнопки, а не ссылки-заглушки.
   ================================================================ */
.lnk { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.lnk:hover { text-decoration: underline; }
.pfoot .off, .svc .off { color: var(--ink-3); }
.bymachine .hint { margin: var(--u2) 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }
/* приход по ссылке из меню: строка направления отмечается той же жёлтой линией, что и при наведении */
.block[id] { scroll-margin-top: var(--u6); }
.dirlist tr[id] { scroll-margin-top: var(--u10); }
.dirlist tr:target td { box-shadow: inset 0 -3px 0 var(--hl); }

/* лист чертежа: заголовок листа компактнее, чем у раздела */
.sheet-h h1 { font-size: var(--t-h2); line-height: var(--lh-h2); }

/* ================================================================
   Размер целей нажатия (v2.12, 10.09.2026). WCAG 2.2, 2.5.8: у самостоятельной ссылки или кнопки
   область нажатия не меньше 24×24 px. Ссылки внутри абзаца под правило не подпадают и не трогаются.
   Меняется только область нажатия — начертание, цвет и положение текста прежние.
   ================================================================ */
.util .r a { display: inline-flex; align-items: center; min-height: 24px; }
.crumb a, .crumb .lnk, .crumb > span { display: inline-flex; align-items: center; min-height: 24px; }
.rail li a, .rail li .nm { display: inline-flex; align-items: center; min-height: 24px; }
.rail li.on > a, .rail li.on > .nm { min-height: 24px; }
table.cat td.nm a, table.cat td.art a { display: inline-flex; align-items: center; min-height: 24px; }
.pfoot li a, .pfoot li .off { display: inline-flex; align-items: center; min-height: 24px; }
.dirlist td.n a, .dirlist td.n > span { display: inline-flex; align-items: center; min-height: 24px; }
.backlink { display: inline-flex; align-items: center; min-height: 24px; }
.speclink { padding-right: 2px; }
@media print { .util .r a, .crumb a, .rail li a { display: inline; } }

/* ================================================================
   Раздел каталога v3 (14.09.2026) — по семи замечаниям владельца.
   1) Подпись «Подбор по резьбе» устроена так же, как «Разделы каталога»: одна высота, одна линия.
   2) Шапка раздела без пустого поля: лид слева, порядок подбора справа.
   3) Таблица: колонка «Исполнение» убрана (повторяла параметры), артикул — ссылка на карточку;
      раскладка fixed: крайние колонки одной ширины во всех группах, параметры делят остаток поровну;
      всё выровнено по левому краю, у заголовков название над единицей, единицы на одной линии.
   4) Кнопка «В спецификацию» — полным словом, одной ширины во всех строках.
   Правила ограничены таблицами групп (table.cat[id^="g-"]): спецификация и соседи в карточке их не получают.
   ================================================================ */

/* 2 — шапка раздела */
.intro { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--u10); align-items: start;
  padding: var(--u5) 0 var(--u8); border-bottom: 1px solid var(--rule); }
.intro .lede { margin: 0; font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-2); }
.pick .lbl, .facet > .lbl, .rail .lbl { display: block; margin: 0 0 var(--u3); padding-bottom: var(--u1); border-bottom: 1px solid var(--rule); }
.pick h2.lbl { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .07em; }
.pick ol { list-style: none; margin: 0; padding: 0; counter-reset: pick;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--u5) var(--u6); }
.pick li { counter-increment: pick; position: relative; padding-left: 34px; }
.pick li::before { content: counter(pick); position: absolute; left: 0; top: 0; width: 22px; height: 22px; box-sizing: border-box;
  border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center;
  font-size: var(--t-micro); line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.pick li b { display: block; font-size: var(--t-data); line-height: 22px; font-weight: 600; color: var(--ink); }
.pick li p { margin: var(--u1) 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.pick li p.to { margin-top: var(--u1); }
.pick li p.to a { display: inline-flex; align-items: center; min-height: 24px; }

/* 1 — подбор по резьбе в той же сетке, что рельс */
.facet { margin: 0 0 var(--u8); padding: 0; border: 0; }
.facet .chips { margin: 0; }

/* 3 — таблица групп */
table.cat[id^="g-"] { table-layout: auto; width: 100%; }
/* Колонки учитывают реальную длину обозначений; устаревшие процентные ширины удалены из разметки. */
table.cat[id^="g-"] th, table.cat[id^="g-"] td { width: auto; min-width: 0; max-width: none; text-align: left; padding: var(--u2) var(--u4) var(--u2) 0; }
table.cat[id^="g-"] th:last-child, table.cat[id^="g-"] td:last-child { padding-right: 0; }
table.cat[id^="g-"] thead th { vertical-align: bottom; white-space: normal; overflow-wrap: break-word; }
table.cat[id^="g-"] thead th .lb { display: block; }
table.cat[id^="g-"] thead th .unit { display: block; min-height: var(--lh-micro); white-space: nowrap; }
table.cat[id^="g-"] tbody tr { height: 64px; }
table.cat[id^="g-"] tbody td { vertical-align: middle; white-space: normal; overflow-wrap: break-word; }
table.cat[id^="g-"] td.n { font-variant-numeric: tabular-nums; }
table.cat[id^="g-"] td.dash { color: var(--ink-3); }
table.cat[id^="g-"] td.art { white-space: nowrap; }
table.cat[id^="g-"] td.art a.mk { font-size: var(--t-data); font-weight: 600; color: var(--dir-ink); }
table.cat[id^="g-"] tbody tr:hover td.art a.mk { text-decoration: underline; text-underline-offset: 2px; }
table.cat[id^="g-"] td.pr .p1 { display: block; color: var(--ink-2); font-weight: 500; }
table.cat[id^="g-"] td.pr .p2 { display: block; color: var(--ink-3); font-size: var(--t-small); line-height: var(--lh-small); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 4 — кнопка и счётчик одной ширины: строка не меняет геометрию после добавления */
table.cat[id^="g-"] td.ac .ctl { display: block; }
table.cat[id^="g-"] .act { display: block; width: 136px; font-size: var(--t-small); line-height: var(--lh-small); padding: 6px var(--u2); text-align: center; }
table.cat[id^="g-"] td.ac .qc { display: flex; width: 136px; }
table.cat[id^="g-"] td.ac .qc .n { flex: 1; }

/* глоссарий группами */
.gloss h3 { margin: var(--u8) 0 0; padding-bottom: var(--u2); border-bottom: 1.5px solid var(--ink); font-size: var(--t-base); line-height: var(--lh-base); font-weight: 600; }
.gloss dl { display: block; margin: 0; font-size: var(--t-data); line-height: var(--lh-data); }
.gloss dl > div { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--u6); padding: var(--u3) 0; border-bottom: 1px solid var(--rule); }
.gloss dt { font-weight: 600; color: var(--ink); }
.gloss dd { margin: 0; color: var(--ink-2); }
.gloss dd p { margin: 0; max-width: 80ch; }
.gloss dd .ex { margin-top: var(--u2); padding-left: var(--u3); border-left: 2px solid var(--ink); }
.gloss dd .ex b { color: var(--ink); font-weight: 600; }

/* средние экраны: рельс уходит наверх чипсами, таблица получает всю ширину — иначе колонкам параметров не хватает места */
@media screen and (max-width: 1240px) {
  .cols { grid-template-columns: minmax(0, 1fr); gap: var(--u5); }
  .rail { position: static; display: block; border-bottom: 0; padding-bottom: 0; }
  .rail .grp { margin-bottom: var(--u3); }
  .rail .grp:not(:first-child) { display: none; }
  .rail .lbl { display: none; }
  .rail ul { display: flex; flex-wrap: wrap; gap: var(--u2); padding: var(--u1) 0 var(--u3); margin: 0; }
  .rail li { flex: none; padding: 0; }
  .rail li a, .rail li .nm { display: inline-flex; align-items: center; min-height: 24px; border: 1px solid var(--rule-2); padding: var(--u1) var(--u3); color: var(--ink); white-space: nowrap; }
  .rail li.on > a, .rail li.on > .nm { background: var(--hl); border-color: var(--hl-edge); margin: 0; padding: var(--u1) var(--u3); }
  .rail li .off { border-style: dashed; }
  .rail li.sub { padding-left: 0; }
  .rail li .n { margin-left: var(--u1); }
  .intro { grid-template-columns: minmax(0, 1fr); gap: var(--u6); }
}
@media screen and (max-width: 1100px) { .pick ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 900px) {
  /* карточный режим: табличные высоты и отступы групп не действуют */
  table.cat[id^="g-"] tbody tr { height: auto; }
  table.cat[id^="g-"] tbody td { padding: 0; }
  table.cat[id^="g-"] tbody td[data-l] { padding: var(--u1) 0; }
  table.cat[id^="g-"] .act, table.cat[id^="g-"] td.ac .qc { width: 100%; }
  table.cat[id^="g-"] tbody td.sk { grid-row: 1; }
  table.cat[id^="g-"] tbody td.art { grid-column: 2; grid-row: 1; align-self: center; padding: 0 0 0 5px; }
  table.cat[id^="g-"] tbody td.art + td[data-l] { margin-top: var(--u3); }
  table.cat[id^="g-"] tbody td.pr .pv { text-align: right; }
  table.cat[id^="g-"] .act { padding: var(--u2); }
  .pick ol { grid-template-columns: minmax(0, 1fr); }
  .gloss dl > div { grid-template-columns: minmax(0, 1fr); gap: var(--u1); }
}
@media print {
  .intro { display: block; }
  .pick { margin-top: 12pt; }
  table.cat[id^="g-"] col.c-act { width: 0; }
}
table.cat[id^="g-"] td.nw { white-space: nowrap; }
.nw { white-space: nowrap; }   /* артикулы, обозначения и резьбы в тексте не рвутся переносом */

/* Аудит удобства, 15.09.2026. Сохраняем язык инженерного каталога:
   таблицы, бумагу, шрифт, цветовые роли и исходные изображения.
   Пояснения раскрываются по запросу; действия и параметры доступны раньше. */
[hidden] { display: none !important; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 16px; padding: 12px 16px; background: var(--ink); color: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: none; }
#main:focus, [tabindex="-1"]:focus { outline: none; }
.tel a, .contact .big a { color: var(--ink); }
summary { cursor: pointer; }
summary:focus-visible, .page-tools a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.site-menu > .menu-toggle { display: none; }
.spec-feedback { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: min(440px, calc(100% - 32px)); background: var(--ink); color: #fff; font-size: var(--t-data); line-height: var(--lh-data); padding: 12px 16px; pointer-events: none; }
.spec-feedback:empty { display: none; }
.sr-row { grid-template-columns: 40px minmax(0, 1fr); gap: 3px 12px; }
.sr-row img { grid-column: 1; grid-row: 1 / 4; }
.sr-code, .sr-name, .sr-grp { grid-column: 2; white-space: normal; overflow-wrap: anywhere; }
.sr-name { overflow: visible; text-overflow: clip; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; font-size: var(--t-data); }
.hero-actions .btn { text-decoration: none; padding: 12px 16px; }
.hero-actions > a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }
.page-tools { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; padding: 12px 0; font-size: var(--t-data); line-height: var(--lh-data); }
.page-tools a { display: inline-flex; align-items: center; min-height: 28px; text-decoration: underline; text-underline-offset: 3px; }
.page-tools .speclink { margin-left: auto; }
.catalog-guide { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.technical-note { min-width: 0; font-size: var(--t-data); line-height: var(--lh-data); }
.technical-note > summary { padding: 14px 0; font-weight: 500; }
.technical-note > summary span { margin-left: 12px; font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.technical-note > p { max-width: 86ch; color: var(--ink-2); margin: 0 0 20px; }
.catalog-guide .guide-title { margin: 0 0 12px; font-size: var(--t-base); line-height: var(--lh-data); letter-spacing: normal; }
.guide-title span { margin-left: 8px; font-size: var(--t-small); font-weight: 400; color: var(--ink-3); white-space: nowrap; }
.catalog-guide .technical-note > p { margin: 0 0 8px; }
.catalog-guide .technical-note > p:last-child { margin-bottom: 0; }
.catalog-guide .system-route { font-weight: 500; color: var(--ink); }
.catalog-guide .pick ol { grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0; }
.catalog-guide .pick li { padding-left: 28px; color: var(--ink-2); }
.catalog-guide .pick li::before { width: 20px; height: 20px; }
.catalog-guide .pick li b { display: inline; font-size: inherit; line-height: inherit; }
#catalog-items, #gloss-h, #product-parameters, #product-order { scroll-margin-top: 20px; }
.catalog-index-title { margin: 0 0 12px; font-weight: 500; padding-bottom: 4px; border-bottom: 1px solid var(--rule); font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.catalog-index-title span { float: right; font-variant-numeric: tabular-nums; letter-spacing: normal; }
.catalog-index .catalog-all { padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--rule); }
.catalog-tables { overflow: visible; }
.filter-help { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); margin-top: 8px; }
.filter-help summary { width: fit-content; padding: 4px 0; }
.filter-help p { margin: 8px 0 0; max-width: 85ch; }
.facet .fstate { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.facet .fstate .lnk { min-height: 28px; text-decoration: underline; text-underline-offset: 3px; }

/* Карточка: одно название, одна таблица параметров, исходный квадратный кадр. */
.product-heading { padding-top: 24px; margin-bottom: 0; }
.product-heading .product-code { font-size: var(--t-lead); letter-spacing: .01em; }
.product-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 48px; align-items: start; padding-top: 12px; }
.product-media { min-width: 0; max-width: 520px; }
.appearance-note { margin: 8px 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }
.product-main .gal .thumbs button { width: 64px; }
.product-info { min-width: 0; }
.product-parameters h2 { font-size: var(--t-lead); line-height: var(--lh-lead); padding-bottom: 12px; border-bottom: 1.5px solid var(--ink); }
.product-parameters .spec { font-size: 14px; line-height: 21px; }
.product-parameters .spec th { width: 56%; }
.parameter-note { margin: 12px 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-3); }
.product-order { margin-top: 24px; border: 0; border-top: 1.5px solid var(--ink); padding: 16px 0 0; }
.availability { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: var(--t-data); line-height: var(--lh-data); color: var(--ink-2); }
.availability b { margin-left: 8px; font-weight: 500; color: var(--ink); }
.product-order .btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.product-order .btns > .ctl > button, .product-order .btns > .btn { min-height: 44px; font-size: var(--t-data); }
.product-order .qc.big { height: 44px; font-size: var(--t-data); }
.product-order .qc.big .u { font-size: var(--t-small); }
.order-help { margin: 12px 0 0; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.product-use > p { max-width: 92ch; color: var(--ink-2); }
.product-use .technical-note { border-bottom: 1px solid var(--rule); }
.related .sib { table-layout: fixed; }
.related .sib th:nth-child(1) { width: 64px; }
.related .sib th:nth-child(2) { width: 136px; }
.related .sib th:nth-child(3) { width: 220px; }
.related .sib td { padding-top: 12px; padding-bottom: 12px; }
.related .sib td.ph { width: auto; white-space: normal; font-size: var(--t-data); line-height: var(--lh-data); color: var(--ink-2); }
.related .sib td.art a { color: var(--dir-ink); }
.specempty .btn { display: inline-flex; align-items: center; min-height: 44px; margin-top: 16px; padding: 10px 16px; }
.specact .btn { min-height: 44px; }

@media screen and (max-width: 1240px) {
  .catalog-index-title { font-size: var(--t-data); line-height: 20px; text-transform: none; letter-spacing: normal; padding: 12px 0; margin: 0; }
  .catalog-index ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; padding: 8px 0 16px; }
  .catalog-index li { display: flex; align-items: baseline; border-bottom: 1px solid var(--rule); }
  .catalog-index li a { flex: 1; border: 0; white-space: normal; min-height: 36px; padding: 8px 0; }
  .catalog-index li.on > a { border: 0; margin: 0; padding: 8px 4px; }
  .catalog-index li .n { padding: 0 4px; }
  .catalog-index .catalog-all { margin: 0; padding: 0; }
  .product-main { gap: 32px; }
  .product-order .btns { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 900px) {
  .site-menu > .menu-toggle { display: list-item; list-style-position: inside; padding-top: 12px; padding-bottom: 12px; font-size: var(--t-data); line-height: var(--lh-data); }
  .menu-toggle span { float: right; color: var(--ink-3); font-size: var(--t-small); }
  .site-menu > div.wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; overflow: visible; padding-bottom: 12px; }
  .site-menu a { white-space: normal; margin: 0; padding: 10px 0; min-height: 44px; border-bottom: 1px solid var(--rule); }
  .site-menu a.on { margin: 0; border-bottom: 2px solid var(--dir); }
  .catalog-guide { grid-template-columns: minmax(0, 1fr); }
  .catalog-guide .technical-note + .technical-note { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
  .page-tools { gap: 4px 20px; }
  .page-tools a { min-height: 36px; }
  .page-tools .speclink { margin-left: 0; }
  .facet .chips button { min-height: 40px; }
  .product-main { grid-template-columns: minmax(0, 1fr); }
  .product-media { width: 100%; max-width: none; }
  .product-media .gal { display: block; }
  .product-media .gal .main { max-width: 520px; }
  .product-media .gal .thumbs { display: flex; flex-direction: row; flex-wrap: wrap; margin: 12px 0 0; gap: 8px; }
  .product-media .gal .cap { margin-top: 12px; }
  .product-media .dwglink { margin-top: 16px; }
  .product-main .gal .thumbs button { width: 56px; }
  .product-order .btns { grid-template-columns: 1fr 1fr; }
  .related .sib tbody { grid-template-columns: minmax(0, 1fr); }
  .related .sib td.ph { display: block; text-align: left; line-height: 1.6; }
  .related .sib td.ph::before { display: block; margin-bottom: 4px; max-width: none; }
}
@media screen and (max-width: 620px) {
  .dirlist { width: 100%; table-layout: fixed; }
  .dirlist td.n, .dirlist.useful td.n { width: auto; overflow-wrap: anywhere; }
  .dirlist td.s { width: 34%; white-space: normal; overflow-wrap: anywhere; }
  table.cat tbody { grid-template-columns: minmax(0, 1fr); }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 8px; }
  .hero-actions .btn { text-align: center; width: 100%; }
  .hero-actions > a:not(.btn) { min-height: 36px; display: inline-flex; align-items: center; }
  .find input { font-size: 14px; height: 40px; }
  .find button { height: 40px; }
  .page-tools { font-size: var(--t-small); }
  .catalog-index ul { grid-template-columns: minmax(0, 1fr); }
  .cols { padding-top: 12px; gap: 16px; }
  .product-heading { padding-top: 16px; }
  .product-heading .codes { font-size: var(--t-data); }
  .product-main { gap: 24px; }
  .product-order .btns { grid-template-columns: minmax(0, 1fr); }
  .product-parameters .spec { font-size: var(--t-data); line-height: var(--lh-data); }
  .product-parameters .spec th { width: 54%; }
  .spec-feedback { right: 16px; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; }
}
@media print {
  .skip-link, .page-tools, .site-menu, .spec-feedback, .hero-actions, .order-help, .catalog-index, .filter-help { display: none !important; }
  .catalog-guide, .product-main { display: block; }
  .technical-note { break-inside: avoid; }
  .product-media { max-width: 90mm; }
  .product-order { margin-top: 12pt; }
  .product-parameters { margin-top: 16pt; }
}

/* ================================================================
   Закреплённая шапка и заметность спецификации (v2.14, 18.09.2026, замечание владельца).
   Служебная полоса со «Спецификацией» и строка поиска остаются вверху при прокрутке.
   На телефоне строка с логотипом и телефоном уходит под полосу — закреплённая часть вдвое ниже полной шапки.
   Сдвиг шапки (--mh-top) и высоту закреплённой части (--pin) уточняет app.js по факту вёрстки;
   значения ниже — запас на случай, если скрипт не загрузился.
   ================================================================ */
:root { --pin: 100px; }
html { scroll-padding-top: var(--pin); }   /* переходы по якорям не прячут заголовок под шапку */
.util { position: sticky; top: 0; z-index: 31; }
.masthead { position: sticky; top: var(--mh-top, 33px); z-index: 30; }
.catalog-tables table.cat thead th { top: var(--pin); }
.rail, .rightcol, .sheet-side { top: calc(var(--pin) + var(--u3)); }
@media screen and (max-width: 620px) {
  :root { --pin: 102px; }
  .masthead { top: var(--mh-top, -14px); }
}
/* первая позиция в спецификации: надпись «Спецификация» коротко мигает — клиент видит, где его список */
.util .speclink { padding: 0 6px; margin-right: -6px; }
.speclink .n { white-space: pre; }   /* в гибкой ссылке ведущий пробел пропадал: было «Спецификация· 8» */
@keyframes spec-blink { 0%, 45%, 100% { background-color: transparent; } 15%, 30%, 60%, 80% { background-color: var(--hl); } }
.speclink.blink { animation: spec-blink 1.4s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) { .speclink.blink { animation: none; background-color: var(--hl); } }
/* адрес для письма виден на странице: если почта не подставит его в «Кому», его легко скопировать */
.mail-note { margin: 12px 0 0; font-size: var(--t-data); line-height: var(--lh-data); color: var(--ink-2); }
.mail-note b, .order-help .mail { font-weight: 500; color: var(--ink); user-select: all; -webkit-user-select: all; }
@media print {
  .util, .masthead { position: static; }
  html { scroll-padding-top: 0; }
  .mail-note { display: none; }
}

/* ================================================================
   Правки по аудиту 18.09.2026 (v2.15, решения владельца 18.09: «Всё ОК. Делай»; чертёж в списке остаётся).
   Телефон: мелкий текст крупнее (данные 13 → 15, подписи 12 → 14, основной 15 → 16; заголовки прежние —
   это не общий масштаб ×1,4, который владелец отверг), поля ввода 16 px (иначе iPhone сам увеличивает
   страницу при нажатии в поиск или в количество), блок покупки в карточке товара — сразу под фото.
   ================================================================ */
/* резьба «M10×1 коническая»: в таблице — второй строкой мелко, в карточке телефона — в строку */
table.cat td .kn { display: block; font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ink-2); }
@media screen and (max-width: 900px) { table.cat td .kn { display: inline; font-size: inherit; line-height: inherit; color: inherit; } }
/* лист без чертежа: чертёж запрошен у производителя */
.sheet-view.sheet-empty { min-height: 160px; color: var(--ink-3); font-size: var(--t-data); line-height: var(--lh-data); text-align: center; }
/* Каталожные фото доступны и на сенсорных экранах; переключение — в app.js. */
@media screen and (max-width: 620px) {
  :root {
    --t-micro: 12px;  --lh-micro: 16px;
    --t-small: 14px;  --lh-small: 20px;
    --t-data: 15px;   --lh-data: 22px;
    --t-base: 16px;   --lh-base: 26px;
  }
  .find input, .bigfind input, .qc .q, .spec-t .qty { font-size: 16px; }
  table.cat caption .hint { line-height: var(--lh-data); }
  .product-parameters .spec { font-size: var(--t-data); line-height: var(--lh-data); }
  /* карточка товара: фото → цена, наличие и кнопки → характеристики */
  .product-main { display: flex; flex-direction: column; gap: 24px; }
  .product-info { display: contents; }
  .product-media { order: 1; }
  .product-order { order: 2; margin-top: 0; }
  .product-parameters { order: 3; }
}
/* Образец карточки на телефоне (v2.15, одна группа — «Прогрессивные распределители», класс m2).
   Чертёж 96 px слева (владелец 18.09: в списке остаётся чертёж, не фото), справа артикул · обозначение,
   тип детали и только то, чем позиции группы различаются. Общее для группы и «по запросу» — одной строкой
   под названием группы. Кнопка и счётчик — 44 px. Остальные группы — прежним видом до решения владельца. */
table.cat.m2 caption .common, table.cat.m2 td.art .mdes, table.cat.m2 td.art .mname { display: none; }
@media screen and (max-width: 620px) {
  table.cat.m2 caption .common { display: block; margin-top: 6px; font-weight: 400; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink); }
  table.cat.m2 tbody { gap: 10px; }
  table.cat.m2 tbody tr { grid-template-columns: 96px minmax(0, 1fr); column-gap: 14px; padding: 12px; }
  table.cat.m2 tbody td.sk { grid-row: 1 / span 3; align-self: start; }
  table.cat.m2 .pic { width: 96px; height: 96px; }
  table.cat.m2 tbody td.art { align-self: start; padding-left: 0; font-weight: 600; line-height: var(--lh-data); }
  table.cat.m2 td.art .mdes { display: inline; font-weight: 400; color: var(--ink-2); }
  table.cat.m2 td.art .mname { display: block; font-weight: 400; color: var(--ink); }
  table.cat.m2 tbody td.cm { display: none; }
  table.cat.m2 tbody td.variant-key { grid-column: 2; border-top: 0; padding: 2px 0 0; }
  table.cat.m2 tbody td.variant-key + td.variant-key { padding-top: 0; }
  table.cat.m2 tbody td.variant-key::before { font-size: var(--t-small); }
  table.cat.m2 tbody td:last-child { grid-column: 1 / -1; margin-top: 12px; }
  table.cat.m2 tbody td:last-child .act { min-height: 44px; font-size: var(--t-data); }
  table.cat.m2 tbody td.ac .qc { height: 44px; }
  table.cat.m2 tbody td.ac .qc button { width: 52px; }
}
/* Вводные пояснения каталога: на компьютере открыты, как утверждено; на телефоне свёрнуты в две строки
   и открываются касанием — пояснения остаются на странице, но не встают стеной перед товарами
   (замечание владельца 18.09: «не вываливать всё на одну страницу»; «пояснения — там, где термины»). */
details.guide > summary { list-style: none; }
details.guide > summary::-webkit-details-marker { display: none; }
@media screen and (min-width: 621px) { details.guide > summary { pointer-events: none; } }
@media screen and (max-width: 620px) {
  .catalog-guide { padding: 0; }
  .catalog-guide details.guide { border-bottom: 1px solid var(--rule); }
  .catalog-guide details.guide + details.guide { margin-top: 0; padding-top: 0; border-top: 0; }
  details.guide > summary { display: flex; align-items: baseline; gap: 10px; min-height: 48px; padding: 12px 0; cursor: pointer; }
  details.guide > summary::before { content: "▸"; flex: none; width: 12px; color: var(--ink-2); }
  details.guide[open] > summary::before { content: "▾"; }
  details.guide > summary .guide-title { margin: 0; }
  details.guide[open] { padding-bottom: 16px; }
}
@media screen and (max-width: 620px) {
  table.cat.m2 tbody td.art { white-space: normal; }
  table.cat caption { line-height: var(--lh-data); }
  table.cat caption .n { white-space: nowrap; }
}
/* Проверено 18.09: чипсы групп на телефоне выходят выше списка (645 px против 529 — названия групп длинные),
   поэтому список групп остаётся строками. Поля страницы на телефоне — 16 px: карточкам и строкам шире. */
@media screen and (max-width: 620px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  table.cat.m2 td.art .mname { font-size: var(--t-small); line-height: var(--lh-small); }
  table.cat.m2 tbody tr { column-gap: 12px; }
  /* пояснение группы: две строки и «Подробнее» — текст остаётся на странице целиком */
  table.cat caption .hint.clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
  table.cat caption .hint.clamp.open { display: block; -webkit-line-clamp: unset; line-clamp: none; }
  .hint-more:not([hidden]) { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font-weight: 400; font-size: var(--t-small); text-decoration: underline; text-underline-offset: 3px; }
}
@media print { table.cat caption .hint { display: inline; -webkit-line-clamp: unset; } .hint-more { display: none !important; } }
/* Спецификация: запасные пути отправки на телефоне (скопировать, поделиться), звонок рядом с кнопкой,
   «Очистить список» — скромной ссылкой подальше от главной кнопки. Карточка позиции на телефоне компактнее:
   без строк «Группа» и «Цена» (одинаковое «по запросу» у всех), «Убрать» — текстовой кнопкой. */
.m-only { display: none; }
.spec-clear { margin: 20px 0 0; }
.spec-clear .lnk { min-height: 32px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; font-size: var(--t-data); }
.mail-note a { color: var(--ink); }
@media screen and (max-width: 620px) {
  .specact .m-only:not([hidden]) { display: block; }
  table.cat.spec-t tbody td[data-l="Группа"], table.cat.spec-t tbody td.dash { display: none; }
  table.cat.spec-t tbody tr { grid-template-columns: 72px minmax(0, 1fr); }
  .spec-t .pic { width: 72px; height: 72px; }
  table.cat.spec-t tbody td.sk { grid-row: 1 / span 2; }
  table.cat.spec-t tbody td.nm { font-size: var(--t-data); line-height: var(--lh-data); }
  table.cat.spec-t tbody td[data-l="Количество, шт"] { align-items: center; }
  .spec-t .qty { height: 44px; width: 88px; }
  table.cat.spec-t tbody td:last-child { text-align: right; margin-top: 4px; }
  table.cat.spec-t tbody td:last-child .act { border: 0; background: none; min-height: 40px; padding: 0 0 0 12px; text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); width: auto; }
}
.mail-note a[href^="tel"] { white-space: nowrap; }
/* Пояснения к параметрам на странице товара — там, где термины (указание владельца 18.09.2026):
   тексты из раздела «Термины» каталога, только для параметров этой позиции; свёрнуты в одну строку. */
.terms-dl { margin: 0 0 12px; font-size: var(--t-data); line-height: var(--lh-data); }
.terms-dl > div { padding: 10px 0; border-bottom: 1px solid var(--rule); }
.terms-dl > div:first-child { border-top: 1px solid var(--rule); }
.terms-dl dt { font-weight: 600; color: var(--ink); }
.terms-dl dd { margin: 4px 0 0; color: var(--ink-2); }
.terms-dl dd p { margin: 0; max-width: 80ch; }
.terms-dl dd .ex { margin-top: 8px; padding-left: 12px; border-left: 2px solid var(--ink); }
.terms-dl dd .ex b { color: var(--ink); font-weight: 600; }
.product-parameters .terms { margin-top: 8px; }
/* Схема прогрессивной системы (черновик 18.09.2026 на согласование, пакет 4 аудита). Правило графики сайта:
   фото изделия на белом; штрих производителя как есть; наши схемы — линия 1,5 px цветом текста, без заливок,
   теней, градиентов и иконок из наборов; подписи шрифтом сайта, на телефоне не мельче 13 px. */
.scheme { margin: 0 0 16px; }
.scheme svg { display: block; width: 100%; max-width: 620px; height: auto; font-family: inherit; }
.scheme svg rect, .scheme svg circle, .scheme svg polygon { fill: #fff; stroke: var(--ink); stroke-width: 1.5; }
.scheme svg polyline { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.scheme svg marker path { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.scheme svg text { fill: var(--ink-2); font-size: 15px; }
.scheme svg text.t { fill: var(--ink); font-size: 16px; font-weight: 600; }
.scheme svg a:hover rect, .scheme svg a:hover polygon, .scheme svg a:focus rect { stroke-width: 2.5; }
.scheme svg a:hover text { fill: var(--ink); text-decoration: underline; }
.scheme figcaption { margin-top: 8px; font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-2); }
.scheme .scheme-t { display: none; max-width: 358px; }
@media screen and (max-width: 620px) {
  .scheme .scheme-w { display: none; }
  .scheme .scheme-t { display: block; margin: 0 auto; }
}
/* страница «Монтаж и обслуживание»: списки в тексте услуги */
.svc ul { margin: 0 0 var(--u3); padding-left: 20px; }
.svc li { margin: 0 0 var(--u2); }

/* Поправки после перепроверки 18.09.2026 (три проверяющих): */
.hint-more[hidden] { display: none; }
@media screen and (min-width: 621px) { .hint-more { display: none !important; } details.guide > summary { padding: 0; } }
/* резьба «M10×1 коническая» в карточке телефона — одним значением справа */
table.cat td .v { display: inline; }
table.cat td .v .kn { margin-left: 0; }
/* образец m2: «· PFBS-6/6» переносится вместе с точкой */
table.cat.m2 td.art .mdes { white-space: nowrap; }
/* самые узкие телефоны: у счётчика кнопки ± по 44 px, чтобы «шт в спецификации» помещалось */
@media screen and (max-width: 359px) {
  table.cat tbody td.ac .qc button, table.cat.m2 tbody td.ac .qc button { width: 44px; }
  table.cat tbody td.ac .qc .u { font-size: var(--t-small); }
}
/* карточка товара на телефоне: фото → цена и кнопки → миниатюры, подписи, «Чертёж» → характеристики */
@media screen and (max-width: 620px) {
  .product-media, .product-media .gal { display: contents; }
  .product-media .gal .main { order: 1; }
  .product-order { order: 2; }
  .product-media .gal .thumbs { order: 3; margin: 0; }
  .product-media .gal .cap, .product-media .appearance-note { order: 4; margin: 0; }
  .product-media .dwglink { order: 5; margin: 0; }
  .product-parameters { order: 6; }
  .product-main { gap: 16px; }
}
/* страница «Монтаж и обслуживание»: ссылки в тексте видны как ссылки */
.svc a { text-decoration: underline; text-underline-offset: 3px; }
/* схема: на планшете и узком компьютере колонка «Как работает» узкая — показываем вертикальную схему,
   чтобы подписи не мельчали; на самых узких телефонах подписи в единицах схемы крупнее */
@media screen and (min-width: 901px) and (max-width: 1239px) {
  .scheme .scheme-w { display: none; }
  .scheme .scheme-t { display: block; max-width: 400px; }
}
@media screen and (max-width: 359px) { .scheme svg text { font-size: 17px; } .scheme svg text.t { font-size: 18px; } }