/* НефтеХимСырье — страница товара: вариант 04 «Продукт → применение» (Орсен 10.10: «04 Продукт → применение. Делай фул»;
   прототип _proto/cat10/v04-flow/product.html). Владелец: роль «Товар».
   ≥ 1024: слева (7 из 12) — раздел · группа, марка (H1), тип · завод, мини-схема «марка → применения»;
   справа (5 из 12) — карточка, закреплённая под шапкой: 3D в рамке, шкала вязкости, нормы, ЦНТ, НД, кнопки.
   < 1024: название → карточка → схема; < 640 схема — список с линией слева. Ниже во всю ширину — характеристики (свёрнуты),
   похожие позиции, форма запроса; на телефоне и планшете — нижняя панель «В заявку / Запросить цену».
   Правила: SPACING.md (шкала --s-*, радиусы пилюля / 16 / 8, наведение — фон или рамка без свечения и подъёма, §13 — типографика).
   Отступы, цвета и радиусы — только токены tokens.css; янтарь — только у действий. Кнопки — стили UI (ui.css), здесь не трогаем.
   Химия — только 3D-модель карточки, без формул и подписей (DESIGN.md). --p-tint — оттенок модели по ЦНТ (article.product). */

.product { --p-tint: var(--amber); position: relative; }
.pp { padding: var(--page-top) 0 var(--section); }

/* ============================================================ верх: крошки, под ними дуга ⌒ (ui.pagecap, until = .pp-top) */

/* отступ под крошками — у сетки, не у .pp-top: по низу .pp-top дуга считает свою вершину (fx/liquid.js, capPlace) */
.pp-grid { margin-top: var(--s-5); }
.pcap ~ .pp .pp-grid { margin-top: var(--cap-gap); }   /* текст шапки → вершина дуги → содержимое (SPACING.md §3) */
.pp-top .crumbs-nav { margin-bottom: 0; }
/* крошки — те же правила, что в pages.css (на товаре он не подключён); нулевая специфичность: общие стили важнее.
   Plex Sans 14/20 строчными (§13.5), разделитель — в конце пункта: при переносе строка не начинается с «/» */
:where(.pp-top .crumbs) {
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); padding: 0; margin: 0; list-style: none;
  font-family: var(--font-sans); font-size: var(--fs-small); line-height: var(--lh-small); letter-spacing: 0; color: var(--muted);
}
:where(.pp-top .crumbs__item) { display: inline-flex; align-items: center; gap: var(--s-2); }
:where(.pp-top .crumbs__item:not(:last-child))::after { content: "/"; color: var(--line-2); }
:where(.pp-top .crumbs__link) { transition: color var(--t-hover) var(--ease-out); }
:where(.pp-top .crumbs__link:hover) { color: var(--ink); }
:where(.pp-top .crumbs__current) { color: var(--ink-2); }
.pp-top .crumbs__current { text-transform: none; }        /* марка — собственное имя: регистр из данных («ПН-6к») */
/* телефон: крошки — одна ссылка «← Раздел» на родителя; название позиции и так в H1 */
@media (max-width: 639.98px) {
  .pp-top .crumbs__item:not(:nth-last-child(2)) { display: none; }
  .pp-top .crumbs__item:nth-last-child(2)::after { content: none; }
  .pp-top .crumbs__item:nth-last-child(2) .crumbs__link::before { content: "←"; margin-right: var(--s-2); color: var(--muted); }
}

/* ============================================================ сетка: название и схема + карточка */

.pp-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.pp-main { min-width: 0; }
@media (min-width: 1024px) {
  .pp-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: start; }
  /* закреплена под шапкой; выше окна быть не может — тогда своя прокрутка (data-lenis-prevent ставит JS только в этом случае) */
  .pp-side {
    position: sticky; top: var(--hdr-offset);
    max-height: calc(100vh - var(--hdr-offset) - var(--s-4));
    max-height: calc(100svh - var(--hdr-offset) - var(--s-4));
    overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
    border-radius: var(--r-card);
  }
}
/* < 1024: карточка с нормами и кнопками — сразу под названием, схема применений ниже */
@media (max-width: 1023.98px) {
  .pp-main { display: contents; }
  .pp-label, .pp-name, .pp-kind { order: 1; }
  .pp-side { order: 2; margin-top: var(--s-6); }
  .pp-uses { order: 3; }
}

/* надзаголовок «раздел · группа» — Plex Sans строчными, не mono-капс (§13.5) */
.pp-label {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); margin: 0;
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2);
}
.pp-dot { width: 4px; height: 4px; border-radius: var(--r-round); background: var(--muted); }
.pp-name { margin: 0; overflow-wrap: break-word; text-wrap: balance; }
.pp-label + .pp-name { margin-top: var(--gap-eyebrow); }
.pp-kind { margin-top: var(--gap-title); }
.pp-kind__plant { color: var(--ink); }

/* ============================================================ мини-схема «марка → применения» */

.pp-uses { margin-top: var(--s-7); }
.pp-uses__h { margin: 0 0 var(--s-5); }

.pf { position: relative; display: grid; grid-template-columns: minmax(0, 3fr) minmax(48px, 2fr) minmax(0, 7fr); }
.pf__self { grid-column: 1; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }
.pf__col { grid-column: 3; position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.pf__li { display: flex; flex-direction: column; }

/* линии (.fl-flow__svg, .fl-path, .fl-port: «прорастание» .is-drawn, подсветка .has-focus / .is-on) — общие со схемой каталога: ui.css */

/* узлы */
.pf-node {
  position: relative; display: flex; align-items: flex-start; gap: var(--s-3);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out), opacity var(--t-hover) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.pf-node__body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; flex: 1 1 auto; }
.pf-node__t { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); color: var(--ink); }
.pf-node__n { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); text-wrap: pretty; }
.pf-ico { flex: none; width: var(--ico-md); height: var(--ico-md); fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t-hover) var(--ease-out); }
.pf.has-focus .pf-node--use:not(.is-on) { opacity: .4; }
.pf-node--use.is-on { background: var(--surface-2); border-color: var(--line-2); }
.pf-node--use.is-on .pf-ico { stroke: var(--ink); }
@media (hover: hover) {
  a.pf-node:hover { background: var(--surface-2); border-color: var(--line-2); }
  a.pf-node:hover .pf-ico { stroke: var(--ink); }
}
a.pf-node:active { background: var(--press-bg); }
a.pf-node:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }

/* марка (слева) */
.pf-node--self { padding: var(--s-3) var(--s-4); border-radius: var(--r-card); border-color: var(--line-2); background: var(--surface-2); }
.pf-node--self .pf-node__t { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.pf-node--self .pf-node__n { color: var(--muted); }
/* длинное название («Растворитель углеводородный деароматизированный») — ступень текста 16; переносы — мягкие (&shy;, p.name_shy) */
.pf-node--long .pf-node__t { font-size: var(--fs-body); line-height: var(--lh-body); hyphens: manual; }
/* применение (справа): пиктограмма, название задачи, строка клиента; у ссылки — «ещё N →» */
.pf-node--use { padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); border-radius: var(--r-inner); }
.pf-node__more {
  flex: none; display: inline-flex; align-items: center; gap: var(--s-1); align-self: flex-start;
  font-size: var(--fs-caption); line-height: var(--lh-small); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.pf-node__go { width: var(--ico-sm); height: var(--ico-sm); fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--t-hover) var(--ease-out), stroke var(--t-hover) var(--ease-out); }
@media (hover: hover) { a.pf-node:hover .pf-node__go { translate: 4px 0; stroke: var(--ink); } }
a.pf-node:focus-visible .pf-node__go { stroke: var(--ink); }

/* 640–1023: схема во всю ширину */
@media (max-width: 1023.98px) {
  .pf { grid-template-columns: minmax(0, 4fr) minmax(32px, 1fr) minmax(0, 7fr); }
}
/* < 640: список — узел марки сверху, от него линия вниз и отводы к применениям; подсветка — фон узла и его отвод */
@media (max-width: 639.98px) {
  .pf { display: block; }
  .pf > .fl-flow__svg { display: none; }
  .pf__self { display: block; }
  .pf-node--self { display: inline-flex; padding: var(--s-2) var(--s-4); border-radius: var(--r-inner); }
  .pf-node--self .pf-node__t { font-size: var(--fs-body); line-height: var(--lh-body); }
  .pf__col { margin-top: var(--s-2); gap: var(--s-2); }
  .pf__li { position: relative; padding-left: var(--s-6); }
  /* вертикаль: от узла марки (верх первой строки — на 8 выше) до отвода последней строки */
  .pf__li::before { content: ""; position: absolute; left: var(--s-3); top: calc(-1 * var(--s-2)); bottom: 0; width: 1px; background: var(--line-2); }
  .pf__li:last-child::before { bottom: auto; height: calc(var(--s-2) + var(--s-5) + 2px); }
  /* отвод: на уровне названия задачи (12 отступ + 10 половина строки 20) */
  .pf__li::after { content: ""; position: absolute; left: var(--s-3); top: calc(var(--s-5) + 2px); width: var(--s-3); height: 1px; background: var(--line-2); transition: background-color var(--t-hover) var(--ease-out); }
  .pf__li:has(a.pf-node:is(:hover, :focus-visible, :active))::after { background: var(--ink-2); }
  .pf-node--use { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3); gap: var(--s-2); }
  .pf-ico { width: var(--ico-sm); height: var(--ico-sm); margin-top: 2px; /* optical: к строке 20 */ }
  /* сетка узла: пиктограмма · название · «ещё N →» в первой строке, текст применения — под названием до правого края.
     «ещё N» — 14, не 12 (на телефоне без мелочи); своя колонка — название переносится раньше и не наезжает на счётчик */
  .pf-node--use { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--s-2); row-gap: var(--s-1); }
  .pf-node--use > .pf-node__body { display: contents; }
  .pf-node--use > .pf-ico { grid-column: 1; grid-row: 1; }
  .pf-node--use .pf-node__t { grid-column: 2; grid-row: 1; }
  .pf-node--use .pf-node__n { grid-column: 2 / -1; grid-row: 2; }
  .pf-node__more { grid-column: 3; grid-row: 1; font-size: var(--fs-small); line-height: var(--lh-small); }
}

/* ============================================================ карточка: 3D, шкала вязкости, нормы, НД, кнопки */

.pp-card { display: grid; gap: var(--s-5); padding: var(--pad-card); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface); }

/* 3D: настоящий модуль product-scene, только визуал (без подписей, HUD, теней); рамка 8 внутри карточки 16. Высота умеренная */
.pp-3d { position: relative; margin: 0; height: 160px; border-radius: var(--r-inner); background: var(--bg-2); overflow: hidden; }
.pp-3d__stage { position: absolute; inset: 0; }
.pp-3d :is(.mol-layer, .mol-hud, .mol-callout, .mol-mini) { display: none !important; }
@media (min-width: 640px) { .pp-3d { height: 200px; } }
@media (min-width: 1024px) { .pp-3d { height: 224px; } }
@media (min-width: 1024px) and (max-height: 820px) { .pp-3d { height: 176px; } }

/* нормы: подпись — Plex Sans строчными (§13.5), число — моно; «не менее» — мелкая пометка перед числом */
.pp-norm__k { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.pp-norm__u { white-space: nowrap; }
.pp-norm__v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); font-variant-numeric: tabular-nums; }
.pp-norm__v .t-mono { white-space: nowrap; }
.pp-norm__v--lg { font-size: var(--fs-h4); line-height: var(--lh-h4); }
.pp-norm__q { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.pp-norm__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-1) var(--s-3); margin-bottom: var(--s-3); }

/* шкала: все позиции каталога точками (логарифм), диапазон позиции — полоса --ink (не янтарь: это данные, не действие) */
.pp-scale__track { position: relative; height: 24px; }
.pp-scale__track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.pp-scale__track i { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: var(--r-round); background: var(--line-2); }
.pp-scale__track b { position: absolute; top: 50%; height: 8px; margin-top: -4px; min-width: 8px; translate: -4px 0; padding-inline: 4px; box-sizing: content-box; border-radius: var(--r-pill); background: var(--ink); }
.pp-scale__ax { display: flex; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }

.pp-norms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: 0; }
.pp-norm--scale + .pp-norms { padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pp-norms .pp-norm { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.pp-sw { flex: none; width: 12px; height: 12px; border-radius: var(--r-round); background: var(--sw); border: 1px solid var(--line-2); }

.pp-doc { margin: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); overflow-wrap: anywhere; }
.pp-doc__k { color: var(--muted); }
.pp-doc + .pp-doc { margin-top: calc(-1 * var(--s-3)); }

/* кнопки: «Запросить цену» во всю ширину, под ней «В заявку» и «Паспорт PDF» поровну; все 48 (один ряд — одна высота, §0 п. 3) */
.pp-acts { display: flex; flex-wrap: wrap; gap: var(--gap-row); }
.pp-acts > .mbtn { flex: 1 1 100%; justify-content: center; padding-right: calc(var(--h) + var(--gap)); }   /* как .mbtn--wide */
.pp-acts > .reqbtn { flex: 1 1 0; height: var(--h-md); padding: 0 var(--px-md); font-size: var(--fs-body); line-height: var(--lh-body); }
.pp-acts > .gbtn { flex: 1 1 0; justify-content: center; }

/* телефон: подписи шкалы и пометки «не менее» — 14, не 12 (на телефоне без мелочи) */
@media (max-width: 639.98px) {
  .pp-scale__ax, .pp-norm__q { font-size: var(--fs-small); line-height: var(--lh-small); }
}

/* ============================================================ ниже сетки: характеристики, похожие, запрос */

.pp-sec { scroll-margin-top: var(--s-4); }
.pp-specs { margin-top: var(--section); }
.pp-sec + .pp-sec { margin-top: var(--s-7); }
.pp-sec.preq { margin-top: var(--section); }
.pp-sec__head { display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between; gap: var(--s-4) var(--gap-row); margin-bottom: var(--s-5); }
.pp-sec__head--col { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; margin-bottom: var(--section-head); }
.pp-sec__lead { margin-top: var(--gap-title); }   /* кегль, цвет, мера — .t-lead */

/* ---------- характеристики: свёрнуты (details) ---------- */
.pp-det { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pp-det__sum { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-5) 0; cursor: pointer; list-style: none; }
.pp-det__sum::-webkit-details-marker { display: none; }
.pp-det__sum:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: var(--r-inner); }
.pp-det__h { margin: 0; }
.pp-det__n { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
.pp-det__chev { margin-left: auto; flex: none; width: var(--ico-md); height: var(--ico-md); fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate var(--t-micro) var(--ease-out), stroke var(--t-hover) var(--ease-out); }
.pp-det[open] .pp-det__chev { rotate: 180deg; }
@media (hover: hover) { .pp-det__sum:hover .pp-det__chev { stroke: var(--ink); } }
.pp-det__body { padding-bottom: var(--s-5); }
.pp-det__note { margin: var(--s-4) 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }

/* таблица норм в рамке 16: строка 48 (12 + 24 + 12), шапка 40; числа — моно, tnum, по правому краю (§6.5) */
.passport { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--bg-2); overflow: clip; }
.specs { width: 100%; border-collapse: separate; border-spacing: 0; }
.specs thead th {
  padding: var(--s-3) var(--pad-card);
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
  text-align: left; font-weight: 400;
  font-family: var(--font-mono); font-size: var(--fs-label); line-height: var(--lh-caption);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted);
}
.specs thead th:nth-child(1) { width: 56%; }
.specs thead th:nth-child(2) { width: 14%; }
.specs tbody tr { transition: background-color var(--t-hover) var(--ease-out); }
.specs tbody th, .specs tbody td {
  padding: var(--s-3) var(--pad-card);
  border-top: 1px solid var(--line);
  vertical-align: baseline; text-align: left; line-height: var(--lh-body);
}
.specs tbody tr:first-child > * { border-top: 0; }
.specs tbody th { font-weight: 400; color: var(--ink-2); }
.specs .specs__unit { font-family: var(--font-mono); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); white-space: nowrap; }
.specs .specs__val { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink); font-variant-numeric: tabular-nums; }
.specs .specs__val:not(.specs__val--text) { white-space: nowrap; }
.specs .specs__val--text { font-family: var(--font-sans); }   /* текстовое значение без единицы — гротеск, на оба столбца */
.specs .specs__q { font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--muted); }
@media (min-width: 720.02px) {
  .specs thead th:nth-child(3), .specs .specs__val { text-align: right; }
}
@media (hover: hover) {
  .specs tbody tr:hover { background: var(--surface-2); }
  .specs tbody tr:hover th { color: var(--ink); }
}
/* телефон: строки — блоки «показатель / значение · единица»; единица сразу за значением (шапка «Ед.» скрыта) */
@media (max-width: 720px) {
  .specs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .specs, .specs tbody { display: block; }
  .specs tbody tr {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "name name" "val unit";
    gap: var(--s-1) var(--s-2);
    padding: var(--s-3) var(--pad-card);
    border-top: 1px solid var(--line);
  }
  .specs tbody tr:first-child { border-top: 0; }
  .specs tbody th, .specs tbody td { display: block; padding: 0; border: 0; }
  .specs tbody th { grid-area: name; font-size: var(--fs-small); line-height: var(--lh-small); }
  .specs .specs__val { grid-area: val; align-self: baseline; font-size: var(--fs-body); line-height: var(--lh-body); white-space: normal; }
  .specs .specs__unit { grid-area: unit; align-self: baseline; text-align: left; }
  .specs .specs__val--text { grid-column: 1 / -1; }
}
@media (max-width: 639.98px) {
  .specs .specs__unit, .specs .specs__q, .pp-det__n { font-size: var(--fs-small); line-height: var(--lh-small); }
}

/* ---------- похожие позиции: строки, как в списке нового каталога (свои классы pp-row) ---------- */
.pp-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pp-row { border-bottom: 1px solid var(--line); }
.pp-row__a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-2) var(--s-4);
  padding: var(--s-3) var(--s-4); transition: background-color var(--t-hover) var(--ease-out);
}
@media (hover: hover) { .pp-row__a:hover { background: var(--hover-bg); } }
.pp-row__a:active { background: var(--press-bg); }
.pp-row__a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.pp-row__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); min-width: 0; }
.pp-row__name { font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: var(--fw-semibold); color: var(--ink); }
.pp-row__plant { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.pp-row__visc { grid-column: 2; grid-row: 1; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); white-space: nowrap; }
.pp-row__k { color: var(--muted); }
.pp-row__own { grid-column: 1 / -1; grid-row: 2; }
.pp-row__own:empty { display: none; }
.pp-row__go { grid-column: 3; grid-row: 1; width: var(--ico-md); height: var(--ico-md); fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--t-hover) var(--ease-out), stroke var(--t-hover) var(--ease-out); }
@media (hover: hover) { .pp-row__a:hover .pp-row__go { translate: 4px 0; stroke: var(--ink); } }
.pp-row .app-icons { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); }
.pp-row .app-icons__i { display: inline-grid; place-items: center; width: 24px; height: 24px; color: var(--muted); }
.pp-row .app-ico { width: var(--ico-sm); height: var(--ico-sm); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) { .pp-row__a { padding: var(--s-4) var(--s-5); } }
@media (max-width: 639.98px) { .pp-row__name { font-size: var(--fs-body); line-height: var(--lh-h4); } }
@media (max-width: 359.98px) { .pp-row__visc .pp-row__k { display: none; } }

/* ---------- запрос цены: панель формы 16 ---------- */
.preq__contacts { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-7); margin: var(--section-head) 0 0; }
.preq__contacts dt { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
.preq__contacts dd { margin: var(--s-1) 0 0; font-size: var(--fs-lead); line-height: var(--lh-lead); }
/* телефон — данные: Plex Mono 400, табличные цифры, одной строкой (§13.1, §13.4) — как .ftr__phone */
.preq__contacts a[href^="tel:"] { font-family: var(--font-mono); font-weight: 400; font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; }
.preq__contacts a {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px;
  transition: text-decoration-color var(--t-hover) var(--ease-out);
}
.preq__contacts a:hover { text-decoration-color: var(--ink-2); }
@media (pointer: coarse) {
  .preq__contacts a { position: relative; }
  .preq__contacts a::after { content: ""; position: absolute; inset: calc(-1 * var(--s-3)) calc(-1 * var(--s-1)); }
}
.preq__panel {
  position: relative;
  padding: var(--pad-panel);
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--bg-2);
}
.preq__product {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-5); padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.preq__product .t-label { color: var(--muted); }
.preq__product-plant { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--muted); }
/* ≥ 1024: форма — 2 из 3 ширины контейнера, лид и контакты слева */
@media (min-width: 1024px) {
  .preq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--col-gap); align-items: start; }
  .preq .pp-sec__head--col { margin-bottom: 0; }
}

/* ============================================================ нижняя панель (< 1024): «В заявку / Запросить цену» */
/* пилюля 64 = 48 + 2 × 8, как капсула заявки .rq-dock; над капсулой (если она есть) — выше неё на 8.
   Видна, когда кнопки карточки ушли из вида; над разделом запроса и подвалом прячется (JS) */
.pp-bar { display: none; }
@media (max-width: 1023.98px) {
  .pp-bar {
    display: block;
    position: fixed; left: 0; right: 0; bottom: max(var(--dock-bottom), env(safe-area-inset-bottom)); z-index: calc(var(--z-header) - 1);
    pointer-events: none; visibility: hidden;
    transform: translateY(calc(100% + var(--s-6)));
    transition: transform var(--t-reveal) var(--ease-out), visibility 0s linear var(--t-reveal);
  }
  .pp-bar.is-on { visibility: visible; transform: none; transition: transform var(--t-reveal) var(--ease-out), visibility 0s; }
  body:has(.rq-dock:not([hidden])) .pp-bar { bottom: calc(max(var(--s-4), env(safe-area-inset-bottom)) + var(--h-md) + 2 * var(--s-2) + 2px + var(--s-2)); }
  .pp-bar__in {
    pointer-events: auto;
    width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto;
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
    border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--surface-2);
  }
  .pp-bar__name {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pp-bar .reqbtn { flex: none; height: var(--h-md); padding: 0 var(--px-md); font-size: var(--fs-body); line-height: var(--lh-body); }
  .pp-bar .mbtn { flex: none; }
}
/* телефон: без названия, панель 56 = 48 + 2 × 4; «Запросить цену» занимает остаток */
@media (max-width: 639.98px) {
  .pp-bar__in { padding: var(--s-1); }
  .pp-bar__name { display: none; }
  .pp-bar .reqbtn { padding: 0 var(--px-sm); }
  .pp-bar .mbtn { flex: 1 1 auto; justify-content: center; }
}
/* уже 375 обе кнопки в строку не встают: панель — одно главное действие «Запросить цену» во всю ширину (56, одна строка);
   «В заявку» остаётся в карточке */
@media (max-width: 374.98px) {
  .pp-bar .reqbtn { display: none; }
  .pp-bar .mbtn { padding-right: calc(var(--h) + var(--gap)); }   /* как .mbtn--wide: подпись по центру */
}

/* ============================================================ меньше движения */
@media (prefers-reduced-motion: reduce) {
  .pf-node, .pf-ico, .pf-node__go, .pf__li::after, .pp-det__chev,
  .specs tbody tr, .pp-row__a, .pp-row__go, .pp-bar, .pp-bar.is-on { transition: none; }
}