/* BONPET CHINT — компоненты и шаблоны дизайн-системы (из концепта v7): поля страницы, курсор по действию,
 * сегменты, свой выпадающий список, «−/+», аккордеон, каталог, карточка серии, карусели, калькуляторы.
 * Токены и шапка — в site.css. */

/* ---------- каркас (.frame, не .page: body_class WordPress даёт <body class="page">): контент 1200 px, «Содержание» и «Спецификация» — в свободных полях ---------- */
.frame{display:grid;grid-template-columns:minmax(0,1fr)}
.wrap{max-width:var(--page-max);margin:0 auto;padding:0 var(--gutter)}
.rail,.dock{display:none;min-width:0}
/* раскрытое «Содержание» — та же рамка, что у ярлыка, на том же месте: верх и правый край совпадают, заголовок и
   «‹» — там же, где был ярлык */
.rail__in{position:sticky;top:calc(var(--hdr-vis) + var(--adminbar) + var(--s-7));margin:var(--s-7) 0 0 auto;padding:10px 12px 12px;max-width:236px;border:1px solid var(--c-ink);background:var(--c-paper);transition:top var(--dur-long) var(--ease-out);transform-origin:right top}
/* раскрытие и сворачивание — как кнопка Rewards на mdebeauty.com. Панель вырастает из угла ярлыка (MUI Grow: масштаб
   .75 × .5625 → 1 за 258 мс, прозрачность за 387 мс) и сразу после «свернуть» уходит в тот же угол; ярлык потом
   вытягивается из квадрата в полную длину, подпись проявляется с задержкой 50 мс. Угол — там, где ярлык или кнопка:
   у «Содержания» и узкой «Спецификации» — правый верхний, у поля «Спецификации» от 1760 — левый верхний, у листов
   на телефоне — нижний у своей кнопки */
@keyframes pane-grow{from{transform:scale(.75,.5625)}}
@keyframes pane-fade{from{opacity:0}}
@keyframes pane-shrink{to{opacity:0;transform:scale(.75,.5625)}}
@keyframes tab-grow{from{max-height:var(--sq)}to{max-height:var(--h)}}
@keyframes tab-label{from{color:transparent}}
.dock__in{transform-origin:left top}
.toc-sheet{transform-origin:left bottom}
html.panes-anim .rail__in,html.panes-anim .dock__in,.dock.is-open .dock__in,.toc-sheet{animation:pane-grow 258ms var(--ease-grow),pane-fade 387ms var(--ease-grow)}
/* «свернуть» (ui.js, leave): правила сильнее правил появления — иначе уход не запускался и панель ждала запасной таймер */
html.panes-anim .rail__in.is-leaving,.rail__in.is-leaving,html.panes-anim .dock__in.is-leaving,.dock.is-open .dock__in.is-leaving,.dock__in.is-leaving,.toc-sheet.is-leaving{animation:pane-shrink 200ms var(--ease-grow) forwards}
/* ярлык после «свернуть» (ui.js, growTab: --sq — ширина ярлыка, --h — его высота) */
.rail__tab.is-growing,.dock__tab.is-growing{overflow:hidden;white-space:nowrap;animation:tab-grow 250ms var(--ease-launch),tab-label 250ms var(--ease-launch) 50ms backwards}
.dock__tab.is-growing b{animation:tab-label 250ms var(--ease-launch) 50ms backwards}
/* кнопки «Содержание» и «Спецификация» на телефоне — лаунчер: лист открыт — кнопка сжимается в квадрат с «×», закрыт —
   вытягивается обратно (ui.js, morph: --w — ширина кнопки с подписью) */
.toc-fab,.specbar{overflow:hidden;max-width:var(--w,none);transition:max-width 250ms var(--ease-launch),padding 250ms var(--ease-launch),background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out),opacity var(--dur-short) var(--ease-out),visibility 0s}
/* главная: пока первый экран (видео) в кадре, поля и кнопки «Содержание» и «Спецификация» скрыты — появляются на своём
   месте, когда до него доходит прокрутка (ui.js, hero-on) */
.rail,.dock{transition:opacity var(--dur-short) var(--ease-out),visibility 0s}
html.hero-on :is(.rail,.dock,.toc-fab,.specbar){opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--dur-short) var(--ease-out),visibility 0s linear var(--dur-short)}
.fab__l{transition:opacity 250ms var(--ease-launch) 50ms}
.fab__x{position:absolute;inset:0;margin:auto;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease-launch)}
.toc-fab.is-open,.specbar.is-open{max-width:40px;padding-left:0;padding-right:0}
.toc-fab.is-open .fab__l,.specbar.is-open .fab__l{opacity:0;transition-duration:200ms;transition-delay:0s}
.toc-fab.is-open .fab__x,.specbar.is-open .fab__x{opacity:1;transition-duration:250ms}
/* поля всегда на своём слое: в конце движения текст не перескакивает на целый пиксель */
.rail__in,.rail__tab,.dock__in,.dock__tab{will-change:transform,opacity}
/* ярлык появился под курсором — без заливки, пока мышь не сдвинется (ui.js, still) */
html.panes-still .rail__tab:hover,html.panes-still .dock__tab:hover{background:var(--c-paper);color:var(--c-ink)}
html.panes-still .dock__tab:hover b{color:var(--c-accent)}
@media (prefers-reduced-motion:reduce){.rail__in,.rail__tab,.dock__in,.dock__tab,.dock__tab b,.toc-sheet,.toc-fab,.specbar,.fab__l,.fab__x{animation:none !important;transition:none !important}}
.rail ol{margin:0;padding:0;list-style:none}
.rail ol a{display:grid;grid-template-columns:2.4ch minmax(0,1fr);gap:var(--s-2);padding:5px 0 5px 10px;border-left:1px solid var(--c-rule);font:400 var(--text-xs)/1.35 var(--font-body);color:var(--c-muted);text-decoration:none;transition:color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.rail ol a span:first-child{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.rail ol a:hover{color:var(--c-ink);text-decoration:none}
.rail ol a[aria-current="true"]{color:var(--c-ink);border-left:2px solid var(--c-accent);padding-left:9px}
.rail__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--c-rule)}
.rail__foot{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--c-rule)}
.rail__foot .btn{width:100%}
.rail__off,.dock__x{display:inline-flex;align-items:center;gap:6px;min-height:28px;border:0;background:none;padding:0;font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent);cursor:pointer}
.rail__off:hover span,.dock__x:hover{text-decoration:underline}
.rail__tab,.dock__tab{display:none;position:sticky;top:calc(var(--hdr-vis) + var(--adminbar) + var(--s-7));margin-top:var(--s-7);align-items:center;gap:10px;writing-mode:vertical-rl;padding:14px 10px;border:1px solid var(--c-ink);background:var(--c-paper);font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--c-ink);cursor:pointer;transition:top var(--dur-long) var(--ease-out)}
.rail__tab:hover,.dock__tab:hover{background:var(--c-ink);color:var(--c-paper)}
.dock__tab b{font-weight:600;color:var(--c-accent)}
.dock__tab:hover b{color:var(--c-paper)}
/* поля — отдельный слой поверх контента: подписи номеров не прячутся за фото */
.rail__in,.rail__tab,.dock__in,.dock__tab{z-index:var(--z-sticky)}
@media (min-width:1440px){
  .rail-off .rail__in{display:none}
  .rail-off .rail{display:flex;justify-content:flex-end;align-items:flex-start}
  .rail-off .rail__tab{display:inline-flex}
}
/* панель — столбец: шапка, список (прокручивается сам, если не помещается), итог и кнопка всегда видны */
.dock__in{position:sticky;top:calc(var(--hdr-vis) + var(--adminbar) + var(--s-7));margin-top:var(--s-7);max-width:300px;max-height:calc(100vh - var(--hdr-vis) - var(--adminbar) - var(--s-7) - 16px);display:flex;flex-direction:column;border:1px solid var(--c-ink);background:var(--c-paper);transition:top var(--dur-long) var(--ease-out)}
.dock__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:12px 14px;border-bottom:1px solid var(--c-rule);white-space:nowrap}
.dock__x{display:none}
.dock__empty{margin:0;padding:14px;font-size:var(--text-sm);color:var(--c-muted)}
.dock__list{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0;padding:0;list-style:none}
/* позиция: название (до двух строк) и «×» · артикул · количество слева, сумма строки справа (цена за штуку — под ней) */
.dock__list li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n x" "a a" "q s";align-items:center;gap:3px 8px;padding:10px 14px;border-bottom:1px solid var(--c-rule)}
.dock__list .n{grid-area:n;align-self:start;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 var(--text-xs)/1.35 var(--font-body);color:var(--c-ink)}
.dock__list .a{grid-area:a;font:400 var(--text-2xs)/1.3 var(--font-mono);color:var(--c-muted)}
.dock__list .q{grid-area:q;margin-top:4px}
.dock__list .s{grid-area:s;align-self:end;text-align:right;font:500 var(--text-xs)/1.2 var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.dock__list .s small{display:block;margin-top:2px;font-size:var(--text-2xs);font-weight:400;color:var(--c-muted)}
.dock__list .x{grid-area:x;align-self:start;display:inline-grid;place-items:center;width:22px;height:22px;margin:-3px -5px 0 0;padding:0;border:0;background:none;color:var(--c-muted);cursor:pointer;transition:color var(--dur-micro) var(--ease-out)}
.dock__list .x:hover{color:var(--c-bad)}
.dock__list .x:focus-visible{outline:2px solid var(--c-focus);outline-offset:1px}
.dock__total{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:var(--s-3);padding:12px 14px;border-bottom:1px solid var(--c-rule)}
.dock__total b{font:600 var(--text-lg)/1 var(--font-display);font-variant-numeric:tabular-nums}
.dock__cta{padding:14px}
.dock__cta .btn{width:100%}
.toc-fab{position:fixed;left:var(--gutter);bottom:var(--s-4);z-index:var(--z-sticky)}
.toc-sheet{position:fixed;left:var(--gutter);bottom:calc(var(--s-4) + 48px);width:min(380px,calc(100vw - 2 * var(--gutter)));z-index:var(--z-pop);max-height:60vh;overflow:auto;background:var(--c-paper);border:1px solid var(--c-ink);box-shadow:var(--shadow-float);padding:var(--s-2) var(--s-4)}
.toc-sheet a{display:block;padding:9px 0;border-bottom:1px solid var(--c-rule);color:var(--c-ink);font-size:var(--text-sm);text-decoration:none}
.specbar{position:fixed;right:var(--gutter);bottom:var(--s-4);z-index:var(--z-sticky)}
/* свёрнутое содержание и пустая спецификация отступают на второй план: полупрозрачны, при наведении и фокусе — полностью */
.rail__in,.rail__tab,.dock.is-empty .dock__in,.dock.is-empty .dock__tab{opacity:.6;transition:top var(--dur-long) var(--ease-out),opacity var(--dur-short) var(--ease-out),background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.rail__in:hover,.rail__in:focus-within,.rail__tab:hover,.rail__tab:focus-visible,.dock.is-empty .dock__in:hover,.dock.is-empty .dock__in:focus-within,.dock.is-empty .dock__tab:hover,.dock.is-empty .dock__tab:focus-visible,.dock.is-open .dock__in{opacity:1}
/* от 1440: по бокам от колонки 1200 px — поля, контент не сужается */
@media (min-width:1440px){
  .frame{grid-template-columns:minmax(0,1fr) minmax(0,var(--content-max)) minmax(0,1fr);column-gap:24px;padding:0 16px}
  .wrap{max-width:none;padding:0}
  .rail,.dock{display:block}
  /* колонки заданы явно: скрытое «Содержание» не сдвигает контент в левое поле */
  .rail{grid-column:1;grid-row:1}
  .frame>main{grid-column:2;grid-row:1}
  .dock{grid-column:3;grid-row:1}
  .toc-fab,.toc-sheet,.specbar{display:none !important}
}
/* 1440–1759: номера разделов с подписью по наведению; спецификация — ярлык, открывается поверх */
@media (min-width:1440px) and (max-width:1759px){
  .rail__in>.label,.rail__foot,.rail__head .label,.rail__off span{display:none}
  .rail__head{justify-content:flex-end}
  .rail__in{max-width:none;width:max-content}
  .rail ol a{grid-template-columns:2.4ch;position:relative}
  .rail ol a span:last-child{position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:6px 9px;background:var(--c-ink);color:var(--c-paper);white-space:nowrap;font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;opacity:0;pointer-events:none;transition:opacity var(--dur-micro) var(--ease-out);z-index:var(--z-pop)}
  .rail ol a:hover span:last-child,.rail ol a:focus-visible span:last-child{opacity:1}
  .dock__in{display:none}
  .dock__tab{display:inline-flex}
  /* поле узкое: ярлык — у правого края, раскрытая панель — на его месте (верх и правый край совпадают, «свернуть» —
     там, где был ярлык) и ложится поверх края контента */
  .dock{display:flex;flex-direction:column;align-items:flex-end}
  .dock.is-open .dock__tab{display:none}
  .dock.is-open .dock__in{display:flex;width:300px;max-width:none;z-index:var(--z-pop);box-shadow:var(--shadow-float);transform-origin:right top}
  .dock.is-open .dock__x{display:inline-flex}
}
/* до 1440: «Спецификация» — лист над своей кнопкой справа внизу (кнопка — .specbar), «Содержание» — над своей слева */
@media (max-width:1439px){
  .dock{display:block}
  .dock__in{display:none}
  .dock.is-open .dock__in{display:flex;position:fixed;left:auto;right:var(--gutter);top:auto;bottom:calc(var(--s-4) + 48px);width:min(380px,calc(100vw - 2 * var(--gutter)));max-width:none;max-height:min(70vh,560px);margin:0;z-index:var(--z-pop);box-shadow:var(--shadow-float);transform-origin:right bottom}
  .dock.is-open .dock__x{display:inline-flex}
}
/* от 1760: спецификация — поле целиком, «свернуть» убирает его в ярлык */
@media (min-width:1760px){
  .dock__x{display:inline-flex}
  .dock-off .dock__in{display:none}
  .dock-off .dock__tab{display:inline-flex}
}

/* ---------- курсор по действию: над элементом с подсказкой курсор — значок действия 24×24, подпись — вплотную справа ---------- */
.cur{position:fixed;left:0;top:0;z-index:var(--z-cursor);pointer-events:none;display:flex;align-items:center;height:24px;padding:0 9px;background:var(--c-ink);color:var(--c-paper);font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity var(--dur-micro) var(--ease-out)}
.cur.is-on{opacity:1}
body [data-cursor][data-ck="copy"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' fill='%230f151f' stroke='%23fff' stroke-width='1.5'/%3E%3Cg transform='translate(6 6)' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Crect x='1.5' y='3.5' width='6' height='7'/%3E%3Cpath d='M4.5 3.5v-2h6v7h-3'/%3E%3C/g%3E%3C/svg%3E") 12 12,copy}
body [data-cursor][data-ck="doc"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' fill='%230f151f' stroke='%23fff' stroke-width='1.5'/%3E%3Cg transform='translate(6 6)' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M6 1.5v6M3.5 5L6 7.5 8.5 5M2 10.5h8'/%3E%3C/g%3E%3C/svg%3E") 12 12,pointer}
body [data-cursor][data-ck="open"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' fill='%230f151f' stroke='%23fff' stroke-width='1.5'/%3E%3Cg transform='translate(6 6)' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M3 9l6-6M4.5 3H9v4.5'/%3E%3C/g%3E%3C/svg%3E") 12 12,pointer}
body [data-cursor][data-ck="swipe"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' fill='%230f151f' stroke='%23fff' stroke-width='1.5'/%3E%3Cg transform='translate(6 6)' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M1.5 6h9M3.5 4L1.5 6l2 2M8.5 4l2 2-2 2'/%3E%3C/g%3E%3C/svg%3E") 12 12,grab}
body [data-cursor][data-ck="add"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' fill='%230f151f' stroke='%23fff' stroke-width='1.5'/%3E%3Cg transform='translate(6 6)' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M6 2v8M2 6h8'/%3E%3C/g%3E%3C/svg%3E") 12 12,copy}
body [data-cursor][data-ck="info"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' fill='%230f151f' stroke='%23fff' stroke-width='1.5'/%3E%3Cg transform='translate(6 6)' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Cpath d='M6 5.2V10M6 2.4v1.2'/%3E%3C/g%3E%3C/svg%3E") 12 12,help}
body [data-cursor][data-ck="off"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Crect x='.75' y='.75' width='22.5' height='22.5' fill='%230f151f' stroke='%23fff' stroke-width='1.5'/%3E%3Cg transform='translate(6 6)' fill='none' stroke='%23fff' stroke-width='1.4'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath d='M2.9 9.1l6.2-6.2'/%3E%3C/g%3E%3C/svg%3E") 12 12,not-allowed}

/* ---------- общие элементы: кнопки листания, сегменты, свой список, «−» и «+», аккордеон ---------- */
.navbtn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--c-ink);border-radius:0;background:var(--c-paper);color:var(--c-ink);cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.navbtn:hover:not([disabled]){background:var(--c-ink);color:var(--c-paper)}
.navbtn[disabled]{opacity:.35;cursor:not-allowed}
.seg{display:inline-flex;flex-wrap:wrap;align-items:stretch;border:1px solid var(--c-field);background:var(--c-paper)}
.seg>button,.seg>a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;margin:0;padding:0 14px;border:0;border-right:1px solid var(--c-rule);border-radius:0;background:var(--c-paper);box-shadow:none;font:500 var(--text-sm)/1 var(--font-body);color:var(--c-ink-2);white-space:nowrap;cursor:pointer;text-decoration:none}
.seg>:last-child{border-right:0}
.seg>button:hover:not([disabled]):not([aria-pressed="true"]):not(.is-active){background:var(--c-paper-2);color:var(--c-ink)}
.seg>[aria-pressed="true"],.seg>.is-active{background:var(--c-ink);color:var(--c-paper)}
.seg>[disabled]{cursor:not-allowed;color:var(--c-rule-strong)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px;margin:0;font:500 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.crumbs a{color:var(--c-muted);text-decoration:none}
.crumbs a:hover{color:var(--c-accent);text-decoration:underline}
.linkbtn{border:0;background:none;padding:0;font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent);cursor:pointer;white-space:nowrap}
.linkbtn:hover{text-decoration:underline}
.copy{border:0;background:none;padding:0;margin-left:8px;font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent);cursor:pointer}
.copy:hover{text-decoration:underline}
/* свой выпадающий список: открывается прямо под полем и в его стиле */
.sel{position:relative;min-width:0}
div.sel::after{content:"";position:absolute;right:16px;top:50%;width:8px;height:8px;border-right:1.5px solid var(--c-ink-2);border-bottom:1.5px solid var(--c-ink-2);transform:translateY(-70%) rotate(45deg);pointer-events:none;transition:transform var(--dur-short) var(--ease-out)}
div.sel.is-open::after{transform:translateY(-25%) rotate(225deg)}
.sel__native{position:absolute !important;inset:0;width:100% !important;height:100% !important;opacity:0;pointer-events:none}
.sel__btn{display:block;width:100%;height:100%;min-height:50px;margin:0;padding:0 40px 0 14px;border:0;border-radius:0;background:transparent;font:500 var(--text-md)/1.2 var(--font-body);color:var(--c-ink);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sel__btn:hover{background:var(--c-paper-2)}
.sel__btn[disabled]{color:var(--c-muted);cursor:not-allowed;background:var(--c-paper-2)}
.sel.is-open .sel__btn{background:var(--c-paper);box-shadow:inset 0 0 0 1px var(--c-ink)}
.sel__list{position:absolute;left:0;right:0;top:100%;z-index:var(--z-pop);margin:-1px 0 0;padding:0;list-style:none;max-height:min(320px,50vh);overflow:auto;background:var(--c-paper);border:1px solid var(--c-ink);opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:opacity var(--dur-short) var(--ease-out),transform var(--dur-short) var(--ease-out),visibility 0s linear var(--dur-short)}
.sel.is-open .sel__list{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:0s}
.sel__list:focus{outline:none}
.sel__list li{display:flex;align-items:baseline;gap:var(--s-3);margin:0;padding:10px 14px;border-top:1px solid var(--c-rule);font:400 var(--text-sm)/1.35 var(--font-body);color:var(--c-ink);cursor:pointer}
.sel__list li:first-child{border-top:0}
.sel__t{flex:1 1 auto;min-width:0}
.sel__m{flex:none;font:500 var(--text-2xs)/1.3 var(--font-mono);color:var(--c-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.sel__list li.is-off{color:var(--c-rule-strong);cursor:not-allowed}
.sel__list li.is-off .sel__m{letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.sel__list li.is-active{background:var(--c-accent-wash)}
.sel__list li[aria-selected="true"]{font-weight:600}
.sel__list li[aria-selected="true"]::before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 2px 0;background:var(--c-ink)}
/* поле со своим списком: рамка как у полей ввода */
.fsel{border:1px solid var(--c-field);border-radius:var(--radius-1);background:var(--c-paper);transition:border-color var(--dur-micro) var(--ease-out)}
.fsel:hover{border-color:var(--c-ink-2)}
.fsel.is-open{border-color:var(--c-ink)}
.fsel .sel__btn{min-height:42px;font:400 var(--text-sm)/1 var(--font-body)}
.fsel.is-open .sel__btn{box-shadow:none}
.fsel .sel__list{left:-1px;right:-1px;margin-top:0}
/* «−» и «+» вместо стрелок поля: цели 40 px, удержание повторяет шаг */
.step{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:stretch;min-width:0;height:42px;border:1px solid var(--c-field);border-radius:var(--radius-1);background:var(--c-paper)}
.step:focus-within{border-color:var(--c-ink)}
.step__b{position:relative;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:var(--c-paper);color:var(--c-ink);cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.step__b:first-child{border-right:1px solid var(--c-rule)}
.step__b:last-child{border-left:1px solid var(--c-rule)}
.step__b::before,.step__b[data-step="1"]::after,.step__b[data-q="1"]::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.step__b[data-step="1"]::after,.step__b[data-q="1"]::after{width:1.5px;height:14px}
.step__b:hover:not([disabled]){background:var(--c-paper-2)}
.step__b:active:not([disabled]){background:var(--c-accent-wash)}
.step__b[disabled]{color:var(--c-rule-strong);cursor:not-allowed}
.step__b:focus-visible{outline:2px solid var(--c-focus);outline-offset:-2px}
.step input{min-width:0;width:100%;height:100% !important;margin:0;border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;padding:0 8px !important;font:500 var(--text-md)/1 var(--font-mono) !important;color:var(--c-ink);text-align:center;font-variant-numeric:tabular-nums}
.step input:focus{outline:none}
.step--s{display:inline-grid;grid-template-columns:32px 3em 32px;height:32px}
.step--s .step__b::before,.step--s .step__b[data-q="1"]::after{width:10px}
.step--s .step__b[data-q="1"]::after{width:1.5px;height:10px}
.step--s input{font-size:var(--text-xs) !important;padding:0 2px !important}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* аккордеон: «+» поворачивается в «×», высота меняется плавно и без рывка в конце */
.acc{margin-top:var(--s-5);border-top:1px solid var(--c-ink)}
.acc details,.faq details{border-bottom:1px solid var(--c-rule)}
.acc summary,.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);cursor:pointer;transition:color var(--dur-micro) var(--ease-out)}
.acc summary::-webkit-details-marker,.faq summary::-webkit-details-marker{display:none}
.acc summary{padding:16px 0;font:500 var(--text-md)/1.3 var(--font-body)}
.acc summary::after,.faq summary::after{content:"";flex:0 0 14px;width:14px;height:14px;background:linear-gradient(currentColor,currentColor) center/100% 1.25px no-repeat,linear-gradient(currentColor,currentColor) center/1.25px 100% no-repeat;transition:transform 420ms cubic-bezier(0.32,0.72,0,1)}
.acc-body{display:flow-root}
.acc details.is-open>summary::after,.faq details.is-open>summary::after{transform:rotate(45deg)}
.acc summary:hover,.faq summary:hover{color:var(--c-accent)}
.acc summary:focus-visible,.faq summary:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.acc .in{padding:0 0 var(--s-4)}
.faq{margin-top:var(--s-5);border-top:1px solid var(--c-ink)}
.faq summary{padding:22px 0;font:500 var(--text-lg)/1.35 var(--font-body);text-align:left}
.faq .ans{padding:0 0 var(--s-5);color:var(--c-ink-2);line-height:1.6}
.faq .ans p{margin:0}
.faq .ans p+p{margin-top:var(--s-3)}

/* ---------- страница: заголовок, секции, линейки ---------- */
.phead{padding-top:var(--s-7);padding-bottom:var(--s-6)}
.phead .crumbs{margin-bottom:var(--s-4)}
.phead h1{margin:0;font-size:var(--text-3xl);line-height:1.04;letter-spacing:-.02em}
.lede{margin:var(--s-4) 0 0;font-size:var(--text-lg);line-height:1.5;color:var(--c-ink-2)}
.phead__act{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-5)}
.sec{padding-top:var(--s-8);padding-bottom:var(--s-7);border-top:1px solid var(--c-rule)}
.sec__h{margin:0;font-size:var(--text-2xl);line-height:1.1}
.bch-main>.sec:first-child{padding-top:var(--s-7);border-top:0} /* страница без шапки страницы начинается с секции */
.sec__text{margin-top:var(--s-5)}
.docs--page{margin-top:var(--s-5);border-top:1px solid var(--c-ink)}
.docs--page li{font-size:var(--text-md)}
.docs--page li:first-child{border-top:0}
/* файлы крупно, в один ряд: значок документа, название, тип и размер («О компании» → «Сертификаты») */
.fcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:var(--s-4);margin:var(--s-5) 0 0;padding:0;list-style:none}
.fcard{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;gap:6px var(--s-5);height:100%;padding:var(--s-5);border:1px solid var(--c-ink);color:var(--c-ink);text-decoration:none;transition:background-color var(--dur-micro) var(--ease-out)}
.fcard:hover{background:var(--c-paper-2);text-decoration:none}
.fcard__ic{grid-row:1/3;position:relative;display:block;width:40px;height:50px;color:var(--c-ink-2)}
.fcard__ic svg{display:block;width:100%;height:100%}
.fcard__ic b{position:absolute;left:-5px;bottom:7px;padding:3px 4px;background:var(--c-accent);color:var(--c-on-accent);font:600 9px/1 var(--font-mono);letter-spacing:.06em}
.fcard__t{align-self:end;font:600 var(--text-lg)/1.3 var(--font-display);transition:color var(--dur-micro) var(--ease-out)}
.fcard:hover .fcard__t{color:var(--c-accent)}
.fcard__m{align-self:start;font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
/* 404: поиск по сайту в строку с кнопкой; разделы каталога — строки на линейках с числом серий */
.e404__find{display:flex;align-items:flex-end;gap:var(--s-2);max-width:620px;margin-top:var(--s-5)}
.e404__find .fld{flex:1 1 auto;max-width:none}
.e404__find input{height:48px;font-size:var(--text-md)}
.e404__find .btn{min-height:48px}
.e404__cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));column-gap:var(--s-6);margin-top:var(--s-5);border-top:1px solid var(--c-ink)}
.e404__cats a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);padding:14px 0;border-bottom:1px solid var(--c-rule);font:500 var(--text-md)/1.35 var(--font-body);color:var(--c-ink);text-decoration:none;transition:color var(--dur-micro) var(--ease-out)}
.e404__cats a:hover{color:var(--c-accent)}
.e404__cats a span:last-child{flex:none;font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.sec__hrow{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s-3) var(--s-5)}
.sec__more{font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.steps{margin:var(--s-6) 0 0;padding:0;list-style:none;border-top:1px solid var(--c-ink);counter-reset:st}
.steps>li{display:grid;grid-template-columns:4ch minmax(0,1fr) minmax(0,1.2fr);gap:var(--s-5);padding:var(--s-4) 0;border-bottom:1px solid var(--c-rule);counter-increment:st}
.steps>li::before{content:counter(st, decimal-leading-zero);font:500 var(--text-sm)/1.5 var(--font-mono);color:var(--c-accent)}
.steps b{font-weight:600;font-size:var(--text-lg);line-height:1.35}
.steps p{margin:0;font-size:var(--text-sm);line-height:1.55;color:var(--c-ink-2)}
@media (max-width:760px){.steps>li{grid-template-columns:4ch minmax(0,1fr)}.steps>li>p{grid-column:2}}

/* ---------- схема этапов («Как устроена работа по проекту»): номер на линии процесса, чертёж, заголовок, текст.
   Когда схема в экране, этапы по очереди прорисовываются линиями, синяя линия идёт от номера к номеру (ui.js
   ставит .is-on один раз); наведение на этап повторяет его чертёж. Без JS и при «уменьшить движение» — готовые
   чертежи без движения. Единственная иллюстрация с анимацией на сайте — правило в дизайн-системе. ---------- */
.flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr);margin:var(--s-6) 0 0;padding:0;list-style:none}
.flow__step{display:flex;flex-direction:column;min-width:0;padding:var(--s-5) 0;border-top:1px solid var(--c-rule)}
.flow__n{align-self:flex-start;font:500 var(--text-sm)/24px var(--font-mono);color:var(--c-accent)}
.flow__art{display:block;width:100%;max-width:320px;height:auto;aspect-ratio:240/150;margin:var(--s-3) 0 var(--s-4);color:var(--c-ink);overflow:visible}
.flow__art path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.flow__art .a{stroke:var(--c-accent)}
.flow__art .g{stroke:var(--c-rule-strong)}
.flow__art .b{stroke-width:2.5}
.flow__art .w{fill:var(--c-paper)}
.flow__art .ws{fill:var(--c-accent-wash);stroke:none}
.flow__art .dash{stroke-dasharray:4 6}
.flow__art text{fill:currentColor;font:500 10px var(--font-mono);letter-spacing:.06em}
.flow__art text.a{fill:var(--c-accent)}
.flow__art text.l{fill:var(--c-muted)}
.flow__t{font-weight:600;font-size:var(--text-lg);line-height:1.35}
.flow__step p{margin:var(--s-2) 0 0;font-size:var(--text-sm);line-height:1.55;color:var(--c-ink-2)}
/* куда перейти с этапа (главная: заявка, подбор аналогов, сертификаты) */
.flow__more{align-self:flex-start;margin-top:var(--s-3);font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.07em;text-transform:uppercase}
@media (min-width:900px){
  .flow{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--s-5)}
  .flow__step{padding-top:0;border-top:0}
  .flow::before,.flow::after{content:"";position:absolute;left:0;right:0;top:12px;height:1px;background:var(--c-rule)}
  .flow::after{background:var(--c-accent);transform-origin:0 50%}
  .flow__n{position:relative;z-index:1;padding-right:var(--s-3);background:var(--c-paper)}
  .flow__art{max-width:none}
  .flow--3{grid-template-columns:repeat(3,minmax(0,1fr))} /* главная: три этапа */
  .flow--2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
html.bch-js .flow:not(.is-on) .flow__n{color:var(--c-muted)}
html.bch-js .flow.is-on .flow__n{transition:color var(--dur-micro) var(--ease-out) calc(var(--i) * .8s + .2s)}
html.bch-js .flow::after{transform:scaleX(0)}
html.bch-js .flow.is-on::after{transform:none;transition:transform 3.2s linear .2s}
html.bch-js .flow .d{stroke-dasharray:1 2}
html.bch-js .flow:not(.is-on) .d{stroke-dashoffset:1;opacity:0}
html.bch-js .flow:not(.is-on) .f{opacity:0}
html.bch-js .flow:not(.is-on) .mv{transform:translateX(-56px);opacity:0}
html.bch-js .flow:not(.is-on) .drop{transform:translateY(-10px);opacity:0}
html.bch-js .flow.is-on .d{transition:stroke-dashoffset .9s var(--ease-out) calc(var(--i) * .8s + var(--d, 0s)),opacity .12s linear calc(var(--i) * .8s + var(--d, 0s))}
html.bch-js .flow.is-on .f{transition:opacity var(--dur-long) var(--ease-out) calc(var(--i) * .8s + var(--d, 0s))}
html.bch-js .flow.is-on .mv{transition:transform 1.1s var(--ease-out) calc(var(--i) * .8s + .9s),opacity .12s linear calc(var(--i) * .8s + .9s)}
html.bch-js .flow.is-on .drop{transition:transform var(--dur-long) var(--ease-out) calc(var(--i) * .8s + 1.9s),opacity var(--dur-long) var(--ease-out) calc(var(--i) * .8s + 1.9s)}
@keyframes flow-draw{from{stroke-dashoffset:1;opacity:0}}
@keyframes flow-fade{from{opacity:0}}
@keyframes flow-mv{from{transform:translateX(-56px);opacity:0}}
@keyframes flow-drop{from{transform:translateY(-10px);opacity:0}}
.flow.is-done .flow__step:hover .d{animation:flow-draw .9s var(--ease-out) var(--d, 0s) both}
.flow.is-done .flow__step:hover .f{animation:flow-fade var(--dur-long) var(--ease-out) var(--d, 0s) both}
.flow.is-done .flow__step:hover .mv{animation:flow-mv 1.1s var(--ease-out) .9s both}
.flow.is-done .flow__step:hover .drop{animation:flow-drop var(--dur-long) var(--ease-out) 1.9s both}
@media (prefers-reduced-motion:reduce){.flow *,.flow::after{animation:none !important;transition:none !important}}

/* ---------- «Проектам»: регистрация проекта — анкета «синей ручкой» → «в ответ» → счёт с проектной скидкой ----------
   (inc/sections.php, bch_project_reg). Листы — бумага с листом под ней (жёсткий сдвиг, без мягкой тени); ответы
   клиента — синие штрихи-слова, штампы — синие, как оттиск. Движение один раз, когда блок в экране (ui.js, data-inview). */
.preg{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);align-items:center;margin-top:var(--s-6)}
@media (min-width:1000px){.preg{grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr);gap:var(--s-5)}}
.preg__sheet{position:relative;margin:0 6px 6px 0;padding:var(--s-5) var(--s-5) var(--s-4);border:1px solid var(--c-ink);background:var(--c-paper);box-shadow:6px 6px 0 -1px var(--c-paper-2),6px 6px 0 0 var(--c-rule-strong)}
.preg__hd{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px var(--s-3);margin:0 0 var(--s-2);padding-bottom:var(--s-3);border-bottom:1px solid var(--c-ink)}
.preg__hd b{font:600 var(--text-md)/1.25 var(--font-body)}
.preg__rows,.preg__lines{margin:0;padding:0;list-style:none}
.preg__rows li{padding:8px 0 9px;border-bottom:1px solid var(--c-rule)}
.preg__k{display:block;font:400 var(--text-xs)/1.35 var(--font-body);color:var(--c-muted)}
/* «вписанный» ответ — штрихи-слова синим по ширине --w */
.preg__v{display:block;height:6px;width:var(--w);margin-top:7px;border-radius:1px;color:var(--c-accent);background:repeating-linear-gradient(90deg,currentColor 0 22px,transparent 0 27px,currentColor 0 36px,transparent 0 41px,currentColor 0 60px,transparent 0 65px);clip-path:inset(0 0 0 0)} /* явное inset: с «none» clip-path не анимируется — строки появлялись разом */
.preg__or{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--s-2);margin:var(--s-3) 0 0;font-size:var(--text-sm)}
.preg__or .label{padding:3px 6px 2px;border:1px solid var(--c-ink)}
.preg__ext{font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;color:var(--c-muted)}
.preg__stamp{position:absolute;right:var(--s-4);bottom:var(--s-7);width:112px;height:112px;color:var(--c-accent);transform:rotate(-14deg);mix-blend-mode:multiply;pointer-events:none}
.preg__stamp circle,.preg__stamp path{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.preg__stamp .t{stroke-width:1.2}
.preg__stamp .b{stroke-width:4}
.preg__stamp text{fill:currentColor;font:600 10px var(--font-mono);letter-spacing:.08em}
/* стрелка «в ответ»: на телефоне — вниз, от 1000 — вправо */
.preg__to{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--c-accent)}
.preg__to svg{width:56px;height:22px;margin:17px 0;overflow:visible;transform:rotate(90deg)}
.preg__to path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.preg__to .label{color:var(--c-muted)}
@media (min-width:1000px){.preg__to svg{width:88px;margin:0;transform:none}}
.preg__lines li{display:grid;grid-template-columns:minmax(0,9ch) 6ch minmax(0,1fr);align-items:center;gap:var(--s-3);padding:10px 0;border-bottom:1px solid var(--c-rule)}
.preg__code{font:500 var(--text-sm)/1.3 var(--font-mono)}
.preg__q{font:400 var(--text-xs)/1 var(--font-mono);color:var(--c-muted);white-space:nowrap}
.preg__lines .preg__v{justify-self:end;margin:0;color:var(--c-ink-2);opacity:.5}
.preg__sum{margin:var(--s-3) 0 0;padding:0}
.preg__sum div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:8px 0}
.preg__sum dt{font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted)}
.preg__sum dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap}
.preg__list dd{font:500 var(--text-md)/1.2 var(--font-mono);color:var(--c-muted)}
.preg__list s{position:relative;text-decoration:none}
.preg__list s::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:2px;background:var(--c-bad);transform-origin:0 50%}
.preg__pay{border-top:1px solid var(--c-ink)}
.preg__pay dd{font:600 var(--text-2xl)/1.1 var(--font-display);letter-spacing:-.01em}
.preg__badge{position:absolute;top:-16px;right:-12px;padding:7px 12px 6px;border:2px solid var(--c-accent);color:var(--c-accent);background:var(--c-accent-wash);font:700 var(--text-xl)/1 var(--font-mono);letter-spacing:.02em;white-space:nowrap;transform:rotate(-8deg)}
.preg__note{margin:var(--s-3) 0 0;font:400 var(--text-2xs)/1.45 var(--font-mono);letter-spacing:.02em;color:var(--c-muted)}
/* порядок: анкета → ответы по строкам → «или документация» → штамп → стрелка → счёт → строки → по прайсу →
   зачёркивание → по проекту → штамп «−55 %» (≈5 с); без JS и при reduced-motion всё сразу на месте */
html.bch-js .preg:not(.is-on) :is(.preg__sheet,.preg__or,.preg__list,.preg__pay,.preg__note,.preg__to .label){opacity:0}
html.bch-js .preg:not(.is-on) .preg__sheet{transform:translateY(12px)}
html.bch-js .preg:not(.is-on) .preg__pay{transform:translateY(6px)}
html.bch-js .preg:not(.is-on) .preg__v{clip-path:inset(0 100% 0 0)}
html.bch-js .preg:not(.is-on) :is(.preg__stamp,.preg__badge){opacity:0;transform:scale(1.8) rotate(-30deg)}
html.bch-js .preg:not(.is-on) .preg__to path{stroke-dashoffset:1}
html.bch-js .preg:not(.is-on) .preg__list s::after{transform:scaleX(0)}
.preg.is-on .preg__doc{transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.preg.is-on .preg__doc .preg__v{transition:clip-path .45s var(--ease-out) calc(.35s + var(--i) * .16s)}
.preg.is-on .preg__or{transition:opacity var(--dur-long) var(--ease-out) 1.5s}
.preg.is-on .preg__stamp{transition:opacity .12s linear 1.85s,transform .38s cubic-bezier(.2,1.5,.4,1) 1.85s}
.preg.is-on .preg__to path{transition:stroke-dashoffset .5s var(--ease-out) 2.25s}
.preg.is-on .preg__to .label{transition:opacity var(--dur-long) var(--ease-out) 2.45s}
.preg.is-on .preg__inv{transition:opacity .5s var(--ease-out) 2.55s,transform .5s var(--ease-out) 2.55s}
.preg.is-on .preg__inv .preg__v{transition:clip-path .4s var(--ease-out) calc(2.85s + var(--i) * .14s)}
.preg.is-on .preg__list{transition:opacity var(--dur-long) var(--ease-out) 3.45s}
.preg.is-on .preg__list s::after{transition:transform .35s var(--ease-out) 3.85s}
.preg.is-on .preg__pay{transition:opacity .4s var(--ease-out) 4.15s,transform .4s var(--ease-out) 4.15s}
.preg.is-on .preg__badge{transition:opacity .12s linear 4.55s,transform .38s cubic-bezier(.2,1.5,.4,1) 4.55s}
.preg.is-on .preg__note{transition:opacity var(--dur-long) var(--ease-out) 4.85s}
@media (prefers-reduced-motion:reduce){.preg *{transition:none !important}}
.adv{display:grid;grid-template-columns:minmax(0,1fr);margin:var(--s-5) 0 0;padding:0;list-style:none;border-top:1px solid var(--c-ink)}
@media (min-width:720px){.adv{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.adv{grid-template-columns:repeat(4,minmax(0,1fr))}.adv li+li{border-left:1px solid var(--c-rule);padding-left:var(--s-4)}}
.adv li{padding:var(--s-5) var(--s-4) var(--s-5) 0;border-bottom:1px solid var(--c-rule)}
.adv b{display:block;font:600 var(--text-3xl)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.adv strong{display:block;margin-top:var(--s-3);font-weight:600}
.adv p{margin:6px 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--c-ink-2)}
/* пояснение из админки — HTML: абзацы, списки, картинки по ширине колонки */
.adv__t{font-size:var(--text-sm);line-height:1.5;color:var(--c-ink-2)}
.adv__t :is(ul,ol){margin:6px 0 0;padding-left:1.2em}
.adv__t :is(img,figure){display:block;max-width:100%;height:auto;margin:var(--s-3) 0 0;background:var(--c-photo)}
.adv__t figcaption,.adv__t .wp-caption-text{margin-top:6px;font:400 var(--text-xs)/1.4 var(--font-mono);color:var(--c-muted)}
.adv__t a{color:var(--c-accent)}
.adv li>:first-child,.adv li>.adv__t:first-child>:first-child{margin-top:0}
/* цифры и факты: число крупно, «более» — подписью над ним; без карточек и теней */
.figs{display:grid;grid-template-columns:minmax(0,1fr);margin:var(--s-6) 0 0;padding:0;list-style:none;border-top:1px solid var(--c-ink)}
@media (min-width:720px){.figs{grid-template-columns:repeat(3,minmax(0,1fr))}.figs li:not(:nth-child(3n+1)){border-left:1px solid var(--c-rule);padding-left:var(--s-5)}}
.figs li{display:flex;flex-direction:column;justify-content:flex-start;min-height:150px;padding:var(--s-5) var(--s-5) var(--s-5) 0;border-bottom:1px solid var(--c-rule)}
.figs .label{margin-bottom:6px}
.figs b{display:block;font:600 var(--text-display)/.95 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.figs strong{display:block;font:600 var(--text-xl)/1.2 var(--font-display);letter-spacing:-.01em}
.figs li>span:not(.label){display:block;margin-top:var(--s-2);font-size:var(--text-sm);color:var(--c-ink-2)}
/* текст статьи и серии: стандартные теги по единым правилам */
.article{font-size:var(--text-md);line-height:1.65;color:var(--c-ink);overflow-wrap:break-word} /* в тексте из админки — цепочки слов через &nbsp; длиннее строки телефона («Оферта») */
.article>*+*{margin-top:var(--s-4)}
.article>:first-child{margin-top:0}
.article h2{margin-top:var(--s-7);font-size:var(--text-2xl);line-height:1.12}
.article h3{margin-top:var(--s-6);font-size:var(--text-xl);line-height:1.2}
.article h4{margin-top:var(--s-5);font-size:var(--text-lg)}
.article p{margin-bottom:0}
.article a{text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--c-accent) 40%,transparent)}
.article a:hover{text-decoration-color:var(--c-accent)}
.article ul,.article ol{margin-bottom:0;padding:0;list-style:none}
.article ul li{position:relative;padding:2px 0 2px 20px}
.article ul li::before{content:"";position:absolute;left:0;top:.85em;width:9px;height:1px;background:var(--c-ink-2)}
.article ol{counter-reset:o}
/* номер — поверх отступа, а не колонкой сетки: пункт с <b> и текстом течёт одной строкой */
.article ol li{position:relative;padding:2px 0 2px 3.2ch;counter-increment:o}
.article ol li::before{content:counter(o) ".";position:absolute;left:0;top:2px;font:500 var(--text-sm)/1.9 var(--font-mono);color:var(--c-accent)}
.article table{width:100%;border-collapse:collapse;font-size:var(--text-sm);line-height:1.45}
.article th{text-align:left;padding:0 var(--s-4) var(--s-2) 0;border-bottom:1px solid var(--c-ink);font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted);background:none}
.article td{padding:var(--s-2) var(--s-4) var(--s-2) 0;border:0;border-bottom:1px solid var(--c-rule);vertical-align:top;font-variant-numeric:tabular-nums;background:none}
.article figure{margin:var(--s-6) 0 0}
.article figure img,.article>p img{display:block;max-width:100%;height:auto;background:var(--c-photo)}
/* видео из админки (Rutube, YouTube, VK) вставлено iframe width="720": на телефоне уезжало за экран — Вебмастер
   помечал сайт «не оптимизирован для мобильных» */
.article :is(iframe,video,embed,object){display:block;max-width:100%}
.article iframe{width:100%;height:auto;aspect-ratio:16/9;border:0}
.article figcaption{padding-top:var(--s-2);font:400 var(--text-xs)/1.5 var(--font-mono);color:var(--c-muted)}
.article blockquote{margin:var(--s-5) 0 0;padding:2px 0 2px var(--s-4);border-left:2px solid var(--c-accent);color:var(--c-ink-2)}


/* ---------- «Решения»: карточка раскрывается и показывает аппарат в щите ---------- */
.rv{margin-top:var(--s-5)}
.rv__viewport{overflow:hidden}
.rv__track{display:flex;transition:transform var(--dur-long) var(--ease-out)}
.rv__page{flex:0 0 100%;min-width:0;display:flex;gap:var(--s-2);height:clamp(380px,38vw,520px)}
.rv__panel{position:relative;flex:1 1 0%;min-width:0;overflow:hidden;border:1px solid var(--c-rule);background:var(--c-photo);cursor:pointer;transition:flex-grow var(--dur-long) var(--ease-out),flex-basis var(--dur-long) var(--ease-out),border-color var(--dur-micro) var(--ease-out)}
.rv__panel:hover,.rv__panel.is-active{border-color:var(--c-ink)}
.rv__panel:focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.rv__product{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:10% 12% 22%;transition:opacity var(--dur-short) var(--ease-out)}
.rv__product img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.rv__name{position:absolute;left:16px;bottom:14px;font:600 var(--text-lg)/1 var(--font-mono);letter-spacing:.02em;color:var(--c-ink);white-space:nowrap;transition:opacity var(--dur-short) var(--ease-out)}
.rv__scene{position:absolute;inset:0;opacity:0;transition:opacity var(--dur-short) var(--ease-out)}
.rv__scene img{width:100%;height:100%;object-fit:cover}
.rv__cap{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s-4);padding:14px 18px;background:var(--c-ink);color:var(--c-paper);opacity:0;transition:opacity var(--dur-short) var(--ease-out)}
.rv__cap b{font:600 var(--text-md)/1.3 var(--font-body)}
.rv__cap span{font:500 var(--text-xs)/1.3 var(--font-mono);color:var(--c-rule)}
.rv__cap a{margin-left:auto;font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-paper);white-space:nowrap}
.rv.has-active .rv__panel{flex:0 0 64px}
.rv.has-active .rv__panel.is-active{flex:1 1 0%}
.rv.has-active .rv__panel:not(.is-active) .rv__product{opacity:0}
.rv.has-active .rv__panel:not(.is-active) .rv__name{left:50%;bottom:16px;writing-mode:vertical-rl;transform:translateX(-50%) rotate(180deg);font-size:var(--text-sm)}
.rv__panel.is-active .rv__scene,.rv__panel.is-active .rv__cap{opacity:1}
.rv__panel.is-active .rv__product,.rv__panel.is-active .rv__name{opacity:0}
.rv__bar{display:flex;align-items:center;gap:var(--s-3);margin-top:var(--s-3)}
.rv__num{font:500 var(--text-xs)/1 var(--font-mono);font-variant-numeric:tabular-nums}
.rv__hint{margin-left:auto;font-size:var(--text-xs);color:var(--c-muted)}
@media (max-width:900px){
  .rv__track{display:block;transform:none !important}
  .rv__page{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:auto}
  .rv__page+.rv__page{margin-top:var(--s-2)}
  .rv__panel{aspect-ratio:3/4}
  .rv.has-active .rv__panel,.rv.has-active .rv__panel.is-active{flex:initial}
  .rv.has-active .rv__panel:not(.is-active) .rv__product{opacity:1}
  .rv.has-active .rv__panel:not(.is-active) .rv__name{left:12px;bottom:12px;writing-mode:horizontal-tb;transform:none;font-size:var(--text-md)}
  .rv__cap{padding:10px 12px}
  .rv__cap b{font-size:var(--text-sm)}
  .rv__bar{display:none}
}

/* ---------- «Примеры щитов»: по кругу, соседние щиты видны по краям ---------- */
.cab{margin-top:var(--s-5);outline:none}
.cab:focus-visible{outline:2px solid var(--c-focus);outline-offset:4px}
.cab__stage{position:relative;margin:0 auto;overflow:hidden;touch-action:pan-y}
.cab__slide{position:absolute;left:0;top:0;height:100%;margin:0;border:1px solid var(--c-rule);background:var(--c-photo);opacity:0;pointer-events:none;transition:transform var(--dur-long) var(--ease-out),opacity var(--dur-long) var(--ease-out)}
.cab__slide img{display:block;width:100%;height:100%;object-fit:cover;-webkit-user-drag:none;user-select:none}
.cab__slide.is-active{opacity:1;pointer-events:auto}
.cab__slide.is-side{opacity:.35;pointer-events:auto;cursor:inherit}
.cab__slide.is-side:hover{opacity:.55}
.cab__nav{position:absolute;top:50%;z-index:2;transform:translateY(-50%)}
.cab__nav--prev{left:8px}
.cab__nav--next{right:8px}
/* автолистание: полоса под фото заполняется за интервал (ui.js), на паузе — стоит */
.cab__prog{display:block;height:2px;margin:var(--s-2) auto 0;background:var(--c-rule);overflow:hidden}
.cab__prog[hidden]{display:none}
.cab__prog i{display:block;height:100%;background:var(--c-ink);transform:scaleX(0);transform-origin:0 50%}
.cab__prog.is-run i{animation:cab-prog var(--cab-ms, 5s) linear forwards}
.cab.is-paused .cab__prog i{animation-play-state:paused}
@keyframes cab-prog{to{transform:scaleX(1)}}
.cab__bar{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin:var(--s-3) auto 0}
.cab__cap{font:500 var(--text-md)/1.4 var(--font-body)}
.cab__num{font:500 var(--text-xs)/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--c-muted)}

/* ---------- каталог: карточки с фото на белой плашке, фильтры слева ---------- */
.cat{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);margin-top:var(--s-5)}
@media (min-width:900px){.cat{grid-template-columns:196px minmax(0,1fr);gap:var(--s-6)}}
.flt{align-self:start;border-top:1px solid var(--c-ink)}
.flt fieldset{margin:0;padding:var(--s-3) 0 var(--s-4);border:0;border-bottom:1px solid var(--c-rule);min-width:0}
.flt legend{float:left;width:100%;padding:0 0 var(--s-2);font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted)}
.flt label{clear:left;display:grid;grid-template-columns:16px minmax(0,1fr) auto;gap:var(--s-2);align-items:center;padding:4px 0;font-size:var(--text-sm);cursor:pointer}
.flt label>span:last-child{font:500 var(--text-2xs)/1 var(--font-mono);color:var(--c-muted);font-variant-numeric:tabular-nums}
.flt input{appearance:none;-webkit-appearance:none;display:grid;place-content:center;width:14px;height:14px;margin:0;border:1px solid var(--c-field);border-radius:0;background:var(--c-paper);cursor:pointer}
.flt input:hover{border-color:var(--c-ink)}
.flt input:checked{background:var(--c-ink);border-color:var(--c-ink)}
.flt input:checked::after{content:"";width:6px;height:6px;background:var(--c-paper)}
.flt input:disabled{cursor:not-allowed;border-color:var(--c-rule)}
.flt label.is-off{color:var(--c-rule-strong);cursor:not-allowed}
.flt__reset{margin-top:var(--s-3);border:0;background:none;padding:0;font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent);cursor:pointer}
.flt__reset:hover{text-decoration:underline}
.flt__reset[disabled]{color:var(--c-rule-strong);cursor:default;text-decoration:none}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:0 var(--s-4);align-content:start}
.card{display:flex;flex-direction:column;min-width:0;color:var(--c-ink);text-decoration:none}
.card:hover{text-decoration:none}
/* строки ряда общие (subgrid): фото, код или название, тип, данные — на одной высоте у всех карточек ряда */
.cards>.card{display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start}
.cards--cat>.card{grid-row:span 3}
.cards>.card>:last-child{margin-bottom:var(--s-6)}
.card[hidden],.cards>.card[hidden]{display:none}
.card__ph{position:relative;aspect-ratio:1;background:var(--c-photo);overflow:hidden}
.card__ph img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.card__ph.is-empty{display:grid;place-items:center;font:600 var(--text-xl)/1 var(--font-mono);color:var(--c-rule-strong)}
.card__code{margin-top:var(--s-3);font:600 var(--text-xl)/1.1 var(--font-mono);letter-spacing:.01em;overflow-wrap:anywhere;transition:color var(--dur-micro) var(--ease-out)}
.card:hover .card__code{color:var(--c-accent)}
.card__type{margin-top:4px;font-size:var(--text-sm);color:var(--c-ink-2)}
/* заголовок карточки серии — «тип CHINT код» для поиска и диктора; коробки нет, код и тип — строки сетки карточки */
.card__h{display:contents;font:inherit;letter-spacing:inherit}
.cards>.card .card__code{grid-row:2}
.cards>.card .card__type{grid-row:3}
.card__name{margin:var(--s-3) 0 0;font:600 var(--text-lg)/1.25 var(--font-body);letter-spacing:0;transition:color var(--dur-micro) var(--ease-out)}
.card:hover .card__name{color:var(--c-accent)}
.cards--cat{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
.card__meta:empty{padding-top:0;border-top:0}
.card__meta{margin-top:var(--s-3);padding-top:var(--s-2);border-top:1px solid var(--c-rule);font:500 var(--text-xs)/1.55 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--c-muted)}
/* категория в каталоге: число серий строкой, под ним коды — перенос только между кодами, остаток — «+N» */
.card__meta b{display:block;font-weight:500;color:var(--c-ink-2)}
.card__codes{display:flex;flex-wrap:wrap;gap:0 10px}
.card__codes span{white-space:nowrap}
.cards__empty{grid-column:1/-1;margin:0;padding:var(--s-5) 0;color:var(--c-muted);font-size:var(--text-sm)}
/* главная, «Каталог» — указатель, а не карточки /catalog/: номер, фото, категория, коды всех
   серий ссылками (цель нажатия 40 px, на касание 44 px); наведение на код ставит в строку фото серии, как в меню (ui.js) */
.cidx{--cp:9px;margin:var(--s-5) 0 0;padding:0;list-style:none;border-top:1px solid var(--c-ink)}
@media (pointer:coarse){.cidx{--cp:11px}}
.cidx__row{display:grid;grid-template-columns:4ch 112px minmax(0,18rem) minmax(0,1fr);grid-template-areas:"n ph cat codes";align-items:start;column-gap:var(--s-5);padding:var(--s-4) 0;border-bottom:1px solid var(--c-rule)}
.cidx__n{grid-area:n;font:500 var(--text-sm)/1.5 var(--font-mono);color:var(--c-accent)}
.cidx__ph{grid-area:ph;position:relative;display:block;aspect-ratio:1;background:var(--c-photo)}
.cidx__ph img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.cidx__name{grid-area:cat;min-width:0;margin:0;font:600 var(--text-xl)/1.2 var(--font-display);letter-spacing:0}
.cidx__name a{color:var(--c-ink);text-decoration:none;transition:color var(--dur-micro) var(--ease-out)}
.cidx__name a:hover{color:var(--c-accent)}
.cidx__codes{grid-area:codes;display:flex;flex-wrap:wrap;column-gap:var(--s-5);margin:calc(-1 * var(--cp)) 0 0;padding:0;list-style:none}
.cidx__codes a{display:block;padding:var(--cp) 0;font:500 var(--text-sm)/22px var(--font-mono);color:var(--c-ink-2);text-decoration:none;white-space:nowrap;transition:color var(--dur-micro) var(--ease-out)}
.cidx__codes a:hover{color:var(--c-accent);text-decoration:underline;text-underline-offset:4px}
@media (max-width:999px){.cidx__row{grid-template-columns:4ch 96px minmax(0,1fr);grid-template-areas:"n ph cat" "n ph codes";grid-template-rows:auto 1fr}.cidx__codes{margin-top:var(--s-1)}}
@media (max-width:599px){.cidx__row{grid-template-columns:76px minmax(0,1fr);grid-template-areas:"ph cat" "codes codes";grid-template-rows:auto;column-gap:var(--s-4)}.cidx__n{display:none}.cidx__codes{margin-top:var(--s-2);column-gap:var(--s-4)}}

/* ---------- карточка серии: фото аппарата слева, паспорт справа ---------- */
.pdp{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-6);padding-top:var(--s-5)}
@media (min-width:1000px){.pdp{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-7)}}
.pdp__media{position:relative;min-width:0}
.pdp__photos{display:flex;flex-direction:column;gap:var(--s-3)}
.pdp__ph{position:relative;margin:0;aspect-ratio:1;background:var(--c-photo);overflow:hidden}
.pdp__ph img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.pdp__ph.is-empty{display:grid;place-items:center;font:600 var(--text-2xl)/1 var(--font-mono);color:var(--c-rule-strong)}
@media (max-width:999px){
  .pdp__photos{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:var(--s-2);scrollbar-width:thin}
  .pdp__ph{flex:0 0 86%;scroll-snap-align:start}
  .pdp__ph:only-child{flex-basis:100%}
}
.pdp__tog{position:relative;z-index:1;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid var(--c-ink);border-radius:0;background:var(--c-paper);font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink);cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.pdp__tog:hover{background:var(--c-ink);color:var(--c-paper)}
.pdp__tog svg{flex:none}
.pdp__tog .i-ph,.pdp.is-cfg .pdp__tog .i-cfg,.pdp.is-cfg .pdp__photos{display:none}
.pdp.is-cfg .pdp__tog .i-ph{display:block}
/* строка над фото: кнопка справа — фото не перекрывает */
.pdp__cta{position:absolute;top:12px;left:12px;right:12px;z-index:3;display:flex;justify-content:flex-end;align-items:center;gap:10px;pointer-events:none}
.pdp__cta[hidden]{display:none} /* серия из одного артикула — подбирать нечего */
.pdp__cta>*{pointer-events:auto}
/* монтажник (тот же, что у логотипа) у «Подобрать параметры». Один проход — 2,4 с кадрами, как в 8-битной игре: выходит
   из-за кнопки, двумя шагами встаёт перед ней, дважды тычет в неё рукой — кнопка проседает, у пальца искра, ручки значка
   сдвигаются, — отходит и прячется за кнопку. card.js ставит is-nudge на проход, наведение снимает — прячется сразу */
.nudge{position:relative;z-index:0;flex:none;width:36px;height:32px;margin-right:-22px;pointer-events:none}
.nudge__svg{display:block;width:36px;height:32px;transform:translateX(30px)}
.nudge .egg__sw{display:none}
.nudge .egg__man{transform:none;transition:none}
.pdp.is-cfg .nudge,.pdp:not(.is-series) .nudge{display:none}
/* кадры: 0–12 % выходит (4 шага), 23–28 % два шага — теперь перед кнопкой, рука на ней; 32 и 43 % — тычки;
   63–68 % шаги назад, за кнопку; 79–88 % уходит за неё */
@keyframes nudge-z{0%{z-index:0}23.33%{z-index:2}67.5%{z-index:0}}
@keyframes nudge-go{0%{transform:translateX(30px)}2.92%{transform:translateX(22px)}5.83%{transform:translateX(14px)}8.75%{transform:translateX(4px)}11.67%{transform:translateX(-4px)}23.33%{transform:translateX(0)}27.5%{transform:translateX(4px)}63.33%{transform:translateX(0)}67.5%{transform:translateX(-4px)}79.17%{transform:translateX(4px)}82.08%{transform:translateX(14px)}85%{transform:translateX(22px)}87.92%,100%{transform:translateX(30px)}}
@keyframes nudge-up{0%{opacity:0}31.67%{opacity:1}38.33%{opacity:0}43.33%{opacity:1}50%{opacity:0}}
@keyframes nudge-dn{0%{opacity:1}31.67%{opacity:0}38.33%{opacity:1}43.33%{opacity:0}50%{opacity:1}}
@keyframes nudge-fx{0%{opacity:0}31.67%{opacity:1}36.25%{opacity:0}43.33%{opacity:1}47.92%{opacity:0}}
@keyframes nudge-tap{0%{transform:none;background-color:var(--c-paper)}31.67%{transform:translateY(1px);background-color:var(--c-paper-3)}38.33%{transform:none;background-color:var(--c-paper)}43.33%{transform:translateY(1px);background-color:var(--c-paper-3)}50%{transform:none;background-color:var(--c-paper)}}
.pdp__cta.is-nudge .nudge{animation:nudge-z 2.4s step-end}
.pdp__cta.is-nudge .nudge__svg{animation:nudge-go 2.4s step-end}
.pdp__cta.is-nudge .nudge .egg__up{animation:nudge-up 2.4s step-end}
.pdp__cta.is-nudge .nudge .egg__dn{animation:nudge-dn 2.4s step-end}
.pdp__cta.is-nudge .nudge .egg__fx{animation:nudge-fx 2.4s step-end}
.pdp__cta.is-nudge .pdp__tog{animation:nudge-tap 2.4s step-end}
/* значок «настройки»: ручки сдвигаются — при тычке монтажника и при наведении */
@keyframes bchK1{0%,100%{transform:none}35%{transform:translateX(-4px)}70%{transform:translateX(1px)}}
@keyframes bchK2{0%,100%{transform:none}35%{transform:translateX(5px)}70%{transform:translateX(-1px)}}
@keyframes bchK3{0%,100%{transform:none}35%{transform:translateX(-5px)}70%{transform:translateX(2px)}}
@keyframes bchK1h{0%,100%{transform:none}35%{transform:translateX(-4px)}70%{transform:translateX(1px)}}
@keyframes bchK2h{0%,100%{transform:none}35%{transform:translateX(5px)}70%{transform:translateX(-1px)}}
@keyframes bchK3h{0%,100%{transform:none}35%{transform:translateX(-5px)}70%{transform:translateX(2px)}}
.pdp.is-series .pdp__cta.is-nudge .k1{animation:bchK1 .9s var(--ease-out) .76s}
.pdp.is-series .pdp__cta.is-nudge .k2{animation:bchK2 .9s var(--ease-out) .81s}
.pdp.is-series .pdp__cta.is-nudge .k3{animation:bchK3 .9s var(--ease-out) .86s}
.pdp .pdp__tog:hover .k1{animation:bchK1h .9s var(--ease-out)}
.pdp .pdp__tog:hover .k2{animation:bchK2h .9s var(--ease-out) .05s}
.pdp .pdp__tog:hover .k3{animation:bchK3h .9s var(--ease-out) .1s}
.pcfg{display:flex;flex-direction:column;border:1px solid var(--c-ink);background:var(--c-paper)}
.pcfg[hidden]{display:none}
.pcfg__head{display:flex;flex-wrap:wrap;align-items:center;gap:6px var(--s-4);min-height:64px;padding:12px 220px 12px 16px;border-bottom:1px solid var(--c-ink)}
.pcfg__head .label:first-child{color:var(--c-ink)}
.pcfg__reset{display:inline-flex;align-items:center;gap:6px;min-height:28px;border:0;background:none;padding:0;font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-accent);cursor:pointer}
.pcfg__reset:hover:not([disabled]) span{text-decoration:underline}
.pcfg__reset[disabled]{color:var(--c-rule-strong);cursor:default}
.cfg__row{display:grid;grid-template-columns:minmax(0,19ch) minmax(0,1fr);border-bottom:1px solid var(--c-rule);background:var(--c-paper);transition:background-color 700ms var(--ease-out)}
.cfg__row:last-child{border-bottom:0}
.cfg__row.is-changed{background:var(--c-accent-wash);transition:none}
.cfg__row label{display:flex;align-items:center;margin:0;padding:12px 14px;border-right:1px solid var(--c-rule);font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
/* строка без выбора — «Не выбрано»; единственно возможное значение ставится само и показано приглушённо */
.cfg__row.is-empty .sel__btn{color:var(--c-muted);font-weight:400}
.cfg__row.is-auto .sel__btn{color:var(--c-ink-2);font-weight:400}
.cfg__row .sel__list li:first-child{color:var(--c-muted)}
.pcfg__note{margin:0;padding:12px 16px;border-top:1px solid var(--c-rule);font:400 var(--text-2xs)/1.5 var(--font-mono);color:var(--c-muted)}
@media (min-width:1000px){.pdp__stick{position:sticky;top:min(calc(var(--hdr-vis) + var(--adminbar) + var(--s-4)),calc(100vh - var(--stick-h, 0px) - var(--s-4)));transition:top var(--dur-long) var(--ease-out)}}
.kicker{margin:var(--s-4) 0 0;font:500 var(--text-sm)/1.4 var(--font-mono);color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.sku__title{margin:var(--s-2) 0 0;font-size:clamp(var(--text-xl),1.1rem + .8vw,1.75rem);letter-spacing:-.01em;line-height:1.18} /* 22 px на телефоне → 28 px на десктопе */
.sku__ref{margin:var(--s-3) 0 0;font:500 var(--text-sm)/1.4 var(--font-mono)}
.sku__price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--c-rule)}
.sku__price b{font:600 var(--text-3xl)/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sku__price span{font-size:var(--text-sm);color:var(--c-muted)}
.sku__ref[hidden],.sku__price[hidden]{display:none}
/* наличие из API Chint (inc/stock.php): текстом, строка на статус — «В наличии: 1 440 шт.»; цифры цветом: в наличии —
   зелёным, в пути — голубым, под заказ — красным. В таблице «Все артикулы и цены» — тем же цветом второй строкой под ценой */
.stock{display:grid;gap:2px;margin:var(--s-3) 0 0;font-size:var(--text-sm);line-height:1.45;color:var(--c-ink-2);font-variant-numeric:tabular-nums}
.stock b{font-weight:600}
.stock .is-ok,.ptab .is-ok{color:var(--c-ok)}
.stock .is-transit,.ptab .is-transit{color:var(--c-info)}
.stock .is-order,.ptab .is-order{color:var(--c-bad)}
.ptab :is(.is-ok,.is-transit,.is-order){display:block;font-size:var(--text-xs);line-height:1.3;white-space:normal}
.sku__sum{margin:var(--s-4) 0 0;font-size:var(--text-sm);line-height:1.55;color:var(--c-ink-2)}
/* две кнопки рядом, только если обе надписи в строку (длиннейшая — «Отправить спецификацию», с полями 201 px); иначе — одна
   под другой во всю ширину. Зависит только от ширины колонки — ряд не прыгает при смене серии на артикул */
.sku__cta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--s-2);margin-top:var(--s-5)}
.sku__cta .btn{width:100%;min-height:46px;padding:0 12px;justify-content:center;text-align:center;white-space:normal;line-height:1.2}
.specs{display:grid;grid-template-columns:minmax(0,1fr);margin:0}
.specs div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-3);padding:8px 0;border-top:1px solid var(--c-rule);font-size:var(--text-sm)}
.specs div:first-child{border-top:0}
.specs dt{color:var(--c-ink-2)}
.specs dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;font-weight:500;overflow-wrap:anywhere}
/* «Артикулы и цены»: весь прайс серии в HTML, наименование — ссылка на адрес артикула; длинный список листается в рамке */
.ptab{margin-top:var(--s-5);max-height:min(72vh,720px);overflow:auto;overscroll-behavior:contain;border-top:1px solid var(--c-ink);border-bottom:1px solid var(--c-rule)}
.ptab table{width:100%;border-collapse:collapse;font-size:var(--text-sm);line-height:1.4}
.ptab th{position:sticky;top:0;z-index:1;padding:var(--s-2) var(--s-4) var(--s-2) 0;background:var(--c-paper);box-shadow:inset 0 -1px 0 var(--c-rule);text-align:left;font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted)}
.ptab td{padding:var(--s-2) var(--s-4) var(--s-2) 0;border-bottom:1px solid var(--c-rule);vertical-align:baseline}
.ptab tr:last-child td{border-bottom:0}
.ptab td:nth-child(2){font:400 var(--text-xs)/1.4 var(--font-mono);color:var(--c-ink-2);white-space:nowrap}
.ptab th:last-child,.ptab td:last-child{padding-right:0;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.ptab a{color:var(--c-ink);text-decoration:underline;text-decoration-color:color-mix(in oklch,var(--c-accent) 40%,transparent);overflow-wrap:anywhere}
.ptab a:hover{color:var(--c-accent);text-decoration-color:var(--c-accent)}
.ptab tbody tr:hover td{background:var(--c-paper-2)}
/* свёрнутая строка внизу страницы серии («Все артикулы и цены»): раскрывается как аккордеон, в «Содержание» не входит */
.sec--fold{padding-top:var(--s-4);padding-bottom:var(--s-4)}
.sec--fold .acc{margin:0;border-top:0}
.sec--fold .acc details{border-bottom:0}
.sec--fold .article{margin-top:var(--s-2)} /* «Подробное описание» серии — текст из админки внутри свёрнутого раздела */
.sec--fold summary{flex-wrap:wrap;column-gap:var(--s-5)}
.sec--fold summary h2{flex:1 1 auto;min-width:0;margin:0;font:500 var(--text-md)/1.3 var(--font-body);letter-spacing:0}
.sec--fold summary .sec__more{color:var(--c-muted);white-space:normal;line-height:1.5} /* «1 108 артикулов · прайс на … · с НДС» на 320 px — в две строки */
.sec--fold .ptab{margin-top:0}
/* карточка серии и артикула: пункты паспорта («Характеристики», «Описание», «Документы»…) и заголовки разделов
   («Преимущества серии», «Вопросы и ответы», «Подробное описание», «Все артикулы и цены», «Другие серии») — один
   размер: 18 px на телефоне, 20 px на десктопе, 500; H1 — 22–28 px (.sku__title). Внутри — 14 px, как в паспорте,
   заголовки внутри текста не крупнее заголовка раздела */
.single-series :is(.pdp .acc summary,.sec__h,.sec--fold summary h2){font:500 clamp(var(--text-lg),1rem + .4vw,1.25rem)/1.3 var(--font-body);letter-spacing:0}
.single-series #adv .adv b{font:600 var(--text-md)/1.3 var(--font-body);letter-spacing:0}
.single-series #adv .adv strong{margin-top:2px;font:500 var(--text-sm)/1.4 var(--font-body)}
.single-series #faq .faq summary{padding:16px 0;font:500 var(--text-sm)/1.4 var(--font-body)}
.single-series #faq .faq .ans{font-size:var(--text-sm)}
.single-series .sec--fold .article{font-size:var(--text-sm);line-height:1.6}
.single-series .sec--fold .article h2{margin-top:var(--s-5);font:600 var(--text-md)/1.3 var(--font-body);letter-spacing:0}
.single-series .sec--fold .article :is(h3,h4){margin-top:var(--s-4);font:600 var(--text-sm)/1.4 var(--font-body);letter-spacing:0}
.docs,.acc-list{margin:0;padding:0;list-style:none}
.docs li{display:grid;grid-template-columns:5ch minmax(0,1fr);gap:var(--s-3);align-items:baseline;padding:9px 0;border-top:1px solid var(--c-rule);font-size:var(--text-sm)}
.docs li:first-child,.acc-list li:first-child{border-top:0}
.docs .t{font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em;color:var(--c-muted)}
.docs--kb li{grid-template-columns:minmax(0,1fr)} /* «База знаний» в паспорте: только ссылки на статьи */
.acc-list li{display:grid;grid-template-columns:7ch minmax(0,1fr) auto auto;gap:var(--s-3);align-items:baseline;padding:9px 0;border-top:1px solid var(--c-rule);font-size:var(--text-sm)}
.acc-list .a{font:500 var(--text-xs)/1 var(--font-mono);color:var(--c-muted)}
.acc-list .p{font:500 var(--text-sm)/1 var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.acc-list .acc-list__h{display:block;padding:20px 0 8px;font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--c-muted)}
.acc-list .acc-list__h+li{border-top:0}
.desc p{margin:0;font-size:var(--text-sm);line-height:1.6;color:var(--c-ink-2)}
.desc p+p{margin-top:var(--s-3)}
.pdp .faq .ans .mono{font-size:.94em}
@media (max-width:560px){
  .pdp__cta{position:static;flex-direction:column-reverse;align-items:stretch;gap:10px;margin-bottom:var(--s-2)}
  .pdp__tog{width:100%;justify-content:center}
  .nudge{display:none}
  .pcfg__head{padding-right:16px}
  .cfg__row{grid-template-columns:minmax(0,1fr)}
  .cfg__row label{border-right:0;padding-bottom:0;min-height:30px}
  .acc-list li{grid-template-columns:minmax(0,1fr) auto}
}

/* ---------- калькуляторы: приборная панель — строки «параметр — значение», результат строкой паспорта ---------- */
.tool{display:grid;grid-template-columns:minmax(0,1fr);margin-top:var(--s-6);border:1px solid var(--c-ink)}
@media (min-width:980px){.tool{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.tool__row{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);border-bottom:1px solid var(--c-rule);min-height:50px;background:var(--c-paper)}
.tool__row>span{display:flex;align-items:center;padding:0 14px;border-right:1px solid var(--c-rule);font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.tool__out{border-top:1px solid var(--c-ink);padding:var(--s-5)}
@media (min-width:980px){.tool__out{border-top:0;border-left:1px solid var(--c-ink)}}
@media (max-width:560px){.tool__row{grid-template-columns:minmax(0,1fr)}.tool__row>span{border-right:0;min-height:30px;padding-top:8px}}
@media (prefers-reduced-motion:reduce){
  .rv__track,.rv__panel,.cab__slide,.acc summary::after,.faq summary::after{transition:none}
  .pdp__cta .k1,.pdp__cta .k2,.pdp__cta .k3,.pdp__cta .pdp__tog{animation:none !important}
  .nudge{display:none}
}

/* ---------- флагманские секции: продукты, призыв ---------- */
.adv--t strong{margin-top:0}
.band{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-5);align-items:end;padding:var(--s-6);border:1px solid var(--c-ink)}
@media (min-width:900px){.band{grid-template-columns:minmax(0,1fr) auto}}
/* «Флагманские продукты»: карусель старой темы (main.js initShowcase) на линейках — без фона, свечения, теней и кругов */
.bch-showcase{padding:0;background:none;border:0}
.bch-showcase__layout{margin-top:var(--s-6);align-items:start}
.bch-showcase__type{margin:0;font:500 var(--text-2xs)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.bch-showcase__name{margin:var(--s-2) 0 0;font:600 clamp(30px,3.6vw,44px)/1.04 var(--font-body);letter-spacing:-.02em;color:var(--c-ink)}
.bch-showcase__text{margin:var(--s-4) 0 0;max-width:none;font-size:var(--text-md);line-height:1.55;color:var(--c-ink-2)}
.bch-showcase__feats{display:block;margin:var(--s-4) 0 0;border-top:1px solid var(--c-rule)}
.bch-showcase__feats li{padding:8px 0;border-bottom:1px solid var(--c-rule);font:500 var(--text-xs)/1.45 var(--font-mono);color:var(--c-ink-2)}
.bch-showcase__feats li::before,.bch-showcase__feats li::after{content:none}
.bch-showcase__cta{margin-top:var(--s-5);gap:var(--s-2)}
.bch-showcase__media{background:var(--c-photo)}
.bch-showcase__shot{padding:var(--s-6)}
.bch-showcase__shot img{filter:none}
.bch-showcase__nav{margin-top:var(--s-4)}
.bch-showcase__controls{gap:var(--s-3)}
.bch-showcase__count{min-width:0;font:500 var(--text-sm)/1 var(--font-mono);color:var(--c-muted)}
.bch-showcase__count b{font-weight:600;color:var(--c-ink)}
.bch-showcase__dots{gap:6px}
.bch-showcase__dot,.bch-showcase__dot.is-active{width:24px;height:18px;padding:8px 0;border-radius:0;background:var(--c-rule);background-clip:content-box}
.bch-showcase__dot.is-active{background-color:var(--c-ink)}
.sec--flush{padding-top:0;border-top:0}
.cat--solo{grid-template-columns:minmax(0,1fr) !important}
.phead .lede p{margin:0}
.phead .crumbs span{color:var(--c-rule-strong)}

/* ---------- «Проектировщикам»: тексты, блоки и порядок — прежние; подача — дизайн-система ----------
 * Старые правила секций берут цвета из переменных legacy.css — внутри страницы они смотрят на токены:
 * выбранное — тушью (как сегменты концепта), подложки — бумагой, без теней. */
.bch-pr-sec{--blue-500:var(--c-ink);--blue-600:var(--c-ink-2);--blue-700:var(--c-ink);--blue-800:var(--c-ink);--blue-50:var(--c-paper-2);--blue-100:var(--c-paper-2);--blue-200:var(--c-rule-strong);--blue-300:var(--c-rule-strong);--surface:var(--c-paper);--card:var(--c-paper);--shadow:none;--shadow-card:none;--shadow-float:none;--border:var(--c-rule);--border-strong:var(--c-field)}
.bch-pr-sec,.bch-pr-sec--alt{padding-top:var(--s-8);padding-bottom:var(--s-7);background:none;border:0;border-top:1px solid var(--c-rule)}
.bch-pr-sec .bch-eyebrow{display:none}
.bch-pr-tools{margin-top:var(--s-5);border-top:1px solid var(--c-ink)} /* «Другие инструменты» на адресе инструмента — список как в меню (.mega__list) */
.bch-pr-sec .bch-section__title,.bch-pr-request .bch-section__title{margin:0;font:600 var(--text-2xl)/1.1 var(--font-display);letter-spacing:-.012em;color:var(--c-ink)}
.bch-pr-sec .bch-btn{min-height:40px;padding:0 var(--s-4);border:1px solid var(--c-ink);border-radius:var(--radius-1);background:var(--c-ink);color:var(--c-paper);font:500 12px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;transform:none}
.bch-pr-sec .bch-btn:hover{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-on-accent)}
.bch-pr-sec .bch-btn--ghost,.bch-pr-sec .bch-btn--outline{background:var(--c-paper);color:var(--c-ink)}
.bch-pr-sec .bch-btn--ghost:hover,.bch-pr-sec .bch-btn--outline:hover{background:var(--c-ink);color:var(--c-paper)}
.bch-pr-cat,.bch-pr-coord__card,.bch-pr-task,.bch-pr-doc{border-color:var(--c-rule);transform:none !important}
.bch-pr-cat:hover,.bch-pr-task:hover{border-color:var(--c-ink)}
.bch-pr-cat__lvl{background:none;padding:0;color:var(--c-muted);font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.07em}
/* «Проектировщикам»: слова-смысл выделены маркером — «быстрее» проводится быстро, «спокойнее» — медленно и плавно.
   Без JS и при «уменьшить движение» маркер сразу на месте. */
.hl{position:relative;z-index:0;display:inline-block}
.hl::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:.06em;height:.42em;background:var(--c-accent-wash);z-index:-1;transform-origin:0 50%}
html.bch-js .hl::after{transform:scaleX(0);animation:hl-in var(--hl-dur) var(--hl-ease) var(--hl-delay) forwards}
.hl--fast{--hl-dur:.3s;--hl-ease:cubic-bezier(.2,.9,.3,1);--hl-delay:.3s}
.hl--calm{--hl-dur:1.6s;--hl-ease:cubic-bezier(.45,0,.25,1);--hl-delay:.8s}
@keyframes hl-in{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.hl::after{animation:none !important;transform:none !important}}
.bch-pr-cat__search{width:50%;max-width:none}
@media (max-width:720px){.bch-pr-cat__search{width:100%}}
.bch-pr-cat__input,.bch-analog__input,.bch-pr-cert__search input{border-radius:var(--radius-1);border-color:var(--c-field);box-shadow:none}
.bch-pr-cat__input:focus,.bch-analog__input:focus{border-color:var(--c-ink);box-shadow:0 0 0 1px var(--c-ink)}
/* инструменты: панель — рамка тушью, вкладки — сегменты, кнопки значений — сегменты с прямыми углами */
.bch-tool{border:1px solid var(--c-ink);border-radius:0}
.bch-tool__tabs{gap:0;padding:0;background:var(--c-paper);border-bottom:1px solid var(--c-ink)}
.bch-tool__tab{border-radius:0;border-right:1px solid var(--c-rule);font:500 var(--text-sm)/1.2 var(--font-body);color:var(--c-ink-2)}
.bch-tool__tab:last-child{border-right:0}
.bch-tool__tab:hover{background:var(--c-paper-2);color:var(--c-ink)}
.bch-tool__tab.is-active{background:var(--c-ink);color:var(--c-paper)}
.bch-tool__fieldlbl,.bch-tool label,.bch-vfd__num{font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
/* группы значений без внутренней рамки: линию слева и сверху рисует каждая кнопка, у рамки группы её срезает
   overflow — выбранная закрашена до края, как вкладки */
/* группы значений (токи, сегменты, фильтры): у каждой кнопки своя рамка, соседние совпадают (сдвиг −1 px) — сетка
   без двойных линий, у неполного ряда рамки тоже целые; выбранная закрашена тушью до своей рамки, как вкладки */
.bch-tool__btns,.bav-seg,.bch-chips{gap:0 !important;padding:0 1px 1px 0;border:0;border-radius:0;background:none;overflow:visible}
.bch-tool__btns--wrap{max-height:none}
.bch-tool__inbtn,.bch-tool__voltbtn,.bav-seg button{margin:0;border:0;border-radius:0;background:var(--c-paper);font:500 var(--text-sm)/1 var(--font-body);color:var(--c-ink-2);box-shadow:none}
.bch-tool__inbtn,.bav-seg button,.bch-chip{position:relative;margin:0 -1px -1px 0;border:1px solid var(--c-field);box-shadow:none}
.bch-tool__inbtn:hover,.bav-seg button:hover,.bch-chip:hover{z-index:1}
.bch-tool__inbtn.is-active,.bav-seg button.on,.bav-seg button.is-active,.bch-chip.is-active{z-index:2;border-color:var(--c-ink)}
.bch-tool__inbtn{padding:8px 4px;white-space:nowrap}
.bch-tool__inbtn:hover:not(:disabled),.bch-tool__voltbtn:hover,.bav-seg button:hover{background:var(--c-paper-2);color:var(--c-ink)}
.bch-tool__inbtn.is-active,.bch-tool__voltbtn.is-active,.bav-seg button.on,.bav-seg button.is-active,.bav-seg button[aria-pressed="true"]{background:var(--c-ink);color:var(--c-paper);border-color:var(--c-ink)}
.bch-tool__inbtn:disabled{background:var(--c-paper);color:var(--c-rule-strong)}
.bch-tool__volt{gap:0}
.bch-tool__voltbtn{border:1px solid var(--c-field)}
.bch-tool__voltbtn+.bch-tool__voltbtn{margin-left:-1px}
.bch-tool__dev,.bch-tool__out,.bch-tool__tree,.bch-tool__meta,.bch-tool__cur,.bch-vfd__alts,.bch-vfd__extras,.bch-vfd__chart{border-color:var(--c-rule);border-radius:0}
.bch-tool__devtag{border-radius:0;font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.06em}
.bch-tool__dev--up .bch-tool__devtag{background:var(--c-paper-2);color:var(--c-ink)}
.bch-tool__mult,.bch-vfd__fn{border-radius:0;font-family:var(--font-mono)}
.bch-tool__cur strong,.bch-tool__big{color:var(--c-ink)}
.bch-tool .sel,.bch-vfd .sel{width:100%}
/* одна колонка (legacy.css: 1fr) растягивалась под самый длинный пункт списка — на 320 px блоки вылезали за экран */
@media (max-width:860px){.bch-tool__cols,.bch-tool__cols--coord,.bch-tool__coordout{grid-template-columns:minmax(0,1fr)}}
.bch-tool label .fsel,.bch-vfd label .fsel{margin-top:6px;text-transform:none;letter-spacing:0}
.bch-tool label .step,.bch-vfd label .step,.bav .step{margin-top:6px}
.bch-vfd__mode span{border-radius:0}
.bch-vfd__mode:hover span{border-color:var(--c-ink)}
.bch-vfd__mode input:checked + span{background:var(--c-ink);border-color:var(--c-ink);box-shadow:none}
.bch-vfd__mode input:checked + span b{color:var(--c-paper)}
.bch-vfd__mode input:checked + span i{color:var(--c-rule-strong)}
.bch-vfd__check input,.bch-vfd__share input[type=range]{accent-color:var(--c-ink)}
.bav-seg{display:flex;flex-wrap:wrap}
.bav-chip,.bav-tag{border-radius:0 !important}
.bav-go{width:100%;margin-top:var(--s-4)}
/* фильтры сертификатов — группа значений, как сегменты: без таблеток и зазоров, выбранное закрашено до края */
.bch-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:0;background:var(--c-paper);font:500 var(--text-sm)/1.2 var(--font-body);color:var(--c-ink-2);cursor:pointer;transition:background-color var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out)}
.bch-chip:hover{background:var(--c-paper-2);color:var(--c-ink);text-decoration:none}
.bch-chip.is-active,.bch-chip.is-active:hover{background:var(--c-ink);color:var(--c-paper)}
/* коды серий в карточке каталога — метки текстом, не кнопки */
.bch-chip--static,.bch-chip--static:hover{display:inline;min-height:0;margin:0;padding:0;border:0;box-shadow:none;background:none;font:500 var(--text-xs)/1.5 var(--font-mono);color:var(--c-ink-2);cursor:default}
/* сертификаты: реестр на линейках */
.bch-pr-cert__grid{border:1px solid var(--c-ink);border-radius:0}
.bch-pr-cert__thead{background:var(--c-paper);border-bottom:1px solid var(--c-ink);font:500 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
.bch-pr-cert:hover{background:var(--c-paper-2)}
.bch-pr-cert__rail{width:2px}
/* запрос по проекту: полоса на бумаге вместо тёмного блока */
.bch-pr-request--band{padding:var(--s-6);border:1px solid var(--c-ink);border-radius:0;background:var(--c-paper);color:var(--c-ink)}
.bch-pr-request--band .bch-section__title{color:var(--c-ink)}
.bch-pr-request--band p{max-width:none;color:var(--c-ink-2)}

/* ---------- статьи, страницы, поиск, 404 ---------- */
.phead__meta{margin:var(--s-3) 0 0;font:500 var(--text-xs)/1.4 var(--font-mono);color:var(--c-muted)}
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:var(--s-5) var(--s-6);margin-top:var(--s-5)}
.posts>.post{display:grid;align-content:start;gap:var(--s-2);padding:var(--s-4) 0;border-top:1px solid var(--c-ink);color:var(--c-ink);text-decoration:none}
.posts>.post:hover{text-decoration:none}
.posts>.post .post__t{margin:0;font:600 var(--text-lg)/1.3 var(--font-display);transition:color var(--dur-micro) var(--ease-out)}
.posts>.post:hover .post__t{color:var(--c-accent)}
.post__ex{font-size:var(--text-sm);line-height:1.5;color:var(--c-ink-2)}
.posts>.post:has(.post__ph){padding-top:0;border-top:0}
.post__ph{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--c-photo)}
.post__ph img{display:block;width:100%;height:100%;object-fit:cover}
.post__ph--fit img{object-fit:contain}
.post__ph+.label{margin-top:var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--c-ink)}
/* статьи со своей вёрсткой внутри: заголовки — тушью, «бегущая обводка» старой темы не показывается */
article.wrap>.article{padding-bottom:var(--s-8)}
.article :is(h2,h3,h4){color:var(--c-ink) !important}
.article .gl{display:none !important}
.article :is(button,input,select,textarea){font-family:inherit}
/* руководство NVF2G: переключатели пульта («пилюли» старой вёрстки) — группа значений дизайн-системы: у каждой кнопки
   своя рамка, выбранная закрашена тушью; кнопки отказов (шаг 4) — такие же, видно, что это кнопки */
.article .nvf-ctrlb .btns.pill{gap:0;padding:0 1px 1px 0;background:none}
.article .nvf-ctrlb .btns.pill .nvf-sbtn{position:relative;margin:0 -1px -1px 0;border:1px solid var(--c-field);background:var(--c-paper);color:var(--c-ink-2);font:500 var(--text-sm)/1.3 var(--font-body)}
.article .nvf-ctrlb .btns.pill .nvf-sbtn:hover{z-index:1;background:var(--c-paper-2);color:var(--c-ink)}
.article .nvf-ctrlb .btns.pill .nvf-sbtn.sel{z-index:2;border-color:var(--c-ink);background:var(--c-ink);color:var(--c-paper)}
.article .nvf-tunebar select{min-width:0;max-width:100%;border-color:var(--c-field)} /* список типа автопрогона — рамка поля, как в формах; на телефоне не шире строки */
/* виджеты инструкций на телефоне и планшете — не шире колонки текста: их собственные размеры (картинка 640 px,
   колонка от 290 px, пульт 300 px) вылезали за экран на 320–600 px; список элементов NXZM — в несколько строк */
.article .nvf-article .nvf-fig.w640 img{max-width:min(100%,640px)}
.article .nvf-article .nvf-fig.w360 img{max-width:min(100%,360px)}
.article :is(.nvf-side,.nxzm-side){min-width:0}
/* пульт NXZM — колонка постоянной ширины 300 px: подпись под ним не шире пульта (иначе колонка росла с длиной подписи,
   пульт по центру съезжал на 10–110 px, колонка кнопок справа сужалась и кнопки перестраивались) */
.article .nxzm-simctrl-wrap{flex:0 1 300px;min-width:0;max-width:100%}
.article .nxzm-ctrl{max-width:100%}
.article .nxzm-ctrl-caption{max-width:min(300px,100%)}
/* чипы состояния — шириной под самый длинный текст (замер 19.10, шрифт чипа 14.4 px): иначе соседний чип ездил вбок при смене
   текста, а там, где оба еле помещаются в строку, то переносился вниз, то нет — и двигал всё под собой */
.article .nxzm-state #chipPos{min-width:min(18em,100%)}
.article .nxzm-state #chipMode{min-width:min(20.6em,100%);text-align:center}
.article .nvf-state #chipRun{min-width:min(14.6em,100%);text-align:center}
.article .nvf-state #chipSrc{min-width:min(23em,100%);text-align:center}
/* тексты, которые меняются при нажатиях, — с запасом высоты под самый длинный (замер 19.10 на 320–1280 px, NVF2G — по всем
   123 параметрам): иначе журнал под пультом двигал двигатель NVF2G, а описание параметра над сеткой — кнопки A-1…A-E NXZM,
   сетку параметров и пресеты NVF2G; чипы состояния («Пуск: … · частота: …») переносились на строку ниже и тоже двигали всё под ними */
.article :is(.nxzm-lastlog,.nvf-lastlog){min-height:6.4em}
.article .nvf-state{min-height:2.2em}
/* NVF2G: сетка «Текущие параметры» над пресетами — у каждого пресета свой набор (2–5 рядов, 95–240 px), и пресеты прыгали
   под курсором на 45–100 px; высота — постоянная, по потолку самой сетки (max-height 240 px, дальше — прокрутка внутри).
   Чип «Пресет: …» в заголовке «Шаг 2» — с запасом высоты под самое длинное название (29–94 px в зависимости от ширины);
   строки статуса «Шага 1» — данные двигателя (#motorStatus) и автопрогон (.nvf-tunebar) — переносились при смене текста
   и состояния кнопок (на 20–40 px) */
.article #piGrid{min-height:240px;align-content:start;box-shadow:inset 0 0 0 1px var(--c-rule)} /* рамка: запас читается как область списка */
.article .nvf-step:has(#chipPreset){min-height:2.3em;align-content:flex-start}
.article .nvf-tunebar{min-height:4.6em;align-content:flex-start}
.article :is(.nxzm-paraminfo,.nvf-paraminfo) .pi-txt{min-height:6.8em}
@media (max-width:1199px){.article .nvf-paraminfo .pi-txt{min-height:8.4em}}
@media (max-width:1023px){.article .nxzm-paraminfo .pi-txt{min-height:8.4em}.article .nvf-paraminfo .pi-txt{min-height:10.1em}.article .nvf-state{min-height:5em}.article .nvf-step:has(#chipPreset){min-height:4.4em}.article .nvf-tunebar{min-height:8.5em}}
@media (max-width:899px){.article #motorStatus{min-height:3.3em}}
@media (max-width:600px){.article .nvf-paraminfo .pi-txt{min-height:11.7em}}
@media (max-width:479px){.article .nvf-step:has(#chipPreset){min-height:5.9em}}
@media (max-width:413px){.article .nvf-state{min-height:6.4em}}
@media (max-width:400px){.article .nxzm-paraminfo .pi-txt{min-height:10.1em}}
@media (max-width:374px){.article .nxzm-ctrl-caption{min-height:5em}.article .nxzm-state{min-height:6.4em}.article #motorStatus{min-height:5em}.article .nvf-tunebar{min-height:9.8em}}
@media (max-width:359px){.article .nxzm-lastlog{min-height:8em}.article .nvf-paraminfo .pi-txt{min-height:15em}.article .nvf-step:has(#chipPreset){min-height:7.4em}}
.article .nxm-hotlist button{white-space:normal;text-align:left}
/* ползунки в статьях (пульт NVF2G, «Показать все входы»): линия 2 px и квадратная ручка цвета туши */
.article input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:6px 0 0;background:transparent;cursor:pointer}
.article input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--c-rule-strong)}
.article input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;border:0;border-radius:0;background:var(--c-ink)}
.article input[type=range]::-moz-range-track{height:2px;background:var(--c-rule-strong)}
.article input[type=range]::-moz-range-progress{height:2px;background:var(--c-ink)}
.article input[type=range]::-moz-range-thumb{width:14px;height:14px;border:0;border-radius:0;background:var(--c-ink)}
.article input[type=range]:focus-visible{outline:2px solid var(--c-focus);outline-offset:4px}
.pager{margin-top:var(--s-7)}
.pager .nav-links{display:flex;flex-wrap:wrap;gap:0}
.pager .page-numbers{display:inline-grid;place-items:center;min-width:40px;height:40px;margin:0 -1px 0 0;padding:0 10px;border:1px solid var(--c-field);font:500 var(--text-sm)/1 var(--font-mono);color:var(--c-ink);text-decoration:none}
.pager .page-numbers.current{background:var(--c-ink);border-color:var(--c-ink);color:var(--c-paper)}
.pager a.page-numbers:hover{background:var(--c-paper-2)}
.article .bch-table-wrap{overflow-x:auto;margin-top:var(--s-4)}
.article .bch-skugrid{margin-top:var(--s-4)}