/* Страница /catalog: одна страница, три секции. Карточка — фото товара как
   есть (со скруглёнными углами, без вырезки фона) и подпись под ним.
   Оборудование — на чёрном, как блок 5 главной. */

/* ---------- первый экран: только H1 ---------- */
.cp-head { padding-top: 144px; }
.cp-h1 {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(56px, 10vw, 144px);
  line-height: .95;
  letter-spacing: -.01em;
}

/* ---------- плашка разделов: под шапкой, плашка переезжает к текущему ---------- */
.jump { position: sticky; top: 88px; z-index: 40; margin-top: 32px; pointer-events: none; }
.jump-in {
  pointer-events: auto;
  position: relative;
  width: max-content;
  max-width: 100%;
  padding: 4px;
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 999px;
  background: rgb(233 235 238 / .8);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  transition: background 250ms var(--ease);
}
.jump-ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 100%;
  background: #fff;
  clip-path: inset(0 100% 0 0 round 999px);
  transition: background 250ms var(--ease);
}
.jump.is-ready .jump-ind { transition: clip-path 250ms var(--ease), background 250ms var(--ease); }
.jump-a {
  position: relative;
  height: 44px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--muted);
  transition: color 150ms var(--ease);
}
.jump-a:hover, .jump-a[aria-current] { color: var(--ink); }
.jump-n { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--muted); }
.jump.on-dark .jump-in { background: rgb(28 28 28 / .72); }
.jump.on-dark .jump-ind { background: rgb(244 244 244 / .14); }
.jump.on-dark .jump-a { color: var(--night-muted); }
.jump.on-dark .jump-a:hover, .jump.on-dark .jump-a[aria-current] { color: var(--night-ink); }
.jump.on-dark .jump-n { color: var(--night-muted); }

/* ---------- секции ---------- */
.sec { padding-top: 128px; scroll-margin-top: 144px; }
.sec:first-of-type { padding-top: 64px; }
.sec:last-of-type { padding-bottom: 128px; }
.sec-h {
  max-width: 14em;
  margin-bottom: 48px;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: var(--display-stretch);
  font-size: clamp(32px, 4.6vw, 64px);
  line-height: 1.04;
  letter-spacing: -.01em;
}

/* оборудование — на чёрном */
.sec-equipment {
  --line: var(--night-line);
  margin-top: 128px;
  padding: 128px 0;
  background: var(--night);
  color: var(--night-ink);
}
.sec-equipment + .sec { padding-top: 128px; }

/* ---------- сетка ---------- */
.row { display: grid; grid-template-columns: repeat(var(--cap), minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: 24px; }
.row + .row { margin-top: 64px; }
.grp-name {
  grid-row: 1;
  grid-column: span var(--n);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.item { grid-row: 2; min-width: 0; display: flex; flex-direction: column; }

/* фото — как загружено: квадрат, фото целиком внутри, белый фон, скругление */
.it-photo { display: block; aspect-ratio: 1; overflow: hidden; border-radius: 16px; background: #fff; }
.it-photo .ph { transition: transform 250ms var(--ease), opacity 250ms var(--ease), filter 250ms var(--ease); }
.item:hover .it-photo .ph { transform: scale(1.03); }
.it-photo .ph-none { border-radius: 16px; background: var(--surface); }

/* ---------- подпись ---------- */
.it-tag { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; }
.it-top { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; color: var(--muted); font-variant-numeric: tabular-nums; }
.it-stock { display: inline-flex; align-items: center; gap: 6px; }
.it-stock:not(:empty)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.item[data-state="in"] .it-stock { color: var(--ink); }
.item[data-state="out"] .it-stock::before { background: none; border: 1px dashed currentColor; width: 8px; height: 8px; }
.it-kind { margin-bottom: -6px; font-size: 14px; line-height: 20px; color: var(--muted); }
.it-name {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: 112%;
  font-size: 22px;
  line-height: 1.15;
}
.it-name a { transition: color 150ms var(--ease); }
.it-name a:hover { color: var(--red); }
.it-purpose { font-size: 15px; line-height: 1.45; color: var(--muted); }
.it-pass { font-size: 14px; line-height: 20px; }
.it-pass:empty { display: none; }
.it-pass b { font-size: 17px; font-weight: 600; line-height: 24px; }
.it-muted { color: var(--muted); }
.tbd { color: var(--muted); border-bottom: 1px dashed currentColor; }
.it-opts { margin-top: 4px; }
.it-legend { display: flex; gap: 6px; margin-bottom: 4px; padding: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
.it-legend-v { color: var(--ink); }
.it-legend-v:not(:empty)::before { content: "· "; color: var(--muted); }
.it-hint { font-size: 14px; font-weight: 500; line-height: 20px; color: var(--red); }
.it-hint:empty { display: none; }
.it-buy { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.it-price {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: 100%;
  font-size: 20px;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.it-price.is-text { font-family: var(--font-body); font-size: 15px; font-weight: 500; }
.item[data-state="out"] .it-price { color: var(--muted); }

/* ---------- скидки от объёма: линейка, на ней — смолы в корзине ---------- */
.disc { margin-top: 96px; max-width: 880px; }
.disc-h { font-size: 20px; font-weight: 600; line-height: 28px; }
.disc-scale { position: relative; height: 92px; margin-top: 16px; }
.disc-list li {
  position: absolute;
  top: 0;
  left: calc(var(--x) * 100%);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
}
.disc-list b { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--muted); }
.disc-list span {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-stretch: 100%;
  font-size: 28px;
  line-height: 36px;
  transition: color 250ms var(--ease);
}
.disc-list li::after { content: ""; width: 2px; height: 16px; margin-top: 6px; background: var(--muted); transition: background 250ms var(--ease); }
.disc-list li.on span { color: var(--red); }
.disc-list li.on::after { background: var(--red); }
.disc-track { position: absolute; left: 0; right: 0; bottom: 6px; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line); }
.disc-fill { position: absolute; inset: 0; background: var(--red); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; transition: transform 400ms var(--ease); }
.disc-now { margin-top: 12px; font-size: 15px; font-weight: 500; line-height: 22px; }
.disc-now:empty { display: none; }
.disc-note { margin-top: 8px; font-size: 15px; line-height: 22px; color: var(--muted); }

/* ---------- чёрная секция: подписи, кнопки, варианты ---------- */
.sec-equipment .grp-name,
.sec-equipment .it-top,
.sec-equipment .it-kind,
.sec-equipment .it-muted,
.sec-equipment .tbd,
.sec-equipment .it-legend,
.sec-equipment .item[data-state="out"] .it-price { color: var(--night-muted); }
.sec-equipment .item[data-state="in"] .it-stock,
.sec-equipment .it-legend-v { color: var(--night-ink); }
.sec-equipment .it-photo .ph-none { background: #161616; color: var(--night-muted); --ghost: #3a3a3a; }
.sec-equipment .buy-btn { background: var(--night-ink); border-color: var(--night-ink); color: var(--ink); }
.sec-equipment .buy-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.sec-equipment .buy-btn[aria-disabled="true"]:hover { background: var(--night-ink); border-color: var(--night-ink); color: var(--ink); }
.sec-equipment .buy-btn.is-alt { background: transparent; color: var(--night-ink); }
.sec-equipment .buy-btn.is-alt:hover { border-color: var(--red); color: #fff; background: var(--red); }
.sec-equipment .stepper { border-color: var(--night-ink); }
.sec-equipment .chip:hover .chip-face { border-color: var(--night-muted); }
.sec-equipment .chip input:checked + .chip-face { border-color: var(--night-ink); box-shadow: inset 0 0 0 1px var(--night-ink); }
.sec-equipment .chip.is-out .chip-face { color: var(--night-muted); }
.sec-equipment .chips.need .chip-face { border-color: var(--red); }

/* ---------- ширины ---------- */
@media (max-width: 899px) {
  .it-name { font-size: 20px; }
}
@media (max-width: 767px) {
  .cp-head { padding-top: 120px; }
  .jump { margin-top: 24px; }
  .jump-a { padding: 0 16px; font-size: 15px; }
  .sec { padding-top: 96px; scroll-margin-top: 140px; }
  .sec:first-of-type { padding-top: 48px; }
  .sec-h { margin-bottom: 32px; }
  .row + .row { margin-top: 48px; }
  .sec-equipment { margin-top: 96px; padding: 96px 0; }
  .sec-equipment + .sec { padding-top: 96px; }
}
/* телефон: список — фото слева, подпись справа */
@media (max-width: 599px) {
  .jump-n { display: none; }
  .row.is-list { display: block; }
  .is-list .grp-name { margin: 40px 0 0; }
  .is-list .grp-name:first-child { margin-top: 0; }
  .is-list .item { display: grid; grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 24px 0; }
  .is-list .item + .item { border-top: 1px solid var(--line); }
  .is-list .it-photo { border-radius: 12px; }
  .is-list .it-tag { padding-top: 0; }
  .is-list .it-name { font-size: 20px; }
  .is-list .it-purpose { font-size: 14px; }
  .it-buy { flex-direction: column; align-items: flex-start; }
  .it-act, .it-act .buy-btn { max-width: 100%; }
  .it-act .buy-btn { white-space: normal; text-align: center; line-height: 1.2; }
  .disc-list span { font-size: 22px; line-height: 28px; }
  .disc-list b { font-size: 12px; }
}

/* Телефон: шкала шрифтов по эталонным сайтам (Stripe, Linear, Vercel: H1 24–38, H2 22–34, текст 15–16) — 18.10.2026 */
@media (max-width: 767px) {
  .cp-h1 { font-size: 34px; }
  .sec-h { font-size: 26px; }
  .it-name, .is-list .it-name, .disc-h { font-size: 18px; line-height: 24px; }
}