/* WINMER — концепт 2026. Светлая индустриальная система.
   Синий = сторона низкого давления (L), красный = высокого (H) — как колпачки сервисных портов.
   Синий отвечает за действия и фокус, красный живёт только в знаке бренда. */

:root {
  --paper: #ffffff;
  --sheet: #f3f4f6;
  --sheet-2: #e9ebee;
  --ink: #14171b;
  --ink-2: #4a515b;
  --ink-3: #7b828c;
  --line: #e1e4e8;
  --line-2: #cbd0d6;
  --cold: #1b4db1;
  --cold-ink: #163f93;
  --cold-tint: #edf2fb;
  --hot: #d7262e;
  --ok: #12704a;
  --ok-tint: #e8f4ee;
  --wait: #93570a;
  --wait-tint: #fbf2e2;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; /* цифры — Inter tabular-nums, без точек в нулях */

  --fs-11: 0.6875rem;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-44: 2.75rem;

  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;

  --wrap: 1360px;
  --gutter: 32px;
  --header-h: 76px;
  --pop: 0 16px 40px rgba(20, 23, 27, 0.12), 0 2px 6px rgba(20, 23, 27, 0.06);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 64px);
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-16)/1.5 var(--sans);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  max-width: 100vw;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; border-radius: var(--r-1); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.mono { font-family: var(--mono); font-feature-settings: normal; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Кнопки и поля ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px;
  border: 1px solid var(--line-2); border-radius: var(--r-2);
  background: var(--paper); color: var(--ink);
  font-size: var(--fs-14); font-weight: 600; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:hover { border-color: var(--ink-3); }
.btn--primary { background: var(--cold); border-color: var(--cold); color: #fff; }
.btn--primary:hover { background: var(--cold-ink); border-color: var(--cold-ink); }
.btn--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn--dark:hover { background: #2a2f36; border-color: #2a2f36; }
.btn--ghost { border-color: transparent; background: transparent; }
.btn--ghost:hover { background: var(--sheet); border-color: transparent; }
.btn--sm { height: 36px; padding: 0 12px; font-size: var(--fs-13); }
.btn--block { width: 100%; }
.btn[aria-pressed="true"] { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.btn svg { flex: none; }

.field {
  height: 44px; width: 100%; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--paper);
  font-size: var(--fs-14);
}
.field:focus { outline: none; border-color: var(--cold); box-shadow: 0 0 0 3px var(--cold-tint); }

.icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Статусы наличия ---------- */

.stock { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); font-weight: 600; white-space: nowrap; }
.stock::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.stock--ok { color: var(--ok); }
.stock--wait { color: var(--wait); }
.stock--ok .mono, .stock--wait .mono { font-weight: 500; }

.tag {
  display: inline-flex; align-items: center; height: 22px; padding: 0 7px;
  border: 1px solid var(--line-2); border-radius: var(--r-1);
  font-size: var(--fs-12); font-weight: 500; color: var(--ink-2); white-space: nowrap;
}
.tag--spec { font-family: var(--mono); font-size: var(--fs-11); color: var(--ink); background: var(--sheet); border-color: var(--sheet); }
.tag--used { color: var(--wait); border-color: #e7cf9f; background: var(--wait-tint); }

/* ---------- Шапка ---------- */

.topbar { background: var(--sheet); font-size: var(--fs-13); color: var(--ink-2); }
.topbar__in { display: flex; align-items: center; gap: 24px; height: 36px; }
.topbar__in a:hover { color: var(--ink); }
.topbar__push { margin-left: auto; }
.topbar__phone { font-weight: 600; color: var(--ink); }

.header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.header__in { display: flex; align-items: center; gap: 20px; height: var(--header-h); }
.logo { flex: none; display: block; width: 132px; }
.logo img { width: 100%; height: auto; }
.header__search { flex: 1; max-width: 680px; }
.header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.header__actions .btn { height: 40px; }
.header-spacer { display: none; }
.cart-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--ink); color: #fff; font: 600 var(--fs-11)/20px var(--mono); text-align: center; }
.cart-count:empty, .cart-count[data-n="0"] { display: none; }

.catnav { border-bottom: 1px solid var(--line); background: var(--paper); }
.catnav__in { display: flex; align-items: stretch; gap: 28px; height: 48px; overflow-x: auto; scrollbar-width: none; }
.catnav__in::-webkit-scrollbar { display: none; }
.catnav a { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 500; white-space: nowrap; color: var(--ink-2); border-bottom: 2px solid transparent; }
.catnav a:hover, .catnav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
.catnav a .mono { font-size: var(--fs-12); color: var(--ink-3); }
.catnav__sep { width: 1px; background: var(--line); margin: 14px 0; }

/* ---------- Поиск ---------- */

.search { position: relative; }
.search__box {
  display: flex; align-items: center; height: 44px;
  border: 1px solid var(--line-2); border-radius: var(--r-2); background: var(--paper);
  transition: border-color .15s, box-shadow .15s;
}
.search__box:focus-within { border-color: var(--cold); box-shadow: 0 0 0 3px var(--cold-tint); }
.search__icon { margin: 0 4px 0 14px; color: var(--ink-3); }
.search__input {
  flex: 1; min-width: 0; height: 100%; padding: 0 8px;
  border: 0; background: transparent; outline: none;
  font-size: var(--fs-14);
}
.search__input::placeholder { color: var(--ink-3); }
.search__input::-webkit-search-cancel-button, .search__input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.header__search[data-deferred] { visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .2s, visibility 0s .2s; }
.header__search[data-deferred].is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .2s, transform .2s; }
.search__kbd { display: none !important; }
.search__clear { display: none; margin-right: 6px; padding: 6px; border: 0; background: none; color: var(--ink-3); border-radius: var(--r-1); }
.search__clear:hover { color: var(--ink); background: var(--sheet); }
.search--filled .search__clear { display: block; }
.search--filled .search__kbd { display: none; }
.search__submit { align-self: stretch; margin: 3px; height: auto; border-radius: 4px; }

.search--hero .search__box { height: 64px; border-width: 1.5px; border-color: var(--ink); border-radius: var(--r-3); }
.search--hero .search__box:focus-within { border-color: var(--cold); box-shadow: 0 0 0 4px var(--cold-tint); }
.search--hero .search__input { font: 500 var(--fs-20)/1 var(--mono); letter-spacing: -0.01em; padding-left: 12px; }
.search--hero .search__input::placeholder { font-family: var(--sans); font-size: var(--fs-16); font-weight: 400; letter-spacing: 0; }
.search--hero .search__icon { width: 24px; height: 24px; margin-left: 20px; color: var(--ink); }
.search--hero .search__submit { margin: 6px; padding: 0 24px; font-size: var(--fs-16); border-radius: 6px; }

.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
  display: none; max-height: min(70vh, 640px); overflow: auto;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-3); box-shadow: var(--pop);
}
.search--open .results { display: block; }
.results__head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-12); color: var(--ink-3); }
.results__row {
  display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 14px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
.results__row:last-of-type { border-bottom: 0; }
.results__row[aria-selected="true"], .results__row:hover { background: var(--sheet); }
.results__img { width: 48px; height: 48px; border-radius: var(--r-1); background: var(--sheet); object-fit: cover; }
.results__title { font-size: var(--fs-14); font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.results__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; font: 400 var(--fs-12)/1.4 var(--mono); color: var(--ink-3); }
.results__meta b { font-weight: 600; color: var(--ink); }
.results__price { font-size: var(--fs-14); font-weight: 600; text-align: right; white-space: nowrap; }
.results mark { background: #fde98b; color: inherit; border-radius: 2px; padding: 0 1px; }
.results__all { display: block; padding: 12px 16px; border-top: 1px solid var(--line); font-size: var(--fs-14); font-weight: 600; color: var(--cold); background: var(--paper); position: sticky; bottom: 0; }
.results__all:hover, .results__all[aria-selected="true"] { background: var(--cold-tint); }
.results__empty { padding: 20px 16px; font-size: var(--fs-14); color: var(--ink-2); }
.results__empty p + p { margin-top: 6px; }
.results__empty a { color: var(--cold); font-weight: 600; }

/* ---------- Главная: первый экран ---------- */

.hero { padding: 56px 0 64px; border-bottom: 1px solid var(--line); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.hero__title { font-size: var(--fs-44); line-height: 1.08; font-weight: 650; letter-spacing: -0.03em; max-width: 19ch; text-wrap: balance; }
.hero__lead { margin-top: 18px; max-width: 56ch; font-size: var(--fs-16); color: var(--ink-2); }
.hero__search { margin-top: 32px; }
.hero__try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; margin-top: 14px; font-size: var(--fs-13); color: var(--ink-3); }
.hero__try span { margin-right: 6px; }
.hero__try button { padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--r-1); background: var(--paper); font: 500 var(--fs-12)/1.5 var(--mono); color: var(--ink-2); }
.hero__try button:hover { border-color: var(--ink-3); color: var(--ink); }

.depot { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.depot__head { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.depot__head h2 { font-size: var(--fs-16); font-weight: 600; }
.depot__head p { font-size: var(--fs-12); color: var(--ink-3); }
.depot table { font-size: var(--fs-14); }
.depot th, .depot td { padding: 12px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.depot th { font-size: var(--fs-12); font-weight: 500; color: var(--ink-3); }
.depot td + td, .depot th + th { text-align: right; }
.depot tbody tr:last-child td { border-bottom: 0; }
.depot tfoot td { background: var(--sheet); font-weight: 600; border-bottom: 0; }
.depot__notes { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.depot__notes div { padding: 14px 20px; font-size: var(--fs-13); color: var(--ink-2); }
.depot__notes div + div { border-left: 1px solid var(--line); }
.depot__notes b { display: block; color: var(--ink); font-size: var(--fs-14); }

/* ---------- Секции ---------- */

.section { padding: 64px 0; }
.section + .section { border-top: 1px solid var(--line); }
.section--sheet { background: var(--sheet); }
.section__head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.section__title { font-size: var(--fs-32); line-height: 1.15; font-weight: 650; letter-spacing: -0.025em; }
.section__sub { margin-top: 8px; color: var(--ink-2); max-width: 60ch; }
.link { color: var(--cold); font-weight: 600; font-size: var(--fs-14); white-space: nowrap; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Категории: технический лист из ячеек с общими линиями */
.cats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--line); gap: 1px; }
.cat { display: flex; flex-direction: column; background: var(--paper); padding: 20px; transition: background-color .15s; }
.cat:hover { background: #fafbfc; }
.cat__img { aspect-ratio: 4 / 3; margin: -4px -4px 18px; border-radius: var(--r-2); background: var(--sheet); overflow: hidden; }
.cat__img img { width: 100%; height: 100%; object-fit: cover; }
.cat__name { font-size: var(--fs-20); font-weight: 600; letter-spacing: -0.015em; }
.cat__desc { margin-top: 6px; font-size: var(--fs-14); color: var(--ink-2); flex: 1; }
.cat__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-12); color: var(--ink-3); }
.cat__facts b { display: block; margin-top: 2px; font: 500 var(--fs-14)/1.3 var(--mono); color: var(--ink); }

/* Указатель марок */
.makes__tools { display: flex; gap: 12px; align-items: center; }
.makes__tools .field { width: 280px; }
.makes { columns: 6 170px; column-gap: 32px; }
.makes__letter { break-inside: avoid; margin-bottom: 18px; }
.makes__letter h3 { font: 600 var(--fs-12)/1 var(--mono); color: var(--ink-3); padding-bottom: 8px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.makes__letter a { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: var(--fs-14); }
.makes__letter a:hover { color: var(--cold); }
.makes__letter a .mono { font-size: var(--fs-12); color: var(--ink-3); }
.makes__empty { color: var(--ink-3); font-size: var(--fs-14); }

/* Условия */
.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.terms dt { font-size: var(--fs-16); font-weight: 600; }
.terms dd { margin-top: 8px; font-size: var(--fs-14); color: var(--ink-2); max-width: 34ch; }
.terms__fig { display: block; margin-bottom: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); font-size: var(--fs-24); line-height: 1.1; font-weight: 650; letter-spacing: -0.02em; }

/* ---------- Табы-сегменты ---------- */

.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-2); background: var(--sheet); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg button { height: 32px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; font-size: var(--fs-13); font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 2px rgba(20, 23, 27, .08), 0 0 0 1px var(--line); }

/* ---------- Список товаров (строки) ---------- */

.plist { container: plist / inline-size; border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; background: var(--paper); }
.plist__head, .prow {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) 104px 160px 128px 104px 124px;
  gap: 18px; align-items: center; padding: 14px 20px;
}
@container plist (max-width: 1080px) {
  .plist__head, .prow { grid-template-columns: 60px minmax(0, 1fr) 92px 140px 120px 92px 116px; gap: 14px; padding-left: 16px; padding-right: 16px; }
}
@container plist (max-width: 860px) {
  .plist__head, .prow { grid-template-columns: 60px minmax(0, 1fr) 92px 120px 92px 116px; }
  .plist__head span:nth-child(4), .prow__oem { display: none; }
  .plist__head span:nth-child(6) { text-align: left; }
}
@container plist (max-width: 620px) {
  .plist__head { display: none; }
  .prow { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img main main" "img sku price" "stock stock buy"; gap: 8px 14px; padding: 14px; }
  .prow__img { grid-area: img; height: 72px; align-self: start; }
  .prow__main { grid-area: main; }
  .prow__sku { grid-area: sku; }
  .prow__sku small { display: none; }
  .prow__stock { grid-area: stock; display: flex; gap: 10px; align-items: baseline; }
  .prow__stock small { margin: 0; }
  .prow__price { grid-area: price; }
  .prow__buy { grid-area: buy; }
  .prow__buy .btn { height: 38px; }
  .prow__fit { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
}
.plist__head { padding-top: 10px; padding-bottom: 10px; background: var(--sheet); border-bottom: 1px solid var(--line); font-size: var(--fs-12); color: var(--ink-3); }
.plist__head span:nth-child(6) { text-align: right; }
.prow { border-bottom: 1px solid var(--line); }
.prow:last-child { border-bottom: 0; }
.prow:hover { background: #fafbfc; }
.prow__img { width: 100%; height: 60px; border-radius: var(--r-2); background: var(--sheet); overflow: hidden; }
.prow__img img { width: 100%; height: 100%; object-fit: cover; }
.prow__title { font-size: var(--fs-14); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.prow__title:hover { color: var(--cold); }
.prow__fit { margin-top: 3px; font-size: var(--fs-13); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.prow__sku { font: 600 var(--fs-13)/1.3 var(--mono); }
.prow__sku small { display: block; font-weight: 400; color: var(--ink-3); font-size: var(--fs-11); margin-top: 2px; }
.prow__oem { font: 400 var(--fs-12)/1.55 var(--mono); color: var(--ink-2); }
.prow__oem span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow__oem em { font-style: normal; color: var(--ink-3); }
.prow__stock small { display: block; margin-top: 3px; white-space: nowrap; font: 400 var(--fs-11)/1.3 var(--mono); color: var(--ink-3); }
.prow__price { text-align: right; font-size: var(--fs-16); font-weight: 650; white-space: nowrap; }
.prow__buy .btn { width: 100%; }

/* ---------- Сетка карточек ---------- */

.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.pcard { display: flex; flex-direction: column; padding: 16px; background: var(--paper); }
.pcard__img { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-2); background: var(--sheet); overflow: hidden; margin-bottom: 14px; }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__top { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; font: 600 var(--fs-12)/1.4 var(--mono); }
.pcard__title { font-size: var(--fs-14); font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pcard__title:hover { color: var(--cold); }
.pcard__oem { margin-top: 6px; font: 400 var(--fs-12)/1.4 var(--mono); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; }
.pcard__price { font-size: var(--fs-20); font-weight: 650; letter-spacing: -0.01em; }
.pcard__stock { margin-top: 10px; }

/* ---------- Каталог ---------- */

.crumbs { display: flex; flex-wrap: wrap; gap: 6px; padding: 20px 0 0; font-size: var(--fs-13); color: var(--ink-3); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { color: var(--line-2); }

.page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px; padding: 12px 0 24px; }
.page-head h1 { font-size: var(--fs-32); line-height: 1.15; font-weight: 650; letter-spacing: -0.025em; }
.page-head p { margin-top: 6px; color: var(--ink-2); font-size: var(--fs-14); }

.catalog { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; align-items: start; padding-bottom: 80px; }

.filters { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; padding-right: 6px; scrollbar-width: thin; }
.filters__head { display: none; }
.fgroup { padding: 16px 0; border-bottom: 1px solid var(--line); }
.fgroup:first-child { padding-top: 0; }
.fgroup h3 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: var(--fs-14); font-weight: 600; }
.fgroup h3 small { font-weight: 400; font-size: var(--fs-11); color: var(--ink-3); }
.fopt { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: var(--fs-14); cursor: pointer; }
.fopt input { width: 16px; height: 16px; margin: 0; accent-color: var(--cold); flex: none; }
.fopt span:first-of-type { flex: 1; }
.fopt .mono { font-size: var(--fs-12); color: var(--ink-3); }
.fopt--off { opacity: .4; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { height: 30px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-1); background: var(--paper); font: 500 var(--fs-12)/1 var(--mono); }
.fchip:hover { border-color: var(--ink-3); }
.fchip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.fmore { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--cold); font-size: var(--fs-13); font-weight: 600; }
.fgroup .field { height: 36px; margin-bottom: 8px; font-size: var(--fs-13); }
.fnote { margin-top: 10px; font-size: var(--fs-12); color: var(--ink-3); line-height: 1.45; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.toolbar__count { font-size: var(--fs-14); color: var(--ink-2); }
.toolbar__count b { color: var(--ink); font-family: var(--mono); font-weight: 600; }
.toolbar__push { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.toolbar select.field { width: auto; height: 38px; padding-right: 30px; }
.toolbar__filters { display: none; }

.active-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.active-filters:empty { display: none; }
.afchip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 10px; border-radius: var(--r-1); background: var(--cold-tint); color: var(--cold-ink); font-size: var(--fs-13); font-weight: 500; border: 0; }
.afchip svg { width: 14px; height: 14px; }
.afchip--reset { background: none; color: var(--ink-2); padding: 0 8px; }
.afchip--reset:hover { color: var(--ink); }

.more { display: flex; justify-content: center; margin-top: 24px; }
.empty { padding: 56px 24px; border: 1px dashed var(--line-2); border-radius: var(--r-3); text-align: center; }
.empty h2 { font-size: var(--fs-20); font-weight: 600; }
.empty p { margin: 8px auto 18px; max-width: 52ch; color: var(--ink-2); font-size: var(--fs-14); }

/* ---------- Карточка товара ---------- */

.product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; padding: 8px 0 56px; }
.gallery { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
.gallery__main { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-3); background: var(--paper); border: 1px solid var(--line); overflow: hidden; grid-column: 2; grid-row: 1; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; padding: 3%; }
.gallery__thumbs { display: flex; flex-direction: column; gap: 8px; grid-column: 1; grid-row: 1; }
.gallery__thumbs button { width: 72px; height: 72px; padding: 0; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--sheet); overflow: hidden; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 4px; }
.gallery__count { position: absolute; right: 12px; bottom: 12px; padding: 2px 8px; border-radius: var(--r-1); background: rgba(255, 255, 255, .9); font: 500 var(--fs-12)/1.6 var(--mono); color: var(--ink-2); }

.buy { position: sticky; top: calc(var(--header-h) + 20px); }
.buy__codes { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: var(--fs-13); color: var(--ink-3); }
.copy { display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px; margin: -2px -6px; border: 0; border-radius: var(--r-1); background: none; font: 600 var(--fs-13)/1.5 var(--mono); color: var(--ink); }
.copy:hover { background: var(--sheet); }
.copy svg { width: 14px; height: 14px; color: var(--ink-3); }
.copy[data-done] svg { color: var(--ok); }
.buy h1 { margin-top: 12px; font-size: var(--fs-24); line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; }
.buy__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.buy__keyspecs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r-2); }
.buy__keyspecs div { padding: 12px 14px; }
.buy__keyspecs div + div { border-left: 1px solid var(--line); }
.buy__keyspecs dt { font-size: var(--fs-12); color: var(--ink-3); }
.buy__keyspecs dd { margin-top: 2px; font: 600 var(--fs-16)/1.3 var(--mono); }
.buy__panel { margin-top: 22px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-3); }
.buy__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.buy__price strong { font-size: var(--fs-32); font-weight: 650; letter-spacing: -0.025em; }
.buy__row { display: flex; gap: 10px; margin-top: 16px; }
.qty { display: inline-flex; align-items: center; height: 44px; border: 1px solid var(--line-2); border-radius: var(--r-2); }
.qty button { width: 38px; height: 100%; border: 0; background: none; font-size: var(--fs-20); color: var(--ink-2); }
.qty button:hover { color: var(--ink); }
.qty input { width: 40px; height: 100%; border: 0; text-align: center; font: 600 var(--fs-14) var(--mono); outline: none; -moz-appearance: textfield; }
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; }
.buy__row .btn--primary { flex: 1; }
.wh { margin-top: 18px; font-size: var(--fs-13); }
.wh td { padding: 7px 0; border-top: 1px solid var(--line); }
.wh td:last-child { text-align: right; font-family: var(--mono); }
.wh tr:first-child td { border-top: 0; }
.wh .is-zero { color: var(--ink-3); }
.buy__help { margin-top: 16px; font-size: var(--fs-13); color: var(--ink-2); }
.buy__help a { color: var(--cold); font-weight: 600; }

.subnav { position: sticky; top: var(--header-h); z-index: 30; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.subnav__in { display: flex; gap: 28px; height: 52px; overflow-x: auto; scrollbar-width: none; }
.subnav a { display: flex; align-items: center; gap: 8px; font-size: var(--fs-14); font-weight: 500; color: var(--ink-2); border-bottom: 2px solid transparent; white-space: nowrap; }
.subnav a:hover, .subnav a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.subnav a .mono { font-size: var(--fs-12); color: var(--ink-3); }

.psec { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 32px; padding: 48px 0; border-bottom: 1px solid var(--line); }
.psec:last-of-type { border-bottom: 0; }
.psec__title { font-size: var(--fs-20); font-weight: 650; letter-spacing: -0.015em; }
.psec__aside { margin-top: 8px; font-size: var(--fs-13); color: var(--ink-3); max-width: 30ch; }

.specs { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
.specs table { font-size: var(--fs-14); }
.specs th, .specs td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.specs th { width: 42%; font-weight: 400; color: var(--ink-2); padding-right: 16px; }
.specs td { font-weight: 500; }
.specs td.mono { font-size: var(--fs-13); }
.specs .src { margin-left: 6px; font-size: var(--fs-11); font-weight: 400; color: var(--ink-3); }
.specs__gap { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-2); background: var(--sheet); font-size: var(--fs-13); color: var(--ink-2); }
.specs__gap b { color: var(--ink); }

.specs--single { grid-template-columns: minmax(0, 1fr); }
.specs__visuals { display: flex; flex-direction: column; gap: 16px; }
.pulley, .oil-card { margin: 0; border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px; background: #f8f9fb; }
.pulley svg, .oil-card svg { display: block; width: 100%; height: auto; }
.pulley figcaption, .oil-card figcaption { margin-top: 10px; font-size: var(--fs-12); color: var(--ink-3); line-height: 1.45; }
.pulley figcaption b, .oil-card figcaption b { font-family: var(--mono); color: var(--ink); font-weight: 600; }

.fit { font-size: var(--fs-14); }
#fit .muted { font-size: var(--fs-14); max-width: 70ch; }
.fit li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.fit li.fit__make { padding-top: 18px; font-weight: 600; border-bottom-color: var(--line-2); }
.fit li:first-child.fit__make { padding-top: 0; }

.oems { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); border: 1px solid var(--line); border-radius: var(--r-2); overflow: hidden; }
.oems li { box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.oems .copy { display: flex; justify-content: space-between; width: 100%; margin: 0; padding: 11px 14px; border-radius: 0; font-weight: 500; }
.oems__tools { display: flex; gap: 10px; margin-top: 14px; }

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

.footer { margin-top: 0; padding: 56px 0 28px; background: var(--sheet); border-top: 1px solid var(--line); font-size: var(--fs-14); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: 40px; }
.footer h2 { font-size: var(--fs-14); font-weight: 600; margin-bottom: 14px; }
.footer li + li { margin-top: 8px; }
.footer a { color: var(--ink-2); }
.footer a:hover { color: var(--ink); }
.footer__about { color: var(--ink-2); max-width: 36ch; }
.footer__about .logo { margin-bottom: 16px; }
.footer__legal { margin-top: 16px; font-size: var(--fs-12); color: var(--ink-3); line-height: 1.6; }
.footer__phone { font-size: var(--fs-16); font-weight: 600; color: var(--ink) !important; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-2); font-size: var(--fs-12); color: var(--ink-3); }
.footer__bottom nav { display: flex; flex-wrap: wrap; gap: 20px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 16px); opacity: 0; padding: 12px 16px; border-radius: var(--r-2); background: var(--ink); color: #fff; font-size: var(--fs-14); box-shadow: var(--pop); transition: opacity .2s, transform .2s; pointer-events: none; }
.toast--show { opacity: 1; transform: translate(-50%, 0); }

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

@media (max-width: 1200px) {
  .cats { grid-template-columns: repeat(2, 1fr); }
  .terms { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .catalog { grid-template-columns: 1fr; }
  .filters {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(360px, 88vw); max-height: none; padding: 0 20px 24px;
    background: var(--paper); box-shadow: var(--pop); transform: translateX(-102%); transition: transform .25s ease;
  }
  .filters--open { transform: none; }
  .filters__head { display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 1; height: 60px; margin-bottom: 8px; background: var(--paper); border-bottom: 1px solid var(--line); font-weight: 600; }
  .scrim { position: fixed; inset: 0; z-index: 65; background: rgba(20, 23, 27, .35); }
  .toolbar__filters { display: inline-flex; }
  .product { grid-template-columns: 1fr; gap: 32px; }
  .buy { position: static; }
  .psec { grid-template-columns: 1fr; gap: 16px; padding: 36px 0; }
  .specs { grid-template-columns: 1fr; }
  .pulley { max-width: 360px; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; --header-h: 60px; }
  /* Предотвращение авто-зума в iOS Safari при фокусе поля ввода (шрифт < 16px вызывает принудительный зум и сдвиг вёрстки) */
  .search__input,
  .field,
  input[type="search"],
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  textarea {
    font-size: 16px !important;
  }
  .topbar { display: none; }
  .header__in { gap: 10px; height: var(--header-h); }
  .logo { width: 104px; }
  .header__search { position: absolute; left: 0; right: 0; top: 100%; max-width: none; padding: 0 var(--gutter) 10px; background: var(--paper); border-bottom: 1px solid var(--line); }
  .header { margin-bottom: 0; }
  .header-spacer { display: block; height: 54px; }
  .header__actions .btn span { display: none; }
  .header__actions .btn { padding: 0 10px; }
  .header__vin { display: none !important; }
  .catnav__in { gap: 20px; }
  .hero { padding: 28px 0 40px; }
  .hero__title { font-size: var(--fs-32); }
  .search--hero .search__box { height: 56px; }
  .search--hero .search__input { font-size: var(--fs-16); }
  .search--hero .search__submit { padding: 0 14px; }
  .search--hero .search__icon { display: none; }
  .depot__notes { grid-template-columns: 1fr; }
  .depot__notes div + div { border-left: 0; border-top: 1px solid var(--line); }
  .section { padding: 44px 0; }
  .section__head { flex-direction: column; align-items: start; }
  .section__title { font-size: var(--fs-24); }
  .cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cat__facts { grid-template-columns: 1fr 1fr; }
  .cat__facts span:nth-child(2) { display: none; }
  .cat { padding: 14px; }
  .cat__name { font-size: var(--fs-16); }
  .cat__desc { display: none; }
  .makes__tools, .makes__tools .field { width: 100%; }
  .makes { columns: 2; column-gap: 20px; }
  .terms { grid-template-columns: 1fr; gap: 24px; }
  .pgrid { grid-template-columns: 1fr 1fr; }
  .pcard { padding: 12px; }
  .pcard__price { font-size: var(--fs-16); }
  .pcard__foot { flex-direction: column; align-items: stretch; }
  .page-head h1 { font-size: var(--fs-24); }
  .toolbar__push { margin-left: 0; width: 100%; }
  .toolbar__push .field { flex: 1; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__main { grid-column: 1; }
  .gallery__thumbs { grid-row: 2; flex-direction: row; overflow-x: auto; }
  .gallery__thumbs button { flex: none; width: 60px; height: 60px; }
  .buy h1 { font-size: var(--fs-20); }
  .buy__price strong { font-size: var(--fs-24); }
  .footer__grid { grid-template-columns: 1fr; gap: 28px; }
  .results__row { grid-template-columns: 40px 1fr auto; }
  .results__row .stock { display: none; }
  .results__img { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

.gallery--single { grid-template-columns: 1fr; }
.gallery--single .gallery__main { grid-column: 1; }


/* =====================================================================
   v2 — глубина, моушн, узнаваемость бренда. Слой поверх базовой системы.
   ===================================================================== */

:root {
  --bg: #f4f5f7;
  --sh-1: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .07);
  --sh-2: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -12px rgba(16, 24, 40, .2);
  --sh-3: 0 2px 6px rgba(16, 24, 40, .05), 0 28px 56px -20px rgba(16, 24, 40, .3);
  --r-card: 16px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
body { background: var(--bg); }

/* Шапка */
.topbar { background: #fff; border-bottom: 1px solid var(--line); }
.topbar__in { gap: 20px; height: 40px; }
.topnav { display: flex; gap: 24px; }
.topnav a { color: var(--ink-2); font-weight: 500; transition: color .15s; }
.topnav a:hover, .topnav a[aria-current="page"] { color: var(--ink); }
.topnav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.topbar__mail { color: var(--ink-2); }
.header { box-shadow: 0 1px 0 rgba(16, 24, 40, .06); border-bottom: 0; }
.header__in { gap: 14px; height: 76px; }
.header__catalog { height: 44px; padding: 0 18px; border-radius: 10px; }
.header__catalog.is-open { background: var(--cold); border-color: var(--cold); }
.header__burger { display: none; }
.header .search__box { height: 46px; border-radius: 10px; background: var(--bg); border-color: transparent; }
.header .search__box:focus-within { background: #fff; }

.mega { position: absolute; left: 0; right: 0; top: 100%; background: #fff; box-shadow: var(--sh-3); border-top: 1px solid var(--line); }
.mega__in { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; padding-top: 24px; padding-bottom: 28px; }
.mega__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.mega__cat { display: flex; flex-direction: column; gap: 12px; padding: 10px; border-radius: 14px; transition: background-color .2s; }
.mega__cat:hover { background: var(--bg); }
.mega__cat b { display: block; font-weight: 600; }
.mega__cat small { color: var(--ink-3); font-size: var(--fs-13); }
.mega__img { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--sheet); }
.mega__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.mega__cat:hover .mega__img img { transform: scale(1.05); }
.mega__side { display: flex; flex-direction: column; }
.mega__side a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-14); font-weight: 500; }
.mega__side a:hover { color: var(--cold); }
.mega__side .mono { color: var(--ink-3); font-size: var(--fs-12); }

.drawer { position: fixed; inset: 0; z-index: 90; background: rgba(20, 23, 27, .42); }
.drawer__panel { position: absolute; inset: 0 auto 0 0; width: min(340px, 88vw); padding: 0 20px 28px; overflow: auto; background: #fff; box-shadow: var(--sh-3); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; height: 60px; border-bottom: 1px solid var(--line); }
.drawer__nav, .drawer__cats, .drawer__contacts { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid var(--line); }
.drawer__nav a { padding: 10px 0; font-size: var(--fs-16); font-weight: 600; }
.drawer__cats a { display: flex; justify-content: space-between; padding: 8px 0; font-size: var(--fs-14); color: var(--ink-2); }
.drawer__contacts { gap: 8px; border-bottom: 0; font-size: var(--fs-14); }

/* Кнопки — мягкая глубина */
.btn--dark, .btn--primary { box-shadow: 0 1px 2px rgba(16, 24, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .08); }
.btn--dark:active, .btn--primary:active { transform: translateY(1px); }

/* ---------- Hero: компрессор в разлёте ---------- */

.h3 { position: relative; height: 240vh; background:
  radial-gradient(60% 55% at 72% 64%, #ffffff 0%, rgba(255, 255, 255, 0) 70%),
  linear-gradient(180deg, #eef1f4 0%, #e7ebef 100%); }
.h3-stage { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h) - 40px); min-height: 600px; overflow: hidden; display: flex; flex-direction: column; }
.h3-copy { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-top: clamp(24px, 5vh, 56px); }
.h3-title { font-size: clamp(2.25rem, 4vw, 3.75rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; }
.h3-lead { color: var(--ink-2); max-width: 52ch; }
.h3-copy .hero__try { margin-top: 12px; }
.h3-copy .hero__try button { background: rgba(255, 255, 255, .7); }
.h3-search { margin-top: 18px; }
.h3 .search--hero .search__box { border: 1px solid #fff; background: #fff; box-shadow: var(--sh-2); }
.h3 .search--hero .search__box:focus-within { border-color: var(--cold); box-shadow: 0 0 0 4px var(--cold-tint), var(--sh-2); }
.h3-scene { position: relative; flex: 1; min-height: 0; perspective: 1600px; }
.h3-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-origin: 60% 60%; }
.h3-title, .h3-meta { pointer-events: none; }
.h3-svg .h3-title { font: 650 17px var(--sans); fill: var(--ink); letter-spacing: -0.01em; }
.h3-svg .h3-meta { font: 500 12.5px var(--mono); fill: var(--ink-2); }
.h3-link { cursor: pointer; }
.h3-link:hover .h3-title { fill: var(--cold); }
.h3-link:focus-visible { outline: none; }
.h3-link:focus-visible .h3-title { fill: var(--cold); text-decoration: underline; }
.h3-hint { position: absolute; left: 50%; bottom: 22px; z-index: 2; display: flex; align-items: center; gap: 10px; transform: translateX(-50%); font-size: var(--fs-13); color: var(--ink-2); opacity: calc(1 - var(--p, 0) * 5); pointer-events: none; white-space: nowrap; }
.h3-hint i { position: relative; width: 22px; height: 34px; border: 1.5px solid var(--ink-3); border-radius: 12px; }
.h3-hint i::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: var(--ink-2); animation: h3wheel 1.8s var(--ease) infinite; }
@keyframes h3wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(10px); opacity: 0; } 100% { opacity: 0; } }
.h3-legend { display: none; }
.h3-rail { position: absolute; right: var(--gutter); top: 50%; z-index: 2; display: flex; flex-direction: column; gap: 10px; transform: translateY(-50%); }
.h3-rail span { width: 4px; height: 26px; border-radius: 2px; background: rgba(20, 23, 27, .12); overflow: hidden; position: relative; }
.h3-rail span::after { content: ""; position: absolute; inset: 0; background: var(--ink); transform-origin: top; transform: scaleY(var(--f, 0)); }

/* ---------- Склады ---------- */

.depots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.15fr); gap: 16px; }
.dcard { position: relative; padding: 22px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.dcard:hover { box-shadow: var(--sh-2); }
.dcard__name { font-weight: 650; font-size: var(--fs-16); }
.dcard__role { margin-top: 2px; font-size: var(--fs-13); color: var(--ink-3); }
.dcard__nums { display: flex; gap: 28px; margin-top: 22px; }
.dcard__nums b { display: block; font: 600 1.75rem/1 var(--mono); letter-spacing: -0.03em; }
.dcard__nums span { font-size: var(--fs-12); color: var(--ink-3); }
.dcard__bar { height: 6px; margin-top: 18px; border-radius: 3px; background: var(--sheet); overflow: hidden; }
.dcard__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cold), #4f7fe0); width: 0; transition: width 1.2s var(--ease); }
.dcard__share { margin-top: 8px; font-size: var(--fs-12); color: var(--ink-3); }
.dcard--total { background: var(--ink); color: #fff; box-shadow: var(--sh-2); }
.dcard--total .dcard__role, .dcard--total .dcard__nums span, .dcard--total .dcard__share { color: #a9b0b9; }
.dcard--total ul { margin-top: 18px; display: grid; gap: 8px; font-size: var(--fs-13); color: #d6dbe0; }
.dcard--total li::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: #5b8cf0; vertical-align: middle; }

/* ---------- Секции ---------- */

.section { padding: 80px 0; }
.section + .section { border-top: 0; }
.section--sheet { background: transparent; }
.section--white { background: #fff; }
.section__title { font-size: clamp(1.75rem, 2.6vw, 2.5rem); letter-spacing: -0.03em; }

/* Категории — карточки */
.cats { gap: 20px; background: none; border: 0; border-radius: 0; overflow: visible; }
.cat { border-radius: var(--r-card); box-shadow: var(--sh-1); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.cat:hover { background: #fff; box-shadow: var(--sh-3); }
.cat__img { margin: -8px -8px 20px; border-radius: 12px; }
.cat__img img { transition: transform .7s var(--ease); }
.cat:hover .cat__img img { transform: scale(1.06); }
.cat__facts { border-top-color: var(--sheet); }

/* Марки */
.brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.brand { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 26px 12px 18px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.brand:hover { box-shadow: var(--sh-2); }
.brand img { height: 46px; width: 90px; object-fit: contain; filter: grayscale(1); opacity: .78; transition: filter .3s, opacity .3s; }
.brand:hover img { filter: none; opacity: 1; }
.brand b { font-size: var(--fs-14); font-weight: 600; }
.brand small { margin-top: -10px; font: 500 var(--fs-12) var(--mono); color: var(--ink-3); }
.brands-all { margin-top: 28px; }
.brands-all[hidden] { display: none; }

/* ---------- Карточки и строки товаров ---------- */

.pgrid { grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 20px; background: none; border: 0; border-radius: 0; overflow: visible; }
.pcard { padding: 0; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.pcard:hover { box-shadow: var(--sh-3); }
.pcard__img { position: relative; aspect-ratio: 4 / 3; margin: 0; border-radius: 0; }
.pcard__img img { transition: transform .7s var(--ease); }
.pcard:hover .pcard__img img { transform: scale(1.05); }
.pcard__badge { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: var(--sh-1); font-size: var(--fs-12); font-weight: 600; backdrop-filter: blur(6px); }
.pcard__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pcard__badge.is-ok { color: var(--ok); }
.pcard__badge.is-wait { color: var(--wait); }
.pcard__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.pcard__top { display: flex; align-items: center; justify-content: space-between; margin: 0; font: 400 var(--fs-12)/1.3 var(--sans); color: var(--ink-3); }
.pcard__title { font-size: var(--fs-16); line-height: 1.3; letter-spacing: -0.01em; -webkit-line-clamp: 2; min-height: 2.6em; }
.pcard__oem { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pcard__tags { margin: 0; }
.pcard__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--sheet); }
.pcard__price { font-size: var(--fs-20); }

.skuc { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: 6px; background: none; font: 600 var(--fs-13)/1 var(--mono); color: var(--ink); transition: background-color .15s; }
.skuc svg, .oemc svg { width: 13px; height: 13px; color: var(--ink-3); opacity: .55; transition: opacity .15s, color .15s; }
.skuc:hover { background: var(--sheet); }
.skuc:hover svg, .oemc:hover svg { opacity: 1; }
.oemc { display: inline-flex; align-items: center; gap: 6px; height: 26px; max-width: 100%; padding: 0 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: 500 var(--fs-12)/1 var(--mono); color: var(--ink-2); transition: border-color .15s, color .15s, background-color .15s; }
.oemc:hover { border-color: var(--cold); color: var(--cold); background: var(--cold-tint); }
.oemc:hover svg { color: var(--cold); }
.oemc[data-done], .skuc[data-done] { border-color: var(--ok); color: var(--ok); background: var(--ok-tint); }
.oemc[data-done] svg, .skuc[data-done] svg { color: var(--ok); opacity: 1; }
.oemc__more { align-self: center; font: 500 var(--fs-12) var(--mono); color: var(--ink-3); }
.oemc mark, .skuc mark { background: #fde98b; color: inherit; border-radius: 2px; }

.whp { display: flex; flex-wrap: wrap; gap: 5px; }
.whp__i { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--ok-tint); color: #0e5c3c; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.whp__i i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.whp__i b { font: 600 11.5px var(--mono); }
.whp__i.is-zero { background: var(--sheet); color: var(--ink-3); }
.whp__i.is-zero i { background: var(--line-2); }

.plist { border: 0; border-radius: var(--r-card); box-shadow: var(--sh-1); }
.plist__head { background: #fafbfc; }
.prow { position: relative; transition: background-color .2s; }
.prow::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--cold); opacity: 0; transition: opacity .2s; }
.prow:hover { background: #fafbfd; }
.prow:hover::before { opacity: 1; }
.prow__img img { transition: transform .5s var(--ease); }
.prow:hover .prow__img img { transform: scale(1.08); }
.prow__sku { display: flex; flex-direction: column; align-items: flex-start; }
.prow__sku small { margin-top: 2px; }
.prow__oem { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.prow__oemin { display: none; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.prow__stock { display: flex; flex-direction: column; gap: 6px; }
.prow__stock .whp { flex-direction: column; align-items: flex-start; gap: 3px; }
.prow__stock .whp__i { height: 20px; padding: 0 7px; font-size: 11px; }
.plist__head, .prow { grid-template-columns: 72px minmax(0, 1fr) 104px 156px 150px 100px 124px; }
@container plist (max-width: 1080px) {
  .plist__head, .prow { grid-template-columns: 64px minmax(0, 1fr) 96px 150px 96px 116px; }
  .plist__head span:nth-child(4), .prow__oem { display: none; }
  .plist__head span:nth-child(6) { text-align: right; }
  .prow__oemin { display: flex; }
}
@container plist (max-width: 620px) {
  .prow { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .prow__stock { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .prow__stock .whp { flex-direction: row; }
}

/* ---------- Отзывы ---------- */

.rv-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.rv-score { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); }
.rv-score b { font: 700 2.5rem/1 var(--sans); letter-spacing: -0.04em; }
.rv-score small { display: block; font-size: var(--fs-13); color: var(--ink-3); }
.stars { display: inline-flex; gap: 2px; color: #f2a900; }
.stars svg { width: 16px; height: 16px; fill: currentColor; }
.rv-wrap { position: relative; }
.rv-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, calc((100% - 60px) / 4)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 4px 24px; margin: -6px -4px 0; scrollbar-width: none; }
.rv-track::-webkit-scrollbar { display: none; }
.rv { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); scroll-snap-align: start; transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.rv:hover { box-shadow: var(--sh-2); }
.rv__top { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-12); color: var(--ink-3); }
.rv__src { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--sheet); font-weight: 600; color: var(--ink-2); }
.rv__src::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #00aaff; box-shadow: 8px 0 0 -1px #97cf26; margin-right: 6px; }
.rv__text { font-size: var(--fs-14); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.rv__item { padding-top: 12px; border-top: 1px solid var(--sheet); font-size: var(--fs-12); color: var(--ink-3); }
.rv__who { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.rv__ava { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #e9edf2, #d3d9e0); font-weight: 650; font-size: var(--fs-14); color: var(--ink-2); }
.rv__who b { display: block; font-size: var(--fs-14); }
.rv__who small { font-size: var(--fs-12); color: var(--ink-3); }
.rv-nav { display: flex; gap: 8px; }
.rv-nav button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); display: grid; place-items: center; transition: box-shadow .2s; }
.rv-nav button:hover { box-shadow: var(--sh-2); }
.rv-nav svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

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

.news { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 20px; }
.ncard { display: flex; flex-direction: column; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.ncard:hover { box-shadow: var(--sh-3); }
.ncard__img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sheet); }
.ncard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ncard:hover .ncard__img img { transform: scale(1.05); }
.ncard__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.ncard__meta { display: flex; gap: 12px; font-size: var(--fs-12); color: var(--ink-3); }
.ncard__meta b { font-weight: 600; color: var(--cold); }
.ncard h3 { font-size: var(--fs-20); line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; }
.ncard p { font-size: var(--fs-14); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news--page { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Условия — карточки */
.terms { gap: 20px; }
.terms > div { padding: 26px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); }
.terms__fig { border-bottom-color: var(--sheet); }
.terms dd a { color: var(--cold); font-weight: 600; }

/* ---------- Информационные страницы ---------- */

.info { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; padding: 8px 0 88px; }
.info__nav { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 2px; padding: 10px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); }
.info__nav a { padding: 10px 12px; border-radius: 10px; font-size: var(--fs-14); font-weight: 500; color: var(--ink-2); }
.info__nav a:hover { background: var(--bg); color: var(--ink); }
.info__nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.info__body { display: flex; flex-direction: column; gap: 20px; }
.ihead { padding: 40px; border-radius: var(--r-card); background: linear-gradient(135deg, #fff 0%, #f1f4f7 100%); box-shadow: var(--sh-1); }
.ihead h1 { font-size: clamp(2rem, 3.2vw, 2.75rem); line-height: 1.08; font-weight: 700; letter-spacing: -0.035em; }
.ihead p { margin-top: 12px; max-width: 64ch; color: var(--ink-2); }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.facts div { padding: 16px 18px; border-radius: 12px; background: #fff; box-shadow: var(--sh-1); }
.facts b { display: block; font: 650 var(--fs-24)/1.1 var(--sans); letter-spacing: -0.02em; }
.facts span { font-size: var(--fs-13); color: var(--ink-3); }
.icard { padding: 32px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); }
.icard h2 { font-size: var(--fs-24); line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; }
.icard > p { margin-top: 8px; color: var(--ink-2); max-width: 70ch; }
.igrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.igrid div { padding: 18px 20px; border-radius: 12px; background: var(--bg); }
.igrid b { display: block; font-weight: 600; }
.igrid p { margin-top: 6px; font-size: var(--fs-14); color: var(--ink-2); }
.igrid small { display: inline-block; margin-top: 10px; font-size: var(--fs-12); font-weight: 600; color: var(--cold); }
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 22px; }
.steps li { counter-increment: s; padding: 16px; border-radius: 12px; background: var(--bg); font-size: var(--fs-14); font-weight: 500; }
.steps li::before { content: counter(s, decimal-leading-zero); display: block; margin-bottom: 10px; font: 600 var(--fs-12) var(--mono); color: var(--cold); }
.steps li p { margin-top: 4px; font-weight: 400; font-size: var(--fs-13); color: var(--ink-2); }
.faq { margin-top: 18px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 var(--fs-20)/1 var(--sans); color: var(--ink-3); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px; color: var(--ink-2); font-size: var(--fs-14); max-width: 72ch; }
.reqs { margin-top: 18px; font-size: var(--fs-14); }
.reqs th, .reqs td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; }
.reqs th { width: 40%; font-weight: 400; color: var(--ink-2); }
.places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 22px; }
.places div { padding: 20px; border-radius: 12px; background: var(--bg); }
.places small { font-size: var(--fs-12); font-weight: 600; color: var(--cold); }
.places b { display: block; margin-top: 6px; }
.places p { margin-top: 6px; font-size: var(--fs-14); color: var(--ink-2); }

/* Карточка товара — глубина */
.gallery__main { border: 0; box-shadow: var(--sh-1); background: #fff; }
.buy__panel { border: 0; background: #fff; box-shadow: var(--sh-2); border-radius: 18px; }
.buy__keyspecs { border: 0; background: #fff; box-shadow: var(--sh-1); border-radius: 12px; }
.buy__keyspecs div + div { border-left-color: var(--sheet); }
.buy .whp { margin-top: 16px; }
.buy .whp__i { height: 30px; padding: 0 12px; font-size: var(--fs-13); }
.buy .whp__i b { font-size: var(--fs-13); }
.subnav { background: rgba(244, 245, 247, .94); }
.oems { border: 0; background: #fff; box-shadow: var(--sh-1); border-radius: 12px; }
.pulley { border: 0; background: #fff; box-shadow: var(--sh-1); }
.specs table { background: transparent; }

/* Подвал — графит */
.footer { background: #14171b; color: #c9ced4; border-top: 0; padding-top: 64px; }
.footer h2 { color: #fff; }
.footer a { color: #aeb5bd; }
.footer a:hover { color: #fff; }
.footer__about { color: #9aa2ab; }

.footer__legal { color: #7b838c; }
.footer__phone { color: #fff !important; }
.footer__bottom { border-top-color: #2a2f36; color: #7b838c; }
.footer .muted { color: #7b838c; }

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

@media (max-width: 1200px) {
  .topbar__mail { display: none; }
  .depots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dcard--total { grid-column: 1 / -1; }
  .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rv-track { grid-auto-columns: minmax(300px, calc((100% - 40px) / 3)); }
  .news { grid-template-columns: 1fr 1fr; }
  .news .ncard:first-child { grid-column: 1 / -1; }
  .header__vin span { display: none; }
}
@media (max-width: 1024px) {
  .h3-copy { grid-template-columns: 1fr; gap: 14px; }
  .mega__in { grid-template-columns: 1fr; }
  .info { grid-template-columns: 1fr; }
  .info__nav { position: static; flex-direction: row; overflow-x: auto; }
  .info__nav a { white-space: nowrap; }
  .places, .facts { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .header__burger { display: inline-flex; padding: 0 8px; }
  .header__catalog, .header__login { display: none !important; }
  .header__in { height: var(--header-h); }
  .header .search__box { height: 44px; }
  .h3 { height: 200vh; }
  .h3-stage { min-height: 520px; }
  .h3-title { font-size: 2rem; }
  .h3-lead { font-size: var(--fs-14); }
  .h3-copy .hero__try { display: none; }
  .h3-svg .h3-labels { display: none; }
  .h3-legend { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 16px; z-index: 2; display: flex; flex-wrap: wrap; gap: 6px; }
  .h3-legend a { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 999px; background: rgba(255, 255, 255, .85); box-shadow: var(--sh-1); font-size: var(--fs-12); font-weight: 600; color: var(--ink-3); transition: color .3s, background-color .3s; }
  .h3-legend a.is-on { background: var(--ink); color: #fff; }
  .h3-hint, .h3-rail { display: none; }
  .depots { grid-template-columns: 1fr; }
  .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .brand { padding: 18px 8px 14px; }
  .brand img { width: 64px; height: 34px; }
  .pgrid { grid-template-columns: 1fr; }
  .rv-track { grid-auto-columns: 86%; }
  .news, .news--page { grid-template-columns: 1fr; }
  .igrid { grid-template-columns: 1fr; }
  .ihead, .icard { padding: 24px; }
  .section { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .h3 { height: auto; }
  .h3-stage { position: relative; top: 0; height: auto; min-height: 760px; }
  .h3-hint { display: none; }
}
.h3-rail span:nth-child(1)::after { transform: scaleY(clamp(0, calc(var(--p, 0) * 4), 1)); }
.h3-rail span:nth-child(2)::after { transform: scaleY(clamp(0, calc(var(--p, 0) * 4 - 1), 1)); }
.h3-rail span:nth-child(3)::after { transform: scaleY(clamp(0, calc(var(--p, 0) * 4 - 2), 1)); }
.h3-rail span:nth-child(4)::after { transform: scaleY(clamp(0, calc(var(--p, 0) * 4 - 3), 1)); }

/* Canvas-hero */
.h3-scene { contain: layout paint; }
.h3-canvas { position: absolute; inset: 0; display: block; transform-origin: 60% 60%; opacity: 0; transition: opacity .6s cubic-bezier(.23, 1, .32, 1); }
.h3-scene.is-ready .h3-canvas { opacity: 1; }
.h3-tags { position: absolute; inset: 0; pointer-events: none; }
.h3-tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; border-radius: 8px; pointer-events: auto; visibility: hidden; opacity: 0; white-space: nowrap; transition: background-color .15s ease; }
.h3-tag b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.h3-tag span { font: 500 12px/1.3 var(--mono); color: var(--ink-2); }
.h3-tag--up { translate: 8px calc(-100% - 2px); }
.h3-tag--down { translate: 8px -6px; }
.h3-tag--left { translate: calc(-100% - 10px) -50%; align-items: flex-end; text-align: right; }
@media (hover: hover) and (pointer: fine) { .h3-tag:hover { background: rgba(255, 255, 255, .85); } .h3-tag:hover b { color: var(--cold); } }
.h3-tag:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }
@media (max-width: 760px) { .h3-tags { display: none; } }

/* ---------- Полировка: браузерные поверхности, отклик, доступность ---------- */

:root { color-scheme: light; --ease-out: cubic-bezier(.23, 1, .32, 1); }
html { accent-color: var(--cold); caret-color: var(--cold); scrollbar-color: #c3c9d0 transparent; }
::selection { background: #cddcf8; color: var(--ink); }
.num, .mono, .prow__price, .pcard__price, .buy__price strong, .dcard__nums b, .cat__facts b { font-variant-numeric: tabular-nums; }
a, button, input, select, summary { touch-action: manipulation; }
.btn, .oemc, .skuc, .fchip, .afchip, .seg button, .rv-nav button, .qty button { transition-property: background-color, border-color, color, box-shadow, transform; transition-duration: .16s; transition-timing-function: var(--ease-out); }
.btn:active, .oemc:active, .skuc:active, .fchip:active, .seg button:active, .rv-nav button:active, .qty button:active { transform: scale(.97); }

/* Масштаб фото и подсветка — только для мыши, на тач-экранах «залипшего» hover нет */
@media not ((hover: hover) and (pointer: fine)) {
  .pcard:hover, .cat:hover, .ncard:hover, .brand:hover, .dcard:hover, .rv:hover { box-shadow: var(--sh-1); }
  .pcard:hover .pcard__img img, .cat:hover .cat__img img, .ncard:hover .ncard__img img, .prow:hover .prow__img img, .mega__cat:hover .mega__img img { transform: none; }
  .brand img { filter: none; opacity: 1; }
}

/* Мега-меню выезжает от кнопки «Каталог» */
.mega { transform-origin: top left; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), display .2s allow-discrete, overlay .2s allow-discrete; }
@starting-style { .mega:not([hidden]) { opacity: 0; transform: translateY(-6px); } }
.drawer__panel { transition: transform .28s cubic-bezier(.32, .72, 0, 1); }
@starting-style { .drawer:not([hidden]) .drawer__panel { transform: translateX(-100%); } }

/* Ссылка «к содержимому» для клавиатуры */
.skip { position: fixed; left: 16px; top: 12px; z-index: 100; padding: 10px 14px; border-radius: 8px; background: var(--ink); color: #fff; font-size: var(--fs-14); font-weight: 600; transform: translateY(-160%); transition: transform .16s var(--ease-out); }
.skip:focus-visible { transform: none; }

/* Условия работы — одна панель вместо четырёх одинаковых карточек */
.terms { gap: 0; padding: 8px 0; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); }
.terms > div { padding: 26px 28px; border-radius: 0; background: none; box-shadow: none; }
.terms > div + div { box-shadow: -1px 0 0 var(--sheet); }
.terms__fig { padding-bottom: 0; border-bottom: 0; font-size: var(--fs-32); letter-spacing: -0.03em; }

/* iOS не увеличивает страницу при фокусе, если шрифт поля не меньше 16px */
@media (max-width: 760px) {
  .search__input, .field { font-size: 16px; }
  .terms > div + div { box-shadow: 0 -1px 0 var(--sheet); }
}

/* =====================================================================
   v3 — однострочная шапка, продающий hero, глубина вместо серых рамок
   ===================================================================== */

:root {
  --header-h: 72px;
  --hair: rgba(16, 24, 40, .06);
  --well: #f1f3f5;
  --sh-in: inset 0 0 0 1px rgba(16, 24, 40, .06), inset 0 1px 2px rgba(16, 24, 40, .04);
}

/* ---------- Шапка: одна строка ---------- */

.header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); box-shadow: none; transition: box-shadow .2s var(--ease-out); }
.header.is-scrolled { box-shadow: 0 1px 0 var(--hair), 0 10px 28px -16px rgba(16, 24, 40, .18); }
.header__in { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(24px, 3.2vw, 48px); height: var(--header-h); }
.header__in > .logo { grid-column: 1; width: 118px; }
.header__burger { display: none; }

.hnav { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: clamp(16px, 1.9vw, 30px); min-width: 0; transition: opacity .15s var(--ease-out), transform .15s var(--ease-out), visibility 0s; }
.hnav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0; border: 0; background: none; font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-2); white-space: nowrap; cursor: pointer; transition: color .15s ease; }
.hnav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 7px; height: 1.5px; border-radius: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .22s var(--ease-out); }
.hnav__link:hover, .hnav__link[aria-current="page"], .hnav__cat[aria-expanded="true"] { color: var(--ink); }
.hnav__link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .hnav__link:hover::after { transform: scaleX(1); } }
.hnav__cat { font-weight: 600; color: var(--ink); }
.hnav__chev { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.hnav__cat[aria-expanded="true"] .hnav__chev { transform: rotate(180deg); }

.hsearch { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 6px; transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), display .2s allow-discrete; }
.hsearch[hidden] { display: none !important; }
@starting-style { .hsearch:not([hidden]) { opacity: 0; transform: translateY(-4px); } }
.hsearch .search { flex: 1; }
.header.is-searching .hnav { opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease, visibility 0s .12s; }

.hright { grid-column: 3; display: flex; align-items: center; gap: 4px; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .15s ease, transform .16s var(--ease-out); }
.iconbtn:hover { background: var(--bg); }
.iconbtn:active { transform: scale(.94); }
.iconbtn .icon { width: 20px; height: 20px; }
.hphone { display: flex; flex-direction: column; align-items: flex-end; margin: 0 10px 0 6px; line-height: 1.2; }
.hphone b { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.hphone small { font-size: 11.5px; color: var(--ink-3); }
.hphone:hover b { color: var(--cold); }
.hcart .cart-count { position: absolute; top: 2px; right: 0; }

.mega { border-top: 0; box-shadow: 0 1px 0 var(--hair), var(--sh-3); }
.mega__side a { border-bottom-color: var(--hair); }

/* ---------- Hero ---------- */

.h3 { height: 250vh; }
.h3-stage { display: block; top: var(--header-h); height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); min-height: 640px; }
.h3-scene { position: absolute; inset: 0; flex: none; }
.h3-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; height: 100%; padding-top: 0; padding-bottom: 7vh; pointer-events: none; }
.h3-copy__in {
  --c: clamp(0, (var(--p, 0) - 0.05) * 3.4, 1);
  width: min(560px, 42vw);
  pointer-events: auto;
  opacity: calc(1 - var(--c));
  filter: blur(calc(var(--c) * 6px));
  transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--c) * -56px + var(--my, 0) * -4px), 0);
  will-change: transform, opacity;
}
.h3.is-active .h3-copy__in { pointer-events: none; }
.h3-title { font-size: clamp(2.5rem, 4.1vw, 3.875rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.04em; max-width: 14ch; }
.h3-sub { margin-top: 18px; font-size: clamp(1.125rem, 1.4vw, 1.375rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.h3-lead { margin-top: 10px; max-width: 44ch; font-size: var(--fs-16); color: var(--ink-2); }

.btn--lg { height: 52px; padding: 0 24px; border-radius: 12px; font-size: 15px; letter-spacing: -0.005em; }
.btn--light { background: #fff; border-color: transparent; color: var(--ink); box-shadow: var(--sh-1); }
.btn--light:hover { box-shadow: var(--sh-2); border-color: transparent; }
.btn--primary { background: linear-gradient(180deg, #2459c4 0%, var(--cold) 100%); border-color: transparent; }
.btn--primary:hover { background: linear-gradient(180deg, #1f50b6 0%, var(--cold-ink) 100%); border-color: transparent; }

.h3-cta { display: grid; margin-top: 30px; }
.h3-cta > * { grid-area: 1 / 1; }
.h3-cta__buttons { display: flex; flex-wrap: wrap; gap: 12px; transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), visibility 0s; }
.h3-cta__search { display: flex; align-items: center; gap: 6px; visibility: hidden; opacity: 0; transition: opacity .2s var(--ease-out), visibility 0s linear .26s; }
.h3-cta__search .h3-search { flex: 1; margin: 0; }
.h3-cta__search .search__box { clip-path: inset(0 100% 0 0 round 12px); transition: clip-path .32s var(--ease-out); }
.h3-cta.is-search .h3-cta__buttons { opacity: 0; transform: scale(.97); visibility: hidden; transition: opacity .14s ease, transform .14s ease, visibility 0s .14s; }
.h3-cta.is-search .h3-cta__search { visibility: visible; opacity: 1; transition: opacity .2s var(--ease-out); }
.h3-cta.is-search .h3-cta__search .search__box { clip-path: inset(0 0 0 0 round 12px); }
.h3 .search--hero .search__box { height: 56px; border-radius: 12px; }
.h3 .search--hero .search__input { font-size: var(--fs-16); }
.h3 .search--hero .search__submit { margin: 5px; }
.h3-copy .hero__try { margin-top: 14px; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s; }
.h3-copy .hero__try.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--ease-out) .08s, transform .2s var(--ease-out) .08s; }
.hero__try button { border: 0; background: rgba(255, 255, 255, .8); box-shadow: var(--sh-1); }

.h3-dock { position: absolute; left: 50%; top: 24px; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 20px; border-radius: 16px; background: #fff; box-shadow: var(--sh-3); font-weight: 600; font-size: var(--fs-14); white-space: nowrap; opacity: 0; visibility: hidden; transform: translate(-50%, -8px); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out), visibility 0s .3s; }
.h3-dock .btn { height: 40px; border-radius: 10px; }
.h3.is-end .h3-dock { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .3s var(--ease-out), transform .3s var(--ease-out); }

/* ---------- Глубина вместо серых рамок ---------- */

.btn { border-color: transparent; }
.btn:not(.btn--ghost):not(.btn--dark):not(.btn--primary):not([aria-pressed="true"]) { background: #fff; box-shadow: var(--sh-1); }
.btn:not(.btn--ghost):not(.btn--dark):not(.btn--primary):not([aria-pressed="true"]):hover { box-shadow: var(--sh-2); }
.field { border-color: transparent; background: var(--well); box-shadow: var(--sh-in); }
.field:focus { background: #fff; border-color: transparent; box-shadow: 0 0 0 2px var(--cold), 0 0 0 5px var(--cold-tint); }
.search__box { border-color: transparent; background: var(--well); box-shadow: var(--sh-in); }
.search__box:focus-within { background: #fff; border-color: transparent; box-shadow: 0 0 0 2px var(--cold), 0 0 0 5px var(--cold-tint); }
.h3 .search--hero .search__box, .page-search .search__box { background: #fff; box-shadow: var(--sh-2); }
.search__kbd { border: 0; background: #fff; box-shadow: var(--sh-1); }
.results { border: 0; box-shadow: 0 0 0 1px var(--hair), var(--sh-3); }
.results__head, .results__row { border-bottom-color: var(--hair); }
.results__all { border-top-color: var(--hair); }
.tag { border-color: transparent; background: var(--well); }
.tag--used { background: var(--wait-tint); }
.oemc { border-color: transparent; background: var(--well); }
.oemc:hover { border-color: transparent; }
.fchip { border-color: transparent; background: #fff; box-shadow: var(--sh-1); }
.qty { border-color: transparent; background: var(--well); box-shadow: var(--sh-in); border-radius: 10px; }
.makes__letter h3 { border-bottom-color: var(--hair); }

.page-search { width: min(520px, 100%); }
.page-head { align-items: center; }
.filters { padding: 20px; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); }
.fgroup { border-bottom-color: var(--hair); }
.fgroup:last-child { border-bottom: 0; padding-bottom: 0; }
.plist__head { background: transparent; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--hair); }
.prow { border-bottom-color: var(--hair); }
.empty { border: 0; background: #fff; box-shadow: var(--sh-1); }

.gallery__thumbs button { border: 0; background: #fff; box-shadow: var(--sh-1); }
.gallery__thumbs button[aria-current="true"] { box-shadow: 0 0 0 2px var(--ink); }
.subnav { border: 0; background: rgba(244, 245, 247, .9); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--hair); }
.psec { margin: 20px 0; padding: 36px 40px; border: 0; border-radius: var(--r-card); background: #fff; box-shadow: var(--sh-1); }
.psec:last-of-type { margin-bottom: 72px; }
.specs th, .specs td, .fit li, .reqs th, .reqs td, .faq details { border-bottom-color: var(--hair); }
.fit li.fit__make { border-bottom-color: rgba(16, 24, 40, .12); }
.specs__gap { background: var(--well); }
.buy__keyspecs div + div { border-left-color: var(--hair); }
.drawer__head, .drawer__nav, .drawer__cats { border-bottom-color: var(--hair); }

/* ---------- Ритм секций ---------- */

.section { padding: 96px 0; }
.section__head { margin-bottom: 36px; }
.section__sub { color: var(--ink-2); }

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

@media (max-width: 1280px) {
  .hphone small { display: none; }
  .hnav__link { font-size: 14px; }
}
@media (max-width: 1180px) {
  .hphone { display: none; }
}
@media (max-width: 1024px) {
  .header__in { grid-template-columns: auto auto minmax(0, 1fr) auto; column-gap: 12px; }
  .header__burger { display: inline-grid; grid-column: 1; }
  .header__in > .logo { grid-column: 2; }
  .hnav { display: none; }
  .hright { grid-column: 4; }
  .hright__login { display: inline-grid; }
  .hsearch { position: absolute; inset: 0 var(--gutter); z-index: 3; grid-column: auto; background: #fff; }
  .h3 { height: 220vh; }
  .h3-stage { display: flex; flex-direction: column; }
  .h3-copy { order: -1; height: auto; padding: 28px var(--gutter) 0; justify-content: flex-start; }
  .h3-copy__in { width: 100%; opacity: 1; filter: none; transform: none; }
  .h3.is-active .h3-copy__in { pointer-events: auto; }
  .h3-scene { position: relative; inset: auto; flex: 1; min-height: 0; }
  .h3-dock { display: none; }
}
@media (max-width: 760px) {
  :root { --header-h: 60px; }
  .h3-title { font-size: 2.125rem; max-width: none; }
  .h3-sub { margin-top: 12px; font-size: 1.0625rem; }
  .h3-lead { font-size: var(--fs-14); }
  .h3-cta { margin-top: 20px; }
  .h3-cta__buttons .btn { flex: 1 1 auto; }
  .btn--lg { height: 48px; padding: 0 18px; }
  .h3-copy .hero__try { display: none; }
  .psec { padding: 24px 20px; }
  .filters { padding: 0 20px 24px; border-radius: 0; }
  .page-search { width: 100%; }
  .section { padding: 64px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .h3-copy__in { opacity: 1; filter: none; transform: none; }
}

@media (max-width: 1024px) { .filters { border-radius: 0; padding: 0 20px 24px; } }


/* Фиксы v3: бургер только на планшете и телефоне, всё в одной строке, текст hero слева */
.header__in > * { grid-row: 1; }
.header__in > .header__burger { display: none; }
.h3-copy { align-items: flex-start; }
@media (max-width: 1024px) { .header__in > .header__burger { display: inline-grid; } }

.h3-copy__in { width: min(600px, 44vw); }
.h3-title { max-width: none; }
@media (max-width: 1024px) { .h3-copy__in { width: 100%; } }


.h3-rail { right: auto; left: var(--gutter); }


.h3-copy { z-index: 4; }


/* Строка товара в узком контейнере: цена над кнопкой, названию — больше места */
@container plist (max-width: 900px) {
  .plist__head { display: none; }
  .prow { grid-template-columns: 60px minmax(0, 1fr) 88px 150px 120px; grid-template-areas: "img main sku stock price" "img main sku stock buy"; row-gap: 10px; }
  .prow__img { grid-area: img; } .prow__main { grid-area: main; } .prow__sku { grid-area: sku; } .prow__stock { grid-area: stock; }
  .prow__price { grid-area: price; align-self: end; } .prow__buy { grid-area: buy; align-self: start; }
}
@container plist (max-width: 620px) {
  .prow { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "img main main" "img sku price" "stock stock buy"; row-gap: 8px; }
  .prow__price, .prow__buy { align-self: center; }
}

/* Внутри секции-карточки — без второй тени: вложенные карточки не нужны */
.psec .plist, .psec .oems, .psec .pulley { box-shadow: none; border-radius: 12px; background: var(--bg); }
.psec .oems li { box-shadow: 1px 0 0 #fff, 0 1px 0 #fff; }
.psec .prow:hover { background: #fff; }

/* Hero на телефоне: скрытое поле поиска не должно раздвигать колонку */
.h3-copy { min-width: 0; }
.h3-cta { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.h3-cta__search, .h3-cta__search .h3-search { min-width: 0; }
@media (max-width: 1024px) { .h3-copy { width: 100%; } }

@media (max-width: 1024px) { .h3-legend { opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); } .h3.is-active .h3-legend { opacity: 1; transform: none; } }


.hsearch .search { min-width: 0; }
.hsearch .search__box { min-width: 0; }
@media (max-width: 760px) { .search__kbd { display: none; } .hsearch .search__submit { padding: 0 12px; } }


/* =====================================================================
   v4 — компактное мега-меню, собранный hero, типографика и линии
   ===================================================================== */

:root {
  --line: rgba(16, 24, 40, .08);
  --line-2: rgba(16, 24, 40, .16);
  --sh-float: 0 0 0 1px rgba(16, 24, 40, .06), 0 2px 4px rgba(16, 24, 40, .04), 0 12px 24px -8px rgba(16, 24, 40, .12), 0 32px 64px -24px rgba(16, 24, 40, .24);
}

/* ---------- Типографика ---------- */

body { font-optical-sizing: auto; font-feature-settings: "cv05", "cv11", "calt"; line-height: 1.55; letter-spacing: -0.003em; }
h1, h2, h3 { font-optical-sizing: auto; text-wrap: balance; }
.section__title { font-size: clamp(1.75rem, 2.4vw, 2.25rem); line-height: 1.1; font-weight: 650; letter-spacing: -0.03em; }
.section__sub { margin-top: 10px; font-size: var(--fs-16); line-height: 1.55; }
.page-head h1, .ihead h1 { line-height: 1.08; letter-spacing: -0.032em; }
.cat__name, .ncard h3, .icard h2, .psec__title { letter-spacing: -0.018em; line-height: 1.22; }
.pcard__title, .prow__title, .results__title { letter-spacing: -0.008em; }
small, .muted { line-height: 1.45; }

/* Цифры, артикулы, OEM, цены и телефоны (переопределено в v8: Inter, tabular-nums) */
.mono, .num, .skuc, .oemc, .prow__sku, .prow__oem, .pcard__price, .prow__price, .results__price, .buy__price strong,
.dcard__nums b, .cat__facts b, .whp__i b, .stock .mono, .fopt .mono, .tag--spec, .hphone b, .footer__phone, .mega__phone,
.copy, .buy__keyspecs dd, .gallery__count, .toolbar__count b, .rv-score b {
  font-family: var(--mono); font-feature-settings: "zero" 0, "calt" 0; letter-spacing: -0.02em;
}
.pcard__price, .prow__price, .buy__price strong, .results__price { font-weight: 600; letter-spacing: -0.035em; }
.buy__price strong { font-size: 2rem; }
.pcard__price { font-size: 1.1875rem; }
.dcard__nums b { letter-spacing: -0.045em; }
.hphone b { font-size: 14.5px; font-weight: 600; }

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

.fopt input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 18px; height: 18px; margin: 0; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .22), 0 1px 1px rgba(16, 24, 40, .04); cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.fopt input[type="radio"] { border-radius: 50%; }
.fopt input:checked { background: var(--cold); box-shadow: inset 0 0 0 1px var(--cold); }
.fopt input[type="checkbox"]:checked::before { content: ""; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); }
.fopt input[type="radio"]:checked::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.fopt input:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }
.fopt input:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) { .fopt:hover input:not(:checked):not(:disabled) { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .4); } }
select.field { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%237b828c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; cursor: pointer; }

/* ---------- Мега-меню: компактная панель от кнопки ---------- */

.hnav__catwrap { position: relative; display: flex; align-items: center; }
.mega {
  position: absolute; left: -20px; right: auto; top: calc(100% + 14px); z-index: 60;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 228px;
  width: 880px; max-width: calc(100vw - 48px); padding: 8px; border: 0; border-radius: 18px;
  background: #fff; box-shadow: var(--sh-float);
  transform-origin: 44px 0;
  transition: opacity .18s var(--ease-out), transform .18s var(--ease-out), display .18s allow-discrete, overlay .18s allow-discrete;
}
.mega[hidden] { display: none; }
@starting-style { .mega:not([hidden]) { opacity: 0; transform: translateY(-4px) scale(.985); } }
.mega::before { content: ""; position: absolute; top: -5px; left: 38px; width: 10px; height: 10px; border-radius: 2px; background: #fff; transform: rotate(45deg); box-shadow: -1px -1px 0 rgba(16, 24, 40, .06); }
.mega__col { padding: 14px 10px 12px; }
.mega__col + .mega__col { box-shadow: inset 1px 0 0 var(--line); }
.mega__h { padding: 0 10px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
.mega__col--links .mega__h + * { margin-top: 0; }
.mega__col--links .mega__makes + .mega__h, .mega__col--links .mega__link + .mega__h { margin-top: 14px; }
.mega__item { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; transition: background-color .15s ease; }
.mega__item:hover, .mega__item:focus-visible { background: var(--bg); }
.mega__thumb { width: 44px; height: 44px; border-radius: 10px; overflow: hidden; background: var(--well); box-shadow: inset 0 0 0 1px var(--line); }
.mega__thumb img { width: 100%; height: 100%; object-fit: cover; }
.mega__txt { min-width: 0; }
.mega__txt b { display: block; font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.mega__txt small { display: block; margin-top: 1px; font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mega__n { font: 500 12px var(--mono); letter-spacing: -0.02em; color: var(--ink-3); }
.mega__link { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 500; transition: background-color .15s ease; }
.mega__link:hover { background: var(--bg); }
.mega__link span { font: 500 12px var(--mono); letter-spacing: -0.02em; color: var(--ink-3); }
.mega__makes { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.mega__makes a { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--well); font-size: 12.5px; font-weight: 500; transition: background-color .15s ease, color .15s ease; }
.mega__makes a:hover { background: var(--cold-tint); color: var(--cold-ink); }
.mega__aside { display: flex; flex-direction: column; gap: 8px; margin: 2px; padding: 20px; border-radius: 13px; background: linear-gradient(160deg, #1d2127 0%, #14171b 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.mega__aside b { font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.mega__aside p { font-size: 13px; line-height: 1.5; color: #a9b0b9; }
.mega__phone { margin-top: 4px; font-size: 15px; font-weight: 600; color: #fff; }
.mega__find { margin-top: auto; background: #fff !important; color: var(--ink); box-shadow: none !important; }
.mega__all { font-size: 13px; color: #c9ced4; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .3); }
.mega__all:hover { color: #fff; }

/* ---------- Hero: одна плотная панель ---------- */

.hero4 { --pin-h: clamp(520px, calc(100svh - var(--header-h) - 56px), 640px); position: relative; height: calc(var(--pin-h) + 130vh); padding-top: 24px; }
.hero4__pin { position: sticky; top: calc(var(--header-h) + 24px); }
.hero4__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: var(--pin-h); border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, .04), 0 24px 48px -28px rgba(16, 24, 40, .22); overflow: hidden; }
.hero4__copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(32px, 3.6vw, 56px); }
.hero4__title { font-size: clamp(2.125rem, 3.1vw, 3.125rem); line-height: 1.05; font-weight: 680; letter-spacing: -0.036em; }
.hero4__sub { margin-top: 16px; font-size: clamp(1.0625rem, 1.25vw, 1.1875rem); line-height: 1.35; font-weight: 600; letter-spacing: -0.014em; }
.hero4__lead { margin-top: 8px; max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.hero4 .h3-cta { margin-top: 26px; }
.hero4 .btn--lg { height: 50px; padding: 0 22px; }
.hero4 .search--hero .search__box { height: 50px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), var(--sh-1); }
.hero4 .search--hero .search__box:focus-within { box-shadow: 0 0 0 2px var(--cold), 0 0 0 5px var(--cold-tint); }
.hero4 .search--hero .search__input { font: 500 15px/1 var(--mono); letter-spacing: -0.02em; }
.hero4 .search--hero .search__input::placeholder { font-family: var(--sans); letter-spacing: 0; }
.hero4 .search--hero .search__submit { margin: 5px; border-radius: 8px; }
.hero4__copy .hero__try { margin-top: 12px; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s; }
.hero4__copy .hero__try.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--ease-out) .08s, transform .2s var(--ease-out) .08s; }

.hero4__readout { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "k k" "t v"; column-gap: 12px; row-gap: 2px; margin-top: 22px; padding: 12px 14px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .15s ease; }
.hero4__readout:hover { background: #eceef1; }
.hero4__readout-k { grid-area: k; font-size: 11.5px; color: var(--ink-3); }
.hero4__readout b { grid-area: t; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; }
.hero4__readout-v { grid-area: v; align-self: center; font: 500 12px var(--mono); letter-spacing: -0.02em; color: var(--ink-2); white-space: nowrap; }
.hero4__readout.is-swap b, .hero4__readout.is-swap .hero4__readout-v { animation: readout .26s var(--ease-out); }
@keyframes readout { from { opacity: .2; transform: translateY(3px); } }

.hero4__stage { position: relative; min-width: 0; background: radial-gradient(75% 65% at 58% 52%, #ffffff 0%, #f1f3f6 58%, #e8ebef 100%); box-shadow: inset 1px 0 0 var(--line); perspective: 1600px; }
.hero4__stage .h3-scene { position: absolute; inset: 0 0 60px 0; min-height: 0; flex: none; }
.hero4 .h3-tag b { font-size: 13.5px; }
.hero4 .h3-tag span { font-size: 11px; }
.hero4__parts { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 3; display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px var(--line), var(--sh-1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hero4__parts button { flex: 1; min-width: 0; height: 32px; padding: 0 6px; border: 0; border-radius: 9px; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out); }
.hero4__parts button:hover { color: var(--ink); }
.hero4__parts button:active { transform: scale(.97); }
.hero4__parts button.is-on { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, .08); }
.hero4__progress { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 2px; }
.hero4__progress i { display: block; height: 100%; background: var(--cold); transform-origin: left; transform: scaleX(var(--p, 0)); }
.hero4__hint { position: absolute; top: 18px; right: 22px; z-index: 3; font-size: 12px; color: var(--ink-3); opacity: calc(1 - var(--p, 0) * 6); pointer-events: none; }

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

@media (max-width: 1280px) { .mega { width: 800px; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 200px; } }
@media (max-width: 1100px) { .mega { width: 700px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mega__aside { display: none; } }
@media (max-width: 1024px) {
  .hero4 { height: auto; padding-top: 16px; }
  .hero4__pin { position: static; }
  .hero4__panel { grid-template-columns: 1fr; height: auto; }
  .hero4__stage { height: 420px; box-shadow: inset 0 1px 0 var(--line); }
}
@media (max-width: 760px) {
  .hero4__panel { border-radius: 20px; }
  .hero4__copy { padding: 26px 20px 24px; }
  .hero4__title { font-size: 2rem; }
  .hero4__stage { height: 340px; }
  .hero4__parts { left: 10px; right: 10px; bottom: 10px; }
  .hero4__parts button { font-size: 11.5px; padding: 0 2px; }
  .hero4__hint { display: none; }
  .hero4__readout-v { white-space: normal; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .hero4 { height: auto; }
  .hero4__pin { position: static; }
}

/* Строка складов под панелью hero: заполняет экран полезным, а не пустотой */
.hero4 { --strip-h: 76px; --pin-h: clamp(500px, calc(100svh - var(--header-h) - 48px - var(--strip-h) - 14px), 640px); }
.hero4__strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.2fr); height: var(--strip-h); margin-top: 14px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, .04); overflow: hidden; }
.hero4__cell { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "n b" "s s"; align-content: center; column-gap: 10px; padding: 0 22px; transition: background-color .15s ease; }
.hero4__cell + .hero4__cell { box-shadow: inset 1px 0 0 var(--line); }
a.hero4__cell:hover { background: #fafbfc; }
.hero4__cell > span { grid-area: n; align-self: baseline; font-size: 13.5px; font-weight: 600; }
.hero4__cell > b { grid-area: b; justify-self: end; align-self: baseline; font-size: 18px; font-weight: 600; letter-spacing: -0.04em; }
.hero4__cell small { grid-area: s; font-size: 12px; color: var(--ink-3); }
.hero4__cell small .mono { color: var(--ink-2); }
.hero4__cell--note > b { font-family: var(--sans); font-size: 13.5px; letter-spacing: -0.01em; color: var(--ok); }
@media (max-width: 1024px) {
  .hero4__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  .hero4__cell { padding: 14px 18px; }
  .hero4__cell:nth-child(3) { box-shadow: inset 0 1px 0 var(--line); }
  .hero4__cell:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
}

.mega__hours { font-size: 12px; color: #8b939c; }


/* Моноширинные цены и телефоны: узкие пробелы между разрядами */
.pcard__price, .prow__price, .results__price, .buy__price strong, .hphone b, .footer__phone, .mega__phone, .dcard__nums b, .cat__facts b { word-spacing: -0.32em; }
/* Inter Display (оптический размер) уже плотнее — ослабляем ручной трекинг */
.hero4__title { letter-spacing: -0.028em; }
.section__title, .page-head h1, .ihead h1 { letter-spacing: -0.022em; }

@media (max-width: 760px) {
  .hero4__copy .hero__try:not(.is-on) { display: none; }
  .hero4__readout { grid-template-columns: 1fr; grid-template-areas: "k" "t" "v"; margin-top: 18px; }
  .hero4__readout-v { text-align: left; white-space: normal; }
  .hero4__parts { overflow-x: auto; scrollbar-width: none; }
  .hero4__parts::-webkit-scrollbar { display: none; }
  .hero4__parts button { flex: none; padding: 0 12px; }
  .hero4__cell--note { grid-template-columns: 1fr; grid-template-areas: "n" "b" "s"; }
  .hero4__cell--note > b { justify-self: start; }
}

/* =====================================================================
   v5 — иммерсивный hero: одно пространство, текст и сцена на общем свете
   ===================================================================== */

.hero5 { position: relative; height: calc(100svh - var(--header-h) + 140vh); background: var(--bg); }
.hero5__stage {
  position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); min-height: 600px; overflow: hidden;
  background:
    radial-gradient(55% 70% at 71% 50%, #ffffff 0%, rgba(255, 255, 255, .85) 30%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #eef0f4 0%, #f2f4f6 60%, var(--bg) 100%);
  perspective: 1800px;
}
.hero5__scene { position: absolute; inset: 0; }
.hero5__layout { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; pointer-events: none; }
.hero5__copy { width: min(520px, 38vw); padding-bottom: 3vh; pointer-events: auto; }
.hero5__title { font-size: clamp(2.5rem, 3.6vw, 3.625rem); line-height: 1.03; font-weight: 680; letter-spacing: -0.03em; text-wrap: balance; }
.hero5__sub { margin-top: 20px; font-size: clamp(1.125rem, 1.35vw, 1.3125rem); line-height: 1.35; font-weight: 600; letter-spacing: -0.015em; }
.hero5__lead { margin-top: 10px; max-width: 44ch; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.hero5 .h3-cta { margin-top: 32px; }
.hero5 .btn--lg { height: 52px; padding: 0 24px; }
.hero5 .search--hero .search__box { height: 52px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line-2), var(--sh-1); }
.hero5 .search--hero .search__box:focus-within { box-shadow: 0 0 0 2px var(--cold), 0 0 0 5px var(--cold-tint); }
.hero5 .search--hero .search__input { font: 500 15px/1 var(--mono); letter-spacing: -0.02em; }
.hero5 .search--hero .search__input::placeholder { font-family: var(--sans); letter-spacing: 0; }
.hero5 .search--hero .search__submit { margin: 5px; border-radius: 8px; }
.hero5__copy .hero__try { margin-top: 12px; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s; }
.hero5__copy .hero__try.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--ease-out) .08s, transform .2s var(--ease-out) .08s; }

.hero5__facts { display: flex; flex-wrap: wrap; row-gap: 8px; margin-top: 28px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--line); font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.hero5__facts li { padding: 0 16px; }
.hero5__facts li:first-child { padding-left: 0; }
.hero5__facts li + li { box-shadow: inset 1px 0 0 var(--line); }
.hero5__facts b { margin-right: 3px; font-size: 14px; font-weight: 600; color: var(--ink); }

.hero5 .h3-tag b { font-size: 14px; }
.hero5 .h3-tag span { font-size: 11.5px; }

/* Стеклянный бейдж поверх сцены: точки прогресса и текущий узел */
.hero5__badge {
  position: absolute; z-index: 3; bottom: 28px; right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 16px; border-radius: 16px;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75), 0 0 0 1px rgba(16, 24, 40, .06), 0 14px 36px -14px rgba(16, 24, 40, .28);
}
.hero5__dots { display: flex; align-items: center; gap: 6px; }
.hero5__dots button { position: relative; width: 6px; height: 6px; padding: 0; border: 0; border-radius: 3px; background: rgba(16, 24, 40, .16); cursor: pointer; transition: width .4s var(--ease-out), background-color .25s ease; }
.hero5__dots button::after { content: ""; position: absolute; inset: -10px -4px; }
.hero5__dots button.is-on { background: rgba(16, 24, 40, .5); }
.hero5__dots button.is-current { width: 22px; background: var(--ink); }
.hero5__dots button:focus-visible { outline: 2px solid var(--cold); outline-offset: 4px; }
.hero5__badge-txt { display: flex; flex-direction: column; min-width: 200px; line-height: 1.3; }
.hero5__badge-txt b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; transition: color .15s ease; }
.hero5__badge-txt small { margin-top: 1px; font: 500 12px var(--mono); letter-spacing: -0.02em; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .hero5__badge-txt:hover b { color: var(--cold); } }
.hero5__badge-txt.is-swap b, .hero5__badge-txt.is-swap small { animation: readout .32s var(--ease-out); }

@media (max-width: 1280px) { .hero5__copy { width: min(480px, 40vw); } }
@media (max-width: 1024px) {
  .hero5 { height: auto; }
  .hero5__stage { position: relative; top: 0; height: auto; min-height: 0; display: flex; flex-direction: column; overflow: visible;
    background: radial-gradient(80% 45% at 50% 72%, #ffffff 0%, rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #eef0f4 0%, var(--bg) 100%); }
  .hero5__layout { height: auto; display: block; padding-top: 36px; }
  .hero5__copy { width: 100%; max-width: 640px; padding-bottom: 0; }
  .hero5__scene { position: relative; inset: auto; height: 460px; }
  .hero5__badge { left: 50%; right: auto; bottom: 18px; transform: translateX(-50%); }
}
@media (max-width: 760px) {
  .hero5__layout { padding-top: 28px; }
  .hero5__title { font-size: 2.125rem; }
  .hero5__sub { margin-top: 14px; font-size: 1.0625rem; }
  .hero5__lead { font-size: 15px; }
  .hero5 .h3-cta { margin-top: 24px; }
  .hero5 .h3-cta__buttons .btn { flex: 1 1 auto; }
  .hero5__copy .hero__try:not(.is-on) { display: none; }
  .hero5__facts { margin-top: 22px; }
  .hero5__facts li { padding: 0 12px; }
  .hero5__scene { height: 340px; }
  .hero5__badge { gap: 12px; padding: 8px 14px 8px 12px; width: max-content; max-width: calc(100% - 32px); }
  .hero5__badge-txt { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero5 { height: auto; }
  .hero5__stage { position: relative; top: 0; }
}

@media (max-width: 1024px) { .hero5__stage .hero5__scene { flex: none; min-height: 0; } }


@media (max-width: 1024px) { .hero5__layout { order: 0; } .hero5__stage .hero5__scene { order: 1; } }


/* =====================================================================
   v6 — компактный тёмный hero: разбор по курсору, синий свет за курсором
   ===================================================================== */

.hero6 { background: #0d1015; }
.hero6__stage {
  position: relative; height: 520px; overflow: hidden; isolation: isolate; color: #e9edf2; perspective: 1800px; touch-action: pan-y;
  background: radial-gradient(70% 95% at 72% 55%, #1a1f27 0%, #13171d 50%, #0c0f14 100%);
}
/* Координатная сетка: едва заметная, гаснет к краям */
.hero6__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center center;
  -webkit-mask-image: radial-gradient(75% 95% at 66% 50%, #000 25%, transparent 80%); mask-image: radial-gradient(75% 95% at 66% 50%, #000 25%, transparent 80%);
}
.hero6__scene { position: absolute; inset: 0; z-index: 1; }
/* Синий рассеянный свет за курсором — под деталями, подсвечивает их сзади */
.hero6__glow {
  position: absolute; left: 0; top: 0; width: 680px; height: 680px; margin: -340px 0 0 -340px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(64, 128, 255, .46), rgba(44, 100, 235, .18) 45%, rgba(30, 80, 200, 0) 74%);
  transform: translate3d(var(--gx, 70vw), var(--gy, 260px), 0); opacity: calc(.7 + var(--p, 0) * .3); mix-blend-mode: screen;
}
.hero6__layout { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; pointer-events: none; }
.hero6__copy { width: min(500px, 38vw); pointer-events: auto; }
.hero6__title { font-size: clamp(2rem, 2.9vw, 2.875rem); line-height: 1.06; font-weight: 680; letter-spacing: -0.03em; color: #f5f7fa; text-wrap: balance; }
.hero6__sub { margin-top: 14px; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: #b9c1ca; }
.hero6 .h3-cta { margin-top: 28px; }
.hero6 .btn--lg { height: 50px; padding: 0 22px; }
.hero6 .btn--primary { background: linear-gradient(180deg, #3a6fe0 0%, #2556c4 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset, 0 10px 28px -10px rgba(52, 110, 240, .7); }
.hero6 .btn--primary:hover { background: linear-gradient(180deg, #4479ea 0%, #2a5fd2 100%); }
.hero6__ghost { background: rgba(255, 255, 255, .06) !important; color: #f5f7fa !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14) !important; }
.hero6__ghost:hover { background: rgba(255, 255, 255, .1) !important; }
.hero6 .search--hero .search__box { height: 50px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 10px 30px -10px rgba(0, 0, 0, .6); }
.hero6 .search--hero .search__box:focus-within { box-shadow: 0 0 0 2px #5b8cf0, 0 0 0 6px rgba(91, 140, 240, .25); }
.hero6 .search--hero .search__input { font: 500 15px/1 var(--mono); letter-spacing: -0.02em; color: var(--ink); }
.hero6 .search--hero .search__input::placeholder { font-family: var(--sans); letter-spacing: 0; }
.hero6 .search--hero .search__submit { margin: 5px; border-radius: 8px; }
.hero6 .h3-cta__close { color: #cfd5dc; }
.hero6 .h3-cta__close:hover { background: rgba(255, 255, 255, .08); }
.hero6__copy .hero__try { margin-top: 12px; color: #8c949e; visibility: hidden; opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s; }
.hero6__copy .hero__try.is-on { visibility: visible; opacity: 1; transform: none; transition: opacity .2s var(--ease-out) .08s, transform .2s var(--ease-out) .08s; }
.hero6__copy .hero__try button { background: rgba(255, 255, 255, .08); box-shadow: none; color: #d6dbe1; }
.hero6__copy .hero__try button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.hero6__facts { display: flex; flex-wrap: wrap; row-gap: 8px; margin-top: 26px; padding-top: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); font-size: 13px; line-height: 1.4; color: #8f98a3; }
.hero6__facts li { padding: 0 16px; }
.hero6__facts li:first-child { padding-left: 0; }
.hero6__facts li + li { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .1); }
.hero6__facts b { margin-right: 3px; font-size: 14px; font-weight: 600; color: #f5f7fa; }

/* Подписи деталей на тёмном */
.hero6 .h3-tag b { font-size: 13.5px; color: #f2f5f8; }
.hero6 .h3-tag span { font-size: 11px; color: #96a0ab; }
@media (hover: hover) and (pointer: fine) { .hero6 .h3-tag:hover { background: rgba(255, 255, 255, .07); } .hero6 .h3-tag:hover b { color: #8fb1ff; } }

/* Тёмный стеклянный бейдж */
.hero6__badge {
  position: absolute; z-index: 3; bottom: 22px; right: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
  display: flex; align-items: center; gap: 16px; padding: 10px 18px 10px 16px; border-radius: 16px;
  background: rgba(20, 24, 31, .55); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 44px -18px rgba(0, 0, 0, .7);
}
.hero6 .hero5__dots button { background: rgba(255, 255, 255, .18); }
.hero6 .hero5__dots button.is-on { background: rgba(255, 255, 255, .5); }
.hero6 .hero5__dots button.is-current { background: #8fb1ff; }
.hero6 .hero5__badge-txt b { color: #f5f7fa; }
.hero6 .hero5__badge-txt small { color: #96a0ab; }
@media (hover: hover) and (pointer: fine) { .hero6 .hero5__badge-txt:hover b { color: #8fb1ff; } }

.section--first { padding-top: 56px; }

@media (max-width: 1280px) { .hero6__copy { width: min(460px, 40vw); } }
@media (max-width: 1024px) {
  .hero6__stage { height: auto; display: flex; flex-direction: column; }
  .hero6__layout { order: 0; height: auto; display: block; padding-top: 36px; }
  .hero6__copy { width: 100%; max-width: 620px; }
  .hero6__stage .hero6__scene { order: 1; position: relative; inset: auto; height: 380px; flex: none; }
  .hero6__badge { left: 50%; right: auto; bottom: 16px; transform: translateX(-50%); }
  .hero6__grid { -webkit-mask-image: radial-gradient(90% 60% at 50% 75%, #000 20%, transparent 80%); mask-image: radial-gradient(90% 60% at 50% 75%, #000 20%, transparent 80%); }
}
@media (max-width: 760px) {
  .hero6__layout { padding-top: 28px; }
  .hero6__title { font-size: 1.9rem; }
  .hero6 .h3-cta { margin-top: 22px; }
  .hero6 .h3-cta__buttons .btn { flex: 1 1 auto; }
  .hero6__copy .hero__try:not(.is-on) { display: none; }
  .hero6__facts { margin-top: 20px; }
  .hero6__facts li { padding: 0 12px; }
  .hero6__stage .hero6__scene { height: 320px; }
  .hero6__badge { gap: 12px; padding: 8px 14px 8px 12px; width: max-content; max-width: calc(100% - 32px); }
  .hero6 .hero5__badge-txt { min-width: 0; }
  .hero6__glow { width: 460px; height: 460px; margin: -230px 0 0 -230px; }
}

/* =====================================================================
   v7 — редизайн реальной главной winmer.ru: светлый hero, линии 1px вместо теней
   ===================================================================== */

:root {
  /* Тени заменены тончайшими линиями; глубина появляется только при наведении */
  --sh-1: 0 0 0 1px rgba(16, 24, 40, .07);
  --sh-2: 0 0 0 1px rgba(16, 24, 40, .12), 0 10px 24px -16px rgba(16, 24, 40, .22);
  --sh-3: 0 0 0 1px rgba(16, 24, 40, .14), 0 18px 36px -22px rgba(16, 24, 40, .28);
  --surface: linear-gradient(180deg, #ffffff 0%, #fbfbfc 100%);
}
.pcard, .cat, .brand, .ncard, .rv, .filters, .psec, .icard, .plist, .rv-score, .rv-nav button { background: var(--surface); }
.pcard, .cat, .brand, .ncard, .rv { transition: box-shadow .25s var(--ease-out); }

/* ---------- Hero: светлый, компактный, сцена «парит» ---------- */

.hero7__stage {
  position: relative; height: 480px; overflow: hidden; isolation: isolate; perspective: 1800px; touch-action: pan-y;
  background:
    radial-gradient(46% 78% at 72% 54%, #ffffff 0%, rgba(255, 255, 255, .9) 35%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(180deg, #f6f7f9 0%, #eef1f4 100%);
  box-shadow: inset 0 -1px 0 var(--line);
}
.hero7__scene { position: absolute; inset: 0; z-index: 1; }
.hero7__glow {
  position: absolute; left: 0; top: 0; width: 600px; height: 600px; margin: -300px 0 0 -300px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(91, 140, 240, .16), rgba(91, 140, 240, .06) 50%, rgba(91, 140, 240, 0) 76%);
  transform: translate3d(var(--gx, 70vw), var(--gy, 240px), 0);
}
.hero7__layout { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; pointer-events: none; }
.hero7__copy { width: min(500px, 38vw); pointer-events: auto; }
.hero7__title { font-size: clamp(2.125rem, 3vw, 2.875rem); line-height: 1.06; font-weight: 680; letter-spacing: -0.028em; text-wrap: balance; }
.hero7__lead { margin-top: 14px; max-width: 40ch; font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.hero7__search { margin-top: 26px; }
.hero7 .search--hero .search__box { height: 54px; border: 0; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 8px 24px -16px rgba(16, 24, 40, .3); }
.hero7 .search--hero .search__box:focus-within { box-shadow: 0 0 0 2px var(--cold), 0 0 0 5px var(--cold-tint); }
.hero7 .search--hero .search__icon { width: 20px; height: 20px; margin-left: 16px; color: var(--ink-3); }
.hero7 .search--hero .search__input { font: 500 15px/1 var(--mono); letter-spacing: -0.02em; }
.hero7 .search--hero .search__input::placeholder { font-family: var(--sans); letter-spacing: 0; font-size: 15px; }
.hero7 .search--hero .search__submit { margin: 5px; padding: 0 20px; border-radius: 8px; font-size: 14px; }
.hero7__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.hero7__actions .btn { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; }
.hero7__badge { bottom: 20px; }

/* ---------- Преимущества: четыре иконки в строку, без карточек ---------- */

.adv { padding: 44px 0 4px; }
.adv__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.adv__list li { padding: 4px 28px; }
.adv__list li:first-child { padding-left: 0; }
.adv__list li + li { box-shadow: inset 1px 0 0 var(--line); }
.adv__icon { display: block; width: 44px; height: 44px; margin-bottom: 16px; padding: 11px; border-radius: 12px; background: var(--surface); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, .04); fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.adv__list b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.adv__list p { margin-top: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }

/* ---------- Секции, марки, категории, карточки ---------- */

.section { padding: 88px 0; }
.adv + .section { padding-top: 72px; }
.section__count { margin-left: 6px; font-size: .62em; font-weight: 500; letter-spacing: -0.03em; color: var(--ink-3); vertical-align: 0.18em; }
.brand { padding: 24px 12px 18px; gap: 14px; }
.brand b { font-weight: 500; color: var(--ink-2); transition: color .15s ease; }
@media (hover: hover) and (pointer: fine) { .brand:hover b { color: var(--ink); } }
.cat__facts { grid-template-columns: repeat(2, auto); justify-content: start; gap: 28px; }

.pcard__top { font-size: 12px; }
.pcard__oem { align-items: center; }
.pcard__k { margin-right: 2px; font: 500 11px var(--mono); letter-spacing: 0; color: var(--ink-3); }
.pcard__title { min-height: 2.6em; }
.pcard__foot { border-top: 1px solid var(--line); }
.pcard__badge { box-shadow: 0 0 0 1px rgba(16, 24, 40, .06); }

/* ---------- Есть вопросы по подбору деталей? ---------- */

.help { padding-top: 24px; }
.help__in { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 40px 48px; border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.help__title { font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1.15; font-weight: 650; letter-spacing: -0.022em; }
.help__in p { margin-top: 8px; max-width: 56ch; color: var(--ink-2); }
.help__actions { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }

@media (max-width: 1100px) {
  .adv__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .adv__list li:nth-child(3) { padding-left: 0; box-shadow: none; }
}
@media (max-width: 1024px) {
  .hero7__stage { height: auto; display: flex; flex-direction: column; }
  .hero7__layout { order: 0; height: auto; display: block; padding-top: 36px; }
  .hero7__copy { width: 100%; max-width: 620px; }
  .hero7__stage .hero7__scene { order: 1; position: relative; inset: auto; height: 380px; flex: none; }
  .hero7__badge { left: 50%; right: auto; transform: translateX(-50%); }
  .help__in { flex-direction: column; align-items: flex-start; padding: 32px; }
}
@media (max-width: 760px) {
  .hero7__layout { padding-top: 28px; }
  .hero7__title { font-size: 1.9rem; }
  .hero7__lead { font-size: 1rem; }
  .hero7 .search--hero .search__box { height: 52px; }
  .hero7__stage .hero7__scene { height: 320px; }
  .hero7__glow { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
  .adv { padding-top: 32px; }
  .adv__list { grid-template-columns: 1fr; row-gap: 22px; }
  .adv__list li, .adv__list li:first-child, .adv__list li:nth-child(3) { padding: 0; box-shadow: none; display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; }
  .adv__icon { grid-row: span 2; margin: 0; }
  .help__in { padding: 26px 22px; }
  .help__actions .btn { flex: 1 1 auto; }
}

/* Компактный hero: на выносках только названия узлов, данные — в бейдже */
.hero7 .h3-tag span { display: none; }
.hero7 .h3-tag b { font-size: 12.5px; font-weight: 600; }
.hero7 .h3-tag { padding: 2px 6px; }
/* Ритм секций: плотнее, без пустот */
.section { padding: 72px 0; }
.adv { padding: 40px 0 0; }
.adv + .section { padding-top: 64px; }
.section__head { margin-bottom: 28px; }

@media (max-width: 760px) { .adv__list li + li { box-shadow: none; } }

/* =====================================================================
   v8 — цельный hero с параллаксом, полоса доверия, подбор в три шага,
   редакционные категории. Цифры — Inter с табличными цифрами, без точек в нулях.
   ===================================================================== */

:root {
  --mono: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-11: 0.75rem;
  --fs-12: 0.8125rem;
  --fs-13: 0.84375rem;
  --tile: #ecf0f3; /* цвет фона студийного постера 00-poster.webp — стык невидим */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}

/* Артикулы, OEM, цены, телефоны: та же гарнитура, табличные цифры, ноль без точки и черты */
.mono, .num, .skuc, .oemc, .prow__sku, .prow__oem, .pcard__price, .prow__price, .results__price, .buy__price strong,
.dcard__nums b, .cat__facts b, .whp__i b, .stock .mono, .fopt .mono, .tag--spec, .hphone b, .footer__phone, .mega__phone,
.copy, .buy__keyspecs dd, .gallery__count, .toolbar__count b, .rv-score b, .cart-count, .mega__n, .mega__link span,
.search__input, .results__meta, .hero__try button, .fchip, .makes__letter h3, .steps li::before, .pcard__k, .oemc__more, .qty input {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "cv05", "cv11", "zero" 0;
  letter-spacing: -0.006em;
}
.pcard__price, .prow__price, .results__price, .buy__price strong, .hphone b, .footer__phone, .mega__phone, .dcard__nums b, .cat__facts b { word-spacing: normal; letter-spacing: -0.018em; }
.search__input::placeholder { letter-spacing: 0; }
/* В телефонах табличный дефис Inter слишком широкий — там пропорциональные цифры */
.hphone b, .footer__phone, .mega__phone, .ccard__v, .iside__help a, .ifacts dd, a[href^="tel:"].num { font-variant-numeric: proportional-nums; font-feature-settings: "cv05", "cv11"; }
.skuc { font-weight: 600; font-size: 13.5px; }
.oemc { font-size: 13px; font-weight: 500; }
.pcard__k { font-size: 12px; font-weight: 500; letter-spacing: 0; }
.mega__n, .mega__link span { font-size: 12.5px; }

/* ---------- Заголовок секции со ссылкой-стрелкой ---------- */

.sh { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 32px; }
.sh__title { font-size: clamp(1.75rem, 2.3vw, 2.25rem); line-height: 1.1; font-weight: 650; letter-spacing: -0.024em; }
.sh__count { margin-left: 4px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.sh__sub { margin-top: 10px; max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.sh__tools { display: flex; align-items: center; gap: 16px; flex: none; }
.sh__link {
  display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px 0 20px; border: 0; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out);
}
.sh__arrow { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); }
.sh__link[aria-expanded="true"] .sh__arrow { transform: rotate(90deg); }
.sh__link:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .sh__link:hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ink); }
  .sh__link:hover .sh__arrow { transform: translateX(3px); }
  .sh__link[aria-expanded="true"]:hover .sh__arrow { transform: rotate(90deg); }
}
.more { display: flex; justify-content: center; margin-top: 36px; }
.sh__link[hidden] { display: none; }

/* ---------- Hero: светлая инженерная сетка, цельный компрессор ---------- */

.hero8__stage {
  position: relative; height: 500px; overflow: hidden; isolation: isolate; perspective: 1800px; touch-action: pan-y;
  background:
    radial-gradient(40% 70% at 71% 52%, #ffffff 0%, rgba(255, 255, 255, .94) 36%, rgba(255, 255, 255, 0) 74%),
    linear-gradient(180deg, #f5f6f8 0%, #eef1f4 100%);
  box-shadow: inset 0 -1px 0 var(--line);
}
/* Две сетки: мелкая 24px и основная 96px, как на миллиметровке. Гаснет к тексту и краям */
.hero8__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(16, 24, 40, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 40, .065) 1px, transparent 1px),
    linear-gradient(rgba(16, 24, 40, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 24, 40, .03) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px, 24px 24px, 24px 24px;
  background-position: calc(50% + 48px) 50%;
  -webkit-mask-image: radial-gradient(52% 92% at 71% 52%, #000 0%, rgba(0, 0, 0, .55) 50%, transparent 82%);
  mask-image: radial-gradient(52% 92% at 71% 52%, #000 0%, rgba(0, 0, 0, .55) 50%, transparent 82%);
}
.hero8__scene { position: absolute; inset: 0; z-index: 1; }
.hero8__glow {
  position: absolute; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(91, 140, 240, .12), rgba(91, 140, 240, .04) 55%, rgba(91, 140, 240, 0) 78%);
  transform: translate3d(var(--gx, 70vw), var(--gy, 250px), 0);
}
.hero8__layout { position: relative; z-index: 2; display: flex; align-items: center; height: 100%; pointer-events: none; }
.hero8__copy { width: min(520px, 39vw); pointer-events: auto; }
.hero8__title { font-size: clamp(2.25rem, 3.1vw, 3rem); line-height: 1.05; font-weight: 680; letter-spacing: -0.03em; text-wrap: balance; }
.hero8__lead { margin-top: 16px; max-width: 40ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.hero8__search { margin-top: 28px; }
.hero8 .search--hero .search__box { height: 56px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 10px 28px -18px rgba(16, 24, 40, .32); }
.hero8 .search--hero .search__box:focus-within { box-shadow: 0 0 0 2px var(--cold), 0 0 0 6px var(--cold-tint); }
.hero8 .search--hero .search__icon { width: 20px; height: 20px; margin-left: 18px; color: var(--ink-3); }
.hero8 .search--hero .search__input { font-size: 15.5px; font-weight: 500; }
.hero8 .search--hero .search__input::placeholder { font-size: 15.5px; font-weight: 400; }
.hero8 .search--hero .search__submit { margin: 6px; padding: 0 22px; border-radius: 10px; font-size: 14.5px; }
.hero8__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hero8__actions .btn { height: 44px; padding: 0 18px; border-radius: 11px; font-size: 14.5px; }

/* ---------- Полоса доверия ---------- */

.trust { background: #fff; box-shadow: inset 0 -1px 0 var(--line); }
.trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust__list li { display: flex; align-items: flex-start; gap: 16px; padding: 34px 28px 34px 32px; }
.trust__list li:first-child { padding-left: 0; }
.trust__list li + li { box-shadow: inset 1px 0 0 var(--line); }
.trust__icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #f4f6f8; box-shadow: inset 0 0 0 1px var(--line); }
.trust__icon svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.trust__list b { display: block; padding-top: 1px; font-size: 15px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.trust__list li > div > span { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.trust + .section { padding-top: 80px; }

/* ---------- Подбор: три шага в одной панели ---------- */

.picker {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0; margin-bottom: 20px; padding: 6px; border-radius: 18px;
  background: #fff; box-shadow: 0 0 0 1px var(--line-2), 0 1px 2px rgba(16, 24, 40, .04);
}
.picker__step { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 18px; border-radius: 13px; cursor: pointer; transition: background-color .15s ease, box-shadow .15s ease; }
.picker__step + .picker__step::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--line); }
.picker__step:focus-within { box-shadow: inset 0 0 0 2px var(--cold); }
.picker__step:focus-within::before, .picker__step:focus-within + .picker__step::before { opacity: 0; }
.picker__n {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.picker__step:has(select:not(:disabled)) .picker__n { background: var(--ink); color: #fff; box-shadow: none; }
.picker__body { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.picker__body small { font-size: 12.5px; line-height: 1.3; color: var(--ink-3); }
.picker select {
  width: 100%; margin: 2px 0 0; padding: 0 22px 0 0; border: 0; outline: none; appearance: none; -webkit-appearance: none; text-overflow: ellipsis;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2314171b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 12px no-repeat;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); cursor: pointer;
}
.picker select:disabled { font-weight: 500; color: var(--ink-3); cursor: default; opacity: .8; }
.picker__step:has(select:disabled) { cursor: default; }
.picker__go { align-self: stretch; height: auto; min-height: 60px; padding: 0 26px; border-radius: 13px; font-size: 15px; font-variant-numeric: tabular-nums; }
.picker__go:disabled { opacity: .4; cursor: default; }
@media (hover: hover) and (pointer: fine) { .picker__step:has(select:not(:disabled)):hover { background: #f6f7f9; } }

/* Марки: монохромные знаки в микрокарточках, единый оптический размер */
.brands2 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mcard {
  display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 12px 18px; border-radius: 16px;
  background: #fff; box-shadow: 0 0 0 1px var(--line);
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.mcard { overflow: hidden; }
.pcard__top > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mcard__logo { display: grid; place-items: center; width: 100%; height: 48px; }
.mcard__logo img { width: 104px; height: 40px; object-fit: contain; transform: scale(var(--s, 1)); filter: grayscale(1) brightness(.62) contrast(1.3); opacity: .74; transition: opacity .25s ease, transform .35s var(--ease-out); }
.mcard__txt { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mcard__txt b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.mcard__txt small { margin-top: 2px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.mcard:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .mcard:hover { box-shadow: 0 0 0 1px var(--line-2), 0 14px 30px -20px rgba(16, 24, 40, .35); transform: translateY(-2px); }
  .mcard:hover .mcard__logo img { opacity: 1; transform: scale(calc(var(--s, 1) * 1.04)); }
}
.brands-all { margin-top: 28px; padding-top: 28px; box-shadow: inset 0 1px 0 var(--line); }

/* ---------- Основные категории: редакционная сетка ---------- */

.ecats { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 316px 316px; gap: 16px; }
.ecat { position: relative; display: flex; overflow: hidden; isolation: isolate; border-radius: 22px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .04); }
.ecat--compressor { grid-column: 1; grid-row: 1 / span 2; }
.ecat--clutch { grid-column: 2 / span 2; grid-row: 1; }
.ecat--valve { grid-column: 2; grid-row: 2; }
.ecat--bearing { grid-column: 3; grid-row: 2; }
.ecat__art { position: absolute; z-index: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; gap: 4%; }
/* multiply растворяет светлый ореол вырезок в фоне плитки */
.ecat__art img { height: 100%; width: auto; max-width: none; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--ease-out); }
.ecat__art.is-poster { inset: 0; }
.ecat__art.is-poster img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 64%; mix-blend-mode: normal; transform: scale(1.08); }
.ecat--clutch .ecat__art { top: 18px; bottom: 18px; right: 6%; width: 50%; }
.ecat--valve .ecat__art, .ecat--bearing .ecat__art { top: 24px; right: 24px; height: 58%; }
.ecat__body { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; padding: 28px 28px 26px; }
.ecat__name { font-size: 1.375rem; line-height: 1.15; font-weight: 650; letter-spacing: -0.02em; }
.ecat--compressor .ecat__name { font-size: clamp(1.75rem, 2.4vw, 2.375rem); letter-spacing: -0.026em; }
.ecat__desc { margin-top: 8px; max-width: 30ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ecat--valve .ecat__desc, .ecat--bearing .ecat__desc { display: none; }
.ecat--valve .ecat__name, .ecat--bearing .ecat__name { max-width: 9ch; }
.ecat__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; }
.ecat__n b { display: block; font-size: 1.25rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; }
.ecat__n small { display: block; margin-top: 3px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.ecat__go { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(16, 24, 40, .06); transition: background-color .25s ease, color .25s ease; }
.ecat__go .sh__arrow { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .ecat:hover .ecat__go { background: var(--ink); color: #fff; }
  .ecat:hover .ecat__go .sh__arrow { transform: translateX(2px); }
  .ecat:hover .ecat__art img { transform: scale(1.035); }
  .ecat:hover .ecat__art.is-poster img { transform: scale(1.11); }
}

/* ---------- Каталог в наличии: вкладки, карточки, «В корзину» ---------- */

.seg--tabs { gap: 2px; padding: 4px; border-radius: 13px; background: #f1f3f5; box-shadow: inset 0 0 0 1px var(--line); }
.seg--tabs button { height: 38px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 550; color: var(--ink-2); transition: color .15s ease, background-color .15s ease, box-shadow .2s ease, transform .16s var(--ease-out); }
.seg--tabs button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .08); }
@media (hover: hover) and (pointer: fine) { .seg--tabs button:not([aria-pressed="true"]):hover { color: var(--ink); background: rgba(255, 255, 255, .65); } }
.seg--tabs button:focus-visible { outline: 2px solid var(--cold); outline-offset: -2px; }

.pgrid { transition: opacity .28s var(--ease-out); }
.pgrid.is-swap { opacity: 0; transition: none; }
.pgrid--home { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pcard { border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .3s var(--ease-out); }
.pcard__img { background: #f6f7f9; }
.pcard__img img { mix-blend-mode: multiply; }
.pcard__body { gap: 10px; padding: 16px 18px 18px; }
.pcard__top { align-items: center; color: var(--ink-3); font-size: 12.5px; font-weight: 500; }
.pcard__title { font-size: 15.5px; font-weight: 600; line-height: 1.35; }
.pcard__oem { display: flex; gap: 8px; margin-top: 0; }
.pcard__oem .oemc { height: 28px; border-color: var(--line); background: #f8f9fa; }
.pcard__foot { gap: 12px; padding-top: 14px; border-top: 1px solid var(--line); }
.pcard__price { font-size: 1.3125rem; font-weight: 650; color: var(--ink); }
.pcard__badge { height: 26px; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .pcard:hover { box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -26px rgba(16, 24, 40, .4); } }

.buy-btn { height: 40px; padding: 0 16px; border-radius: 11px; gap: 8px; font-size: 14px; font-weight: 600; }
.buy-btn .icon { width: 18px; height: 18px; }
.buy-btn[aria-pressed="true"] { background: var(--ok-tint); color: var(--ok); box-shadow: inset 0 0 0 1px rgba(18, 112, 74, .25) !important; }
.buy-btn.is-added { animation: buy-press .42s var(--ease-out); }
.buy-btn.is-added .icon { animation: buy-check .5s var(--ease-out); }
.buy-btn.is-added .icon path { stroke-dasharray: 22; stroke-dashoffset: 22; animation: buy-draw .38s var(--ease-out) .06s forwards; }
@keyframes buy-press { 0% { transform: scale(.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes buy-check { from { transform: scale(.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes buy-draw { to { stroke-dashoffset: 0; } }
.cart-count { min-width: 20px; height: 20px; font-size: 11.5px; font-weight: 650; line-height: 20px; }
.cart-count.is-bump { animation: cart-bump .5s var(--ease-out); }
@keyframes cart-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); background: var(--cold); } 100% { transform: scale(1); } }

/* ---------- Статьи и новости: горизонтальная лента ---------- */

.ntrack {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 3.3); column-gap: 20px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0; scrollbar-width: none; padding: 1px 1px 6px;
}
.ntrack::-webkit-scrollbar { display: none; }
.ncard2 { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .3s var(--ease-out); }
.ncard2__img { aspect-ratio: 16 / 10; background: var(--tile); overflow: hidden; }
.ncard2__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.ncard2__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 24px; }
.ncard2__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ncard2__meta b { font-weight: 600; color: var(--cold); }
.ncard2 h3 { font-size: 1.0625rem; line-height: 1.32; font-weight: 600; letter-spacing: -0.012em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s ease; }
.ncard2 p { font-size: 14px; line-height: 1.55; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (hover: hover) and (pointer: fine) {
  .ncard2:hover { box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -26px rgba(16, 24, 40, .4); }
  .ncard2:hover h3 { color: var(--cold); }
  .ncard2:hover .ncard2__img img { transform: scale(1.035); }
}
.ngrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1100px) { .ngrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ngrid { grid-template-columns: 1fr; } }
.rv-nav button { box-shadow: inset 0 0 0 1px var(--line-2); background: #fff; color: var(--ink); transition: background-color .2s ease, color .2s ease, opacity .2s ease, transform .16s var(--ease-out); }
.rv-nav button:disabled { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .rv-nav button:not(:disabled):hover { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px var(--ink); } }
.rv-track { scroll-snap-type: x mandatory; }
.rv-track > * { scroll-snap-align: start; }

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

@media (max-width: 1200px) {
  .brands2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pgrid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ntrack { grid-auto-columns: calc((100% - 2 * 20px) / 2.4); }
}
@media (max-width: 1100px) {
  .trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__list li:nth-child(3) { padding-left: 0; box-shadow: inset 0 1px 0 var(--line); }
  .trust__list li:nth-child(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
  .picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .picker__go { grid-column: 1 / -1; min-height: 52px; margin-top: 6px; }
  .ecats { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 420px 300px 300px; }
  .ecat--compressor { grid-column: 1 / -1; grid-row: 1; }
  .ecat--clutch { grid-column: 1 / -1; grid-row: 2; }
  .ecat--valve { grid-column: 1; grid-row: 3; }
  .ecat--bearing { grid-column: 2; grid-row: 3; }
  .ecat--compressor .ecat__art.is-poster img { object-position: 78% 50%; transform: scale(1.04); }
}
@media (max-width: 1024px) {
  .hero8__stage { height: auto; display: flex; flex-direction: column; }
  .hero8__layout { order: 0; height: auto; display: block; padding-top: 36px; }
  .hero8__copy { width: 100%; max-width: 620px; }
  .hero8__stage .hero8__scene { order: 1; position: relative; inset: auto; height: 380px; flex: none; }
  .hero8__grid { -webkit-mask-image: radial-gradient(90% 55% at 50% 76%, #000 15%, transparent 80%); mask-image: radial-gradient(90% 55% at 50% 76%, #000 15%, transparent 80%); }
  .hero8__stage { background: radial-gradient(70% 45% at 50% 76%, #fff 0%, rgba(255, 255, 255, 0) 75%), linear-gradient(180deg, #f5f6f8 0%, #eef1f4 100%); }
}
@media (max-width: 760px) {
  .sh { margin-bottom: 24px; }
  .sh__tools { width: 100%; justify-content: space-between; }
  .hero8__layout { padding-top: 28px; }
  .hero8__title { font-size: 2rem; }
  .hero8__lead { font-size: 1rem; }
  .hero8 .search--hero .search__box { height: 54px; }
  .hero8 .search--hero .search__submit { padding: 0 16px; }
  .hero8__actions .btn { flex: 1 1 auto; }
  .hero8__stage .hero8__scene { height: 320px; }
  .hero8__glow { width: 400px; height: 400px; margin: -200px 0 0 -200px; }
  .trust__list { grid-template-columns: 1fr; }
  .trust__list li, .trust__list li:first-child, .trust__list li:nth-child(3), .trust__list li:nth-child(4) { padding: 20px 0; box-shadow: none; }
  .trust__list li + li { box-shadow: inset 0 1px 0 var(--line); }
  .trust + .section { padding-top: 56px; }
  .picker { grid-template-columns: 1fr; padding: 4px; }
  .picker__step + .picker__step::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
  .picker__go { grid-column: auto; }
  .brands2 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mcard { padding: 18px 8px 14px; gap: 10px; border-radius: 14px; }
  .mcard__logo img { width: 84px; height: 34px; }
  .mcard__txt b { font-size: 13px; }
  .mcard__txt small { font-size: 12px; }
  .ecats { grid-template-columns: 1fr 1fr; grid-template-rows: 380px 260px 260px; gap: 10px; }
  .ecat { border-radius: 18px; }
  .ecat__body { padding: 20px; }
  .ecat--compressor .ecat__art.is-poster img { object-position: 50% 60%; transform: scale(1.22); }
  .ecat--clutch .ecat__art { width: 46%; right: 2%; }
  .ecat--clutch .ecat__desc { max-width: 20ch; }
  .ecat--valve .ecat__art, .ecat--bearing .ecat__art { top: 16px; right: 16px; height: 46%; }
  .ecat__name { font-size: 1.1875rem; }
  .ecat__go { width: 40px; height: 40px; }
  .ecat--valve .ecat__go, .ecat--bearing .ecat__go { display: none; }
  .ecat__n b { font-size: 1.0625rem; }
  .pgrid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard__body { padding: 12px 12px 14px; }
  .pcard__title { font-size: 14px; }
  .pcard__foot { flex-direction: column; align-items: stretch; }
  .pcard__price { font-size: 1.125rem; }
  .buy-btn { width: 100%; }
  .ntrack { grid-auto-columns: 84%; column-gap: 12px; }
}

/* ---------- Внутренние страницы: боковая навигация, секции в две колонки ---------- */

.ipage { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 64px; align-items: start; padding: 28px 0 96px; }
.iside { position: sticky; top: calc(var(--header-h) + 28px); display: flex; flex-direction: column; gap: 28px; }
.iside__group + .iside__group { margin-top: 22px; }
.iside h2 { margin-bottom: 8px; padding: 0 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.iside__nav a, .iside__toc a {
  position: relative; display: block; padding: 8px 12px; border-radius: 9px; font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--ink-2);
  transition: background-color .15s ease, color .15s ease;
}
.iside__nav a[aria-current="page"] { background: #fff; color: var(--ink); font-weight: 600; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(16, 24, 40, .05); }
.iside__toc { padding-top: 24px; box-shadow: inset 0 1px 0 var(--line); }
.iside__toc a { padding: 6px 12px 6px 14px; font-size: 13.5px; border-radius: 0; }
.iside__toc a::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 1px; background: transparent; transition: background-color .2s ease; }
.iside__toc a[aria-current] { color: var(--ink); }
.iside__toc a[aria-current]::before { background: var(--cold); }
@media (hover: hover) and (pointer: fine) {
  .iside__nav a:not([aria-current]):hover { background: rgba(16, 24, 40, .04); color: var(--ink); }
  .iside__toc a:hover { color: var(--ink); }
}
.iside__help { padding: 20px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.iside__help b { display: block; font-size: 14.5px; font-weight: 600; }
.iside__help p { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.iside__help a { display: inline-block; margin-top: 12px; font-size: 15px; font-weight: 650; color: var(--cold); }

.ibody { min-width: 0; max-width: 1000px; }
.ihead2 { padding-bottom: 40px; }
.ihead2 h1 { max-width: 20ch; font-size: clamp(2.25rem, 3.4vw, 3.25rem); line-height: 1.05; font-weight: 680; letter-spacing: -0.03em; text-wrap: balance; }
.ihead2 > p { margin-top: 18px; max-width: 62ch; font-size: 1.125rem; line-height: 1.6; color: var(--ink-2); }
.ifacts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 36px; box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.ifacts div { display: flex; flex-direction: column-reverse; gap: 4px; padding: 22px 24px; }
.ifacts div:first-child { padding-left: 0; }
.ifacts div + div { box-shadow: inset 1px 0 0 var(--line); }
.ifacts dd { margin: 0; font-size: 1.625rem; line-height: 1.15; font-weight: 650; letter-spacing: -0.022em; font-variant-numeric: tabular-nums; }
.ifacts dt { font-size: 13.5px; color: var(--ink-3); }

.isec { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; padding: 44px 0; box-shadow: inset 0 1px 0 var(--line); scroll-margin-top: calc(var(--header-h) + 24px); }
.ihead2 + .isec { box-shadow: none; padding-top: 8px; }
.isec__head h2 { font-size: 1.375rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.isec__head p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.isec__body { min-width: 0; }

.igrid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; border-radius: 16px; background: var(--line); box-shadow: 0 0 0 1px var(--line); }
.igrid2 > div { padding: 22px 24px; background: #fff; }
.igrid2 > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.igrid2 b { display: block; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.igrid2 p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.igrid2 small { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ok); }

/* Шаги — настоящая последовательность, поэтому с номерами и соединительной линией */
.isteps { counter-reset: st; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 16px; }
.isteps li { counter-increment: st; position: relative; padding-top: 44px; }
.isteps li::before { content: counter(st); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.isteps li::after { content: ""; position: absolute; left: 38px; right: -8px; top: 15px; height: 1px; background: var(--line-2); }
.isteps li:last-child::after { display: none; }
.isteps b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.isteps p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.isec .faq { margin-top: -14px; }
.isec .faq summary { font-size: 15.5px; padding: 18px 0; }
.isec .faq details p { font-size: 14.5px; line-height: 1.6; }

/* Контактные карточки с действиями */
.ccards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ccard, .place { display: flex; flex-direction: column; padding: 22px 24px 18px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.ccard small, .place small { font-size: 13px; font-weight: 500; color: var(--ink-3); }
.ccard__v { margin-top: 6px; font-size: 1.375rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.018em; color: var(--ink); align-self: flex-start; }
.ccard--main .ccard__v { color: var(--cold); }
.ccard p, .place p { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.ccard__acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 16px; }
.iact {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: #f3f5f7; color: var(--ink);
  font-size: 13.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .16s var(--ease-out);
}
.iact .icon { width: 16px; height: 16px; }
.iact[data-done], .rtable__copy[data-done] { color: var(--ok); }
.iact:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .iact:hover { background: var(--ink); color: #fff; } }
.places2 { display: grid; gap: 12px; }
.place { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; grid-template-areas: "pin k acts" "pin b acts" "pin p acts"; column-gap: 18px; align-items: start; }
.place__pin { grid-area: pin; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--cold-tint); color: var(--cold); }
.place small { grid-area: k; }
.place b { grid-area: b; }
.place p { grid-area: p; max-width: 46ch; }
.place .ccard__acts { grid-area: acts; flex-direction: column; align-items: stretch; margin: 0; padding: 0; }
.place__pin .icon { width: 18px; height: 18px; }
.place b { margin-top: 4px; font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }

/* Реквизиты: таблица с копированием каждой строки */
.rtable { overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.rtable__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 16px 24px; box-shadow: inset 0 -1px 0 var(--line); }
.rtable__top b { font-size: 15.5px; font-weight: 600; }
.rtable table { font-size: 14.5px; }
.rtable tr + tr { box-shadow: inset 0 1px 0 var(--line); }
.rtable th, .rtable td { padding: 13px 0; text-align: left; vertical-align: middle; }
.rtable th { width: 38%; padding-left: 24px; font-weight: 400; color: var(--ink-2); }
.rtable td .num { font-weight: 500; color: var(--ink); }
.rtable td:last-child { width: 56px; padding-right: 12px; text-align: right; }
.rtable__copy { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .16s var(--ease-out); }
.rtable__copy .icon { width: 16px; height: 16px; }
.rtable__copy:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  .rtable tr:hover { background: #fafbfc; }
  .rtable__copy:hover { background: #eef1f4; color: var(--ink); }
}

@media (max-width: 1100px) {
  .ipage { grid-template-columns: 200px minmax(0, 1fr); gap: 40px; }
  .isec { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 860px) {
  .ipage { grid-template-columns: 1fr; gap: 24px; padding-top: 16px; }
  .iside { position: static; gap: 0; }
  .iside__nav { display: flex; gap: 4px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 4px; overflow-x: auto; scrollbar-width: none; }
  .iside__nav::-webkit-scrollbar { display: none; }
  .iside__group { display: contents; }
  .iside__group h2 { display: none; }
  .iside__nav a { flex: none; padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
  .iside__toc, .iside__help { display: none; }
}
@media (max-width: 760px) {
  .ihead2 { padding-bottom: 28px; }
  .ihead2 h1 { font-size: 2.125rem; }
  .ihead2 > p { font-size: 1rem; }
  .ifacts { grid-template-columns: 1fr; }
  .ifacts div, .ifacts div:first-child { padding: 16px 0; }
  .ifacts div + div { box-shadow: inset 0 1px 0 var(--line); }
  .ifacts dd { font-size: 1.375rem; }
  .isec { padding: 32px 0; }
  .igrid2, .ccards { grid-template-columns: 1fr; }
  .igrid2 > div { padding: 18px 20px; }
  .isteps { grid-auto-flow: row; gap: 0; }
  .isteps li { padding: 0 0 22px 46px; min-height: 30px; }
  .isteps li::after { left: 15px; right: auto; top: 36px; bottom: 6px; width: 1px; height: auto; }
  .isteps li:last-child { padding-bottom: 0; }
  .rtable th { width: auto; padding-left: 16px; }
  .rtable__top { flex-direction: column; align-items: flex-start; padding: 16px; }
  .rtable td .num { word-break: break-all; }
  .place { grid-template-columns: 36px minmax(0, 1fr); grid-template-areas: "pin k" "pin b" "pin p" "acts acts"; }
  .place .ccard__acts { flex-direction: row; margin-top: 14px; }
}


/* =====================================================================
   v10 — ленты товаров и «Комплектующие для ремонта», как на winmer.ru
   ===================================================================== */

/* Ленты: ровно четыре карточки в ряд, прокрутка стрелками, щелчком мыши или свайпом */
.prail {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); column-gap: 16px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 1px 1px 4px;
}
.prail::-webkit-scrollbar { display: none; }
.prail > .pcard { scroll-snap-align: start; min-width: 0; }
.section--rail + .section--rail { padding-top: 24px; }

/* Комплектующие для ремонта: три колонки в одной панели, разделены линиями 1px */
.repair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.repair__col { display: flex; flex-direction: column; min-width: 0; padding: 26px 28px 24px; }
.repair__col + .repair__col { box-shadow: inset 1px 0 0 var(--line); }
.repair__head { display: flex; align-items: center; gap: 16px; }
.repair__art { flex: none; display: grid; place-items: center; width: 64px; height: 64px; padding: 8px; border-radius: 14px; background: var(--tile); }
/* Абсолютная посадка: у высоких вырезок (клапан 395×1424) grid-элемент иначе растягивается на натуральную высоту */
.repair__art { position: relative; }
.repair__art img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; mix-blend-mode: multiply; transition: transform .5s var(--ease-out); }
.repair__name { display: flex; flex-direction: column; min-width: 0; }
.repair__name b { font-size: 1.125rem; line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; transition: color .15s ease; }
.repair__name small { margin-top: 3px; font-size: 13.5px; color: var(--ink-3); }
.repair__lead { margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.repair__subs { margin-top: 10px; }
.repair__subs li + li { box-shadow: inset 0 1px 0 var(--line); }
.repair__subs a { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -10px; padding: 11px 10px; border-radius: 9px; font-size: 14.5px; font-weight: 500; transition: background-color .15s ease, color .15s ease; }
.repair__subs .num { font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
.repair__all { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 18px; font-size: 14.5px; font-weight: 600; color: var(--cold); }
.repair__all .sh__arrow { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .repair__head:hover b { color: var(--cold); }
  .repair__head:hover .repair__art img { transform: scale(1.06); }
  .repair__subs a:hover { background: #f4f6f8; color: var(--ink); }
  .repair__subs a:hover .num { color: var(--ink-2); }
  .repair__all:hover .sh__arrow { transform: translateX(3px); }
}

@media (max-width: 1200px) { .prail { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 1100px) {
  .repair { grid-template-columns: 1fr; }
  .repair__col + .repair__col { box-shadow: inset 0 1px 0 var(--line); }
}
@media (max-width: 760px) {
  .prail { grid-auto-columns: 72%; column-gap: 10px; }
  .repair__col { padding: 22px 20px 20px; }
  .section--rail .sh__tools .rv-nav { display: none; }
}
/* Узкие карточки (две в ряд на телефоне): OEM одной строкой, без подписи и счётчика */
@media (max-width: 760px) {
  .pcard__oem { flex-wrap: nowrap; min-width: 0; overflow: hidden; }
  .pcard__oem .pcard__k, .pcard__oem .oemc__more { display: none; }
  .pcard__oem .oemc { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .pcard__top > span { display: none; }
}

/* =====================================================================
   v12 — hero без шума: компрессор на студийной сцене #F4F5F7,
   переключатель «Снаружи / В разрезе» с перекрёстным затуханием
   ===================================================================== */

.hero9 { background: #f4f5f7; box-shadow: inset 0 -1px 0 var(--line); }
.hero9__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: center; gap: 56px; min-height: 500px; padding-top: 28px; padding-bottom: 28px; }
.hero9__copy { max-width: 540px; }
.hero9__title { font-size: clamp(2.25rem, 3.1vw, 3rem); line-height: 1.05; font-weight: 680; letter-spacing: -0.03em; text-wrap: balance; }
.hero9__lead { margin-top: 16px; max-width: 44ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); }
.hero9__search { margin-top: 28px; }
.hero9 .search--hero .search__box { height: 56px; border: 0; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(16, 24, 40, .1), 0 1px 2px rgba(16, 24, 40, .04); transition: box-shadow .2s ease; }
.hero9 .search--hero .search__box:focus-within { box-shadow: 0 0 0 2px var(--cold), 0 0 0 6px var(--cold-tint); }
.hero9 .search--hero .search__icon { width: 20px; height: 20px; margin-left: 18px; color: var(--ink-3); }
.hero9 .search--hero .search__input { font-size: 15.5px; font-weight: 500; }
.hero9 .search--hero .search__input::placeholder { font-size: 15.5px; font-weight: 400; }
.hero9 .search--hero .search__submit { margin: 6px; padding: 0 22px; border-radius: 10px; font-size: 14.5px; }
.hero9__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hero9__actions .btn { height: 44px; padding: 0 18px; border-radius: 11px; font-size: 14.5px; }

@media (max-width: 1100px) { .hero9__in { gap: 32px; } }
@media (max-width: 1024px) {
  .hero9__in { grid-template-columns: 1fr; min-height: 0; gap: 20px; padding-top: 36px; padding-bottom: 28px; }
  .hero9__copy { max-width: 620px; }
  .cad { width: 100%; max-width: 640px; justify-self: center; }
}
@media (max-width: 760px) {
  .hero9__in { padding-top: 28px; }
  .hero9__title { font-size: 2rem; }
  .hero9__lead { font-size: 1rem; }
  .hero9 .search--hero .search__box { height: 54px; }
  .hero9 .search--hero .search__submit { padding: 0 16px; }
  .hero9__actions .btn { flex: 1 1 auto; }
}


/* =====================================================================
   v13 — «Kinetic CAD»: инженерная сетка и свет в фоне hero,
   разрез по наведению шторкой, периодическая полоса-сканер
   ===================================================================== */

/* Фон: ровный светлый титан #F5F6F8 и мягкий свет за компрессором — без сеток и узоров.
   Холодный оттенок сверху и тёплый снизу повторяют цвета потока (контуры низкого и высокого давления) */
.hero9 { position: relative; isolation: isolate; overflow: hidden; background: #f4f5f7; }
.hero9::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* Студийный свет: яркое пятно за компрессором, многоступенчатый спад, холодный отсвет сверху,
   тёплый снизу (цвета контуров) и глубокая виньетка по краям секции */
.hero9::before {
  background:
    radial-gradient(26% 46% at 72% 47%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .82) 30%, rgba(255, 255, 255, .45) 58%, rgba(255, 255, 255, 0) 82%),
    /* Боковые отсветы: холодный циан слева, тёплый янтарь справа — обрамляют секцию цветом */
    radial-gradient(34% 90% at -4% 50%, rgba(56, 182, 240, .13) 0%, rgba(56, 182, 240, .05) 45%, rgba(56, 182, 240, 0) 78%),
    radial-gradient(34% 90% at 104% 50%, rgba(255, 140, 40, .13) 0%, rgba(240, 96, 40, .05) 45%, rgba(240, 96, 40, 0) 78%),
    radial-gradient(40% 34% at 74% 20%, rgba(70, 190, 240, .06) 0%, rgba(70, 190, 240, 0) 74%),
    radial-gradient(40% 34% at 72% 84%, rgba(255, 107, 0, .045) 0%, rgba(229, 57, 53, .02) 45%, rgba(229, 57, 53, 0) 74%),
    radial-gradient(150% 120% at 64% 48%, rgba(244, 245, 247, 0) 0%, rgba(244, 245, 247, 0) 42%, rgba(16, 24, 40, .035) 70%, rgba(16, 24, 40, .085) 100%);
}

/* Линии потока: под контентом. Гаснут ко всем краям секции — слева шире, чтобы не мешать тексту.
   Две маски пересекаются: по горизонтали и по вертикали */
.hero9__flow {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, .45) 40%, #000 54%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, transparent 28%, rgba(0, 0, 0, .45) 40%, #000 54%, #000 86%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.hero9.is-flow .hero9__flow { opacity: 1; }
/* Без z-index: колонка не должна становиться отдельным слоем, иначе снимку не на что умножаться */
.hero9__in { position: relative; }

/* Сцена: группа умножается на фон целиком; внутри слои смешиваются обычно */
.cad { position: relative; margin: 0; min-width: 0; }
.cad__stage { position: relative; width: 100%; aspect-ratio: 1672 / 941; mix-blend-mode: multiply; }
.cad__layer { position: absolute; inset: 0; }
.cad picture img { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* Разрез закрыт по умолчанию; loupe.js открывает его кругом clip-path под курсором */
.cad__xray { clip-path: circle(0 at 50% 50%); will-change: clip-path; }
.cad__stage { touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.cad.is-loupe .cad__stage { cursor: none; }

/* Лупа: металлический ободок, тонкая светлая кромка, перекрестие с зазором, мягкая тень */
.loupe {
  --r: 88px;
  position: absolute; left: 0; top: 0; z-index: 2; width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border-radius: 50%; pointer-events: none; opacity: 0; will-change: transform, opacity;
  box-shadow: 0 22px 44px -16px rgba(16, 24, 40, .42), 0 4px 10px -4px rgba(16, 24, 40, .22), inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 0 22px rgba(16, 24, 40, .14);
}
.loupe svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.loupe__rim { fill: none; stroke: url(#loupe-metal); stroke-width: 3; vector-effect: non-scaling-stroke; }
.loupe__edge { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 1; vector-effect: non-scaling-stroke; }
.loupe__ticks { fill: none; stroke: rgba(20, 23, 27, .7); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
/* Светлое перекрестие с тёмным контуром читается и на металле, и на тёмных деталях */
.loupe__cross { fill: none; stroke: rgba(255, 255, 255, .9); stroke-width: 1; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 1px rgba(10, 14, 20, .75)); }
.loupe__dot { fill: #fff; filter: drop-shadow(0 0 1px rgba(10, 14, 20, .75)); }

@media (max-width: 1024px) {
  .hero9::before {
    background:
      radial-gradient(60% 30% at 50% 76%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .5) 50%, rgba(255, 255, 255, 0) 80%),
      radial-gradient(140% 110% at 50% 70%, rgba(244, 245, 247, 0) 45%, rgba(16, 24, 40, .06) 100%);
  }
  .hero9__flow {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, transparent 36%, #000 52%, #000 93%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, transparent 36%, #000 52%, #000 93%, transparent 100%), linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
  .cad { width: 100%; max-width: 640px; justify-self: center; }
}
/* Без движения: неподвижные линии тока; лупа (loupe.js) следует за курсором без инерции */
@media (prefers-reduced-motion: reduce) {
  .hero9__flow { transition: none; }
}

/* =====================================================================
   v14 — свои выпадающие списки, подбор по авто целиком кликабелен
   ===================================================================== */

.picker__cell { position: relative; min-width: 0; }
.picker__cell + .picker__cell::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 1px; background: var(--line); z-index: 1; pointer-events: none; }
.picker__step + .picker__step::before { display: none; }
.picker__step {
  width: 100%; height: 100%; min-height: 64px; margin: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: left;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.picker__step:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--cold); }
.picker__step.is-open { background: #f3f6fc; }
.picker__step:disabled { cursor: default; }
.picker__step:disabled .picker__body b { color: var(--ink-3); font-weight: 500; }
.picker__step:disabled .picker__chev { opacity: .35; }
.picker__step:not(:disabled) .picker__n { background: var(--ink); color: #fff; box-shadow: none; }
.picker__step.is-filled .picker__n { background: var(--cold); }
.picker__body b { display: block; margin-top: 2px; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.4; white-space: nowrap; text-overflow: ellipsis; }
.picker__chev { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.picker__step.is-open .picker__chev { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .picker__step:not(:disabled):not(.is-open):hover { background: #f6f7f9; } }
.picker__cell:focus-within::before, .picker__cell:focus-within + .picker__cell::before { opacity: 0; }

/* Список */
.combo {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 50; width: max(100%, 300px); max-width: calc(100vw - 32px);
  padding: 6px; border-radius: 16px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 20px 48px -18px rgba(16, 24, 40, .35), 0 4px 12px -6px rgba(16, 24, 40, .12);
  transform-origin: 24px 0; transition: opacity .16s var(--ease-out), transform .16s var(--ease-out), display .16s allow-discrete, overlay .16s allow-discrete;
}
.combo[hidden] { display: none; }
@starting-style { .combo:not([hidden]) { opacity: 0; transform: translateY(-4px) scale(.985); } }
.combo__search { position: relative; margin: 0 0 6px; }
.combo__search[hidden] { display: none; }
.combo__search .icon { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.combo__search input {
  width: 100%; height: 40px; padding: 0 12px 0 36px; border: 0; border-radius: 10px; background: #f3f5f7; outline: none;
  font-size: 14px; color: var(--ink); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s ease, background-color .15s ease;
}
.combo__search input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cold); }
.combo__list { max-height: 296px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.combo__list [role="option"] {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: transparent;
  font-size: 14.5px; font-weight: 500; color: var(--ink); text-align: left; cursor: pointer;
}
.combo__list [role="option"][hidden] { display: none; }
.combo__label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.combo__count { flex: none; font-size: 13px; color: var(--ink-3); }
.combo__tick { flex: none; width: 16px; height: 16px; color: var(--cold); visibility: hidden; }
.combo__list [aria-selected="true"] { font-weight: 650; }
.combo__list [aria-selected="true"] .combo__tick { visibility: visible; }
.combo__list [role="option"].is-active, .combo__list [role="option"]:focus-visible { background: #eef3fb; outline: none; }
@media (hover: hover) and (pointer: fine) { .combo__list [role="option"]:hover { background: #f3f5f7; } .combo__list [role="option"].is-active:hover { background: #eef3fb; } }
.combo__empty { padding: 14px 12px; font-size: 14px; color: var(--ink-3); }

@media (max-width: 1100px) { .picker__cell:nth-child(3) .combo { left: auto; right: 0; transform-origin: calc(100% - 24px) 0; } }
@media (max-width: 760px) {
  .picker__cell + .picker__cell::before { left: 18px; right: 18px; top: 0; bottom: auto; width: auto; height: 1px; }
  .picker__cell:nth-child(3) .combo { left: 0; right: auto; }
  .combo { width: 100%; }
}

/* =====================================================================
   v15 — доработки главной: чертёжная штриховка слева в hero, ритм секций,
   контраст категорий и марок, векторные иконки «Комплектующих», фото в карточках
   ===================================================================== */

/* Hero, левая часть: косая штриховка 60° и координатные метки за текстом.
   Рамка из меток обрамляет колонку с текстом и поиском */
.hero9__cad {
  position: absolute; z-index: 0; top: 50%; left: max(0px, calc((100% - var(--wrap)) / 2 + var(--gutter) - 40px));
  width: 720px; height: 500px; transform: translateY(-50%); pointer-events: none; overflow: visible;
}
.hero9__cad pattern line { stroke: rgba(16, 24, 40, .085); stroke-width: 1; }
.hero9__marks path { fill: none; stroke: rgba(16, 24, 40, .3); stroke-width: 1; }
.hero9__marks .hero9__axis { stroke: rgba(16, 24, 40, .16); }
.hero9__coords text { font: 500 10.5px/1 Inter, system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .02em; fill: rgba(16, 24, 40, .4); }
@media (max-width: 1024px) {
  .hero9__cad { top: 0; left: 0; width: 100%; height: 56%; transform: none; }
  .hero9__coords, .hero9__marks { display: none; }
}

/* Ритм: секции дышат одинаково — 104 px между содержимым соседних секций на десктопе */
main > .section { padding: 52px 0; }
main > .trust + .section { padding-top: 88px; }
main > .section--rail + .section--rail { padding-top: 20px; }
main > .section.help { padding: 40px 0 96px; }
.sh { margin-bottom: 36px; }
@media (max-width: 760px) {
  main > .section { padding: 36px 0; }
  main > .trust + .section { padding-top: 52px; }
  main > .section--rail + .section--rail { padding-top: 12px; }
  .sh { margin-bottom: 24px; }
}

/* Основные категории: плотнее и контрастнее. Плитка — мягкий стальной градиент,
   тонкая рамка и внутренний блик; при наведении карточка приподнимается, фото чуть крупнее */
.ecat {
  background: linear-gradient(160deg, #eef1f5 0%, #e3e8ee 100%);
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .07), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.ecat--compressor { background: #ecf0f3; }
.ecat__art img { filter: contrast(1.06) saturate(1.05); }
/* Постер компрессора — без фильтра: иначе его фон светлеет и проступает прямоугольником */
.ecat__art.is-poster img { filter: none; }
.ecat__name { color: var(--ink); font-weight: 680; }
.ecat__desc { color: #3e4650; }
.ecat__n b { font-weight: 700; }
.ecat__n small { color: #3e4650; }
.ecat__go { background: var(--ink); color: #fff; box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .ecat:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .1), 0 24px 44px -28px rgba(16, 24, 40, .45); }
  .ecat:hover .ecat__go { background: var(--cold); }
}

/* Марки: монохром, но тёмный и чёткий — без «бледности» */
.mcard__logo img { filter: grayscale(1) brightness(.42) contrast(1.35); opacity: .9; }
@media (hover: hover) and (pointer: fine) { .mcard:hover .mcard__logo img { opacity: 1; filter: grayscale(1) brightness(.2) contrast(1.5); } }

/* Комплектующие для ремонта: векторные иконки 72 px вместо фото-вырезок */
.repair__col { padding: 30px 32px 28px; }
.repair__head { gap: 18px; }
.repair__icon {
  flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 18px;
  background: linear-gradient(160deg, #f5f7fa 0%, #e9edf2 100%); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .08), inset 0 1px 0 #fff;
  color: var(--ink); transition: background-color .25s ease, color .25s ease, transform .3s var(--ease-out);
}
.repair__icon svg { width: 50px; height: 50px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.repair__icon .accent { stroke: var(--cold); }
.repair__name b { font-size: 1.1875rem; font-weight: 680; }
.repair__lead { margin-top: 20px; }
@media (hover: hover) and (pointer: fine) { .repair__head:hover .repair__icon { transform: translateY(-2px); background: #fff; } }

/* Фото товара: квадратные и вертикальные снимки вписываются целиком */
.pcard__img img.is-contain, .prow__img img.is-contain { object-fit: contain; padding: 8px; }
.pcard:hover .pcard__img img.is-contain { transform: scale(1.03); }

/* =====================================================================
   v16 — общие формы, модальное окно, избранное, документы, корзина,
   личный кабинет, 404
   ===================================================================== */

/* Поля форм */
.form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fld--wide { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld > span { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fld input, .fld textarea {
  width: 100%; min-height: 46px; padding: 11px 14px; border: 0; border-radius: 11px; background: #fff; color: var(--ink); font: inherit; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .14); transition: box-shadow .15s ease;
}
.fld textarea { resize: vertical; min-height: 88px; line-height: 1.5; }
.fld input::placeholder, .fld textarea::placeholder { color: #9aa1aa; }
.fld input:hover, .fld textarea:hover { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .26); }
.fld input:focus, .fld textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--cold), 0 0 0 4px var(--cold-tint); }
.fld input:user-invalid, .fld textarea:user-invalid { box-shadow: inset 0 0 0 1.5px #d7262e, 0 0 0 4px #fdecec; }
.fld small { font-size: 12.5px; color: var(--ink-3); }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.45; color: var(--ink-2); cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cold); cursor: pointer; }
.check a { color: var(--cold); text-decoration: underline; text-underline-offset: 2px; }

/* Сегментированный выбор (радиокнопки) */
.cseg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 4px; margin-bottom: 18px; border-radius: 12px; background: #eef0f3; box-shadow: inset 0 0 0 1px var(--line); }
.cseg__opt { position: relative; cursor: pointer; }
.cseg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.cseg__opt span { display: grid; place-items: center; height: 38px; padding: 0 18px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background-color .15s ease, color .15s ease, box-shadow .2s ease; }
.cseg__opt input:checked + span { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 1px 3px rgba(16, 24, 40, .1); }
.cseg__opt input:focus-visible + span { outline: 2px solid var(--cold); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .cseg__opt:hover input:not(:checked) + span { color: var(--ink); background: rgba(255, 255, 255, .6); } }

/* Карточки-варианты (доставка, оплата, склад) */
.copts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.copts--compact { grid-template-columns: 1fr; }
.copt { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .12); cursor: pointer; transition: box-shadow .15s ease, background-color .15s ease, opacity .2s ease; }
.copt input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cold); cursor: pointer; }
.copt__body { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.copt__body b { font-size: 15px; font-weight: 600; }
.copt__body small { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.copt__price { flex: none; font-size: 13px; font-weight: 600; color: var(--ok); }
.copt:has(input:checked) { background: #f5f8fe; box-shadow: inset 0 0 0 1.5px var(--cold); }
.copt:has(input:focus-visible) { outline: 2px solid var(--cold); outline-offset: 2px; }
.copt.is-off { opacity: .45; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { .copt:not(.is-off):not(:has(input:checked)):hover { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .28); } }

/* Модальное окно */
.modal { width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 0; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: 0 40px 100px -30px rgba(16, 24, 40, .55); overflow: auto; }
.modal::backdrop { background: rgba(16, 24, 40, .42); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal[open] { animation: modal-in .22s var(--ease-out); }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 28px 8px; }
.modal__head h2 { font-size: 1.5rem; line-height: 1.2; font-weight: 680; letter-spacing: -0.02em; }
.modal__head p { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.modal__body { padding: 18px 28px 6px; }
.modal__foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 28px 26px; }
@media (prefers-reduced-motion: reduce) { .modal[open] { animation: none; } }

/* Избранное на карточке */
.pcard { position: relative; }
.favbtn {
  position: absolute; top: 10px; right: 10px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92); color: var(--ink-2); box-shadow: 0 0 0 1px rgba(16, 24, 40, .08); cursor: pointer;
  transition: color .15s ease, background-color .15s ease, transform .16s var(--ease-out);
}
.favbtn .icon { width: 18px; height: 18px; }
.favbtn[aria-pressed="true"] { color: #d7262e; }
.favbtn[aria-pressed="true"] .icon { fill: currentColor; }
.favbtn:active { transform: scale(.92); }
@media (hover: hover) and (pointer: fine) { .favbtn:hover { color: #d7262e; background: #fff; } }

/* Документы и статьи */
.doc { min-width: 0; }
.doc__skeleton i { display: block; height: 18px; margin: 14px 0; border-radius: 6px; background: linear-gradient(90deg, #eceff2, #f6f7f9, #eceff2); background-size: 200% 100%; animation: skel 1.2s linear infinite; }
.doc__skeleton i:first-child { width: 60%; height: 40px; margin-bottom: 28px; }
.doc__skeleton i:nth-child(3) { width: 92%; } .doc__skeleton i:nth-child(4) { width: 76%; }
@keyframes skel { to { background-position: -200% 0; } }
.doc__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 14px; font-size: 13px; color: var(--ink-3); }
.doc__meta b { font-weight: 600; color: var(--cold); }
.doc__cover { margin: 0 0 36px; overflow: hidden; border-radius: 18px; background: var(--tile); aspect-ratio: 16 / 8; }
.doc__cover img { width: 100%; height: 100%; object-fit: cover; }
.doc__fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; padding: 24px 28px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.doc__fallback > .icon { width: 32px; height: 32px; color: var(--cold); }
.doc__fallback div { flex: 1; min-width: 220px; }
.doc__fallback b { font-size: 16px; }
.doc__fallback p { margin-top: 4px; font-size: 14px; color: var(--ink-2); }
.doc__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 28px; box-shadow: inset 0 1px 0 var(--line); }
.doc__orig { font-size: 14px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.doc__orig:hover { color: var(--ink); }

.prose { max-width: 72ch; font-size: 16.5px; line-height: 1.7; color: #262b31; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.2em; font-size: 1.5rem; line-height: 1.25; font-weight: 680; letter-spacing: -0.018em; color: var(--ink); scroll-margin-top: calc(var(--header-h) + 24px); }
.prose h3 { margin-top: 1.8em; font-size: 1.1875rem; line-height: 1.3; font-weight: 650; color: var(--ink); }
.prose h4 { margin-top: 1.5em; font-size: 1rem; font-weight: 650; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--ink-3); }
.prose a { color: var(--cold); text-decoration: underline; text-decoration-color: rgba(27, 77, 177, .35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose strong, .prose b { font-weight: 650; color: var(--ink); }
.prose blockquote { padding: 16px 20px; border-radius: 12px; background: #f1f4f8; box-shadow: inset 3px 0 0 var(--cold); color: var(--ink-2); }
.prose img { max-width: 100%; height: auto; border-radius: 14px; }
.prose figure { margin: 1.6em 0; }
.prose figcaption { margin-top: 8px; font-size: 13.5px; color: var(--ink-3); }
.prose table { width: 100%; font-size: 14.5px; border-collapse: collapse; overflow: hidden; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.prose th, .prose td { padding: 11px 14px; text-align: left; vertical-align: top; box-shadow: inset 0 -1px 0 var(--line); }
.prose th { background: #f4f6f8; font-weight: 600; color: var(--ink); }
.prose hr { height: 1px; border: 0; background: var(--line); margin: 2em 0; }

/* Корзина и оформление */
.co { padding-bottom: 96px; }
.co__head { margin-top: 28px; }
.co__title { font-size: clamp(2.125rem, 3.2vw, 3rem); letter-spacing: -0.03em; }
.co__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start; }
.co__main { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.clist { overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.citem { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 120px 40px; align-items: center; gap: 20px; padding: 18px 20px; transition: opacity .18s ease, transform .18s var(--ease-out); }
.citem + .citem { box-shadow: inset 0 1px 0 var(--line); }
.citem.is-leaving { opacity: 0; transform: translateX(-8px); }
.citem__img { display: block; width: 96px; height: 76px; overflow: hidden; border-radius: 12px; background: #f6f7f9; }
.citem__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.citem__img img.is-contain { object-fit: contain; padding: 4px; }
.citem__main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.citem__title { font-size: 15.5px; font-weight: 600; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.citem__title:hover { color: var(--cold); }
.citem__codes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.citem__oem { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.citem__stock { font-size: 13px; font-weight: 600; }
.citem__stock.is-ok { color: var(--ok); } .citem__stock.is-wait { color: var(--wait); }
.citem__qty { height: 40px; }
.citem__qty button { display: grid; place-items: center; width: 36px; }
.citem__qty button .icon { width: 16px; height: 16px; }
.citem__qty button:disabled { opacity: .35; cursor: default; }
.citem__sum { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.citem__sum b { font-size: 17px; font-weight: 650; letter-spacing: -0.015em; }
.citem__sum small { font-size: 12.5px; color: var(--ink-3); }
.citem__del { color: var(--ink-3); }
@media (hover: hover) and (pointer: fine) { .citem__del:hover { color: #d7262e; background: #fdf1f1; } }

.cform { display: flex; flex-direction: column; gap: 16px; }
.cstep { padding: 26px 28px 28px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.cstep__head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cstep__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cstep__head h2 { font-size: 1.25rem; font-weight: 680; letter-spacing: -0.015em; }
.cdel { margin-top: 16px; }
.cdel__h { margin-bottom: 10px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cdel__note { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.cform__comment { margin-top: 16px; }

.csum { position: sticky; top: calc(var(--header-h) + 24px); padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -36px rgba(16, 24, 40, .35); }
.csum h2 { font-size: 1.25rem; font-weight: 680; letter-spacing: -0.015em; }
.csum dl { margin-top: 18px; }
.csum dl div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14.5px; box-shadow: inset 0 -1px 0 var(--line); }
.csum dt { color: var(--ink-2); }
.csum dd { margin: 0; font-weight: 600; text-align: right; }
.csum__promo { display: flex; gap: 8px; margin-top: 16px; }
.csum__promo input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 10px; background: #f3f5f7; font: inherit; font-size: 14px; outline: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s ease, background-color .15s ease; }
.csum__promo input:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cold); }
.csum__promo .btn { height: 42px; }
.csum__total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 20px; }
.csum__total span { font-size: 15px; font-weight: 600; }
.csum__total b { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; }
.csum__note { margin-top: 6px; font-size: 13px; color: var(--ink-3); }
.csum__go { width: 100%; margin-top: 18px; }
.csum__legal { margin-top: 12px; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); }
.csum__legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

.cempty { display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 560px; margin: 24px auto 0; padding: 56px 28px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-align: center; }
.cempty > .icon { width: 44px; height: 44px; color: var(--ink-3); }
.cempty h2 { font-size: 1.5rem; font-weight: 680; letter-spacing: -0.02em; }
.cempty p { max-width: 42ch; color: var(--ink-2); }
.cempty__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }

/* Личный кабинет */
.acc { padding-bottom: 96px; }
.acc__head { margin-top: 28px; }
.acc__grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 32px; align-items: start; }
.acc__card { position: sticky; top: calc(var(--header-h) + 24px); padding: 26px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.acc__card .cseg { display: grid; width: 100%; }
.acc__form { grid-template-columns: 1fr; }
.acc__hint { font-size: 13px; color: var(--ink-3); text-align: center; }
.acc__perks { display: grid; gap: 10px; margin-top: 22px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--line); }
.acc__perks span { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.acc__perks .icon { width: 18px; height: 18px; color: var(--cold); }
.acc__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.acc__tabs { align-self: flex-start; }
.acc__panel { padding: 26px 28px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.acc__ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.acc__ph h2 { font-size: 1.375rem; font-weight: 680; letter-spacing: -0.018em; }
.acc__ph p { margin-top: 4px; font-size: 14.5px; color: var(--ink-2); }
.acc__empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 16px; border-radius: 16px; background: #f6f7f9; color: var(--ink-3); text-align: center; }
.acc__empty > .icon { width: 32px; height: 32px; }
.gcars { display: grid; gap: 10px; }
.gcar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 40px; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 14px; background: #f8f9fa; box-shadow: inset 0 0 0 1px var(--line); }
.gcar__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.gcar__icon .icon { width: 22px; height: 22px; }
.gcar__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gcar__main b { font-size: 15.5px; font-weight: 650; }
.gcar__main small { font-size: 13px; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.gform { margin-top: 24px; padding-top: 22px; box-shadow: inset 0 1px 0 var(--line); }
.gform h3 { margin-bottom: 14px; font-size: 1rem; font-weight: 650; }
.gform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 16px; }
.gform__combo { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gform__lab { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fldbtn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 0 14px; border: 0; border-radius: 11px;
  background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .14); font: inherit; font-size: 15px; color: var(--ink); text-align: left; cursor: pointer; transition: box-shadow .15s ease;
}
.fldbtn b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.fldbtn svg { flex: none; width: 12px; height: 12px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s var(--ease-out); }
.fldbtn.is-open svg { transform: rotate(180deg); }
.fldbtn:focus-visible, .fldbtn.is-open { outline: none; box-shadow: inset 0 0 0 1.5px var(--cold), 0 0 0 4px var(--cold-tint); }
.fldbtn:disabled { background: #f6f7f9; color: var(--ink-3); cursor: default; }
@media (hover: hover) and (pointer: fine) { .fldbtn:not(:disabled):hover { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .26); } }
.pgrid--acc { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

/* 404 */
.nf { display: flex; flex-direction: column; align-items: center; padding: 72px 0 112px; text-align: center; }
.nf__code { font-size: clamp(5rem, 14vw, 9rem); line-height: 1; font-weight: 800; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(16, 24, 40, .22); }
.nf h1 { margin-top: 12px; font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 680; letter-spacing: -0.025em; }
.nf__lead { max-width: 56ch; margin-top: 12px; color: var(--ink-2); }
.nf__search { width: min(600px, 100%); margin-top: 28px; text-align: left; }
.nf__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; }

@media (max-width: 1100px) {
  .co__grid, .acc__grid { grid-template-columns: 1fr; }
  .csum, .acc__card { position: static; }
  .pgrid--acc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .form, .copts, .gform__grid { grid-template-columns: 1fr; }
  .citem { grid-template-columns: 72px minmax(0, 1fr) 36px; grid-template-areas: "img main del" "img qty sum"; gap: 12px 14px; padding: 16px; }
  .citem__img { grid-area: img; width: 72px; height: 64px; align-self: start; }
  .citem__main { grid-area: main; } .citem__qty { grid-area: qty; justify-self: start; } .citem__sum { grid-area: sum; } .citem__del { grid-area: del; align-self: start; }
  .cstep, .acc__panel, .csum, .acc__card { padding: 22px 18px; }
  .cseg { display: grid; width: 100%; }
  .gcar { grid-template-columns: 40px minmax(0, 1fr) 36px; }
  .gcar .btn { grid-column: 1 / -1; }
  .modal__head, .modal__body, .modal__foot { padding-left: 20px; padding-right: 20px; }
  .modal__foot .btn { flex: 1 1 auto; }
  .pgrid--acc { grid-template-columns: 1fr 1fr; }
}

/* Страница товара: избранное и подбор по VIN рядом с покупкой */
.buy__fav { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .14); color: var(--ink-2); }
.buy__fav .icon { width: 20px; height: 20px; }
.buy__fav[aria-pressed="true"] { color: #d7262e; }
.buy__fav[aria-pressed="true"] .icon { fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .buy__fav:hover { color: #d7262e; box-shadow: inset 0 0 0 1px rgba(215, 38, 46, .4); } }
.buy__vin { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--cold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.buy__vin:hover { color: var(--cold-ink); }

/* Каталог: сортировка — тот же выпадающий список */
.sortbox { position: relative; }
.sortbtn { min-height: 38px; height: 38px; min-width: 210px; padding: 0 12px; border-radius: 10px; font-size: 14px; }
.sortbox .combo { left: auto; right: 0; width: max(100%, 240px); transform-origin: calc(100% - 24px) 0; }

/* Контраст: вторичный серый затемнён до 4,9:1 на фоне #F4F5F7 (было 3,6:1) — подписи, счётчики, даты, хлебные крошки */
:root { --ink-3: #646b75; }

/* Наведение для оставшихся ссылок: логотип, «показать все», рейтинг, телефоны и почта */
.logo, .rv-score, .fmore, .ccard__v, .iside__help a, .buy__help a, a.num { transition: opacity .15s ease, color .15s ease, box-shadow .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .logo:hover { opacity: .78; }
  .fmore:hover { color: var(--cold); }
  .rv-score:hover { box-shadow: 0 0 0 1px var(--line-2), 0 12px 28px -20px rgba(16, 24, 40, .35); }
  .ccard__v:hover, .iside__help a:hover, .buy__help a:hover { color: var(--cold-ink); text-decoration: underline; text-underline-offset: 3px; }
  main a.num:hover { color: var(--cold); }
}

/* Узкие экраны: элементы сеток не растягиваются по содержимому (горизонтальное меню, галерея) */
.ipage > *, .product > *, .co__grid > *, .acc__grid > * { min-width: 0; }
@media (max-width: 860px) { .ipage { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1024px) { .product { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   v17 — окно заявки (VIN, вопрос, уточнение) и ИИ-консультант
   ===================================================================== */

/* Окно заявки */
.lead .modal__head { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: start; gap: 16px; }
.lead__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--cold-tint); color: var(--cold); }
.lead__icon .icon { width: 24px; height: 24px; }
.lead__product { display: flex; align-items: center; gap: 14px; margin: 14px 28px 0; padding: 12px; border-radius: 14px; background: #f5f7f9; box-shadow: inset 0 0 0 1px var(--line); }
.lead__thumb { flex: none; width: 56px; height: 48px; overflow: hidden; border-radius: 10px; background: #fff; }
.lead__thumb img { width: 100%; height: 100%; object-fit: cover; }
.lead__product b { display: -webkit-box; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lead__product small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.lead .gform__combo { position: relative; }
.lead .combo { width: 100%; }
.fld__err { min-height: 0; font-size: 12.5px; font-weight: 500; color: #c62828; }
.fld__err:empty { display: none; }
.fld input[aria-invalid="true"], .fld textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #d7262e, 0 0 0 4px #fdecec; }
.lead__parts { margin: 0; padding: 0; border: 0; min-width: 0; }
.lead__parts legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .14); font-size: 13.5px; font-weight: 600; color: var(--ink-2); transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .16s var(--ease-out); }
.chip input:checked + span { background: var(--ink); color: #fff; box-shadow: none; }
.chip input:focus-visible + span { outline: 2px solid var(--cold); outline-offset: 2px; }
.chip:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover input:not(:checked) + span { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .3); color: var(--ink); } }
.lead__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.lead__status { margin: 4px 28px 0; padding: 12px 14px; border-radius: 12px; background: #fdf1f1; font-size: 14px; line-height: 1.5; color: #a51d1d; }
.lead__status a { font-weight: 650; color: inherit; text-decoration: underline; }
.lead__go { position: relative; }
.lead__go.is-loading { color: transparent; pointer-events: none; }
.lead__go.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.lead__done { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 32px 36px; text-align: center; }
.lead__done[hidden] { display: none; }
.lead__done h2 { font-size: 1.5rem; font-weight: 680; letter-spacing: -0.02em; }
.lead__done p { max-width: 40ch; color: var(--ink-2); }
.lead__done-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.lead__check svg { width: 64px; height: 64px; fill: none; stroke: var(--ok); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lead__check circle { stroke: rgba(18, 112, 74, .25); }
.lead__check path { stroke-dasharray: 36; stroke-dashoffset: 36; animation: draw .5s var(--ease-out) .15s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.iside__ask { width: 100%; margin-top: 14px; }

/* ИИ-консультант: кнопка, подсказка, панель */
.ai { position: fixed; right: 24px; bottom: 24px; z-index: 70; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.ai > * { pointer-events: auto; }
.ai-mark { display: grid; place-items: center; width: 28px; height: 28px; }
.ai-mark svg { width: 100%; height: 100%; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ai-mark__ring { stroke: rgba(255, 255, 255, .28); stroke-width: 1.5; }
.ai-mark__arc { stroke: #5ec8f5; stroke-width: 2; transform-origin: 16px 16px; animation: ai-orbit 3.6s linear infinite; }
.ai-mark__spark { fill: #fff; stroke: none; }
@keyframes ai-orbit { to { transform: rotate(360deg); } }
.ai__launch {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 22px 0 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: linear-gradient(160deg, #1d2229 0%, #0f1216 100%); color: #fff; font: inherit; font-size: 15px; font-weight: 650; letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset, 0 14px 32px -12px rgba(16, 24, 40, .55), 0 2px 6px rgba(16, 24, 40, .2);
  transition: transform .2s var(--ease-out), box-shadow .2s ease, padding .25s var(--ease-out);
}
.ai__launch:active { transform: scale(.96); }
.ai__launch:focus-visible { outline: 2px solid var(--cold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .ai__launch:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 20px 40px -14px rgba(16, 24, 40, .6), 0 2px 6px rgba(16, 24, 40, .2); } }
.ai.is-open .ai__launch { padding: 0 16px; }
.ai.is-open .ai__launch-txt { display: none; }

.ai__tip { position: relative; display: flex; flex-direction: column; gap: 2px; max-width: 260px; padding: 12px 40px 12px 16px; border-radius: 16px 16px 4px 16px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -20px rgba(16, 24, 40, .4); cursor: pointer; animation: ai-tip .35s var(--ease-out); }
.ai__tip[hidden] { display: none; }
.ai__tip b { font-size: 14px; font-weight: 650; }
.ai__tip span { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.ai__tip-x { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: var(--ink-3); cursor: pointer; }
.ai__tip-x .icon { width: 14px; height: 14px; }
.ai__tip-x:hover { background: #f1f3f5; color: var(--ink); }
@keyframes ai-tip { from { opacity: 0; transform: translateY(8px) scale(.97); } }

.ai__panel {
  display: flex; flex-direction: column; width: 400px; height: min(640px, calc(100dvh - 120px)); overflow: hidden; border-radius: 22px; background: #fff;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .08), 0 40px 80px -30px rgba(16, 24, 40, .5); transform-origin: calc(100% - 28px) 100%;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), display .2s allow-discrete, overlay .2s allow-discrete;
}
.ai__panel[hidden] { display: none; }
@starting-style { .ai__panel:not([hidden]) { opacity: 0; transform: translateY(10px) scale(.98); } }
.ai__head { display: flex; align-items: center; gap: 12px; padding: 14px 12px 14px 16px; background: linear-gradient(160deg, #1d2229 0%, #0f1216 100%); color: #fff; }
.ai-mark--head { flex: none; width: 40px; height: 40px; padding: 6px; border-radius: 12px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.ai__who { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.ai__who b { font-size: 15px; font-weight: 650; }
.ai__who small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #a9b0b9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .2); }
.ai__head .iconbtn { color: #c9ced4; }
.ai__head .iconbtn:hover { background: rgba(255, 255, 255, .1); color: #fff; }

.ai__log { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 18px 16px; overflow-y: auto; overscroll-behavior: contain; background: #f6f7f9; scrollbar-width: thin; }
.ai-msg { display: flex; flex-direction: column; gap: 8px; max-width: 88%; }
.ai-msg--user { align-self: flex-end; align-items: flex-end; }
.ai-msg__b { padding: 11px 14px; border-radius: 16px 16px 16px 6px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-size: 14.5px; line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
.ai-msg--user .ai-msg__b { border-radius: 16px 16px 6px 16px; background: var(--ink); color: #fff; box-shadow: none; }
.ai-msg__b p + p, .ai-msg__b p + ul, .ai-msg__b ul + p, .ai-msg__b p + ol { margin-top: 8px; }
.ai-msg__b ul, .ai-msg__b ol { padding-left: 1.2em; }
.ai-msg__b ul { list-style: disc; } .ai-msg__b ol { list-style: decimal; }
.ai-msg__b li + li { margin-top: 4px; }
.ai-msg__b strong { font-weight: 650; }
.ai-msg__b a { color: var(--cold); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(27, 77, 177, .35); text-underline-offset: 2px; }
.ai-msg__b a:hover { text-decoration-color: currentColor; }
.ai-typing .ai-msg__b { display: flex; gap: 5px; padding: 14px 16px; }
.ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: #9aa1aa; animation: ai-dot 1.1s ease-in-out infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; } .ai-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ai-dot { 0%, 80%, 100% { opacity: .35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.ai-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-chips button { height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .12); font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .16s var(--ease-out); }
.ai-chips button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .ai-chips button:hover { background: var(--ink); color: #fff; box-shadow: none; } }

.ai-prods { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ai-prod { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 12px 8px 8px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow .15s ease, transform .16s var(--ease-out); }
.ai-prod__img { display: grid; place-items: center; width: 48px; height: 42px; overflow: hidden; border-radius: 9px; background: #f1f3f5; color: var(--ink-3); }
.ai-prod__img img { width: 100%; height: 100%; object-fit: cover; }
.ai-prod__img .icon { width: 20px; height: 20px; }
.ai-prod__body { display: flex; flex-direction: column; min-width: 0; }
.ai-prod__body b { overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.ai-prod__body small { font-size: 12px; color: var(--ink-3); }
.ai-prod__body em { font-style: normal; color: var(--wait); }
.ai-prod__body em.is-ok { color: var(--ok); }
.ai-prod__price { font-size: 14px; font-weight: 650; }
.ai-prod__more { align-self: flex-start; padding: 4px 2px; font-size: 13px; font-weight: 600; color: var(--cold); }
@media (hover: hover) and (pointer: fine) { .ai-prod:hover { box-shadow: 0 0 0 1px var(--line-2), 0 8px 18px -12px rgba(16, 24, 40, .35); transform: translateY(-1px); } }

.ai-err { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #fdf1f1; font-size: 13.5px; line-height: 1.5; color: #8f1d1d; }
.ai-err a { font-weight: 650; color: inherit; text-decoration: underline; }

.ai__form { display: flex; align-items: flex-end; gap: 8px; padding: 12px 12px 8px; background: #fff; box-shadow: inset 0 1px 0 var(--line); }
.ai__form textarea { flex: 1; min-height: 44px; max-height: 120px; padding: 11px 14px; border: 0; border-radius: 14px; background: #f3f5f7; font: inherit; font-size: 14.5px; line-height: 1.5; color: var(--ink); resize: none; outline: none; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .15s ease, background-color .15s ease; }
.ai__form textarea:focus { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cold); }
.ai__send { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--cold); color: #fff; cursor: pointer; transition: background-color .15s ease, transform .16s var(--ease-out), opacity .15s ease; }
.ai__send .icon { width: 20px; height: 20px; }
.ai__send:hover { background: var(--cold-ink); }
.ai__send:active { transform: scale(.94); }
.ai__send:disabled { opacity: .45; cursor: default; }
.ai__note { padding: 0 16px 12px; background: #fff; font-size: 12px; line-height: 1.45; color: var(--ink-3); }
.ai__note button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--cold); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }

@media (max-width: 600px) {
  .ai { right: 16px; bottom: 16px; }
  .ai__launch { height: 52px; padding: 0 18px 0 14px; }
  .ai__panel { position: fixed; inset: 0; width: auto; height: 100dvh; border-radius: 0; }
  .ai.is-open .ai__launch { display: none; }
  .ai__tip { max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-mark__arc, .ai-typing i, .lead__check path, .ai__tip { animation: none; }
  .lead__check path { stroke-dashoffset: 0; }
}
/* Порядок снизу вверх: кнопка, над ней подсказка или панель */
.ai__panel { order: 0; } .ai__tip { order: 1; } .ai__launch { order: 2; }
.ai__panel { margin-bottom: 4px; }
@media (max-width: 600px) {
  .lead .modal__head { grid-template-columns: minmax(0, 1fr) auto; padding-top: 20px; }
  .lead__icon { display: none; }
  .lead__product { margin: 12px 20px 0; }
  .lead__status { margin: 4px 20px 0; }
}

/* =====================================================================
   v18 — без псевдо-технических подписей, лёгкая анимация, логотипы,
   фото категорий, мобильный порядок блоков, подвал
   ===================================================================== */

/* Hero: линии потока нарисованы один раз; «жизнь» — дыхание прозрачности на видеокарте */
.hero9.is-flow .hero9__flow { animation: flow-breathe 7s ease-in-out infinite; will-change: opacity; }
@keyframes flow-breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }

/* Дуги: SVG-слой, параллакс и фокус — transform/opacity с плавной кривой */
.hero9__arcs {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;
  opacity: .75; will-change: transform; transition: transform .9s cubic-bezier(.22, 1, .36, 1), opacity .5s ease;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, #000 50%); mask-image: linear-gradient(90deg, transparent 0%, transparent 34%, #000 50%);
}
.hero9__arcs path, .hero9__arcs circle { fill: none; vector-effect: non-scaling-stroke; }
.hero9__arcs .a-axis { stroke: rgba(16, 24, 40, .13); stroke-width: 1; stroke-dasharray: 22 5 2 5; }
.hero9__arcs .a-line { stroke: rgba(16, 24, 40, .15); stroke-width: 1; }
.hero9__arcs .a-scale { stroke: rgba(16, 24, 40, .12); }
.hero9__arcs .a-dash { stroke: rgba(16, 24, 40, .17); stroke-width: 1; stroke-dasharray: 2 7; }
.hero9__arcs .a-ring { opacity: 0; transform: scale(1.12); transition: opacity .45s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.hero9__arcs .a-ring circle { stroke: rgba(30, 132, 222, .55); stroke-width: 1.25; stroke-dasharray: 3 9; }
.hero9__arcs .a-ring path { stroke: rgba(30, 132, 222, .8); stroke-width: 1.25; }
.hero9.is-focus .hero9__arcs { opacity: 1; }
.hero9.is-focus .hero9__arcs .a-line, .hero9.is-focus .hero9__arcs .a-dash { stroke: rgba(16, 24, 40, .3); }
.hero9.is-focus .hero9__arcs .a-ring { opacity: 1; transform: none; animation: ring-turn 24s linear infinite; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
.hero9__arcs .a-line, .hero9__arcs .a-dash { transition: stroke .5s ease; }
@media (max-width: 1024px) { .hero9__arcs { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero9.is-flow .hero9__flow, .hero9.is-focus .hero9__arcs .a-ring { animation: none; }
  .hero9__arcs { transition: none; }
}

/* Марки: светлая карточка, тонкая титановая рамка; знак — монохром без затемнения,
   при наведении становится цветным и чётким (тёмных пятен вместо логотипа больше нет) */
.mcard { background: #fff; box-shadow: 0 0 0 1px #dfe3e8; }
.mcard__logo img { filter: grayscale(1); opacity: .82; mix-blend-mode: multiply; image-rendering: auto; }
@media (hover: hover) and (pointer: fine) {
  .mcard:hover { background: #fff; box-shadow: 0 0 0 1px #c3cad3, 0 12px 26px -20px rgba(16, 24, 40, .35); }
  .mcard:hover .mcard__logo img { filter: none; opacity: 1; }
}

/* Основные категории: студийные фото на фоне #F4F5F7 — плитка того же цвета, стыка нет */
.ecat:has(.is-photo) { background: #f4f5f7; }
.ecat__art.is-photo { inset: 0; display: block; }
.ecat__art.is-photo img { position: absolute; width: auto; max-width: none; mix-blend-mode: multiply; filter: none; }
.ecat--compressor .ecat__art.is-photo img { left: 6%; right: 6%; bottom: 13%; width: 88%; height: auto; }
.ecat--clutch .ecat__art.is-photo img { top: 50%; right: 2%; height: 112%; transform: translateY(-50%); }
.ecat--valve .ecat__art.is-photo img { top: 18px; right: -18%; width: 112%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .ecat--compressor:hover .ecat__art.is-photo img { transform: scale(1.03); }
  .ecat--clutch:hover .ecat__art.is-photo img { transform: translateY(-50%) scale(1.035); }
  .ecat--valve:hover .ecat__art.is-photo img { transform: scale(1.035); }
}

/* Подвал: без вылезающих строк — длинные адреса и почта переносятся по словам */
.footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1.3fr); }
.footer__grid > * { min-width: 0; }
.footer li, .footer p, .footer a { overflow-wrap: break-word; hyphens: manual; }
.footer a[href^="mailto:"], .footer .num { white-space: nowrap; }
.footer li.muted { line-height: 1.5; }
.footer__bottom { align-items: center; }
.footer__bottom nav { row-gap: 8px; }
@media (max-width: 1100px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .footer__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer__about { max-width: none; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* Телефон (< 768 px): компактный hero (заголовок, поиск), сразу категории, затем подбор и остальное */
@media (max-width: 767px) {
  main#main:has(> .hero9) { display: flex; flex-direction: column; }
  main#main > * { order: 10; }
  main#main > .hero9 { order: 0; }
  main#main > section:has(#cats-title) { order: 1; padding-top: 28px; }
  main#main > section:has(#fit-title) { order: 2; }
  main#main > .trust { order: 3; }
  main#main > section:has(#pop-title) { order: 4; }
  .hero9 .cad, .hero9__flow, .hero9__cad, .hero9__arcs { display: none; }
  .hero9__in { min-height: 0; gap: 0; padding-top: 22px; padding-bottom: 22px; }
  .hero9__title { font-size: 1.75rem; }
  .hero9__lead { margin-top: 10px; font-size: .9375rem; }
  .hero9__search { margin-top: 18px; }
  .hero9__actions { margin-top: 12px; }
  .hero9__actions .btn { height: 44px; }
}
.cstep--items { padding-bottom: 8px; } .cstep--items .clist { margin: 0 -28px; border-radius: 0; box-shadow: inset 0 1px 0 var(--line); } @media (max-width: 760px) { .cstep--items .clist { margin: 0 -18px; } }
/* Фото категорий: слой во всю плитку (сброс размеров прежних вырезок), фото у правого края */
.ecat .ecat__art.is-photo { inset: 0; width: auto; height: auto; }
.ecat--clutch .ecat__art.is-photo img { top: 0; right: -16%; height: 100%; width: auto; transform: none; }
.ecat--valve .ecat__art.is-photo img { top: 26%; right: -22%; left: auto; width: 118%; height: auto; }
@media (hover: hover) and (pointer: fine) { .ecat--clutch:hover .ecat__art.is-photo img { transform: scale(1.035); } }
@media (max-width: 760px) {
  .ecat--clutch .ecat__art.is-photo img { right: -30%; }
  .ecat--valve .ecat__art.is-photo img { top: 30%; width: 130%; right: -30%; }
}
.prow__oem .muted, .prow__oemin .muted, .pcard__oem .muted { font-size: 13px; color: var(--ink-3); }
/* Фото категорий — каждому своя зона, фото вписано целиком; фон плитки = фон снимка */
.ecats .ecat.ecat--compressor, .ecats .ecat.ecat--clutch, .ecats .ecat.ecat--valve { background: #f4f5f7; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .07); }
.ecats .ecat .ecat__art.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: none; }
.ecats .ecat--compressor .ecat__art.is-photo { inset: 26% 4% 17% 4%; }
.ecats .ecat--clutch .ecat__art.is-photo { inset: 10px 10px 10px auto; width: 50%; }
.ecats .ecat--valve .ecat__art.is-photo { inset: 30% 6% 26% 6%; }
@media (hover: hover) and (pointer: fine) { .ecats .ecat:hover .ecat__art.is-photo img { transform: scale(1.04); } }
@media (max-width: 1100px) { .ecats .ecat--compressor .ecat__art.is-photo { inset: 22% 4% 20% 30%; } }
@media (max-width: 760px) {
  .ecats .ecat--compressor .ecat__art.is-photo { inset: 26% 2% 20% 2%; }
  .ecats .ecat--clutch .ecat__art.is-photo { width: 48%; }
  .ecats .ecat--valve .ecat__art.is-photo { inset: 32% 0 30% 0; }
}
/* Подшипники: студийное фото, как у остальных категорий */
.ecats .ecat.ecat--bearing { background: #f4f5f7; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .07); }
.ecats .ecat--bearing .ecat__art.is-photo { inset: 30% 6% 26% 6%; }
@media (max-width: 760px) { .ecats .ecat--bearing .ecat__art.is-photo { inset: 32% 0 30% 0; } }
.ecats .ecat.ecat--bearing { background: #f6f6f8; } /* = фон снимка подшипника, без видимого прямоугольника */

/* =====================================================================
   v24 — первый экран-витрина: крупная плитка компрессоров справа,
   заголовок с поиском и изящная карусель категорий слева.
   ===================================================================== */
.front { padding: 24px 0 40px; background: #fff; overflow-x: clip; }
.front + .trust { box-shadow: inset 0 1px 0 var(--line), inset 0 -1px 0 var(--line); }
.front__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }

.front__intro { grid-column: 1 / 8; grid-row: 1; display: flex; flex-direction: column; justify-content: center; padding: 20px 36px 20px 0; }
.front__intro > h1 { max-width: 18ch; font-size: clamp(2.25rem, 3.2vw, 2.85rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.032em; text-wrap: balance; }
.front__lead { max-width: 52ch; margin-top: 14px; font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }

/* Поиск: подпись видна над полем (тот же label, что читают экранные дикторы) */
.front__search { margin-top: 24px; }
.front__search .search .sr-only { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; display: block; margin-bottom: 10px; font-size: 14px; font-weight: 600; color: var(--ink); }
.front .search--hero .search__box { height: 58px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); transition: box-shadow .2s ease; }
.front .search--hero .search__box:focus-within { box-shadow: inset 0 0 0 2px var(--cold), 0 0 0 5px var(--cold-tint); }
.front .search--hero .search__icon { width: 22px; height: 22px; margin-left: 18px; color: var(--ink-2); }
.front .search--hero .search__input { font: 500 16px/1 var(--sans); letter-spacing: 0; }
.front .search--hero .search__input::placeholder { font-size: 16px; font-weight: 400; color: var(--ink-3); }
.front .search--hero .search__submit { margin: 6px; padding: 0 26px; border-radius: 10px; background: var(--cold); font-size: 15px; }
.front .search--hero .search__submit:hover { background: var(--cold-ink); }

.front__hint { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 14px; font-size: 13.5px; color: var(--ink-3); }
.front__hint p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.front__hint [data-try] { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; background: #f1f3f5; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background-color .15s ease, transform .16s var(--ease-out); }
.front__hint [data-try]:active { transform: scale(.97); }
.front__vin { padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--cold); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .front__hint [data-try]:hover { background: #e6e9ed; }
  .front__vin:hover { color: var(--cold-ink); text-decoration: underline; text-underline-offset: 3px; }
}

/* Крупная плитка компрессоров: оригинальный крупный размер справа */
.front__main { grid-column: 8 / 13; grid-row: 1 / 3; display: flex; }
.front__main .ftile {
  padding: 28px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
  cursor: default;
  background: #f4f6f8;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden !important; /* Гарантирует, что фото не выходит за скругленные рамки */
  position: relative;
  box-sizing: border-box;
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.front__main .ftile__name { font-size: 28px; letter-spacing: -0.025em; font-weight: 650; line-height: 1.2; }
.front__main .ftile__desc { display: block; max-width: 34ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); margin-top: 4px; }
.front__main .ftile__img {
  margin: 0;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 6px 12px;
  overflow: hidden;
  border-radius: 12px;
}
.front__main .ftile__img img {
  max-height: 360px;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .45s var(--ease-out);
}
.front__main .ftile__foot { display: flex; align-items: flex-end; justify-content: flex-start; margin-top: auto; padding-top: 10px; }
.front__main .ftile__sublinks {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1.25fr);
  gap: 3px;
  width: 100%;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, .09);
  border-radius: 13px;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
  position: relative;
  z-index: 2;
}
.front__main .ftile__sublink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 8px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  cursor: pointer;
  min-width: 0;
  transition: background-color .18s ease, color .18s ease, transform .16s var(--ease-out);
}
.front__main .ftile__sublink:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .front__main .ftile:hover {
    box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 18px 36px -24px rgba(16, 24, 40, .35);
    transform: translateY(-2px);
  }
  .front__main .ftile:hover .ftile__img img {
    transform: scale(1.02); /* Аккуратный микро-зум, строго внутри рамок */
  }
  .front__main .ftile__sublink:hover {
    background: var(--cold-tint);
    color: var(--cold);
  }
}

/* Изящная карусель левых категорий */
.front__carousel {
  grid-column: 1 / 8;
  grid-row: 2;
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}
.front__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px 2px 8px;
  width: 100%;
  cursor: grab;
}
.front__track::-webkit-scrollbar {
  display: none;
}
.front__track.is-grabbing {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}
.front__track .ftile {
  flex: 0 0 calc((100% - 28px) / 3);
  min-width: calc((100% - 28px) / 3);
  max-width: calc((100% - 28px) / 3);
  scroll-snap-align: start;
  min-height: 248px;
  padding: 20px;
  overflow: hidden !important;
  border-radius: 20px;
  background: #f4f6f8;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.front__track .ftile--bearing { background: #f5f7f9; }
.front__track .ftile--valve { background: #f4f4f6; }
.front__track .ftile--trv { background: #f5f6f8; }
.front__track .ftile--other { background: #f5f6f8; }

.front__track .ftile__head { display: flex; flex-direction: column; gap: 4px; }
.front__track .ftile__name { font-size: 17px; font-weight: 650; line-height: 1.22; letter-spacing: -0.015em; }
.front__track .ftile__desc { display: none; }
.front__track .ftile__img { display: grid; flex: 1; place-items: center; min-height: 0; padding: 8px 0; overflow: hidden; }
.front__track .ftile__img img { width: 100%; height: 100%; max-height: 130px; object-fit: contain; transition: transform .45s var(--ease-out); }
.front__track .ftile__foot { display: flex; align-items: flex-end; justify-content: flex-start; margin-top: auto; }
.front__track .ftile__n { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.front__track .ftile__n b { font-size: 15px; font-weight: 650; white-space: nowrap; }
.front__track .ftile__n small { font-size: 12.5px; line-height: 1.35; color: var(--ink-2); white-space: nowrap; }
.front__track .ftile__go { display: none !important; }

@media (hover: hover) and (pointer: fine) {
  .front__track .ftile:hover { box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 18px 36px -24px rgba(16, 24, 40, .35); transform: translateY(-2px); }
  .front__track .ftile:hover .ftile__img img { transform: scale(1.04); }
}

/* Кнопки прокрутки карусели */
.front__carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(16, 24, 40, .1);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .14), 0 1px 3px rgba(16, 24, 40, .06);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
  transition: opacity .25s ease, transform .2s var(--ease-out), background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, visibility .25s;
}
.front__carousel-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.front__carousel-btn--prev {
  left: -14px;
}
.front__carousel-btn--next {
  right: -14px;
}
.front__carousel-btn:hover:not(:disabled) {
  background: var(--cold);
  border-color: var(--cold);
  color: #ffffff;
  box-shadow: 0 8px 24px rgba(24, 98, 162, .3);
  transform: translateY(-50%) scale(1.08);
}
.front__carousel-btn:active:not(:disabled) {
  transform: translateY(-50%) scale(0.96);
}
.front__carousel-btn:disabled,
.front__carousel-btn.is-disabled {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* Планшет: категории в полосу прокрутки, компрессор ниже */
@media (max-width: 1100px) {
  .front__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .front__intro { grid-column: 1 / -1; padding: 12px 0 10px; }
  .front__intro > h1 { max-width: 24ch; font-size: 2.25rem; }
  .front__carousel { grid-column: 1 / -1; grid-row: auto; margin: 0 -20px; }
  .front__track { padding: 4px 20px 10px; }
  .front__track .ftile { flex: 0 0 210px; min-width: 210px; max-width: 210px; }
  .front__main { grid-column: 1 / -1; grid-row: auto; }
  .front__main .ftile { padding: 22px; }
  .front__main .ftile__name { font-size: 22px; }
  .front__main .ftile__desc { display: block; }
  .front__main .ftile__img img { max-height: 220px; }
  .front__carousel-btn { display: none; }
}

/* Телефон: интуитивный свайп от края до края экрана */
@media (max-width: 767px) {
  .front { padding: 14px 0 24px; overflow-x: clip; }
  .front__grid { grid-template-columns: 100%; gap: 18px; width: 100%; box-sizing: border-box; }
  .front__intro { padding: 4px 0 6px; width: 100%; box-sizing: border-box; }
  .front__intro > h1 { font-size: 1.75rem; line-height: 1.12; }
  .front__lead { margin-top: 8px; font-size: 14px; }
  .front__search { margin-top: 16px; }
  .front .search--hero .search__box { height: 50px; }
  .front .search--hero .search__icon { display: none; }
  .front .search--hero .search__input { padding-left: 14px; font-size: 14px; }
  .front .search--hero .search__submit { padding: 0 14px; font-size: 13.5px; }
  .front__hint { margin-top: 10px; }

  /* Карусель на мобильном */
  .front__carousel { grid-column: 1 / -1; grid-row: auto; margin: 0 -16px; width: calc(100% + 32px); }
  .front__track {
    gap: 10px;
    padding: 4px 16px 10px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }
  .front__track .ftile {
    flex: 0 0 156px;
    min-width: 156px;
    max-width: 156px;
    min-height: 196px;
    padding: 14px 12px 12px;
    border-radius: 16px;
    scroll-snap-align: start;
  }
  .front__track .ftile__name { font-size: 14px; }
  .front__track .ftile__img img { height: 76px; max-height: 76px; }
  .front__track .ftile__go { display: none; }
  .front__track .ftile__n b { font-size: 13px; }
  .front__track .ftile__n small { font-size: 11px; }

  /* Карточка компрессоров на мобильном */
  .front__main { grid-column: 1 / -1; grid-row: auto; width: 100%; box-sizing: border-box; }
  .front__main .ftile { padding: 20px 16px 16px; border-radius: 18px; overflow: hidden !important; width: 100%; box-sizing: border-box; }
  .front__main .ftile__name { font-size: 20px; }
  .front__main .ftile__desc { font-size: 13px; line-height: 1.4; }
  .front__main .ftile__img { padding: 6px 0; }
  .front__main .ftile__img img { max-height: 175px; }
  .front__main .ftile__sublinks {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.45fr) minmax(0, 1.35fr);
    gap: 2px;
    width: 100%;
    padding: 3px;
    border-radius: 11px;
    box-sizing: border-box;
  }
  .front__main .ftile__sublink {
    font-size: clamp(9px, 2.7vw, 11px);
    padding: 7px 2px;
    border-radius: 8px;
    justify-content: center;
    gap: 0;
    letter-spacing: -0.02em;
    min-width: 0;
  }
  .front__main .ftile__sublink-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* =====================================================================
   v25 — внутренние страницы в языке нового первого экрана: белая шапка
   страницы с фактами-плитками, секции — белые карточки, внутри — плитки
   цвета студийного фона (#f4f6f8). Тексты страниц — как на winmer.ru.
   ===================================================================== */

/* Шапка страницы */
.phead { padding: 0 0 40px; background: #fff; box-shadow: inset 0 -1px 0 var(--line); }
.phead .crumbs { padding-top: 20px; }
.phead__in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; gap: 24px 56px; margin-top: 28px; }
.phead__copy h1 { max-width: 18ch; font-size: clamp(2.25rem, 3.3vw, 3rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.032em; text-wrap: balance; }
.phead__copy p { max-width: 60ch; margin-top: 16px; font-size: 1.0625rem; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.phead__copy .phead__count { color: var(--ink-3); font-weight: 600; }
.phead__facts { display: grid; gap: 10px; }
.phead__facts div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 14px 18px; border-radius: 14px; background: #f4f6f8; }
.phead__facts dd { margin: 0; font-size: 1.25rem; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.phead__facts dd a { color: var(--cold); white-space: nowrap; }
.phead__facts dt { font-size: 13.5px; color: var(--ink-2); }

/* Сетка: разделы и оглавление слева, карточки секций справа */
.ipage { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 32px var(--gutter) 96px; }
.iside { top: calc(var(--header-h) + 24px); }
.iside__nav a[aria-current="page"] { box-shadow: 0 0 0 1px var(--line); }

/* Секция-карточка */
.ibody[data-info] { display: flex; flex-direction: column; gap: 16px; }
.isec { display: block; padding: 32px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.isec__head { max-width: 66ch; margin-bottom: 24px; }
.isec__head .isec__eyebrow { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--cold); }
.isec__head h2 { font-size: 1.5rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.022em; }
.isec__head p:not(.isec__eyebrow) { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* Плитки */
.itiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.itiles--1 { grid-template-columns: minmax(0, 1fr); }
.itiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.itiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.itile { display: flex; flex-direction: column; padding: 20px; border-radius: 14px; background: #f4f6f8; }
.itile b { font-size: 15.5px; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; }
.itile p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.itile small { align-self: flex-start; margin-top: auto; padding: 4px 10px; border-radius: 999px; background: #fff; font-size: 12.5px; font-weight: 600; color: var(--ok); transform: translateY(10px); }
.itile:has(small) { padding-bottom: 28px; }
.itiles--1 .itile { padding: 16px 20px; }

/* О компании */
.iblock + .iblock { margin-top: 28px; padding-top: 28px; box-shadow: inset 0 1px 0 var(--line); }
.iblock h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 650; letter-spacing: -0.015em; }
.iblock p { max-width: 70ch; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.iblock p b { color: var(--ink); font-weight: 600; }
.icats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.icat { display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 16px; border-radius: 14px; background: #f4f6f8; color: var(--ink); transition: box-shadow .2s ease, transform .2s var(--ease-out); }
.icat--valve { background: #f4f4f6; } .icat--bearing { background: #f5f7f9; }
.icat__img { display: block; aspect-ratio: 3 / 2; }
.icat__img img { width: 100%; height: 100%; object-fit: contain; }
.icat b { padding: 0 6px; font-size: 14.5px; line-height: 1.35; font-weight: 600; }
.ibrand { display: grid; grid-template-columns: minmax(0, 1fr) 264px; gap: 32px; align-items: start; }
.ichecks { display: grid; gap: 10px; margin-top: 14px; }
.ichecks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; }
.ichecks .icon { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ok); }
.istock { display: flex; gap: 14px; margin-top: 22px; padding: 18px 20px; border-radius: 14px; background: var(--cold-tint); }
.istock > .icon { flex: none; width: 24px; height: 24px; color: var(--cold); }
.istock b { font-size: 15px; font-weight: 600; }
.istock p { margin-top: 4px; font-size: 14.5px; }
.icert { padding: 14px; border-radius: 16px; background: #f4f6f8; }
.icert figcaption { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.icert__img { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 10px 24px -16px rgba(16, 24, 40, .35); cursor: zoom-in; }
.icert__img img { display: block; width: 100%; height: auto; }
.icert__img span { position: absolute; left: 50%; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 23, 27, .82); font-size: 13px; font-weight: 600; color: #fff; transform: translateX(-50%); }
.icert__img span .icon { width: 14px; height: 14px; }
.icert__cap { margin-top: 10px; font-size: 13px; text-align: center; color: var(--ink-3); }
.certview { width: min(92vw, 760px); padding: 0; border: 0; border-radius: 16px; background: #fff; }
.certview::backdrop { background: rgba(10, 12, 16, .7); }
.certview__in { position: relative; padding: 16px; }
.certview__in img { display: block; width: auto; max-width: 100%; max-height: 80vh; margin: 0 auto; }
.certview__in p { margin-top: 10px; font-size: 13.5px; text-align: center; color: var(--ink-2); }
.certview .iconbtn { position: absolute; top: 10px; right: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); }

/* Гарантия */
.iprep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.iphoto, .icert { margin: 0; }
.iphoto { min-height: 280px; overflow: hidden; border-radius: 14px; background: #f4f6f8; }
.iphoto img { width: 100%; height: 100%; object-fit: cover; }
.iform { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 24px; border-radius: 16px; background: #f4f6f8; }
.iform__who { display: flex; gap: 14px; max-width: 64ch; }
.iform__who > .icon { flex: none; width: 26px; height: 26px; color: var(--cold); }
.iform__who b { font-size: 16px; font-weight: 600; }
.iform__who p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.iform__who a { color: var(--cold); }
.lead__note { padding: 12px 14px; border-radius: 10px; background: #f4f6f8; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.lead__note a { color: var(--cold); font-weight: 600; }

/* Шаги: плитки с номером */
.isteps { gap: 12px; }
.isteps li { padding: 58px 18px 18px; border-radius: 14px; background: #f4f6f8; }
.isteps li::before { left: 18px; top: 18px; background: #fff; box-shadow: none; }
.isteps li::after { display: none; }
.isteps b { font-size: 15px; }
.isteps p { font-size: 14px; }

/* Вопросы */
.isec .faq { margin-top: -8px; }
.isec .faq details:last-child { border-bottom: 0; }

/* Финальный призыв */
.icta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 32px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.icta h2 { font-size: 1.375rem; line-height: 1.25; font-weight: 650; letter-spacing: -0.02em; }
.icta p { max-width: 62ch; margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.icta__acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Контакты */
.ccards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ccard { padding: 20px; border-radius: 14px; background: #f4f6f8; box-shadow: none; }
.ccard--main { background: var(--cold-tint); }
.ccard small { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.ccard .ccard__v { margin-top: 8px; font-size: 1.5rem; }
.clines { display: grid; margin-top: 10px; }
.clines div { padding: 10px 0; box-shadow: inset 0 -1px 0 rgba(16, 24, 40, .08); }
.clines div:last-child { box-shadow: none; }
.clines dt { font-size: 13px; color: var(--ink-3); }
.clines dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.clines dd a:hover { color: var(--cold); }
.ctag { display: inline-block; margin-left: 4px; padding: 1px 6px; border-radius: 6px; background: #fff; font-size: 11.5px; font-weight: 600; color: var(--cold); vertical-align: 1px; }
.ccard__note { font-weight: 600; color: var(--ink) !important; }

.imap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 16px; }
.imap__list { display: flex; flex-direction: column; gap: 10px; }
.imap .place { display: flex; flex-direction: column; padding: 18px; border-radius: 14px; background: #f4f6f8; box-shadow: inset 0 0 0 1.5px transparent; transition: box-shadow .2s ease, background-color .2s ease; }
.imap .place.is-on { background: #fff; box-shadow: inset 0 0 0 1.5px var(--cold); }
.imap .place small { font-size: 12.5px; font-weight: 600; color: var(--cold); }
.imap .place b { margin-top: 4px; font-size: 16px; }
.imap .place .place__addr { margin-top: 4px; font-size: 14.5px; color: var(--ink); }
.imap .place p { max-width: none; font-size: 13.5px; }
.imap .place .ccard__acts { flex-direction: row; flex-wrap: wrap; margin-top: 12px; padding: 0; }
.imap__frame { min-height: 460px; overflow: hidden; border-radius: 14px; background: #eef0f3; }
.imap__frame iframe { display: block; width: 100%; height: 100%; min-height: 460px; border: 0; }
.isec .rtable { background: #fff; }

@media (hover: hover) and (pointer: fine) {
  .icat:hover { box-shadow: 0 0 0 1px rgba(16, 24, 40, .12), 0 14px 28px -20px rgba(16, 24, 40, .35); transform: translateY(-2px); }
}

@media (max-width: 1100px) {
  .phead__in { grid-template-columns: 1fr; }
  .phead__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ipage { grid-template-columns: 190px minmax(0, 1fr); gap: 28px; }
  .itiles--4, .icats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .itiles--3 { grid-template-columns: minmax(0, 1fr); }
  .ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard--max { grid-column: 1 / -1; }
  .imap { grid-template-columns: 1fr; }
  .imap__frame, .imap__frame iframe { min-height: 360px; }
  .ibrand { grid-template-columns: minmax(0, 1fr) 200px; }
  .isteps { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ipage { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 16px; }
  .iside__nav a[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; }
  .iside__nav { margin: 0; padding: 0 0 4px; }
}
@media (max-width: 760px) {
  .phead { padding-bottom: 24px; }
  .phead__in { margin-top: 18px; }
  .phead__copy h1 { font-size: 1.875rem; line-height: 1.1; }
  .phead__copy p { margin-top: 10px; font-size: 15px; }
  .phead__facts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .phead__facts div { padding: 12px 14px; }
  .phead__facts dd { font-size: 1.0625rem; }
  .isec, .icta { padding: 20px 16px; border-radius: 16px; }
  .isec__head { margin-bottom: 18px; }
  .isec__head h2 { font-size: 1.3125rem; }
  .itiles, .itiles--3, .itiles--4, .ccards, .iprep, .ibrand { grid-template-columns: minmax(0, 1fr); }
  .itile { padding: 16px; }
  .icats { gap: 8px; }
  .isteps { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .isteps li { padding: 16px 16px 16px 58px; min-height: 0; }
  .isteps li::before { left: 14px; top: 13px; }
  .iphoto { min-height: 200px; }
  .icert { max-width: 280px; }
  .icta__acts, .icta__acts .btn { width: 100%; }
  .iform .btn { width: 100%; }
}

/* v25 — новости, рассылка, документы, корзина, кабинет, 404 */
.phead--solo .phead__in { grid-template-columns: minmax(0, 1fr); }
.co, .acc { padding-top: 32px; }
.npage { padding-top: 32px; padding-bottom: 96px; }
.npage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.npage__title { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.022em; }
.nsub { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 24px 48px; margin-top: 48px; padding: 32px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.nsub__eyebrow { font-size: 13px; font-weight: 600; color: var(--cold); }
.nsub h2 { margin-top: 8px; font-size: 1.5rem; line-height: 1.2; font-weight: 650; letter-spacing: -0.022em; text-wrap: balance; }
.nsub__text > p:last-child { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.nsub__form { display: flex; flex-wrap: wrap; gap: 10px; }
.nsub__form .field { flex: 1 1 220px; height: 52px; }
.nsub__status { flex-basis: 100%; font-size: 14px; color: var(--hot); }
.nsub__status.is-ok { color: var(--ok); font-weight: 600; }
.ipage > .doc { padding: 40px 48px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.nf__links .btn { min-width: 200px; }
@media (max-width: 860px) { .nsub { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .co, .acc { padding-top: 20px; }
  .npage { padding-top: 20px; }
  .nsub { margin-top: 32px; padding: 20px 16px; border-radius: 16px; }
  .nsub__form .btn { width: 100%; }
  .ipage > .doc { padding: 24px 16px; border-radius: 16px; }
  .nf__links { width: 100%; flex-direction: column; }
}
.ipage > .doc { overflow-wrap: anywhere; }
main.wrap > .ipage { padding-left: 0; padding-right: 0; } /* документы: .ipage уже внутри .wrap */

/* =====================================================================
   v32 — меню «Каталог»: категории со студийными фото, подборки и марки
   ровной сеткой, светлая карточка помощи инженера, строка «Весь каталог».
   ===================================================================== */
.mega {
  width: 980px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 272px; grid-template-rows: auto auto;
  padding: 10px; border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(16, 24, 40, .07), 0 2px 4px rgba(16, 24, 40, .04), 0 28px 56px -24px rgba(16, 24, 40, .3);
}
.mega__col { padding: 14px 10px 8px; }
.mega__h { padding: 0 8px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.mega__col--links .mega__makes + .mega__h, .mega__col--links .mega__link + .mega__h { margin-top: 16px; }

/* Категории */
.mega__item { grid-template-columns: 64px minmax(0, 1fr) 16px; gap: 14px; padding: 8px; border-radius: 14px; }
.mega__item + .mega__item { margin-top: 2px; }
.mega__thumb { width: 64px; height: 48px; border-radius: 10px; background: #f4f6f8; box-shadow: none; }
.mega__item--valve .mega__thumb { background: #f4f4f6; }
.mega__item--bearing .mega__thumb { background: #f5f7f9; }
.mega__thumb img { object-fit: contain; transition: transform .3s var(--ease-out); }
.mega__txt b { font-size: 14.5px; line-height: 1.3; }
.mega__txt small { margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.mega .num { font-variant-numeric: tabular-nums; }
.mega__go { width: 16px; height: 16px; color: var(--cold); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .2s var(--ease-out); }
.mega__item:hover, .mega__item:focus-visible, .mega__link:hover, .mega__link:focus-visible { background: #f5f6f8; }
.mega__item:hover .mega__go, .mega__item:focus-visible .mega__go { opacity: 1; transform: none; }
.mega__item:hover .mega__thumb img { transform: scale(1.06); }

/* Подборки и марки */
.mega__link { padding: 9px 8px; font-size: 14px; font-weight: 500; }
.mega__link span:first-child { font: inherit; color: var(--ink); letter-spacing: -0.005em; }
.mega__link .num { min-width: 3ch; font-size: 12.5px; font-weight: 500; text-align: right; color: var(--ink-3); }
.mega__makes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 0 8px; }
.mega > .mega__col:first-child { grid-column: 1; grid-row: 1; }
.mega > .mega__col--links { grid-column: 2; grid-row: 1; }
.mega__makes a { justify-content: center; min-width: 0; height: 32px; padding: 0 8px; border-radius: 9px; background: #f4f6f8; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Помощь инженера: светлая карточка, синий акцент только на действии */
.mega__aside {
  grid-column: 3; grid-row: 1; gap: 6px; margin: 0; padding: 20px; border-radius: 14px;
  background: #f4f6f8; color: var(--ink); box-shadow: none;
}
.mega__badge { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 8px; border-radius: 10px; background: #fff; color: var(--cold); box-shadow: 0 0 0 1px rgba(16, 24, 40, .06); }
.mega__badge .icon { width: 18px; height: 18px; }
.mega__aside b { font-size: 16px; font-weight: 650; letter-spacing: -0.015em; }
.mega__aside p { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.mega__phone { margin-top: 8px; font-size: 17px; font-weight: 650; color: var(--ink); }
.mega__phone:hover { color: var(--cold); }
.mega__hours { font-size: 12.5px; color: var(--ink-3); }
.mega__acts { display: grid; gap: 8px; margin-top: auto; padding-top: 16px; }
.mega__acts .btn { width: 100%; height: 40px; border-radius: 10px; font-size: 14px; }
.mega__find { margin: 0; background: #fff !important; color: var(--ink); box-shadow: 0 0 0 1px rgba(16, 24, 40, .1) !important; }
.mega__find .icon { width: 16px; height: 16px; }

/* Строка «Весь каталог» */
.mega__all {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 6px; padding: 12px 18px; border-radius: 12px; box-shadow: inset 0 1px 0 var(--line);
  font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.mega__all:hover { background: #f5f6f8; color: var(--cold); }
.mega__total { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--ink-3); }
.mega__total .icon { width: 16px; height: 16px; color: var(--cold); }

@media (max-width: 1280px) { .mega { width: 880px; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 240px; } }
@media (max-width: 1100px) { .mega { width: 700px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* =====================================================================
   v34 — внутренние страницы «белым листом»: без карточек внутри карточек,
   разделы и пункты отделены тонкими линиями, цифры табличные.
   ===================================================================== */
body:has(.ipage), body:has(.npage), body:has(.acc) { background: #fff; }

/* Шапка страницы: заголовок, под ним факты крупными цифрами через разделители */
.phead { padding-bottom: 36px; }
.phead__in { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 0; }
.phead__copy h1 { max-width: 22ch; }
.phead__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 32px; box-shadow: inset 0 1px 0 var(--line); }
.phead__facts div { padding: 20px 24px 0 0; border-radius: 0; background: none; }
.phead__facts div + div { padding-left: 24px; box-shadow: inset 1px 0 0 var(--line); }
.phead__facts dd { font-size: clamp(1.375rem, 2vw, 1.75rem); line-height: 1.2; font-weight: 650; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.phead__facts dt { margin-top: 4px; font-size: 13.5px; color: var(--ink-3); }

/* Сайдбар: активная страница — заливка, оглавление — бегущая полоска */
.iside { max-height: calc(100vh - var(--header-h) - 48px); overflow-y: auto; scrollbar-width: none; }
.iside::-webkit-scrollbar { display: none; }
.iside__nav a[aria-current="page"] { background: #f2f4f7; box-shadow: none; }
.iside__toc { position: relative; }
.iside__toc a { transition: color .2s ease; }
.iside__toc a::before { display: none; }
.iside__toc a[aria-current] { color: var(--ink); font-weight: 500; }
.toc-bar { position: absolute; left: 0; top: 0; width: 2px; height: 0; border-radius: 1px; background: var(--cold); opacity: 0; pointer-events: none; transition: transform .32s var(--ease-out), height .32s var(--ease-out), opacity .2s ease; }
.toc-bar.is-on { opacity: 1; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .toc-bar { transition: none; } }

/* Разделы: без рамок, через линию */
.ibody[data-info] { gap: 0; }
.isec { padding: 48px 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.ibody[data-info] > .isec:first-child { padding-top: 8px; box-shadow: none; }
.isec__head { margin-bottom: 28px; }
.isec__head h2 { font-size: 1.625rem; letter-spacing: -0.025em; }

/* Пункты: строки с линией сверху вместо серых плиток */
.itiles { gap: 0 40px; }
.itile { padding: 20px 0 22px; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--line); }
.itile:has(small) { padding-bottom: 22px; }
.itile small { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 0; background: none; transform: none; }
.itile small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.itiles--1 .itile { padding: 18px 0; }

/* Нумерованный чек-лист и шаги */
.inums { counter-reset: n; display: grid; }
.inums li { counter-increment: n; display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 16px 0; box-shadow: inset 0 1px 0 var(--line); }
.inums li::before { content: counter(n, decimal-leading-zero); grid-row: span 2; padding-top: 1px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--cold); }
.inums b { font-size: 15.5px; font-weight: 600; }
.inums p { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.isteps { gap: 24px; }
.isteps li { padding: 18px 8px 0 0; border-radius: 0; background: none; box-shadow: inset 0 2px 0 var(--line); }
.isteps li:first-child { box-shadow: inset 0 2px 0 var(--cold); }
.isteps li::before { content: counter(st, decimal-leading-zero); position: static; display: block; width: auto; height: auto; margin-bottom: 10px; border-radius: 0; background: none; box-shadow: none; font-size: 13px; font-weight: 600; color: var(--cold); }

/* О компании */
.ibrand { grid-template-columns: minmax(0, 1fr) 248px; gap: 48px; }
.istock { padding: 2px 0 2px 18px; border-radius: 0; background: none; box-shadow: inset 2px 0 0 var(--cold); }
.icert { padding: 0; background: none; }
.icert figcaption { font-size: 12.5px; color: var(--ink-3); }

/* Гарантия */
.iprep { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; }
.iform { background: none; box-shadow: 0 0 0 1px var(--line); }

/* Финальный призыв — продолжение страницы, а не отдельная карточка */
.icta { padding: 44px 0 8px; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--line); }

/* Оплата: частные лица и юрлица рядом */
.ipay { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.ipay__col { padding-right: 40px; }
.ipay__col + .ipay__col { padding: 0 0 0 40px; box-shadow: inset 1px 0 0 var(--line); }
.ipay .isec__head { min-height: 132px; }
.rtable__top { padding: 14px 14px 14px 24px; }
.rtable__all { height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; }
.rtable__all .icon { width: 16px; height: 16px; }

/* Контакты: линии связи колонками, офисы слева и карта справа */
.ccards { gap: 0; }
.ccard { padding: 2px 28px 2px 0; border-radius: 0; background: none; }
.ccard--main { background: none; }
.ccard + .ccard { padding-left: 28px; box-shadow: inset 1px 0 0 var(--line); }
.ccard .ccard__v { font-size: 1.625rem; }
.ccard .iact, .imap .iact { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
@media (hover: hover) and (pointer: fine) {
  .ccard .iact:hover, .imap .iact:hover, .iact:hover {
    background: var(--ink) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
}
.iact[aria-pressed="true"], .imap .iact[aria-pressed="true"] {
  background: var(--cold) !important;
  color: #fff !important;
  box-shadow: none !important;
}
@media (hover: hover) and (pointer: fine) {
  .iact[aria-pressed="true"]:hover, .imap .iact[aria-pressed="true"]:hover {
    background: #004494 !important;
    color: #fff !important;
  }
}
.imap { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.imap .place { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.imap .place.is-on { background: #f7f9fd; box-shadow: inset 0 0 0 1.5px var(--cold); }
.imap__frame { position: sticky; top: calc(var(--header-h) + 24px); height: 560px; min-height: 0; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); }
.imap__frame iframe { height: 100%; min-height: 0; }

/* Новости: снимки одного формата, карточка без рамки */
.ngrid { gap: 44px 28px; }
.ncard2 { border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.ncard2__img { aspect-ratio: 3 / 2; border-radius: 14px; }
.ncard2__body { gap: 8px; padding: 16px 0 0; }
.ncard2__meta { gap: 4px 10px; }
.ncard2__meta > :last-child::before { content: "·"; margin-right: 10px; color: var(--line-2); }
.ncard2 h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 650; letter-spacing: -0.016em; }
.ncard2 p { font-size: 14.5px; }
@media (hover: hover) and (pointer: fine) { .ncard2:hover { box-shadow: none; } .ncard2:hover h3 { color: var(--cold); } }
.npage__bar { padding-bottom: 20px; margin-bottom: 28px; box-shadow: inset 0 -1px 0 var(--line); }
.nsub { background: #f4f6f8; box-shadow: none; }

/* Кабинет: одна карточка входа, разделы без обёрток */
.acc__grid { grid-template-columns: 360px minmax(0, 1fr); gap: 48px; }
.acc__card { border-radius: 16px; }
.acc__panel { padding: 0; border-radius: 0; background: none; box-shadow: none; }
.acc__ph { padding-bottom: 16px; box-shadow: inset 0 -1px 0 var(--line); }
.acc__empty { background: none; box-shadow: none; border: 1.5px dashed var(--line-2); }
.gcar { background: #fff; }
.gform { margin-top: 28px; padding-top: 24px; }
.gform h3 { font-size: 1.0625rem; }

@media (max-width: 1100px) {
  .ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard--max { margin-top: 24px; padding: 24px 0 0; box-shadow: inset 0 1px 0 var(--line); }
  .imap { grid-template-columns: minmax(0, 1fr); }
  .imap__frame { position: static; height: 380px; }
  .ipay { grid-template-columns: minmax(0, 1fr); }
  .ipay__col { padding: 0; }
  .ipay__col + .ipay__col { margin-top: 40px; padding: 40px 0 0; box-shadow: inset 0 1px 0 var(--line); }
  .ipay .isec__head { min-height: 0; }
  .acc__grid { grid-template-columns: minmax(0, 1fr); }
  .acc__card { position: static; max-width: 520px; }
  .iside { max-height: none; overflow: visible; }
}
@media (max-width: 760px) {
  .phead__facts { grid-template-columns: minmax(0, 1fr); margin-top: 20px; box-shadow: none; }
  .phead__facts div, .phead__facts div + div { padding: 12px 0; box-shadow: inset 0 1px 0 var(--line); }
  .phead__facts dd { font-size: 1.25rem; }
  .isec { padding: 32px 0; border-radius: 0; }
  .icta { padding: 32px 0 0; border-radius: 0; }
  .ibody[data-info] > .isec:first-child { padding-top: 4px; }
  .isec__head h2 { font-size: 1.375rem; }
  .itiles { gap: 0; }
  .itile { padding: 16px 0; }
  .isteps { gap: 0; }
  .isteps li, .isteps li:first-child { display: grid; grid-template-columns: 48px minmax(0, 1fr); padding: 14px 0; box-shadow: inset 0 1px 0 var(--line); }
  .isteps li::before { grid-row: span 2; margin: 0; }
  .iprep, .ibrand { gap: 24px; }
  .ccards { grid-template-columns: minmax(0, 1fr); }
  .ccard, .ccard + .ccard, .ccard--max { margin: 0; padding: 20px 0; box-shadow: inset 0 1px 0 var(--line); }
  .ccard:first-child { padding-top: 0; box-shadow: none; }
  .imap__frame { height: 320px; }
  .rtable__top .rtable__all { width: 100%; }
  .ngrid { gap: 32px; }
  .acc__grid { gap: 28px; }
}
.imap__map, .imap__map iframe { display: block; width: 100%; height: 100%; border: 0; }

/* =====================================================================
   v38 — главная без дублей и складских чисел, модальные формы с закреплёнными
   шапкой и кнопками, юридический блок и «Часто ищут» в подвале.
   ===================================================================== */

/* Подбор по автомобилю: заголовок слева, выбор в одну строку справа */
.fitbar { padding-top: 56px; padding-bottom: 24px; }
.fitbar__in { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); align-items: center; gap: 12px 48px; }
.fitbar__head .sh__sub { margin-top: 8px; }
.fitbar .picker { margin: 0; }
.fitbar__alt { grid-column: 2; font-size: 14px; color: var(--ink-3); }
.fitbar__alt button { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--cold); cursor: pointer; }
.fitbar__alt button:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Первый экран: цена «от» и статус вместо числа позиций */
.ftile__n b .num { font-variant-numeric: tabular-nums; }
.ftile__n small { color: var(--ok); font-weight: 500; }

/* Комплектующие для ремонта: подпункты со стрелкой вместо счётчика */
.repair__subs a .sh__arrow { width: 16px; height: 16px; color: var(--ink-3); opacity: 0; transform: translateX(-4px); transition: opacity .15s ease, transform .2s var(--ease-out); }
.repair__subs a:hover .sh__arrow, .repair__subs a:focus-visible .sh__arrow { opacity: 1; transform: none; color: var(--cold); }

/* Статьи на главной: три в ряд */
.ngrid--home { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.trust { margin-top: 24px; }

/* Меню каталога: подборки со стрелкой, подписи категорий в две строки максимум */
.mega__link .mega__go { flex: none; }
.mega__link:hover .mega__go, .mega__link:focus-visible .mega__go { opacity: 1; transform: none; }
.mega__txt small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Модальные формы: шапка и панель действий закреплены, прокручиваются только поля */
.lead { overflow: hidden; }
.lead .modal__panel { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.lead .modal__head { flex: none; padding: 20px 24px 16px; box-shadow: inset 0 -1px 0 var(--line); }
.lead .modal__head h2 { font-size: 1.3125rem; }
.lead .modal__head p { margin-top: 4px; font-size: 14px; }
.lead__icon { width: 44px; height: 44px; border-radius: 12px; }
.lead .modal__head { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; }
.lead__product { flex: none; margin: 14px 24px 0; }
.lead .modal__body { flex: 1 1 auto; min-height: 0; padding: 16px 24px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.lead .form { gap: 12px 14px; }
.lead .fld { gap: 5px; }
.lead .fld > span, .lead .gform__lab, .lead__parts legend { font-size: 12.5px; }
.lead .fld input, .lead .fldbtn { height: 44px; }
.lead .fld textarea { min-height: 72px; }
.lead .fld small.fld__hint { font-size: 12px; line-height: 1.4; }
.lead .chip span { height: 32px; padding: 0 12px; font-size: 13px; }
.lead .modal__foot { flex: none; display: grid; gap: 12px; padding: 14px 24px 18px; background: #fff; box-shadow: inset 0 1px 0 var(--line), 0 -12px 24px -20px rgba(16, 24, 40, .25); }
.lead .lead__status { margin: 0; }
.lead__consent { font-size: 13px; }
.modal__acts { display: flex; flex-wrap: wrap; gap: 10px; }
.modal__acts .lead__go { flex: 1 1 260px; }
.lead .modal__acts .btn { height: 48px; }
@media (max-width: 600px) {
  .lead { width: 100vw; max-width: 100vw; max-height: calc(100dvh - 8px); margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .lead .modal__panel { max-height: calc(100dvh - 8px); }
  .lead .modal__head, .lead .modal__body, .lead .modal__foot { padding-left: 16px; padding-right: 16px; }
  .lead .form { grid-template-columns: minmax(0, 1fr); }
  .lead__product { margin: 12px 16px 0; }
  .modal__acts .btn { flex: 1 1 100%; }
}

/* Подвал: «Часто ищут» и юридический блок */
.footer__seo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 40px; padding-top: 20px; box-shadow: inset 0 1px 0 #2a2f36; font-size: 13px; }
.footer__seo[hidden] { display: none; }
.footer__seo-h { color: #7b838c; }
.footer__seo a { max-width: 100%; overflow: hidden; color: #9aa2ab; white-space: nowrap; text-overflow: ellipsis; transition: color .15s ease; }
.footer__seo a:hover { color: #fff; }
.footer .footer__bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 20px 40px; margin-top: 20px; padding-top: 20px; }
.footer__seo + .footer__bottom { margin-top: 16px; }
.footer__legal { display: grid; gap: 6px; margin: 0; font-size: 12.5px; line-height: 1.5; color: #7b838c; }
.footer__legal p { display: flex; flex-wrap: wrap; gap: 2px 16px; }
.footer__legal b { font-weight: 600; color: #c9ced4; }
.footer__legal .num { font-variant-numeric: tabular-nums; }
.footer__docs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 20px; font-size: 12.5px; }
.footer__docs a { white-space: nowrap; }
.footer__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.footer__dev { display: flex; align-items: center; }
.footer a.wl-credit-badge { color: var(--wl-cb-text); }

@media (max-width: 1100px) {
  .fitbar__in { grid-template-columns: minmax(0, 1fr); }
  .fitbar__alt { grid-column: 1; }
  .ngrid--home { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ngrid--home > :nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .fitbar { padding-top: 36px; }
  .ngrid--home { grid-template-columns: minmax(0, 1fr); }
  .ngrid--home > :nth-child(3) { display: flex; }
  .footer .footer__bottom { grid-template-columns: minmax(0, 1fr); }
  .footer__docs { justify-content: flex-start; }
  .footer__meta { align-items: flex-start; }
  .footer__seo { flex-direction: column; gap: 8px; }
}

/* =====================================================================
   v39 — каталог: белая страница, строки с воздухом и линиями-разделителями,
   миниатюры 96 px, фильтры на серой панели без счётчиков.
   ===================================================================== */
body:has(.catalog) { background: #fff; }
.catalog { padding-bottom: 96px; }

/* Панель фильтров (на ≤1024 px — выезжающая шторка, её стили выше) */
@media (min-width: 1025px) {
  .catalog { grid-template-columns: 272px minmax(0, 1fr); gap: 40px; }
  .filters { top: calc(var(--header-h) + 16px); padding: 18px 20px 20px; border-radius: 16px; background: #f4f6f8; box-shadow: none; }
}
.fgroup { padding: 16px 0; border-bottom-color: rgba(16, 24, 40, .08); }
.fgroup h3 { margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fopt { padding: 6px 0; font-size: 14px; }
.fopt span:first-of-type { flex: 1; min-width: 0; }
.fopt--off { opacity: .38; }
.fgroup .field { height: 38px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .1); }
.fchip { height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .1); font: 500 12.5px/1 var(--sans); font-variant-numeric: tabular-nums; }
.fchip:hover { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .28); }
.fchip[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.fmore { margin-top: 8px; }

/* Панель над выдачей */
.toolbar { margin-bottom: 0; padding-bottom: 14px; box-shadow: inset 0 -1px 0 var(--line); }
.active-filters { margin: 14px 0 16px; }

/* Строка списка */
.plist--lines { overflow: visible; border: 0; border-radius: 0; background: none; box-shadow: none; }
.pline { display: grid; grid-template-columns: 96px minmax(0, 1fr) 176px; align-items: center; gap: 22px; padding: 20px 0; box-shadow: inset 0 -1px 0 var(--line); }
.pline__img { display: block; width: 96px; height: 80px; overflow: hidden; border-radius: 12px; background: #f4f6f8; }
.pline__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.pline__img img.is-contain { object-fit: contain; padding: 6px; mix-blend-mode: multiply; }
.pline__main { min-width: 0; }
.pline__title { display: -webkit-box; overflow: hidden; font-size: 15.5px; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); -webkit-line-clamp: 2; -webkit-box-orient: vertical; transition: color .15s ease; }
.pline__fit { margin-top: 4px; overflow: hidden; font-size: 13.5px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.pline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; }
.pline__code { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pline__k { font-size: 12px; font-weight: 500; color: var(--ink-3); }
.pline .skuc, .pline .oemc { font-variant-numeric: tabular-nums; }
.pline__tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.pline__side { display: grid; justify-items: end; gap: 4px; text-align: right; }
.pline__price { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pline__status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.pline__status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pline__status.is-ok { color: var(--ok); }
.pline__status.is-wait { color: var(--wait); }
.pline .buy-btn { min-width: 148px; height: 40px; margin-top: 8px; border-radius: 10px; }
@media (hover: hover) and (pointer: fine) {
  .pline:hover .pline__title { color: var(--cold); }
  .pline:hover .pline__img img { transform: scale(1.05); }
}

/* Нет фото: знак категории вместо серого квадрата */
.nophoto { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 100%; background: #f4f6f8; color: #9aa2ab; text-align: center; }
.nophoto svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.nophoto small { padding: 0 6px; font-size: 11px; line-height: 1.2; }
.pline__img .nophoto svg { width: 24px; height: 24px; }
.pline__img .nophoto small { font-size: 10px; }

/* Карточки сеткой */
.catalog .pgrid { margin-top: 20px; }
.more .btn { min-width: 200px; }

@media (max-width: 760px) {
  .pline { grid-template-columns: 80px minmax(0, 1fr); align-items: start; gap: 12px 14px; padding: 16px 0; }
  .pline__img { width: 80px; height: 68px; border-radius: 10px; }
  .pline__title { font-size: 14.5px; }
  .pline__meta { gap: 6px 12px; margin-top: 8px; }
  .pline__code .oemc ~ .oemc, .pline__code .oemc__more { display: none; } /* на телефоне — один OEM, остальные в карточке товара */
  .pline__side { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "price btn" "status btn"; justify-items: start; align-items: center; column-gap: 12px; text-align: left; }
  .pline__price { grid-area: price; font-size: 1.125rem; }
  .pline__status { grid-area: status; }
  .pline .buy-btn { grid-area: btn; min-width: 0; margin: 0; }
}

/* =====================================================================
   v42 — страница товара: белый лист, разделы через линию, вкладки
   с бегущей полоской, табличные цифры цены и артикулов.
   ===================================================================== */
body:has(.product) { background: #fff; }
.buy__price strong, .buy__codes .copy, .psec .mono, .oems .copy { font-variant-numeric: tabular-nums; }
.buy__price { align-items: center; }
.buy__panel .whp { margin-top: 14px; gap: 6px; }
.buy__panel .whp__i { height: 26px; padding: 0 10px; font-size: 12px; }
.buy__panel .whp__i b { font-size: 12px; font-variant-numeric: tabular-nums; }

.subnav { background: rgba(255, 255, 255, .94); box-shadow: inset 0 -1px 0 var(--line); }
.subnav__in { position: relative; gap: 32px; }
.subnav a { border-bottom: 0; transition: color .2s ease; }
.subnav a:hover, .subnav a[aria-current="true"] { color: var(--ink); }
.subnav__bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; border-radius: 1px; background: var(--ink); pointer-events: none; transition: transform .32s var(--ease-out), width .32s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .subnav__bar { transition: none; } }

.psec { margin: 0; padding: 48px 0; border-radius: 0; background: none; box-shadow: inset 0 1px 0 var(--line); scroll-margin-top: calc(var(--header-h) + 60px); }
.subnav + .wrap > .psec:first-child { box-shadow: none; }
.psec:last-of-type { margin-bottom: 40px; }
.psec .oems, .psec .pulley { background: #f4f6f8; }
.psec .plist--lines { background: none; }

/* v44 — заготовка карточки товара до загрузки каталога (на сайте в h1 уже SEO-заголовок от роутера) */
.product-pending { padding: 20px 0 64px; }
.product-pending h1 { margin-top: 24px; max-width: 28ch; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.2; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.csum__vin { width: 100%; margin-top: 8px; }
.lead__files input[type="file"] { height: auto; padding: 10px 12px; font-size: 13.5px; cursor: pointer; }
.lead__files input[type="file"]::file-selector-button { margin-right: 12px; padding: 6px 12px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.lead__files .fld__hint a { color: var(--cold); font-weight: 600; }

/* v46 — оформление заказа (checkout.html, assets/js/checkout.js) */
.co [hidden], .coin [hidden] { display: none !important; }
.co .lead__go, .coin .lead__go { position: relative; }
.co .cstep > .cseg { margin-bottom: 18px; }
.co .form + .colegal { margin-top: 22px; }
.fld > label { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.fld select {
  width: 100%; min-height: 46px; padding: 0 40px 0 14px; border: 0; border-radius: 11px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2314171b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center / 12px;
  color: var(--ink); font: inherit; font-size: 15px; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .14); -webkit-appearance: none; appearance: none; cursor: pointer; transition: box-shadow .15s ease;
}
.fld select:hover { box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .26); }
.fld select:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--cold), 0 0 0 4px var(--cold-tint); }
.fld select:disabled { background-color: #f6f7f9; color: var(--ink-3); cursor: progress; }
.fld [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #d7262e, 0 0 0 4px #fdecec; }
.fld__hint { font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.linkbtn { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--cold); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linkbtn:hover { text-decoration-thickness: 2px; }

/* Покупатель: вошёл / гость */
.coauth { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 20px; padding: 14px 16px; border-radius: 14px; background: var(--ok-tint, #eef7f2); }
.coauth__mark { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--ok); }
.coauth__mark svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.coauth p { flex: 1; min-width: 220px; font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.coauth a { font-size: 14px; font-weight: 600; color: var(--ok); text-decoration: underline; text-underline-offset: 3px; }
.coguest { margin-bottom: 18px; padding-bottom: 18px; box-shadow: inset 0 -1px 0 var(--line); }
.coguest__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.coguest__row .cseg { margin-bottom: 0; }
.coguest__login { font-size: 14px; color: var(--ink-2); }
.coguest__pwd { max-width: 380px; margin-top: 16px; }
.colegal h3 { margin-bottom: 14px; font-size: 1rem; font-weight: 650; }

/* Получение */
.copt__price { white-space: nowrap; }
.copt__price--paid { color: var(--ink); }
.copt__price:empty { display: none; }
.cdel { margin-top: 18px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--line); }
.cdek__cities { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 16px; }
.cdek__cities .cdel__h { margin: 0; }
.chipbtn { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .14); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .16s var(--ease-out); }
.chipbtn[aria-pressed="true"] { background: var(--ink); color: #fff; box-shadow: none; }
.chipbtn:active { transform: scale(.97); }
.chipbtn:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .chipbtn:not([aria-pressed="true"]):hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(16, 24, 40, .3); } }
.cdek__city { position: relative; }
.cdek__list { position: absolute; top: calc(100% - 2px); left: 0; right: 0; z-index: 20; max-height: 280px; margin: 4px 0 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(16, 24, 40, .35); }
.cdek__list li { display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border-radius: 9px; cursor: pointer; }
.cdek__list li b { font-size: 14.5px; font-weight: 600; }
.cdek__list li small { font-size: 12.5px; color: var(--ink-3); }
.cdek__list li[aria-selected="true"] { background: #eef3fb; }
@media (hover: hover) and (pointer: fine) { .cdek__list li:hover { background: #f4f6f8; } }
.cdek__pvz { display: flex; flex-direction: column; gap: 8px; }
.cdek__filter { min-height: 40px !important; font-size: 14px !important; background: #f6f7f9 !important; box-shadow: none !important; }
.cdek__filter:focus { background: #fff !important; box-shadow: inset 0 0 0 1.5px var(--cold) !important; }
.cdek__calc { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; padding: 16px 18px; border-radius: 14px; background: #f5f8fe; box-shadow: inset 0 0 0 1px rgba(27, 77, 177, .14); }
.cdek__point { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 220px; }
.cdek__point b { font-size: 14.5px; font-weight: 600; }
.cdek__point small { font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.cdek__cost { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.cdek__cost b { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; color: var(--cold); }
.cdek__cost small { font-size: 13px; color: var(--ink-2); }
.conote { margin-bottom: 14px; padding: 12px 14px; border-radius: 12px; background: #f4f6f8; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* Итог */
.csum dd.is-free { color: var(--ok); }
.cosum__minus { color: var(--ok); }
.cosum__promo-ok { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ok); }
.cosum__err { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: #fdf1f1; font-size: 13.5px; line-height: 1.45; color: #a51d1d; }
.cosum__err a { font-weight: 650; color: inherit; text-decoration: underline; }
.codone { gap: 14px; }
.codone p { max-width: 46ch; }
.codone__hours { font-size: 14px; color: var(--ink-3); }
.codone__hours a { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) {
  .cdek__cost { align-items: flex-start; text-align: left; }
  .coguest__row .cseg { width: 100%; }
  .co .cseg__opt span { padding: 0 10px; }
  .coguest__pwd { max-width: none; }
}


/* ---------- Увеличение и Lightbox фото товара ---------- */
.gallery__main {
  cursor: zoom-in;
  user-select: none;
  transition: box-shadow .2s ease;
  position: relative;
}
.gallery__main:hover {
  box-shadow: var(--sh-2);
}
.gallery__main:focus-visible {
  outline: 2px solid var(--cold);
  outline-offset: 2px;
}
.gallery__zoom-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--r-2);
  background: rgba(16, 24, 40, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #ffffff;
  font: 500 var(--fs-12)/1.4 var(--sans);
  pointer-events: none;
  transition: background-color .15s ease, transform .15s ease;
  z-index: 2;
}
.gallery__zoom-badge svg {
  width: 14px;
  height: 14px;
}
.gallery__main:hover .gallery__zoom-badge {
  background: rgba(16, 24, 40, .92);
  transform: translateY(-1px);
}
.gallery__count {
  left: 12px;
  right: auto;
}

/* Lightbox Modal */
.modal--lightbox {
  width: min(1040px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 30px 90px -20px rgba(16, 24, 40, .65);
  overflow: hidden;
  padding: 0;
  border: 0;
}
.modal--lightbox::backdrop {
  background: rgba(15, 23, 42, .82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.lightbox__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: calc(100dvh - 32px);
  background: #ffffff;
}
.lightbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: #ffffff;
  flex-shrink: 0;
}
.lightbox__title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.lightbox__sku {
  font: 700 var(--fs-14)/1.4 var(--mono);
  color: var(--ink);
  background: var(--sheet);
  padding: 3px 8px;
  border-radius: var(--r-1);
  flex-shrink: 0;
}
.lightbox__title {
  font-size: var(--fs-14);
  font-weight: 550;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 520px;
}
.lightbox__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.lightbox__count {
  font: 600 var(--fs-13)/1 var(--mono);
  color: var(--ink-2);
  padding: 5px 10px;
  border-radius: var(--r-1);
  background: var(--sheet);
}
.lightbox__zoom-btn svg,
.lightbox__close svg {
  width: 18px;
  height: 18px;
}
.lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  flex: 1;
  min-height: 320px;
  max-height: calc(100dvh - 190px);
  padding: 16px;
  overflow: hidden;
}
.lightbox__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}
.lightbox__viewport.is-zoomed {
  cursor: zoom-out;
}
.lightbox__img {
  max-width: 100%;
  max-height: 65vh;
  object-fit: contain;
  transition: transform .22s cubic-bezier(0.16, 1, 0.3, 1), opacity .15s ease;
  transform-origin: center center;
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__viewport.is-zoomed .lightbox__img {
  transform: scale(1.85);
  max-width: none;
  max-height: none;
}
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, .92);
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(16, 24, 40, .14);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .15s ease;
}
.lightbox__nav:hover {
  background: #ffffff;
  color: var(--cold);
  box-shadow: 0 6px 20px rgba(16, 24, 40, .2);
  transform: translateY(-50%) scale(1.06);
}
.lightbox__nav:active {
  transform: translateY(-50%) scale(.95);
}
.lightbox__nav--prev {
  left: 16px;
}
.lightbox__nav--next {
  right: 16px;
}
.lightbox__nav svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.lightbox__thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line);
  background: #fafbfc;
  overflow-x: auto;
  flex-shrink: 0;
}
.lightbox__thumbs button {
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--r-2);
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: all .15s ease;
}
.lightbox__thumbs button[aria-current="true"] {
  border-color: var(--cold);
  box-shadow: inset 0 0 0 1px var(--cold), 0 2px 8px rgba(37, 99, 235, .25);
  transform: scale(1.05);
}
.lightbox__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: 4px;
}

@media (max-width: 640px) {
  .modal--lightbox {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .lightbox__head {
    padding: 10px 14px;
  }
  .lightbox__title {
    max-width: 160px;
    font-size: var(--fs-13);
  }
  .lightbox__nav {
    width: 36px;
    height: 36px;
  }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox__stage {
    padding: 8px;
  }
  .lightbox__thumbs button {
    width: 48px;
    height: 48px;
  }
}

/* ---------- Кнопка «В корзине» (активное состояние и ховер) ---------- */
.btn--primary[aria-pressed="true"] {
  background: var(--ok-tint) !important;
  border-color: rgba(18, 112, 74, .25) !important;
  color: var(--ok) !important;
  box-shadow: inset 0 0 0 1px rgba(18, 112, 74, .25) !important;
}
.btn--primary[aria-pressed="true"] .icon,
.btn--primary[aria-pressed="true"] svg {
  color: var(--ok) !important;
  stroke: var(--ok) !important;
}

/* Ховер у кнопки «В корзине» — белый текст и иконка на синем фоне */
.btn[aria-pressed="true"]:hover,
.btn[aria-pressed="true"]:hover span,
.btn--primary[aria-pressed="true"]:hover,
.btn--primary[aria-pressed="true"]:hover span,
.buy-btn[aria-pressed="true"]:hover,
.buy-btn[aria-pressed="true"]:hover span {
  background: linear-gradient(180deg, #1f50b6 0%, var(--cold-ink) 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.btn[aria-pressed="true"]:hover .icon,
.btn[aria-pressed="true"]:hover svg,
.btn--primary[aria-pressed="true"]:hover .icon,
.btn--primary[aria-pressed="true"]:hover svg,
.buy-btn[aria-pressed="true"]:hover .icon,
.buy-btn[aria-pressed="true"]:hover svg {
  color: #fff !important;
  stroke: #fff !important;
}

.btn[aria-pressed="true"]:hover .icon path,
.btn[aria-pressed="true"]:hover svg path,
.btn--primary[aria-pressed="true"]:hover .icon path,
.btn--primary[aria-pressed="true"]:hover svg path,
.buy-btn[aria-pressed="true"]:hover .icon path,
.buy-btn[aria-pressed="true"]:hover svg path {
  stroke: #fff !important;
}

/* Статьи на главной: карточки с заголовками и полными осмысленными анонсами по абзацу, без картинок */
.ngrid--home {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
  align-items: stretch !important;
}
.ncard2--headline {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: stretch !important;
  gap: 0 !important;
  padding: 26px 28px !important;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .04) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease !important;
  text-decoration: none !important;
  height: 100% !important;
  box-sizing: border-box !important;
}
.ncard2--headline .ncard2__body {
  padding: 0 !important;
  gap: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}
.ncard2--headline h3 {
  font-size: 1.0625rem !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.012em !important;
  margin: 0 !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  transition: color .15s ease !important;
}
.ncard2--headline .ncard2__lead {
  font-size: 14px !important;
  line-height: 1.58 !important;
  color: var(--ink-2) !important;
  margin: 14px 0 0 0 !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  text-overflow: unset !important;
}
.ncard2--headline .ncard2__foot {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-top: 22px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--hair) !important;
  flex: none !important;
}
.ncard2--headline .ncard2__more {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--cold) !important;
  transition: color .15s ease !important;
}
.ncard2--headline .sh__arrow {
  width: 18px !important;
  height: 18px !important;
  flex: none !important;
  color: var(--ink-3) !important;
  transition: color .15s ease, transform .2s var(--ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  .ncard2--headline:hover {
    border-color: var(--cold) !important;
    box-shadow: 0 14px 34px -14px rgba(16, 24, 40, .14) !important;
    transform: translateY(-2px) !important;
  }
  .ncard2--headline:hover h3,
  .ncard2--headline:hover .ncard2__more {
    color: var(--cold) !important;
  }
  .ncard2--headline:hover .sh__arrow {
    color: var(--cold) !important;
    transform: translateX(4px) !important;
  }
}
@media (max-width: 1100px) {
  .ngrid--home {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
  .ncard2--headline {
    padding: 22px 22px !important;
  }
}
@media (max-width: 760px) {
  .ngrid--home {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .ncard2--headline {
    padding: 20px 20px !important;
    border-radius: 16px !important;
  }
  .ncard2--headline h3 {
    font-size: 1.025rem !important;
    line-height: 1.35 !important;
  }
  .ncard2--headline .ncard2__lead {
    font-size: 13.5px !important;
    line-height: 1.52 !important;
    margin-top: 10px !important;
  }
  .ncard2--headline .ncard2__foot {
    margin-top: 16px !important;
    padding-top: 12px !important;
  }
}

/* =====================================================================
   Закрепление поиска в шапке при скроллинге (по желанию заказчика)
   ===================================================================== */
.header.is-sticky-search {
  box-shadow: 0 1px 0 var(--hair), 0 8px 24px -12px rgba(16, 24, 40, .14) !important;
}
.header.is-sticky-search .hsearch:not([hidden]) {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  z-index: 5;
}
.header.is-sticky-search:not(.is-searching) [data-search-close] {
  display: none !important;
}
.header.is-sticky-search [data-search-open] {
  display: none !important;
}
.header.is-sticky-search .hnav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(4px);
  transition: opacity .15s ease, transform .15s ease;
}
.header.is-sticky-search .hsearch .search {
  max-width: 620px;
  margin: 0 auto;
  width: 100%;
}
.header.is-sticky-search .hsearch .search__box {
  height: 44px;
  background: #f4f6f8;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 2px rgba(16, 24, 40, .04);
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.header.is-sticky-search .hsearch .search__box:focus-within {
  background: #fff;
  border-color: var(--cold);
  box-shadow: 0 0 0 3px rgba(24, 98, 162, .14);
}
.header.is-sticky-search .hsearch .search__input {
  font-size: 14.5px;
}
.header.is-sticky-search .hsearch .search__submit {
  height: 34px;
  padding: 0 18px;
  font-size: 13.5px;
  border-radius: 8px;
}

@media (max-width: 1024px) {
  .header.is-sticky-search .header__in {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
  }
  .header.is-sticky-search .header__burger {
    grid-column: 1 !important;
    display: inline-grid !important;
  }
  .header.is-sticky-search .logo {
    display: none !important;
  }
  .header.is-sticky-search .hsearch:not([hidden]) {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    display: flex !important;
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    min-width: 0 !important;
  }
  .header.is-sticky-search .hsearch .search {
    max-width: none !important;
    width: 100% !important;
  }
  .header.is-sticky-search .hsearch .search__box {
    height: 40px !important;
    border-radius: 10px !important;
  }
  .header.is-sticky-search .hsearch .search__input {
    font-size: 16px !important;
    padding-left: 8px !important;
  }
  .header.is-sticky-search .hsearch .search__icon {
    width: 18px !important;
    height: 18px !important;
    margin-left: 12px !important;
  }
  .header.is-sticky-search .hsearch .search__submit {
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
    margin: 4px !important;
  }
  .header.is-sticky-search .hright {
    grid-column: 3 !important;
  }
  .header.is-sticky-search .results {
    position: fixed !important;
    top: calc(var(--header-h, 60px) + 6px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100vh - var(--header-h, 60px) - 24px) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 36px rgba(16, 24, 40, 0.22) !important;
  }
}

@media (min-width: 761px) and (max-width: 1024px) {
  .header.is-sticky-search .header__in {
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    column-gap: 12px !important;
  }
  .header.is-sticky-search .logo {
    display: inline-block !important;
    width: 86px !important;
    grid-column: 2 !important;
  }
  .header.is-sticky-search .hsearch:not([hidden]) {
    grid-column: 3 !important;
  }
  .header.is-sticky-search .hright {
    grid-column: 4 !important;
  }
}

/* --- WINMER KEYSPECS OVERFLOW FIX --- */
.buy__keyspecs {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1px !important;
  background: var(--hair, #e5e7eb) !important;
  border: 0 !important;
  box-shadow: var(--sh-1) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin-top: 22px !important;
}
.buy__keyspecs > div {
  flex: 1 1 auto !important;
  min-width: 96px !important;
  max-width: 100% !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border: 0 !important;
  box-sizing: border-box !important;
}
.buy__keyspecs > div + div {
  border-left: 0 !important;
}
.buy__keyspecs dt {
  font-size: var(--fs-12, 12px);
  color: var(--ink-3);
  white-space: nowrap;
}
.buy__keyspecs dd {
  margin-top: 2px;
  font-size: 15px !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

/* --- WINMER OIL CARD LAYOUT FIX --- */
.psec .oil-card {
  border: 0;
  border-radius: 12px;
  background: #f4f6f8;
  box-shadow: none;
}
.oil-card__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 2px 10px;
}
.oil-card__icon {
  width: 96px;
  flex-shrink: 0;
}
.oil-card__icon svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.oil-card__info {
  flex: 1 1 auto;
  min-width: 0;
  border-left: 1px dashed #cbd0d6;
  padding-left: 14px;
}
.oil-card__label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
  line-height: 1.3;
}
.oil-card__val {
  font-size: 21px;
  font-weight: 700;
  color: #14171b;
  line-height: 1.2;
  margin: 4px 0 5px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.oil-card__val--fallback {
  font-size: 16.5px;
  font-weight: 650;
}
.oil-card__sub {
  font-size: 12.5px;
  font-weight: 500;
  color: #4a515b;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
}
.oil-card__notice {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #f59e0b;
  box-sizing: border-box;
  width: 100%;
}
.oil-card__notice-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #92400e;
  line-height: 1.3;
}
.oil-card__notice-ico {
  width: 15px !important;
  height: 15px !important;
  flex-shrink: 0;
}
.oil-card__notice-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #374151;
  font-weight: 400;
}
.oil-card__notice-text b {
  font-family: var(--mono);
  font-weight: 650;
  color: #14171b;
  background: #fef3c7;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

/* --- WINMER MOBILE VISUAL BLOCKS EQUAL WIDTH FIX --- */
.specs__visuals {
  width: 100% !important;
  box-sizing: border-box !important;
}
.pulley,
.oil-card,
.psec .pulley,
.psec .oil-card {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #f4f6f8 !important;
  padding: 16px !important;
  box-shadow: none !important;
}
@media (max-width: 1024px) {
  .pulley,
  .oil-card,
  .psec .pulley,
  .psec .oil-card {
    width: 100% !important;
    max-width: 100% !important;
  }
  .pulley svg {
    max-width: 340px;
    margin: 0 auto;
  }
}

/* =====================================================================
   v26 — плитка «Компрессоры» на первом экране: 4 подкатегории.
   Та же белая панель-переключатель, но сеткой 2×2: название + счётчик
   + короткая подпись. На планшете — в одну строку из 4, на телефоне — 2×2.
   ===================================================================== */
.front__main .ftile__sublinks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; padding: 3px; }
.front__main .ftile__sublinks--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.front__main .ftile__sublinks--n1 { grid-template-columns: minmax(0, 1fr); }
.front__main .ftile__sublink {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 3px;
  padding: 10px 12px 11px;
  border-radius: 10px;
  text-align: left;
  white-space: normal;
  line-height: 1.2;
}
.front__main .ftile__sublink-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
.front__main .ftile__sublink-n {
  margin-left: auto;
  flex: none;
  min-width: 24px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #f1f3f5;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-3);
  transition: background-color .18s ease, color .18s ease;
}
.front__main .ftile__sublink-note {
  display: block;
  white-space: normal;
  text-wrap: balance;
  font-size: 12px;
  font-weight: 450;
  color: var(--ink-3);
  transition: color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .front__main .ftile__sublink:hover .ftile__sublink-title { color: var(--cold); }
  .front__main .ftile__sublink:hover .ftile__sublink-n { background: #fff; color: var(--cold); }
  .front__main .ftile__sublink:hover .ftile__sublink-note { color: var(--cold-ink); }
}
.front__main .ftile__sublink:focus-visible { outline: 2px solid var(--cold); outline-offset: -2px; }

/* Планшет: плитка во всю ширину — четыре подкатегории в одну строку */
@media (min-width: 768px) and (max-width: 1100px) {
  .front__main .ftile__sublinks--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Телефон: 2×2, компактнее, без обрезки названий */
@media (max-width: 767px) {
  .front__main .ftile__sublinks,
  .front__main .ftile__sublinks--n4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 3px; border-radius: 12px; }
  .front__main .ftile__sublinks--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .front__main .ftile__sublink { padding: 9px 10px 10px; border-radius: 9px; font-size: inherit; letter-spacing: 0; gap: 2px; }
  .front__main .ftile__sublink-title { font-size: 13.5px; gap: 6px; overflow: visible; text-overflow: clip; }
  .front__main .ftile__sublink-n { min-width: 22px; padding: 1px 5px; font-size: 11px; }
  .front__main .ftile__sublink-note { font-size: 11.5px; }
}
@media (max-width: 379px) {
  .front__main .ftile__sublink { padding: 8px 9px 9px; }
  .front__main .ftile__sublink-n { display: none; }
}
@media (max-width: 339px) {
  .front__main .ftile__sublink-title { font-size: 12.5px; }
  .front__main .ftile__sublink-note { font-size: 10.5px; }
}

/* =====================================================================
   v27 — Личный кабинет на мобильной и десктопной версиях, авторизация,
   регистрация, карточка профиля, заказы и адаптивность «Гаража»
   ===================================================================== */

/* Иконка личного кабинета в шапке и индикатор входа */
.hright__login { position: relative; }
.hright__login .login-dot {
  display: none;
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 2px #fff;
}
.hright__login.is-logged .login-dot { display: block; }
.hright__login[aria-current="page"] { background: var(--bg); color: var(--cold); }

/* Кнопки «Личный кабинет» и «Гараж» в мобильном бургер-меню */
.drawer__user {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--hair);
}
.drawer__acc,
.drawer__garage {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 11px;
  background: #f3f5f8;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  transition: background-color .15s ease, color .15s ease;
}
.drawer__acc span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drawer__acc .icon,
.drawer__garage .icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--cold);
}
.drawer__acc:active,
.drawer__garage:active {
  background: #e7edf6;
}

/* Авторизованная карточка пользователя и уведомления в личном кабинете */
.acc__notice,
.acc__msg {
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.45;
}
.acc__notice { margin-bottom: 16px; }
.acc__notice.is-ok,
.acc__msg.is-ok {
  background: #ecfdf3;
  color: #166534;
  box-shadow: inset 0 0 0 1px #bbf7d0;
}
.acc__notice.is-err,
.acc__msg.is-err {
  background: #fef2f2;
  color: #991b1b;
  box-shadow: inset 0 0 0 1px #fecaca;
}

.acc__user {
  display: flex;
  align-items: center;
  gap: 14px;
}
.acc__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(145deg, #2459c4 0%, var(--cold) 100%);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}
.acc__uinfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.acc__uname {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.acc__uname b {
  font-size: 1.0625rem;
  font-weight: 680;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.acc__ubadge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #dcfce7;
  color: #15803d;
  font-size: 11.5px;
  font-weight: 650;
}
.acc__umeta {
  font-size: 13px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc__ustats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.acc__ustat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border: 0;
  border-radius: 10px;
  background: #f6f7f9;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s ease;
}
.acc__ustat:hover { background: #eef2f7; }
.acc__ustat b { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.acc__ustat small { font-size: 12px; color: var(--ink-3); }

.acc__settings { margin-top: 16px; }
.acc__settings > summary {
  list-style: none;
  width: 100%;
  justify-content: center;
  cursor: pointer;
}
.acc__settings > summary::-webkit-details-marker { display: none; }
.acc__sform {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.acc__logout {
  width: 100%;
  margin-top: 10px;
  justify-content: center;
  color: var(--ink-2);
}

/* Карточки заказов в личном кабинете */
.ocards { display: grid; gap: 14px; }
.ocard {
  border-radius: 16px;
  background: #f8f9fa;
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.ocard__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  background: #fff;
  box-shadow: inset 0 -1px 0 var(--line);
}
.ocard__head b { font-size: 15px; font-weight: 680; }
.ocard__head small { margin-left: 8px; font-size: 13px; color: var(--ink-3); }
.ocard__status {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
}
.ocard__status.is-ondemand,
.ocard__status.is-processing { background: #fef3c7; color: #b45309; }
.ocard__status.is-shipped { background: #dcfce7; color: #15803d; }
.ocard__status.is-canceled { background: #fef2f2; color: #991b1b; }
.ocard__items { padding: 4px 18px; background: #fff; }
.ocard__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px dashed var(--line);
}
.ocard__item:first-child { border-top: 0; }
.ocard__imain { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ocard__ititle { font-size: 14px; font-weight: 600; color: var(--ink); }
.ocard__ititle:hover { color: var(--cold); }
.ocard__imain small { font-size: 12.5px; color: var(--ink-3); }
.ocard__isum { display: flex; flex-direction: column; align-items: flex-end; flex: none; text-align: right; }
.ocard__isum b { font-size: 14px; font-weight: 680; }
.ocard__isum small { font-size: 12px; color: var(--ink-3); }
.ocard__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.ocard__note { font-size: 13px; color: var(--ink-2); }
.ocard__total { font-size: 15px; font-weight: 700; color: var(--ink); }

/* Адаптивность шапки, «Гаража» и Личного кабинета на мобильных устройствах */
@media (max-width: 760px) {
  .hright { gap: 2px; }
  .header.is-sticky-search .header__in { column-gap: 6px !important; }
  .header.is-sticky-search .hsearch .search__submit { padding: 0 10px !important; font-size: 12.5px !important; }
  .acc { padding-bottom: 64px; }
  .acc__grid { gap: 20px; }
  .acc__perks { display: none; }
  .acc__tabs {
    align-self: stretch;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .acc__tabs button {
    justify-content: center;
    padding: 0 8px;
    font-size: 13.5px;
  }
  .acc__ph {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .gcar {
    grid-template-columns: 40px minmax(0, 1fr) 36px;
    grid-template-areas:
      "icon main del"
      "btn  btn  btn";
    align-items: start;
    gap: 12px;
    padding: 14px;
  }
  .gcar__icon {
    grid-area: icon;
    width: 40px;
    height: 40px;
  }
  .gcar__main { grid-area: main; }
  .gcar__main b {
    font-size: 15px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .gcar__main small {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    overflow-wrap: anywhere;
    line-height: 1.4;
  }
  .gcar__del,
  .gcar [data-car-del] {
    grid-area: del;
    width: 36px;
    height: 36px;
    justify-self: end;
  }
  .gcar__btn,
  .gcar .btn {
    grid-area: btn;
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
  .gform__submit {
    width: 100%;
    justify-content: center;
  }
  .fld input,
  .fld textarea,
  .fldbtn {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .pgrid--acc { grid-template-columns: 1fr; }
  .header.is-sticky-search .iconbtn { width: 36px; height: 36px; }
}

/* =====================================================================
   Карточка автомобиля при поиске по VIN и группировка по категориям
   ===================================================================== */
.vin-car {
  margin-bottom: 18px;
  padding: 22px 26px;
  border-radius: 18px;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px var(--line);
}
.vin-car__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.vin-car__title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vin-car__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--line);
  color: var(--cold, #0284c7);
  flex-shrink: 0;
}
.vin-car__icon .icon {
  width: 22px;
  height: 22px;
}
.vin-car__title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.vin-car__vin {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vin-car__vin:hover {
  background: var(--cold-tint, #eff6ff);
  border-color: rgba(2, 132, 199, 0.25);
  color: var(--cold, #0284c7);
}
.vin-car__vin .icon {
  width: 13px;
  height: 13px;
}
.vin-car__mod {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.vin-car__mod select {
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  max-width: 360px;
  cursor: pointer;
}
.vin-car__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(16, 24, 40, 0.08);
}
.vin-car__spec {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.07);
  font-size: 13px;
  color: var(--ink);
}
.vin-car__spec b {
  font-weight: 500;
  color: var(--ink-3);
}
.vin-cats {
  margin: 0 0 28px;
}
.vin-cats__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.vin-cats__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.vin-cats__btn .num {
  padding: 1px 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--ink-2);
  font-size: 12.5px;
}
.vin-cats__btn:hover {
  border-color: var(--cold, #0284c7);
  color: var(--cold, #0284c7);
}
.vin-cats__btn.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}
.vin-cats__btn.is-active .num {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}
.vin-cat-sec + .vin-cat-sec {
  margin-top: 36px;
}
.vin-cat-sec__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.vin-cat-sec__title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.vin-cat-sec__head h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.vin-cat-sec__hint {
  font-size: 12.5px;
  font-weight: 500;
  color: #b45309;
  background: #fef3c7;
  padding: 3px 10px;
  border-radius: 999px;
}
.vin-cat-sec__count {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  white-space: nowrap;
}

/* Режим выдачи по VIN: скрываем боковые каталожные фильтры и лишние панели, выводим подборку на всю ширину */
.catalog.catalog--vin {
  grid-template-columns: 1fr !important;
}
.catalog.catalog--vin > .filters,
.catalog.catalog--vin .toolbar,
.catalog.catalog--vin .active-filters {
  display: none !important;
}

/* Предупреждение «Перед заказом уточняйте у менеджера» */
.vin-verify {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 22px;
  padding: 16px 22px;
  border: 1px solid #fde68a;
  border-radius: 16px;
  background: #fffbeb;
}
.vin-verify__body {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vin-verify__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #d97706;
  flex-shrink: 0;
}
.vin-verify__icon .icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.8;
}
.vin-verify__text b {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: #78350f;
  line-height: 1.35;
}
.vin-verify__text p {
  margin: 3px 0 0;
  font-size: 13.5px;
  color: #92400e;
  line-height: 1.45;
}
.vin-verify__btn {
  flex-shrink: 0;
  white-space: nowrap;
  height: 42px;
  padding: 0 18px;
  border-radius: 11px;
  font-weight: 600;
}

/* Плашка уточнения в выпадающем живом поиске по VIN */
.results__vin-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #fffbeb;
  border-top: 1px solid #fde68a;
  font-size: 12.5px;
  font-weight: 600;
  color: #92400e;
}
.results__vin-ask {
  flex-shrink: 0;
  height: 30px;
  padding: 0 12px;
  font-size: 12px;
}

/* Карточка товара в режиме подбора по VIN */
.vin-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.vin-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.vin-badge--cat {
  background: var(--ink, #0f172a);
  color: #fff;
}
.vin-badge--ok {
  background: #dcfce7;
  color: #166534;
}
.vin-badge--variant {
  background: #fef3c7;
  color: #92400e;
}
.vin-badge--basis {
  background: #e0f2fe;
  color: #0369a1;
}
.pline__side--vin .pline__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.vin-ask-btn {
  border: 1px solid var(--line, #cbd5e1) !important;
  font-weight: 600;
}
.vin-ask-btn:hover {
  border-color: var(--cold, #0284c7) !important;
  color: var(--cold, #0284c7) !important;
}

@media (max-width: 760px) {
  .vin-verify {
    flex-direction: column;
    align-items: stretch;
  }
  .vin-verify__btn {
    width: 100%;
    justify-content: center;
  }
  .results__vin-note {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .pline__side--vin .pline__actions {
    width: 100%;
  }
  .pline__side--vin .pline__actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .vin-car { padding: 16px; }
  .vin-car__mod { width: 100%; flex-direction: column; align-items: stretch; }
  .vin-car__mod select { max-width: 100%; width: 100%; }
}