/* theme-v2 · md5:295af0dc24 · собран из src/styles/theme.css + src/styles/legacy-compat.css */
/* === src/styles/theme.css === */
/* ============================================================================
   MASTER.com.kg — дизайн-система v2 «современный минимализм»
   ----------------------------------------------------------------------------
   Принципы:
     • белый фон, много воздуха, тонкие границы вместо тяжёлых теней;
     • одна типографическая шкала и один шаг отступов (кратно 4px);
     • ОДИН тип кнопок: одна форма, один радиус, одна высота;
     • оранжевый — только главный CTA, синий — бренд и акценты;
     • весь контент видим без JS (никаких «opacity: 0 до анимации»).

   Контракт с js/main.min.js и js/quiz.js (имена классов менять нельзя):
     .header--scrolled, .nav--open, .nav__overlay--visible, .nav__sublist--open,
     .burger--active, .bottom-bar--hidden, .scroll-top--visible,
     .price-item__header--active, .price-item__body--open,
     .animate-fade-in--visible, .form__input--error, .form__success--visible,
     .reviews__track / .reviews__btn--prev|--next / .reviews__dots / .reviews__dot--active,
     .quiz__step.active, .quiz__option.selected, .quiz__input--error
   ============================================================================ */

/* ---------------------------------------------------------------- 1. Токены */
:root {
  /* Цвет */
  --color-primary: #0B5ED7;
  --color-primary-dark: #0A4CB0;
  --color-primary-soft: rgba(11, 94, 215, 0.08);
  --color-primary-soft-strong: rgba(11, 94, 215, 0.14);
  /* CTA-оранжевый: #FF7A00 давал контраст 2.61:1 с белым текстом (WCAG AA — провал).
     Затемнён до значений с контрастом ≈5.2:1 (обычный) и ≈4.6:1 на hover. */
  --color-accent: #C2410C;
  --color-accent-dark: #9A3412;
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-text: #0F172A;
  /* WCAG AA: прежние #64748B / #94A3B8 на светлом фоне (#FFFFFF 4.76 / 2.56,
     #F7F8FA 4.47 / 2.41) не дотягивали до 4.5:1 — затемнены до 7.1 и 5.0 (на #F7F8FA). */
  --color-text-muted: #475569;
  --color-text-light: #616B7A;
  --color-bg: #FFFFFF;
  --color-bg-subtle: #F7F8FA;
  --color-border: #E7E9EF;
  --color-border-strong: #D5D9E2;
  --color-white: #FFFFFF;
  /* WhatsApp-зелёный: фирменный #22C55E давал 2.27:1 с белым текстом на кнопке;
     затемнён до 5.6:1. Для текста/иконок на светлом фоне тоже подходит. */
  --color-whatsapp: #0F7B41;
  --color-telegram: #229ED9;

  /* Типографика */
  --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.0625rem;   /* 17px */
  --text-xl: 1.25rem;     /* 20px */
  --h2: clamp(1.5rem, 2.6vw, 2rem);
  --h1: clamp(2rem, 4.4vw, 3.25rem);

  /* Шаг отступов (кратно 4px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --section-y: clamp(56px, 7vw, 96px);

  /* Форма */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 6px 20px rgba(15, 23, 42, 0.07);
  --shadow-cta: 0 6px 18px rgba(255, 122, 0, 0.22);
  --transition: 0.2s ease;

  /* Каркас */
  --container-max: 1200px;
  --container-padding: 20px;
  --header-height: 64px;
  --header-height-desktop: 76px;
  --bottom-bar-height: 60px;
}

/* ------------------------------------------------------------- 2. Базовый слой */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-main);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-width: 320px;
  padding-bottom: 0;
}

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

/* Критично: без height:auto атрибуты width/height тянут картинку по высоте
   (hero-фото растягивалось до 900px вместо пропорции 4:3) */
img { height: auto; }

a { color: inherit; text-decoration: none; }

ul,
ol { list-style: none; }

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

button { cursor: pointer; background: none; border: 0; }

h1, h2, h3, h4 {
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

h1 { font-size: var(--h1); font-weight: 800; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--text-lg); }

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

.skip-to-content {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--radius-md) 0;
  font-size: var(--text-sm);
  font-weight: 600;
}
.skip-to-content:focus { left: 0; }

/* --------------------------------------------------------- 3. Сетка и секции */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.section { padding: var(--section-y) 0; }

.section--bg-light { background: var(--color-bg-subtle); }

.section-title {
  font-size: var(--h2);
  text-align: center;
  margin-bottom: var(--space-6);
  letter-spacing: -0.02em;
}

/* Появление блоков: контент виден всегда, анимация только как украшение.
   Класс .animate-fade-in--visible добавляет main.min.js при скролле. */
.animate-fade-in,
.fade-in { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .animate-fade-in--visible {
    animation: fadeUp 0.45s ease both;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

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

/* ------------------------------------------------------------------ 4. Кнопки
   Единый тип: одна высота, один радиус, один набор состояний. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn--sm {
  min-height: 40px;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
}

.btn--primary {
  background: var(--color-primary);
  color: #fff;
}
@media (hover: hover) {
  .btn--primary:hover { background: var(--color-primary-dark); }
}

.btn--outline {
  background: #fff;
  border-color: var(--color-border-strong);
  color: var(--color-text);
}
@media (hover: hover) {
  .btn--outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

/* Главный CTA — единственное место, где используется оранжевый */
.btn--cta-primary {
  background: var(--color-accent);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
@media (hover: hover) {
  .btn--cta-primary:hover {
    background: var(--color-accent-dark);
    transform: translateY(-1px);
  }
}

.btn--cta-pulse { animation: none; }

.btn--cta-primary:active { transform: translateY(0); }

.btn--phone {
  background: var(--color-primary);
  color: #fff;
}
.btn--whatsapp {
  background: var(--color-whatsapp);
  color: #fff;
}
.btn--telegram {
  background: var(--color-telegram);
  color: #fff;
}
.btn--whatsapp:active,
.btn--telegram:active,
.btn--phone:active { transform: translateY(1px); }

/* ------------------------------------------------------------- 5. Хедер и меню */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow var(--transition);
}
/* Размытие живёт на псевдоэлементе, а не на .header: backdrop-filter на
   элементе делает его containing block для position:fixed, из-за чего
   мобильная панель .nav (position:fixed; top:0; bottom:0) обрезалась по
   высоте хедера (64px) — в открытом меню был виден только первый пункт,
   и панель наезжала на логотип. С псевдоэлементом containing block не
   создаётся, вид хедера не меняется. */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  backdrop-filter: saturate(180%) blur(12px);
  pointer-events: none;
}
.header--scrolled { box-shadow: var(--shadow-sm); }

.header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.header__logo { display: flex; flex-direction: column; line-height: 1.1; flex: 0 0 auto; }
.header__logo-text {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}
.header__logo-sub {
  font-size: 0.6875rem;
  color: var(--color-text-light);
  letter-spacing: 0.02em;
}

.nav { flex: 1 1 auto; }

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
@media (hover: hover) {
  .nav__link:hover { color: var(--color-text); }
}
.nav__link[aria-current="page"] {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.nav__dropdown-icon { font-size: 0.625rem; color: var(--color-text-light); }

.nav__sublist {
  position: absolute;
  top: calc(100% + 10px);
  left: -12px;
  min-width: 260px;
  padding: var(--space-2);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  display: none;
}
.nav__sublist--open { display: block; }

@media (hover: hover) and (min-width: 992px) {
  .nav__item--dropdown:hover .nav__sublist { display: block; }
  /* Доступность с клавиатуры: на десктопе клик по «Услуги» отменяется (preventDefault),
     поэтому без :focus-within подменю нельзя открыть табом/Enter. */
  .nav__item--dropdown:focus-within .nav__sublist { display: block; }

  /* Мостик через зазор между пунктом меню и подменю.
     Без него курсор, двигаясь к пункту списка, оказывается «в пустоте»:
     :hover на .nav__item--dropdown теряется, подменю закрывается и нажать пункт нельзя.
     Псевдоэлемент принадлежит подменю (потомку li), поэтому ховер сохраняется. */
  .nav__sublist::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: -12px;
    height: 12px;
  }
}

.nav__sublink {
  display: block;
  padding: 10px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
@media (hover: hover) {
  .nav__sublink:hover { background: var(--color-bg-subtle); color: var(--color-primary); }
}

.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex: 0 0 auto;
}

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}
.header__phone-icon { width: 18px; height: 18px; color: var(--color-primary); flex: 0 0 auto; }
@media (hover: hover) {
  .header__phone:hover .header__phone-number { color: var(--color-primary); }
}

.burger {
  display: none;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  position: relative;
}
.burger__line,
.burger__line::before,
.burger__line::after {
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: var(--color-text);
  border-radius: 2px;
  transform: translateX(-50%);
  transition: transform var(--transition), opacity var(--transition);
}
.burger__line { top: 50%; margin-top: -1px; }
.burger__line::before { content: ''; top: -6px; transform: translateX(-50%); }
.burger__line::after { content: ''; top: 6px; transform: translateX(-50%); }
.burger--active .burger__line { background: transparent; }
.burger--active .burger__line::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.burger--active .burger__line::after { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

.nav__overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 90;
}
.nav__overlay--visible { opacity: 1; visibility: visible; }

/* Мобильная навигация — панель справа */
@media (max-width: 991px) {
  .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(320px, 86vw);
    padding: var(--space-6) var(--space-5);
    background: #fff;
    border-left: 1px solid var(--color-border);
    transform: translateX(100%);
    /* visibility убирает закрытое меню из дерева доступности и из табуляции,
       поэтому в разметке не нужен aria-hidden (он скрывал меню и на десктопе).
       Задержка 0.25s — чтобы панель не исчезала раньше окончания выезда. */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    overflow-y: auto;
    z-index: 95;
    flex: 0 0 auto;
  }
  .nav--open { transform: translateX(0); visibility: visible; transition: transform 0.25s ease; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--color-border); }
  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: var(--space-4) 0;
    font-size: var(--text-base);
    border-bottom: 0;
  }
  .nav__sublist {
    position: static;
    display: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 var(--space-2) var(--space-3);
    min-width: 0;
  }
  /* Правило идёт ПОСЛЕ .nav__sublist{display:none}: при равной специфичности
     побеждает последнее, поэтому без этой строки подменю «Услуги» не открывалось
     ни на одной мобильной/планшетной ширине (< 992px). */
  .nav__sublist--open { display: block; }
  .nav__item--dropdown { display: block; }
  .burger { display: block; }
  .header__cta { display: none; }
  .header__phone-number { display: none; }
  /* Телефон на мобильном — единственное конверсионное действие в шапке
     (кнопка «Вызвать мастера» здесь скрыта), поэтому делаем его заметной
     кнопкой-иконкой, а не серой рамкой. */
  .header__phone {
    padding: 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
  }
}

/* --- Шапка: адаптивный ритм и запас ширины (правила поверх объявленных выше) ---
   В ряду шапки при контейнере 1200px доступно всего 1160px: логотип 143 +
   меню 638 + телефон 156 + кнопка 159 + зазоры 64 ≈ 1160. Запаса нет, поэтому
   на десктопе зазоры меню адаптивные, на планшете 992–1199px номер телефона
   скрывается, а разделитель «меню | действия» появляется только там, где
   хватает места (≥1200px). Иначе меню упиралось в кнопки и ломало строку. */
@media (min-width: 992px) {
  .nav__list { gap: clamp(14px, 1.2vw, 18px); }
}

/* Телефон — главный способ связи в шапке: номер делаем плотнее и заметнее */
.header__phone-number { font-weight: 700; }

/* Кнопка в шапке — тот же главный CTA, что и в контенте (см. .btn--cta-primary):
   синяя кнопка конкурировала с оранжевыми CTA на странице. */
.header__cta {
  background: var(--color-accent);
  box-shadow: var(--shadow-cta);
}
@media (hover: hover) {
  .header__cta:hover { background: var(--color-accent-dark); }
}

/* Широкий десктоп: шапка выше (задействуем --header-height-desktop, который
   до этого не использовался) и появляется разделитель «меню | действия» */
@media (min-width: 1200px) {
  .header__inner { min-height: var(--header-height-desktop); }
  /* Sticky-шапка стала выше 64px — якоря не должны уезжать под неё */
  html { scroll-padding-top: calc(var(--header-height-desktop) + 12px); }
  .header__actions {
    padding-left: var(--space-5);
    border-left: 1px solid var(--color-border);
  }
}

/* Планшет 992–1199px: меню компактнее, телефон — иконка-кнопка,
   при этом основная кнопка призыва остаётся видимой */
@media (min-width: 992px) and (max-width: 1199px) {
  .nav__list { gap: var(--space-3); }
  .nav__link { font-size: var(--text-xs); }
  .header__phone {
    padding: 10px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
  }
  .header__phone-number { display: none; }
}

/* ------------------------------------------------------------------- 6. Hero */
.hero {
  position: relative;
  padding: clamp(32px, 5vw, 64px) 0 clamp(48px, 6vw, 80px);
  background: var(--color-bg);
}

.hero .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}

.hero__content { max-width: 620px; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.hero__title { margin-bottom: var(--space-4); }

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin-bottom: var(--space-5);
  max-width: 52ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.hero__chip svg { width: 15px; height: 15px; color: var(--color-primary); flex: 0 0 auto; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hero__stat-number {
  font-size: clamp(1.5rem, 2.6vw, 1.875rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text);
  /* «90 дней» / «4,6 ★» не должны разрываться на две строки на мобильных */
  white-space: nowrap;
}
.hero__stat-label { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.35; }

.hero__media { margin: 0; }
.hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  background: var(--color-bg-subtle);
}

@media (min-width: 992px) {
  .hero .container {
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-7);
  }
}

/* -------------------------------------------------------------- 7. Преимущества */
.advantages__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.advantage-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
@media (hover: hover) {
  .advantage-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
  }
}

.advantage-card__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.advantage-card__icon svg { width: 22px; height: 22px; }

.advantage-card__title { font-size: var(--text-base); margin-bottom: 4px; letter-spacing: -0.01em; }
.advantage-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }

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

/* ------------------------------------------------------- 8. Инлайн-CTA-полоса */
.cta-inline {
  margin-top: var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}
.cta-inline__title { font-size: var(--text-lg); font-weight: 700; }
.cta-inline__text { flex: 1 1 260px; font-size: var(--text-sm); color: var(--color-text-muted); }

/* ------------------------------------------------------------------ 9. Услуги */
.services__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
@media (hover: hover) {
  .service-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
  }
}

.service-card__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.service-card__icon svg { width: 22px; height: 22px; }

.service-card__title { font-size: var(--text-lg); letter-spacing: -0.01em; }
.service-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); }

.service-card__arrow {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  color: var(--color-text-light);
  font-size: var(--text-lg);
  transition: transform var(--transition), color var(--transition);
}
@media (hover: hover) {
  .service-card:hover .service-card__arrow { color: var(--color-primary); transform: translate(2px, -2px); }
}

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

/* ------------------------------------------------------------------ 10. Бренды */
.brands__scroll {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.brand-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: var(--space-3);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition);
}
@media (hover: hover) {
  .brand-item:hover { border-color: var(--color-border-strong); }
}

.brand-item > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Логотипы бывают двух видов: SVG со своими width/height и SVG только с viewBox.
   Задаём определённый бокс (height + width:100% + object-fit: contain),
   иначе у «viewBox-только» файлов ширина схлопывается в 0 и логотип пропадает. */
.brand-item__img {
  width: 100%;
  height: 36px;
  object-fit: contain;
  transition: transform var(--transition);
}
@media (hover: hover) {
  .brand-item:hover .brand-item__img { transform: scale(1.04); }
}

@media (min-width: 640px) {
  .brands__scroll { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .brands__scroll { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ------------------------------------------------------------------ 11. Цены */
.price-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.price-item + .price-item { margin-top: var(--space-2); }

.price-item__header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: left;
}
@media (hover: hover) {
  .price-item__header:hover { background: var(--color-bg-subtle); }
}

.price-item__icon {
  color: var(--color-text-light);
  font-size: 0.6875rem;
  transition: transform var(--transition);
}
.price-item__header--active .price-item__icon { transform: rotate(180deg); }

.price-item__body { display: none; }
.price-item__body--open { display: block; }

.price-table { width: 100%; border-collapse: collapse; }
.price-table__row { border-top: 1px solid var(--color-border); }
.price-table__row td {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.price-table__row td:last-child {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: var(--color-text);
}
.price-table__row--highlight td {
  color: var(--color-text);
  background: var(--color-primary-soft);
}

.prices__table-desktop { display: none; }
.price-table-desktop {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.price-table-desktop th,
.price-table-desktop td {
  padding: var(--space-4);
  font-size: var(--text-sm);
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.price-table-desktop th {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
}
.price-table-desktop th:first-child,
.price-table-desktop td:first-child { text-align: left; }
.price-table-desktop tbody tr:last-child td { border-bottom: 0; }
.price-table-desktop tbody td { color: var(--color-text); }

.prices__cta {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
}
.prices__cta a { color: var(--color-primary); font-weight: 600; }

@media (min-width: 768px) {
  .prices__accordion { display: none; }
  .prices__table-desktop { display: block; }
}

/* ------------------------------------------------------------- 12. Как работаем */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.step { display: flex; gap: var(--space-4); align-items: flex-start; }

.step__number {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: 700;
}
.step__title { font-size: var(--text-base); margin-bottom: 2px; }
.step__desc { font-size: var(--text-sm); color: var(--color-text-muted); }

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); }
  .step { flex-direction: column; gap: var(--space-3); }
}

/* ------------------------------------------------------------------- 13. FAQ */
.faq__accordion { display: flex; flex-direction: column; gap: var(--space-2); }

.faq__answer {
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ---------------------------------------------------------------- 14. Отзывы */
.reviews__carousel { overflow: hidden; }

.reviews__track {
  display: flex;
  gap: 16px;
  transition: transform 0.4s ease;
}

.review-card {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.review-card__text { font-size: var(--text-sm); line-height: 1.6; }
.review-card__author { display: flex; align-items: center; gap: var(--space-3); }
.review-card__avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 700;
}
.review-card__name { font-size: var(--text-sm); font-weight: 600; }
.review-card__city { font-size: var(--text-xs); color: var(--color-text-light); }
.review-card__stars { display: flex; gap: 2px; margin-top: 2px; }
.review-card__star { color: var(--color-warning); font-size: var(--text-xs); }

@media (min-width: 768px) {
  .review-card { flex: 0 0 calc((100% - 32px) / 3); }
}

.reviews__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.reviews__btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--text-lg);
  line-height: 1;
  color: var(--color-text-muted);
  transition: border-color var(--transition), color var(--transition);
}
@media (hover: hover) {
  .reviews__btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
}

.reviews__dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.reviews__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-border-strong);
  transition: width var(--transition), background-color var(--transition);
}
.reviews__dot--active { width: 22px; background: var(--color-primary); }

.reviews__note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-light);
  text-align: center;
}
/* Кнопки-ссылки «Все отзывы на Google / в 2ГИС» держим в один ряд по центру.
   Раньше контейнер был обычным блоком, а `#reviews .btn--primary` получала
   `display:flex` + `margin:auto` и центрировалась отдельной строкой, тогда как
   `.btn--secondary` оставалась инлайновой слева — кнопки разъезжались. */
.reviews__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.reviews__carousel + .reviews__controls + .reviews__dots + .reviews__note + .btn { margin: var(--space-5) auto 0; }
/* Одиночная кнопка отзывов (главная, Astro) центрируется как блок. */
#reviews .btn--primary { display: flex; margin: var(--space-5) auto 0; width: fit-content; }
/* А внутри группы .reviews__actions авто-отступы запрещены: иначе первая кнопка
   уезжает вправо, а вторая остаётся слева (правило #reviews .btn--primary имеет
   id-специфичность, поэтому сброс делаем с той же специфичностью). */
#reviews .reviews__actions .btn { margin: 0; }
#reviews .reviews__actions .btn--primary { display: inline-flex; width: auto; }

/* --------------------------------------------------------- 15. Рейтинг Google */
.google-reviews { display: flex; justify-content: center; }

.google-reviews__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), box-shadow var(--transition);
}
@media (hover: hover) {
  .google-reviews__badge:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-sm); }
}

.google-reviews__logo {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-weight: 800;
}
.google-reviews__info { display: flex; flex-direction: column; gap: 2px; }
.google-reviews__source { font-size: var(--text-xs); color: var(--color-text-light); }
.google-reviews__rating { display: flex; align-items: baseline; gap: var(--space-2); }
.google-reviews__score { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; }
.google-reviews__stars { display: flex; gap: 2px; }
.google-reviews__star { color: var(--color-warning); font-size: var(--text-sm); }
.google-reviews__count { font-size: var(--text-xs); color: var(--color-text-muted); }
.google-reviews__note { font-size: var(--text-xs); color: var(--color-text-light); }
.google-reviews__cta { color: var(--color-primary); }

/* --------------------------------------------------------------- 16. Контакты */
.contacts__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.contacts__info { display: flex; flex-direction: column; gap: var(--space-5); }

.contacts__item { display: flex; gap: var(--space-3); }
.contacts__item-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.contacts__item-icon svg { width: 20px; height: 20px; }
.contacts__item-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
  margin-bottom: 2px;
}
.contacts__item-text { font-size: var(--text-base); }
.contacts__item-phone { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
@media (hover: hover) {
  .contacts__item-phone:hover { color: var(--color-primary); }
}

.contacts__title { font-size: var(--text-base); margin-bottom: var(--space-2); }
.contacts__schedule p { font-size: var(--text-sm); color: var(--color-text-muted); }

.contacts__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.contacts__social-link {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: border-color var(--transition), color var(--transition);
}
@media (hover: hover) {
  .contacts__social-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
}

/* Форма */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
}
.form__group { display: flex; flex-direction: column; gap: var(--space-2); }
.form__label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.form__input,
.form__textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form__textarea { min-height: 96px; padding-top: var(--space-3); resize: vertical; }
.form__input::placeholder,
.form__textarea::placeholder { color: var(--color-text-light); }
.form__input:focus,
.form__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.form__input--error { border-color: #DC2626; }
.form__error {
  display: none;
  font-size: var(--text-xs);
  color: #DC2626;
}
.form__input--error + .form__error { display: block; }
.form__success {
  display: none;
  padding: var(--space-3) var(--space-4);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  color: #047857;
  font-size: var(--text-sm);
}
.form__success--visible { display: block; }
.form .btn { width: 100%; }

.contacts__map { display: flex; }
.map-placeholder {
  width: 100%;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
  transition: border-color var(--transition);
}
@media (hover: hover) {
  .map-placeholder:hover { border-color: var(--color-primary); color: var(--color-primary); }
}
.map-placeholder__icon { font-size: 1.75rem; }
.map-placeholder__text { font-size: var(--text-sm); font-weight: 600; }

@media (min-width: 992px) {
  .contacts__grid { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}

/* ------------------------------------------------------------------ 17. Квиз */
.quiz-section { padding: var(--section-y) 0; background: var(--color-bg-subtle); }
.quiz-section__title { font-size: var(--h2); text-align: center; }
.quiz-section__subtitle {
  margin: var(--space-3) auto var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  max-width: 60ch;
}

.quiz {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-6);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
}

.quiz__progress { margin-bottom: var(--space-6); }
.quiz__progress-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: width 0.3s ease;
}
.quiz__progress { padding-top: 0; }
.quiz__progress::before { content: none; }
.quiz__steps {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-3);
}
.quiz__step {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border-strong);
  background: #fff;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-light);
}
.quiz__step.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-primary-soft); }
.quiz__step.completed { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }

.quiz__step-content { display: none; }
.quiz__step-content.active { display: block; }

.quiz__question { font-size: var(--text-xl); margin-bottom: var(--space-4); }

.quiz__options { display: grid; gap: var(--space-3); }
.quiz__options--grid { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .quiz__options--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Опции квиза рендерятся как <button type="button"> (доступность с клавиатуры:
   Tab + Enter/Space). Сбрасываем нативные стили кнопки, чтобы вид не менялся. */
button.quiz__option {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  background: #fff;
  cursor: pointer;
}

.quiz__option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  text-align: left;
  transition: border-color var(--transition), background-color var(--transition);
}
@media (hover: hover) {
  .quiz__option:hover { border-color: var(--color-primary); }
}
.quiz__option.selected {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
}

.quiz__form { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
@media (min-width: 640px) {
  .quiz__form { grid-template-columns: 1fr 1fr; }
}
.quiz__input {
  min-height: 48px;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.quiz__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.quiz__input--error { border-color: #DC2626; }
.quiz__error,
.quiz__phone-error { font-size: var(--text-xs); color: #DC2626; }

.quiz__result { text-align: center; }
.quiz__result-title { margin-bottom: var(--space-4); }
.quiz__result-card {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle);
  margin-bottom: var(--space-5);
}
.quiz__result-text { font-size: var(--text-sm); color: var(--color-text-muted); }
.quiz__result-price { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; margin: var(--space-2) 0; }
.quiz__result-urgency { font-size: var(--text-sm); color: var(--color-text-muted); }

.quiz__nav { display: flex; justify-content: flex-start; margin-top: var(--space-5); }
.quiz__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
@media (hover: hover) {
  .quiz__nav-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
}

.quiz__success { font-size: var(--text-sm); color: #047857; }

/* --------------------------------------------------------------- 18. SEO-текст */
.seo-text { padding: var(--section-y) 0; background: #fff; }
.seo-text p {
  max-width: 78ch;
  margin-bottom: var(--space-4);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.seo-text h3,
.seo-text h4 { margin: var(--space-6) 0 var(--space-3); font-size: 1.125rem; }
.seo-text ul { margin: 0 0 var(--space-4); display: grid; gap: var(--space-2); }
.seo-text li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 78ch;
}
.seo-text li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.65em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}
.seo-text strong { color: var(--color-text); }

/* --------------------------------------------------------------- 19. Блог-тизер */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition);
}
@media (hover: hover) {
  .blog-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
}
.blog-card__icon {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
}
.blog-card__icon img { width: 26px; height: 26px; }
.blog-card__title { font-size: var(--text-lg); letter-spacing: -0.01em; }
.blog-card__desc { font-size: var(--text-sm); color: var(--color-text-muted); flex: 1 1 auto; }
.blog-card__link { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
/* Хаб блога: карточки-статьи используют .blog-card__body/__img/__excerpt/__meta/__category.
   Прижимаем ссылку «Читать далее» к низу карточки, чтобы в ряду они стояли на одной линии */
.blog-card__img { width: 100%; border-radius: var(--radius-md); }
.blog-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; }
.blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); font-size: var(--text-xs); color: var(--color-text-light); }
.blog-card__category { color: var(--color-primary); font-weight: 600; }
.blog-card__excerpt { flex: 1 1 auto; font-size: var(--text-sm); color: var(--color-text-muted); }
.blog-all-link { display: flex; justify-content: center; margin-top: var(--space-6); }

/* ------------------------------------------------------------------ 20. Подвал */
.footer {
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  padding: var(--space-8) 0 var(--space-5);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.footer__logo-text {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-primary);
}
.footer__logo-sub { font-size: var(--text-sm); margin-top: var(--space-1); }
.footer__about { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-3); max-width: 34ch; }

.footer__title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  margin-bottom: var(--space-4);
  font-weight: 600;
}
.footer__title--spaced { margin-top: var(--space-6); }

/* Иконка внутри текстовой кнопки наследует цвет текста */
.btn svg { flex: 0 0 auto; }
.footer__links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__link { font-size: var(--text-sm); color: var(--color-text-muted); }
@media (hover: hover) {
  .footer__link:hover { color: var(--color-primary); }
}

.footer__contact-item {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.footer__contact-phone { font-size: var(--text-lg); font-weight: 700; color: var(--color-text); }
@media (hover: hover) {
  .footer__contact-phone:hover { color: var(--color-primary); }
}

.footer__social { display: flex; gap: var(--space-3); }
.footer__social-link {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-text-muted);
  transition: border-color var(--transition), color var(--transition);
}
@media (hover: hover) {
  .footer__social-link:hover { border-color: var(--color-primary); color: var(--color-primary); }
}

.footer__copyright {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

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

/* ------------------------------------------ 21. Мобильная панель и плавающие кнопки */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transition: transform var(--transition);
}
.bottom-bar--hidden { transform: translateY(110%); }

.bottom-bar__btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: var(--bottom-bar-height);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--color-text-muted);
}
.bottom-bar__btn-icon { font-size: 1.125rem; line-height: 1; }
.bottom-bar__btn--primary { color: var(--color-accent); }

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

.whatsapp-float,
.telegram-float {
  position: fixed;
  right: var(--space-4);
  z-index: 70;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  color: #fff;
  font-size: 1.25rem;
}
.whatsapp-float { bottom: calc(var(--bottom-bar-height) + var(--space-4)); background: var(--color-whatsapp); }
.telegram-float { bottom: calc(var(--bottom-bar-height) + var(--space-4) + 60px); background: var(--color-telegram); }

@media (min-width: 992px) {
  .whatsapp-float { bottom: var(--space-6); }
  .telegram-float { bottom: calc(var(--space-6) + 60px); }
  .scroll-top { bottom: calc(var(--space-6) + 120px); }
}

/* На мобильных нижняя панель уже содержит звонок и мессенджеры —
   плавающие кнопки только перекрывают контент, поэтому скрываем их */
@media (max-width: 991px) {
  .whatsapp-float,
  .telegram-float,
  .scroll-top { display: none; }
}

.scroll-top {
  position: fixed;
  right: var(--space-4);
  bottom: calc(var(--bottom-bar-height) + var(--space-4) + 120px);
  z-index: 70;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: var(--text-base);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition), visibility var(--transition), border-color var(--transition);
}
.scroll-top--visible { opacity: 1; visibility: visible; }
@media (hover: hover) {
  .scroll-top:hover { border-color: var(--color-primary); color: var(--color-primary); }
}
@media (min-width: 992px) {
  .scroll-top { bottom: calc(var(--space-6) + 120px); }
}

/* ------------------------------------------------------------ 23. Утилиты */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Акценты иконок в мобильной панели быстрых действий */
.bottom-bar__btn--call { color: var(--color-primary); }
.bottom-bar__btn--whatsapp { color: var(--color-whatsapp); }
.bottom-bar__btn--telegram { color: var(--color-telegram); }

/* main.min.js добавляет .visible к .fade-in: контент видим и без этого класса,
   правило нужно лишь для полноты системы */
.fade-in.visible { opacity: 1; }

/* ============================================================================
   24. Правки по результатам визуального аудита
   ============================================================================ */

/* Секция без «пустых» полей: для коротких блоков вроде «Как мы работаем» */
.section--compact { padding: clamp(40px, 4.5vw, 64px) 0; }

/* Пояснение под заголовком секции */
.section-lead {
  max-width: 64ch;
  margin: calc(var(--space-3) * -1) auto var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- «Как мы работаем»: компактный степпер с линией-коннектором ------------ */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.step__number {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
}

.step__content { min-width: 0; }
.step__title { font-size: var(--text-base); margin-bottom: 4px; letter-spacing: -0.01em; }
.step__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }

.step__meta {
  display: inline-block;
  margin-top: var(--space-2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}

@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
  .step { flex-direction: column; gap: var(--space-3); padding-right: var(--space-5); }

  /* линия, связывающая шаги */
  .step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 19px;
    left: 56px;
    right: 8px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-primary-soft-strong), var(--color-border));
  }
}

/* --- «Обслуживаем все марки»: подписи под логотипами и CTA ---------------- */
.brands__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .brands__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .brands__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.brands__grid .brand-item { min-height: 96px; }

.brand-item__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  height: 100%;
}

/* Единая подача логотипов: монохром в покое, фирменный цвет при наведении.
   Высота индивидуальная (--logo-h) — подобрана под пропорцию файла, чтобы знаки
   читались оптически одинаково (от 1:1 у Bosch до 7.7:1 у Electrolux). */
.brands__grid .brand-item__img {
  /* Ширину задаём, высоту ограничиваем: у широких wordmark-ов (до 7.7:1)
     это даёт ровную линию по высоте, а квадратные знаки (Bosch 1:1) не раздуваются. */
  width: 100%;
  max-width: 190px;
  height: auto;
  max-height: 30px;
  margin-inline: auto;
  object-fit: contain;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.7;
  transition: filter var(--transition), opacity var(--transition);
}
@media (hover: hover) {
  .brands__grid .brand-item:hover .brand-item__img {
    filter: none;
    opacity: 1;
  }
}

.brand-item__name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-light);
  transition: color var(--transition);
}
@media (hover: hover) {
  .brand-item:hover .brand-item__name { color: var(--color-primary); }
}

.brands__all { display: flex; justify-content: center; margin-top: var(--space-6); }

/* --- «Наши услуги»: компактнее, цена как аргумент ------------------------- */
.service-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.service-card__head .service-card__icon { margin-bottom: 0; }
.service-card__arrow { position: static; }
.service-card__price {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

/* --- Отзывы: на десктопе сетка (JS-карусель работает только < 992px) ------ */
.google-reviews__badge {
  display: flex;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

@media (max-width: 991px) {
  .review-card { flex: 0 0 100%; }
}

@media (min-width: 992px) {
  .reviews__track {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    transform: none !important;
  }
  .reviews__controls,
  .reviews__dots { display: none; }
}

/* Шапка карточки отзыва: источник + дата */
.review-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.review-card__source {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-bg-subtle);
  color: var(--color-text-muted);
}
.review-card__source--google { color: var(--color-primary); background: var(--color-primary-soft); }
.review-card__source--2gis { color: #16A34A; background: rgba(22, 163, 74, 0.1); }

.review-card__date { font-size: var(--text-xs); color: var(--color-text-light); }

.review-card__text { flex: 1 1 auto; }

.reviews__note a { color: var(--color-primary); font-weight: 600; white-space: nowrap; }

/* --- SEO-текст: собственный заголовок и «спокойная» типографика ----------- */
.seo-text__title {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  margin-bottom: var(--space-5);
}

/* ВАЖНО про порядок: базовое правило .scroll-top { display: grid } объявлено ниже
   в секции 21, поэтому скрытие на мобильных нужно объявить в самом конце файла,
   иначе медиазапрос проигрывает по порядку следования. */
@media (max-width: 991px) {
  .whatsapp-float,
  .telegram-float,
  .scroll-top { display: none; }
}

/* === src/styles/legacy-compat.css === */
/* ============================================================================
   legacy-compat.css — слой совместимости для СТАРЫХ страниц.
   ----------------------------------------------------------------------------
   Старые 108 страниц остаются со своей разметкой (HTML и SEO не трогаем),
   но получают новую дизайн-систему. Этот файл подключается ПОСЛЕ theme.css
   и закрывает то, чего в новой системе нет: хлебные крошки, FAQ на <details>,
   страницы товаров, карточки запчастей, сворачивание SEO-текста, hero подстраниц.
   ============================================================================ */

/* ------------------------------------------------------- 1. Хлебные крошки
   В старых страницах .breadcrumbs лежит ВНЕ .container, поэтому задаём
   контейнерные ограничения прямо здесь — иначе крошки прижаты к краю экрана. */
.breadcrumbs {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-4) var(--container-padding) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.breadcrumbs__item { display: inline-flex; align-items: center; gap: var(--space-2); }
.breadcrumbs__link { color: var(--color-primary); }

/* На части страниц (статьи блога) в инлайновых стилях у крошек задан тёмный фон
   из старого дизайна — гасим его: у нас крошки всегда на белом. */
.breadcrumbs { background: none !important; border: 0 !important; }
.breadcrumbs,
.breadcrumbs span,
.breadcrumbs__current { color: var(--color-text-muted) !important; }
.breadcrumbs__link,
.breadcrumbs__link span { color: var(--color-primary) !important; }
.breadcrumbs__sep { color: var(--color-text-light) !important; }
@media (hover: hover) {
  .breadcrumbs__link:hover { text-decoration: underline; }
}
.breadcrumbs__sep { color: var(--color-text-light); }
.breadcrumbs__current { color: var(--color-text-muted); }

/* --------------------------------------------- 2. Hero внутренних страниц
   На главной hero двухколоночный (текст + фото) — этот вариант включается
   только при наличии .hero__media. У старых страниц фото нет, поэтому базовая
   раскладка — одноколоночная. */
.hero .container { display: block; }
@supports selector(:has(*)) {
  .hero:has(.hero__media) .container {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: var(--space-7);
    align-items: center;
  }
}

.hero__bg { display: none; }

/* У внутренних страниц нет фото в hero, поэтому .hero__content был зажат
   620px (базовое правило) и правая половина первого экрана пустовала.
   Отдаём тексту всю ширину: H1 укладывается в 2 строки, а три CTA —
   в один ряд вместо раскладки «2+1». На главной с .hero__media ширину
   всё равно ограничивает колонка грида, там ничего не меняется. */
.hero__content { max-width: 900px; }

/* Sticky-шапка не должна перекрывать контент при переходе по якорям
   (нужно для CTA вида href="#contacts") */
section[id] { scroll-margin-top: 90px; }

/* --- Тап-зоны: у ключевых элементов управления меньшая сторона ≥ 44px.
   На узких экранах header__phone и burger были 40×40, соцссылки в подвале — 40×40,
   ссылки футера — высотой 22px (промахи пальцем на mobile). --- */
@media (max-width: 991px) {
  .burger,
  .header__phone { min-width: 44px; min-height: 44px; }
}
.footer__social-link { width: 44px; height: 44px; }
.footer__link,
.footer__contact-phone,
.contacts__item-phone { display: inline-flex; align-items: center; min-height: 32px; }

/* --- Логотипы брендов на legacy-страницах (плитки .brands__scroll).
   Раньше плитка зажимала логотип фиксированной шириной 120px: квадратные знаки
   (Bosch 1:1) выглядели крошечными, а широкие (Electrolux 7.7:1) — на всю плитку.
   Теперь как в .brands__grid: ширина по плитке, высота ограничена 30px. --- */
.brands__scroll a img.brand-item__img {
  width: 100%;
  max-width: 190px;
  height: auto;
  max-height: 30px;
  margin-inline: auto;
  object-fit: contain;
}

/* У внутренних страниц нет фото в hero — не оставляем лишнюю пустую полосу */
.hero { padding-bottom: var(--space-6); }

/* ------------------------------------------------- 2.1. Статьи блога
   У них своя вёрстка (.article-hero/.article-body) с тёмным градиентом
   в инлайновых стилях — приводим к светлому стилю дизайн-системы. */
.article-hero {
  padding: var(--space-6) 0 var(--space-7);
  background: #fff;
  border-bottom: 1px solid var(--color-border);
}
.article-hero h1 {
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  margin: var(--space-4) 0 var(--space-4);
  color: var(--color-text);
}
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.article-hero__category {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
}
.article-hero__author { color: var(--color-text-light); }
.article-hero__desc {
  max-width: 78ch;
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.article-body { padding: var(--space-6) 0 var(--space-7); }
.article-body p,
.article-body li {
  max-width: 78ch;
  color: var(--color-text);
  line-height: 1.75;
}
.article-body h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin: var(--space-6) 0 var(--space-4); }
.article-body h3 { font-size: var(--text-xl); margin: var(--space-5) 0 var(--space-3); }
/* Маркеры рисуем своим псевдоэлементом, штатные убираем (иначе двойные точки) */
.article-body ul,
.article-body ol {
  margin: 0 0 var(--space-5);
  padding-left: 0;
  display: grid;
  gap: var(--space-2);
  list-style: none !important;
}
.article-body ul li::marker,
.article-body ol li::marker { content: none !important; }
.article-body ul li { position: relative; padding-left: var(--space-5); }
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary);
}
/* Нумерованные списки в статьях: штатные маркеры отключены выше,
   поэтому номера шагов рисуем счётчиком (иначе в тексте пропадали номера и отступ) */
.article-body ol { counter-reset: article-ol; }
.article-body ol > li { counter-increment: article-ol; position: relative; padding-left: var(--space-5); }
.article-body ol > li::before {
  content: counter(article-ol) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
/* Широкие таблицы сравнения на мобильных — горизонтальный скролл внутри блока */
.article-body__table-wrap { margin: var(--space-5) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body__table-wrap > table { margin: 0; }
/* FAQ внутри .article-body: гасим абзацные правила статьи в ответах аккордеона */
.article-body .faq__answer p { margin-bottom: 0; max-width: none; color: inherit; line-height: inherit; }
.article-body img { width: 100%; height: auto; border-radius: var(--radius-lg); margin: var(--space-5) 0; }
.article-footer {
  padding: var(--space-5) 0 var(--space-7);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.article-footer__date { margin-bottom: var(--space-3); }
.hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.hero__badge-icon { font-size: 0.9375rem; line-height: 1; }

.nav__link--active { color: var(--color-primary); }

/* -------------------------------------------------- 3. Подзаголовок секции */
.section-subtitle {
  display: block;
  max-width: 64ch;
  margin: calc(var(--space-3) * -1) auto var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* ------------------------------------------- 4. FAQ на <details> (старые) */
.faq__list { display: flex; flex-direction: column; gap: var(--space-2); }

.faq__item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--color-border-strong); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
  content: '▾';
  color: var(--color-text-light);
  font-size: 0.6875rem;
  transition: transform var(--transition);
}
.faq__item[open] .faq__question::after { transform: rotate(180deg); }
@media (hover: hover) {
  .faq__question:hover { background: var(--color-bg-subtle); }
}

.faq__answer {
  padding: 0 var(--space-5) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.faq__answer p + p { margin-top: var(--space-3); }

/* ------------------------------------- 5. Сворачивание SEO-текста (старое) */
.seo-text__full { display: none; }
.seo-text__full--open { display: block; }

.seo-text__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-4);
  padding: 0 var(--space-5);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  transition: border-color var(--transition), color var(--transition);
}
@media (hover: hover) {
  .seo-text__toggle:hover { border-color: var(--color-primary); color: var(--color-primary); }
}
.seo-text__toggle-icon { transition: transform var(--transition); }
.seo-text__toggle--open .seo-text__toggle-icon { transform: rotate(180deg); }

/* ----------------------------------------------- 6. Страница товара (запчасти) */
.product-detail { padding: var(--space-6) 0 var(--space-8); }
.product-detail__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 768px) {
  .product-detail__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-7); }
}

.product-detail__image {
  padding: var(--space-5);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.product-detail__image img { width: 100%; height: auto; object-fit: contain; }

.product-detail__title { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin-bottom: var(--space-3); }
.product-detail__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.product-detail__brand-logo { width: 16px; height: 16px; object-fit: contain; }
.product-detail__info-text { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }

.product-detail__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.product-detail__price-value { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.product-detail__price-currency { font-size: var(--text-base); color: var(--color-text-muted); }

.product-detail__specs {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-5);
}
.product-detail__spec {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-bottom: 1px solid var(--color-border);
}
.product-detail__spec:last-child { border-bottom: 0; }
.product-detail__spec-label { color: var(--color-text-muted); }
.product-detail__spec-value { font-weight: 600; }

.product-detail__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ------------------------------------------------- 7. Карточки запчастей */
.spares-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 640px) { .spares-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .spares-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.spares-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition), transform var(--transition);
}
@media (hover: hover) {
  .spares-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
}
.spares-card__image {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.spares-card__image img { width: 100%; height: 100%; object-fit: contain; }
.spares-card__body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1 1 auto; }
.spares-card__title { font-size: var(--text-base); letter-spacing: -0.01em; }
.spares-card__price { font-size: var(--text-base); font-weight: 700; margin-top: auto; }

/* ------------------------------------------------------ 8. Прочие карточки */
.related-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.related-card__img { width: 100%; height: auto; border-radius: var(--radius-md); }
.related-card__body { display: flex; flex-direction: column; gap: var(--space-2); }
.related-card__meta { font-size: var(--text-xs); color: var(--color-text-light); }
.related-card__title { font-size: var(--text-base); }
.related-card__link { font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }

.masters__stat { display: flex; flex-direction: column; gap: 2px; }
.masters__stat-number { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; }
.masters__stat-label { font-size: var(--text-xs); color: var(--color-text-muted); }

.about__text { font-size: var(--text-base); color: var(--color-text-muted); line-height: 1.7; }
.about__text + .about__text { margin-top: var(--space-4); }

.article-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.article-tags__tag {
  padding: 5px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.tip-box {
  padding: var(--space-4) var(--space-5);
  background: var(--color-primary-soft);
  border: 1px solid var(--color-primary-soft-strong);
  border-radius: var(--radius-lg);
  margin: var(--space-5) 0;
}
.tip-box__title { font-weight: 700; margin-bottom: var(--space-2); }

.brands__all-link { display: flex; justify-content: center; margin-top: var(--space-6); }

/* ---------------------------------------------------------- 9. Утилиты */
.btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: var(--text-base); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- 10. Сетки старых секций */
.advantages__grid .advantage-card,
.advantages-grid .advantage-card { height: 100%; }

.products-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 576px) { .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.masters__stats,
.contacts__schedule { display: flex; flex-wrap: wrap; gap: var(--space-5); }

/* Старый подвал на внутренних страницах: колонки без собственных стилей */
.footer__col { min-width: 0; }

/* --------------------------- 11. Секции /o-nas/ (команда, сертификаты, история, реквизиты, отзывы)
   Классы остались от старой таблицы стилей и не были перенесены в v2:
   без них секции рендерились как обычный поток текста (одна колонка с пустотами). */
/* Только секция команды на /o-nas/ — класс .section__subtitle встречается и на других
   страницах (washer/dishwasher/remont-*), где подзаголовок стилизуется иначе. */
.about-team .section__subtitle {
  max-width: 720px;
  margin: calc(var(--space-3) * -1) auto var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-lg);
}

/* История компании — вертикальный таймлайн */
.history__timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding-left: var(--space-6);
  border-left: 2px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.history__item { position: relative; }
.history__item::before {
  content: "";
  position: absolute;
  left: calc(var(--space-6) * -1 - 7px);
  top: 7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.history__year {
  display: inline-block;
  font-weight: 800;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--color-primary);
}
.history__content h3 { font-size: var(--text-xl); margin: var(--space-1) 0 var(--space-2); }
.history__content p { color: var(--color-text-muted); }

/* Наша команда */
.team__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 576px) { .team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.team__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.team__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg-subtle);
}
.team__avatar img { width: 100%; height: 100%; object-fit: cover; }
.team__name { font-size: var(--text-xl); }
.team__role { font-size: var(--text-sm); color: var(--color-text-muted); }
.team__exp { font-size: var(--text-xs); color: var(--color-text-light); }

/* Сертификаты и качество */
.about-certificates { background: var(--color-bg-subtle); }
.certificates__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 576px) { .certificates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 992px) { .certificates__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.certificate__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.certificate__card img { width: 48px; height: 48px; }
.certificate__card h3 { font-size: var(--text-base); }
.certificate__card p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Отзывы */
.reviews__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-bottom: var(--space-6); }
@media (min-width: 768px) { .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.review__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-5);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.review__stars { color: var(--color-warning); letter-spacing: 2px; }
.review__text { font-size: var(--text-sm); color: var(--color-text-muted); }
.review__author { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: var(--text-xs); }
.review__author span:first-child { font-weight: 700; color: var(--color-text); }
.review__author span:last-child { color: var(--color-text-light); }

/* Реквизиты компании */
.requisites__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); max-width: 860px; margin: 0 auto; }
@media (min-width: 768px) { .requisites__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.requisites__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.requisites__label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-light);
}
.requisites__value { font-weight: 600; }

/* ---------------------------------------------- 12. CTA-полоса перед футером
   Разметка `.cta-before-footer` есть только у legacy-страниц (HTML не трогаем),
   но стилей для этих классов не было НИГДЕ: ни в theme.css, ни в legacy-compat.css,
   ни в собранном theme-v2.css. В результате секция рендерилась дефолтным текстом
   16px без фона и отступов и «прилипала» к футеру (высота 99px при громоздком
   призыве внутри). Правка в одном файле чинит полосу сразу на всех страницах. */
.cta-before-footer {
  padding: var(--space-8) 0;
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.cta-before-footer .container { text-align: center; }

.cta-before-footer__title {
  max-width: 28ch;
  margin: 0 auto var(--space-3);
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.cta-before-footer__text {
  max-width: 62ch;
  margin: 0 auto var(--space-6);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--color-text-muted);
}
.cta-before-footer__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
}
/* Кнопка полосы — такой же главный CTA, как в hero: единая высота, вес и радиус */
.cta-before-footer__actions .btn {
  min-height: 52px;
  padding: 0 var(--space-6);
  font-size: var(--text-base);
}

@media (max-width: 640px) {
  .cta-before-footer { padding: var(--space-7) 0; }
  .cta-before-footer__title { max-width: none; font-size: 1.25rem; }
  .cta-before-footer__text { font-size: var(--text-base); margin-bottom: var(--space-5); }
  .cta-before-footer__actions { flex-direction: column; align-items: stretch; }
  .cta-before-footer__actions .btn { width: 100%; }
}

/* ------------------------------------------ 13. Хаб запчастей (/zapchasti/)
   У 23 классов этой страницы не было НИ ОДНОГО правила CSS: hero, блок
   категорий, «карусель брендов» и секции каталога рендерились браузерным
   дефолтом — категории слипшейся строкой высотой 26px, бренды вертикальным
   столбом высотой 952px на всю ширину. Из-за отсутствия правил не работал и
   js/spares.min.js: у сетки не было состояния .collapsed (аккордеон категорий
   ничего не сворачивал), а у трека брендов — overflow (scrollBy нечего было
   прокручивать). Всё лечится CSS, HTML и SEO не трогаем. */

/* --- Hero: обложка страницы + плитки статистики вместо трёх серых строк --- */
.spares-hero {
  padding: var(--space-7) 0 var(--space-8);
  background: linear-gradient(180deg, var(--color-bg-subtle), var(--color-bg) 72%);
  border-bottom: 1px solid var(--color-border);
}
.spares-hero__content { max-width: 880px; }
.spares-hero__title {
  font-size: var(--h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
}
.spares-hero__subtitle {
  max-width: 60ch;
  margin-bottom: var(--space-6);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
.spares-hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  max-width: 640px;
}
.spares-hero__stat {
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.spares-hero__stat-num {
  display: block;
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-primary);
}
.spares-hero__stat-label {
  display: block;
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Категории: три карточки вместо инлайновой строки на 26px --- */
.spares-categories-carousel { padding: var(--space-7) 0 var(--space-4); }
/* 300px минимум даёт ровно 3 колонки в контейнере 1160px и 2 на планшете:
   при minmax(260px, 1fr) auto-fit создавал четвёртый трек шириной 0 и лишний gap. */
.spares-categories-carousel__wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-4);
}
.spares-categories-carousel__btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.spares-categories-carousel__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-soft);
  font-size: 1.25rem;
  line-height: 1;
}
.spares-categories-carousel__label {
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.spares-categories-carousel__count {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
@media (hover: hover) {
  .spares-categories-carousel__btn:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

/* --- Бренды: горизонтальный трек с прокруткой и стрелками-кнопками.
   Селекторы ограничены треком: .brand-item живёт ещё и в .brands__grid
   на страницах услуг, ломать его шириной нельзя. --- */
.spares-brands-carousel { padding: var(--space-4) 0 var(--space-8); }
.spares-brands-carousel__title {
  margin-bottom: var(--space-4);
  font-size: var(--h2);
  letter-spacing: -0.02em;
}
.spares-brands-carousel__wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.spares-brands-carousel__track {
  display: flex;
  flex: 1 1 auto;
  gap: var(--space-3);
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.spares-brands-carousel__track .brand-item {
  flex: 0 0 auto;
  width: 168px;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  scroll-snap-align: start;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
/* В теме .brand-item__img растянута на всю ширину плитки: в ленте это ломает
   пропорции, поэтому ограничиваем высоту и разрешаем родную ширину логотипа. */
.spares-brands-carousel__track .brand-item__img {
  width: auto;
  max-width: 100%;
  max-height: 34px;
  height: auto;
  object-fit: contain;
}
@media (hover: hover) {
  .spares-brands-carousel__track .brand-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}
.spares-brands-carousel__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  color: var(--color-text);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
@media (hover: hover) {
  .spares-brands-carousel__arrow:hover {
    background: var(--color-primary-soft);
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}
/* Модификаторы стрелок: жёстко держим 40px, чтобы кнопки не сжимались,
   когда лента брендов занимает почти всю ширину ряда */
.spares-brands-carousel__arrow--prev,
.spares-brands-carousel__arrow--next { flex: 0 0 40px; }

/* --- Каталог: ритм секций и кликабельный заголовок категории --- */
.spares-section { padding: var(--space-7) 0 0; }
.spares-section + .spares-section {
  margin-top: var(--space-7);
  border-top: 1px solid var(--color-border);
}
.spares-category__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--color-border);
  font-size: var(--h2);
  letter-spacing: -0.02em;
  cursor: pointer;
  user-select: none;
  transition: border-color var(--transition), color var(--transition);
}
.spares-category__title::after {
  content: '▾';
  margin-left: auto;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--color-primary);
  transition: transform var(--transition);
}
/* Класс .active вешает аккордеон из js/spares.min.js: активная категория
   раскрыта (стрелка вниз), свёрнутая — стрелка вбок. */
.spares-category__title:not(.active)::after { transform: rotate(-90deg); }
.spares-category__title.active { border-bottom-color: var(--color-primary); }
@media (hover: hover) {
  .spares-category__title:hover { color: var(--color-primary); }
}
/* Ключевое правило для аккордеона: без него клик по заголовку ничего не делал. */
.spares-grid.collapsed { display: none; }

/* --- Карточки товаров: воздух в заголовке, тень при наведении, цена акцентом --- */
.spares-card__title { line-height: 1.35; }
.spares-card__price { color: var(--color-primary); }
@media (hover: hover) {
  .spares-card:hover { box-shadow: var(--shadow-md); }
}

/* --- Блок «Гарантия»: одна карточка в сетке на три колонки — центрируем --- */
@supports selector(:has(*)) {
  .advantages__grid:has(> .advantage-card:only-child) {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
  }
}

/* --- Мобильные уточнения --- */
@media (max-width: 767px) {
  .spares-hero { padding: var(--space-6) 0; }
  .spares-hero__subtitle { margin-bottom: var(--space-5); font-size: var(--text-base); }
  .spares-hero__stats { grid-template-columns: 1fr; max-width: none; }
  .spares-hero__stat {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .spares-hero__stat-num { font-size: var(--text-xl); }
  .spares-hero__stat-label { margin-top: 0; }
  .spares-categories-carousel { padding: var(--space-6) 0 var(--space-3); }
  .spares-categories-carousel__btn { padding: var(--space-3) var(--space-4); }
  .spares-categories-carousel__label { font-size: var(--text-base); }
  /* На тач-устройстве лента брендов листается пальцем — стрелки не нужны */
  .spares-brands-carousel__arrow { display: none; }
  .spares-brands-carousel__track .brand-item { width: 136px; min-height: 76px; }
  .spares-brands-carousel { padding: var(--space-3) 0 var(--space-7); }
}