/* ==========================================================================
   Kolesa PRO — design system
   Чистый CSS, без фреймворков. Токены → база → компоненты → страницы.
   ========================================================================== */

/* ---------- 1. Токены ---------- */
:root {
  /* Цвета */
  --c-primary: #1f5fbf;
  --c-primary-hover: #184c99;
  --c-primary-soft: #e8f0fb;
  --c-accent: #f59e0b;
  --c-accent-hover: #d98a06;
  --c-accent-soft: #fff4e0;
  --c-success: #16a34a;
  --c-success-soft: #e7f6ec;
  --c-warning: #d97706;
  --c-warning-soft: #fdf1e1;
  --c-danger: #dc2626;
  --c-danger-soft: #fdeaea;
  --c-info-soft: #eef4fc;

  --c-surface: #ffffff;
  --c-surface-muted: #f5f7fa;
  --c-surface-dark: #0f1a2b;
  --c-border: #e5e7eb;
  --c-border-strong: #cfd4dc;
  --c-text: #111827;
  --c-text-muted: #6b7280;
  --c-text-inverse: #ffffff;

  /* Сезоны */
  --c-summer: #f59e0b;
  --c-winter: #2563eb;
  --c-allseason: #16a34a;

  /* Типографика */
  --font-body: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  --font-display: "Manrope", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --fs-12: 0.75rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --lh-tight: 1.2;
  --lh-body: 1.5;

  /* Отступы, 8pt */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 40px;
  --sp-8: 56px;
  --sp-9: 80px;

  /* Радиусы, тени */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.14);

  /* Прочее */
  --container: 1280px;
  --control-h: 44px;
  --control-h-lg: 52px;
  --t-fast: 150ms ease-out;
  --t-base: 220ms ease-out;
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
}

/* ---------- 2. База ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  color: var(--c-text);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-3);
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

h1 {
  font-size: var(--fs-32);
}

h2 {
  font-size: var(--fs-24);
}

h3 {
  font-size: var(--fs-20);
}

h4 {
  font-size: var(--fs-18);
}

@media (min-width: 768px) {
  h1 {
    font-size: var(--fs-40);
  }

  h2 {
    font-size: var(--fs-32);
  }
}

p {
  margin: 0 0 var(--sp-3);
}

a {
  color: var(--c-primary);
  text-decoration: none;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--c-primary-hover);
}

img,
svg {
  display: block;
  max-width: 100%;
}

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

:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

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

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

.icon--sm {
  width: 16px;
  height: 16px;
}

.icon--lg {
  width: 28px;
  height: 28px;
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--sp-5);
  }
}

.section {
  padding-block: var(--sp-7);
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--sp-9);
  }
}

.section--muted {
  background-color: var(--c-surface-muted);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(17, 24, 39, 0.055) 1px, transparent 0),
    repeating-linear-gradient(135deg, rgba(17, 24, 39, 0.014) 0 2px, transparent 2px 12px);
  background-size: 22px 22px, auto;
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.section__head h2 {
  margin: 0;
}

.section__link {
  font-weight: 500;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.muted {
  color: var(--c-text-muted);
}

.text-sm {
  font-size: var(--fs-14);
}

.num {
  font-variant-numeric: tabular-nums;
}

/* ---------- 3. Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  padding: 0 var(--sp-5);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform 80ms ease-out;
  touch-action: manipulation;
}

.btn:active {
  transform: scale(0.98);
}

.btn--primary {
  background: var(--c-primary);
  color: var(--c-text-inverse);
}

.btn--primary:hover {
  background: var(--c-primary-hover);
  color: var(--c-text-inverse);
}

.btn--accent {
  background: var(--c-accent);
  color: var(--c-text);
}

.btn--accent:hover {
  background: var(--c-accent-hover);
  color: var(--c-text);
}

.btn--secondary {
  background: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

.btn--secondary:hover {
  border-color: var(--c-text-muted);
  color: var(--c-text);
}

.btn--ghost {
  background: transparent;
  color: var(--c-primary);
}

.btn--ghost:hover {
  background: var(--c-primary-soft);
}

.btn--lg {
  min-height: var(--control-h-lg);
  padding-inline: var(--sp-6);
  font-size: var(--fs-18);
}

.btn--sm {
  min-height: 36px;
  padding-inline: var(--sp-3);
  font-size: var(--fs-14);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  width: var(--control-h);
  padding: 0;
}

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---------- 4. Формы ---------- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.field__label {
  font-size: var(--fs-14);
  font-weight: 500;
}

.field__hint {
  font-size: var(--fs-12);
  color: var(--c-text-muted);
}

.field__error {
  display: none;
  font-size: var(--fs-12);
  color: var(--c-danger);
}

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

.field--error .input,
.field--error .select {
  border-color: var(--c-danger);
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.textarea {
  min-height: 96px;
  padding-block: var(--sp-3);
  resize: vertical;
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: var(--c-text-muted);
}

.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-soft);
}

.select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  cursor: pointer;
  font-size: var(--fs-14);
}

.check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-primary);
}

.radio-card {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.radio-card:hover {
  border-color: var(--c-border-strong);
}

.radio-card input {
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--c-primary);
  flex: none;
}

.radio-card:has(input:checked) {
  border-color: var(--c-primary);
  background: var(--c-primary-soft);
}

.radio-card__title {
  display: block;
  font-weight: 600;
}

.radio-card__desc {
  display: block;
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}

.form-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .form-grid--2 {
    grid-template-columns: 1fr 1fr;
  }

  .form-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Счётчик количества */
.qty {
  display: inline-flex;
  align-items: stretch;
  height: var(--control-h);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}

.qty__btn {
  width: 44px;
  border: 0;
  background: var(--c-surface);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-muted);
  transition: background var(--t-fast), color var(--t-fast);
}

.qty__btn:hover {
  background: var(--c-surface-muted);
  color: var(--c-text);
}

.qty__input {
  width: 48px;
  border: 0;
  border-inline: 1px solid var(--c-border);
  text-align: center;
  font-weight: 600;
  -moz-appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

/* ---------- 5. Бейджи, алерты, табы, крошки ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  height: 24px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 1;
  background: var(--c-surface-muted);
  color: var(--c-text);
  white-space: nowrap;
}

.badge .icon {
  width: 14px;
  height: 14px;
}

.badge--summer {
  background: var(--c-accent-soft);
  color: #9a5b00;
}

.badge--winter {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.badge--allseason {
  background: var(--c-success-soft);
  color: #0f6b30;
}

.badge--outline {
  background: transparent;
  border: 1px solid var(--c-border-strong);
  color: var(--c-text-muted);
}

.badge--accent {
  background: var(--c-accent);
  color: var(--c-text);
}

.stock {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: 500;
}

.stock::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.stock--in {
  color: var(--c-success);
}

.stock--order {
  color: var(--c-warning);
}

.stock--ask {
  color: var(--c-text-muted);
}

.alert {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-14);
}

.alert .icon {
  margin-top: 1px;
}

.alert--info {
  background: var(--c-info-soft);
  border-color: #cfdff5;
  color: #1c3d6e;
}

.alert--warning {
  background: var(--c-warning-soft);
  border-color: #f3d5a8;
  color: #7a4300;
}

.alert--success {
  background: var(--c-success-soft);
  border-color: #b9e4c8;
  color: #0f5a2a;
}

.alert--danger {
  background: var(--c-danger-soft);
  border-color: #f3b9b9;
  color: #8a1a1a;
}

.alert__title {
  font-weight: 600;
  margin-bottom: 2px;
}

.tabs {
  display: flex;
  gap: var(--sp-1);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs::-webkit-scrollbar {
  display: none;
}

.tabs__tab {
  min-height: var(--control-h);
  padding: 0 var(--sp-4);
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  font-weight: 500;
  color: var(--c-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
}

.tabs__tab:hover {
  color: var(--c-text);
}

.tabs__tab[aria-selected="true"] {
  color: var(--c-primary);
  border-bottom-color: var(--c-primary);
}

.tabs__panel[hidden] {
  display: none;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-4) 0;
  margin: 0;
  list-style: none;
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}

.crumbs li + li::before {
  content: "/";
  margin-right: var(--sp-2);
  color: var(--c-border-strong);
}

.crumbs a {
  color: var(--c-text-muted);
}

.crumbs a:hover {
  color: var(--c-primary);
}

/* ---------- 6. Шапка ---------- */
.topbar {
  display: none;
  background: var(--c-surface-dark);
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-14);
}

.topbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 36px;
  gap: var(--sp-4);
}

.topbar__links {
  display: none;
  gap: var(--sp-5);
}

.topbar__links a {
  color: inherit;
}

.topbar__links a:hover {
  color: #fff;
}

@media (min-width: 768px) {
  .topbar {
    display: block;
  }
}

@media (min-width: 1024px) {
  .topbar__links {
    display: flex;
  }
}

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}

.header__row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 64px;
}

@media (min-width: 1024px) {
  .header__row {
    min-height: 80px;
    gap: var(--sp-6);
  }
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-20);
  letter-spacing: -0.02em;
  line-height: 1;
}

.logo__img {
  height: 40px;
  width: auto;
}

@media (min-width: 1024px) {
  .logo__img {
    height: 48px;
  }
}

.header__search {
  display: none;
  flex: 1;
  max-width: 520px;
  position: relative;
}

.header__search .input {
  padding-left: 44px;
  background: var(--c-surface-muted);
  border-color: transparent;
}

.header__search .input:focus {
  background: var(--c-surface);
}

.header__search .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .header__search {
    display: block;
  }
}

.header__phone {
  display: none;
  margin-left: auto;
  text-align: right;
  line-height: 1.2;
}

.header__phone a {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-18);
  color: var(--c-text);
}

.header__phone small {
  color: var(--c-text-muted);
  font-size: var(--fs-12);
}

@media (min-width: 768px) {
  .header__phone {
    display: block;
  }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: auto;
}

@media (min-width: 768px) {
  .header__actions {
    margin-left: 0;
  }
}

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--control-h);
  min-width: var(--control-h);
  padding: 0 var(--sp-3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast);
}

.iconbtn:hover {
  background: var(--c-surface-muted);
}

.iconbtn__label {
  display: none;
}

@media (min-width: 1024px) {
  .iconbtn__label {
    display: inline;
  }
}

.iconbtn__count {
  position: absolute;
  top: 4px;
  left: 26px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  color: var(--c-text);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.iconbtn--cart {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.iconbtn--cart:hover {
  background: #d9e6f8;
}

.nav {
  display: none;
  border-top: 1px solid var(--c-border);
}

.nav ul {
  display: flex;
  gap: var(--sp-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-4);
  color: var(--c-text);
  font-weight: 500;
  border-radius: var(--r-md);
  transition: background var(--t-fast), color var(--t-fast);
}

.nav a:hover {
  background: var(--c-surface-muted);
  color: var(--c-primary);
}

.nav a[aria-current="page"] {
  color: var(--c-primary);
}

.nav li.nav__spacer {
  flex: 1;
}

.nav a.nav__service {
  color: var(--c-primary);
}

@media (min-width: 1024px) {
  .nav {
    display: block;
  }

  .header__burger {
    display: none;
  }
}

/* Мобильное меню */
.drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: none;
}

.drawer[open] {
  display: block;
}

.drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(15, 26, 43, 0.5);
}

.drawer__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(360px, 88vw);
  background: var(--c-surface);
  padding: var(--sp-4);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: drawer-in 220ms ease-out;
}

@keyframes drawer-in {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.drawer__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-4);
}

.drawer__nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer__nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 52px;
  padding: 0 var(--sp-2);
  color: var(--c-text);
  font-weight: 500;
  font-size: var(--fs-18);
  border-bottom: 1px solid var(--c-border);
}

.drawer__nav a.is-service {
  color: var(--c-primary);
}

.drawer__contacts {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-surface-muted);
}

.drawer__contacts a {
  font-weight: 700;
  font-size: var(--fs-20);
  color: var(--c-text);
}

/* ---------- 7. Hero и подбор ---------- */
.hero {
  background: linear-gradient(180deg, var(--c-surface-muted) 0%, var(--c-surface) 100%);
  padding-block: var(--sp-6) var(--sp-7);
}

@media (min-width: 1024px) {
  .hero {
    padding-block: var(--sp-8) var(--sp-9);
  }
}

.hero__grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .hero__grid {
    grid-template-columns: minmax(0, 640px) 1fr;
    align-items: center;
    gap: var(--sp-8);
  }
}

.hero--photo {
  position: relative;
  color: var(--c-text-inverse);
  background:
    linear-gradient(90deg, rgba(8, 16, 30, 0.94) 0%, rgba(8, 16, 30, 0.82) 45%, rgba(8, 16, 30, 0.25) 100%),
    url("../img/hero.jpg") right center / cover no-repeat,
    #0a1220;
}

@media (min-width: 1024px) {
  .hero--photo {
    background-position: 0 0, right center, 0 0;
    min-height: 640px;
  }
}

.hero--photo .hero__lead {
  color: rgba(255, 255, 255, 0.78);
}

.hero--photo .hero__facts li {
  color: rgba(255, 255, 255, 0.9);
}

.hero--photo .hero__facts .icon {
  color: #7cc4ff;
}

.hero__content .selector {
  margin-top: var(--sp-5);
  color: var(--c-text);
}

.hero h1 {
  margin-bottom: var(--sp-4);
}

.hero__lead {
  font-size: var(--fs-18);
  color: var(--c-text-muted);
  max-width: 34rem;
  margin-bottom: var(--sp-5);
}

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  font-weight: 500;
}

.hero__facts .icon {
  color: var(--c-success);
}

.selector {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.selector .tabs {
  padding: 0 var(--sp-3);
  background: var(--c-surface-muted);
  border-bottom-color: var(--c-border);
}

.selector .tabs__tab {
  min-height: 52px;
}

.selector__body {
  padding: var(--sp-4);
}

@media (min-width: 640px) {
  .selector__body {
    padding: var(--sp-5);
  }
}

.selector__row {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

.selector__row + .selector__row {
  margin-top: var(--sp-3);
}

@media (min-width: 640px) {
  .selector__row--3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .selector__row--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.selector__size {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: end;
  gap: var(--sp-2);
}

.selector__sep {
  padding-bottom: 12px;
  font-weight: 600;
  color: var(--c-text-muted);
}

.selector__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.selector__foot .btn--primary {
  flex: 1 1 200px;
}

.selector__hint {
  width: 100%;
  font-size: var(--fs-12);
  color: var(--c-text-muted);
}

.selector--compact {
  box-shadow: none;
}

/* ---------- 8. Категории, услуги, преимущества ---------- */
.cats {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .cats {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
}

.services {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .services {
    grid-template-columns: 1fr 1fr;
  }
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  overflow: hidden;
  color: var(--c-text-inverse);
  background: var(--c-surface-dark);
  min-height: 300px;
  isolation: isolate;
}

@media (min-width: 640px) {
  .service {
    padding-right: 40%;
  }
}

.service--storage {
  background: linear-gradient(90deg, rgba(10, 22, 44, 0.92) 0%, rgba(10, 22, 44, 0.55) 55%, rgba(10, 22, 44, 0.15) 100%), url("../img/storage.jpg") center / cover no-repeat, #12274a;
}

.service--fitting {
  background: linear-gradient(90deg, rgba(10, 18, 32, 0.92) 0%, rgba(10, 18, 32, 0.55) 55%, rgba(10, 18, 32, 0.15) 100%), url("../img/fitting.jpg") center / cover no-repeat, #1b2537;
}

.service__eyebrow {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.service h3 {
  font-size: var(--fs-24);
  margin: 0;
}

.service__price {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 800;
}

.service__price small {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 500;
  opacity: 0.8;
}

.service p {
  opacity: 0.85;
  max-width: 28rem;
}

.service .btn {
  align-self: flex-start;
  margin-top: auto;
}


.features {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}

.feature {
  display: flex;
  gap: var(--sp-3);
}

.feature__icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  display: grid;
  place-items: center;
}

.feature h4 {
  margin-bottom: var(--sp-1);
}

.feature p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-14);
}

.brands ul,
.brands li {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brands {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .brands {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (min-width: 1024px) {
  .brands {
    grid-template-columns: repeat(8, 1fr);
  }
}

.brand,
.brands a {
  display: grid;
  place-items: center;
  min-height: 72px;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-14);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}

.brand:hover,
.brands a:hover {
  color: var(--c-text);
  border-color: var(--c-border-strong);
}

.steps {
  display: grid;
  gap: var(--sp-4);
  counter-reset: step;
}

@media (min-width: 768px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-3);
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-text);
  font-family: var(--font-display);
  font-weight: 800;
}

.step p {
  margin: 0;
  color: var(--c-text-muted);
  font-size: var(--fs-14);
}

/* ---------- 9. Карточки товаров ---------- */
.grid-products {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .grid-products {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
  }
}

@media (min-width: 1280px) {
  .grid-products--4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  overflow: hidden;
  transition: box-shadow var(--t-fast), border-color var(--t-fast);
}

.product-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--c-border-strong);
}

.product-card__media {
  position: relative;
  aspect-ratio: 1;
  background: var(--c-surface-muted);
  display: grid;
  place-items: center;
}

.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.product-card__badges {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3);
  flex: 1;
}

@media (min-width: 768px) {
  .product-card__body {
    padding: var(--sp-4);
  }
}

.product-card__vendor {
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text-muted);
}

.product-card__title {
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-text);
}

.product-card__title a {
  color: inherit;
}

.product-card__title a:hover {
  color: var(--c-primary);
}

.product-card__size {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-18);
}

.product-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.product-card__price {
  margin-top: auto;
  padding-top: var(--sp-2);
}

.price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-20);
  font-variant-numeric: tabular-nums;
}

.price--lg {
  font-size: var(--fs-32);
}

.price__unit,
.price__set {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-12);
  color: var(--c-text-muted);
}

.product-card__buy {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.product-card__buy .qty {
  display: none;
}

@media (min-width: 1024px) {
  .product-card__buy .qty {
    display: inline-flex;
  }
}

.product-card__buy .btn {
  flex: 1;
}

/* Табличный вид позиций */
.offers {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.offers th,
.offers td {
  padding: var(--sp-3);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
  vertical-align: middle;
}

.offers th {
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  background: var(--c-surface-muted);
}

.offers tr:hover td {
  background: #fafbfd;
}

.offers .price {
  font-size: var(--fs-18);
}

.offers__size {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-16);
  white-space: nowrap;
}

.offers__actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  justify-content: flex-end;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
}

/* ---------- 10. Каталог: фильтры + результаты ---------- */
.catalog {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 1024px) {
  .catalog {
    grid-template-columns: 280px 1fr;
    align-items: start;
  }
}

.filters {
  display: none;
  flex-direction: column;
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .filters {
    display: flex;
    position: sticky;
    top: 96px;
  }
}

.filters[open] {
  display: flex;
}

.filter {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}

.filter__title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  margin-bottom: var(--sp-3);
}

.filter__list {
  display: flex;
  flex-direction: column;
}

.filter__list .check {
  min-height: 36px;
}

.filter__count {
  margin-left: auto;
  color: var(--c-text-muted);
  font-size: var(--fs-12);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 32px;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-primary-soft);
  color: var(--c-primary);
  font-size: var(--fs-14);
  font-weight: 500;
}

.chip button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.chip button:hover {
  background: rgba(31, 95, 191, 0.12);
}

.results__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.results__count {
  font-weight: 600;
}

.results__tools {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.results__tools .select {
  min-width: 200px;
}

.view-toggle {
  display: none;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  overflow: hidden;
}

@media (min-width: 768px) {
  .view-toggle {
    display: inline-flex;
  }
}

.view-toggle button {
  width: 44px;
  height: 42px;
  border: 0;
  background: var(--c-surface);
  color: var(--c-text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.view-toggle button[aria-pressed="true"] {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
  margin-top: var(--sp-6);
  list-style: none;
  padding: 0;
}

.pagination a,
.pagination span {
  display: grid;
  place-items: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-weight: 500;
}

.pagination a:hover {
  background: var(--c-surface-muted);
}

.pagination [aria-current="page"] {
  background: var(--c-primary);
  color: #fff;
}

div.empty {
  text-align: center;
  padding: var(--sp-8) var(--sp-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-lg);
}

div.empty .icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--sp-4);
  color: var(--c-text-muted);
  stroke-width: 1.5;
}

.empty__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

/* ---------- 11. Страница товара ---------- */
.product {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 1024px) {
  .product {
    grid-template-columns: 1fr 1fr 360px;
    gap: var(--sp-6);
  }
}

.gallery {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.gallery__main {
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--c-surface-muted);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.gallery__thumbs {
  display: flex;
  gap: var(--sp-2);
}

.gallery__thumbs button {
  width: 64px;
  height: 64px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-muted);
  cursor: pointer;
  overflow: hidden;
  padding: 4px;
}

.gallery__thumbs button[aria-pressed="true"] {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 2px var(--c-primary-soft);
}

.product__info h1 {
  font-size: var(--fs-24);
}

@media (min-width: 768px) {
  .product__info h1 {
    font-size: var(--fs-32);
  }
}

.product__vendor {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.product__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.specs th,
.specs td {
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
}

.specs th {
  font-weight: 400;
  color: var(--c-text-muted);
  width: 50%;
}

.specs td {
  font-weight: 500;
}

.buybox {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}

.buybox__row {
  display: flex;
  gap: var(--sp-3);
  align-items: center;
}

.buybox__row .btn {
  flex: 1;
}

.buybox__note {
  display: flex;
  gap: var(--sp-2);
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}

.buybox__note .icon {
  color: var(--c-primary);
  flex: none;
}

.buybox__divider {
  height: 1px;
  background: var(--c-border);
}

/* ---------- 12. Корзина и заказ ---------- */
.checkout {
  display: grid;
  gap: var(--sp-5);
}

@media (min-width: 1024px) {
  .checkout {
    grid-template-columns: 1fr 400px;
    align-items: start;
    gap: var(--sp-6);
  }
}

.card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  padding: var(--sp-4);
}

@media (min-width: 768px) {
  .card {
    padding: var(--sp-5);
  }
}

.card + .card {
  margin-top: var(--sp-4);
}

.card__title {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.card__title h2 {
  font-size: var(--fs-20);
  margin: 0;
}

.card__step {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-14);
}

.cart-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-border);
}

.cart-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.cart-item:first-child {
  padding-top: 0;
}

@media (min-width: 768px) {
  .cart-item {
    grid-template-columns: 88px 1fr auto auto;
    align-items: center;
    gap: var(--sp-4);
  }
}

.cart-item__media {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  background: var(--c-surface-muted);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.cart-item__media img {
  mix-blend-mode: multiply;
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.cart-item__title {
  font-weight: 600;
}

.cart-item__meta {
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}

.cart-item__qty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

@media (max-width: 767px) {
  .cart-item__qty {
    grid-column: 1 / -1;
  }
}

.cart-item__sum {
  text-align: right;
  min-width: 110px;
}

.cart-item__remove {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
}

.cart-item__remove:hover {
  background: var(--c-danger-soft);
  color: var(--c-danger);
}

.delivery-fields {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-border);
}

.summary {
  position: sticky;
  top: 96px;
}

.summary__rows {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.summary__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-14);
}

.summary__row--total {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-18);
  font-weight: 700;
}

.summary__row--total .price {
  font-size: var(--fs-24);
}

.summary__legal {
  font-size: var(--fs-12);
  color: var(--c-text-muted);
  margin-top: var(--sp-3);
}

/* ---------- 13. Новости ---------- */
.news {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .news {
    grid-template-columns: repeat(3, 1fr);
  }
}

.news-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}

.news-card::before {
  content: "";
  position: absolute;
  left: var(--sp-5);
  right: var(--sp-5);
  top: 0;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--c-primary);
  opacity: 0;
  transition: opacity var(--t-fast);
}

.news-card:hover {
  color: var(--c-text);
  border-color: var(--c-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.news-card:hover::before {
  opacity: 1;
}

.news-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
  font-size: var(--fs-12);
  color: var(--c-text-muted);
}

.news-card h3 {
  margin: 0;
  font-size: var(--fs-18);
  line-height: 1.3;
}

.news-card p {
  margin: 0;
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}

.news-card__more {
  position: absolute;
  left: var(--sp-5);
  bottom: var(--sp-4);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--c-primary);
}

.news-card__more .icon {
  transition: transform var(--t-fast);
}

.news-card:hover .news-card__more .icon {
  transform: translateX(4px);
}


/* ---------- 14. CTA и футер ---------- */
.cta {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--c-primary-soft);
  align-items: center;
}

@media (min-width: 768px) {
  .cta {
    grid-template-columns: 1fr auto;
    padding: var(--sp-6);
  }
}

.cta h2 {
  margin-bottom: var(--sp-1);
}

.cta p {
  margin: 0;
  color: var(--c-text-muted);
}

.cta__form {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.cta__form .input {
  flex: 1 1 200px;
}

.footer {
  background: var(--c-surface-dark);
  color: rgba(255, 255, 255, 0.75);
  padding-block: var(--sp-7) var(--sp-5);
  font-size: var(--fs-14);
}

.footer a {
  color: inherit;
}

.footer a:hover {
  color: #fff;
}

.footer__grid {
  display: grid;
  gap: var(--sp-6);
  margin-bottom: var(--sp-6);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
  }
}

.footer .logo {
  display: inline-flex;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: #fff;
  margin-bottom: var(--sp-3);
}

.footer h4 {
  color: #fff;
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.footer__phone {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-24);
  color: #fff;
  margin-bottom: var(--sp-1);
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-12);
  color: rgba(255, 255, 255, 0.5);
}

/* Мобильная нижняя панель */
.mobile-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding-bottom: env(safe-area-inset-bottom);
}

.mobile-bar a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  padding-top: 8px;
  color: var(--c-text-muted);
  font-size: 11px;
  font-weight: 500;
}

.mobile-bar a[aria-current="page"] {
  color: var(--c-primary);
}

.mobile-bar .icon {
  width: 22px;
  height: 22px;
}

.mobile-bar__cart {
  position: relative;
}

.mobile-bar__cart .iconbtn__count {
  left: calc(50% + 4px);
  top: 4px;
}

@media (max-width: 1023px) {
  body {
    padding-bottom: 64px;
  }
}

@media (min-width: 1024px) {
  .mobile-bar {
    display: none;
  }
}

/* Кнопка фильтров на мобильном */
.filters-toggle {
  display: inline-flex;
}

@media (min-width: 1024px) {
  .filters-toggle {
    display: none;
  }
}

/* Уважение к reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 15. Внутренние страницы ---------- */
.narrow {
  max-width: 820px;
}

/* Типографика длинных текстов */
.prose {
  max-width: 68ch;
}

.prose h2 {
  margin-top: var(--sp-6);
}

.prose p,
.prose li {
  color: #374151;
}

.prose ul,
.prose ol {
  padding-left: var(--sp-5);
  margin: 0 0 var(--sp-4);
}

.prose li {
  margin-bottom: var(--sp-2);
}

.prose blockquote {
  margin: var(--sp-5) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-primary);
  background: var(--c-surface-muted);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--fs-18);
}

/* Каталог производителей */
.vendors {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .vendors {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .vendors {
    grid-template-columns: repeat(4, 1fr);
  }
}

.vendor-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  justify-content: center;
  min-height: 96px;
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.vendor-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-sm);
  color: var(--c-text);
}

.vendor-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-18);
}

.vendor-card__meta {
  font-size: var(--fs-12);
  color: var(--c-text-muted);
}

.vendor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}

.vendor-head__logo {
  display: grid;
  place-items: center;
  min-width: 140px;
  min-height: 72px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
}

.vendor-head h1 {
  margin-bottom: var(--sp-1);
}

.vendor-head p {
  margin: 0;
  max-width: 48rem;
}

/* Шапка страницы услуги */
.page-hero {
  position: relative;
  color: var(--c-text-inverse);
  background: var(--c-surface-dark);
  padding-bottom: var(--sp-8);
}

.page-hero--storage {
  background:
    linear-gradient(90deg, rgba(8, 18, 36, 0.95) 0%, rgba(8, 18, 36, 0.78) 50%, rgba(8, 18, 36, 0.3) 100%),
    url("../img/storage.jpg") center / cover no-repeat,
    #0a1220;
}

.page-hero--fitting {
  background:
    linear-gradient(90deg, rgba(8, 16, 30, 0.95) 0%, rgba(8, 16, 30, 0.78) 50%, rgba(8, 16, 30, 0.3) 100%),
    url("../img/fitting.jpg") center / cover no-repeat,
    #0a1220;
}

@media (max-width: 767px) {
  .page-hero--storage,
  .page-hero--fitting {
    background-image:
      linear-gradient(180deg, rgba(8, 18, 36, 0.86) 0%, rgba(8, 18, 36, 0.92) 100%),
      var(--page-hero-photo);
  }

  .page-hero--storage {
    --page-hero-photo: url("../img/storage.jpg");
  }

  .page-hero--fitting {
    --page-hero-photo: url("../img/fitting.jpg");
  }
}

.page-hero__content {
  max-width: 44rem;
  padding-top: var(--sp-4);
}

.page-hero h1 {
  margin: var(--sp-3) 0;
}

.page-hero__lead {
  font-size: var(--fs-18);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: var(--sp-5);
}

.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.crumbs--inverse,
.crumbs--inverse a {
  color: rgba(255, 255, 255, 0.65);
}

.crumbs--inverse a:hover {
  color: #fff;
}

.crumbs--inverse li + li::before {
  color: rgba(255, 255, 255, 0.35);
}

.btn--on-dark {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Цены услуги и калькулятор */
.price-grid {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 1024px) {
  .price-grid {
    grid-template-columns: 1fr 380px;
    align-items: start;
  }
}

.calc-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.calc-card h3 {
  margin: 0;
}

.calc-card input[type="range"] {
  padding: 0;
  min-height: 32px;
  accent-color: var(--c-primary);
  border: 0;
}

.calc-card__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-border);
  font-weight: 600;
}

/* FAQ */
.faq {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: 68ch;
}

.faq__item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  padding: 0 var(--sp-4);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 56px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: "+";
  font-size: var(--fs-24);
  color: var(--c-text-muted);
  line-height: 1;
}

.faq__item[open] summary::after {
  content: "−";
}

.faq__item p {
  margin: 0 0 var(--sp-4);
  color: var(--c-text-muted);
}

/* Карта */
.map-embed {
  position: relative;
  margin-top: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface-muted);
  aspect-ratio: 4 / 3;
}

.map-embed--lg {
  aspect-ratio: 16 / 9;
}

@media (max-width: 767px) {
  .map-embed,
  .map-embed--lg {
    aspect-ratio: 3 / 4;
  }
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Статья */
.article {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 1024px) {
  .article {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
}

.article__lead {
  font-size: var(--fs-18);
  color: var(--c-text);
}

.article__figure {
  display: grid;
  place-items: center;
  min-height: 220px;
  margin: var(--sp-5) 0;
  border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--c-primary-soft), var(--c-surface-muted));
  color: var(--c-primary);
}

.article__side {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.article__side .card {
  margin: 0;
}

.article__side h3 {
  margin-bottom: var(--sp-3);
}

.link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.link-list a {
  display: block;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fs-14);
  font-weight: 500;
}

.link-list li:last-child a {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Контакты */
.contact-grid {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 640px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-item {
  display: flex;
  gap: var(--sp-3);
}

.contact-item h4 {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-14);
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-weight: 500;
}

.contact-item p {
  margin: 0;
  font-weight: 600;
}

/* Статистика на странице «О компании» */
.stats {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat {
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--c-surface-muted);
}

.stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 800;
  color: var(--c-primary);
  line-height: 1.1;
}

.stat__label {
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}

/* Вход */
.auth {
  margin-top: var(--sp-4);
}

.auth h1 {
  font-size: var(--fs-24);
  margin-bottom: var(--sp-1);
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* 404 */
.error-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--sp-8) 0;
  text-align: center;
}

.error-page__code {
  font-family: var(--font-display);
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--c-primary-soft);
  letter-spacing: -0.04em;
}

@media (min-width: 768px) {
  .error-page__code {
    font-size: 160px;
  }
}

.error-page h1 {
  margin-top: 0;
}

/* ---------- 16. Шинно-дисковый калькулятор ---------- */
.tcalc {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.tcalc__wheels {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 900px) {
  .tcalc__wheels {
    grid-template-columns: 1fr 1fr;
  }
}

.wheel-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-top: 3px solid var(--c-border-strong);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

@media (min-width: 768px) {
  .wheel-card {
    padding: var(--sp-5);
  }
}

.wheel-card--new {
  border-top-color: var(--c-primary);
}

.wheel-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
}

.wheel-card__head h2 {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-20);
}

.wheel-card__tag {
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--c-surface-muted);
  color: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 22px;
}

.wheel-card__tag--new {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.wheel-card__size {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-16);
  font-variant-numeric: tabular-nums;
}

.wheel-card__inputs {
  display: grid;
  gap: var(--sp-3);
}

.wheel-group {
  margin: 0;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-muted);
}

.wheel-group legend {
  padding: 0 var(--sp-2);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-muted);
}

.wheel-group__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.wheel-group .select {
  background-color: var(--c-surface);
}

.wheel-card__draw {
  display: grid;
  place-items: center;
  padding: var(--sp-2);
  border-radius: var(--r-md);
  background:
    linear-gradient(0deg, var(--c-surface-muted), var(--c-surface-muted)),
    repeating-linear-gradient(0deg, transparent 0 11px, rgba(17, 24, 39, 0.04) 11px 12px);
}

.wheel-card__warn {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-warning-soft);
  color: #7a4300;
  font-size: var(--fs-14);
}

/* Чертёж */
.wdraw {
  width: 100%;
  max-width: 320px;
  height: auto;
}


.wdraw__tyre {
  fill: #253044;
  stroke: #111827;
  stroke-width: 1;
}


.wdraw__rim {
  fill: #cbd5e1;
  stroke: #94a3b8;
  stroke-width: 1;
}

.wdraw--new .wdraw__rim {
  fill: #bcd4f5;
  stroke: var(--c-primary);
}

.wdraw__hub {
  fill: #64748b;
}


.wdraw__label {
  fill: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
}

.wdraw__label--accent {
  fill: #b45309;
}

/* Общий вердикт */
.tcalc__verdict .alert {
  align-items: flex-start;
}

/* Таблица сравнения */
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.compare th,
.compare td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-border);
}

.compare thead th {
  position: sticky;
  top: 0;
  background: var(--c-surface-muted);
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  z-index: 1;
}

.compare tbody th[scope="row"] {
  font-weight: 500;
  color: var(--c-text-muted);
  width: 30%;
  min-width: 180px;
}

.compare td {
  font-variant-numeric: tabular-nums;
}

.compare__group th {
  background: var(--c-surface-muted);
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: 700;
  color: var(--c-text);
  text-transform: none;
  letter-spacing: 0;
}

.compare__note {
  margin-top: var(--sp-1);
  font-size: var(--fs-12);
  color: var(--c-text-muted);
  line-height: 1.4;
}

.compare tbody tr:not(.compare__group):hover td {
  background: #fafbfd;
}

/* Таблица альтернативных размеров */
.compare--alt th,
.compare--alt td {
  padding: var(--sp-2);
  vertical-align: top;
}

.compare--alt thead th {
  text-align: center;
  white-space: nowrap;
}

.compare--alt tbody th {
  width: auto;
  min-width: 72px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--c-text);
}

.alt {
  display: block;
  padding: 4px 6px;
  margin-bottom: 3px;
  border-radius: var(--r-sm);
  border-left: 3px solid transparent;
  background: var(--c-surface-muted);
  color: var(--c-text);
  font-size: var(--fs-12);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.alt small {
  display: block;
  font-weight: 400;
  color: var(--c-text-muted);
}

.alt:hover {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.alt--ok {
  border-left-color: var(--c-success);
}

.alt--warn {
  border-left-color: var(--c-warning);
}

.alt--bad {
  border-left-color: var(--c-danger);
  opacity: 0.75;
}

.alt--current {
  background: var(--c-primary);
  color: #fff;
}

.alt--current small {
  color: rgba(255, 255, 255, 0.75);
}

/* Вид спереди */
.wdraw__groove {
  fill: none;
  stroke: #0b1220;
  stroke-width: 2;
  stroke-dasharray: 8 10;
}

.wdraw__spoke {
  fill: #94a3b8;
}

.wdraw--new .wdraw__spoke {
  fill: #7ea6e0;
}

.wdraw__hub {
  fill: #64748b;
}

.wdraw__dim {
  stroke: var(--c-text-muted);
  stroke-width: 1;
}

.wdraw__dim--accent {
  stroke: var(--c-accent);
  stroke-width: 2;
}

/* Схема посадки, вид сверху */
.fitview {
  padding: var(--sp-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}

@media (min-width: 768px) {
  .fitview {
    padding: var(--sp-5);
  }
}

.fitview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.fitview__head h2 {
  margin: 0;
  font-size: var(--fs-20);
}

.fitview__draw {
  overflow-x: auto;
}

.fitdraw {
  width: 100%;
  min-width: 560px;
  height: auto;
}

.fitdraw__zone {
  fill: var(--c-surface-muted);
}

.fitdraw__zone-label {
  fill: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

.fitdraw__face {
  stroke: var(--c-accent);
  stroke-width: 2.5;
}

.fitdraw__face-label {
  fill: #b45309;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
}

.fitdraw__tyre {
  fill: #253044;
}

.fitdraw__tyre.fit--new {
  fill: #1c3a68;
}

.fitdraw__rim {
  fill: #cbd5e1;
}

.fitdraw__rim.fit--new {
  fill: #bcd4f5;
}

.fitdraw__centre {
  stroke: #fff;
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.fitdraw__name {
  fill: var(--c-text);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
}

.fitdraw__size {
  fill: var(--c-text-muted);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
}

.fitdraw__delta,
.fitdraw__delta--bad {
  stroke: var(--c-primary);
  stroke-width: 2;
}

.fitdraw__delta--bad {
  stroke: var(--c-danger);
}

.fitdraw__delta-label {
  fill: var(--c-text);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
}

/* Подсказка о продаже комплектом */
.set-note {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  background: var(--c-info-soft);
  color: #1c3d6e;
  font-size: var(--fs-12);
  line-height: 1.4;
}

.set-note .icon {
  flex: none;
  margin-top: 1px;
}

/* ---------- 17. Категории с фотобаннерами ---------- */
.cat {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-surface-dark);
  color: var(--c-text-inverse);
  isolation: isolate;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}

@media (min-width: 768px) {
  .cat {
    aspect-ratio: 3 / 2;
  }
}

.cat:hover {
  color: var(--c-text-inverse);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.cat__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform 400ms ease-out;
}

.cat:hover .cat__photo {
  transform: scale(1.05);
}

.cat::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(8, 16, 30, 0.1) 30%, rgba(8, 16, 30, 0.82) 78%, rgba(8, 16, 30, 0.94) 100%);
}

.cat--tyres .cat__photo {
  background-image: url("../img/cat-tyres.jpg");
}

.cat--wheels .cat__photo {
  background-image: url("../img/cat-wheels.jpg");
}

.cat--moto .cat__photo {
  background-image: url("../img/cat-moto.jpg");
}

.cat__body {
  position: absolute;
  left: var(--sp-4);
  right: var(--sp-7);
  bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@media (min-width: 768px) {
  .cat__body {
    left: var(--sp-5);
    bottom: var(--sp-5);
  }
}

.cat__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-20);
  line-height: 1.2;
}

@media (min-width: 768px) {
  .cat__title {
    font-size: var(--fs-24);
  }
}

.cat__meta {
  font-size: var(--fs-14);
  color: rgba(255, 255, 255, 0.72);
}

.cat__go {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(2px);
  transition: background var(--t-fast), transform var(--t-fast);
}

@media (min-width: 768px) {
  .cat__go {
    right: var(--sp-5);
    bottom: var(--sp-5);
  }
}

.cat:hover .cat__go {
  background: var(--c-accent);
  color: var(--c-text);
  transform: translateX(3px);
}

/* ---------- 19. Сезон из CMS ---------- */
.badge--season {
  background: var(--c-surface-muted);
  color: var(--c-text);
}

.badge--season[data-season="зимняя"] {
  background: var(--c-primary-soft);
  color: var(--c-primary);
}

.badge--season[data-season="летняя"] {
  background: var(--c-accent-soft);
  color: #9a5b00;
}

.badge--season[data-season="всесезонная"] {
  background: var(--c-success-soft);
  color: #0f6b30;
}

/* Плитка производителей из CMS */
.vendor-card__logo {
  display: block;
  width: 100%;
  height: 56px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.vendor-head__logo {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* Карточка модели с фото из CMS */
.product-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: var(--sp-3);
}

/* ---------- 20. Изоляция от плавающих блоков старой темы ---------- */
.page {
  overflow: hidden;
}

.page #content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  min-height: 0 !important;
}

.page::after {
  content: "";
  display: table;
  clear: both;
}

.footer,
.mobile-bar {
  clear: both;
}

/* ---------- 21. Страница модели ---------- */
.model-head {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

@media (min-width: 900px) {
  .model-head {
    grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

.model-head__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--c-surface-muted);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.model-head__media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: var(--sp-4);
}

.model-head__media a {
  display: contents;
}

.model-head__info h1 {
  font-size: var(--fs-24);
  margin-bottom: var(--sp-4);
}

@media (min-width: 768px) {
  .model-head__info h1 {
    font-size: var(--fs-32);
  }
}

.model-head__info .specs {
  margin-bottom: var(--sp-4);
}

.offers th[title] {
  cursor: help;
}

/* ---------- 22. Евроэтикетка шины ---------- */
.tyre-spec {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}

.tyre-spec img {
  height: 56px;
  width: auto;
}

.tyre-spec__noise {
  position: relative;
  display: inline-block;
}

.tyre-spec__noise b {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: var(--fs-14);
  color: #fff;
}

.gallery__main .product-card__badges {
  z-index: 1;
}

.gallery__main a {
  display: contents;
}

.gallery__main img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  padding: var(--sp-4);
}

.gallery__main {
  position: relative;
}

/* Широкая версия текстовых страниц из CMS */
.prose--wide {
  max-width: 78ch;
}

.news-card__excerpt {
  font-size: var(--fs-14);
  color: var(--c-text-muted);
}

.news-card__excerpt p {
  margin: 0 0 var(--sp-2);
}

.news-card__excerpt img {
  display: none;
}

/* ---------- 23. Оформление заказа ---------- */
.checkout .card:first-child {
  margin-top: 0;
}

.order-errors .alert {
  display: none;
  margin-bottom: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-12);
}

.order-errors .alert[style*="block"] {
  display: flex;
}

.delivery-fields .field[style*="none"] {
  display: none;
}

/* ---------- 24. Типографика контента из CMS ---------- */
.prose--wide h2,
.prose--wide h3 {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

.prose--wide h2 {
  font-size: var(--fs-24);
}

.prose--wide h3 {
  font-size: var(--fs-20);
}

.prose--wide p {
  margin-bottom: var(--sp-4);
}

.prose--wide img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: var(--sp-5) 0;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
}

.prose--wide ul,
.prose--wide ol {
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-4);
}

.prose--wide li {
  margin-bottom: var(--sp-2);
}

/* контент из редактора часто состоит из пустых абзацев и списков без текста */
.prose--wide ul:empty,
.prose--wide ol:empty,
.prose--wide p:empty,
.prose--wide li:empty {
  display: none;
}

.prose--wide strong {
  color: var(--c-text);
}

.prose--wide a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose--wide table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-14);
}

.prose--wide th,
.prose--wide td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-border);
  text-align: left;
}

/* Плитка производителей: аккуратная сетка логотипов */
.vendors {
  align-items: stretch;
}

.vendor-card {
  align-items: center;
  justify-content: center;
  min-height: 88px;
  padding: var(--sp-3) var(--sp-4);
}

.vendor-card__logo {
  max-width: 140px;
  height: 44px;
}

.vendor-card__name {
  text-align: center;
  font-size: var(--fs-16);
}

/* Клик по фото открывает товар */
a.product-card__media {
  display: grid;
  cursor: pointer;
}

/* ---------- 25. Защита от горизонтального переполнения ---------- */
/* Гриды по умолчанию не дают колонкам сжиматься уже содержимого:
   у нативных select минимальная ширина равна самому длинному пункту.
   Поэтому всем колонкам явно разрешаем сжиматься. */
body {
  overflow-x: clip;
}

.field,
.selector__row > *,
.selector__size > *,
.form-grid > *,
.cats > *,
.vendors > *,
.grid-products > *,
.features > *,
.news > *,
.steps > *,
.services > *,
.brands > *,
.checkout > *,
.product > *,
.catalog > *,
.article > * {
  min-width: 0;
}

.selector__size {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.selector__row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
  .selector__row--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .selector__row--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.select,
.input,
.textarea {
  max-width: 100%;
  text-overflow: ellipsis;
}

/* на узких экранах размер шины ставим в одну строку без давки */
@media (max-width: 479px) {
  .selector__size {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    row-gap: var(--sp-3);
  }

  .selector__size > .field:nth-child(5) {
    grid-column: 1 / -1;
  }

  .selector__size > .selector__sep:nth-child(4) {
    display: none;
  }

  .tabs__tab {
    padding: 0 var(--sp-3);
    font-size: var(--fs-14);
  }
}

/* одноколоночные и двухколоночные сетки на телефоне тоже должны сжиматься */
@media (max-width: 639px) {
  .hero__grid,
  .form-grid,
  .cats,
  .services,
  .features,
  .news,
  .steps,
  .checkout,
  .product,
  .catalog,
  .article,
  .price-grid,
  .calc,
  .calc__forms,
  .model-head,
  .tcalc__wheels,
  .contact-grid,
  .wheel-card__inputs {
    grid-template-columns: minmax(0, 1fr);
  }

  .vendors,
  .grid-products,
  .brands,
  .stats,
  .selector__row,
  .wheel-group__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wheel-group__row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------- 26. Всплывающая корзина (диалог jQuery UI) ---------- */
.ui-widget-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(15, 26, 43, 0.55);
}

.ui-dialog {
  position: fixed;
  z-index: 301;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
  width: min(920px, calc(100vw - 32px)) !important;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--shadow-lg);
  outline: none;
  font-family: var(--font-body);
}

.ui-dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.ui-dialog-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-20);
  color: var(--c-text);
}

.ui-dialog-titlebar-close {
  width: 40px;
  height: 40px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--c-surface-muted);
  color: transparent;
  font-size: 0;
  cursor: pointer;
  position: relative;
}

.ui-dialog-titlebar-close:hover {
  background: var(--c-danger-soft);
}

.ui-dialog-titlebar-close::before,
.ui-dialog-titlebar-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: var(--c-text);
  border-radius: 2px;
}

.ui-dialog-titlebar-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ui-dialog-titlebar-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.ui-dialog-titlebar-close .ui-icon,
.ui-dialog-titlebar-close .ui-button-icon-space {
  display: none;
}

.ui-dialog-content {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface);
}

.ui-dialog-buttonpane {
  display: flex;
  justify-content: flex-end;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-muted);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.ui-dialog-buttonset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.ui-dialog-buttonset button {
  min-height: var(--control-h);
  padding: 0 var(--sp-5);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-weight: 600;
  cursor: pointer;
}

.ui-dialog-buttonset button#btn-cart-checkout {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-text);
}

.ui-dialog-buttonset button#btn-cart-checkout:hover {
  background: var(--c-accent-hover);
}

/* содержимое корзины */
.table-cart {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.table-cart th,
.table-cart td {
  padding: var(--sp-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--c-border);
}

.table-cart thead th {
  font-size: var(--fs-12);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted);
  background: var(--c-surface-muted);
  white-space: nowrap;
}

.table-cart .cart-image img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.table-cart a {
  color: var(--c-text);
  font-weight: 600;
}

.table-cart a:hover {
  color: var(--c-primary);
}

.table-cart .quantity-input,
.table-cart input[type="text"] {
  width: 56px;
  min-height: 36px;
  padding: 0 var(--sp-2);
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  text-align: center;
  font-weight: 600;
}

.table-cart .control-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.table-cart .btn-mini {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--c-border-strong);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text-muted);
  cursor: pointer;
}

.table-cart .btn-mini:hover {
  background: var(--c-surface-muted);
  color: var(--c-text);
}

.table-cart .btn-mini.disabled {
  opacity: 0.4;
  pointer-events: none;
}

.table-cart .btn-danger {
  border-color: transparent;
  color: var(--c-danger);
}

.table-cart .btn-danger:hover {
  background: var(--c-danger-soft);
}

.table-cart tr.warning td {
  background: var(--c-accent-soft);
}

@media (max-width: 767px) {
  .ui-dialog-content {
    padding: var(--sp-3);
  }

  .table-cart th,
  .table-cart td {
    padding: var(--sp-2);
  }

  .table-cart thead th:nth-child(3),
  .table-cart tbody td:nth-child(3) {
    display: none;
  }

  .ui-dialog-buttonset {
    width: 100%;
  }

  .ui-dialog-buttonset button {
    flex: 1;
  }
}