/* bonolit-nn.ru — дизайн-система «Bonolit по спецификации» (designer, 2026-10-27): раскладка и компоненты на токенах (CSS-переменные).
   Цвет, шрифты и характер — в v1.css «Спецификация», v2.css «Площадка», v3.css «Материал» (docs/design/concepts.md). Общих CSS с другими сайтами сети нет.
   Сначала телефон (360–430 px), затем ≥ 600, ≥ 760, ≥ 1080, ≥ 1280. Кнопки и пункты меню — не ниже 44 px. Без зависимостей. */

:root {
  /* цвет (значения по умолчанию; каждое оформление задаёт свои) */
  --bg: #f5f6f3; --bg2: #ebece7; --card: #fff; --ink: #14151a; --ink2: #50535c; --line: #d8d9d3; --line-strong: #9a9da6;
  --acc: #4b2fd6; --acc-ink: #fff; --acc-2: #4b2fd6; --acc-soft: #ecebfb;
  --btn: var(--acc); --btn-ink: var(--acc-ink); --btn-hover: #3a20bd; --ghost-line: var(--ink);
  --hdr-bg: rgba(245, 246, 243, .94); --hdr-ink: var(--ink); --hdr-ink2: var(--ink2); --hdr-line: var(--line);
  --ftr-bg: #14151a; --ftr-ink: #c4c6cc; --ftr-link: #fff; --ftr-line: rgba(255, 255, 255, .16);
  --fab-bg: #fff; --fab-ink: var(--ink); --fab-line: var(--line); --fab-call: var(--acc); --fab-call-ink: #fff;
  --media-bg: #f1f2ee; --field: #fff; --field-line: var(--line-strong); --focus: var(--acc);
  --ok-bg: #e5f3ea; --ok-ink: #135a2b; --err-bg: #fbe9e7; --err-ink: #8c1d12; --warn: #c27c00;
  --draw-top: #fff; --draw-left: #eff0f6; --draw-right: #dcdfe9; --draw-line: #14151a; --draw-dim: var(--acc); --draw-cut: #c9cdd9; --draw-cut2: #b6bbca; --draw-in: #e1e3ec; --draw-in2: #d2d5e1;
  /* шрифты */
  --font-b: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-h: var(--font-b); --font-m: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --font-k: var(--font-m); --font-num: var(--font-m); --font-btn: var(--font-b); --font-tel: var(--font-b); --font-logo: var(--font-h);
  --m-stretch: 100%; --bold: 700;
  --fs-b: 16px; --lh-b: 1.55; --h-w: 700; --h-ls: -.02em; --h-tt: none; --lh-h: 1.08; --h1-min: 32px; --h1-max: 64px; --h2-min: 25px; --h2-max: 40px; --h3: 20px;
  --k-fs: 12px; --k-w: 600; --k-ls: .12em;
  /* форма */
  --r: 0px; --r-btn: 2px; --r-in: 2px; --r-tab: 2px; --r-chip: 2px; --bw: 1px;
  --btn-h: 48px; --btn-px: 22px; --btn-fs: 16px; --btn-w: 600; --btn-tt: none; --btn-ls: 0;
  --shadow: 0 18px 40px -22px rgba(20, 21, 26, .35);
  /* ритм */
  --wrap: 1240px; --wrap-px: 16px; --sec-y: 48px; --hdr-h: 60px; --fab-h: 60px;
}

/* ---------------------------------------------------------------- основа */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-b)/var(--lh-b) var(--font-b); font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-wrap: break-word; }
main { display: block; counter-reset: bn-sec; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--link, var(--ink)); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--link-h, var(--acc-2)); }
b, strong { font-weight: var(--bold); }
h1, h2, h3, h4 { font-family: var(--font-h); font-weight: var(--h-w); line-height: var(--lh-h); letter-spacing: var(--h-ls); text-transform: var(--h-tt); margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(var(--h1-min), 7.4vw, var(--h1-max)); }
h2 { font-size: clamp(var(--h2-min), 4.6vw, var(--h2-max)); }
h3 { font-size: var(--h3); }
h4 { font-size: 17px; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--acc); color: var(--acc-ink); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-px); }
.narrow > * { max-width: 880px; }
.mono, .num { font-family: var(--font-m); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; }
.num { text-align: right; }
.muted { color: var(--ink2); }
.lead { font-size: clamp(17px, 2.2vw, 20px); line-height: 1.5; color: var(--ink2); max-width: 44em; }
.note { font-size: 13px; line-height: 1.5; color: var(--ink2); margin: 14px 0 0; }
.more { margin: 22px 0 0; font-weight: var(--bold); }
.more a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-bottom: 2px solid var(--acc); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.big { font: var(--bold) 24px/1.2 var(--font-num); }
.big a { text-decoration: none; }
.plain { list-style: none; padding: 0; }
.plain li { margin-bottom: 12px; }

/* надпись над заголовком; номер раздела — в оформлениях (counter bn-sec) */
.kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: var(--k-w) var(--k-fs)/1.25 var(--font-k); letter-spacing: var(--k-ls); text-transform: uppercase; color: var(--k-ink, var(--ink2)); }
main .kicker { counter-increment: bn-sec; }

/* ---------------------------------------------------------------- кнопки */
.btn { --_bg: var(--btn); --_ink: var(--btn-ink); display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--btn-h); padding: 6px var(--btn-px);
  border: var(--bw) solid var(--_bg); border-radius: var(--r-btn); background: var(--_bg); color: var(--_ink); font: var(--btn-w) var(--btn-fs)/1.15 var(--font-btn);
  letter-spacing: var(--btn-ls); text-transform: var(--btn-tt); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s; }
.btn:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: var(--_ink); }
.btn:active { transform: translateY(1px); }
.btn--ghost { --_bg: transparent; --_ink: var(--ink); border-color: var(--ghost-line); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn--sm { min-height: 44px; padding: 4px 18px; font-size: min(var(--btn-fs), 16px); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* временный переключатель оформления (уберётся после выбора) */
.themebar { display: flex; align-items: center; gap: 6px 10px; padding: 7px var(--wrap-px); background: #0d0d0f; color: #d0d0d4; font: 12px/1.3 system-ui, sans-serif; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.themebar::-webkit-scrollbar { display: none; }
.themebar a { flex: none; color: #fff; text-decoration: none; padding: 5px 11px; border: 1px solid #4a4a52; border-radius: 99px; }
.themebar a[aria-current] { background: #fff; color: #0d0d0f; border-color: #fff; }
.themebar a span, .themebar__t span { opacity: .7; }
.themebar a[aria-current] span { opacity: 1; }

/* ---------------------------------------------------------------- шапка: логотип · телефон (виден сразу) · меню */
.hdr { position: sticky; top: 0; z-index: 30; background: var(--hdr-bg); color: var(--hdr-ink); border-bottom: var(--bw) solid var(--hdr-line); -webkit-backdrop-filter: saturate(1.3) blur(10px); backdrop-filter: saturate(1.3) blur(10px); }
.hdr__in { display: flex; align-items: center; gap: 10px; min-height: var(--hdr-h); }
.logo { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
.logo:hover { color: inherit; }
.logo { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; }   /* логотип завода, подпись — под ним */
.logo__img { display: block; height: 24px; width: auto; aspect-ratio: 1429 / 270; flex: none; }   /* логотип завода, пропорции не трогаем */
.logo__img .lg-a { fill: var(--logo-a, #fff); } .logo__img .lg-b { fill: var(--logo-b, #63baef); }   /* как у завода: на тёмном — белый и голубой */
.logo__txt { display: flex; flex-direction: column; min-width: 0; }
.logo__txt:empty { display: none; }
.logo__mark { font: var(--logo-w, 700) var(--logo-fs, 20px)/1 var(--font-logo); letter-spacing: var(--logo-ls, -.01em); text-transform: var(--logo-tt, none); }
.logo__sub { display: none; margin-top: 0; font: 500 10.5px/1.2 var(--font-k); letter-spacing: .07em; text-transform: uppercase; color: var(--hdr-ink2); white-space: nowrap; }
.nav, .hdr__cta { display: none; }
.nav a { color: inherit; text-decoration: none; font-weight: 500; font-size: 15px; display: inline-flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; }
.nav a[aria-current], .nav a:hover { border-bottom-color: var(--acc); color: inherit; }
.hdr__tel { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-height: 44px; color: inherit; text-decoration: none; line-height: 1.1; }
.hdr__tel:hover { color: inherit; }
.hdr__num { font: var(--tel-w, 700) var(--tel-fs, 14.5px)/1.1 var(--font-tel); letter-spacing: var(--tel-ls, 0); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hdr__hint { margin-top: 3px; font-size: 10.5px; color: var(--hdr-ink2); white-space: nowrap; }
.burger { flex: none; }
.burger summary { list-style: none; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border: var(--bw) solid var(--burger-line, var(--line-strong)); border-radius: var(--r-btn); }
.burger summary::-webkit-details-marker { display: none; }
.burger summary span, .burger summary span::before, .burger summary span::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; content: ''; transition: transform .15s, background-color .15s; }
.burger summary span::before { position: absolute; top: -6px; }
.burger summary span::after { position: absolute; top: 6px; }
.burger[open] summary span { background: transparent; }
.burger[open] summary span::before { top: 0; transform: rotate(45deg); }
.burger[open] summary span::after { top: 0; transform: rotate(-45deg); }
.burger__nav { position: absolute; left: 0; right: 0; top: 100%; display: grid; max-height: calc(100vh - var(--hdr-h) - var(--fab-h)); overflow: auto; padding: 6px var(--wrap-px) 18px;
  background: var(--burger-bg, var(--bg)); color: var(--burger-ink, var(--ink)); border-bottom: var(--bw) solid var(--line); box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .3); }
.burger__nav a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; font-weight: var(--bold); }
.burger__nav a.burger__sub { min-height: 44px; padding-left: 16px; font-weight: 400; color: var(--ink2); }

/* ---------------------------------------------------------------- первый экран */
.hero { position: relative; padding: 26px 0 34px; overflow: hidden; background: var(--hero-bg, transparent); color: var(--hero-ink, var(--ink)); }
.hero__in { position: relative; z-index: 1; display: grid; gap: 26px; }
.hero h1 { margin-bottom: 14px; }
.hero .lead { color: var(--hero-ink2, var(--ink2)); }
.hero__cta { display: grid; gap: 10px; margin-top: 22px; }
.hero__fig { margin: 0; position: relative; }
.hero__fig figcaption { margin-top: 10px; font-size: 12px; line-height: 1.45; color: var(--ink2); }
.kpis { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.kpis div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 14px; min-width: 0; }
.kpis dt { font-size: 13px; line-height: 1.3; color: var(--kpi-ink2, var(--ink2)); }
.kpis dd { margin: 0; font: var(--kpi-w, 700) clamp(18px, 4.8vw, var(--kpi-max, 26px))/1.1 var(--font-num); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; word-spacing: var(--num-ws, 0); color: var(--kpi-ink, inherit); }

/* ---------------------------------------------------------------- чертежи (include/draw.php) */
.draw { width: 100%; }
.draw .d-t { fill: var(--draw-top); } .draw .d-l { fill: var(--draw-left); } .draw .d-r { fill: var(--draw-right); }
.draw .d-body polygon { stroke: var(--draw-line); stroke-width: var(--draw-sw, 1.4); stroke-linejoin: round; }
.draw .d-cut { fill: var(--draw-cut); } .draw .d-cut2 { fill: var(--draw-cut2); }
.draw .d-in { fill: var(--draw-in, var(--draw-right)); } .draw .d-in2 { fill: var(--draw-in2, var(--draw-cut)); }   /* паз U-блока: внутренняя стенка и дно в тени */
.draw .d-bar { fill: var(--draw-line); }
.draw .d-ext { stroke: var(--draw-dim); stroke-width: .9; stroke-dasharray: 3 3; }
.draw .d-dim { stroke: var(--draw-dim); stroke-width: 1.3; }
.draw .d-tick { stroke: var(--draw-dim); stroke-width: 1.6; }
.draw .d-txt { fill: var(--draw-dim); font: 600 16px/1 var(--font-m); font-stretch: var(--m-stretch); }
.draw--card .d-txt { font-size: 24px; } .draw--card .d-ext, .draw--card .d-dim { stroke-width: 1.8; }
.draw--tile .d-dims { display: none; }

/* ---------------------------------------------------------------- секции */
.sec { position: relative; padding: var(--sec-y) 0; }
.sec--tight { padding: calc(var(--sec-y) * .5) 0 var(--sec-y); }
.sec--alt { background: var(--bg2); }
.sec__h { margin-bottom: 24px; max-width: 54em; }
.sec__h .lead { margin-bottom: 0; }
.split, .cols2, .cols3 { display: grid; gap: 24px; }
.box { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 20px; }
.box h2, .box h3 { font-size: 20px; }
.box > :last-child { margin-bottom: 0; }

/* подбор по задаче (вкладки) */
.picker__tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--wrap-px) * -1) 18px; padding: 2px var(--wrap-px) 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.picker__tabs::-webkit-scrollbar { display: none; }
.picker__tabs button { flex: none; min-height: 44px; padding: 0 16px; border: var(--bw) solid var(--tab-line, var(--line-strong)); border-radius: var(--r-tab); background: var(--tab-bg, var(--card)); color: var(--ink);
  font: var(--tab-w, 600) var(--tab-fs, 15px)/1 var(--font-tab, var(--font-b)); text-transform: var(--tab-tt, none); letter-spacing: var(--tab-ls, 0); cursor: pointer; scroll-snap-align: start; }
.picker__tabs button[aria-selected='true'] { background: var(--tab-on-bg, var(--ink)); border-color: var(--tab-on-bg, var(--ink)); color: var(--tab-on-ink, var(--bg)); }
.picker__pane > p:first-child { max-width: 52em; }

/* карточки позиций */
.pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pgrid-gap, 10px); }
.pcard { position: relative; background: var(--card); border: var(--bw) solid var(--pcard-line, var(--line)); border-radius: var(--r); transition: border-color .15s, box-shadow .15s, transform .15s; }
.pcard:hover { border-color: var(--pcard-line-h, var(--ink)); box-shadow: var(--shadow); }
.pcard__a { display: flex; flex-direction: column; height: 100%; padding: 10px; color: var(--ink); text-decoration: none; }
.pcard__a:hover { color: var(--ink); }
.pcard__m { aspect-ratio: 4 / 3; display: grid; place-items: center; margin-bottom: 10px; overflow: hidden; background: var(--media-bg); border-radius: calc(var(--r) * .7); }
.pcard__m img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pcard__m.is-draw { padding: 4px; }
.pcard__t { margin: 0 0 6px; font: var(--pt-w, 600) var(--pt-fs, 15px)/1.25 var(--font-pt, var(--font-b)); letter-spacing: 0; text-transform: none; }
.pcard__f { margin: 0 0 10px; font: 400 12px/1.4 var(--font-m); font-stretch: var(--m-stretch); color: var(--ink2); }
.pcard .price { margin-top: auto; }

/* цена: число + единица (коммерческий фактор — крупно и рядом) */
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; }
.price__from { font-size: 13px; color: var(--ink2); }
.price__v { font: var(--price-w, 700) var(--price-fs, 18px)/1.1 var(--font-num); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; letter-spacing: var(--price-ls, 0); word-spacing: var(--num-ws, 0); white-space: nowrap; color: var(--price-ink, var(--ink)); }
.price__u { font-size: 13px; color: var(--ink2); }
.price__sub, .price__n { flex-basis: 100%; font-size: 13px; color: var(--ink2); }
.price--big .price__v { font-size: clamp(32px, 8.6vw, var(--price-big-max, 46px)); }
.price--ask .price__v { font: var(--bold) 16px/1.2 var(--font-b); }
.fprices { display: grid; gap: 2px; margin: 14px 0 0; font-size: 14px; }
.fprices div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.fprices dt { color: var(--ink2); }
.fprices dd { margin: 0; font-family: var(--font-m); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- таблицы: матрица цен, сравнение марок, спецификация раздела, характеристики */
.matrix { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r); }
.matrix__t th, .matrix__t td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.matrix__t tr:last-child th, .matrix__t tr:last-child td { border-bottom: 0; }
.matrix__t tr:first-child th { font: var(--th-w, 600) var(--th-fs, 12px)/1.2 var(--font-th, var(--font-b)); letter-spacing: .01em; color: var(--th-ink, var(--ink2)); background: var(--th-bg, var(--bg2)); }
.matrix__t tr:first-child th a, .spec__t th a { color: inherit; }
.matrix__t th[scope=row], .matrix__t tr:first-child th:first-child { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 0 var(--line); }
.matrix__t th[scope=row] { background: var(--card); font: var(--bold) 15px/1.2 var(--font-m); font-stretch: var(--m-stretch); }
.matrix__t th[scope=row] a { display: inline-flex; align-items: center; min-height: 32px; }
.matrix__t td.num { padding: 0; }
.matrix__t td.num a { display: block; padding: 13px 14px; font: 600 var(--mx-fs, 15px)/1 var(--font-num); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; word-spacing: var(--num-ws, 0); text-decoration: none; color: var(--ink); }
.matrix__t td.num a:hover { background: var(--acc); color: var(--acc-ink); }
.matrix__t td.muted { padding: 12px 14px; color: var(--ink2); }
.matrix__t--cmp td, .matrix__t--cmp th { white-space: normal; min-width: 110px; }
.matrix__t--cmp th[scope=row] { min-width: 150px; font: 500 14px/1.3 var(--font-b); }
.matrix__t--cmp td { font-family: var(--font-m); font-stretch: var(--m-stretch); font-size: 14px; }

.spec { margin-top: 14px; }
.spec__t thead { display: none; }
.spec__t tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.spec__t tr[hidden] { display: none; }
.spec__t td { padding: 0; font-size: 14px; color: var(--ink2); grid-column: 1; }
.spec__t td:first-child { grid-column: 1 / -1; font-size: 16px; font-weight: var(--bold); color: var(--ink); }
.spec__t td:first-child a { text-decoration: none; display: inline-flex; min-height: 28px; align-items: center; }
.spec__t td:nth-child(2) { display: none; }
.spec__t td:nth-child(3)::before { content: 'Марка '; }
.spec__t td:nth-child(4)::before { content: 'λ₀ '; }
.spec__t td:nth-child(5)::before { content: 'Поддон '; }
.spec__t td:nth-child(6)::before { content: 'Машина '; }
.spec__t td:nth-child(n+3):nth-child(-n+6) { text-align: left; font-family: var(--font-b); }
.spec__t td:last-child { grid-column: 2; grid-row: 2 / span 4; align-self: center; text-align: right; color: var(--ink); }
.spec__t td:last-child b { font: var(--price-w, 700) 18px/1.1 var(--font-num); font-stretch: var(--m-stretch); word-spacing: var(--num-ws, 0); white-space: nowrap; }
.spec__t td:last-child small { display: block; font-size: 12px; color: var(--ink2); }
.specs th, .specs td { padding: 10px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 14px; }
.specs th { width: 52%; padding-right: 16px; font-weight: 400; color: var(--ink2); }
.specs td { font-family: var(--font-m); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; }

/* плитки разделов */
.stiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pgrid-gap, 10px); }
.stile { display: flex; flex-direction: column; gap: 6px; padding: 12px; min-height: 44px; background: var(--card); border: var(--bw) solid var(--pcard-line, var(--line)); border-radius: var(--r); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.stile:hover { color: var(--ink); border-color: var(--pcard-line-h, var(--ink)); box-shadow: var(--shadow); }
.stile__m { aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: var(--media-bg); border-radius: calc(var(--r) * .7); }
.stile__m img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
.stile__t { font: var(--st-w, var(--bold)) var(--st-fs, 16px)/1.2 var(--font-st, var(--font-b)); text-transform: var(--st-tt, none); }
.stile__n { font: 400 12px/1.4 var(--font-m); font-stretch: var(--m-stretch); color: var(--ink2); }

/* факты бренда, документы, заводы */
.facts { display: grid; gap: var(--facts-gap, 1px); background: var(--facts-bg, var(--line)); border: var(--bw) solid var(--line); border-radius: var(--r); overflow: hidden; }
.fact { background: var(--card); padding: 20px; }
.fact__k { margin: 0 0 8px; font: var(--h-w) 22px/1.15 var(--font-h); letter-spacing: var(--h-ls); text-transform: var(--h-tt); }
.fact__v { margin: 0; font-size: 15px; color: var(--ink2); }
.dlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-strong); }
.dlist li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.dlist b { font-family: var(--font-num); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; }
.doclist { list-style: none; margin: 0 0 1.4em; padding: 0; }
.doclist li { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding: 12px 0 12px 38px; border-bottom: 1px solid var(--line); }
.doclist li::before { content: 'PDF'; position: absolute; left: 0; top: 13px; padding: 4px 3px; font: 700 9px/1 var(--font-m); letter-spacing: .04em; color: var(--doc-ink, var(--acc-2)); border: 1px solid currentColor; border-radius: 2px; }
.doclist a { font-weight: 500; }
.doclist span { font-size: 13px; color: var(--ink2); }
.plants { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.plant { background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r); padding: 22px; }
.plant__k { margin: 0 0 16px; font-size: 13px; color: var(--ink2); }

/* ---------------------------------------------------------------- калькулятор объекта */
.calc { display: grid; gap: 22px; padding: 16px; background: var(--card); border: var(--bw) solid var(--line); border-radius: var(--r); }
.calc fieldset { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.calc legend { padding: 0; margin-bottom: 12px; font: var(--k-w) 12px/1.2 var(--font-k); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.calc__row { display: grid; gap: 12px; margin-bottom: 12px; }
.calc__row--3 { grid-template-columns: 1fr 1fr; }
.calc__row--3 .chk { grid-column: 1 / -1; }
.calc label, .form label { display: grid; gap: 6px; font-size: 14px; color: var(--ink2); }
.calc input, .calc select, .form input, .form textarea, .form select, .qty input { width: 100%; min-height: var(--in-h, 48px); padding: 10px 12px; background: var(--field); border: var(--bw) solid var(--field-line);
  border-radius: var(--r-in); color: var(--ink); font-size: 16px; }
.calc input:focus, .calc select:focus, .form input:focus, .form textarea:focus, .form select:focus, .qty input:focus { outline: 2px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.calc input[type=number], .qty input { font-family: var(--font-m); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; }
.calc .chk, .form .chk { position: relative; display: block; min-height: 44px; padding: 11px 0 0 34px; line-height: 1.4; color: var(--ink); }
.chk input { position: absolute; left: 0; top: 10px; width: 22px !important; height: 22px; min-height: 22px !important; margin: 0; padding: 0 !important; accent-color: var(--acc); }
.calc__hint { margin: 0; font-size: 13px; color: var(--ink2); }
.calc__out > p:last-child { margin-bottom: 0; }
.calc__res { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.calc__res div { min-width: 0; padding: 12px; background: var(--res-bg, var(--bg)); border: 1px solid var(--line); border-radius: var(--r-in); }
.calc__res dt { font-size: 12px; color: var(--ink2); }
.calc__res dd { margin: 4px 0 0; font: var(--bold) 20px/1.1 var(--font-num); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; word-spacing: var(--num-ws, 0); }
.calc__res small { display: block; margin-top: 4px; font: 400 12px/1.35 var(--font-b); font-stretch: 100%; word-spacing: normal; color: var(--ink2); }
.calc__sum { margin: 14px 0 0; font: var(--bold) clamp(24px, 6vw, 32px)/1.2 var(--font-num); font-stretch: var(--m-stretch); font-variant-numeric: tabular-nums; word-spacing: var(--num-ws, 0); }
.calc__sum small { display: block; font: 400 13px/1.4 var(--font-b); font-stretch: 100%; word-spacing: normal; color: var(--ink2); }

/* ---------------------------------------------------------------- вопросы */
.qa { border-bottom: 1px solid var(--line); }
.qa summary { position: relative; display: flex; align-items: center; min-height: 56px; padding: 14px 44px 14px 0; cursor: pointer; list-style: none; font: var(--qa-w, 600) var(--qa-fs, 17px)/1.35 var(--font-qa, var(--font-b)); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: '+'; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font: 400 26px/1 var(--font-m); color: var(--acc-2); }
.qa[open] summary::after { content: '−'; }
.qa__a { max-width: 46em; padding: 0 0 18px; color: var(--ink2); }

/* ---------------------------------------------------------------- формы заявки и такси */
.sec--form { background: var(--form-bg, var(--bg2)); color: var(--form-ink, var(--ink)); }
.sec--form .lead, .sec--form .form__alt { color: var(--form-ink2, var(--ink2)); }
.sec--form .form__alt a { color: inherit; font-weight: var(--bold); }
.sec--taxi { background: var(--taxi-bg, var(--bg2)); color: var(--taxi-ink, var(--ink)); }
.sec--taxi .lead, .sec--taxi .form__alt { color: var(--taxi-ink2, var(--ink2)); }
.form { display: grid; gap: 14px; padding: 18px; background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--form-shadow, none); }
.form .btn { width: 100%; }
.form textarea { min-height: 104px; resize: vertical; }
.form__alt { color: var(--ink2); }
.form__msg { margin: 0; padding: 12px 14px; border-radius: var(--r-in); font-size: 15px; }
.form__msg.is-ok { background: var(--ok-bg); color: var(--ok-ink); }
.form__msg.is-err { background: var(--err-bg); color: var(--err-ink); }
.taxi-note { margin: 14px 0 0; padding: 12px 14px; border-left: 3px solid var(--acc); background: var(--bg2); font-size: 14px; }

/* ---------------------------------------------------------------- шапка страницы, крошки, чипсы и фильтры */
.phead { padding: 20px 0 22px; background: var(--phead-bg, transparent); border-bottom: var(--bw) solid var(--line); }
.phead h1 { margin: 12px 0 12px; font-size: clamp(30px, 6.4vw, calc(var(--h1-max) * .78)); }
.phead .lead { margin-bottom: 4px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 13px; color: var(--ink2); }
.crumbs a { color: var(--ink2); display: inline-flex; align-items: center; min-height: 32px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; border: var(--bw) solid var(--line-strong); border-radius: var(--r-chip); background: var(--card); color: var(--ink);
  font: 600 14px/1 var(--font-m); font-stretch: var(--m-stretch); text-decoration: none; cursor: pointer; }
.chip:hover { color: var(--ink); border-color: var(--ink); }
.chip small { font-weight: 400; color: var(--ink2); }
.chip[aria-pressed='true'], .chip[aria-current] { background: var(--chip-on, var(--ink)); border-color: var(--chip-on, var(--ink)); color: var(--chip-on-ink, var(--bg)); }
.chip[aria-pressed='true'] small, .chip[aria-current] small { color: inherit; opacity: .75; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters__k { flex-basis: 100%; margin-top: 4px; font: var(--k-w) 11px/1.2 var(--font-k); letter-spacing: .1em; text-transform: uppercase; color: var(--ink2); }
.filters__k:first-child { margin-top: 0; }
.chips + h2, .doclist + h2 { margin-top: 36px; }
.prose { max-width: 46em; }
.prose h2 { margin-top: 1.3em; font-size: clamp(22px, 3.6vw, 30px); }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.4em; }
.prose li { margin-bottom: .45em; }
.prose > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- карточка товара */
.prod { padding: 16px 0 34px; }
.prod__in { display: grid; gap: 22px; margin-top: 12px; }
.prod h1 { font-size: clamp(26px, 6vw, calc(var(--h1-max) * .66)); margin-bottom: 14px; }
.prod__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.prod__chips span { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; font: 600 13px/1 var(--font-m); font-stretch: var(--m-stretch); background: var(--chipbg, var(--bg2)); border-radius: var(--r-chip); }
.prod__lead { margin-top: 18px; color: var(--ink2); }
.gal { padding: 10px; background: var(--media-bg); border: var(--bw) solid var(--gal-line, transparent); border-radius: var(--r); }
.gal__v { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.gal__v.is-draw { aspect-ratio: 13 / 9; }
.gal__v img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.gal__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.gal__tabs button { min-height: 44px; min-width: 76px; padding: 0 16px; border: var(--bw) solid var(--line-strong); border-radius: var(--r-tab); background: var(--card); cursor: pointer; font-size: 14px; }
.gal__tabs button[aria-pressed='true'] { background: var(--tab-on-bg, var(--ink)); border-color: var(--tab-on-bg, var(--ink)); color: var(--tab-on-ink, var(--bg)); }
.buy { margin-top: 18px; padding: 18px; background: var(--card); border: var(--bw) solid var(--buy-line, var(--line)); border-radius: var(--r); box-shadow: var(--buy-shadow, none); }
.buy__stock { position: relative; margin: 14px 0 0; padding-left: 18px; font-size: 14px; }
.buy__stock::before { content: ''; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border-radius: 50%; background: var(--warn); }
.buy__cta { display: grid; gap: 10px; margin: 16px 0 0; }
.buy .note { margin-top: 12px; }
.qty { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 12px; align-items: end; margin-top: 14px; }
.qty label { display: grid; gap: 6px; font-size: 13px; color: var(--ink2); }
.qty input { font-size: 17px; font-weight: 600; }
.qty__out { margin: 0; font-size: 14px; color: var(--ink2); }
.qty__out b { font-family: var(--font-num); font-stretch: var(--m-stretch); font-size: 17px; word-spacing: var(--num-ws, 0); color: var(--ink); }

/* ---------------------------------------------------------------- подвал */
.ftr { padding: 40px 0 calc(var(--fab-h) + 34px + env(safe-area-inset-bottom)); background: var(--ftr-bg); color: var(--ftr-ink); font-size: 14px; }
.ftr a { color: var(--ftr-link); }
.ftr a:hover { color: var(--ftr-link); text-decoration-thickness: 2px; }
.ftr__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 16px; }
.ftr__brand, .ftr__nap, .ftr__legal { grid-column: 1 / -1; }
.ftr__brand .logo { margin: 0 0 12px; color: var(--ftr-link); }
.ftr__brand .logo__sub { display: block; color: var(--ftr-ink); }
.ftr__brand p { margin: 0; max-width: 30em; }
.ftr__nav { display: grid; align-content: start; }
.ftr__nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; line-height: 1.25; }
.ftr__h { margin: 0 0 6px; font: var(--k-w) 11px/1.2 var(--font-k); letter-spacing: .12em; text-transform: uppercase; color: var(--ftr-ink); opacity: .85; }
.ftr__tel { display: inline-flex; align-items: center; min-height: 44px; font: var(--bold) 22px/1.2 var(--font-tel); text-decoration: none; font-variant-numeric: tabular-nums; }
.ftr__nap p { margin: 0 0 10px; }
.ftr__legal { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid var(--ftr-line); font-size: 12px; line-height: 1.55; opacity: .9; }
.ftr__legal a { display: inline-block; padding: 4px 0; }

/* нижняя панель на телефоне: Позвонить · WhatsApp · Расчёт */
.fab { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: var(--fab-gap, 1px); padding: var(--fab-pad, 0) var(--fab-pad, 0) calc(var(--fab-pad, 0px) + env(safe-area-inset-bottom));
  background: var(--fab-line); border-top: var(--bw) solid var(--fab-line); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .35); }
.fab a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--fab-h); padding: 6px 4px; background: var(--fab-bg); color: var(--fab-ink);
  font: var(--fab-w, 600) 13px/1.1 var(--font-fab, var(--font-b)); text-transform: var(--fab-tt, none); letter-spacing: var(--fab-ls, 0); text-decoration: none; border-radius: var(--fab-r, 0); }
.fab a:hover { color: var(--fab-ink); }
.fab svg { width: 22px; height: 22px; flex: none; }
.fab .fab__call { background: var(--fab-call); color: var(--fab-call-ink); font-size: 14px; }
.fab .fab__call:hover { color: var(--fab-call-ink); }

/* cookie */
.cookie { position: fixed; z-index: 50; left: 8px; right: 8px; bottom: calc(var(--fab-h) + 10px + env(safe-area-inset-bottom)); max-width: 520px; padding: 16px; background: var(--card); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: 0 16px 40px rgba(0, 0, 0, .22); }
.cookie__text { margin-bottom: 10px; font-size: 14px; }
.cookie__settings { display: grid; gap: 8px; margin-bottom: 12px; font-size: 14px; }
.cookie__settings label { display: flex; align-items: center; gap: 8px; min-height: 36px; }
.cookie__bar { display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.cookie__link { min-height: 44px; padding: 0 8px; background: none; border: 0; color: var(--ink2); text-decoration: underline; cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .hero__fig .d-dims { animation: bn-dims 1.2s .25s both; }
  @keyframes bn-dims { from { opacity: 0; } to { opacity: 1; } }
}
/* телефон и планшет: после кнопок — сводка с ценой (коммерческий фактор), затем чертёж */
@media (max-width: 1079px) {
  .hero__in > .kpis { order: 2; }
  .hero__in > .hero__fig { order: 3; }
}
@media (max-width: 374px) {
  :root { --wrap-px: 14px; }
  .hdr__num { font-size: 13.5px; }
  .logo__mark { font-size: 18px; }
  .btn { white-space: normal; }
}

/* ---------------------------------------------------------------- ≥ 600 px */
@media (min-width: 600px) {
  .logo__sub { display: block; }
  .hero__cta { display: flex; flex-wrap: wrap; }
  .buy__cta { display: flex; flex-wrap: wrap; }
  .facts { grid-template-columns: 1fr 1fr; }
  .filters__k { flex-basis: auto; margin: 0 0 0 8px; }
  .filters__k:first-child { margin-left: 0; }
}
/* ≥ 760 px */
@media (min-width: 760px) {
  :root { --wrap-px: 28px; --sec-y: 72px; --hdr-h: 68px; }
  .hero { padding: 44px 0 52px; }
  .pgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pgrid-gap-d, 16px); }
  .pcard__a { padding: 14px; }
  .stiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pgrid-gap-d, 16px); }
  .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cols2 { grid-template-columns: 1fr 1fr; gap: 40px; }
  .cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc { padding: 22px; }
  .calc__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .calc__row--3 .chk { grid-column: auto; }
  .calc__res { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .form { padding: 24px; }
  .form .btn { width: auto; justify-self: start; }
  .spec__t thead { display: table-header-group; }
  .spec__t tr { display: table-row; padding: 0; }
  .spec__t th, .spec__t td { display: table-cell !important; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; text-align: left; font-size: 15px; color: var(--ink); }
  .spec__t td::before { content: none !important; }
  .spec__t th { font: var(--th-w, 600) var(--th-fs, 12px)/1.2 var(--font-th, var(--font-b)); letter-spacing: .01em; color: var(--th-ink, var(--ink2)); background: var(--th-bg, var(--bg2)); white-space: nowrap; }
  .spec__t td:first-child { font-size: 15px; }
  .spec__t td.mono, .spec__t td:nth-child(4) { font-family: var(--font-m); font-stretch: var(--m-stretch); }
  .spec__t td.num, .spec__t th.num, .spec__t td:last-child { text-align: right; }
  .spec__t td:last-child small { display: inline; }
  .spec__t tbody tr:hover td { background: var(--row-h, var(--bg2)); }
  .ftr { padding-bottom: 40px; }
  .ftr__in { grid-template-columns: 1.3fr 1fr 1fr 1.3fr; }
  .ftr__brand, .ftr__nap { grid-column: auto; }
  .fab { display: none; }
  .cookie { left: auto; right: 18px; bottom: 18px; }
  .burger__nav { max-height: calc(100vh - var(--hdr-h)); }
}
/* ≥ 1080 px */
@media (min-width: 1080px) {
  :root { --sec-y: 96px; --hdr-h: 74px; --fs-b: 17px; }
  .hdr__in { gap: 22px; }
  .logo__img { height: 28px; }
  .logo__mark { font-size: 22px; }
  .logo__sub { display: none; }
  .nav { display: flex; gap: 20px; }
  .hdr__cta { display: inline-flex; }
  .hdr__num { font-size: 16px; }
  .burger { display: none; }
  .hero { padding: 64px 0 76px; }
  .hero__in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; column-gap: 56px; row-gap: 40px; }
  .kpis { grid-column: 1 / -1; }
  .pgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .facts { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
  .prod__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
  .prod__media { position: sticky; top: calc(var(--hdr-h) + 20px); }
  .calc { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; padding: 28px; align-items: start; }
  .calc__out { position: sticky; top: calc(var(--hdr-h) + 20px); }
  .calc__res { grid-template-columns: 1fr 1fr; }
  .picker__tabs { flex-wrap: wrap; overflow: visible; margin: 0 0 22px; padding: 0; }
}
@media (min-width: 1280px) {
  .logo__sub { display: block; }
  .nav { gap: 26px; }
}