/* Start:/local/templates/tirex/assets/css/main.css?179171446653642*/
/* ==========================================================================
   TIREX — основная дизайн-система (светлый фон, жёлто-чёрная палитра ТЗ)
   Без сборки, чистый CSS. Шрифты self-hosted в assets/fonts.
   ========================================================================== */

/* ------------------------------------------------------------- шрифты (self-host) */
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/oswald-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/oswald-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/oswald-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/oswald-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/golos-text-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/golos-text-cyrillic-400-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/golos-text-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/golos-text-cyrillic-500-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/golos-text-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/golos-text-cyrillic-600-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/golos-text-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/local/templates/tirex/assets/css/../fonts/golos-text-cyrillic-700-normal.woff2') format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* --------------------------------------------------------------- токены */
:root {
  /* поверхности: светлые (белый + светло-серый) */
  --c-bg: #fafafa;          /* страница */
  --c-bg-alt: #ffffff;      /* приподнятая секция / карточки */
  --c-black: #06090a;       /* шапка/футер/hero/тёмные карточки (макет главной) */
  --c-bg-dark: #06090a;     /* футер, верхняя полоса, акцентные тёмные панели */
  --c-panel: #ffffff;       /* карточки, панели */
  --c-panel-2: #f0f2f5;     /* hover карточек, инпуты, чипы */
  --c-panel-3: #e7ebef;     /* активные инпуты/бейджи */

  /* ссылки и семантика (макет главной) */
  --c-link: #1447a6;        /* ссылки-чипы на светлых поверхностях */
  --c-link-2: #0f4db2;      /* «Смотреть все →» */
  --c-link-3: #144db2;      /* «Сбросить все фильтры» */
  --c-ok: #0c7a45;          /* наличие в карточках (WCAG на белом) */

  /* линии */
  --c-line: #e3e7ec;
  --c-line-2: #ccd3db;

  /* текст */
  --c-text: #0f0f0f;
  --c-muted: #5b6470;
  --c-faint: #616975;
  --c-onyx: #06090a;        /* текст на жёлтом */

  /* бренд-жёлтый (макет главной) + семантика */
  --c-yellow: #ffb800;
  --c-yellow-2: #ffc633;
  --c-yellow-3: #d8a900;
  --c-yellow-ink: #8a6700;  /* жёлтый как текст на светлом (контраст) */
  --c-green: #0c7a45;
  --c-red: #d93a3a;
  --c-orange: #c77400;

  /* геометрия */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(16, 18, 22, .06);
  --shadow: 0 8px 24px rgba(16, 18, 22, .09);
  --shadow-lg: 0 20px 48px rgba(16, 18, 22, .14);
  --focus-ring: 0 0 0 3px rgba(255, 200, 0, .45);

  /* --- система интерактивных состояний TIREX ---
     (docs/design_элементы_Наведение_нажатие_выбор.md)
     обычное → наведение → нажатие → выбрано; смена 120–160 мс */
  --ix-t: 140ms;
  --ix-ease: cubic-bezier(.4, 0, .2, 1);
  /* главная кнопка / CTA (жёлтая) */
  --ix-cta: #ffb800;
  --ix-cta-hover: #ffc633;
  --ix-cta-active: #e0a200;
  /* кнопка на тёмной поверхности */
  --ix-dark: #20242a;
  --ix-dark-hover: #30363e;
  --ix-dark-active: #14181d;
  /* вкладка / фильтр */
  --ix-tab: #f6f7f9;
  --ix-tab-hover: #fff7df;
  --ix-tab-active: #ffe7a0;
  --ix-tab-selected: #ffb800;
  /* раздел каталога (карточка) */
  --ix-card-hover-bg: #fff9e8;
  --ix-card-hover-line: #ffb800;
  --ix-card-active-bg: #fff0c2;
  --ix-card-active-line: #c58d00;
  /* текстовая ссылка */
  --ix-link: #0f4db2;
  --ix-link-hover: #0b3a88;
  --ix-link-active: #07285f;
  /* FAQ / строка */
  --ix-faq-hover: #f6f7f9;
  --ix-faq-active: #eef0f3;
  /* фокус с клавиатуры */
  --ix-focus: #0f4db2;

  --container: 1440px;
  --header-h: 66px;

  --font-display: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font: var(--font-body);
}

/* тёмные поверхности сохраняют светлый текст: перекрываем токены в их скоупе */
.site-footer, .header-top, .section--dark, .car-picker__console, .spec-signature {
  color: var(--c-text);
  --c-text: #e9edf1;
  --c-muted: #a6aeb8;
  --c-faint: #848d98;
  --c-line: #262c34;
  --c-line-2: #39414c;
  --c-panel: #1a1e24;
  --c-panel-2: #232830;
  --c-bg: #14171c;
  --c-yellow-ink: var(--c-yellow);
}

/* -------------------------------------------------------------- базово */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--c-text);
  background: var(--c-bg);
  min-width: 320px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 15px; color: inherit; }

h1, h2, h3, h4, h5 {
  margin: 0 0 .5em;
  line-height: 1.2;
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: 600;
  text-wrap: balance;
}

::selection { background: var(--c-yellow); color: var(--c-onyx); }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* текстовые утилиты */
.text-muted { color: var(--c-muted); }
.text-13 { font-size: 13px; }
.text-14 { font-size: 14px; }
.text-caps { text-transform: uppercase; letter-spacing: .06em; }

/* отступы-утилиты (замена inline style) */
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mt32 { margin-top: 32px; }
.mb8 { margin-bottom: 8px; } .mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; }

/* ------------------------------------------------------------- кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; line-height: 1.1;
  letter-spacing: .05em; text-transform: uppercase;
  transition: background .16s ease, color .16s ease, border-color .16s ease,
    box-shadow .16s ease, transform .12s ease;
  white-space: nowrap;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primary { background: var(--ix-cta); color: var(--c-onyx); }
.btn--primary:hover:not(:disabled) { background: var(--ix-cta-hover); box-shadow: 0 6px 20px rgba(255, 200, 0, .28); }
.btn--primary:active:not(:disabled) { background: var(--ix-cta-active); box-shadow: none; }

/* инверсная кнопка — для тёмных панелей (оставлена совместимость с блоками car.picker/product) */
.btn--dark { background: #fff; color: var(--c-onyx); }
.btn--dark:hover:not(:disabled) { background: #eef0f2; }
.btn--dark:active:not(:disabled) { background: #e2e5e8; }

.btn--outline {
  background: rgba(16, 18, 22, .03); border-color: var(--c-line-2); color: var(--c-text);
}
.btn--outline:hover:not(:disabled) { border-color: var(--c-yellow); color: var(--c-yellow-ink); }
.btn--outline:active:not(:disabled) { border-color: var(--ix-card-active-line); color: var(--ix-link-active); }

.btn--ghost { background: transparent; color: var(--c-muted); padding: 8px 12px; text-transform: none; font-family: var(--font); letter-spacing: 0; font-weight: 600; }
.btn--ghost:hover { color: var(--c-text); }
.btn--ghost:active { color: var(--ix-link-active); }

.btn--sm { padding: 8px 16px; font-size: 13px; }
.btn--block { width: 100%; }

/* ------------------------------------------------------------- бейджи */
.badge {
  display: inline-block; padding: 3px 10px; border-radius: 99px;
  font-family: var(--font-display);
  font-size: 11px; font-weight: 600; line-height: 1.5;
  letter-spacing: .06em; text-transform: uppercase;
}
.badge--sale { background: var(--c-red); color: #fff; }
.badge--new { background: var(--c-yellow); color: var(--c-onyx); }
.badge--hit { background: var(--c-onyx); color: #fff; }
.badge--stock { background: rgba(62, 207, 142, .16); color: var(--c-green); }
.badge--stock-out { background: var(--c-panel-2); color: var(--c-faint); }

/* ---------------------------------------------------------- хлебные крошки */
.breadcrumbs { padding: 20px 0 4px; font-size: 13px; color: var(--c-faint); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.breadcrumbs li:not(:last-child)::after { content: "→"; margin-left: 8px; color: var(--c-line-2); font-size: 11px; }
.breadcrumbs a { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-yellow-ink); }

/* ------------------------------------------------------------ заголовки страниц */
.page-head { padding: 8px 0 18px; }
.page-head .eyebrow { margin-bottom: 8px; }
.page-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  letter-spacing: .01em;
  margin: 0;
  text-transform: uppercase;
}
.page-desc { color: var(--c-muted); font-size: 14px; margin: 6px 0 0; max-width: 720px; }
/* Жёлтый акцент под H1 (макет «Диски») */
.page-accent { display: block; width: 54px; height: 4px; border-radius: 2px; background: var(--c-yellow); margin: 8px 0 2px; }

/* ------------------------------------------------------------------ секции */
.section { padding: 44px 0; }
.section--alt { background: var(--c-bg-alt); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.section--yellow { background: var(--c-yellow); color: var(--c-onyx); }
.section--yellow .section__title,
.section--yellow h2 { color: var(--c-onyx); }
.section--dark { background: var(--c-bg-dark); }

.section__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  margin-bottom: 24px;
}
.section__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .015em;
  margin: 0;
}
/* секции без section__head (заголовок сразу в контейнере) — нужен нижний отступ */
.container > .section__title { margin-bottom: 24px; }
.section__title--light { color: var(--c-text); }
.section__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--c-yellow-ink);
  margin-bottom: 8px;
}
.section__eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; }
.section__eyebrow--yellow { color: var(--c-yellow-ink); }
.section__link {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  color: var(--c-yellow-ink); white-space: nowrap;
  border-bottom: 1px solid transparent;
}
.section__link:hover { border-bottom-color: var(--c-yellow-ink); }
.section-cta {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-yellow-ink); font-weight: 600; font-size: 14px;
  border-bottom: 1px solid rgba(138, 103, 0, .4); padding-bottom: 2px;
  transition: border-color .15s;
}
.section-cta:hover { border-color: var(--c-yellow-ink); }
.section-cta--dark { color: var(--c-onyx); border-bottom-color: rgba(16, 18, 22, .4); }
.section-cta--dark:hover { border-color: var(--c-onyx); }

/* ---------------------------------------------------------------- фокусы */
/* Клавиатурный фокус (Tab): внешняя рамка #0F4DB2, 2px, отступ 2px —
   docs/design_элементы_Наведение_нажатие_выбор.md. Поля ввода оставляем
   на своей рамке (жёлтая), поэтому для них — прежнее кольцо. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
summary:focus-visible, [role="button"]:focus-visible {
  outline: 2px solid var(--ix-focus);
  outline-offset: 2px;
  box-shadow: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
input:focus, select:focus, textarea:focus { outline: none; }

/* ==========================================================================
   ШАПКА
   ========================================================================== */
.site-header {
  background: var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; z-index: 60;
}

.header-top {
  background: var(--c-bg-dark);
  color: var(--c-faint); font-size: 13px;
  border-bottom: 1px solid var(--c-line);
}
.header-top__inner {
  display: flex; align-items: center; gap: 12px;
  height: 40px; max-width: var(--container); margin: 0 auto; padding: 0 20px;
  min-width: 0;
}
.header-top__item.is-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--c-muted); transition: color .15s;
}
.header-top__item.is-link:hover { color: var(--c-yellow); }
.header-top__item.is-link .icon { width: 13px; height: 13px; }
/* компактные пилюли верхней полосы: город (hairline) и «Заказать звонок» (жёлтая) */
.header-top__btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 12px; border-radius: 999px;
  border: 1px solid var(--c-line-2);
  background: rgba(255, 255, 255, .03);
  color: var(--c-muted); font-size: 12px; font-weight: 600;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.header-top__btn .icon { width: 13px; height: 13px; flex-shrink: 0; }
.header-top__btn .caret { width: 10px; height: 10px; opacity: .55; flex-shrink: 0; }
.header-top__btn:hover { border-color: var(--c-yellow); color: var(--c-yellow); background: rgba(255, 200, 0, .06); }
.header-top__btn--primary {
  font-family: var(--font-display);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase;
  background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-onyx);
}
.header-top__btn--primary:hover { background: var(--c-yellow-2); border-color: var(--c-yellow-2); color: var(--c-onyx); }
.header-top .is-show-sm { display: none; }
.header-top__spacer { flex: 1; }
.header-top__item { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.header-top__item .icon { width: 14px; height: 14px; flex-shrink: 0; }
.header-top__divider { width: 1px; height: 14px; background: var(--c-line-2); flex-shrink: 0; }

.header-main { background: var(--c-bg-alt); }
.header-main__inner {
  display: flex; align-items: center; gap: 24px;
  max-width: var(--container); margin: 0 auto; padding: 12px 20px;
}

/* логотип */
.logo { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--c-yellow); color: var(--c-onyx);
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: .02em;
  box-shadow: 0 4px 16px rgba(255, 200, 0, .22);
}
.logo__text {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; letter-spacing: .02em; line-height: 1;
  color: var(--c-text);
  display: flex; flex-direction: column; gap: 4px;
}
.logo__sub {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--c-faint);
}

/* поиск */
.search { flex: 1; max-width: 600px; position: relative; margin: 0 auto; }
.search__form { display: flex; align-items: stretch; }
.search__input {
  flex: 1; min-width: 0; width: 100%; padding: 12px 16px;
  background: var(--c-bg);
  border: 1px solid var(--c-line-2); border-right: none;
  border-radius: 999px 0 0 999px;
  color: var(--c-text);
  transition: border-color .15s, background .15s;
}
.search__input::placeholder { color: var(--c-faint); }
.search__input:focus { border-color: var(--c-yellow); background: var(--c-bg); }
.search__submit {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 20px; border: none;
  border-radius: 0 999px 999px 0;
  background: var(--c-yellow); color: var(--c-onyx);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  transition: background .15s;
}
.search__submit:hover { background: var(--c-yellow-2); }
.search__submit .icon { width: 16px; height: 16px; }

/* автоподбор поиска */
.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 70;
  background: var(--c-panel);
  border: 1px solid var(--c-line-2); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); display: none; overflow: hidden;
}
.suggest.is-open { display: block; }
.suggest__item {
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
  padding: 11px 16px; border-bottom: 1px solid var(--c-line);
  transition: background .12s;
}
.suggest__item:hover { background: var(--c-panel-2); }
.suggest__item img { width: 44px; height: 44px; object-fit: contain; flex-shrink: 0; }
.suggest__name { font-size: 14px; line-height: 1.35; color: var(--c-text); }
.suggest__price { color: var(--c-yellow-ink); font-weight: 600; font-size: 14px; white-space: nowrap; }
.suggest__all {
  padding: 11px 16px; text-align: center;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-yellow-ink); background: transparent; display: block;
  transition: background .12s, color .12s;
}
.suggest__all:hover { background: var(--c-yellow); color: var(--c-onyx); }
.suggest__empty { padding: 16px; color: var(--c-muted); font-size: 14px; }
.suggest__section { padding: 8px 16px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--c-faint); }

/* правые действия */
.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
.header-actions .btn--icon {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 16px;
  border-radius: 999px; font-size: 14px; font-weight: 600;
  color: var(--c-text); background: transparent;
  border: 1px solid var(--c-line-2);
  transition: border-color .15s, color .15s, background .15s;
}
.header-actions .btn--icon:hover { border-color: var(--c-yellow); color: var(--c-yellow-ink); background: rgba(255, 200, 0, .08); }
.header-actions .btn--icon .icon { width: 18px; height: 18px; }
.header-actions .btn--icon .btn-label { display: inline; }

.cart-pill {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 16px 0 10px;
  border-radius: 999px;
  border: 1px solid var(--c-line-2);
  background: rgba(16, 18, 22, .03);
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: color .15s, border-color .15s, background .15s, transform .12s;
}
.cart-pill:hover { border-color: var(--c-yellow); color: var(--c-yellow-ink); background: rgba(255, 200, 0, .08); }
.cart-pill .icon { width: 18px; height: 18px; }
.cart-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(16, 18, 22, .08); color: var(--c-text);
  font-family: var(--font-body);
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.cart-count:empty { display: none; }

/* навигация */
.header-nav { background: var(--c-bg-alt); border-top: 1px solid var(--c-line); }
.header-nav__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 2px; height: 48px;
}
.header-nav a.nav-link {
  position: relative;
  display: inline-flex; align-items: center; height: 48px;
  padding: 0 14px;
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase;
  color: var(--c-muted);
  transition: color .15s;
}
.header-nav a.nav-link::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 8px; height: 2px;
  background: var(--c-yellow); transform: scaleX(0); transform-origin: left;
  transition: transform .2s ease;
}
.header-nav a.nav-link:hover { color: var(--c-text); }
.header-nav a.nav-link:hover::after,
.header-nav a.nav-link.is-active::after { transform: scaleX(1); }
.header-nav a.nav-link.is-active { color: var(--c-text); }

/* бургер */
.burger {
  display: none;
  align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--c-line-2); background: transparent;
  flex-direction: column; gap: 4px;
}
.burger span { width: 18px; height: 2px; background: var(--c-text); display: block; border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger:hover { border-color: var(--c-yellow); }
.burger:hover span { background: var(--c-yellow); }
.burger.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-active span:nth-child(2) { opacity: 0; }
.burger.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------------------------------------------------------------- модалки */
.modal {
  position: fixed; inset: 0; z-index: 100;
  display: none; align-items: center; justify-content: center;
  background: rgba(6, 7, 9, .72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px;
}
.modal.is-open { display: flex; }
.modal__box {
  background: var(--c-panel);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-lg);
  width: 100%; max-width: 480px;
  max-height: min(86vh, 640px); overflow: auto;
  box-shadow: var(--shadow-lg);
}
.modal__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--c-line);
}
.modal__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em;
  margin: 0;
}
.modal__close {
  border: none; background: transparent;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 20px; line-height: 1; color: var(--c-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s, background .15s;
}
.modal__close:hover { color: var(--c-yellow-ink); background: var(--c-panel-2); }
.modal__body { padding: 20px; }
.modal__body .field { margin-bottom: 14px; }

/* ---- быстрый заказ (единая форма для карточки/листинга/корзины) ---- */
/* max-height из .modal__box не ограничиваем — контент помещается целиком,
   вертикальная прокрутка внутри модалки не появляется */
.modal--quick .modal__box { max-width: 560px; max-height: none; }
@media (max-height: 700px) {
  .modal--quick .modal__box { max-height: calc(100vh - 24px); overflow: auto; }
}
.qo-summary {
  border: 1px solid var(--c-line); background: var(--c-panel-2); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 16px; max-height: 220px; overflow: auto;
}
.qo-summary:empty { display: none; }
.qo-summary__item { display: flex; gap: 12px; align-items: center; padding: 5px 0; }
.qo-summary__item + .qo-summary__item { border-top: 1px solid var(--c-line); }
.qo-summary__thumb {
  width: 44px; height: 44px; flex: none; border-radius: 6px; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.qo-summary__thumb img { width: 100%; height: 100%; object-fit: contain; }
.qo-summary__icon { font-size: 22px; color: var(--c-muted); }
.qo-summary__main { min-width: 0; }
.qo-summary__name { font-size: 13px; font-weight: 600; color: var(--c-text); }
.qo-summary__size { font-size: 11px; color: var(--c-muted); }
.qo-summary__meta { font-size: 12px; font-weight: 600; color: var(--c-text); margin-top: 1px; }
.qo-summary__total {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--c-line);
  font-size: 15px; font-weight: 600; color: var(--c-text);
}
.qo-get { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
/* специфичность не ниже .field label — иначе подпись уходит влево и сереет */
.modal--quick .qo-get__item {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 48px;
  margin: 0;
  border: 1px solid var(--c-line-2); border-radius: 6px; background: #fff;
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--c-text);
}
.modal--quick .qo-get__item.is-active { border-color: var(--c-yellow); background: #fffae0; }
/* нативную кружку радио скрываем — выбор показывает сама кнопка */
.modal--quick .qo-get__item input {
  position: absolute; width: 1px; height: 1px; margin: 0;
  opacity: 0; pointer-events: none;
}
.modal--quick .qo-get__item:has(input:focus-visible) { outline: 2px solid var(--c-yellow); outline-offset: 1px; }
.qo-note { font-size: 12px; color: var(--c-muted); margin: 4px 0 14px; }
.qo-submit { margin-top: 4px; }
.qo-agree { font-size: 11px; color: var(--c-faint); text-align: center; margin: 10px 0 0; }
.qo-agree a { color: var(--c-link); text-decoration: underline; }

/* выбор города */
.city-search { position: relative; margin-bottom: 14px; }
.city-search input {
  width: 100%; padding: 12px 14px;
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-line-2); border-radius: var(--radius);
}
.city-search input:focus { border-color: var(--c-yellow); }
.city-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-height: 320px; overflow: auto; }
.city-item {
  text-align: left; padding: 9px 12px; border: none;
  background: transparent; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--c-text);
  transition: background .12s, color .12s;
}
.city-item:hover { background: var(--c-panel-2); }
.city-item.is-current { background: var(--c-yellow); color: var(--c-onyx); font-weight: 600; }
.city-list p { color: var(--c-muted); font-size: 14px; grid-column: 1 / -1; }

/* формы */
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--c-muted); }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px;
  background: var(--c-bg);
  color: var(--c-text);
  border: 1px solid var(--c-line-2); border-radius: var(--radius-sm);
  transition: border-color .15s, background .15s;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--c-yellow); background: var(--c-bg); }
.field input::placeholder, .field textarea::placeholder { color: var(--c-faint); }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa3ad' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.field select:disabled, .field input:disabled { opacity: .5; cursor: not-allowed; }

.form-agree { font-size: 12px; color: var(--c-muted); display: flex; gap: 8px; align-items: flex-start; }
.form-agree input { margin-top: 3px; accent-color: var(--c-yellow); }
.form-agree a { text-decoration: underline; color: var(--c-muted); }
.form-agree a:hover { color: var(--c-yellow-ink); }

/* ---------------------------------------------------------------- тосты */
.toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--c-panel); color: var(--c-text);
  border: 1px solid var(--c-line-2); border-left: 3px solid var(--c-green);
  padding: 13px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); font-size: 14px; display: flex; gap: 10px; align-items: center;
  animation: toast-in .2s ease;
}
.toast .toast__undo { color: var(--c-yellow-ink); font-weight: 700; border: none; background: none; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ----------------------------------------------------- пустые состояния */
.page-placeholder { text-align: center; padding: 80px 16px; }
.page-placeholder .icon { width: 90px; height: 90px; margin: 0 auto 20px; }
.page-placeholder h1 { font-size: 30px; }

/* ==========================================================================
   КАРТОЧКА ТОВАРА
   ========================================================================== */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  height: 100%;
  overflow: hidden;
}
.card:hover { border-color: var(--c-line-2); transform: translateY(-2px); box-shadow: var(--shadow); }

.card__badges { position: absolute; top: 12px; left: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.card__media {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  margin: 12px 12px 0;
  border-radius: calc(var(--radius) - 2px);
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.card__media img {
  width: 86%; height: 86%; object-fit: contain;
  transition: transform .25s ease;
  filter: drop-shadow(0 14px 18px rgba(16, 18, 22, .18));
}
.card:hover .card__media img { transform: scale(1.05); }

.card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; min-width: 0; }
.card__brand {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c-yellow-ink);
}
.card__title {
  font-size: 14px; font-weight: 600; color: var(--c-text); line-height: 1.35;
  margin: 6px 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 38px;
}
.card__title:hover { color: var(--c-yellow-ink); }
.card__size {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: .05em;
  color: var(--c-faint); margin-bottom: 10px;
}
.card__price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; }
.card__price { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--c-text); letter-spacing: .01em; }
.card__price--old { font-size: 13px; color: var(--c-faint); text-decoration: line-through; }
.card__stock { font-size: 12px; margin-top: 6px; font-weight: 600; }
.card__stock .is-ok { color: var(--c-green); }
.card__stock .is-low { color: var(--c-orange); }
.card__stock .is-out { color: var(--c-faint); }
.card__actions { display: flex; gap: 8px; margin-top: 12px; }
.card__actions .btn { flex: 1; padding: 10px 8px; font-size: 13px; }
.card__rating { font-size: 12px; color: var(--c-muted); margin-bottom: 6px; }
.card__rating .star { color: var(--c-yellow); }

/* ------------------------------------------------------------- карусель */
.carousel { position: relative; }
.carousel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; scroll-padding: 20px; }
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: 250px; gap: 16px; padding: 4px 0 10px; }
.carousel__track > * { scroll-snap-align: start; }
.carousel__nav { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.carousel__btn {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--c-line-2);
  background: var(--c-panel); color: var(--c-text);
  font-size: 18px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, background .15s, color .15s;
}
.carousel__btn:hover { border-color: var(--c-yellow); background: var(--c-yellow); color: var(--c-onyx); }
.carousel__btn:disabled { opacity: .35; pointer-events: none; }

/* --------------------------------------------------------------- футер */
.site-footer { background: var(--c-bg-dark); color: var(--c-muted); border-top: 1px solid var(--c-line); margin-top: 0; }
.site-footer a:hover { color: var(--c-text); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 40px; padding: 48px 0 28px; }
.footer-col h4 {
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .16em; margin-bottom: 16px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; font-size: 14px; }
.footer-col li a { color: var(--c-muted); transition: color .15s; }
.footer-col li a:hover { color: var(--c-yellow); }
.footer-about p { font-size: 13px; margin: 14px 0 0; color: var(--c-faint); max-width: 300px; }
.footer-contacts .phone { font-size: 22px; font-weight: 700; color: var(--c-text); font-family: var(--font-display); letter-spacing: .02em; }
.footer-contacts .phone:hover { color: var(--c-yellow); }
.footer-contacts__line { margin: 10px 0 4px; }
.footer-contacts .mt8 { margin-top: 8px; }
.footer-city-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 15px;
  border-radius: 999px;
  border: 1px solid var(--c-line-2);
  background: rgba(255, 255, 255, .03);
  color: var(--c-text);
  font-weight: 600; font-size: 14px;
  margin-top: 6px;
  transition: color .15s, border-color .15s, background .15s;
}
.footer-city-btn svg { width: 14px; height: 14px; color: var(--c-yellow); flex-shrink: 0; }
.footer-city-btn .caret { width: 10px; height: 10px; color: var(--c-faint); }
.footer-city-btn:hover { border-color: var(--c-yellow); color: var(--c-yellow); background: rgba(255, 200, 0, .06); }
.footer-contacts .btn { margin-top: 16px; }
.footer-bottom {
  border-top: 1px solid var(--c-line);
  padding: 18px 0; font-size: 13px; color: var(--c-faint);
  display: flex; justify-content: space-between; gap: 16px; align-items: center; flex-wrap: wrap;
}
.footer-social { display: flex; gap: 8px; margin-top: 16px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--c-line-2); color: var(--c-muted);
  transition: border-color .15s, color .15s, background .15s;
}
.footer-social a svg { width: 17px; height: 17px; }
.footer-social a:hover { border-color: var(--c-yellow); color: var(--c-yellow); background: rgba(255, 200, 0, .05); }

/* --------------------------------------------------------------- пагинация */
.pagination { display: flex; gap: 6px; justify-content: center; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.pagination a,
.pagination .pagination__current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--c-line-2); border-radius: var(--radius-sm);
  background: var(--c-panel); color: var(--c-text);
  font-family: var(--font-display);
  font-size: 15px; font-weight: 500;
  transition: border-color .15s, color .15s, background .15s, box-shadow .15s;
}
.pagination a:hover { border-color: var(--c-yellow); color: var(--c-yellow-ink); }
.pagination a[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.pagination .pagination__current {
  background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-onyx);
  box-shadow: 0 4px 14px rgba(255, 200, 0, .22);
  cursor: default;
}
.pagination .pagination__dots { color: var(--c-faint); padding: 0 2px; }
.pagination .pagination__prev,
.pagination .pagination__next { font-size: 20px; }

/* --------------------------------------------------------------- адаптив */
@media (max-width: 1100px) {
  .header-nav a.nav-link { padding: 0 10px; font-size: 12px; }
}

@media (max-width: 1024px) {
  .header-main__inner { flex-wrap: wrap; gap: 12px; }
  .search { order: 3; flex-basis: 100%; max-width: none; }
  .header-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--c-bg-alt);
    border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-lg);
  }
  .header-nav.is-open { display: block; max-height: calc(100vh - 120px); overflow: auto; }
  .header-nav__inner { flex-direction: column; align-items: stretch; padding: 10px 20px 16px; height: auto; gap: 0; }
  .header-nav a.nav-link { height: 44px; border-bottom: 1px solid var(--c-line); }
  .header-nav a.nav-link::after { display: none; }
  .header-nav a.nav-link.is-active { color: var(--c-yellow-ink); }
  .burger { display: inline-flex; }
  .header-top__inner { gap: 14px; }
  .header-top .is-hide-sm { display: none; }
  .header-top .is-show-sm { display: inline-flex; }
  .header-actions .btn--icon.is-hide-sm { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 640px) {
  .container { padding: 0 16px; }
  .section { padding: 32px 0; }
  .section__head { flex-wrap: wrap; gap: 10px; }
  .logo__text { font-size: 21px; }
  .logo__mark { width: 36px; height: 36px; font-size: 15px; }
  .header-top { font-size: 12px; }
  .header-top__inner { overflow: hidden; }
  .header-actions { gap: 6px; }
  .header-actions .btn--icon { padding: 0 12px; height: 40px; }
  .header-actions .btn--icon .btn-label { display: none; }
  .cart-pill { padding: 0 12px 0 8px; height: 40px; font-size: 0; }
  .cart-pill .icon { width: 18px; height: 18px; }
  .header-main__inner { padding: 10px 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 20px; }
  .city-list { grid-template-columns: 1fr; }
  .carousel__track { grid-auto-columns: 210px; }
  .carousel__viewport { margin: 0 -16px; padding: 0 16px; }
  .toast-wrap { left: 16px; right: 16px; bottom: 16px; }
  /* узкие карточки (2 колонки): кнопки в столбик, иначе «Подробнее» обрезается */
  .card__actions { flex-direction: column; }
  .card__actions .btn { width: 100%; }
}

/* ==========================================================================
   ШАПКА И ФУТЕР по макету главной (docs/design_main.md)
   Тёмная шапка #06090A: строка 1 — логотип, каталог, поиск, город, телефон;
   строка 2 — навигация. Футер #06090A: 6 колонок + подписка.
   ========================================================================== */
.hdr { background: var(--c-black); color: #fff; }
.hdr__inner {
  max-width: var(--container); margin: 0 auto; padding: 0 22px;
  display: flex; align-items: center; gap: 20px; min-height: 84px;
}
.hdr__inner--nav { min-height: 0; padding-top: 12px; padding-bottom: 12px; justify-content: center; }

.hdr__logo { display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; flex-shrink: 0; }
.hdr__logo-mark, .hdr__logo-text { color: #fff; font-size: 30px; font-weight: 600; line-height: 1; }
.hdr__logo-sub { grid-column: 1 / -1; color: #ccc; font-size: 9px; font-weight: 400; letter-spacing: .08em; margin-top: 4px; }

.hdr__catalog {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 205px; height: 48px; border-radius: 6px;
  background: var(--c-yellow); color: var(--c-black); font-size: 14px; font-weight: 600;
  border: 0; font-family: inherit; cursor: pointer;
}
.hdr__catalog:hover { background: var(--c-yellow-2); }
.hdr__catalog .icon { width: 18px; height: 18px; }
.hdr__catalog .caret { width: 13px; height: 13px; transition: transform .18s; }
.hdr__catalog.is-open .caret { transform: rotate(180deg); }

.hdr__search { flex: 1 1 450px; max-width: 450px; position: relative; }
.hdr__search .search__form { display: flex; height: 48px; }
.hdr__search .search__input {
  flex: 1; height: 48px; padding: 0 16px;
  background: #0a0d0f; border: 1px solid #1f2124; border-radius: 5px;
  color: #fff; font-size: 13px; font-family: var(--font);
  /* убрать нативный крестик очистки webkit */
  -webkit-appearance: none; appearance: none;
}
.hdr__search .search__input::placeholder { color: #b2b8bd; }
.hdr__search .search__input:focus { border-color: var(--c-yellow); outline: none; }
.hdr__search .search__input::-webkit-search-cancel-button { display: none; }

.hdr__city {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; color: #fff; font-size: 13px; cursor: pointer; font-family: var(--font);
}
.hdr__city:hover { color: var(--c-yellow); }
.hdr__city .icon { width: 16px; height: 16px; }
.hdr__city .caret { width: 14px; height: 14px; }

.hdr__phone { flex-shrink: 0; display: flex; flex-direction: column; margin-left: auto; }
.hdr__phone-num { color: #fff; font-size: 18px; font-weight: 600; }
.hdr__phone:hover .hdr__phone-num { color: var(--c-yellow); }
.hdr__phone-hours { color: #bfbfbf; font-size: 10px; margin-top: 3px; }

.hdr__cart {
  flex-shrink: 0; position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 6px; color: #fff;
}
.hdr__cart:hover { background: #14191e; color: var(--c-yellow); }
.hdr__cart .icon { width: 22px; height: 22px; }
.hdr__cart-count {
  position: absolute; right: 2px; top: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--c-yellow); border-radius: 9px;
  color: var(--c-black); font-size: 10px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

.hdr__burger { display: none; flex-direction: column; gap: 5px; background: transparent; border: none; padding: 8px; cursor: pointer; }
.hdr__burger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: transform .2s, opacity .2s; }
.hdr__burger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hdr__burger.is-active span:nth-child(2) { opacity: 0; }
.hdr__burger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.hdr__row2 { border-top: 1px solid #14191e; }
.hdr__row2 a { color: #fff; font-size: 12px; font-weight: 600; }
.hdr__row2 a:hover { color: var(--c-yellow); }

/* подсказки поиска поверх тёмной шапки */
.hdr .suggest { z-index: 60; }

/* ==========================================================================
   Мегаменю «Каталог товаров» (docs/design_мегаменю.md)
   ========================================================================== */
.hdr { position: relative; }
.mm { position: absolute; top: 100%; left: 0; right: 0; z-index: 70; }
.mm[hidden] { display: none; }
.mm__inner {
  width: calc(100% - 40px); max-width: calc(var(--container) - 40px); margin: 0 auto;
  background: #fff; border: 1px solid #E3E5EB; border-radius: 8px;
  box-shadow: 0 20px 44px rgba(6, 9, 10, .16); overflow: hidden;
  color: var(--c-text);
}
.mm__body { display: grid; grid-template-columns: 1fr 196px; }
.mm__cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.mm__col { padding: 18px 20px 20px; border-right: 1px solid #E3E5EB; }
.mm__col:last-child { border-right: 0; }
.mm__col-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  font-size: 13px; font-weight: 600; color: #0D0D0F;
}
.mm__col-title--sub { margin-top: 20px; padding-top: 16px; border-top: 1px solid #E3E5EB; }
.mm__ico { font-size: 12px; line-height: 1; }
.mm__link { display: block; font-size: 11.5px; color: #0D0D0F; padding: 4px 0; }
.mm__link:hover { color: #0857D1; }
.mm__link--all { color: #0857D1; font-weight: 600; margin-top: 10px; }
.mm__side { background: #FCFCFE; border-left: 1px solid #E3E5EB; padding: 16px 14px; }
.mm__side-title { font-size: 13px; font-weight: 600; color: #0D0D0F; }
.mm__side-sub { font-size: 10px; color: #5b6470; margin: 6px 0 12px; line-height: 1.35; }
.mm__all-link { display: block; font-size: 9.5px; color: #0857D1; margin-bottom: 14px; }
.mm__side .car-picker__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.mm__side .car-picker .field { min-width: 0; }
.mm__side .car-picker .field label { font-size: 10px; color: #616670; margin-bottom: 4px; font-weight: 400; }
.mm__side .car-picker .field select { height: 34px; font-size: 11px; min-width: 0; padding: 0 26px 0 10px; }
.mm__side .car-picker .btn--dark { height: 40px; width: 100%; background: var(--c-yellow); color: var(--c-black); border-radius: 5px; font-weight: 600; }
.mm__side .car-picker .btn--dark:hover:not(:disabled) { background: var(--c-yellow-2); }
.mm__side .car-picker__sizes { min-height: 0; }
.mm__side .car-picker__hint { font-size: 9px; margin-top: 8px; }
.mm__strip { display: grid; grid-template-columns: repeat(4, 1fr); background: #FFFBE5; border-top: 1px solid #E3E5EB; }
.mm__adv { display: flex; align-items: center; gap: 10px; padding: 16px 20px; font-size: 10.5px; font-weight: 600; color: #0D0D0F; line-height: 1.3; }
.mm__adv:hover { color: #0857D1; }
.mm__adv-ico {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: #F7F7F7; border: 1px solid #E3E5EB;
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px;
}
@media (max-width: 1024px) {
  .mm { display: none; }
}

@media (max-width: 1200px) {
  .hdr__inner { gap: 12px; }
  .hdr__catalog { width: auto; padding: 0 16px; }
  .hdr__logo-sub { display: none; }
}
@media (max-width: 1024px) {
  .hdr__inner {
    min-height: 68px; flex-wrap: wrap;
    /* центрируем обе линии (логотип+иконки / поиск) по вертикали */
    align-content: center; row-gap: 10px;
    padding-top: 12px; padding-bottom: 12px;
  }
  .hdr__catalog { display: none; }
  .hdr__phone { display: none; }
  .hdr__city { display: none; } /* выбор города — только на десктопе */
  .hdr__cart { margin-left: auto; }
  .hdr__burger { display: inline-flex; order: 10; }
  .hdr__search { order: 20; flex: 1 1 100%; max-width: none; margin-top: 0; }
  .hdr__search .search__form { height: 42px; }
  .hdr__search .search__input, .hdr__search .search__submit { height: 42px; }
  .hdr__row2 { border-top: none; }
  .hdr__inner--nav {
    display: none; flex-direction: column; align-items: flex-start; gap: 4px;
    padding: 10px 22px 16px;
  }
  .hdr__inner--nav.is-open { display: flex; }
  .hdr__row2 a { padding: 8px 0; font-size: 14px; }
}

/* ---------------- футер ---------------- */
.ftr { background: #050608; color: #fff; margin-top: 40px; }
.ftr__inner { max-width: var(--container); margin: 0 auto; padding: 32px 34px 0; }
.ftr__grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr 1fr 1fr 1.45fr; gap: 24px; }
.ftr__logo { display: inline-block; color: #fff; font-size: 27px; font-weight: 700; line-height: 1; letter-spacing: .01em; }
.ftr__tagline { display: block; margin-top: 5px; color: #B8BFCC; font-size: 8px; font-weight: 600; letter-spacing: .1em; }
.ftr__about-text { color: #ADB8C7; font-size: 10px; line-height: 1.6; margin: 12px 0 0; max-width: 210px; }
.ftr__title { color: #fff; font-size: 11px; font-weight: 700; margin: 0 0 16px; }
.ftr__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ftr__list a, .ftr__list li { color: #B8BFCC; font-size: 9px; line-height: 1.4; }
.ftr__list a:hover { color: var(--c-yellow); }
.ftr__sub-text { color: #B8BFCC; font-size: 9px; margin: 0 0 12px; }
.ftr__sub-form { display: flex; height: 46px; max-width: 260px; }
.ftr__sub-form input {
  flex: 1; min-width: 0; padding: 0 14px; background: #fff; border: none; border-radius: 6px 0 0 6px;
  color: #141a21; font-size: 10px; font-family: var(--font);
}
.ftr__sub-form input::placeholder { color: #61697A; }
.ftr__sub-form button {
  width: 46px; border: none; border-radius: 0 6px 6px 0;
  background: var(--c-yellow); color: #06080A; font-size: 18px; font-weight: 700; cursor: pointer;
}
.ftr__agree { display: flex; align-items: flex-start; gap: 6px; margin-top: 14px; max-width: 250px; color: #B8BFCC; font-size: 9px; line-height: 1.45; cursor: pointer; }
.ftr__agree input { flex: none; margin: 1px 0 0; }
.ftr__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 34px; padding: 22px 0; font-size: 9px; }
.ftr__copy { color: #949CA8; }
.ftr__policy { color: #B8BFCC; }
.ftr__policy:hover { color: #fff; }

@media (max-width: 1024px) {
  .ftr__grid { grid-template-columns: 1fr 1fr 1fr; }
  .ftr__about { grid-column: 1 / -1; }
  .ftr__sub { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .ftr__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .ftr__grid { grid-template-columns: 1fr; }
}

/* End */


/* Start:/local/templates/tirex/assets/css/pages.css?1791714466170277*/
/* ==========================================================================
   TIREX — стили страниц: главная, каталог, карточка, корзина, поиск, 404.
   Светлая тема, чёрно-жёлтые акценты. Сетки/раскладки сохраняют структуру ТЗ 1:1.
   ========================================================================== */

/* ------------------------------------------------------------------ HERO (подбор шин) */
.hero {
  position: relative; color: var(--c-text); overflow: hidden;
  background:
    radial-gradient(60% 90% at 78% 18%, rgba(255, 200, 0, .12), transparent 55%),
    var(--c-bg-alt);
  border-bottom: 1px solid var(--c-line);
}
.hero::before {
  /* декоративный «протектор» — редкая сетка кольцевых дуг */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(circle at center, transparent 0 44%, var(--c-line) 45% 45.5%, transparent 46%),
    radial-gradient(circle at center, transparent 0 58%, var(--c-line) 59% 59.5%, transparent 60%);
  background-size: 240px 240px;
  background-position: 110% -30%;
  background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 40%, #000 100%);
}
.hero__inner {
  max-width: var(--container); margin: 0 auto;
  padding: 36px 20px 22px;
  position: relative; z-index: 1;
}
.hero { padding-bottom: 40px; }
.hero__title {
  font-size: clamp(32px, 4.2vw, 50px);
  font-weight: 600; line-height: 1.05; letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
}
.hero__title em {
  font-style: normal; color: var(--c-onyx);
  background: var(--c-yellow);
  padding: 0 .12em; border-radius: 6px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* консоль подбора: тёмная карта с табами, инпуты внутри — светлые */
.picker-console {
  position: relative; z-index: 1;
  background: var(--c-bg-dark);
  border: 1px solid #2a3038;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
  color: #e9edf1;
  /* локальная тема тёмной поверхности */
  --c-text: #e9edf1;
  --c-muted: #a6aeb8;
  --c-faint: #848d98;
  --c-line: #2a3038;
  --c-line-2: #39414c;
  --c-panel: #101216;
  --c-panel-2: #1a1e24;
  --c-bg: #1a1e24;
  --c-yellow-ink: var(--c-yellow);
}
.picker-tabs {
  display: flex; gap: 4px;
  padding: 10px 10px 0;
  border-bottom: 1px solid var(--c-line);
  background: var(--c-panel-2);
}
.picker-tab {
  padding: 12px 22px;
  border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 500; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-muted);
  transition: color .15s, background .15s;
}
.picker-tab:hover { color: var(--c-text); }
.picker-tab.is-active { background: var(--c-bg-dark); color: var(--c-yellow); }
.picker-panel { padding: 22px; display: none; }
.picker-panel.is-active { display: block; }
/* внутри консоли машина-подборщик и поля — без собственных панелей;
   инпуты в обеих вкладках — светлые на тёмном фоне консоли */
.picker-panel .car-picker__console { background: transparent; border: none; padding: 0; box-shadow: none; }
.picker-panel .car-picker .field select,
.picker-panel .home-filter select,
.picker-panel .home-filter .filter-range input {
  background: #f4f6f8; color: #171a1f;
  border-color: #39414c;
}
.picker-panel .car-picker .field label { color: var(--c-muted); }

/* фильтр «По параметрам» на главной */
.home-filter__type {
  display: flex; gap: 18px; margin-bottom: 16px;
  font-size: 14px; font-weight: 600;
}
.home-filter__radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.home-filter__radio input { accent-color: var(--c-yellow); width: 16px; height: 16px; }
.home-filter__grid {
  /* используется только в сайдбаре главной — вертикальный стек, не сетка каталога */
  display: flex; flex-direction: column;
}
/* display:grid перебивал атрибут [hidden] — блок «Диски» был виден */
.home-filter__grid[hidden] { display: none; }
.home-filter__field label { display: block; font-size: 12px; font-weight: 600; color: var(--c-muted); margin-bottom: 6px; }
.home-filter__field--wide { grid-column: 1 / -1; }
.home-filter__field select {
  width: 100%; padding: 11px 36px 11px 13px;
  background: #f4f6f8; color: #171a1f;
  border: 1px solid var(--c-line-2); border-radius: var(--radius-sm);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6470' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}
.home-filter__field select:focus { border-color: var(--c-yellow); }
.home-filter__field--price .filter-range input {
  width: 100%; padding: 10px 12px;
  background: #f4f6f8; color: #171a1f;
  border: 1px solid var(--c-line-2); border-radius: var(--radius-sm);
}
.home-filter__field--price .filter-range input:focus { border-color: var(--c-yellow); }
.home-filter__actions { margin-top: 16px; display: flex; justify-content: flex-end; }

@media (max-width: 1024px) {
  .hero__inner { padding: 36px 20px 20px; }
  .picker-panel { padding: 16px; }
  .home-filter__grid { display: flex; flex-direction: column; }
}
@media (max-width: 560px) {
  .hero__inner { padding: 28px 16px 16px; }
  .hero__title { font-size: 27px; }
  .picker-tab { flex: 1; padding: 11px 8px; }
  .picker-panel { padding: 14px; }
  .home-filter__grid { display: flex; flex-direction: column; }
  .home-filter__field--wide { grid-column: 1 / -1; }
  .home-filter__actions .btn { width: 100%; }
}

/* ------------------------------------------------------------ подбор по авто */
.car-picker__lead { color: var(--c-faint); font-size: 15px; margin: 0 0 20px; }
.car-picker__form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.car-picker__console {
  background: var(--c-bg-dark);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
/* жёлтая секция: тёмная «консоль» подбора читается на ней контрастно */
.section--yellow .section__eyebrow { color: var(--c-onyx); }
.section--yellow .section__eyebrow::before { background: currentColor; }
.section--yellow .car-picker__lead { color: rgba(16, 18, 22, .72); }
.section--yellow .car-picker__console .field label { color: var(--c-muted); }
.section--yellow .car-picker__hint { color: var(--c-faint); }
.section--yellow .car-picker__form .btn { align-self: end; }

/* консоль: марка → модель → поколение → размер в ряд */
.car-picker__console .car-picker__form { grid-template-columns: 1fr 1fr 1fr 1.6fr auto; align-items: end; }
.car-picker__form .car-picker__submit { align-self: end; }

/* hero-консоль на главной: панель «По авто» в узком сайдбаре — вертикально */
.picker-panel .car-picker__form { grid-template-columns: 1fr; gap: 12px; align-items: stretch; }
.picker-panel .car-picker__form .btn { align-self: stretch; width: 100%; }
.picker-panel .car-picker__hint { margin-top: 10px; min-height: 0; }
@media (max-width: 560px) {
  .picker-panel .car-picker__form { grid-template-columns: 1fr; }
}

/* переключатель «Шины/Диски» в табе «По авто» (как у «По параметрам») */
.car-picker__type { display: flex; gap: 8px; margin-bottom: 12px; }
.car-picker__type-item {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: #f0f2f5; border: 1px solid transparent; border-radius: 5px; height: 34px;
  font-size: 12px; font-weight: 600; color: #0f0f0f; cursor: pointer;
}
.car-picker__type-item input { accent-color: var(--c-yellow); }
.car-picker__type-item:has(input:checked) { border-color: var(--c-yellow); }

/* таб «По авто» на главной: поля/кнопка в светлом стиле сайдбара (.hpick) */
.hpick .picker-panel .car-picker .field label { color: #0f0f0f; font-size: 12px; font-weight: 600; margin: 0 0 6px; }
.hpick .picker-panel .car-picker .field select {
  width: 100%; height: 38px; padding: 0 12px;
  background: #f0f2f5; color: var(--c-text);
  border: 1px solid transparent; border-radius: 5px; font-size: 11px; font-family: var(--font);
}
.hpick .picker-panel .car-picker .field select:focus { border-color: var(--c-yellow); outline: none; }
.hpick .picker-panel .car-picker .btn--dark {
  height: 44px; background: var(--c-black); color: #fff; border-radius: 5px;
  font-size: 12px; font-weight: 600;
}
.hpick .picker-panel .car-picker .btn--dark:hover:not(:disabled) { background: #141a21; }
.hpick .picker-panel .car-picker__hint { color: var(--c-muted); font-size: 11px; }
.hpick .picker-panel .car-picker__sizes .size-chip {
  height: 30px; background: #f0f2f5; border: 1px solid transparent; border-radius: 4px;
  color: var(--c-text); font-size: 10px; font-weight: 600;
}
.hpick .picker-panel .car-picker__sizes .size-chip.is-active { background: var(--c-black); color: #fff; }

/* вертикальный пикер в сайдбаре каталога — одна колонка */
.filter .car-picker__form { grid-template-columns: 1fr; }
.filter .car-picker__wrap { padding: 0; background: transparent; border: none; }
.car-picker .field { margin: 0; }
.car-picker .field label { font-size: 12px; letter-spacing: .04em; }
.car-picker select { width: 100%; }
.car-picker__hint { font-size: 13px; color: var(--c-faint); margin-top: 12px; min-height: 18px; }
.car-picker__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.car-picker__sizes:empty { min-height: 18px; }
/* Блок «Размер» скрыт до выбора поколения: native [hidden] не перебиваем .field */
.car-picker [data-pick-sizes-field][hidden] { display: none; }
.car-picker__wrap .car-picker__submit { align-self: end; }

.size-chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--c-line-2);
  background: var(--c-panel);
  color: var(--c-text);
  border-radius: 999px; padding: 7px 15px;
  font-family: var(--font-display);
  font-size: 14px; font-weight: 500; letter-spacing: .04em;
  transition: border-color .14s, background .14s, color .14s, transform .12s;
}
.size-chip:hover { border-color: var(--c-yellow); color: var(--c-yellow-ink); transform: translateY(-1px); }
.size-chip.is-active { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-onyx); }
.size-chip.is-disabled { opacity: .35; pointer-events: none; }

/* ------------------------------------------------------------- направления */
.directions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.direction {
  display: flex; align-items: center; gap: 16px;
  padding: 20px;
  background: var(--c-panel);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.direction:hover { border-color: var(--c-line-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.direction__icon {
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 12px;
  background: rgba(255, 200, 0, .09);
  border: 1px solid rgba(255, 200, 0, .2);
  color: var(--c-yellow);
  display: flex; align-items: center; justify-content: center;
}
.direction__icon svg { width: 28px; height: 28px; }
.direction__title { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: .02em; text-transform: uppercase; color: var(--c-text); }
.direction__count { font-size: 13px; color: var(--c-muted); }

/* ------------------------------------------------------------- бренды */
.brands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.brand {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 10px;
  background: var(--c-panel);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 500; font-size: 17px; letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--c-muted); text-align: center;
  transition: border-color .15s, color .15s, transform .15s;
}
.brand:hover { border-color: var(--c-yellow); color: var(--c-yellow-ink); transform: translateY(-2px); }
.brand .brand-country { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--c-faint); }
.brands-rows .brand { min-height: 60px; }

/* -------------------------------------------------------- другие категории */
.other-cats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.other-cat {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 22px 8px 18px;
  background: var(--c-panel);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase;
  color: var(--c-text); text-align: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.other-cat:hover { border-color: var(--c-yellow); transform: translateY(-2px); box-shadow: var(--shadow); }
.other-cat svg { width: 34px; height: 34px; color: var(--c-yellow); }

/* ----------------------------------------------------------- преимущества */
.advantages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.advantage {
  padding: 24px;
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease;
}
.advantage:hover { border-color: var(--c-line-2); transform: translateY(-2px); }
.advantage__icon {
  width: 44px; height: 44px; margin-bottom: 16px;
  padding: 10px;
  border-radius: 10px;
  background: var(--c-yellow); color: var(--c-onyx);
  display: block;
}
.advantage h3 { font-family: var(--font-display); font-size: 17px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.advantage p { font-size: 13px; color: var(--c-muted); margin: 0; line-height: 1.55; }

/* ------------------------------------------------- новости и акции (nw-*) */
.nw-head { margin: 20px 0 22px; }
.nw-head h1 { font-size: 30px; font-weight: 600; margin: 0 0 8px; }
.nw-head p { font-size: 13px; color: var(--c-muted); margin: 0; }

.nw-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.nw-tab {
  display: inline-flex; align-items: center; height: 38px; padding: 0 16px;
  background: #fff; border: 1px solid #EDF0F2; border-radius: 6px;
  font-size: 11px; font-weight: 600; color: var(--c-text);
}
.nw-tab:hover { border-color: var(--c-line-2); }
.nw-tab.is-active { background: var(--c-yellow); border-color: var(--c-yellow); }

.nw-badge {
  display: inline-flex; align-items: center; height: 25px; padding: 0 12px;
  border-radius: 4px; font-size: 9px; font-weight: 600; white-space: nowrap;
}
.nw-badge--promo { background: var(--c-yellow); color: #08090A; }
.nw-badge--label { background: #fff; color: #0D52BF; }

.nw-hero {
  position: relative; overflow: hidden; margin-bottom: 26px;
  background: #08090A; border-radius: 12px; padding: 34px;
}
.nw-hero__deco {
  position: absolute; right: 60px; top: 50%; transform: translateY(-50%);
  width: 330px; height: 330px; border-radius: 50%;
  background: #1F2124; border: 34px solid #6B6E70; pointer-events: none;
}
.nw-hero .nw-badge { position: relative; }
.nw-hero__title {
  position: relative; font-size: 30px; font-weight: 600; line-height: 1.2;
  color: #fff; margin: 22px 0 0; max-width: 700px;
}
.nw-hero__title em { display: block; font-style: normal; color: var(--c-yellow); }
.nw-hero__text { position: relative; font-size: 14px; color: #fff; margin: 18px 0 0; max-width: 620px; line-height: 1.5; }
.nw-hero__foot { position: relative; display: flex; align-items: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.nw-hero__date { font-size: 10px; color: #B8BABF; }

.nw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 26px; }
.nw-card {
  background: #fff; border: 1px solid #EDF0F2; border-radius: 9px;
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.nw-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(6, 9, 10, .07); }
.nw-card__media { position: relative; display: block; height: 132px; }
.nw-card__glyph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 68px; color: #80858A; line-height: 1;
}
.nw-card__media .nw-badge { position: absolute; left: 16px; top: 16px; }
.nw-card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px; flex: 1; }
.nw-card__title { font-size: 16px; font-weight: 600; color: var(--c-text); line-height: 1.3; }
.nw-card__title:hover { color: #0857D1; }
.nw-card__text { font-size: 11px; color: #6E7580; margin: 0; flex: 1; line-height: 1.5; }
.nw-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 9px; color: #6E7580; }
.nw-card__foot a { font-weight: 600; color: #6E7580; }
.nw-card__foot a:hover { color: #0857D1; }

.nw-pager { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 30px; }
.nw-pager a, .nw-pager__cur, .nw-pager__next {
  min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 5px; font-size: 10px; font-weight: 600; color: var(--c-text);
}
.nw-pager a { background: #fff; border: 1px solid #EDF0F2; }
.nw-pager a:hover { border-color: var(--c-line-2); }
.nw-pager__cur { color: var(--c-text); }
.nw-pager__next { background: var(--c-yellow); border: 1px solid var(--c-yellow); }

.nw-sub {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  background: #0B0D0E; border-radius: 9px; padding: 24px; margin: 0 0 40px;
}
.nw-sub__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 4px; }
.nw-sub__text strong { font-size: 18px; font-weight: 600; color: #fff; }
.nw-sub__text span { font-size: 11px; color: #BFC2C7; }
.nw-sub__form { display: flex; gap: 14px; flex: 0 1 560px; }
.nw-sub__input {
  flex: 1; height: 48px; padding: 0 16px; border: 0; border-radius: 5px;
  font-size: 12px; font-family: inherit; color: var(--c-text);
}
.nw-sub__btn { height: 48px; padding: 0 32px; flex: none; }
.nw-sub__msg { flex: 1 0 100%; margin: 0; font-size: 12px; }
.nw-sub__msg.is-ok { color: #3ecf8e; }
.nw-sub__msg.is-error { color: #ff8a8a; }

/* детальная новость / политика */
.news-date { font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); }
.article-detail { max-width: 820px; margin: 0 0 40px; }
.article-detail h1 { font-family: var(--font-body); font-size: 30px; font-weight: 700; margin: 10px 0 18px; line-height: 1.25; }
.article-detail h2 {
  font-family: var(--font-body); font-size: 21px; font-weight: 700;
  margin: 30px 0 10px; color: var(--c-text);
}
.article-detail p { margin: 0 0 14px; line-height: 1.7; color: var(--c-muted); }
.article-detail p:first-of-type { color: var(--c-text); }
.article-detail .lead { color: var(--c-text); font-size: 15px; }
.article-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 640px) {
  /* статичные страницы (доставка, шиномонтаж, о компании, контакты...) */
  .article-detail h1 { font-size: 24px; margin: 8px 0 14px; }
  .article-detail h2 { font-size: 18px; margin: 22px 0 8px; }
  .article-detail p, .article-detail li { font-size: 14px; line-height: 1.65; }
  .article-detail .lead { font-size: 15px; }
  .article-detail ul { padding-left: 20px; }
  .article-actions { flex-direction: column; }
  .article-actions .btn { width: 100%; }
  .breadcrumbs { font-size: 11px; }
}

/* =================================================================== КАТАЛОГ */
.catalog-page { padding: 4px 0 48px; }
.catalog { display: grid; grid-template-columns: 300px 1fr; gap: 28px; padding: 20px 0 40px; align-items: start; }

/* фильтр (панель) */
.filter {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-panel);
  overflow: hidden;
}
.filter__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 8px 8px 0; background: var(--c-panel-2); }
.filter__tab {
  padding: 12px 8px;
  border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 500; font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-muted);
  transition: color .15s, background .15s;
}
.filter__tab:hover { color: var(--c-text); }
.filter__tab.is-active { background: var(--c-panel); color: var(--c-yellow-ink); }
.filter__panel { padding: 16px; display: none; }
.filter__panel.is-active { display: block; }
.filter__panel > form[data-size-mode] { display: block; }

.filter-group { border-bottom: 1px solid var(--c-line); padding: 6px 0; }
.filter-group:last-child { border-bottom: none; }
.filter-group__head {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; font-weight: 600; font-size: 14px; color: var(--c-text);
  padding: 9px 0;
  user-select: none;
}
.filter-group__head::after {
  content: "−"; font-family: var(--font-body); font-weight: 400;
  color: var(--c-faint); font-size: 18px; line-height: 1;
  transition: transform .2s;
}
.filter-group.is-collapsed .filter-group__head::after { content: "+"; }
.filter-group.is-collapsed .filter-group__body { display: none; }
.filter-group__body { padding: 4px 0 10px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter select:disabled, .filter input:disabled {
  opacity: .5; cursor: not-allowed;
}

.filter-option { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 14px; cursor: pointer; color: var(--c-text); }
.filter-option input { accent-color: var(--c-yellow); width: 16px; height: 16px; }
.filter-option:hover { color: var(--c-yellow-ink); }
.filter-option .count { color: var(--c-faint); font-size: 12px; margin-left: auto; }
.filter-range { display: flex; gap: 8px; align-items: center; }
.filter-range input {
  width: 100%; padding: 10px 12px;
  background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-line-2); border-radius: var(--radius-sm);
}
.filter-range input:focus { border-color: var(--c-yellow); }
.filter-range span { color: var(--c-faint); }
.filter-actions { display: flex; gap: 8px; margin-top: 16px; }
.filter-actions .btn { flex: 1; }
.filter-apply { }

/* фильтр по авто в сайдбаре */
.car-filter select { width: 100%; margin-bottom: 10px; }
.car-filter select:disabled { opacity: .5; }
.car-filter .car-sizes { margin-top: 8px; }

/* инфо-блок матричной посадочной в сайдбаре */
.filter-note { font-size: 13px; color: var(--c-muted); line-height: 1.55; }
.filter-note .filter-note__tag { color: var(--c-yellow-ink); font-family: var(--font-display); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }

/* тулбар выдачи */
.catalog-main { min-width: 0; }
.catalog-toolbar {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--c-line);
}
.catalog-toolbar .result-count { font-size: 14px; color: var(--c-faint); }
.catalog-toolbar .sort { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--c-muted); }
.catalog-toolbar .sort select {
  padding: 10px 36px 10px 14px;
  background: var(--c-panel); color: var(--c-text);
  border: 1px solid var(--c-line-2); border-radius: 999px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%239aa3ad' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.catalog-filter-btn { display: none; }

/* выдача */
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.product-grid--4 { grid-template-columns: repeat(4, 1fr); }

/* пустой результат */
.empty-result {
  text-align: center; padding: 56px 20px;
  background: var(--c-panel);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--radius);
}
.empty-result h3 { font-family: var(--font-body); font-size: 20px; font-weight: 600; color: var(--c-text); margin: 0 0 6px; }
.empty-result p { color: var(--c-muted); margin: 0; }
.empty-result__icon {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(255, 200, 0, .08); border: 1px solid rgba(255, 200, 0, .22);
  color: var(--c-yellow);
  display: flex; align-items: center; justify-content: center;
}
.empty-result__icon svg { width: 36px; height: 36px; }
.empty-result__actions { display: flex; gap: 12px; justify-content: center; margin-top: 22px; flex-wrap: wrap; }

/* SEO-блок */
.seo-block {
  background: var(--c-panel);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: 28px; margin-top: 32px;
}
.seo-block h2 { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 12px; }
.seo-block p { color: var(--c-muted); font-size: 14px; line-height: 1.65; }

/* контекстная строка посадочной (матричной) */
.landing-results { padding: 6px 0 40px; }
.landing-scope {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -2px 0 22px;
}
.landing-scope__chip {
  font-family: var(--font-display);
  font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text);
  background: var(--c-panel);
  border: 1px solid var(--c-line-2); border-radius: 999px;
  padding: 6px 14px;
}
.landing-scope__chip::before { content: "✓ "; color: var(--c-yellow-ink); }
.landing-scope__reset {
  margin-left: auto;
  font-size: 13px; color: var(--c-muted);
  border-bottom: 1px dashed var(--c-line-2); padding-bottom: 2px;
}
.landing-scope__reset:hover { color: var(--c-yellow-ink); border-color: var(--c-yellow-ink); }

/* мобильный заголовок фильтра */
.filter__mobile-head {
  display: none; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--c-line);
  position: sticky; top: 0; background: var(--c-panel); z-index: 2;
}
.filter__mobile-head strong { font-family: var(--font-display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }

/* ================================================================= КАРТОЧКА ТОВАРА (страница) */
.product-page { padding: 8px 0 48px; }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }

.product-gallery { position: sticky; top: calc(var(--header-h) + 16px); }
.gallery-main {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 12px;
  aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
}
.gallery-main img { width: 92%; height: 92%; object-fit: contain; filter: drop-shadow(0 20px 26px rgba(16,18,22,.18)); }
.gallery-thumbs { display: flex; gap: 10px; }
.gallery-thumbs button {
  border: 1px solid var(--c-line-2); border-radius: var(--radius-sm);
  background: var(--c-panel); padding: 4px; width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.gallery-thumbs button.is-active { border-color: var(--c-yellow); }
.gallery-thumbs button:hover { border-color: var(--c-line-2); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: contain; }

.product-info { min-width: 0; }
.product-info .product-brand {
  font-family: var(--font-display);
  font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-yellow-ink); margin-bottom: 8px;
}
.product-info h1 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 600; text-transform: uppercase; letter-spacing: .01em;
  margin-bottom: 6px; line-height: 1.15;
}
.product-article { font-size: 13px; color: var(--c-faint); margin-bottom: 22px; }
.product-article b { color: var(--c-muted); font-weight: 600; }

.product-price-row { display: flex; align-items: center; gap: 14px; margin: 20px 0; flex-wrap: wrap; }
.product-price { font-family: var(--font-display); font-size: 42px; font-weight: 600; letter-spacing: .01em; color: var(--c-text); }
.product-price--old { font-size: 20px; color: var(--c-faint); text-decoration: line-through; }
.product-stock { font-size: 14px; margin-bottom: 20px; }
.product-stock .is-ok { color: var(--c-green); font-weight: 600; }
.product-stock .is-low { color: var(--c-orange); font-weight: 600; }
.product-stock .is-out { color: var(--c-faint); font-weight: 600; }
.product-buy { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 28px; }
.product-buy .btn { min-width: 210px; }

/* --- Карточка по макету «Карточка диска» --- */
.product-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.product-head .product-title {
  font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 600; line-height: 1.15; margin: 0;
}
.product-head__meta { display: flex; align-items: center; gap: 16px; }
.product-head__meta .product-article { margin: 0; }
.product-head .card__fav { width: 44px; height: 44px; font-size: 20px; flex: none; }

.product-info .product-brand { display: none; }
.product-info .product-model { font-size: 14px; font-weight: 600; color: var(--c-muted); margin-bottom: 14px; }
.product-info .product-price-row { margin: 0 0 4px; }
.product-info .product-stock { margin: 16px 0 0; }
.product-per { font-size: 12px; color: var(--c-faint); margin-bottom: 10px; }
.product-set { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.product-delivery { font-size: 13px; color: var(--c-muted); line-height: 1.7; margin: 16px 0 20px; }

.product-buy { margin-bottom: 10px; align-items: center; }
.qty-stepper {
  display: inline-flex; align-items: center; overflow: hidden;
  border: 1px solid var(--c-line-2); border-radius: var(--radius);
  background: var(--c-panel-2);
}
.qty-stepper button {
  width: 44px; height: 46px; border: none; background: transparent;
  font-size: 18px; color: var(--c-muted); cursor: pointer;
  transition: color .15s, background .15s;
}
.qty-stepper button:hover { color: var(--c-text); background: var(--c-panel); }
.qty-stepper input {
  width: 52px; border: none; background: transparent; text-align: center;
  font-weight: 600; font-size: 15px; color: var(--c-text); -moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-stepper input:focus { outline: none; }
.product-buy .btn { height: 46px; }
.product-oneclick { width: 100%; margin-bottom: 24px; }

.product-compat { border-top: 1px solid var(--c-line); padding-top: 18px; }
.product-compat h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.product-compat p { font-size: 12px; color: var(--c-faint); margin: 0 0 12px; }

/* нижняя зона: характеристики + боковые карточки */
.product-lower {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px;
  align-items: start; margin-top: 28px;
}
.product-specs {
  margin: 0;
  background: var(--c-bg-alt); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: 24px;
}
.product-specs h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 8px;
}
.spec-list { margin: 0; }
.spec-list .spec-row2 {
  display: grid; grid-template-columns: 200px 1fr; gap: 16px;
  padding: 9px 0; border-bottom: 1px solid var(--c-line); font-size: 13px;
}
.spec-list .spec-row2:last-child { border-bottom: none; }
.spec-list dt { color: var(--c-faint); }
.spec-list dd { margin: 0; font-weight: 600; color: var(--c-text); word-break: break-word; }

.product-side { display: grid; gap: 20px; min-width: 0; }
.side-card {
  background: var(--c-bg-alt); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: 22px;
}
.side-card h3 { font-size: 17px; font-weight: 600; margin: 0 0 10px; }
.side-card p { font-size: 13px; color: var(--c-muted); line-height: 1.6; margin: 0 0 14px; }
.side-card--dark { background: var(--c-black); border-color: var(--c-black); color: #fff; }
.side-card--dark h3 { color: #fff; }
.side-card--dark p { color: rgba(255, 255, 255, .72); }
.side-checks { list-style: none; margin: 0; padding: 0; font-size: 13px; line-height: 2.1; color: var(--c-muted); }

.product-related { margin-top: 44px; }
.product-related h2 {
  font-family: var(--font-display); font-size: 22px; font-weight: 600; margin: 0 0 16px;
}

@media (max-width: 1200px) {
  .product-lower { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .product-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .product-head { align-items: flex-start; }
  .spec-list .spec-row2 { grid-template-columns: 1fr; gap: 2px; padding: 8px 0; }
  .product-related { margin-top: 32px; }
}

/* «Технический паспорт»: характеристики-плитки вместо линейного списка */
.product-specs { margin-top: 44px; }
.specs-head {
  display: flex; align-items: baseline; gap: 16px;
  border-bottom: 1px solid var(--c-line); padding-bottom: 14px; margin-bottom: 26px;
}
.specs-head h2 { font-family: var(--font-display); font-size: 24px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin: 0; }
.specs-head__mark {
  font-family: var(--font-display); font-size: 11px; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase; color: var(--c-faint);
}
.spec-signature {
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  padding: 22px 26px; margin-bottom: 30px;
  border: 1px solid var(--c-line-2); border-radius: var(--radius-lg);
  background:
    radial-gradient(130% 160% at 8% 0%, rgba(255, 200, 0, .12), transparent 52%),
    var(--c-bg-dark);
}
.spec-signature__num {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 4vw, 46px); line-height: 1;
  text-transform: uppercase; letter-spacing: .01em; color: var(--c-text);
}
.spec-signature__num span { color: var(--c-yellow); }
.spec-signature__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.spec-signature__chips span {
  font-family: var(--font-display); font-size: 12px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-text);
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--c-line-2); border-radius: 999px; padding: 6px 13px;
}
.spec-group { margin-bottom: 30px; }
.spec-group__name {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--c-yellow-ink);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 14px;
}
.spec-group__name::after { content: ""; flex: 1; height: 1px; background: var(--c-line); }
.spec-group__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.spec-tile {
  display: flex; flex-direction: column; gap: 5px;
  background: var(--c-panel);
  border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 15px 16px;
  transition: border-color .15s, background .15s;
}
.spec-tile:hover { border-color: var(--c-line-2); background: var(--c-panel-2); }
.spec-tile__label {
  font-size: 11px; color: var(--c-faint);
  text-transform: uppercase; letter-spacing: .09em;
}
.spec-tile__value {
  font-family: var(--font-display); font-size: 20px; font-weight: 600;
  line-height: 1.15; color: var(--c-text); word-break: break-word;
}

/* старая таблица-список больше не используется */
.specs-table { display: none; }

.specs-table {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  overflow: hidden; margin-top: 40px; background: var(--c-panel);
}
.specs-table h2 {
  padding: 16px 20px; margin: 0;
  font-family: var(--font-display);
  font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid var(--c-line);
}
.specs-table dl { margin: 0; }
.specs-table .spec-row {
  display: grid; grid-template-columns: 260px 1fr; gap: 20px;
  padding: 10px 20px; font-size: 14px;
}
.specs-table .spec-row:nth-child(odd) { background: rgba(16, 18, 22, .03); }
.specs-table .spec-row dt { color: var(--c-muted); }
.specs-table .spec-row dd { margin: 0; font-weight: 600; color: var(--c-text); }

/* ================================================================= КОРЗИНА / ЧЕКАУТ */
.cart-page { padding: 8px 0 48px; }
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }

.cart-items {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-panel);
  overflow: hidden;
}
.cart-item {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 18px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--c-line);
}
.cart-item:last-child { border-bottom: none; }
.cart-item__main { min-width: 0; }
.cart-item__thumb {
  width: 76px; height: 76px;
  border-radius: var(--radius-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-faint);
}
.cart-item__thumb svg { width: 40px; height: 40px; }
.cart-item__title { font-weight: 600; font-size: 15px; color: var(--c-text); }
.cart-item__title:hover { color: var(--c-yellow-ink); }
.cart-item__meta { font-size: 12px; color: var(--c-faint); margin-top: 4px; }
.cart-item__right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cart-item__price { font-family: var(--font-display); font-weight: 600; font-size: 19px; }

.qty-form { display: flex; gap: 8px; align-items: center; }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--c-line-2); border-radius: 999px; overflow: hidden; background: var(--c-bg); }
.qty button { width: 36px; height: 38px; border: none; background: transparent; color: var(--c-muted); font-size: 18px; transition: color .15s, background .15s; }
.qty button:hover { background: var(--c-panel-2); color: var(--c-text); }
.qty span { min-width: 38px; text-align: center; font-weight: 600; color: var(--c-text); }

.cart-qty-input { width: 72px; padding: 9px 12px; background: var(--c-bg); border: 1px solid var(--c-line-2); border-radius: var(--radius-sm); color: var(--c-text); }
.cart-qty-input:focus { border-color: var(--c-yellow); }

.cart-item__remove { border: none; background: none; color: var(--c-faint); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.cart-item__remove:hover { color: var(--c-red); }

.cart-summary {
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-panel);
  padding: 24px;
  position: sticky; top: calc(var(--header-h) + 16px);
}
.cart-summary h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 18px; }
.summary-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; color: var(--c-muted); }
.summary-row b { color: var(--c-text); }
.summary-row--total {
  font-family: var(--font-display);
  font-size: 24px; font-weight: 600; color: var(--c-text);
  border-top: 1px solid var(--c-line); margin-top: 12px; padding-top: 14px;
}
.cart-item-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--c-muted); margin-bottom: 7px; }
.cart-item-line b { color: var(--c-text); font-weight: 600; white-space: nowrap; }
.cart-note { font-size: 12px; color: var(--c-faint); margin: 12px 0; }
.cart-summary .btn { margin-top: 6px; }

.cart-empty { text-align: center; padding: 70px 20px; }
.cart-empty .icon-ring {
  width: 84px; height: 84px; margin: 0 auto 20px; border-radius: 50%;
  background: rgba(255, 200, 0, .08); border: 1px solid rgba(255, 200, 0, .22);
  color: var(--c-yellow);
  display: flex; align-items: center; justify-content: center;
}
.cart-empty .icon-ring svg { width: 40px; height: 40px; }
.cart-empty h2 { font-family: var(--font-display); font-size: 26px; text-transform: uppercase; letter-spacing: .02em; margin-bottom: 8px; }
.cart-empty p { color: var(--c-muted); margin: 0 0 22px; }
.cart-empty .btn { margin-top: 6px; }

/* ================= КОРЗИНА (макет docs/design_ корзина.md) ================= */
.ct-head { margin: 18px 0 22px; }
.ct-head h1 { font-size: 30px; font-weight: 600; margin: 0 0 6px; }
.ct-head p { font-size: 11px; color: #6E7580; margin: 0; }

.ct-layout { display: grid; grid-template-columns: 1fr 452px; gap: 32px; align-items: start; margin-bottom: 30px; }

.ct-main { background: #fff; border-radius: 10px; padding: 10px 20px 20px; }
.ct-item { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 24px; padding: 20px 0; align-items: start; }
.ct-item + .ct-item { border-top: 1px solid #F0F1F3; }
.ct-item__thumb {
  width: 150px; height: 150px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; color: #383B3D;
}
.ct-item__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.ct-item__thumb span { font-size: 48px; line-height: 1; }
.ct-item__info { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.ct-item__title { font-size: 16px; font-weight: 600; color: #08090A; }
.ct-item__title:hover { color: var(--c-yellow-ink); }
.ct-item__spec { font-size: 11px; color: #6E7580; margin-top: 6px; }
.ct-item__stock { font-size: 10px; font-weight: 600; margin-top: 8px; }
.ct-item__stock.is-ok { color: #149E4D; }
.ct-item__stock.is-out { color: #6E7580; }

.ct-qty {
  display: inline-flex; align-items: center; margin-top: 16px;
  height: 40px; border: 1px solid #EBEDF1; border-radius: 5px; background: #fff;
}
.ct-qty__btn {
  width: 42px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; font-size: 16px; color: #08090A; cursor: pointer;
}
.ct-qty__btn:hover { color: var(--c-yellow-ink); }
.ct-qty__btn.is-disabled { color: #C4C8CD; cursor: default; }
.ct-qty__val { min-width: 42px; text-align: center; font-size: 11px; font-weight: 600; color: #08090A; }

.ct-item__aside { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; gap: 24px; }
.ct-item__price { font-size: 18px; font-weight: 600; color: #08090A; white-space: nowrap; }
.ct-item__actions { display: flex; align-items: center; gap: 18px; }
.ct-item__fav, .ct-item__del {
  border: 0; background: none; padding: 0; font-size: 9px; color: #6E7580; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.ct-item__fav:hover, .ct-item__del:hover { color: #d33; }
.ct-item__fav.is-active { color: #e0245e; }

.ct-mount {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #0B0D0E; border-radius: 8px; padding: 24px 20px; margin-top: 8px;
}
.ct-mount__text { display: flex; flex-direction: column; gap: 8px; }
.ct-mount__text strong { font-size: 17px; font-weight: 600; color: #fff; }
.ct-mount__text span { font-size: 10px; color: #C2C4C9; }
.ct-mount__btn { height: 46px; padding: 0 28px; font-size: 11px; }

.ct-side { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 16px; }
.ct-summary { background: #fff; border-radius: 10px; padding: 24px; }
.ct-summary h2 { font-size: 20px; font-weight: 600; color: #08090A; margin: 0 0 18px; }
.ct-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11px; color: #6E7580; padding: 8px 0; }
.ct-row b { color: #08090A; font-weight: 600; text-align: right; }
.ct-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 14px; }
.ct-total span { font-size: 15px; font-weight: 600; color: #08090A; }
.ct-total b { font-size: 25px; font-weight: 600; color: #08090A; white-space: nowrap; }
.ct-btn-order { margin-top: 22px; height: 52px; font-size: 13px; }
.ct-btn-fast { margin-top: 10px; height: 50px; font-size: 12px; color: #fff; }
.ct-note { font-size: 9px; color: #6E7580; line-height: 1.5; margin: 16px 0 0; }

.ct-pickup { background: #fff; border-radius: 10px; padding: 22px 24px; }
.ct-pickup h3 { font-size: 16px; font-weight: 600; color: #08090A; margin: 0 0 14px; }
.ct-pickup strong { display: block; font-size: 11px; font-weight: 600; color: #08090A; }
.ct-pickup p { font-size: 10px; color: #6E7580; margin: 6px 0 0; }

.ct-more { margin-top: 34px; }
.ct-more h2 { font-size: 24px; font-weight: 600; color: #08090A; margin: 0 0 18px; }
.ct-more__grid { display: grid; grid-template-columns: repeat(auto-fill, 280px); gap: 20px; justify-content: start; }
.ct-more__card {
  width: 280px; min-height: 170px; background: #fff; border: 1px solid #EBEDF1; border-radius: 8px;
  padding: 18px; display: flex; flex-direction: column;
}
.ct-more__card h3 { font-size: 13px; font-weight: 600; color: #08090A; margin: 0 0 14px; }
.ct-more__card h3 a:hover { color: var(--c-yellow-ink); }
.ct-more__price { font-size: 17px; font-weight: 600; color: #08090A; margin: 0 0 14px; }
.ct-more__add { width: 120px; height: 40px; font-size: 10px; margin-top: auto; }

.ct-boost { background: #0B0D0E; border-radius: 10px; padding: 28px; margin: 30px 0 44px; }
.ct-boost h2 { font-size: 21px; font-weight: 600; color: #fff; margin: 0 0 14px; }
.ct-boost p { font-size: 11px; color: #C2C4C9; margin: 0 0 6px; max-width: 850px; }

@media (max-width: 1100px) {
  .ct-layout { grid-template-columns: 1fr; }
  .ct-side { position: static; }
}
@media (max-width: 640px) {
  .ct-head h1 { font-size: 24px; }
  .ct-main { padding: 10px 14px 16px; }
  .ct-item { grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 16px 0; }
  .ct-item__thumb { width: 92px; height: 92px; }
  .ct-item__thumb img { padding: 6px; }
  .ct-item__aside { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .ct-mount { flex-direction: column; align-items: flex-start; }
  .ct-mount__btn { width: 100%; }
  .ct-more__grid { grid-template-columns: 1fr; }
  .ct-more__card { width: auto; }
  .ct-boost { padding: 20px; }
}

/* ================= АВТОСЕРВИСЫ / ШИНОМОНТАЖ (макет docs/design_сервис.md) ================= */
.sv-hero {
  display: grid; grid-template-columns: 1fr 500px; gap: 30px; align-items: center;
  background: #08090A; border-radius: 12px; padding: 44px 38px; margin: 16px 0 8px;
}
.sv-hero__kicker { display: block; color: #FFB800; font-size: 14px; font-weight: 600; letter-spacing: .04em; }
.sv-hero__title { color: #fff; font-size: 36px; font-weight: 600; line-height: 1.15; margin: 16px 0 0; }
.sv-hero__sub { color: #C2C4C9; font-size: 13px; line-height: 1.5; max-width: 650px; margin: 20px 0 0; }
.sv-hero__btn { margin-top: 30px; height: 50px; padding: 0 34px; font-size: 12px; }
.sv-hero__panel {
  background: #1F2124; border-radius: 10px; min-height: 314px; padding: 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
}
.sv-hero__wheel { width: 200px; height: 200px; }
.sv-hero__panel strong { color: #fff; font-size: 15px; font-weight: 600; }

.sv-title { font-size: 26px; font-weight: 600; color: #08090A; margin: 40px 0 18px; }

.sv-search {
  background: #fff; border-radius: 10px; padding: 24px; min-height: 150px; margin-bottom: 8px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.sv-field {
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  height: 58px; padding: 8px 14px; background: #fff; border: 1px solid #EBEDF1; border-radius: 6px;
}
.sv-field span { font-size: 9px; color: #6E7580; }
.sv-field select, .sv-field input {
  border: 0; outline: 0; background: transparent; padding: 0; width: 100%; height: 22px;
  font-size: 12px; color: #08090A; font-family: var(--font); font-weight: 600;
}
.sv-field input::placeholder { color: #6E7580; font-weight: 400; }
.sv-field select {
  appearance: none; padding-right: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23737a85' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
}
.sv-field--city { width: 310px; flex: none; }
.sv-field--addr { width: 480px; flex: none; }
.sv-search__btn { height: 58px; width: 190px; flex: none; font-size: 12px; }
.sv-toggle { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.sv-toggle__btn { border: 0; background: none; padding: 0; font-size: 11px; font-weight: 600; color: #6E7580; cursor: pointer; }
.sv-toggle__btn.is-active { color: #08090A; }

.sv-services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sv-service {
  background: #fff; border: 1px solid #EBEDF1; border-radius: 9px; padding: 20px; min-height: 165px;
  display: flex; flex-direction: column;
}
.sv-service__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sv-service__ico { color: #FFB800; font-size: 30px; line-height: 1; }
.sv-service h3 { font-size: 16px; font-weight: 600; color: #08090A; margin: 0; }
.sv-service p { font-size: 10px; color: #6E7580; margin: 0 0 16px; }
.sv-service__foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sv-service__foot b { font-size: 12px; font-weight: 600; color: #08090A; }
.sv-service__more { border: 0; background: none; padding: 0; font-size: 10px; font-weight: 600; color: #08090A; cursor: pointer; }
.sv-service__more:hover { color: var(--c-yellow-ink); }

.sv-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.sv-step {
  background: #fff; border: 1px solid #EBEDF1; border-radius: 9px; padding: 20px; min-height: 190px;
}
.sv-step--dark { background: #08090A; border-color: #08090A; }
.sv-step__num {
  width: 36px; height: 36px; border-radius: 50%; background: #FFB800; color: #08090A;
  font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.sv-step h3 { font-size: 14px; font-weight: 600; color: #08090A; margin: 0 0 10px; }
.sv-step p { font-size: 10px; color: #6E7580; margin: 0; }
.sv-step--dark h3 { color: #fff; }
.sv-step--dark p { color: #C2C4C9; }

.sv-cta { background: #0B0D0E; border-radius: 10px; padding: 30px 28px; margin: 40px 0 8px; }
.sv-cta h2 { color: #fff; font-size: 22px; font-weight: 600; margin: 0 0 14px; }
.sv-cta p { color: #C2C4C9; font-size: 12px; max-width: 760px; margin: 0 0 22px; }
.sv-cta__btn { height: 46px; padding: 0 28px; font-size: 11px; }

.sv-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 44px; }
.sv-why__card { background: #fff; border-radius: 8px; padding: 22px 18px; min-height: 120px; display: flex; flex-direction: column; gap: 8px; }
.sv-why__card strong { font-size: 14px; font-weight: 600; color: #08090A; }
.sv-why__card span { font-size: 10px; color: #6E7580; }

@media (max-width: 1100px) {
  .sv-hero { grid-template-columns: 1fr; }
  .sv-hero__panel { min-height: 240px; }
  .sv-field--city, .sv-field--addr { width: auto; flex: 1 1 240px; }
  .sv-toggle { flex-basis: 100%; margin-left: 0; }
  .sv-services, .sv-steps, .sv-why { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .sv-hero { padding: 30px 22px; }
  .sv-hero__title { font-size: 26px; }
  .sv-search { padding: 18px; }
  .sv-field--city, .sv-field--addr, .sv-search__btn { width: 100%; flex: 1 1 100%; }
  .sv-services, .sv-steps, .sv-why { grid-template-columns: 1fr; }
}

/* ================= КАРТОЧКА ШИНЫ (макет docs/design_карточка_шины.md) ================= */
.pt-head { margin: 18px 0 20px; }
.pt-title { font-size: 30px; font-weight: 600; color: #08090A; margin: 0 0 12px; max-width: 1150px; }
.pt-meta { display: flex; flex-wrap: wrap; gap: 20px; font-size: 11px; color: #6E7580; }
.pt-meta b { color: #08090A; font-weight: 600; }

.pt-top { display: grid; grid-template-columns: 610px 1fr; gap: 32px; align-items: start; margin-bottom: 34px; }

.pt-gallery {
  position: relative; background: #fff; border-radius: 10px; min-height: 510px; padding: 70px 20px 20px;
  display: flex; align-items: center; justify-content: center;
}
/* фон не задаём: картинка товара на чистом белом */
.pt-gallery__media { width: 340px; height: 340px; display: flex; align-items: center; justify-content: center; }
.pt-gallery__media img { width: 100%; height: 100%; object-fit: contain; }
.pt-gallery__badges { position: absolute; left: 20px; top: 20px; display: flex; gap: 10px; }
.pt-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 14px; border-radius: 4px; font-size: 9px; font-weight: 600; }
.pt-badge--season { background: #fff; border: 1px solid #EBEDF1; color: #08090A; }
.pt-gallery__fav {
  position: absolute; right: 20px; top: 16px; border: 0; background: none; padding: 0;
  font-size: 24px; line-height: 1; color: #08090A; cursor: pointer;
}
.pt-gallery__fav.is-active { color: #e0245e; }
.pt-gallery__thumbs { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; gap: 12px; }
.pt-gallery__thumbs button {
  width: 128px; height: 70px; border: 1px solid #EBEDF1; border-radius: 5px; background: #F0F1F4;
  overflow: hidden; padding: 4px; cursor: pointer;
}
.pt-gallery__thumbs button.is-active { border-color: var(--c-yellow); background: #FCF5D4; }
.pt-gallery__thumbs img { width: 100%; height: 100%; object-fit: contain; }

.pt-info { background: #fff; border-radius: 10px; padding: 28px; min-height: 510px; }
.pt-stock { font-size: 11px; font-weight: 600; }
.pt-stock.is-ok { color: #149E4D; }
.pt-stock.is-out { color: #6E7580; }
.pt-price { font-size: 31px; font-weight: 600; color: #08090A; margin: 14px 0 6px; }
.pt-set { font-size: 11px; color: #6E7580; }
.pt-compat {
  background: #F5F6F8; border-radius: 7px; padding: 16px 18px; margin: 26px 0;
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.pt-compat strong { font-size: 13px; font-weight: 600; color: #08090A; }
.pt-compat span { font-size: 10px; color: #6E7580; }
.pt-compat__link { font-size: 11px; font-weight: 600; color: var(--c-yellow-ink); margin-top: 4px; }
.pt-buy__row { display: flex; gap: 14px; }
.pt-buy__cart { flex: 1; height: 52px; font-size: 13px; }
.pt-buy__oneclick {
  width: 180px; height: 52px; font-size: 12px; background: #fff; border: 1px solid #08090A;
  color: #08090A; border-radius: 6px;
}
.pt-buy__oneclick:hover { background: #f2f3f5; }
.pt-qty { margin-top: 28px; }
.pt-qty__label { display: block; font-size: 10px; color: #6E7580; margin-bottom: 10px; }
.pt-page .qty-stepper { height: 42px; border: 1px solid #EBEDF1; border-radius: 5px; background: #fff; }
.pt-page .qty-stepper button { width: 42px; height: 40px; font-size: 16px; color: #08090A; }
.pt-page .qty-stepper button:hover { background: #f2f3f5; }
.pt-page .qty-stepper input { width: 42px; font-size: 12px; color: #08090A; }
.pt-delivery { margin-top: 28px; display: flex; flex-direction: column; gap: 6px; }
.pt-delivery strong { font-size: 11px; font-weight: 600; color: #08090A; }
.pt-delivery span { font-size: 10px; color: #6E7580; }

.pt-tabs { display: flex; gap: 28px; align-items: center; background: #fff; border-radius: 7px; padding: 0 24px; min-height: 58px; margin-bottom: 26px; }
.pt-tab { position: relative; height: 58px; border: 0; background: none; padding: 0; font-size: 12px; color: #08090A; cursor: pointer; }
.pt-tab.is-active { font-weight: 600; }
.pt-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--c-yellow); }

.pt-lower { display: grid; grid-template-columns: 1fr 452px; gap: 32px; align-items: start; margin-bottom: 34px; }
.pt-card { background: #fff; border-radius: 10px; padding: 24px; }
.pt-card h2 { font-size: 22px; font-weight: 600; color: #08090A; margin: 0 0 22px; }
.pt-specs { margin: 0; }
.pt-spec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 11px 0; }
.pt-spec-row dt { font-size: 11px; color: #6E7580; }
.pt-spec-row dd { font-size: 11px; font-weight: 600; color: #08090A; margin: 0; }
.pt-about { font-size: 13px; line-height: 1.65; color: #08090A; }
.pt-checks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.pt-checks li { position: relative; font-size: 12px; color: #08090A; padding-left: 20px; }
.pt-checks li::before { content: "✓"; position: absolute; left: 0; color: #149E4D; font-weight: 600; }
.pt-side__card {
  background: #08090A; border-radius: 10px; padding: 26px 24px; min-height: 250px;
  display: flex; flex-direction: column; align-items: flex-start;
}
.pt-side__card h2 { font-size: 20px; font-weight: 600; color: #fff; margin: 0 0 18px; }
.pt-side__card p { font-size: 11px; color: #C2C4C9; margin: 0 0 26px; }
.pt-side__btn { height: 46px; padding: 0 28px; font-size: 11px; }
.pt-side__note { margin-top: auto; font-size: 10px; color: #fff; }

.pt-also { margin-bottom: 34px; }
.pt-also h2 { font-size: 24px; font-weight: 600; color: #08090A; margin: 0 0 18px; }
.pt-also__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pt-also__card { background: #fff; border: 1px solid #EBEDF1; border-radius: 8px; padding: 18px; min-height: 170px; display: flex; flex-direction: column; }
.pt-also__title { font-size: 14px; font-weight: 600; color: #08090A; margin-bottom: 14px; }
.pt-also__title:hover { color: var(--c-yellow-ink); }
.pt-also__price { font-size: 18px; font-weight: 600; color: #08090A; margin-bottom: 14px; }
.pt-also__add { width: 120px; height: 40px; font-size: 10px; margin-top: auto; }

.pt-help { background: #0B0D0E; border-radius: 10px; padding: 28px; margin-bottom: 44px; }
.pt-help h2 { font-size: 22px; font-weight: 600; color: #fff; margin: 0 0 14px; }
.pt-help p { font-size: 12px; color: #C2C4C9; max-width: 800px; margin: 0 0 22px; }
.pt-help__btn { height: 46px; padding: 0 28px; font-size: 11px; }

@media (max-width: 1100px) {
  .pt-top { grid-template-columns: 1fr; }
  .pt-gallery { min-height: 380px; }
  .pt-info { min-height: 0; }
  .pt-lower { grid-template-columns: 1fr; }
  .pt-also__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .pt-title { font-size: 22px; }
  .pt-gallery { min-height: 300px; padding: 60px 14px 14px; }
  .pt-gallery__media { width: 240px; height: 240px; }
  .pt-gallery__thumbs button { width: 64px; height: 44px; }
  .pt-info { padding: 20px; }
  .pt-price { font-size: 26px; }
  .pt-buy__row { flex-direction: column; }
  .pt-buy__oneclick { width: 100%; }
  .pt-spec-row { grid-template-columns: 1fr; gap: 2px; padding: 9px 0; }
  .pt-tabs { gap: 18px; padding: 0 16px; }
  .pt-also__grid { grid-template-columns: 1fr; }
}

/* формы чекаута в одну колонку */
.checkout-form { min-width: 0; }
.checkout-fields { padding: 20px 20px 6px; display: flex; flex-direction: column; gap: 16px; }
.checkout-fields .field { margin: 0; max-width: 520px; }
.checkout-fields .field label { color: var(--c-text); font-weight: 600; font-size: 13px; }
.checkout-agree {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--c-muted); cursor: pointer;
  max-width: 520px;
}
.checkout-agree input { margin-top: 4px; accent-color: var(--c-yellow); width: 16px; height: 16px; }
.checkout-actions {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; padding: 16px 20px;
  border-top: 1px solid var(--c-line);
  margin-left: -20px; margin-right: -20px; margin-bottom: -6px;
}
.cart-empty__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* алерт ошибок */
.form-errors {
  margin-bottom: 20px; padding: 14px 18px;
  border: 1px solid rgba(255, 97, 87, .4); border-left: 3px solid var(--c-red);
  border-radius: var(--radius-sm);
  background: rgba(255, 97, 87, .06);
  color: var(--c-text); font-size: 14px;
}
.form-errors p { margin: 2px 0; }

/* ================================================================= ЧЕКАУТ (макет «checkout») */
.oc-steps {
  display: flex; flex-wrap: wrap; gap: 8px 34px;
  background: var(--c-bg-alt); border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  padding: 18px 24px; margin-bottom: 26px;
}
.oc-steps__item { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--c-text); }
.oc-steps__item i {
  width: 32px; height: 32px; border-radius: 999px; font-style: normal;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  background: var(--c-yellow); color: var(--c-onyx);
}
.oc-steps__item:not(.is-done) { color: var(--c-faint); }
.oc-steps__item:not(.is-done) i { background: var(--c-panel-2); color: var(--c-faint); }

.oc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 24px; align-items: start; }
.oc-col { display: grid; gap: 20px; min-width: 0; }
.oc-side { display: grid; gap: 20px; min-width: 0; }

.oc-card {
  background: var(--c-bg-alt); border: 1px solid var(--c-line);
  border-radius: var(--radius-lg); padding: 22px;
}
.oc-card__title { font-family: var(--font-display); font-size: 18px; font-weight: 600; margin: 0 0 6px; }
.oc-card__sub { font-size: 12px; color: var(--c-faint); margin: 0 0 18px; }

.oc-fields { display: grid; gap: 14px; margin-bottom: 16px; }
.oc-fields--3 { grid-template-columns: repeat(3, 1fr); }
.oc-fields--2 { grid-template-columns: repeat(2, 1fr); }
.oc-fields--courier { grid-template-columns: 260px 1fr 180px; }
.oc-field--full { grid-column: 1 / -1; }
.oc-field label { display: block; font-size: 11px; font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
.oc-field input {
  width: 100%; height: 46px; padding: 0 14px;
  border: 1px solid var(--c-line-2); border-radius: var(--radius);
  background: var(--c-bg-alt); color: var(--c-text); font-size: 14px;
}
.oc-field input:focus { border-color: var(--c-yellow); outline: none; }
.oc-field.is-error input { border-color: var(--c-red); }
.oc-subfields { margin-top: 14px; }
.oc-subfields .oc-fields { margin-bottom: 0; }

.oc-check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--c-muted); cursor: pointer; margin-top: 8px; }
.oc-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--c-yellow); flex: none; }
.oc-check a { color: var(--c-muted); text-decoration: underline; text-underline-offset: 3px; }
.oc-check a:hover { color: var(--c-yellow-ink); }
.oc-check.is-error span { color: var(--c-red); }

.oc-group { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oc-radio {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--c-line-2); border-radius: var(--radius);
  padding: 14px 16px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.oc-radio input { position: absolute; opacity: 0; pointer-events: none; }
.oc-radio__dot {
  width: 20px; height: 20px; border-radius: 999px; flex: none; margin-top: 1px;
  border: 2px solid var(--c-faint); background: var(--c-bg-alt);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s;
}
.oc-radio__dot::after {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--c-onyx); transform: scale(0); transition: transform .15s;
}
.oc-radio.is-active { border-color: var(--c-yellow); }
.oc-radio.is-active .oc-radio__dot { border-color: var(--c-onyx); }
.oc-radio.is-active .oc-radio__dot::after { transform: scale(1); }
.oc-radio__text { display: grid; gap: 4px; min-width: 0; }
.oc-radio__text b { font-size: 13px; font-weight: 600; color: var(--c-text); }
.oc-radio__text small { font-size: 11px; color: var(--c-faint); line-height: 1.4; }

.oc-note {
  background: #fbf9e0; border-radius: var(--radius);
  padding: 14px 16px; font-size: 12px; color: var(--c-text); margin-top: 14px;
}
.oc-note--plain { background: var(--c-panel-2); margin-top: 0; }

/* сводка «Ваш заказ» */
.oc-order__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.oc-order__head h2 { font-family: var(--font-display); font-size: 20px; font-weight: 600; margin: 0; }
.oc-order__count { font-size: 12px; color: var(--c-faint); }
.oc-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.oc-item__thumb {
  width: 64px; height: 64px; border-radius: var(--radius);
  background: var(--c-panel-2); border: 1px solid var(--c-line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.oc-item__thumb img { width: 100%; height: 100%; object-fit: contain; }
.oc-item__main { min-width: 0; }
.oc-item__name { font-size: 13px; font-weight: 600; color: var(--c-text); }
.oc-item__meta { font-size: 11px; color: var(--c-faint); margin-top: 3px; }
.oc-item__sum { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.oc-sum { display: flex; justify-content: space-between; font-size: 13px; color: var(--c-muted); padding: 7px 0; }
.oc-sum b { color: var(--c-text); font-weight: 600; }
.oc-sum__calc { color: #0f4db2 !important; }
.oc-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid var(--c-line); margin-top: 10px; padding-top: 14px;
}
.oc-total span { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
.oc-total b { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--c-text); }
.oc-order__note { font-size: 11px; color: var(--c-faint); margin: 10px 0 0; }

/* тёмная карточка оплаты */
.oc-pay {
  background: var(--c-black); border-radius: var(--radius-lg); padding: 22px; color: #fff;
}
.oc-pay__label { font-size: 12px; color: #c2c7cc; }
.oc-pay__amount { font-family: var(--font-display); font-size: 26px; font-weight: 600; margin: 6px 0 16px; }
.oc-pay__cta { width: 100%; min-height: 52px; font-size: 15px; }
.oc-pay__cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.oc-pay .oc-check { color: rgba(255, 255, 255, .85); margin-top: 14px; }
.oc-pay .oc-check a { color: #fff; }
.oc-pay .oc-check.is-error span { color: #ff8a80; }
.oc-pay__note { font-size: 11px; color: #b2b8bd; margin: 12px 0 0; }

/* «Почему это безопасно» */
.oc-safe h3 { font-size: 16px; font-weight: 600; margin: 0 0 12px; }
.oc-safe ul { list-style: none; margin: 0; padding: 0; }
.oc-safe li { font-size: 13px; color: var(--c-muted); padding: 7px 0; }
.oc-safe__help { font-size: 13px; font-weight: 600; color: #0f4db2; margin-top: 12px; }
.oc-safe__help a { color: #0f4db2; }

@media (max-width: 1200px) {
  .oc-layout { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .oc-fields--3, .oc-fields--2 { grid-template-columns: 1fr 1fr; }
  .oc-fields--courier { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .oc-steps { gap: 8px 18px; padding: 14px 16px; }
  .oc-steps__item { font-size: 12px; }
  .oc-fields--3, .oc-fields--2, .oc-fields--courier { grid-template-columns: 1fr; }
  .oc-group { grid-template-columns: 1fr; }
  .oc-card { padding: 18px 16px; }
}

/* ================================================================= ПОИСК */
.search-page { padding: 8px 0 48px; }
.search-stats { color: var(--c-faint); font-size: 14px; margin-bottom: 18px; }
.search-page .product-grid { margin-top: 4px; }

/* ================================================================= 404 */
.page-404 { text-align: center; padding: 40px 16px 72px; }
.page-404__icon {
  width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--c-panel);
  border: 1px solid var(--c-line-2);
  color: var(--c-yellow);
  display: flex; align-items: center; justify-content: center;
}
.page-404__icon svg { width: 56px; height: 56px; }
.page-404__code {
  font-family: var(--font-display);
  font-size: 110px; font-weight: 600; letter-spacing: .02em; line-height: .9;
  color: var(--c-text); margin: 6px 0 10px;
}
.page-404__code span { color: var(--c-yellow-ink); }
.page-404__title { font-family: var(--font-body); font-size: 24px; font-weight: 600; margin: 0 0 10px; }
.page-404__text { color: var(--c-muted); max-width: 560px; margin: 0 auto 26px; }
.page-404__search { max-width: 560px; margin: 0 auto 26px; }
.page-404__actions { display: flex; gap: 12px; justify-content: center; margin-bottom: 32px; flex-wrap: wrap; }
.page-404__links { color: var(--c-faint); font-size: 14px; display: flex; gap: 8px 20px; justify-content: center; flex-wrap: wrap; }
.page-404__links a { color: var(--c-muted); font-weight: 500; border-bottom: 1px solid transparent; }
.page-404__links a:hover { color: var(--c-yellow-ink); border-bottom-color: var(--c-yellow-ink); }

.notfound { text-align: center; padding: 80px 16px; }
.notfound .code {
  font-family: var(--font-display);
  font-size: 120px; font-weight: 600; line-height: 1;
  color: var(--c-yellow);
  text-shadow: 0 0 0 transparent;
  -webkit-text-stroke: 2px var(--c-onyx);
}

/* ================================================================= АДАПТИВ */
@media (max-width: 1200px) {
  .product-grid--4 { grid-template-columns: repeat(3, 1fr); }
  .car-picker__form { grid-template-columns: 1fr 1fr; }
  .car-picker__form .field:nth-child(4), .car-picker__form .car-picker__submit { grid-column: span 1; }
}

@media (max-width: 1024px) {
  .hero__inner { padding: 48px 20px 56px; }
  .car-picker__form { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .catalog { grid-template-columns: 1fr; }
  .filter {
    display: none;
    position: fixed; inset: 0; z-index: 90;
    border: none; border-radius: 0; overflow: auto; background: var(--c-bg-alt);
  }
  .filter.is-open { display: block; }
  .filter__tabs { position: sticky; top: 0; z-index: 3; padding: 10px 10px 0; }
  .filter__panel { padding: 16px; }
  .filter__mobile-head { display: flex; }
  .catalog-filter-btn { display: inline-flex; }
  .product-grid, .product-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .directions { grid-template-columns: repeat(2, 1fr); }
  .other-cats { grid-template-columns: repeat(3, 1fr); }
  .hero__inner { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart-summary { position: static; }
}

@media (max-width: 560px) {
  .product-grid, .product-grid--4 { grid-template-columns: 1fr 1fr; gap: 12px; }
  .car-picker__form { grid-template-columns: 1fr; }
  .brands { grid-template-columns: repeat(2, 1fr); }
  .advantages { grid-template-columns: 1fr 1fr; gap: 10px; }
  .advantage { padding: 18px; }
  .news-grid { grid-template-columns: 1fr; }
  .directions { grid-template-columns: 1fr; }
  .other-cats { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { padding: 40px 16px 48px; }
  .hero__title { font-size: 30px; }
  .catalog-toolbar .sort { margin-left: 0; }
  .product-buy .btn { min-width: 0; flex: 1; }
  .specs-table .spec-row { grid-template-columns: 1fr; gap: 2px; }
  .gallery-thumbs button { width: 64px; height: 64px; }
}

@media (max-width: 1200px) {
  .spec-group__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .spec-group__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .spec-group__grid { grid-template-columns: 1fr; }
  .spec-signature { padding: 18px 18px; }
}
/* ==========================================================================
   ГЛАВНАЯ — обновлённый макет (docs/design_нглавная_обновленный_макет.md)
   + мобильная версия (docs/design_нглавная_мобильная_версия.md)
   Секции: hero, подбор (шины/диски × авто/параметры), Каталог TIREX,
   «Всё для вашего автомобиля», «Шины для бизнеса и техники», Аккумуляторы/Масла,
   Шины, Диски, Популярные модели, Популярные бренды, преимущества, Новости,
   город, Помощь с выбором, SEO-блок. Раскладка flex/grid, без absolute.
   ========================================================================== */

.home { padding: 18px 0 40px; }

/* ---------------- hero ---------------- */
.hhero {
  position: relative;
  background: var(--c-black);
  border-radius: 9px;
  color: #fff;
  padding: 44px 40px;
  margin-bottom: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 250px);
  gap: 28px;
  align-items: center;
  min-height: 270px;
}
.hhero__kicker { display: none; color: var(--c-yellow); font-size: 9px; font-weight: 600; letter-spacing: .04em; }
.hhero__title { font-size: 27px; font-weight: 600; line-height: 1.28; margin: 0 0 14px; letter-spacing: .01em; color: #fff; }
.hhero__title span { color: var(--c-yellow); font-size: 32px; }
.hhero__sub { font-size: 16px; line-height: 1.5; margin: 0 0 26px; color: #E7E9EC; }
.hhero__cta {
  display: inline-flex; align-items: center; justify-content: center;
  width: 165px; height: 46px; border-radius: 5px;
  background: var(--c-yellow); color: var(--c-black); font-size: 12px; font-weight: 600;
}
.hhero__cta:hover { background: var(--c-yellow-2); color: var(--c-black); }
.hhero__tire { width: 270px; height: 270px; display: flex; align-items: center; justify-content: center; }
.hhero__tire img { width: 100%; height: 100%; object-fit: contain; }
.hhero__benefits { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.hhero__benefits li { font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 9px; color: #fff; }
.hhero__icon { color: var(--c-yellow); }

/* ---------------- карточка подбора ---------------- */
.hpc {
  background: #fff;
  border: 1px solid #E1E4E8;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 34px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .05);
}
.hpc__types { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.hpc-type {
  display: flex; align-items: center; gap: 14px; text-align: left;
  min-height: 62px; padding: 10px 18px;
  background: #F6F7F9; border: 1px solid #E1E4E8; border-radius: 10px;
  cursor: pointer; font-family: var(--font); color: var(--c-text);
}
.hpc-type:hover { border-color: #cfd4da; }
.hpc-type.is-active { background: #FFF8E8; border-color: #E6CF88; }
.hpc-type__ic { flex: none; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; color: #17191C; }
.hpc-type__txt b { display: block; font-size: 15px; font-weight: 700; }
.hpc-type__txt i { display: block; font-style: normal; font-size: 9px; color: #737A84; margin-top: 2px; font-weight: 500; }

.hpc__modes { display: flex; gap: 8px; margin: 16px 0; }
.hpc-mode {
  height: 38px; padding: 0 22px; border-radius: 7px;
  background: #F6F7F9; border: 1px solid #E1E4E8;
  font-size: 11px; font-weight: 600; color: #737A84; cursor: pointer; font-family: var(--font);
}
.hpc-mode:hover { border-color: #cfd4da; }
.hpc-mode.is-active { background: #15171A; color: #fff; border-color: #15171A; }

.hpc__panel[hidden] { display: none !important; }

/* форма «по параметрам» */
.hform { margin: 0; }
.hform__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.45fr); gap: 16px; }
.hform__grid[hidden] { display: none; }
.hfield { min-width: 0; }
.hfield--wide { grid-column: 1 / -1; }
.hfield__label { display: block; font-size: 10px; font-weight: 600; color: #17191C; margin: 0 0 6px; }
.hfield__label--section { font-size: 10px; margin-bottom: 12px; color: #17191C; }
.hform select,
.hform input[type="text"],
.hform input[type="number"] {
  width: 100%; height: 44px; padding: 0 12px;
  background: #FAFBFC; border: 1px solid #E1E4E8; border-radius: 7px;
  font-size: 11px; color: var(--c-text); font-family: var(--font);
}
.hform select:focus,
.hform input:focus { border-color: var(--c-yellow); outline: none; }
.hform select:disabled { opacity: .55; }
.hform__extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.hseason { display: flex; gap: 8px; }
.hseason-item {
  position: relative; flex: 1; min-width: 0; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: #F6F7F9; border: 1px solid #E1E4E8; border-radius: 7px;
  font-size: 10px; font-weight: 500; color: #17191C; cursor: pointer;
}
.hseason-item input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.hseason-item:has(input:checked) { border-color: var(--c-yellow); background: rgba(255, 184, 0, .12); }
.hseason-item:has(input:focus-visible) { outline: 2px solid var(--c-yellow); outline-offset: 1px; }

.hprice { display: grid; grid-template-columns: 1fr 1fr 16px; gap: 8px; align-items: center; }
.hprice__rub { font-size: 12px; font-weight: 600; color: #17191C; }

.hform__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; }
.hform__submit {
  min-width: 360px; height: 48px; padding: 0 24px; border: 1px solid #E3C45C; border-radius: 8px;
  background: var(--c-yellow); color: #17130A; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: var(--font);
}
.hform__submit:hover { background: var(--c-yellow-2); }
.hform__reset { color: #737A84; font-size: 11px; font-weight: 500; }
.hform__reset:hover { color: var(--c-text); }

/* панель «по автомобилю» (компонент car.picker) */
.hpc .car-picker__type { display: none; }
.hpc .car-picker__form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: end; }
.hpc .car-picker .field { margin: 0; min-width: 0; }
.hpc .car-picker .field label { display: block; font-size: 10px; font-weight: 600; color: #17191C; margin: 0 0 6px; letter-spacing: 0; }
.hpc .car-picker select {
  width: 100%; height: 44px; padding: 0 30px 0 12px;
  background: #FAFBFC; border: 1px solid #E1E4E8; border-radius: 7px;
  font-size: 11px; color: var(--c-text); font-family: var(--font);
}
.hpc .car-picker select:focus { border-color: var(--c-yellow); outline: none; }
.hpc .car-picker__form [data-pick-sizes-field] { grid-column: 1 / -1; }
.hpc .car-picker__form [data-pick-sizes-field] label { display: block; font-size: 10px; font-weight: 600; color: #17191C; margin: 0 0 6px; }
.hpc .car-picker__sizes { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; }
.hpc .car-picker__sizes .size-chip { height: 40px; padding: 0 16px; background: #F6F7F9; border: 1px solid #E1E4E8; border-radius: 7px; font-size: 11px; color: var(--c-text); }
.hpc .car-picker__sizes .size-chip.is-active { background: #15171A; border-color: #15171A; color: #fff; }
.hpc .car-picker__submit {
  grid-column: 1 / -1; justify-self: start;
  height: 48px; min-width: 260px; padding: 0 24px; border: none; border-radius: 8px;
  background: var(--c-yellow); color: #17130A; font-size: 14px; font-weight: 600; cursor: pointer; font-family: var(--font);
}
.hpc .car-picker__submit:hover:not(:disabled) { background: var(--c-yellow-2); }
.hpc .car-picker__submit:disabled { opacity: .5; cursor: not-allowed; }
.hpc .car-picker__hint { font-size: 11px; color: #737A84; margin: 12px 0 0; min-height: 16px; }

/* ---------------- Каталог TIREX ---------------- */
.hcat { margin-bottom: 40px; }
.hcat__head { margin-bottom: 24px; }
.hcat__title { font-size: 30px; font-weight: 700; color: #17191C; margin: 0 0 8px; }
.hcat__sub { font-size: 13px; color: #737A84; margin: 0; max-width: 820px; }
.hcat__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hcat-card {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid #E2E5E9; border-radius: 12px;
  padding: 18px; min-height: 116px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.hcat-card--lg { min-height: 150px; padding: 20px; }
.hcat-card:hover { border-color: var(--c-yellow); box-shadow: 0 10px 26px rgba(6, 9, 10, .06); transform: translateY(-2px); }
.hcat-card__ic { display: block; width: 72px; height: 72px; flex: none; }
.hcat-card__ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hcat-card--lg .hcat-card__ic { width: 88px; height: 88px; }
.hcat-card__title { font-size: 16px; font-weight: 700; color: #17191C; }
.hcat-card--lg .hcat-card__title { font-size: 18px; }
.hcat-card__desc { font-size: 10px; color: #737A84; line-height: 1.45; }
.hcat-card__tags { margin-top: auto; font-size: 10px; font-weight: 500; color: #2F6FED; }

/* ---------------- «Всё для вашего автомобиля» ---------------- */
.haute {
  display: grid; grid-template-columns: minmax(0, 1fr) 570px; gap: 32px; align-items: center;
  background: #0A0C0E; border-radius: 12px; padding: 30px 26px; margin-bottom: 40px;
}
.haute__kicker { color: var(--c-yellow); font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.haute__title { color: #fff; font-size: 22px; font-weight: 700; margin: 10px 0 0; max-width: 700px; }
.haute__sub { color: #AEB4BB; font-size: 12px; line-height: 1.5; margin: 14px 0 20px; max-width: 680px; }
.haute__cta {
  display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border: none; border-radius: 6px;
  background: var(--c-yellow); color: #06090A; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--font);
}
.haute__cta:hover { background: var(--c-yellow-2); }
.haute__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.haute__cat {
  display: flex; align-items: center; justify-content: center; height: 56px;
  background: #20242A; border: 1px solid #333941; border-radius: 7px;
  color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; font-family: var(--font);
}
.haute__cat:hover { background: #2a2f36; }

/* ---------------- Шины для бизнеса и техники ---------------- */
.hbiz { margin-bottom: 40px; }
.hbiz__head { margin-bottom: 22px; }
.hbiz__title { font-size: 28px; font-weight: 700; color: #17191C; margin: 0 0 8px; }
.hbiz__sub { font-size: 12px; color: #737A84; margin: 0; max-width: 900px; }
.hbiz__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hbiz-card {
  display: flex; flex-direction: column; gap: 8px;
  background: #fff; border: 1px solid #E2E5E9; border-radius: 12px; padding: 20px; min-height: 154px;
  transition: border-color .15s, box-shadow .15s;
}
.hbiz-card:hover { border-color: var(--c-yellow); box-shadow: 0 8px 22px rgba(6, 9, 10, .06); }
.hbiz-card__ic { display: block; width: 76px; height: 76px; flex: none; }
.hbiz-card__ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hbiz-card__title { font-size: 18px; font-weight: 700; color: #17191C; }
.hbiz-card__desc { font-size: 11px; color: #737A84; line-height: 1.45; }
.hbiz-card__tags { margin-top: auto; font-size: 10px; font-weight: 500; color: #2F6FED; }

/* ---------------- Аккумуляторы / Масла ---------------- */
.hduo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 40px; }
.hduo-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid #E2E5E9; border-radius: 12px;
  padding: 24px; min-height: 220px;
}
.hduo-card__ic {
  position: absolute; right: 24px; top: 50px; width: 120px; height: 120px;
  overflow: hidden;
  background: #FFF7DF; border-radius: 20px; font-size: 52px; color: #17191C;
}
.hduo-card__ic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hduo-card__title { font-size: 24px; font-weight: 700; color: #17191C; margin: 0 0 12px; max-width: 60%; }
.hduo-card__text { font-size: 12px; color: #737A84; margin: 0 0 16px; max-width: 60%; line-height: 1.5; }
.hduo-card__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.hdchip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; background: #F6F7F9; border-radius: 6px; font-size: 9px; font-weight: 500; color: #17191C; }
.hdchip:hover { background: #eef1f4; }
.hduo-card__all { display: inline-block; color: #2F6FED; font-size: 12px; font-weight: 600; }
.hduo-card__all:hover { text-decoration: underline; }

/* ---------------- секции каталога / карточки ---------------- */
.hsec { margin-bottom: 34px; }
.hsec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.hsec__title { font-size: 22px; font-weight: 600; color: #0f0f0f; margin: 0; }
.hsec__all { color: #0F4DB2; font-size: 11px; font-weight: 600; white-space: nowrap; }
.hsec__all:hover { text-decoration: underline; }

.hrow { display: grid; grid-template-columns: 165px repeat(5, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.hintro {
  background: var(--c-black); border-radius: 7px; padding: 18px; color: #fff; border: none;
  display: flex; flex-direction: column; text-align: left; cursor: pointer; font-family: var(--font);
}
.hintro__title { color: var(--c-yellow); font-size: 16px; font-weight: 600; line-height: 1.35; margin: 0 0 18px; }
.hintro__text { font-size: 12px; line-height: 1.55; margin: 0; color: #E7E9EC; }
.hintro__arrow { color: var(--c-yellow); font-size: 28px; font-weight: 600; margin-top: auto; }
.hcard {
  background: #fff; border: 1px solid #EEF1F4; border-radius: 7px; padding: 12px 14px;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
}
.hcard__media, .hmini__media {
  align-self: center; width: 110px; height: 105px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px; flex-shrink: 0;
}
.hcard__media img, .hmini__media img { width: 62%; height: 72%; object-fit: contain; }
.hcard__name, .hmini__name { color: var(--c-black); font-size: 12px; font-weight: 600; line-height: 1.35; }
.hcard__name:hover, .hmini__name:hover { color: #0F4DB2; }
.hcard__size { color: var(--c-faint); font-size: 10px; margin-top: 4px; }
.hcard__price, .hmini__price { color: #0f0f0f; font-size: 15px; font-weight: 600; margin-top: 6px; }
.hmini__price { font-size: 13px; margin-top: auto; }
.hcard__stock, .hmini__stock { color: var(--c-ok); font-size: 9px; margin-top: 8px; }
.hcard__stock .is-out, .hmini__stock .is-out { color: var(--c-red); }
.hcard__body, .hmini__body { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* ---------------- популярные модели ---------------- */
.hchips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.hchip {
  width: 164px; height: 42px; display: inline-flex; align-items: center; padding: 0 16px;
  background: #fff; border: 1px solid #EEF1F4; border-radius: 5px;
  color: #0f0f0f; font-size: 10px; font-weight: 600; white-space: nowrap;
  box-shadow: var(--shadow-sm);
}
.hchip:hover { border-color: var(--c-yellow); }
.hchip.is-active { background: var(--c-yellow); border-color: var(--c-yellow); }
.hprow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hmini {
  background: #fff; border: 1px solid #EEF1F4; border-radius: 6px; padding: 14px 10px;
  display: flex; gap: 10px; box-shadow: var(--shadow-sm);
}
.hmini__media { width: 70px; height: 90px; align-self: flex-start; margin: 0; }
.hmini__name { font-size: 11px; }

/* ---------------- популярные бренды ---------------- */
.hbrands { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.hbrand {
  height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px;
  background: #fff; border: 1px solid #EEF1F4; border-radius: 3px;
  color: #141a21; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden;
}
.hbrand:hover { border-color: var(--c-yellow); }
.hbrand--static { cursor: default; color: #a8aeb5; }

/* ---------------- полоса преимуществ ---------------- */
.hadv { background: var(--c-black); border-radius: 8px; padding: 18px 24px; margin-bottom: 34px; }
.hadv__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.hadv__t { color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.hadv__icon { color: var(--c-yellow); }
.hadv__d { color: #ccc; font-size: 9px; margin-top: 5px; padding-left: 24px; }

/* ---------------- новости и акции ---------------- */
.hnews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.hnews-card {
  position: relative; background: #fff; border: 1px solid #EEF1F4; border-radius: 5px; overflow: hidden;
  display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
}
.hnews-card__photo { display: block; height: 75px; background: #1f2124; }
.hnews-card__photo--1 { background: #26292b; }
.hnews-card__photo--2 { background: #2e3033; }
.hnews-card__photo--3 { background: #36383b; }
.hnews-card__badge {
  position: absolute; left: 12px; top: 10px; min-width: 60px; height: 24px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; font-size: 9px; font-weight: 600;
}
.hnews-card__badge--sale { background: var(--c-yellow); color: var(--c-black); }
.hnews-card__badge--new { background: #0D59BF; color: #fff; }
.hnews-card__title { padding: 14px; color: var(--c-black); font-size: 12px; font-weight: 600; line-height: 1.45; }

/* ---------------- город ---------------- */
.hcity {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center;
  background: #111417; border-radius: 12px; padding: 26px 24px; margin-bottom: 40px;
}
.hcity__kicker { color: var(--c-yellow); font-size: 10px; font-weight: 600; letter-spacing: .04em; }
.hcity__title { color: #fff; font-size: 23px; font-weight: 700; margin: 10px 0 0; }
.hcity__sub { color: #AEB4BB; font-size: 12px; margin: 12px 0 0; }
.hcity__side { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.hcity__select {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: 340px; height: 48px; padding: 0 18px;
  background: #20242A; border: 1px solid #333941; border-radius: 7px;
  color: #fff; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--font);
}
.hcity__select:hover { background: #2a2f36; }
.hcity__link { color: var(--c-yellow); font-size: 10px; font-weight: 600; }

/* ---------------- помощь с выбором ---------------- */
.hfaq { margin-bottom: 40px; }
.hfaq__head { margin-bottom: 20px; }
.hfaq__title { font-size: 28px; font-weight: 700; color: #17191C; margin: 0 0 8px; }
.hfaq__sub { font-size: 12px; color: #737A84; margin: 0; }
.hfaq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.hfaq__item { background: #fff; border: 1px solid #E6E9ED; border-radius: 6px; }
.hfaq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px; font-size: 13px; font-weight: 600; color: #17191C;
}
.hfaq__item summary::-webkit-details-marker { display: none; }
.hfaq__item summary::after { content: '+'; font-size: 16px; font-weight: 600; color: #737A84; line-height: 1; }
.hfaq__item[open] summary::after { content: '−'; }
.hfaq__body { padding: 0 18px 18px; font-size: 12px; color: #5b6470; line-height: 1.6; }

/* ---------------- SEO-блок ---------------- */
.hseo { background: #FAFBFC; border: 1px solid #E2E5E9; border-radius: 10px; padding: 20px; }
.hseo__title { font-size: 16px; font-weight: 700; color: #17191C; margin: 0 0 10px; }
.hseo__text { font-size: 11px; color: #737A84; line-height: 1.65; margin: 0; max-width: 1338px; }

/* ---------------- адаптив ---------------- */
@media (max-width: 1200px) {
  .hhero { grid-template-columns: minmax(0, 1fr) auto; }
  .hhero__benefits { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 16px; }
  .hcat__grid { grid-template-columns: repeat(3, 1fr); }
  .hbrands { grid-template-columns: repeat(5, 1fr); }
  .hprow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hprow .hmini:nth-child(n + 4) { display: none; }
  .hrow { grid-template-columns: 165px repeat(3, minmax(0, 1fr)); }
  .hrow .hcard:nth-child(n + 5) { display: none; }
}

@media (max-width: 1024px) {
  .haute { grid-template-columns: 1fr; gap: 22px; }
  .haute__cats { max-width: 570px; }
  .hbiz__grid { grid-template-columns: 1fr; }
  .hduo { grid-template-columns: 1fr; }
  .hcat__grid { grid-template-columns: repeat(2, 1fr); }
  .hrow { display: flex; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
  .hrow > * { flex: 0 0 166px; }
  .hrow .hintro { flex-basis: 200px; }
  .hprow { display: flex; overflow-x: auto; padding-bottom: 8px; }
  .hprow .hmini { flex: 0 0 200px; }
  .hprow .hmini:nth-child(n + 4) { display: flex; }
  .hbrands { grid-template-columns: repeat(4, 1fr); }
  .hnews { grid-template-columns: 1fr 1fr; }
  .hadv__grid { grid-template-columns: 1fr 1fr; }
  .hhero { padding: 28px; }
  .hhero__tire { width: 200px; height: 200px; }
  .hcity { grid-template-columns: 1fr; gap: 18px; }
  .hcity__side { align-items: stretch; }
  .hcity__select { min-width: 0; width: 100%; }
  .hfaq__grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .home { padding-top: 12px; }
  .hhero { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 18px; min-height: 0; }
  .hhero__kicker { display: block; margin-bottom: 10px; }
  .hhero__title { font-size: 26px; }
  .hhero__title span { font-size: 30px; }
  .hhero__sub { font-size: 13px; margin-bottom: 20px; }
  .hhero__tire { width: 170px; height: 170px; justify-self: center; order: -1; }
  .hhero__benefits { display: none; }

  .hpc { padding: 14px; border-radius: 12px; }
  .hpc__types { gap: 10px; }
  .hpc-type { min-height: 54px; padding: 8px 12px; gap: 10px; }
  .hpc-type__ic { width: 28px; height: 28px; font-size: 20px; }
  .hpc-type__txt b { font-size: 13px; }
  .hpc-type__txt i { display: none; }
  .hform__grid { grid-template-columns: 1fr 1fr; }
  .hform__extra { grid-template-columns: 1fr; }
  .hfield--season { grid-column: 1 / -1; }
  .hform__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .hform__submit { min-width: 0; width: 100%; }
  .hform__reset { text-align: center; }
  .hpc .car-picker__form { grid-template-columns: 1fr 1fr; }
  .hpc .car-picker__submit { min-width: 0; width: 100%; }

  .hcat__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .hcat-card, .hcat-card--lg { min-height: 0; padding: 14px; }
  .hcat-card__ic, .hcat-card--lg .hcat-card__ic { width: 56px; height: 56px; }
  .hcat-card--lg .hcat-card__title { font-size: 15px; }
  .hcat-card__title { font-size: 14px; }
  .hcat-card__tags { font-size: 9px; }
  .hcat__title { font-size: 24px; }
  .haute { padding: 22px 18px; }
  .haute__title { font-size: 22px; }
  .hbiz__title, .hfaq__title { font-size: 22px; }
  .hduo-card { min-height: 0; }
  .hduo-card__title, .hduo-card__text { max-width: 70%; }
  .hduo-card__ic { width: 72px; height: 72px; font-size: 32px; right: 18px; top: 24px; }
  .hchips { gap: 8px; }
  .hchip { width: auto; flex: 1 1 45%; }
  .hbrands { grid-template-columns: repeat(3, 1fr); }
  .hnews { grid-template-columns: 1fr; }
  .hadv__grid { grid-template-columns: 1fr; }
  .hsec__title { font-size: 19px; }
  .hcity { padding: 22px 18px; }
  .hcity__title { font-size: 19px; }
}

/* ============================================================================
   КАТАЛОГ → ДИСКИ (макет «Диски»)
   ========================================================================== */
#car-picker { scroll-margin-top: 90px; }

/* --- верхняя карточка «Подбор дисков» --- */
.wcat {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 10px;
  padding: 20px 24px 24px; margin: 0 0 28px;
}
.wcat__title { font-size: 20px; font-weight: 600; color: var(--c-text); margin: 0 0 4px; }
.wcat__sub { font-size: 12px; color: var(--c-faint); margin: 0 0 16px; }
.wcat__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.wcat__panel { border-radius: 8px; padding: 18px 22px 14px; display: flex; flex-direction: column; }
.wcat__panel--car { background: var(--c-yellow); }
.wcat__panel--params { background: #fbfbfc; border: 1px solid #dbdee3; }
.wcat__panel-title { font-size: 18px; font-weight: 600; margin: 0 0 4px; color: var(--c-text); }
.wcat__panel-sub { font-size: 12px; margin: 0 0 14px; color: #2e2e2e; }
.wcat__panel--params .wcat__panel-sub { color: var(--c-faint); }
.wcat__panel--car .car-picker { flex: 1; }
.wcat__panel--car .car-picker__form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.wcat__panel--car .car-picker .field label { display: block; font-size: 10px; color: #06090a; margin: 0 0 5px; font-weight: 600; }
.wcat__panel--car .car-picker__submit { grid-column: 1 / -1; width: auto; justify-self: end; }
.wcat__panel--car .car-picker .field select {
  width: 100%; height: 38px; padding: 0 30px 0 12px;
  background: #fff; border: none; border-radius: 5px;
  appearance: none; font-size: 11px; color: var(--c-text);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23737a85' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.wcat__panel--car .car-picker__sizes { display: flex; flex-wrap: wrap; gap: 7px; min-height: 32px; }
.wcat__panel--car .car-picker__sizes .size-chip { background: #fff; border: none; color: var(--c-text); }
.wcat__panel--car .car-picker__sizes .size-chip.is-active { background: #06090a; color: #fff; }
.wcat__panel--car .car-picker .btn--dark { background: #06090a; color: #fff; height: 38px; }
.wcat__panel--car .car-picker .btn--dark:hover:not(:disabled) { background: #14191e; }
.wcat__panel--car .car-picker__hint { font-size: 9px; color: #2e2e2e; margin: 10px 0 0; }
.wcat__params { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.wcat__params select {
  width: 100%; height: 38px; padding: 0 28px 0 12px;
  background: #fff; border: 1px solid #dbdee3; border-radius: 5px;
  appearance: none; font-size: 11px; font-weight: 600; color: var(--c-text); font-family: var(--font);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23737a85' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.wcat__params select:focus { border-color: var(--c-yellow); outline: none; }
.wcat__params-submit { grid-column: 1 / -1; width: auto; justify-self: end; height: 38px; padding: 0 24px; font-size: 11px; }
.wcat__note { font-size: 9px; color: var(--c-faint); margin: 10px 0 0; }
.wcat__panel--car .wcat__panel--car-note,
.wcat__panel--car .car-picker__hint { color: #2e2e2e; }

/* --- сайдбар фильтров (диски) --- */
.filter--wheels { padding: 18px; align-self: start; }
.filter--wheels .filter__head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 10px; }
.filter--wheels .filter__title { font-size: 18px; font-weight: 600; margin: 0; color: var(--c-text); }
.filter--wheels .filter__reset-link { font-size: 10px; color: var(--c-link-2); }
.filter--wheels .filter-group { border-bottom: none; padding: 0 0 4px; }
.filter--wheels .filter-group__head { cursor: default; font-size: 12px; font-weight: 600; padding: 8px 0 6px; }
.filter--wheels .filter-group__head::after { content: none; }
.filter--wheels .field select,
.filter--wheels .field input[type="text"] {
  width: 100%; height: 38px; padding: 0 30px 0 12px;
  background: #f9fafb; border: 1px solid #dbdee3; border-radius: 5px;
  appearance: none; font-size: 11px; color: var(--c-text); font-family: var(--font);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23737a85' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.filter--wheels .field select:focus { border-color: var(--c-yellow); outline: none; }
.filter-check { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; color: var(--c-text); cursor: pointer; padding: 6px 0; }
.filter-check input { accent-color: var(--c-yellow); width: 15px; height: 15px; }
.filter--wheels .filter-range { display: flex; gap: 8px; align-items: center; }
.filter--wheels .filter-range input {
  width: 100%; height: 34px; padding: 0 10px;
  background: #f9fafb; border: 1px solid #dbdee3; border-radius: 5px; font-size: 11px;
}
.filter-actions--single { margin-top: 14px; }
.filter-actions--single .btn { width: 100%; height: 46px; }
.btn--ink { background: var(--c-black); color: #fff; }
.btn--ink:hover:not(:disabled) { background: #14191e; color: #fff; }

/* --- заголовок выдачи --- */
.whead { display: flex; flex-direction: column; gap: 12px; margin: 0 0 14px; }
.whead__title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.whead__title { font-size: 22px; font-weight: 600; margin: 0; color: var(--c-text); }
.whead__count { font-size: 11px; color: var(--c-faint); }
.whead__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wchip {
  display: inline-flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 14px;
  background: var(--c-panel); border: 1px solid #dbdee3; border-radius: 15px;
  font-size: 10px; font-weight: 600; color: var(--c-text);
}
.wchip span { color: var(--c-faint); font-weight: 400; }
.wchip:hover { border-color: var(--c-yellow); }
.whead__controls { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.whead__controls .catalog-filter-btn { display: none; }
.whead__controls .sort { margin-left: auto; }
.view-toggle { display: inline-flex; border: 1px solid #dbdee3; border-radius: 5px; overflow: hidden; background: var(--c-panel); }
.view-toggle__btn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--c-muted); cursor: pointer;
}
.view-toggle__btn.is-active { background: #f0f2f5; color: var(--c-text); }

/* --- жёлтый баннер совместимости --- */
.wbanner {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  background: #fcf9de; border-radius: 7px; padding: 14px 18px; margin: 0 0 18px;
}
.wbanner__text { display: flex; flex-direction: column; gap: 4px; }
.wbanner__text strong { font-size: 12px; color: var(--c-text); }
.wbanner__text span { font-size: 10px; color: var(--c-faint); }

/* --- карточка диска --- */
.product-grid--wheel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card--wheel { padding: 14px 14px 14px; gap: 0; }
.card--wheel .card__top { display: flex; align-items: flex-start; justify-content: space-between; min-height: 24px; }
.card--wheel .card__badges { position: static; }
.card__fav {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-panel);
  font-size: 14px; line-height: 1; color: var(--c-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.card__fav:hover { border-color: var(--c-yellow); }
.card__fav.is-active { color: #e0245e; border-color: #e0245e; }
.card--wheel .card__media { margin: 6px auto 10px; width: 176px; max-width: 100%; aspect-ratio: 176 / 128; border-radius: 64px; }
.card--wheel .card__title { font-size: 13px; font-weight: 600; margin: 2px 0 4px; color: var(--c-text); }
.card--wheel .card__size { font-size: 10px; color: var(--c-faint); }
.card--wheel .card__stock { font-size: 9px; margin: 6px 0 10px; }
.card--wheel .card__stock .is-ok { color: var(--c-ok); }
.card--wheel .card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.card--wheel .card__price { font-size: 15px; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.card--wheel .card__price em { font-style: normal; font-weight: 400; font-size: 11px; color: var(--c-muted); }
.card--wheel .btn--ink { height: 38px; padding: 0 18px; font-size: 10px; }
.card--wheel .card__foot-btns { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.card--wheel .card__foot .btn--outline { height: 38px; padding: 0 14px; font-size: 10px; }

/* --- вид «список» --- */
.product-grid--wheel.is-list { grid-template-columns: 1fr; gap: 12px; }
.product-grid--wheel.is-list .card--wheel {
  display: grid; grid-template-columns: 24px 190px 1fr auto; align-items: center; gap: 14px;
}
.product-grid--wheel.is-list .card__top { display: contents; }
.product-grid--wheel.is-list .card__badges { order: 0; }
.product-grid--wheel.is-list .card__fav { order: 3; }
.product-grid--wheel.is-list .card__media { width: 150px; margin: 0; }
.product-grid--wheel.is-list .card__foot { margin: 0; flex-direction: column; align-items: flex-end; gap: 8px; }

/* --- популярные параметры / совместимость --- */
.wextra { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 26px; }
.wextra__popular {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 8px; padding: 18px 20px;
}
.wextra__compat { background: var(--c-black); border-radius: 8px; padding: 20px 22px; color: #fff; }
.wextra__title { font-size: 17px; font-weight: 600; margin: 0 0 12px; }
.wextra__compat .wextra__title { color: #fff; }
.wextra__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.wextra__chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 18px;
  background: #f9fafb; border: 1px solid #dbdee3; border-radius: 18px;
  font-size: 10px; font-weight: 600; color: var(--c-text);
}
.wextra__chip:hover { border-color: var(--c-yellow); }
.wextra__text { font-size: 11px; color: #d9d9d9; margin: 0 0 16px; max-width: 430px; }

@media (max-width: 1100px) {
  .wcat__grid { grid-template-columns: 1fr; }
  .product-grid--wheel { grid-template-columns: repeat(2, 1fr); }
  .wextra { grid-template-columns: 1fr; }
  .wcat__params { grid-template-columns: repeat(3, 1fr); }
  .whead__controls .catalog-filter-btn { display: inline-flex; }
}
@media (max-width: 640px) {
  .product-grid--wheel { grid-template-columns: 1fr 1fr; gap: 10px; }
  .product-grid--wheel.is-list { grid-template-columns: 1fr; }
  .product-grid--wheel.is-list .card--wheel { grid-template-columns: 1fr; }
  .card--wheel .card__foot { flex-wrap: wrap; }
  .card--wheel .card__foot-btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .card--wheel .card__foot .btn { width: 100%; justify-content: center; min-width: 0; padding: 0 8px; }
  .wcat__params { grid-template-columns: 1fr 1fr; }
  .wcat__panel--car .car-picker__form { grid-template-columns: 1fr; }
  .wbanner { flex-direction: column; align-items: flex-start; }
  .whead__controls { justify-content: flex-start; }
}

/* --- подбор дисков по автомобилю (/catalog/wheels/podbor/) --- */
.badge--fit { background: rgba(62, 207, 142, .16); color: var(--c-ok); }
.pw-head { margin: 22px 0 18px; }
.pw-head h1 { font-size: 30px; font-weight: 600; margin: 0 0 8px; }
.pw-head p { font-size: 13px; color: var(--c-muted); margin: 0; max-width: 720px; }

.pw-card {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 10px;
  padding: 24px 28px 26px; margin-bottom: 34px;
}
.pw-card__head h2 { font-size: 21px; font-weight: 600; margin: 0 0 4px; }
.pw-card__head span { font-size: 12px; color: var(--c-muted); }
.pw-chips { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0 22px; }
.pw-chip {
  display: inline-flex; align-items: center; height: 40px; padding: 0 20px;
  background: var(--c-panel-2); border: 1px solid var(--c-line); border-radius: 20px;
  font-size: 11px; font-weight: 600; color: var(--c-muted);
}
.pw-chip.is-active { background: var(--c-yellow); border-color: var(--c-yellow); color: var(--c-onyx); }
.pw-selects { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pw-field label { display: block; font-size: 11px; font-weight: 600; margin: 0 0 6px; }
.pw-field select {
  width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--c-line-2);
  border-radius: 6px; background: var(--c-panel); font-size: 12px; color: var(--c-text);
}
.pw-field select:disabled { background: var(--c-panel-2); color: var(--c-faint); }
.pw-summary {
  display: flex; align-items: center; gap: 16px; margin-top: 22px;
  background: var(--c-panel-2); border-radius: 8px; padding: 18px 20px;
}
.pw-summary.is-hidden { display: none; }
.pw-summary__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pw-summary__text strong { font-size: 17px; font-weight: 600; }
.pw-summary__text span { font-size: 11px; color: var(--c-muted); }
.pw-summary__text small { font-size: 10px; color: var(--c-faint); }

.pw-sizes { margin-bottom: 34px; }
.pw-sizes h2 { font-size: 23px; font-weight: 600; margin: 0 0 6px; }
.pw-sizes > p { font-size: 12px; color: var(--c-muted); margin: 0 0 16px; }
.pw-sizes__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pw-size-card {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 8px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.pw-size-card--base { background: #fffbde; border-color: var(--c-yellow); }
.pw-size-card strong { font-size: 22px; font-weight: 600; }
.pw-size-card span { font-size: 12px; font-weight: 600; white-space: pre-wrap; }
.pw-size-card em { font-style: normal; font-size: 11px; color: var(--c-muted); white-space: pre-wrap; }
.pw-size-card b { font-size: 10px; font-weight: 600; }
.pw-size-card b.is-base { color: var(--c-ok); }
.pw-size-card b.is-allowed, .pw-size-card b.is-optional { color: var(--c-link-2); }

.pw-layout { display: grid; grid-template-columns: 288px 1fr; gap: 24px; align-items: start; }
.pw-side {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 9px; padding: 18px;
}
.pw-side h3 { font-size: 17px; font-weight: 600; margin: 0 0 14px; }
.pw-side__group { margin-bottom: 18px; }
.pw-side__group h4 { font-size: 12px; font-weight: 600; margin: 0 0 10px; }
.pw-check {
  display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--c-text);
  padding: 4px 0; cursor: pointer;
}
.pw-check input { accent-color: var(--c-link-2); width: 14px; height: 14px; }
.pw-side__actions { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.pw-apply { height: 38px; padding: 0 20px; font-size: 12px; }
.pw-reset {
  width: 100%; height: 38px; border: 0; border-radius: 6px; background: var(--c-panel-2);
  font-size: 12px; font-weight: 600; color: var(--c-text); cursor: pointer;
}
.pw-reset:hover { background: var(--c-panel-3); }

.pw-content__head h2 { font-size: 23px; font-weight: 600; margin: 0 0 4px; }
.pw-content__head p { font-size: 11px; color: var(--c-muted); margin: 0 0 14px; }
.pw-banner {
  background: #ebfbf0; border-radius: 7px; padding: 12px 18px; margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 3px;
}
.pw-banner strong { font-size: 12px; color: var(--c-ok); }
.pw-banner span { font-size: 10px; color: var(--c-muted); }
.pw-content .product-grid { margin-bottom: 22px; }

.pw-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 30px 0 40px; }
.pw-bottom--single { grid-template-columns: 1fr; }
.pw-bottom__card {
  background: var(--c-panel); border: 1px solid var(--c-line); border-radius: 8px;
  padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.pw-bottom__card strong { font-size: 17px; font-weight: 600; }
.pw-bottom__card span { font-size: 11px; color: var(--c-muted); }
.pw-bottom__card b { font-size: 10px; font-weight: 600; color: var(--c-ok); }
.pw-bottom__card .btn { margin-top: 8px; }
.pw-bottom__card--dark { background: var(--c-black); border-color: var(--c-black); color: #fff; }
.pw-bottom__card--dark span { color: #ccd1d6; }

@media (max-width: 1100px) {
  .pw-selects { grid-template-columns: 1fr 1fr; }
  .pw-sizes__row { grid-template-columns: 1fr 1fr; }
  .pw-layout { grid-template-columns: 1fr; }
  .pw-side { position: static; }
}
@media (max-width: 640px) {
  .pw-head h1 { font-size: 24px; }
  .pw-selects, .pw-sizes__row, .pw-bottom { grid-template-columns: 1fr; }
  .pw-summary { flex-direction: column; align-items: stretch; }
  .pw-summary .btn { width: 100%; }
  .pw-chips { gap: 8px; }
  .pw-chip { padding: 0 14px; height: 36px; }
}

/* -------- новости и акции: адаптив -------- */
@media (max-width: 1100px) {
  .nw-grid { grid-template-columns: 1fr 1fr; }
  .nw-hero__deco { right: -60px; opacity: .5; }
}
@media (max-width: 640px) {
  .nw-head h1 { font-size: 24px; }
  .nw-grid { grid-template-columns: 1fr; }
  .nw-hero { padding: 22px; }
  .nw-hero__title { font-size: 22px; }
  .nw-hero__deco { display: none; }
  .nw-sub { flex-direction: column; align-items: stretch; gap: 16px; }
  .nw-sub__form { flex-direction: column; }
  .nw-sub__btn { width: 100%; }
}


/* -------- детальная новость (nd-*) -------- */
.nd-head { margin: 20px 0 22px; }
.nd-head .nw-badge { margin-bottom: 12px; }
.nd-head h1 { font-size: 38px; font-weight: 600; line-height: 1.15; margin: 0 0 12px; max-width: 1000px; }
.nd-meta { font-size: 11px; color: #6E7580; }

.nd-hero { position: relative; overflow: hidden; background: #08090A; border-radius: 12px; padding: 46px; margin-bottom: 26px; min-height: 420px; display: flex; flex-direction: column; justify-content: center; }
.nd-hero__deco { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); width: 350px; height: 350px; border-radius: 50%; background: #1F2124; border: 38px solid #666B70; pointer-events: none; }
.nd-hero__kicker { position: relative; font-size: 25px; font-weight: 600; color: #fff; }
.nd-hero__accent { position: relative; font-size: 38px; font-weight: 600; color: var(--c-yellow); margin-top: 8px; }
.nd-hero__text { position: relative; font-size: 15px; color: #fff; margin-top: 18px; }

.nd-layout { display: grid; grid-template-columns: 1fr 382px; gap: 30px; align-items: start; margin-bottom: 30px; }
.nd-card { background: #fff; border: 1px solid #EDF0F2; border-radius: 10px; padding: 34px 36px; }
.nd-card h2 { font-size: 20px; font-weight: 600; margin: 26px 0 12px; }
.nd-card h2:first-child { margin-top: 0; }
.nd-card p { font-size: 14px; line-height: 1.65; color: var(--c-text); margin: 0 0 14px; }
.nd-card p.is-lead { font-size: 14px; color: var(--c-text); }
.nd-list { margin: 0 0 16px; padding-left: 20px; font-size: 13px; line-height: 1.7; color: var(--c-text); }
.nd-list li { margin-bottom: 6px; }
.nd-callout { background: #FFFAE0; border-radius: 7px; padding: 16px 18px; margin: 6px 0 20px; display: flex; flex-direction: column; gap: 6px; }
.nd-callout strong { font-size: 12px; font-weight: 600; }
.nd-callout span { font-size: 11px; color: #2f3338; line-height: 1.5; }
.nd-cta { margin-top: 6px; }
.nd-share { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 28px; font-size: 10px; color: #6E7580; }
.nd-share a, .nd-share button { font-size: 10px; font-weight: 600; color: #0D52BF; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.nd-share a:hover, .nd-share button:hover { text-decoration: underline; }

.nd-side { background: #fff; border: 1px solid #EDF0F2; border-radius: 10px; padding: 24px; }
.nd-side h2 { font-size: 18px; font-weight: 600; margin: 0 0 18px; }
.nd-facts { margin: 0 0 22px; display: flex; flex-direction: column; gap: 14px; }
.nd-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.nd-fact dt { font-size: 10px; color: #6E7580; }
.nd-fact dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; }
.nd-side__btn { width: 100%; height: 48px; }

.nd-block { margin-bottom: 34px; }
.nd-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.nd-block__head h2 { font-size: 24px; font-weight: 600; margin: 0; }
.nd-more { font-size: 11px; font-weight: 600; color: #0D52BF; }

.nd-prods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.nd-prod { position: relative; background: #fff; border: 1px solid #EBEDF1; border-radius: 8px; padding: 18px; display: grid; grid-template-columns: 110px 1fr; grid-template-areas: "media title" "media size" "media stock" "foot foot" "note note"; gap: 4px 17px; }
.nd-prod__media { grid-area: media; width: 110px; height: 110px; border-radius: 50%; background: #F2F4F5; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.nd-prod__media img { width: 70px; height: 70px; object-fit: contain; }
.nd-prod__badge { position: absolute; right: 18px; top: 18px; height: 25px; padding: 0 10px; display: inline-flex; align-items: center; border-radius: 4px; background: var(--c-yellow); font-size: 9px; font-weight: 600; }
.nd-prod__title { grid-area: title; align-self: end; font-size: 13px; font-weight: 600; color: var(--c-text); line-height: 1.3; }
.nd-prod__size { grid-area: size; font-size: 10px; color: #6E7580; }
.nd-prod__stock { grid-area: stock; font-size: 9px; }
.nd-prod__stock.is-ok { color: #149E4D; }
.nd-prod__stock.is-out { color: #6E7580; }
.nd-prod__foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.nd-prod__price { font-size: 18px; font-weight: 600; }
.nd-prod__note { grid-area: note; font-size: 8px; color: #6E7580; margin: 10px 0 0; }

.nd-other { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.nd-other__card { display: grid; grid-template-columns: 125px 1fr; background: #fff; border: 1px solid #EBEDF1; border-radius: 8px; overflow: hidden; }
.nd-other__thumb { display: flex; align-items: center; justify-content: center; height: 125px; background: #14171A; color: #8C8F94; font-size: 40px; }
.nd-other__card:nth-child(2) .nd-other__thumb { background: #1C1D1F; }
.nd-other__card:nth-child(3) .nd-other__thumb { background: #242424; }
.nd-other__body { padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.nd-other__body strong { font-size: 14px; font-weight: 600; color: var(--c-text); line-height: 1.3; }
.nd-other__body span { font-size: 10px; color: #6E7580; flex: 1; }
.nd-other__body b { font-size: 10px; color: #0D52BF; }
.nd-other__card:hover strong { color: #0D52BF; }

@media (max-width: 1100px) {
  .nd-head h1 { font-size: 30px; }
  .nd-layout { grid-template-columns: 1fr; }
  .nd-hero__deco { right: -80px; opacity: .5; }
  .nd-prods { grid-template-columns: 1fr 1fr; }
  .nd-other { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nd-head h1 { font-size: 26px; }
  .nd-hero { padding: 24px; min-height: 0; }
  .nd-hero__kicker { font-size: 18px; }
  .nd-hero__accent { font-size: 26px; }
  .nd-hero__deco { display: none; }
  .nd-card { padding: 22px; }
  .nd-prods { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ (О компании, Гарантия, Доставка, Контакты, Помощь,
   Бренды) — общие и частные классы (pg-, ab-, wr-, dv-, cn-, hp-, br-, bd-)
   ========================================================================== */

/* -------- общие примитивы страниц (pg-*) -------- */
.pg-title { font-size: 26px; font-weight: 600; color: #08090A; margin: 38px 0 18px; }
.pg-title:first-child { margin-top: 0; }
.pg-grid { display: grid; gap: 16px; }
.pg-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pg-grid--3 { grid-template-columns: repeat(3, 1fr); }
.pg-grid--4 { grid-template-columns: repeat(4, 1fr); }
.pg-card { background: #fff; border: 1px solid #E8EBF0; border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.pg-card h3 { font-size: 15px; font-weight: 600; margin: 0; color: #08090A; }
.pg-card p { font-size: 11px; color: #6E7580; margin: 0; line-height: 1.5; }
.pg-card--link { transition: border-color .15s, box-shadow .15s, transform .15s; }
.pg-card--link:hover { border-color: #FFB800; box-shadow: 0 8px 22px rgba(6, 9, 10, .06); transform: translateY(-2px); }

/* нумерованные шаги */
.pg-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pg-step { background: #fff; border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.pg-step strong { font-size: 13px; font-weight: 600; color: #08090A; }
.pg-step span { font-size: 10px; color: #6E7580; line-height: 1.5; }
.pg-step .pg-step__num { color: #FFB800; font-size: 22px; font-weight: 700; line-height: 1.1; }

/* тёмный CTA-блок */
.pg-dark { background: #08090A; border-radius: 10px; padding: 34px; color: #fff; }
.pg-dark h2 { color: #fff; font-size: 23px; font-weight: 600; margin: 0 0 14px; }
.pg-dark p { color: #C7C9CF; font-size: 11px; line-height: 1.6; margin: 0; max-width: 800px; }
.pg-dark__btn { margin-top: 22px; height: 48px; padding: 0 30px; font-size: 12px; }

/* серый инфо-блок */
.pg-note { background: #F5F7FA; border-radius: 8px; padding: 24px 26px; }
.pg-note h2 { font-size: 17px; font-weight: 600; margin: 0 0 12px; color: #08090A; }
.pg-note p { font-size: 11px; color: #6E7580; line-height: 1.6; margin: 0; max-width: 1050px; }

/* FAQ-аккордеон (details/summary) */
.pg-faq { display: flex; flex-direction: column; gap: 12px; max-width: 950px; }
.pg-faq details { background: #fff; border-radius: 6px; }
.pg-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px; font-size: 12px; font-weight: 600; color: #08090A; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: "+"; font-size: 17px; font-weight: 600; line-height: 1; }
.pg-faq details[open] summary::after { content: "–"; }
.pg-faq__body { padding: 0 18px 16px; font-size: 12px; color: #6E7580; line-height: 1.65; }

/* -------- О компании (ab-) -------- */
.ab-hero { position: relative; overflow: hidden; background: #08090A; border-radius: 12px; padding: 52px 48px; min-height: 400px; display: flex; flex-direction: column; justify-content: center; margin: 0 0 34px; }
.ab-hero__eyebrow { color: #FFB800; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.ab-hero__title { color: #fff; font-size: 38px; font-weight: 600; line-height: 1.15; margin: 14px 0 0; max-width: 660px; }
.ab-hero__text { color: #C2C4C9; font-size: 12px; line-height: 1.6; max-width: 660px; margin: 22px 0 0; }
.ab-hero__mark { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); color: #FFB800; font-size: 48px; font-weight: 600; letter-spacing: .02em; }
.ab-principles { background: #fff; border-radius: 10px; padding: 30px 34px; margin-top: 26px; }
.ab-principles h2 { font-size: 22px; font-weight: 600; margin: 0 0 24px; }
.ab-principles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-principle h3 { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: #08090A; }
.ab-principle p { font-size: 10px; color: #6E7580; margin: 0; line-height: 1.55; }
.ab-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: #0B0D0E; border-radius: 10px; padding: 30px 34px; margin-top: 26px; }
.ab-stat b { display: block; color: #FFB800; font-size: 28px; font-weight: 600; line-height: 1.1; }
.ab-stat span { display: block; color: #fff; font-size: 10px; margin-top: 8px; }

/* -------- Гарантия и возврат (wr-) -------- */
.wr-sub { font-size: 12px; color: #6E7580; margin: 0 0 26px; }

/* -------- Доставка и оплата (dv-) -------- */
.dv-pay { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.dv-pay b { display: block; color: #FFB800; font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.dv-pay p { color: #C7C9CF; font-size: 10px; margin: 0; line-height: 1.5; }

/* -------- Контакты (cn-) -------- */
.cn-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cn-card { background: #fff; border: 1px solid #E8EBF0; border-radius: 9px; padding: 22px; }
.cn-card dt { font-size: 11px; color: #6E7580; margin-bottom: 14px; }
.cn-card dd { margin: 0; font-size: 18px; font-weight: 600; color: #08090A; }
.cn-card a { font-size: 18px; font-weight: 600; color: #08090A; }
.cn-card a:hover { color: var(--c-yellow-ink); }
.cn-card small { display: block; font-size: 10px; color: #6E7580; margin-top: 14px; }
.cn-map { display: grid; grid-template-columns: 1fr 452px; gap: 18px; margin-top: 18px; }
.cn-map__canvas { position: relative; min-height: 500px; background: #E8EBEC; border-radius: 10px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cn-map__canvas span { font-size: 32px; font-weight: 600; color: #6E7580; letter-spacing: .12em; }
.cn-map__dots { position: absolute; color: #FFB800; font-size: 28px; line-height: 1; letter-spacing: .5em; }
.cn-map__leaflet { height: 520px; border-radius: 10px; overflow: hidden; background: #E8EBEC; position: relative; z-index: 0; isolation: isolate; }
.cn-finder__filters { display: flex; gap: 18px; margin: 2px 0 16px; flex-wrap: wrap; }
.cn-finder__check { display: flex; gap: 8px; align-items: center; font-size: 11px; color: #08090A; cursor: pointer; }
.cn-finder__check input { accent-color: var(--c-yellow); width: 16px; height: 16px; }
.cn-finder__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cn-finder__actions .cn-finder__btn { flex: 1; min-width: 140px; height: 46px; font-size: 11px; }
.cn-points { list-style: none; margin: 18px 0 0; padding: 0; max-height: 280px; overflow: auto; display: flex; flex-direction: column; gap: 10px; }
.cn-point { border: 1px solid #E8EBF0; border-radius: 8px; padding: 12px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cn-point:hover, .cn-point.is-active { border-color: #FFB800; box-shadow: 0 4px 14px rgba(6, 9, 10, .05); }
.cn-point b { display: block; font-size: 12px; font-weight: 600; color: #08090A; }
.cn-point span { display: block; font-size: 10px; color: #6E7580; margin-top: 4px; }
.cn-point small { display: block; font-size: 9px; color: #6E7580; margin-top: 4px; }
.cn-points__empty { font-size: 11px; color: #6E7580; margin: 14px 0 0; }
.cn-badge { display: inline-block; font-size: 9px; font-weight: 600; padding: 3px 9px; border-radius: 10px; background: #FFF3D6; color: #7A5B00; margin-right: 6px; }
.cn-badge--svc { background: #E7F3FF; color: #0B4A80; }
.cn-pin { width: 22px; height: 22px; border-radius: 50%; background: #FFB800; border: 3px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .3); }
.cn-pin--pickup { background: #08090A; border-color: #FFB800; }
.cn-cluster-wrap { background: transparent; }
.cn-cluster { width: 40px; height: 40px; border-radius: 50%; background: #FFB800; color: #08090A; font-weight: 600; font-size: 13px; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.cn-pop b { font-size: 13px; color: #08090A; }
.cn-pop div { font-size: 11px; color: #6E7580; margin-top: 3px; }
.cn-pop a { color: #0D52BF; font-weight: 600; }
.leaflet-popup-content { font-family: inherit; margin: 12px 14px; }
.leaflet-container { font: inherit; }
.cn-finder { background: #fff; border-radius: 10px; padding: 24px; }
.cn-finder h3 { font-size: 18px; font-weight: 600; margin: 0 0 22px; }
.cn-finder .field { margin-bottom: 18px; }
.cn-finder__btn { width: 180px; height: 48px; font-size: 11px; }
.cn-finder__note { font-size: 10px; color: #6E7580; line-height: 1.55; margin: 22px 0 0; }

/* -------- Помощь (hp-) -------- */
.hp-search { background: #08090A; border-radius: 9px; padding: 24px; margin-bottom: 8px; }
.hp-search h2 { color: #fff; font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.hp-search__row { display: flex; gap: 12px; }
.hp-search__input { flex: 1; height: 40px; border: 0; border-radius: 5px; padding: 0 14px; font-size: 12px; }
.hp-search__input::placeholder { color: #6E7580; }
.hp-search__btn { height: 40px; width: 130px; flex: none; font-size: 11px; }
.hp-sections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hp-section { position: relative; background: #fff; border: 1px solid #E8EBF0; border-radius: 8px; padding: 22px; display: block; transition: border-color .15s; }
.hp-section h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: #08090A; }
.hp-section p { font-size: 10px; color: #6E7580; margin: 0; }
.hp-section .hp-section__arrow { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 600; color: #08090A; }
.hp-section:hover { border-color: #FFB800; }
.hp-layout { display: grid; grid-template-columns: 1fr 402px; gap: 24px; align-items: start; }
.hp-layout .pg-faq { max-width: none; }
.hp-support { background: #08090A; border-radius: 9px; padding: 24px; color: #fff; }
.hp-support h3 { color: #fff; font-size: 19px; font-weight: 600; margin: 0 0 14px; }
.hp-support p { color: #C7C9CF; font-size: 10px; line-height: 1.5; margin: 0 0 18px; }
.hp-support b { display: block; color: #FFB800; font-size: 16px; font-weight: 600; }
.hp-support small { display: block; color: #fff; font-size: 9px; margin: 4px 0 22px; }
.hp-support__btn { height: 46px; font-size: 10px; }
.hp-empty { display: none; padding: 22px; background: #fff; border-radius: 8px; font-size: 13px; color: #6E7580; }

/* -------- Бренды: список (br-) -------- */
.br-search { position: relative; max-width: 900px; margin: 0 0 20px; }
.br-search input { width: 100%; height: 54px; border: 1px solid #E8EBF0; background: #fff; border-radius: 6px; padding: 0 18px 0 46px; font-size: 12px; }
.br-search input:focus { outline: none; border-color: #FFB800; }
.br-search svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #6E7580; pointer-events: none; }
.br-chips { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.br-chip { height: 44px; padding: 0 22px; display: inline-flex; align-items: center; border-radius: 5px; background: #fff; border: 1px solid #E8EBF0; font-size: 10px; font-weight: 600; color: #08090A; cursor: pointer; }
.br-chip.is-active { background: #FFB800; border-color: #FFB800; }
.br-abc { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; font-weight: 600; color: #6E7580; margin-bottom: 26px; }
.br-abc a:hover { color: #08090A; }
.br-pop { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.br-card { background: #fff; border: 1px solid #E8EBF0; border-radius: 8px; padding: 22px 20px; display: flex; flex-direction: column; gap: 8px; min-height: 105px; justify-content: center; transition: border-color .15s, box-shadow .15s; }
.br-card b { font-size: 16px; font-weight: 600; color: #08090A; text-transform: uppercase; }
.br-card span { font-size: 10px; color: #6E7580; }
.br-card small { font-size: 9px; color: #6E7580; }
.br-card:hover { border-color: #FFB800; box-shadow: 0 8px 22px rgba(6, 9, 10, .06); }
.br-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.br-group { background: #fff; border: 1px solid #E8EBF0; border-radius: 8px; padding: 20px; }
.br-group h3 { font-size: 22px; font-weight: 600; color: #FFB800; margin: 0 0 14px; }
.br-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.br-group li a { font-size: 11px; font-weight: 600; color: #08090A; }
.br-group li a:hover { color: var(--c-yellow-ink); }
.br-hidden { display: none !important; }
.br-empty { display: none; padding: 24px; background: #fff; border-radius: 8px; font-size: 13px; color: #6E7580; }

/* -------- Бренды: страница бренда (bd-) -------- */
.bd-hero { position: relative; overflow: hidden; background: #08090A; border-radius: 10px; padding: 48px; min-height: 310px; display: flex; flex-direction: column; justify-content: center; margin: 0 0 34px; }
.bd-hero__name { color: #fff; font-size: 34px; font-weight: 600; letter-spacing: .01em; }
.bd-hero__sub { color: #FFB800; font-size: 25px; font-weight: 600; margin-top: 8px; }
.bd-hero__text { color: #C7C9CF; font-size: 11px; line-height: 1.6; max-width: 700px; margin-top: 22px; }
.bd-hero__mark { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); color: #2E3033; font-size: 100px; font-weight: 600; line-height: 1; pointer-events: none; }
.bd-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bd-cat { background: #fff; border: 1px solid #E8EBF0; border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 8px; min-height: 125px; transition: border-color .15s, box-shadow .15s; }
.bd-cat b { font-size: 14px; font-weight: 600; color: #08090A; }
.bd-cat span { font-size: 10px; color: #6E7580; }
.bd-cat:hover { border-color: #FFB800; box-shadow: 0 8px 22px rgba(6, 9, 10, .06); }
.bd-prods { margin: 34px 0; }
.bd-about { background: #fff; border-radius: 9px; padding: 30px 34px; margin-bottom: 26px; }
.bd-about h2 { font-size: 21px; font-weight: 600; margin: 0 0 16px; }
.bd-about p { font-size: 11px; color: #6E7580; line-height: 1.6; margin: 0; max-width: 1050px; }
.bd-cta { background: #08090A; border-radius: 9px; padding: 30px 34px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.bd-cta h2 { color: #fff; font-size: 20px; font-weight: 600; margin: 0 0 8px; }
.bd-cta p { color: #C7C9CF; font-size: 10px; margin: 0; }
.bd-cta__btn { height: 50px; padding: 0 30px; font-size: 11px; flex: none; }

@media (max-width: 1100px) {
  .pg-grid--4, .pg-steps, .dv-pay, .br-pop, .ab-stats { grid-template-columns: repeat(2, 1fr); }
  .pg-grid--3, .ab-principles__grid, .cn-cards, .hp-sections, .br-groups, .bd-cats { grid-template-columns: repeat(2, 1fr); }
  .cn-map { grid-template-columns: 1fr; }
  .cn-map__canvas { min-height: 340px; }
  .hp-layout { grid-template-columns: 1fr; }
  .pg-dark, .bd-cta { padding: 26px; }
  .bd-hero__mark { font-size: 70px; right: -6px; opacity: .55; }
}
@media (max-width: 640px) {
  .pg-grid--2, .pg-grid--3, .pg-grid--4, .pg-steps, .dv-pay, .br-pop,
  .ab-principles__grid, .cn-cards, .hp-sections, .br-groups, .bd-cats { grid-template-columns: 1fr; }
  .ab-hero, .bd-hero { padding: 26px; min-height: 0; }
  .ab-hero__title { font-size: 28px; }
  .ab-hero__mark, .bd-hero__mark { display: none; }
  .bd-hero__name { font-size: 26px; }
  .bd-hero__sub { font-size: 20px; }
  .hp-search__row { flex-direction: column; }
  .hp-search__btn { width: 100%; }
  .cn-finder__btn { width: 100%; }
  .cn-map__leaflet { height: 380px; }
}

/* Страница бренда: 4 товара в строке (по макету), независимо от типа карточки */
.bd-prods .product-grid,
.bd-prods .product-grid--4,
.bd-prods .product-grid--wheel { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .bd-prods .product-grid,
  .bd-prods .product-grid--4,
  .bd-prods .product-grid--wheel { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Состояния и новые страницы: 404, Акции, Юрлицам, пустая корзина,
   ошибка checkout, товар недоступен
   ========================================================================== */

/* -------- 404 (обновление под макет) -------- */
.page-404__code { color: var(--c-yellow); }
.page-404__cats { text-align: left; max-width: 1000px; margin: 8px auto 0; }
.page-404__cats .pg-title { text-align: left; }

/* -------- Акции и скидки (pm-) -------- */
.pm-hero { position: relative; overflow: hidden; background: #08090A; border-radius: 10px; padding: 40px 36px; min-height: 330px; display: flex; flex-direction: column; justify-content: center; margin: 0 0 34px; }
.pm-hero__kicker { color: #FFB800; font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.pm-hero__title { color: #fff; font-size: 30px; font-weight: 600; line-height: 1.15; margin: 14px 0 0; max-width: 820px; }
.pm-hero__text { color: #C7C9CF; font-size: 11px; line-height: 1.6; max-width: 650px; margin: 22px 0 0; }
.pm-hero__btn { margin-top: 28px; height: 48px; padding: 0 30px; font-size: 10px; align-self: flex-start; }
.pm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pm-card { background: #fff; border: 1px solid #E8EBF0; border-radius: 8px; padding: 18px; display: flex; flex-direction: column; transition: border-color .15s, box-shadow .15s, transform .15s; }
.pm-card__media { height: 80px; background: #F2F4F5; border-radius: 5px; display: flex; align-items: center; justify-content: center; color: #FFB800; font-size: 30px; font-weight: 600; margin-bottom: 14px; }
.pm-card h3 { font-size: 15px; font-weight: 600; color: #08090A; margin: 0 0 6px; }
.pm-card p { font-size: 10px; color: #6E7580; margin: 0; line-height: 1.5; }
.pm-card small { font-size: 9px; font-weight: 600; color: #08090A; margin-top: 10px; }
.pm-card:hover { border-color: #FFB800; box-shadow: 0 8px 22px rgba(6, 9, 10, .06); transform: translateY(-2px); }
.pm-news-link { display: inline-block; margin: 24px 0 0; font-size: 12px; font-weight: 600; color: #08090A; }
.pm-news-link:hover { color: var(--c-yellow-ink); }

/* -------- Юрлицам (bl-) -------- */
.bl-hero { position: relative; overflow: hidden; background: #08090A; border-radius: 10px; padding: 48px 38px; min-height: 370px; display: flex; flex-direction: column; justify-content: center; margin: 0 0 34px; }
.bl-hero__kicker { color: #FFB800; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.bl-hero__title { color: #fff; font-size: 34px; font-weight: 600; line-height: 1.15; margin: 18px 0 0; max-width: 720px; }
.bl-hero__text { color: #C7C9CF; font-size: 11px; line-height: 1.6; max-width: 650px; margin: 24px 0 0; }
.bl-hero__btn { margin-top: 30px; height: 50px; padding: 0 34px; font-size: 11px; align-self: flex-start; }
.bl-steps { background: #fff; border-radius: 9px; padding: 30px 34px; }
.bl-steps h2 { font-size: 21px; font-weight: 600; margin: 0 0 26px; }
.bl-steps__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.bl-step__num { color: #FFB800; font-size: 13px; font-weight: 600; }
.bl-step strong { display: block; font-size: 11px; font-weight: 600; color: #08090A; margin-top: 10px; }
.bl-form { background: #08090A; border-radius: 10px; padding: 34px; margin-top: 26px; }
.bl-form h2 { color: #fff; font-size: 21px; font-weight: 600; margin: 0 0 26px; }
.bl-form__row { display: flex; gap: 16px; margin-bottom: 16px; }
.bl-form__field { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bl-form__field label { color: #C7C9CF; font-size: 10px; }
.bl-form__field input { height: 52px; border: 0; border-radius: 5px; padding: 0 14px; font-size: 13px; }
.bl-form__submit { flex: none; width: 260px; height: 52px; font-size: 11px; align-self: flex-end; }
.bl-form__agree { color: #C7C9CF; font-size: 10px; margin: 4px 0 0; display: flex; gap: 8px; align-items: flex-start; }
.bl-form__agree input { margin-top: 2px; accent-color: var(--c-yellow); }
.bl-form__agree a { text-decoration: underline; color: #C7C9CF; }
.bl-form__note { color: #C7C9CF; font-size: 9px; margin: 20px 0 0; }

/* -------- Пустая корзина (ct-empty-*) -------- */
.cart-empty--card { background: #fff; border-radius: 10px; max-width: 1000px; margin: 0 auto; padding: 50px 20px; }
.ct-empty-cats { max-width: 1000px; margin: 8px auto 0; }
.ct-empty-cats .pg-title { text-align: left; }

/* -------- Ошибка checkout (oc-err-*) -------- */
.oc-err { background: #fff; border-radius: 10px; padding: 46px 20px; text-align: center; margin-bottom: 26px; }
.oc-err__icon { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: #FDECEA; color: #D12621; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 600; }
.oc-err h2 { font-size: 24px; font-weight: 600; margin: 0 0 12px; }
.oc-err p { color: #6E7580; font-size: 11px; max-width: 700px; margin: 0 auto 24px; line-height: 1.6; }
.oc-err__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.pg-note--warn { background: #FFF7ED; }

/* -------- Товар недоступен (na-) -------- */
.na-head { margin: 20px 0 18px; }
.na-head h1 { font-size: 28px; font-weight: 600; margin: 0; line-height: 1.2; }
.na-card { display: grid; grid-template-columns: 480px 1fr; gap: 40px; background: #fff; border-radius: 10px; padding: 28px; }
.na-media { background: #F2F4F5; border-radius: 8px; min-height: 330px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.na-media img { max-width: 100%; max-height: 330px; object-fit: contain; padding: 20px; }
.na-media span { font-size: 72px; color: #333638; }
.na-info { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.na-status { color: #D12621; font-size: 19px; font-weight: 600; }
.na-hint { color: #6E7580; font-size: 11px; margin-top: 10px; }
.na-price-label { color: #6E7580; font-size: 9px; margin-top: 30px; }
.na-price { color: #6E7580; font-size: 27px; font-weight: 600; margin-top: 4px; }
.na-note { color: #08090A; font-size: 10px; font-weight: 600; margin-top: 22px; }
.na-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .pm-grid { grid-template-columns: repeat(2, 1fr); }
  .bl-steps__grid { grid-template-columns: repeat(2, 1fr); }
  .na-card { grid-template-columns: 1fr; gap: 22px; }
  .na-media { min-height: 240px; }
}
@media (max-width: 640px) {
  .pm-grid { grid-template-columns: 1fr; }
  .bl-steps__grid { grid-template-columns: 1fr; }
  .bl-form__row { flex-direction: column; }
  .bl-form__submit { width: 100%; align-self: stretch; }
  .pm-hero, .bl-hero { padding: 26px; min-height: 0; }
  .pm-hero__title, .bl-hero__title { font-size: 26px; }
}

/* ==========================================================================
   Личный кабинет клиента (docs/design_личный_кабинет*.md) + авторизация
   ========================================================================== */

/* --- шапка: избранное / сравнение / аккаунт --- */
.hdr__icon-link {
  position: relative; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 6px; color: #fff;
}
.hdr__icon-link:hover { background: #14191e; color: var(--c-yellow); }
.hdr__icon-link .icon { width: 22px; height: 22px; }
.hdr__badge {
  position: absolute; right: 2px; top: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  background: var(--c-yellow); border-radius: 9px; color: var(--c-black);
  font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
.hdr__badge[hidden] { display: none; }
.hdr__account {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px;
  color: #fff; font-size: 13px; font-weight: 600; padding: 0 4px;
}
.hdr__account:hover { color: var(--c-yellow); }
.hdr__account .icon { width: 20px; height: 20px; }

/* --- авторизация --- */
.auth {
  max-width: 460px; margin: 18px auto 40px; background: #fff;
  border: 1px solid var(--c-line); border-radius: 10px; padding: 30px 32px;
}
.auth__head { margin-bottom: 20px; }
.auth__title { font-size: 26px; font-weight: 600; color: var(--c-text); margin: 0 0 6px; }
.auth__sub { font-size: 12px; color: var(--c-muted); margin: 0; }
.auth__form { display: flex; flex-direction: column; gap: 14px; }
.auth__field { display: flex; flex-direction: column; gap: 6px; }
.auth__field span { font-size: 11px; color: var(--c-muted); }
.auth__field input {
  height: 46px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 6px;
  font-size: 13px; font-family: var(--font); background: #fff; color: var(--c-text);
}
.auth__field input:focus { border-color: var(--c-yellow); outline: none; }
.auth__grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth__row { display: flex; align-items: center; justify-content: space-between; }
.auth__check { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--c-text); }
.auth__check--top { align-items: flex-start; }
.auth__check a, .auth__link, .auth__alt a { color: #c98a00; font-weight: 600; }
.auth__submit { height: 50px; }
.auth__alt { text-align: center; font-size: 12px; color: var(--c-muted); margin: 16px 0 0; }
.auth__note { background: #FFF2C7; border-radius: 8px; padding: 14px 16px; font-size: 12px; color: var(--c-text); margin-bottom: 14px; }

/* --- каркас ЛК --- */
.lk-layout { display: grid; grid-template-columns: 270px 1fr; gap: 32px; align-items: start; margin-top: 26px; }
.lk-side { background: #fff; border-radius: 8px; padding: 18px 0; position: sticky; top: 14px; }
.lk-side__user { padding: 0 20px 16px; border-bottom: 1px solid var(--c-line); margin-bottom: 12px; }
.lk-side__name { font-size: 17px; font-weight: 600; color: var(--c-text); }
.lk-side__phone { font-size: 10px; color: var(--c-muted); margin-top: 4px; }
.lk-nav { display: flex; flex-direction: column; }
.lk-nav__item { display: block; padding: 11px 20px; font-size: 12px; color: var(--c-text); border-radius: 5px; margin: 0 10px; }
.lk-nav__item:hover { color: #c98a00; }
.lk-nav__item.is-active { background: #FFF2C7; font-weight: 600; }
.lk-nav__item--logout { color: var(--c-muted); margin-top: 8px; }
.lk-main { min-width: 0; }

/* --- обзор --- */
.lk-hello__title { font-size: 24px; font-weight: 600; color: var(--c-text); margin: 0 0 6px; }
.lk-hello__sub { font-size: 12px; color: var(--c-muted); margin: 0 0 22px; }
.lk-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lk-tile {
  background: #fff; border: 1px solid var(--c-line); border-radius: 8px; padding: 20px;
  min-height: 150px; display: flex; flex-direction: column;
}
.lk-tile__label { font-size: 10px; color: var(--c-muted); }
.lk-tile__value { font-size: 16px; font-weight: 600; color: var(--c-text); margin-top: 16px; }
.lk-tile__value--muted { color: var(--c-muted); font-weight: 400; font-size: 13px; }
.lk-tile__note { font-size: 10px; margin-top: 8px; color: var(--c-muted); }
.lk-tile__note.is-active { color: var(--c-ok); }
.lk-tile__link { margin-top: auto; padding-top: 14px; font-size: 10px; font-weight: 600; color: var(--c-text); }
.lk-tile__link:hover { color: #c98a00; }
.lk-subtitle { font-size: 21px; font-weight: 600; color: var(--c-text); margin: 34px 0 16px; }
.lk-orders { display: flex; flex-direction: column; gap: 10px; }
.lk-order-row { background: #fff; border-radius: 7px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto auto auto; gap: 18px; align-items: center; }
.lk-order-row__num { font-size: 12px; font-weight: 600; color: var(--c-text); }
.lk-order-row__date { font-size: 9px; color: var(--c-muted); margin-top: 4px; }
.lk-order-row__price { font-size: 12px; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.lk-order-row__status { font-size: 10px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.lk-order-row__status.is-active { color: var(--c-ok); }
.lk-order-row__link { font-size: 10px; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.lk-order-row__link:hover { color: #c98a00; }
.lk-car-card { background: var(--c-black); border-radius: 8px; padding: 22px; margin-top: 22px; color: #fff; }
.lk-car-card__title { font-size: 18px; font-weight: 600; }
.lk-car-card__car { font-size: 14px; font-weight: 600; color: var(--c-yellow); margin-top: 14px; }
.lk-car-card__note { font-size: 9px; color: #C7C9CF; margin: 14px 0 0; max-width: 850px; }

/* --- табы --- */
.lk-tabs { display: flex; flex-wrap: wrap; gap: 22px; background: #fff; border-radius: 7px; padding: 18px 20px; margin-bottom: 20px; }
.lk-tab { background: none; border: 0; padding: 0; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--c-muted); cursor: pointer; }
.lk-tab.is-active { color: var(--c-text); }
.lk-tab:hover { color: #c98a00; }

/* --- список заказов --- */
.lk-oc-list { display: flex; flex-direction: column; gap: 18px; }
.lk-oc { background: #fff; border: 1px solid var(--c-line); border-radius: 8px; padding: 20px; }
.lk-oc__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.lk-oc__num { font-size: 15px; font-weight: 600; color: var(--c-text); }
.lk-oc__status { font-size: 10px; font-weight: 600; color: var(--c-muted); white-space: nowrap; }
.lk-oc__status.is-active { color: var(--c-ok); }
.lk-oc__date { font-size: 9px; color: var(--c-muted); margin-top: 6px; }
.lk-oc__items { font-size: 11px; color: var(--c-text); margin-top: 20px; }
.lk-oc__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.lk-oc__price { font-size: 17px; font-weight: 600; color: var(--c-text); }
.lk-oc__link { font-size: 10px; font-weight: 600; color: var(--c-text); }
.lk-oc__link:hover { color: #c98a00; }

/* --- детали заказа --- */
.lk-status-banner { background: var(--c-black); border-radius: 8px; padding: 22px; color: #fff; }
.lk-status-banner__label { color: var(--c-yellow); font-size: 18px; font-weight: 600; }
.lk-status-banner__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: 11px; font-weight: 600; color: #6b6f76; }
.lk-step.is-done { color: #fff; }
.lk-step.is-current { color: var(--c-yellow); }
.lk-step__arrow { color: #3a3f45; }
.lk-status-banner__note { font-size: 9px; color: #C7C9CF; margin: 16px 0 0; }
.lk-items { display: flex; flex-direction: column; gap: 10px; }
.lk-item { background: #fff; border-radius: 7px; padding: 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lk-item__name { font-size: 12px; font-weight: 600; color: var(--c-text); }
.lk-item__meta { font-size: 9px; color: var(--c-muted); margin-top: 6px; }
.lk-item__sum { font-size: 13px; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.lk-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.lk-card { background: #fff; border-radius: 8px; padding: 22px; }
.lk-card__title { font-size: 17px; font-weight: 600; color: var(--c-text); margin: 0 0 18px; }
.lk-card__title--sub { margin-top: 26px; }
.lk-rows { display: flex; flex-direction: column; gap: 18px; }
.lk-row { display: flex; justify-content: space-between; gap: 20px; font-size: 10px; }
.lk-row span { color: var(--c-muted); }
.lk-row b { color: var(--c-text); font-weight: 600; text-align: right; }
.lk-total { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--c-line); }
.lk-total span { font-size: 11px; color: var(--c-muted); }
.lk-total b { font-size: 25px; font-weight: 600; color: var(--c-text); }
.lk-repeat { margin-top: 20px; width: 200px; }
.lk-help { background: #F5F7FA; border-radius: 8px; padding: 22px; margin-top: 24px; }
.lk-help__title { font-size: 16px; font-weight: 600; color: var(--c-text); }
.lk-help__text { font-size: 10px; color: var(--c-muted); margin: 12px 0 16px; max-width: 750px; }
.lk-help__link { font-size: 10px; font-weight: 600; color: var(--c-text); }
.lk-help__link:hover { color: #c98a00; }

/* --- карточки товаров (избранное) --- */
.lk-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lk-pcard { position: relative; background: #fff; border: 1px solid var(--c-line); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; }
.lk-pcard__media { display: block; background: #F2F4F5; border-radius: 6px; aspect-ratio: 294 / 185; overflow: hidden; }
.lk-pcard__media img { width: 100%; height: 100%; object-fit: contain; }
.lk-pcard__tools { position: absolute; right: 14px; top: 14px; display: flex; flex-direction: column; gap: 6px; }
.lk-pcard__fav, .lk-pcard__cmp {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--c-line); background: #fff;
  font-size: 14px; line-height: 1; color: var(--c-text); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.lk-pcard__cmp { font-size: 13px; color: var(--c-muted); }
.lk-pcard__fav:hover, .lk-pcard__cmp:hover { border-color: var(--c-yellow); }
.lk-pcard__fav.is-active { color: #e0245e; border-color: #e0245e; }
.lk-pcard__cmp.is-active { color: var(--c-black); border-color: var(--c-yellow); background: #FFF2C7; }
.lk-pcard__title { font-size: 13px; font-weight: 600; color: var(--c-text); margin-top: 18px; }
.lk-pcard__size { font-size: 9px; color: var(--c-muted); margin-top: 6px; }
.lk-pcard__stock { font-size: 9px; margin-top: 12px; }
.lk-pcard__stock .is-ok { color: var(--c-ok); }
.lk-pcard__stock .is-out { color: var(--c-muted); }
.lk-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.lk-pcard__price { font-size: 18px; font-weight: 600; color: var(--c-text); }
.lk-info { background: #F5F7FA; border-radius: 8px; padding: 22px; margin-top: 26px; }
.lk-info__title { font-size: 16px; font-weight: 600; color: var(--c-text); }
.lk-info__text { font-size: 10px; color: var(--c-muted); margin: 14px 0 0; max-width: 900px; }
.lk-empty { background: #fff; border: 1px dashed var(--c-line); border-radius: 8px; padding: 26px; font-size: 13px; color: var(--c-muted); }
.lk-empty--big { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.lk-note { background: #eef7f0; color: var(--c-ok); border-radius: 7px; padding: 12px 16px; font-size: 12px; margin-bottom: 16px; }
.lk-note.is-ok { border: 1px solid #cbe7d4; }

/* --- сравнение --- */
.lk-cmp-scroll { overflow-x: auto; }
.lk-cmp { width: 100%; border-collapse: collapse; background: #fff; }
.lk-cmp th, .lk-cmp td { padding: 16px 18px; text-align: left; font-size: 10px; border-bottom: 1px solid var(--c-line); }
.lk-cmp__corner { width: 200px; background: transparent; }
.lk-cmp__ph { width: 22%; min-width: 180px; vertical-align: top; position: relative; }
.lk-cmp__row { color: var(--c-muted); font-weight: 600; }
.lk-cmp td { color: var(--c-text); font-weight: 600; }
.lk-cmp__media img { width: 100%; height: 120px; object-fit: contain; background: #F2F4F5; border-radius: 6px; }
.lk-cmp__name { display: block; font-size: 12px; font-weight: 600; color: var(--c-text); margin-top: 12px; }
.lk-cmp__size { font-size: 9px; color: var(--c-muted); margin-top: 4px; }
.lk-cmp__price { font-size: 16px; font-weight: 600; color: var(--c-text); margin-top: 10px; }
.lk-cmp__rm { position: absolute; right: 12px; top: 12px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--c-line); background: #fff; cursor: pointer; color: var(--c-muted); }
.lk-cmp__rm:hover { color: #e0245e; border-color: #e0245e; }
.lk-cmp tbody tr:nth-child(even) { background: #F7F8F9; }
.lk-cmp-compat { background: var(--c-black); border-radius: 8px; padding: 22px; margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; color: #fff; }
.lk-cmp-compat__title { font-size: 17px; font-weight: 600; }
.lk-cmp-compat__text { font-size: 10px; color: #C7C9CF; margin: 0; max-width: 900px; }

/* --- мои автомобили / формы --- */
.lk-cars { display: flex; flex-direction: column; gap: 12px; }
.lk-car { background: #fff; border: 1px solid var(--c-line); border-radius: 8px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.lk-car__label { font-size: 14px; font-weight: 600; color: var(--c-text); }
.lk-car__badge { display: inline-block; margin-top: 6px; font-size: 9px; font-weight: 600; color: #c98a00; background: #FFF2C7; border-radius: 4px; padding: 2px 8px; }
.lk-car__actions { display: flex; gap: 10px; align-items: center; }
.lk-btn-del { color: #c0392b !important; border-color: #e6c9c4 !important; }
.lk-card--form { margin-top: 24px; }
.lk-form__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.lk-field { display: flex; flex-direction: column; gap: 6px; }
.lk-field span { font-size: 11px; color: var(--c-muted); }
.lk-field input, .lk-field select {
  height: 44px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: 6px;
  font-size: 13px; font-family: var(--font); background: #fff; color: var(--c-text);
}
.lk-field input:focus, .lk-field select:focus { border-color: var(--c-yellow); outline: none; }
.lk-field__note { font-size: 10px; color: var(--c-muted); margin: -6px 0 14px; }

/* --- кнопка «сравнить» на карточках товара --- */
.card__cmp {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line);
  background: var(--c-panel); font-size: 14px; line-height: 1; color: var(--c-muted);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.card__cmp:hover { border-color: var(--c-yellow); }
.card__cmp.is-active { color: var(--c-black); border-color: var(--c-yellow); background: #FFF2C7; }
.product-head .card__cmp { width: 44px; height: 44px; font-size: 20px; flex: none; }
.pt-gallery__cmp {
  position: absolute; right: 52px; top: 16px; border: 0; background: none; padding: 0;
  font-size: 20px; line-height: 1; color: #08090A; cursor: pointer;
}
.pt-gallery__cmp.is-active { color: #c98a00; }

/* --- адаптив ЛК --- */
@media (max-width: 1200px) {
  .lk-pgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .hdr__icon-link { display: none; }
  .hdr__account span { display: none; }
  .lk-layout { grid-template-columns: 1fr; gap: 18px; }
  .lk-side { position: static; }
  .lk-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .lk-nav__item { margin: 0; }
  .lk-tiles { grid-template-columns: 1fr 1fr; }
  .lk-detail-grid { grid-template-columns: 1fr; }
  .lk-form__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lk-tiles { grid-template-columns: 1fr; }
  .lk-pgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .lk-form__grid { grid-template-columns: 1fr; }
  .lk-order-row { grid-template-columns: 1fr auto; row-gap: 8px; }
  .lk-order-row__price, .lk-order-row__status, .lk-order-row__link { grid-column: 2; }
  .lk-repeat { width: 100%; }
  .auth { padding: 22px 18px; }
  .auth__grid2 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ИНТЕРАКТИВНЫЕ СОСТОЯНИЯ (site-wide)
   docs/design_элементы_Наведение_нажатие_выбор.md
   обычное → наведение → нажатие → выбрано; смена 120–160 мс.
   Токены --ix-* заданы в main.css (:root). Блок стоит в конце, поэтому
   переопределяет прежние hover у компонентов.
   ========================================================================== */

/* --- плавность смены состояний --- */
a, button, summary, [role="button"],
.btn, .size-chip, .hchip, .hseason-item, .hpc-type, .hpc-mode, .picker-tab,
.wchip, .pw-chip, .br-chip, .wextra__chip, .nw-tab, .filter-check, .view-toggle__btn,
.hcat-card, .hbiz-card, .hbrand, .hintro, .pg-card--link, .br-card, .hp-section, .cn-point,
.haute__cat, .hcity__select, .hhero__cta, .hform__submit, .haute__cta,
.hpc .car-picker__submit, .hdchip {
  transition: background-color var(--ix-t) var(--ix-ease),
    border-color var(--ix-t) var(--ix-ease),
    color var(--ix-t) var(--ix-ease),
    box-shadow var(--ix-t) var(--ix-ease),
    transform var(--ix-t) var(--ix-ease);
}

/* --- 1. Главная кнопка / CTA (жёлтая): #FFB800 → #FFC633 → #E0A200 --- */
.hhero__cta:hover, .hform__submit:hover, .haute__cta:hover,
.hpc .car-picker__submit:hover:not(:disabled) { background: var(--ix-cta-hover); }
.hhero__cta:active, .hform__submit:active, .haute__cta:active,
.hpc .car-picker__submit:active:not(:disabled) { background: var(--ix-cta-active); }

/* --- 2. Кнопка на тёмной поверхности: #20242A → #30363E → #14181D --- */
.haute__cat:hover, .hcity__select:hover { background: var(--ix-dark-hover); }
.haute__cat:active, .hcity__select:active { background: var(--ix-dark-active); }

/* --- 3. Раздел каталога (карточка): белая → #FFF9E8/#FFB800 → #FFF0C2/#C58D00 --- */
.hcat-card:hover, .hbiz-card:hover, .hbrand:hover, .pg-card--link:hover,
.br-card:hover, .hp-section:hover, .cn-point:hover {
  background: var(--ix-card-hover-bg);
  border-color: var(--ix-card-hover-line);
}
.hcat-card:active, .hbiz-card:active, .hbrand:active, .pg-card--link:active,
.br-card:active, .hp-section:active, .cn-point:active {
  background: var(--ix-card-active-bg);
  border-color: var(--ix-card-active-line);
}

/* --- 4. Вкладка / фильтр: #F6F7F9 → #FFF7DF → #FFE7A0; выбрано #FFB800 --- */
.hpc-type:not(.is-active):hover,
.hpc-mode:not(.is-active):hover,
.hchip:not(.is-active):hover,
.hseason-item:hover,
.picker-tab:not(.is-active):hover,
.wchip:hover,
.pw-chip:not(.is-active):hover,
.br-chip:not(.is-active):hover,
.wextra__chip:hover,
.nw-tab:not(.is-active):hover,
.view-toggle__btn:not(.is-active):hover,
.hdchip:hover,
.size-chip:not(.is-active):hover {
  background: var(--ix-tab-hover);
}
.hpc-type:not(.is-active):active,
.hpc-mode:not(.is-active):active,
.hchip:not(.is-active):active,
.hseason-item:active,
.picker-tab:not(.is-active):active,
.wchip:active,
.pw-chip:not(.is-active):active,
.br-chip:not(.is-active):active,
.wextra__chip:active,
.nw-tab:not(.is-active):active,
.hdchip:active,
.size-chip:not(.is-active):active {
  background: var(--ix-tab-active);
}
/* выбрано — жёлтая заливка (у hchip/pw-chip/br-chip/nw-tab/picker-tab уже есть) */
.hseason-item:has(input:checked) { background: var(--ix-tab-selected); border-color: var(--ix-tab-selected); }
.hseason-item:has(input:checked) span { color: var(--c-onyx); }

/* --- 5. Текстовая ссылка: #0F4DB2 → #0B3A88++ → #07285F++ --- */
.hsec__all, .hduo-card__all, .nd-more, .nw-more, .nd-share a, .nd-share button {
  color: var(--ix-link);
}
.hsec__all:hover, .hduo-card__all:hover, .nd-more:hover, .nw-more:hover,
.nd-share a:hover, .nd-share button:hover {
  color: var(--ix-link-hover);
  text-decoration: underline;
}
.hsec__all:active, .hduo-card__all:active, .nd-more:active, .nw-more:active,
.nd-share a:active, .nd-share button:active {
  color: var(--ix-link-active);
  text-decoration: underline;
}

/* --- 6. FAQ / строка вопроса: белая → #F6F7F9 → #EEF0F3 --- */
.hfaq__item summary, .pg-faq summary { border-radius: 6px; }
.hfaq__item summary:hover, .pg-faq summary:hover { background: var(--ix-faq-hover); }
.hfaq__item summary:active, .pg-faq summary:active { background: var(--ix-faq-active); }
.hfaq__item[open] summary:hover, .pg-faq details[open] summary:hover { background: transparent; }

/* --- 7. Тёмные кнопки (инверсная/чернильная) --- */
.btn--ink:hover:not(:disabled) { background: #14191e; }
.btn--ink:active:not(:disabled) { background: #000; }
.hintro:hover { background: #14191e; }
.hintro:active { background: #0c1013; }

/* --- 8. Фокус с клавиатуры для карточек (ссылки-карточки) --- */
.hcat-card:focus-visible, .hbiz-card:focus-visible, .hbrand:focus-visible,
.pg-card--link:focus-visible, .br-card:focus-visible, .hp-section:focus-visible,
.hintro:focus-visible, .hhero__cta:focus-visible, .hnews-card:focus-visible,
.hduo-card__all:focus-visible, .hsec__all:focus-visible {
  outline: 2px solid var(--ix-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   COMPATIBILITY ENGINE — состояния совместимости
   docs/design_Compatibility_Engine_состояния.md
   Используется в карточке товара, подборе, корзине и сравнении.
   ========================================================================== */
.cpt { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cpt__box { width: 100%; background: #F5F7FA; border-radius: 7px; padding: 18px; }
.cpt__title { font-size: 15px; font-weight: 600; line-height: 1.3; color: #6E7580; }
.cpt__note { font-size: 9px; line-height: 1.45; color: #6E7580; margin-top: 8px; }

.cpt__action {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 220px; height: 48px; padding: 0 22px;
  border: none; border-radius: 5px;
  background: var(--ix-cta); color: #08090A;
  font-family: var(--font); font-size: 10px; font-weight: 600; text-align: center;
  cursor: pointer;
  transition: background-color var(--ix-t) var(--ix-ease), color var(--ix-t) var(--ix-ease);
}
.cpt__action--cta:hover { background: var(--ix-cta-hover); }
.cpt__action--cta:active { background: var(--ix-cta-active); }
.cpt__action--ok { background: #EDFAF0; color: #08090A; }
.cpt__action--ok:hover { background: #dcf4e4; }
.cpt__action--ok:active { background: #cdeed9; }
.cpt__action:disabled { opacity: .55; cursor: default; }
.cpt__action:focus-visible { outline: 2px solid var(--ix-focus); outline-offset: 2px; }

.cpt--fit .cpt__title { color: #149E4D; }
.cpt--mismatch .cpt__title, .cpt--error .cpt__title { color: #D12621; }
.cpt--checking .cpt__title { color: var(--ix-cta); }
.cpt--idle .cpt__title, .cpt--unsupported .cpt__title { color: #6E7580; }

/* компактный вариант (корзина, сравнение) */
.cpt--compact { gap: 8px; }
.cpt--compact .cpt__box { padding: 12px 14px; }
.cpt--compact .cpt__title { font-size: 12px; }
.cpt--compact .cpt__note { margin-top: 4px; }
.cpt--compact .cpt__action { min-width: 0; height: 38px; padding: 0 16px; font-size: 10px; }

@media (max-width: 640px) {
  .cpt__action { min-width: 0; width: 100%; }
}

/* врезки компонента в корзине и сравнении */
.ct-item__compat { margin-top: 10px; max-width: 420px; }
.na-compat { margin: 14px 0; max-width: 440px; }
.lk-cmp__compat {
  display: inline-block; margin: 6px 0 0; padding: 3px 9px;
  border-radius: 10px; background: #F5F7FA; color: #6E7580;
  font-size: 9px; font-weight: 600; white-space: nowrap;
}
.lk-cmp__compat.is-fit { background: #EDFAF0; color: #149E4D; }
.lk-cmp__compat.is-bad, .lk-cmp__compat.is-err { background: #FDECEC; color: #D12621; }


/* End */


/* Start:/local/templates/tirex/template_styles.css?1791714466215*/
/* template_styles.css — подключается Bitrix автоматически.
   Стили шаблона лежат в assets/. */
@import url("/local/templates/tirex/assets/css/main.css");
@import url("/local/templates/tirex/assets/css/pages.css");

/* End */
/* /local/templates/tirex/assets/css/main.css?179171446653642 */
/* /local/templates/tirex/assets/css/pages.css?1791714466170277 */
/* /local/templates/tirex/template_styles.css?1791714466215 */