/* Главная страница — блоки вместо каталога. Компьютер и телефон.
   Спека: docs/plans/home-page-desktop/ (телефон — …-mobile.md, устройство — …-dev.md).
   Цвета и отступы — токены темы (astra-child/style.css :root), новых цветов не заводим.
   Кегли числом в px: Astra ниже 921px ужимает корневой кегль, и rem уезжает со шкалы.

   Файл сложен в три части:
     1) общее — то, что одинаково на обоих видах;
     2) @media (max-width: 921px) — телефон;
     3) @media (min-width: 922px) — компьютер.

   Делим по ширине экрана, а не по устройству: ключ кэша nginx устройство
   не различает, и разный HTML по устройству раздать нельзя. */

/* ========================================================================= *
 *  1. ОБЩЕЕ
 * ========================================================================= */

.alex-home {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

/* ===== Заголовки секций ===== */
.alex-home__h2 {
  margin: 0 0 var(--space-sm);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-text);
}
.alex-home__lead {
  margin: 0 0 var(--space-md);
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* ===== Кнопка блоков =====
   Второстепенная кнопка канона: подкрашенная плашка, красная рамка, красный текст, скругление 4
   (до 2026-10-13 по макету была белой с прямыми углами).
   Сплошную красную оставляем главному действию — «В корзину» на карточке товара. */
.alex-home .alex-home__btn,
.alex-works .alex-home__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--btn-width-floor); /* 176, пол ширины кнопки по канону; было 173 */
  max-width: 100%;
  height: 44px;
  margin: var(--space-md) var(--space-sm) 0 0;
  padding: 0 var(--space-md);
  box-sizing: border-box;
  border: 1px solid var(--btn2-border);
  border-radius: var(--btn-radius);
  background: var(--btn2-bg);
  color: var(--btn2-text);
  font-family: inherit;
  font-size: 15px; /* эталон кнопки, было 13 */
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.alex-home .alex-home__btn:hover,
.alex-home .alex-home__btn:focus,
.alex-works .alex-home__btn:hover,
.alex-works .alex-home__btn:focus {
  background: var(--color-primary);
  color: var(--color-white);
}
/* Кнопка «Помочь в подборе» несёт класс .remfara-oos-btn (он открывает попап),
   а у него в теме своя сплошная заливка и !important-отступы под карточку товара. */
.alex-home .alex-home__btn.remfara-oos-btn {
  display: inline-flex !important;
  flex-direction: row;
  margin: var(--space-md) var(--space-sm) 0 0 !important;
  padding: 0 var(--space-md) !important;
  font-size: 15px !important;
  background: var(--btn2-bg);
  color: var(--btn2-text) !important;
}
.alex-home .alex-home__btn.remfara-oos-btn:hover,
.alex-home .alex-home__btn.remfara-oos-btn:focus {
  background: var(--color-primary);
  color: var(--color-white) !important;
}
/* ===== Общая рамка блоков =====
   Закладки, «О нас» и вопросы-ответы оформлены одинаковыми блоками с тенью.
   Тень базовая (--shadow-md), при наведении глубже (--shadow-hover), как у карточек. */
.alex-home__tabs,
.alex-home__about,
.alex-home__catalog,
.alex-home__faq-list {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s;
}
.alex-home__tabs:hover,
.alex-home__about:hover,
.alex-home__catalog:hover,
.alex-home__faq-list:hover {
  box-shadow: var(--shadow-hover);
}

/* ===== Кнопка «раскрыть / свернуть» со стрелкой =====
   В «О нас» это строка-ссылка, в каталоге: обычная кнопка блоков (.alex-home__btn).
   Приходит с атрибутом hidden (показывает скрипт), а у .alex-home__btn на телефоне
   display с !important, поэтому hidden подтверждаем тоже через !important. */
.alex-home .alex-home__more[hidden] { display: none !important; }
.alex-home .alex-home__more {
  gap: var(--space-sm);
}
.alex-home .alex-home__more:not(.alex-home__more--btn) {
  display: flex;
  align-items: center;
  margin: var(--space-sm) 0 0;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--color-primary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
/* Уголок, тот же знак, что в вопросах-ответах. Вниз: раскрыть, вверх: свернуть. */
.alex-home .alex-home__more::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.alex-home .alex-home__more[aria-expanded="true"]::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

/* ===== «О нас»: свёрнутый текст (телефон; высоту ставит скрипт) =====
   Низ свёрнутого текста растворяется, чтобы обрыв строки не выглядел ошибкой. */
.alex-home__fold {
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.alex-home__fold.is-folded {
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
}

/* ===== Блок трёх закладок =====
   Одна разметка даёт два вида. Полоска-заголовок и её панель лежат в паре
   (.alex-home__tabitem), пара «прозрачна» для раскладки (display: contents),
   поэтому и полоски, и панели — прямые дети flex-контейнера.
   На телефоне порядок естественный: полоска, её панель, следующая полоска…
   На компьютере полоскам задан order 1, панелям 2 — три полоски встают в ряд,
   панель открытой закладки ложится под ними. */
.alex-home__tabs {
  display: flex;
  flex-wrap: wrap;
  background: var(--color-bg-alt);
  overflow: hidden;
}
.alex-home__tabitem { display: contents; }

.alex-home .alex-home__tab {
  display: block;
  margin: 0;
  padding: 12px var(--space-sm);
  border: 0;
  border-bottom: 2px solid var(--color-border);
  border-radius: 0;
  background: var(--color-white);
  color: var(--color-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.alex-home .alex-home__tab:hover {
  background: rgba(158, 15, 15, 0.04);
  color: var(--color-primary);
}
/* Открытая закладка: светлая заливка фирменного красного и красная черта снизу
   (как в макете). Новых цветов не заводим — это тон того же --color-primary. */
.alex-home .alex-home__tab[aria-expanded="true"] {
  background: rgba(158, 15, 15, 0.08);
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.alex-home__panel {
  display: none;
  box-sizing: border-box;
}
.alex-home__panel h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--color-text);
}
.alex-home__panel p {
  margin: var(--space-sm) 0 0;
  max-width: 520px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-light);
}
.alex-home__pic {
  background: var(--color-white);
  border: 1px solid var(--color-primary);
  overflow: hidden;
}
.alex-home__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Блок «О нас» ===== */
.alex-home__text {
  margin: 0 0 var(--space-sm);
  max-width: 760px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-light);
}
.alex-home__text:last-child { margin-bottom: 0; }

/* ===== Витрина товаров ===== */
/* Плашка про самостоятельный ремонт — такой же блок с тенью, как остальные.
   Заливку оставляем серой: это выделенная реплика, а не обычный блок. */
.alex-home__note {
  padding: var(--space-md);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-light);
}
.alex-home__note:hover { box-shadow: var(--shadow-hover); }
.alex-home__products ul.products { margin-bottom: 0; }

/* Тень у карточек товара — сразу, без наведения; при наведении сильнее.
   В категориях тема даёт --shadow-md только на :hover, здесь он базовый.
   Селектор длиннее темы намеренно: её правило `.woocommerce ul.products
   li.product:hover` иначе перебивает наше. */
body.home .alex-home ul.products li.product {
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s;
}
body.home .alex-home ul.products li.product:hover {
  box-shadow: var(--shadow-hover);
}

/* Карточка главной — только фото и название (решение владельца).
   Рамку и сетку даёт тема: классы products/columns-N/li.product оставлены. */
.alex-cards__link {
  display: block;
  color: var(--color-text);
  text-decoration: none;
}
.alex-cards__link--static { cursor: default; }
.alex-cards__pic { display: block; }
.alex-cards__pic img {
  display: block;
  width: 100%;
  height: auto;
}
.alex-cards .woocommerce-loop-product__title {
  margin: 0;
  padding: var(--space-sm) var(--space-md) var(--space-md);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
  color: inherit;
}
.alex-cards__link:not(.alex-cards__link--static):hover .woocommerce-loop-product__title {
  color: var(--color-primary);
}

/* ===== Вопросы и ответы ===== */
.alex-home__faq-item { border-bottom: 1px solid var(--color-border); }
.alex-home__faq-item:last-child { border-bottom: 0; }

.alex-home__faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  min-height: 44px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  transition: background 0.15s, color 0.15s;
}
.alex-home__faq-q::-webkit-details-marker { display: none; }
.alex-home__faq-q::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--color-muted);
  border-bottom: 2px solid var(--color-muted);
  transform: rotate(45deg);
  transition: transform 0.2s, border-color 0.2s;
}
.alex-home__faq-q:hover {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}
.alex-home__faq-item[open] .alex-home__faq-q { color: var(--color-primary); }
.alex-home__faq-item[open] .alex-home__faq-q::after {
  transform: rotate(-135deg);
  border-color: var(--color-primary);
}
.alex-home__faq-a {
  margin: 0;
  padding: 0 var(--space-md) var(--space-md);
  max-width: 820px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* ===== Лента «Изготовленные нами стёкла фар» =====
   Этот же блок стоит на странице «О нас», поэтому его стили общие. */

.alex-works__row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}
.alex-works__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.alex-works__track {
  display: flex;
  gap: var(--space-md);
  transition: transform 0.25s ease;
  will-change: transform;
}
/* Видно 4 карточки; ниже 922px — 2 (правило чётности: тройки не бывает). */
.alex-works__card {
  flex: 0 0 calc((100% - 3 * var(--space-md)) / 4);
  min-width: 0;
  margin: 0;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  background: var(--color-white);
  box-sizing: border-box;
  /* Тень сразу, без наведения — как договорились: в категориях такая появляется
     только при наведении, здесь она базовая. Оба значения — токены темы. */
  box-shadow: var(--shadow-md);
  transition: box-shadow 0.2s;
}
.alex-works__card:hover { box-shadow: var(--shadow-hover); }
.alex-works__pic {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-alt);
}
.alex-works__pic img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Пока фото не залиты — рамка-заглушка на месте будущего снимка. */
.alex-works__pic--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--color-border);
  background: var(--color-bg-alt);
}
.alex-works__stub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-muted);
  font-size: 14px;
  line-height: 1.4;
}
/* Фото-ссылка: занимает всю плитку, курсор показывает, что можно увеличить. */
.alex-works .alex-works__zoom {
  display: block;
  width: 100%;
  height: 100%;
  cursor: zoom-in;
  text-decoration: none;
  border: 0;
}
.alex-works .alex-works__zoom img { display: block; width: 100%; height: 100%; object-fit: cover; }
.alex-works__caption {
  padding: var(--space-sm) 4px 4px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--color-text);
}
/* Кнопка невидима — виден только уголок. Размер 32x32 оставлен: это площадь
   нажатия (палец/мышь) и ширина колонки, от неё зависит ширина карточек. */
.alex-works .alex-works__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
/* Знак стрелки — наш типовой уголок, тот же, что в «Вопросах и ответах»
   (.alex-home__faq-q::after) и в фильтре категорий (.cat-toggle::after):
   квадрат с двумя сторонами, повёрнутый углом в нужную сторону.
   Смещение на 3px — оптическое: у повёрнутого квадрата вся «краска»
   уходит в половину коробки, без сдвига уголок стоит не по центру кнопки. */
.alex-works .alex-works__arrow::before {
  content: "";
  width: 13px;
  height: 13px;
  border-right: 2.5px solid var(--color-muted);
  border-bottom: 2.5px solid var(--color-muted);
  transition: border-color 0.2s;
}
.alex-works .alex-works__arrow[data-alex-works-prev]::before {
  transform: rotate(135deg);
  margin-left: 5px;
}
.alex-works .alex-works__arrow[data-alex-works-next]::before {
  transform: rotate(-45deg);
  margin-right: 5px;
}
.alex-works .alex-works__arrow:hover:not([disabled])::before {
  border-color: var(--color-primary);
}
.alex-works .alex-works__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
}
/* Под лентой: строка текста и под ней кнопка заявки (решение владельца 2026-09-26). */
.alex-works__cta { margin: var(--space-md) 0 0; }
.alex-works__cta-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-light);
}

/* ========================================================================= *
 *  2. ТЕЛЕФОН (до 921px)
 * ========================================================================= */

@media (max-width: 921px) {

  .alex-home {
    gap: var(--space-lg);
    padding: 0 var(--space-md) var(--space-lg);
  }

  .alex-home__h2 { font-size: 20px; }

  /* Блок трёх закладок на телефоне не показываем (решение владельца 2026-09-18:
     на узком экране выходит громоздко). Ниже он всё равно расписан гармошкой —
     правила оставлены, чтобы включить обратно было одной строкой.
     Каталог на телефоне открывается бургером. */
  .alex-home__tabs { display: none; }

  /* Кнопки на всю ширину и друг под другом: так по ним удобнее попадать пальцем. */
  .alex-home .alex-home__btn,
  .alex-works .alex-home__btn,
  .alex-home .alex-home__btn.remfara-oos-btn {
    display: flex !important;
    width: 100%;
    min-width: 0;
    margin: var(--space-sm) 0 0 !important;
  }

  /* ===== Закладки — гармошка =====
     Порядок естественный (полоска, её панель), поэтому order не задаём.
     Открытую панель помечает класс is-open (его ставит скрипт), а не is-active:
     сервер отдаёт один HTML на оба вида, и присланный is-active здесь просто
     не действует — на телефоне все три закладки закрыты, как договорились. */
  .alex-home .alex-home__tab {
    position: relative;
    flex: 0 0 100%;
    width: 100%;
    padding: 14px 40px 14px var(--space-md);
    text-align: left;
  }
  .alex-home__tabitem:last-child .alex-home__tab:not(.is-open) {
    border-bottom-width: 0;
  }
  /* Уголок справа — тот же знак, что в вопросах-ответах. */
  .alex-home .alex-home__tab::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--space-md);
    width: 10px;
    height: 10px;
    margin-top: -7px;
    border-right: 2px solid var(--color-muted);
    border-bottom: 2px solid var(--color-muted);
    transform: rotate(45deg);
    transition: transform 0.2s, border-color 0.2s;
  }

  /* Открытую закладку здесь помечает класс is-open (его ставит скрипт), а не
     aria-expanded: сервер отдаёт один HTML на оба вида, и в нём первая закладка
     открыта для компьютера. Полагайся вид на aria — полоска мигала бы красной
     до выполнения скрипта. Поэтому вид aria-подсветки тут гасим. */
  .alex-home .alex-home__tab[aria-expanded="true"] {
    background: var(--color-white);
    color: var(--color-text);
    border-bottom-color: var(--color-border);
  }
  .alex-home .alex-home__tab.is-open {
    background: rgba(158, 15, 15, 0.08);
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
  }
  .alex-home .alex-home__tab.is-open::after {
    margin-top: -3px;
    transform: rotate(-135deg);
    border-color: var(--color-primary);
  }

  .alex-home__panel {
    flex: 0 0 100%;
    width: 100%;
    padding: var(--space-md);
    border-bottom: 2px solid var(--color-border);
  }
  .alex-home__panel.is-open { display: block; }
  /* Название закладки уже стоит в полоске сверху — в панели его не повторяем. */
  .alex-home__panel h2 { display: none; }
  .alex-home__panel p { margin: 0; }
  .alex-home__pic {
    width: 140px;
    height: 140px;
    margin: var(--space-md) auto 0;
  }

  /* Заголовок страницы: на телефоне короткий вариант, по центру (решение владельца 2026-09-26). */
  .alex-home__title--wide { display: none; }
  body.home.woocommerce-shop .woocommerce-products-header__title { text-align: center; }
  .alex-works__cta-text { font-size: 15px; }

  .alex-home__about { padding: var(--space-md); }
  .alex-home__text { font-size: 15px; }

  /* ===== «Стёкла для фар»: каталог как в бургер-меню =====
     Строки, логотипы и стрелки моделей: стили темы (.remfara-mobile-cats).
     Свёрнут (is-folded): окно на три марки, края растворяются.
     Плывёт (is-running): дорожка уезжает на высоту списка за --alex-cat-dur,
     под ним копия: круг выходит бесшовным. Все числа ставит alex-home.js. */
  .alex-home__catalog { padding: var(--space-md); }
  .alex-home__catalog-window { position: relative; overflow: hidden; }
  .alex-home__catalog.is-folded .alex-home__catalog-window {
    height: var(--alex-cat-h, 150px);
    -webkit-mask-image: linear-gradient(transparent, #000 8%, #000 85%, transparent);
            mask-image: linear-gradient(transparent, #000 8%, #000 85%, transparent);
  }
  .alex-home__catalog-track { position: relative; }
  .alex-home__catalog .remfara-mobile-cats ul { margin: 0; }
  .alex-home__catalog .alex-home__cats-clone { display: none; }
  .alex-home__catalog.is-running .alex-home__cats-clone { display: block; }
  .alex-home__catalog.is-running .alex-home__catalog-track {
    animation: alex-cat-run var(--alex-cat-dur, 30s) linear infinite;
  }
  /* Палец на списке: список стоит, чтобы по марке было легко попасть. */
  .alex-home__catalog-window:hover .alex-home__catalog-track,
  .alex-home__catalog-window:focus-within .alex-home__catalog-track {
    animation-play-state: paused;
  }
  .alex-home__note { margin: var(--space-md) 0; font-size: 15px; }

  /* ===== Ленты — смахивание пальцем =====
     Вместо сдвига стрелками обычная прокрутка с «прилипанием» к карточке:
     смахнул — лента встала ровно, с инерцией, как принято на телефоне.
     Полоску прокрутки прячем, она тут лишняя. */
  .alex-works__row { gap: 0; }
  .alex-works .alex-works__arrow { display: none; }
  .alex-works__viewport,
  .alex-home__products .alex-cards {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .alex-works__viewport::-webkit-scrollbar,
  .alex-home__products .alex-cards::-webkit-scrollbar { display: none; }

  /* Скрипт двигает ленту стрелками через transform; на телефоне листает палец,
     поэтому сдвиг снимаем (скрипт его здесь и не ставит — это подстраховка). */
  .alex-works__track {
    transform: none !important;
    transition: none;
  }
  .alex-works__card {
    flex-basis: calc((100% - var(--space-md)) / 2);
    scroll-snap-align: start;
  }

  /* Витрина товаров: та же лента по два в ряд. Сетку темы перебиваем —
     она раскладывает ul.products своей grid-раскладкой. */
  .alex-home__products .alex-cards {
    display: flex !important;
    flex-wrap: nowrap;
    gap: var(--space-md);
    margin: 0;
    /* Поля по 2px и 6px снизу — чтобы тень карточек не срезалась краем ленты. */
    padding: 2px 2px 6px;
    overflow-y: hidden;
    list-style: none;
  }
  .alex-home__products .alex-cards li.product {
    flex: 0 0 calc((100% - var(--space-md)) / 2) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    scroll-snap-align: start;
  }
  .alex-cards .woocommerce-loop-product__title {
    padding: var(--space-sm);
    font-size: 13px;
  }

  .alex-home__faq-q { font-size: 15px; }
  .alex-home__faq-a { font-size: 15px; }
}

/* ========================================================================= *
 *  3. КОМПЬЮТЕР (от 922px)
 * ========================================================================= */

@media (min-width: 922px) {

  .alex-home { gap: 40px; }

  /* Заголовок главной: чёрный вместо фирменного красного (решение владельца 2026-09-07).
     Красный на сайте — акцент кнопок и ссылок, заголовок его на себя не тянет.
     Отступы шапки схлопнуты, свой задаём ниже — чтобы верх заголовка встал вровень
     с верхом фильтра слева. */
  body.woocommerce-shop .woocommerce-products-header {
    margin: 0 0 var(--space-lg);
    padding: 0;
  }
  /* !important здесь вынужденно: в теме заголовки архивов покрашены
     `.woocommerce-products-header__title { color: var(--color-primary) !important }`.
     Правило общее для всех категорий, поэтому перебиваем его точечно — только на главной. */
  body.home.woocommerce-shop .woocommerce-products-header__title {
    margin: 0;
    color: var(--color-text) !important;
    font-size: 32px; /* верх шкалы канона; Astra давала 36 */
    font-weight: 600; /* как заголовки страниц у Ремфары */
  }

  /* Шапка фильтра слева живёт в теме (astra-child/style.css) — она нужна
     на всех страницах с этим фильтром, а этот файл грузится только на главной. */

  .alex-home .alex-home__btn,
  .alex-works .alex-home__btn { margin: var(--space-md) 0 0; }
  .alex-home .alex-home__btn.remfara-oos-btn { margin: var(--space-md) 0 0 !important; }

  /* ===== Закладки — три полоски в ряд, панель под ними ===== */
  .alex-home .alex-home__tab {
    flex: 1 1 0;
    min-width: 0;
    order: 1;
    height: auto;
    text-align: center;
  }
  .alex-home__tabitem + .alex-home__tabitem .alex-home__tab {
    border-left: 1px solid var(--color-border);
  }

  .alex-home__panel {
    order: 2;
    flex: 0 0 100%;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: var(--space-lg);
    align-items: center;
    padding: var(--space-md);
    min-height: 192px;
  }
  .alex-home__panel.is-active { display: grid; }
  .alex-home__pic {
    width: 160px;
    height: 160px;
    align-self: center;
  }

  /* ===== Блок «О нас» ===== */
  .alex-home__about { padding: var(--space-lg); }

  /* Каталог на компьютере не нужен: слева всегда стоит фильтр марок. */
  .alex-home__catalog { display: none; }

  /* Заголовок страницы: на компьютере полный вариант. */
  .alex-home__title--narrow { display: none; }

  /* ===== Витрина товаров ===== */
  .alex-home__note { margin: var(--space-lg) 0; }
}

/* Движение каталога «Стёкла для фар» (сдвиг считает alex-home.js).
   «Уменьшить движение» в системе: список стоит, видны первые марки. */
@keyframes alex-cat-run { to { transform: translateY(var(--alex-cat-shift, 0)); } }
@media (prefers-reduced-motion: reduce) {
  .alex-home__catalog.is-running .alex-home__catalog-track { animation: none; }
  .alex-home__catalog.is-running .alex-home__cats-clone { display: none; }
}