/* Центр-Гамма — дизайн-система.
   Источник решений: design-system/centr-gamma/MASTER.md
   Один слой: токены → база → примитивы → компоненты → адаптив. */

/* ------------------------------------------------------------------ токены */

:root {
  /* цвет */
  --ground: #f1f2f0;
  --paper: #ffffff;
  --sunk: #e7e9e6;
  --ink: #14181a;
  --ink-2: #5c6669;
  --line: #d7dbd8;
  --line-2: #c3c9c5;
  --wire: #d24a14;
  --wire-text: #b43d0e;
  --wire-soft: #fbeae2;
  --print: #1d4e5f;
  --print-soft: #e2edf0;
  --overlay: rgba(20, 24, 26, 0.55);
  /* акцентная полоса: в светлой теме тёмная, в тёмной — приглушённая,
     чтобы не выжигать экран ярким блоком */
  --invert-bg: #14181a;
  --invert-fg: #f1f2f0;

  /* типографика */
  --font-text: "Golos Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, ui-monospace, monospace;

  /* ритм: базовая единица 8px */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 64px;
  --s7: 96px;

  --shell: 1140px;
  --measure: 66ch;
  --shadow: 0 1px 2px rgba(20, 24, 26, 0.06), 0 8px 24px -12px rgba(20, 24, 26, 0.18);
  --header-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0f1214;
    --paper: #171b1d;
    --sunk: #1d2224;
    --ink: #e9ecea;
    --ink-2: #98a2a4;
    --line: #2a3134;
    --line-2: #3a4245;
    --wire: #ff7040;
    --wire-text: #ff875c;
    --wire-soft: #2c1a13;
    --print: #86c6d9;
    --print-soft: #14282f;
    --overlay: rgba(0, 0, 0, 0.72);
    --invert-bg: #1d2224;
    --invert-fg: #e9ecea;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.8);
  }
}

:root[data-theme="dark"] {
  --ground: #0f1214;
  --paper: #171b1d;
  --sunk: #1d2224;
  --ink: #e9ecea;
  --ink-2: #98a2a4;
  --line: #2a3134;
  --line-2: #3a4245;
  --wire: #ff7040;
  --wire-text: #ff875c;
  --wire-soft: #2c1a13;
  --print: #86c6d9;
  --print-soft: #14282f;
  --overlay: rgba(0, 0, 0, 0.72);
  --invert-bg: #1d2224;
  --invert-fg: #e9ecea;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.8);
}

/* -------------------------------------------------------------------- база */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--s2));
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.nav-open {
  overflow: hidden;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 var(--s2);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h2 {
  font-size: clamp(1.55rem, 3vw, 2.25rem);
}

h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 var(--s2);
  max-width: var(--measure);
}

p:last-child {
  margin-bottom: 0;
}

ul,
ol {
  margin: 0 0 var(--s2);
  padding-left: 1.25em;
}

li {
  margin-bottom: 0.35em;
}

a {
  color: var(--wire-text);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--wire);
}

:focus-visible {
  outline: 2px solid var(--wire);
  outline-offset: 2px;
}

dl,
dd {
  margin: 0;
}

figure {
  margin: 0;
}

/* --------------------------------------------------------------- примитивы */

.shell {
  width: min(100% - var(--s4), var(--shell));
  margin-inline: auto;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: var(--s1);
  left: var(--s1);
  padding: 10px 16px;
  color: var(--ground);
  background: var(--ink);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  color: var(--ground);
  transform: none;
}

.label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-2);
}

.lead {
  font-size: 1.12rem;
  color: var(--ink-2);
}

.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.92em;
}

.band {
  padding-block: var(--s6);
  border-top: 1px solid var(--line);
}

/* линия-разделитель нужна только между полосами: у соседей она бы удвоилась */
.hero + .band,
.breadcrumbs + .band,
.page-head + .band {
  border-top: 0;
}

.band-sunk {
  background: var(--sunk);
}

.band-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s3);
  align-items: end;
  margin-bottom: var(--s4);
}

.band-head h2 {
  margin: var(--s1) 0 0;
}

.band-head p {
  margin: 0;
  color: var(--ink-2);
}

.band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-top: var(--s4);
}

.text-link {
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}

.text-link i {
  font-style: normal;
  transition: transform 0.2s ease;
}

.text-link:hover i {
  transform: translateX(3px);
}

.notice {
  max-width: var(--measure);
  margin-top: var(--s3);
  padding: var(--s2);
  border-left: 3px solid var(--print);
  background: var(--print-soft);
  color: var(--ink);
  font-size: 0.95rem;
}

.cols-2,
.cols-3 {
  display: grid;
  gap: var(--s3);
}

.cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cols-3 > div > b,
.cols-2 > div > b {
  display: block;
  margin-bottom: var(--s1);
}

.ticks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s3);
}

.ticks li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 0.5em;
  color: var(--ink-2);
}

/* Маркер — тире того же цвета, что и текст пункта, толщиной в те же 1px,
   что и все разделители сайта. Акцентный цвет в системе закреплён за
   действием, ценой и статусом: перечисление свойств не является ничем
   из этого и не должно спорить с кнопкой рядом. */
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 11px;
  height: 1px;
  background: currentColor;
}

/* ------------------------------------------------------------------ кнопки */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.6rem 1.15rem;
  border: 1px solid transparent;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn-lg {
  min-height: 52px;
  padding: 0.8rem 1.5rem;
}

.btn-solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
}

.btn-solid:hover {
  background: var(--wire);
  border-color: var(--wire);
  color: #ffffff;
}

.btn-accent {
  background: var(--wire);
  border-color: var(--wire);
  color: #ffffff;
}

.btn-accent:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-2);
  color: var(--ink);
}

.btn-ghost:hover {
  border-color: var(--wire);
  color: var(--wire-text);
}

/* ------------------------------------------------------------------ шапка */

.site-header {
  position: sticky;
  z-index: 40;
  top: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  flex: 0 0 auto;
}

.brand-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.brand-text b {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-text small {
  font-size: 0.72rem;
  color: var(--ink-2);
}

.main-nav {
  display: flex;
  gap: var(--s3);
  margin-left: auto;
}

.main-nav a {
  position: relative;
  padding: 6px 0;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wire);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease;
}

.main-nav a:hover::after,
.main-nav a.active::after {
  transform: scaleX(1);
}

.main-nav a.active {
  color: var(--wire-text);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: 0 0 auto;
}

.header-phone {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.header-phone:hover {
  color: var(--wire-text);
}

.menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
}

.menu-bars {
  display: grid;
  gap: 4px;
  width: 18px;
}

.menu-bars i {
  display: block;
  height: 2px;
  background: var(--ink);
}

/* -------------------------------------------------------------- хлебные крошки */

.breadcrumbs {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  font-size: 0.86rem;
}

.breadcrumbs .shell {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  align-items: center;
  padding-block: 12px;
}

.breadcrumbs a {
  color: var(--ink-2);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--wire-text);
}

.breadcrumbs i {
  font-style: normal;
  color: var(--line-2);
}

.breadcrumbs span {
  color: var(--ink);
}

/* ------------------------------------------------------------------- герой */

.hero {
  padding-block: var(--s6) var(--s5);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
  margin-bottom: var(--s6);
}

.hero-copy h1 {
  margin-block: var(--s2);
}

.hero-copy .lead {
  max-width: 46ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
}

.hero-plate {
  padding: var(--s3);
  border: 1px solid var(--line);
  background: var(--ground);
}

.chips {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block: var(--s2);
}

/* Плитка выбора марки: слева маркировка и задача, справа цена входа.
   Две строки слева, поэтому выравнивание по центру, а не по базовой линии. */
.chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  padding: 12px var(--s2);
  min-height: 56px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.chip-mark {
  display: grid;
  gap: 1px;
}

.chip b {
  font-size: 1.15rem;
  font-weight: 600;
}

.chip span {
  font-size: 0.85rem;
  color: var(--ink-2);
}

.chip .chip-price {
  flex: 0 0 auto;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
}

.chip:hover {
  background: var(--wire-soft);
  color: var(--wire-text);
}

.chip:hover span,
.chip:hover .chip-price {
  color: var(--wire-text);
}

.hero-plate-note {
  margin: 0 0 var(--s2);
  font-size: 0.82rem;
  color: var(--ink-2);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.facts > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s3) var(--s2);
  background: var(--paper);
}

.facts b {
  font-size: 1.35rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.facts span {
  font-size: 0.88rem;
  color: var(--ink-2);
}

/* ----------------------------------------------------------- карточки марок */

.grade-grid {
  display: grid;
  /* 250px даёт ровно четыре колонки на десктопе: линейка из четырёх марок
     встаёт одной строкой, без «осиротевшей» карточки */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  column-gap: var(--s3);
  row-gap: var(--s2);
}

.grade {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}

/* Карточка встаёт на общую сетку ряда: характеристики, шкала и цена
   оказываются на одной высоте во всех марках, как бы ни различались
   длина описания и число исполнений. */
@supports (grid-template-rows: subgrid) {
  .grade {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 6;
    gap: 0;
  }

  /* сокращённая карточка: без описания и строки «Исполнение» */
  .grade-compact {
    grid-row: span 4;
  }
}

.grade-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  align-items: baseline;
  justify-content: space-between;
}

.grade-name {
  margin: 0;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
}

.grade-uses {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--print);
  background: var(--print-soft);
  padding: 4px 8px;
}

.grade-summary {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-2);
}

/* Характеристики читаются как ячейки техлиста: единица измерения в подписи,
   под ней — только число. Подпись свободно переносится, число не сжимается. */
.specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

.specs > div {
  display: grid;
  gap: 2px;
  align-content: start;
}

.specs dt {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.35;
  color: var(--ink-2);
}

/* единица измерения не разрывается по косой черте */
.specs dt span {
  white-space: nowrap;
}

.specs dd {
  font-size: 1.05rem;
  font-weight: 500;
}

.grade-exec {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-2);
}

.grade-exec span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.scale {
  display: grid;
  gap: 6px;
}

.scale-track {
  position: relative;
  display: block;
  height: 6px;
  background: var(--sunk);
  border: 1px solid var(--line);
}

/* метка одинаковой ширины во всех карточках; сдвиг на половину ширины
   ставит её центр ровно в нужную точку шкалы */
.scale-track i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14px;
  transform: translateX(-50%);
  background: var(--wire);
}

.scale-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-2);
}

.grade-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: end;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

.grade-foot .btn {
  /* когда цена и кнопка не помещаются в строку, кнопка занимает всю ширину */
  flex: 1 0 auto;
}

.price {
  display: grid;
  gap: 2px;
}

.price-value {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.price-pending {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-2);
}

/* Условие, при котором цена действует. Без него «от 4 430 ₽» —
   обещание, которое рассыпается в первом же письме закупщику. */
.price-tier {
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--ink-2);
}

/* ------------------------------------------------------- ступени по объёму */

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line);
}

.tiers li {
  display: grid;
  gap: 4px;
  padding: var(--s3) var(--s2);
  background: var(--paper);
}

.tiers b {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.tiers-note {
  font-size: 0.85rem;
  color: var(--ink-2);
}

/* Скидка следующей ступени — статус, а не украшение: она несёт
   единственную мысль полосы, поэтому берёт акцент. */
.tiers li + li .tiers-note {
  color: var(--wire-text);
}

/* --------------------------------------------------- позиции ППС в каталоге */

/* Быстрый переход к марке: закупщик приходит с готовой спецификацией. */
.jump-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
  margin-bottom: var(--s5);
}

.jump {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s1);
  min-height: 44px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.jump b {
  font-weight: 600;
}

.jump span {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-2);
}

.jump:hover {
  border-color: var(--wire);
  color: var(--wire-text);
}

.jump:hover span {
  color: var(--wire-text);
}

.pps-group + .pps-group {
  margin-top: var(--s6);
}

.pps-group-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-2);
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}

.pps-group-head h3 {
  display: inline;
  margin: 0 var(--s2) 0 0;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
}

.pps-group-uses {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--print);
  background: var(--print-soft);
  padding: 4px 8px;
}

.pps-group-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1) var(--s2);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}

.pps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--s2);
}

/* Карточка позиции. Лестница цен прижата к низу, а карточки в ряду
   равной высоты — поэтому цены стоят на одной линии и сравниваются
   взглядом, сколько бы ни занимала подпись выше. */
.pps {
  display: flex;
  flex-direction: column;
  padding: var(--s2);
  background: var(--paper);
  border: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + var(--s3));
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pps:hover {
  border-color: var(--line-2);
  transform: translateY(-4px);
}

.pps-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--s1);
  align-items: baseline;
  justify-content: space-between;
}

.pps-name {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.pps-grade {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.pps-density {
  margin: 0;
  padding-top: var(--s1);
  font-size: 0.95rem;
}

.pps-density span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  display: block;
}

.pps-note {
  margin: 0;
  padding-top: var(--s1);
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-2);
}

/* Лестница цен: подпись слева, число справа, шрифт моно —
   три числа читаются столбиком и сравниваются без пересчёта. */
.pps-tiers {
  display: grid;
  gap: 4px;
  margin: auto 0 0;
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

.pps-tiers-head,
.pps-tier {
  display: flex;
  gap: var(--s1);
  align-items: baseline;
  justify-content: space-between;
}

.pps-tiers-head dt,
.pps-tiers-head dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.pps-tier dt {
  font-size: 0.85rem;
  color: var(--ink-2);
}

.pps-tier dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}

/* Нижняя ступень — то самое число, которое стоит под «Цена от» в карточке
   марки и на плитке выбора. Акцент на нём, чтобы пришедший по «от 2 350»
   находил эти же 2 350, а не искал их среди трёх одинаковых строк. */
.pps-tier:last-child dd {
  font-size: 1.15rem;
  color: var(--wire-text);
}

.pps-cta {
  width: 100%;
  margin-top: var(--s2);
}

/* ------------------------------------------------------- подбор по задаче */

.use-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s3);
}

.use-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.use-card:hover {
  border-color: var(--wire);
  transform: translateY(-4px);
  color: var(--ink);
}

.use-media {
  display: block;
  flex: 0 0 auto;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--sunk);
}

.use-media img {
  width: 100%;
  height: 150px;
  object-fit: cover;
}

/* тянется на всю высоту карточки — иначе строка с маркой не прижимается
   к низу и встаёт на разной высоте при описаниях разной длины */
.use-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--s1);
  padding: var(--s2);
}

.use-body b {
  font-size: 1.1rem;
}

.use-text {
  font-size: 0.92rem;
  color: var(--ink-2);
}

.use-grade {
  display: flex;
  gap: 0.5em;
  align-items: center;
  margin-top: auto;
  padding-top: var(--s1);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--wire-text);
}

.use-grade i {
  font-style: normal;
  transition: transform 0.2s ease;
}

.use-card:hover .use-grade i {
  transform: translateX(3px);
}

/* -------------------------------------------------- список материалов */

.link-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s1) var(--s2);
  align-items: baseline;
  padding: var(--s2);
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.link-row b {
  font-weight: 500;
}

.link-row span {
  grid-column: 1 / -1;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.link-row i {
  font-style: normal;
  color: var(--wire-text);
  transition: transform 0.2s ease;
}

.link-row:hover {
  background: var(--sunk);
  color: var(--ink);
}

.link-row:hover b {
  color: var(--wire-text);
}

.link-row:hover i {
  transform: translateX(3px);
}

/* -------------------------------------------------------------- плитки */

.tri-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s3);
}

.tile {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.tile:hover {
  border-color: var(--wire);
  transform: translateY(-4px);
  color: var(--ink);
}

.tile img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-bottom: 1px solid var(--line);
  background: var(--sunk);
}

.tile > div {
  padding: var(--s2);
}

.tile b {
  display: block;
  margin-bottom: 6px;
  font-size: 1.1rem;
}

.tile p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.tile-text > div {
  padding: var(--s3);
}

/* ------------------------------------------------------------- продукция */

.product-list {
  display: grid;
  gap: var(--s3);
}

.product {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: var(--s4);
  padding: var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + var(--s3));
}

.product-media img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.product-body h3 {
  margin-block: 6px var(--s1);
  font-size: 1.4rem;
}

.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--print);
  background: var(--print-soft);
  padding: 4px 8px;
}

/* ---------------------------------------------------------------- фотополоса */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s3);
}

.shots figure {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
}

.shots img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  background: var(--sunk);
}

.shots figcaption {
  flex: 1;
  padding: 10px var(--s2);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------- документы */

.doc-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.doc-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: var(--s2);
  align-items: center;
  padding: var(--s2);
  background: var(--paper);
}

.doc-glyph {
  width: 40px;
  height: 50px;
  border: 1px solid var(--line-2);
  background:
    linear-gradient(var(--line-2), var(--line-2)) 7px 12px / 18px 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 7px 18px / 25px 1px no-repeat,
    linear-gradient(var(--line-2), var(--line-2)) 7px 24px / 21px 1px no-repeat,
    linear-gradient(var(--wire), var(--wire)) 7px 35px / 13px 3px no-repeat,
    var(--paper);
}

.doc-main b {
  display: block;
  font-weight: 500;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-2);
}

.doc-status.is-valid {
  color: var(--print);
}

/* ---------------------------------------------------------------- диалог */

.doc-dialog {
  width: min(94vw, 900px);
  padding: var(--s2);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

.doc-dialog::backdrop {
  background: var(--overlay);
}

.doc-dialog img {
  width: 100%;
  height: auto;
  margin-bottom: var(--s2);
}

.doc-dialog p {
  margin: 0;
  padding-right: var(--s5);
  font-size: 0.92rem;
  color: var(--ink-2);
}

.dialog-close {
  position: absolute;
  top: var(--s2);
  right: var(--s2);
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  line-height: 1;
  background: var(--paper);
  border: 1px solid var(--line-2);
  cursor: pointer;
}

.dialog-close:hover {
  border-color: var(--wire);
  color: var(--wire-text);
}

/* --------------------------------------------------- заголовок внутренней */

.page-head {
  padding-block: var(--s5);
  background: var(--paper);
}

.page-head h1 {
  margin-block: var(--s2) var(--s2);
}

.page-head .lead {
  max-width: 54ch;
  margin: 0;
}

/* ----------------------------------------------------- статьи и боковая навигация */

.doc-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--s6);
  align-items: start;
}

.side-nav {
  position: sticky;
  top: calc(var(--header-h) + var(--s2));
  padding: var(--s2);
  background: var(--paper);
  border: 1px solid var(--line);
}

.side-nav ul {
  list-style: none;
  margin: var(--s1) 0 0;
  padding: 0;
}

.side-nav li {
  margin: 0;
}

.side-nav a {
  display: block;
  padding: 9px var(--s1);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.93rem;
  border-left: 2px solid transparent;
}

.side-nav a:hover {
  background: var(--sunk);
  color: var(--wire-text);
}

.side-nav a.active {
  border-left-color: var(--wire);
  color: var(--wire-text);
  font-weight: 500;
}

.article {
  max-width: 72ch;
}

.article h2 {
  margin-top: var(--s5);
  font-size: 1.5rem;
}

.article h2:first-child {
  margin-top: 0;
}

.article-image {
  width: 100%;
  height: auto;
  margin-bottom: var(--s3);
  border: 1px solid var(--line);
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.feature-list li {
  margin: 0;
  padding: var(--s2);
  background: var(--paper);
}

.feature-list b {
  display: block;
  margin-bottom: 4px;
}

.feature-list span {
  font-size: 0.92rem;
  color: var(--ink-2);
}

/* --------------------------------------------------------------- таблицы */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  background: var(--paper);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.data-table th,
.data-table td {
  padding: 12px var(--s2);
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table th {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  background: var(--sunk);
}

.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th {
  border-bottom: 0;
}

.data-table td:first-child {
  white-space: normal;
}

/* ------------------------------------------------------------ прайс-таблица */

/* Числа в колонку — правое выравнивание и моноширинные цифры:
   разряды встают друг под друга и цены сравниваются без чтения. */
.price-table .num,
.price-table th.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.price-table th.num {
  font-size: 0.72rem;
}

/* Объединяющая шапка ступеней: подпись относится к трём колонкам сразу. */
.price-table .pt-span {
  text-align: center;
  border-bottom: 1px solid var(--line-2);
}

/* Марка объединяет свои позиции — как в бумажном прайсе завода. */
.price-table .pt-mark {
  vertical-align: top;
  white-space: nowrap;
  background: var(--sunk);
  border-right: 1px solid var(--line);
  font-family: var(--font-text);
  font-size: 1rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
}

.price-table .pt-mark a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--line-2);
}

.price-table .pt-mark a:hover {
  color: var(--wire-text);
  border-color: currentColor;
}

.price-table .pt-pos {
  font-family: var(--font-text);
  font-size: 0.94rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: transparent;
}

.price-table .pt-pos b {
  font-family: var(--font-mono);
  font-weight: 600;
}

.price-table .pt-pos span {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-2);
}

.price-table .pt-unit {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-2);
}

.price-table .price-pending {
  font-family: var(--font-text);
  font-size: 0.85rem;
}

/* Граница между марками — линия темнее строчной: группа читается
   как блок. У первой группы её нет, иначе она удвоит линию шапки. */
.price-table tbody tr:has(.pt-mark):not(:first-child) > * {
  border-top: 1px solid var(--line-2);
}

/* ------------------------------------------------------------------ формы */

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-size: 0.88rem;
  color: var(--ink-2);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: 0;
}

.field textarea {
  min-height: 110px;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--wire);
  outline: 2px solid var(--wire);
  outline-offset: 1px;
}

.field input[aria-invalid="true"] {
  border-color: var(--wire);
  background: var(--wire-soft);
}

.hint {
  font-size: 0.84rem;
  color: var(--ink-2);
}

.field-error {
  display: none;
  font-size: 0.84rem;
  color: var(--wire-text);
}

.field-error.visible {
  display: block;
}

.req-mark {
  color: var(--wire-text);
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s2);
}

.field-wide {
  grid-column: 1 / -1;
}

.calc {
  padding: var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
}

.calc-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

.calc-result {
  flex: 1 1 260px;
  padding: 12px var(--s2);
  background: var(--sunk);
  font-size: 0.95rem;
}

.calc-result b {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-variant-numeric: tabular-nums;
  color: var(--wire-text);
}

/* --------------------------------------------------------------- заявка */

.request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--s5);
  align-items: start;
}

.request fieldset {
  margin: 0 0 var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  background: var(--paper);
}

.request legend {
  padding-inline: var(--s1);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-2);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s1);
}

/* Выбор задачи — настоящие радиокнопки в оболочке ярлыка: работают
   и без JavaScript, и с клавиатуры. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--line-2);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* Кружок рисуем сами. Браузерный по умолчанию красится системным акцентом
   (в тёмной теме — фиолетовым), который не имеет отношения к палитре сайта.
   Точка задана фоном-градиентом, а не псевдоэлементом: у полей ввода
   псевдоэлементы поддерживаются не везде. */
.pill input {
  appearance: none;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.pill:hover input {
  border-color: var(--wire);
}

.pill input:checked {
  border-color: var(--wire);
  background: var(--paper) radial-gradient(circle at center, var(--wire) 4.5px, transparent 4.5px) no-repeat;
}

.pill:hover {
  border-color: var(--wire);
}

.pill:has(input:checked) {
  border-color: var(--wire);
  background: var(--wire-soft);
  color: var(--wire-text);
  font-weight: 500;
}

.pill:has(input:focus-visible) {
  outline: 2px solid var(--wire);
  outline-offset: 2px;
}

/* Ловушка для роботов: поле не видно человеку и недоступно с клавиатуры,
   но остаётся в разметке — автозаполнялки ботов его находят и выдают себя. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.request-foot {
  display: grid;
  gap: var(--s2);
}

.request-foot .hint {
  max-width: var(--measure);
}

.form-status {
  margin-top: var(--s3);
  padding: var(--s3);
  background: var(--print-soft);
  border-left: 3px solid var(--print);
}

.form-status b {
  display: block;
  margin-bottom: var(--s1);
}

.form-status .btn {
  margin-top: var(--s2);
}

.request-side {
  display: grid;
  gap: var(--s2);
}

.side-card {
  display: grid;
  gap: var(--s1);
  padding: var(--s3);
  background: var(--paper);
  border: 1px solid var(--line);
}

.side-phone {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
}

.side-phone:hover,
.side-mail:hover {
  color: var(--wire-text);
}

.side-mail {
  color: var(--ink);
  text-decoration: none;
}

.side-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-2);
}

.side-card .ticks {
  margin: 0;
}

/* -------------------------------------------------------------- контакты */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s6);
  align-items: center;
}

.split-reverse .split-media {
  order: -1;
}

.split-media img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.map-embed {
  display: grid;
  gap: var(--s1);
}

/* Место под карту зарезервировано пропорцией: виджет грузится позже
   и не сдвигает соседний текст. */
.map-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
  background: var(--sunk);
}

.contact-list {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.contact-list > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: var(--s2);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}

.contact-list dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  padding-top: 3px;
}

.req dl {
  display: grid;
  gap: 6px;
  margin-top: var(--s1);
}

.req dl > div {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 0.9rem;
}

.req dt {
  color: var(--ink-2);
}

.map-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}

.map-figure figcaption {
  margin-top: var(--s1);
  font-size: 0.88rem;
  color: var(--ink-2);
}

/* -------------------------------------------------------- контактная полоса */

.contact-band {
  background: var(--invert-bg);
  color: var(--invert-fg);
  border-top: 0;
}

.contact-band .label {
  color: color-mix(in srgb, var(--invert-fg) 65%, transparent);
}

.contact-band h2 {
  margin-block: var(--s1) var(--s2);
}

.contact-band p {
  color: color-mix(in srgb, var(--invert-fg) 78%, transparent);
}

.contact-band-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

.contact-band-side {
  display: grid;
  gap: var(--s1);
  justify-items: start;
}

.contact-phone {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  color: var(--invert-fg);
  text-decoration: none;
}

.contact-mail {
  color: var(--invert-fg);
}

.contact-phone:hover,
.contact-mail:hover {
  color: var(--wire);
}

.contact-address {
  margin-block: var(--s1);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------- новости */

.news-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.news-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: var(--s3);
  padding: var(--s3);
  background: var(--paper);
}

.news-row time {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--wire-text);
}

.news-row h3 {
  margin-bottom: 6px;
  font-size: 1.1rem;
}

.news-row p {
  margin: 0;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------- 404 */

.not-found {
  border-top: 0;
  padding-block: var(--s7);
  text-align: center;
}

.not-found .lead,
.not-found p {
  margin-inline: auto;
}

.not-found .band-actions {
  justify-content: center;
}

/* ---------------------------------------------------------------- подвал */

.site-footer {
  padding-block: var(--s5) var(--s3);
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.footer-col {
  display: grid;
  gap: 6px;
  align-content: start;
}

.footer-col a {
  color: var(--ink);
  text-decoration: none;
  width: fit-content;
}

.footer-col a:hover {
  color: var(--wire-text);
}

.footer-col .btn {
  margin-top: var(--s1);
}

.footer-col p {
  font-size: 0.92rem;
  color: var(--ink-2);
}

.footer-brand {
  font-size: 1.05rem;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  justify-content: space-between;
  padding-top: var(--s3);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ink-2);
}

.footer-bottom a {
  color: var(--ink-2);
}

/* ----------------------------------------------------------------- адаптив */

@media (max-width: 1040px) {
  .hero-grid,
  .split,
  .contact-band-grid,
  .request-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s4);
  }

  .split-reverse .split-media {
    order: 0;
  }

  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s3);
  }

  .side-nav {
    position: static;
  }

  .side-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .side-nav a {
    border: 1px solid var(--line);
    border-left-width: 2px;
  }
}

@media (max-width: 900px) {
  .menu-toggle {
    display: inline-flex;
  }

  .header-phone {
    display: none;
  }

  .main-nav {
    position: fixed;
    z-index: 39;
    inset: var(--header-h) 0 auto 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: var(--s2);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }

  body.nav-open .main-nav {
    display: flex;
  }

  .main-nav a {
    padding: 14px var(--s1);
    border-bottom: 1px solid var(--line);
  }

  .main-nav a::after {
    display: none;
  }

  .band-head {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
    align-items: start;
  }

  .product {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s2);
  }

  .product-media img {
    max-width: 250px;
  }
}

@media (max-width: 640px) {
  :root {
    --s6: 48px;
    --s7: 64px;
  }

  .shell {
    width: min(100% - var(--s3), var(--shell));
  }

  .brand-text small {
    display: none;
  }

  .doc-row {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .doc-row .btn {
    grid-column: 2;
    justify-self: start;
  }

  .contact-list > div,
  .news-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .hero {
    padding-block: var(--s4) var(--s4);
  }
}

/* -------------------------------------------------------------- движение */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}