/* ==========================================================================
   Общий слой стилей Telecomo
   --------------------------------------------------------------------------
   Источник: _verstka/css/style.css — файл, который в макетах подключается
   на всех 22 страницах.

   Что внутри: reset, шапка, подвал, базовые компоненты (кнопки, заголовки,
   карточки, контейнер, сетки) и блоки главной страницы.

   Блок :root вынесен в variables.css — здесь его нет намеренно.

   ЗАМЕТКА НА ЭПИК 1: блоки главной (BLOCK 2–8) стоило бы вынести в index.css,
   но медиазапросы в исходнике не разделены по блокам — резать вслепую
   рискованно. Разделим при вёрстке главной, когда будет видно фактическое
   использование.
   ========================================================================== */

/* ==========================================================================
   CSS VARIABLES & DESIGN SYSTEM (Telecomo Colors & Wix Font)
   ========================================================================== */


/* ==========================================================================
   RESET & SYSTEM BASICS (Straight corners only)
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0;
}

/* Circular elements — шапка: избранное, кабинет, корзина */
.header-action {
    border-radius: 50% !important;
}

/* Браузер по умолчанию красит выделение текста синим — на белом тексте
   фиолетовых кнопок (шапка, "Войти" и т.п.) это выглядит как поломка. */
::selection {
    background: var(--color-accent);
    color: var(--color-white);
}

html,
body {
    overflow-x: clip;
}

body {
    font-family: var(--font-body), Arial, Helvetica, sans-serif;
    background: var(--color-white);
    color: var(--color-text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* :visited обёрнут в :where(), чтобы правило осталось со специфичностью
   голого a. Без обёртки a:visited (тип+класс) перебивает любой одиночный
   класс — .header-catalog-btn, .purple-btn и прочие кнопки теряли свой
   белый цвет, как только ссылку один раз открыли. */
a,
a:where(:visited) {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-default);
}

button, input, textarea {
    font-family: inherit;
    outline: none;
}

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

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

/* ==========================================================================
   BUTTON — общая кнопка сайта (.button/.button--*)
   --------------------------------------------------------------------------
   Классы использовались с самого начала редизайна (каталог, карточка
   товара, бренды — эпики 1–4) и до сих пор не были объявлены нигде в новых
   стилях: подложкой служил старый слой /assets/main.css, который снимется
   по ходу проекта (см. _epics/_INDEX.md, «Чего стоило больше всего»).
   Значения — те же отступы/размеры, что у старой кнопки, только через
   токены --button-*, а не calc(vw) старой вёрстки. Найдено и заполнено
   при работе над эпиком 6 (оформление заказа) — там же первый живой,
   некликуемый мимо тест.
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--button-icon-gap);
    padding: var(--button-padding);
    border: none;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    transition: var(--transition-slow);
}

.button:hover { background: var(--color-accent-hover); }

/* После нажатия браузер оставляет на кнопке рамку фокуса, и на телефоне
   фиолетовая кнопка так и стоит обведённой чёрным — читается как поломка.
   Рамку убираем только там, где она появилась от мыши или касания: при
   переходе с клавиатуры (:focus-visible) она нужна и остаётся. */
.button:focus:not(:focus-visible) { outline: none; }

.button[disabled] {
    opacity: .5;
    pointer-events: none;
}

.button svg {
    width: var(--button-icon-size);
    height: var(--button-icon-size);
    flex-shrink: 0;
}

.button--l, .button--2l { padding: var(--button-padding-l); }

.button--m { padding: var(--button-padding); }

/* Вторичная («призрачная») кнопка — светлая подложка вместо заливки */
.button--2, .button--2l, .button--icon {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.button--2:hover, .button--2l:hover, .button--icon:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent-hover);
}

/* Кнопка-ссылка при наведении.
   На странице заказа подключён bootstrap 4 (Extension::load ui.bootstrap4),
   а у него есть a:hover со своим синим. Селектор a:hover — это тип плюс
   псевдокласс, то есть он перебивает одиночный класс .button, и текст
   кнопки-ссылки при наведении синел (видно было на «Оформить заказ»).
   Своя специфичность здесь выше за счёт того же тега a. Та же природа,
   что у истории с a:visited в начале файла. */
a.button:hover, a.button:focus { color: var(--color-white); }

a.button--2:hover, a.button--2:focus,
a.button--2l:hover, a.button--2l:focus,
a.button--icon:hover, a.button--icon:focus { color: var(--color-accent-hover); }

/* Кнопка-иконка — квадратная, без текста рядом */
.button--icon, .button--icon2 {
    padding: 0;
    width: 56px;
    height: 56px;
}

.button--icon2 { background: var(--color-accent); color: var(--color-white); }

/* Кнопка-иконка кругом, «призрачная» — переключатели вида списка и т.п. */
.button--icon3 {
    position: relative;
    justify-content: center;
    padding: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-round);
    background: transparent;
    color: currentColor;
    transition: var(--transition-slow);
}

.button--icon3:not([disabled]):hover {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

/* Кнопка-иконка с рамкой и подписью — фильтры, сортировка */
.button--icon4 {
    height: 48px;
    padding: 0 var(--spacing-xs);
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text-secondary);
}

.button--icon4:not([disabled]):hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ==========================================================================
   INPUT — общая обёртка поля ввода (.input > input/textarea)
   --------------------------------------------------------------------------
   Тот же пробел, что и с .button выше: класс уже используется в фильтре
   каталога, корзине, личном кабинете, формах входа и теперь в оформлении
   заказа — везде молча подхватывался старый /assets/main.css. Найдено и
   заполнено при работе над эпиком 6.
   ========================================================================== */

.input input,
.input textarea {
    width: 100%;
    border: var(--input-border-width) solid var(--color-border);
    padding: 11px var(--spacing-sm);
    font-family: var(--font-body);
    font-size: var(--font-size-text-m);
    color: var(--color-text-primary);
    background: var(--color-white);
    box-sizing: border-box;
    outline: none;
    transition: var(--transition-slow);
}

/* Старый /assets/main.css даёт textarea внутри .input свой min-height —
   calc(225 * 100vw/1920), на широких экранах больше 200px даже для
   короткого комментария. Фиксируем разумную высоту вместо вьюпорт-скейла. */
.input textarea { min-height: 96px; resize: vertical; }

.input input::placeholder,
.input textarea::placeholder { color: var(--color-placeholder); }

.input input:focus,
.input textarea:focus { border-color: var(--color-accent); }

.input input:disabled,
.input textarea:disabled { opacity: .6; }

/* ==========================================================================
   HEADER COMPONENT
   ========================================================================== */

.site-header {
    width: 100%;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 2px 8px rgba(9, 30, 66, 0.06);
}

.header-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.header-top {
    min-height: 72px;
    display: grid;
    grid-template-columns: 190px auto 1fr auto;
    align-items: center;
    gap: 28px;
    border-bottom: 1px solid rgba(220, 223, 228, 0.5);
}

.header-logo {
    display: inline-flex;
    align-items: center;
    width: 176px;
    height: 44px;
}

.header-logo img {
    display: block;
    max-width: 100%;
    max-height: 44px;
    object-fit: contain;
}

.header-phone {
    white-space: nowrap;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.header-phone:hover {
    color: var(--color-accent);
}

.header-contact {
    white-space: nowrap;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.header-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 30px;
    min-width: 0;
}

.header-nav a {
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.header-nav a:hover {
    color: var(--color-accent);
}

.header-bottom {
    min-height: 73px;
    display: grid;
    grid-template-columns: 194px 1fr auto;
    align-items: center;
    gap: 30px;
    padding: 10px 0;
}

.header-catalog-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 194px;
    height: 53px;
    background: var(--color-accent);
    color: var(--color-white);
    font-size: 14px;
    font-weight: 700;
    transition: var(--transition-default);
}

.header-catalog-btn:hover {
    background: var(--color-accent-hover);
}

.header-catalog-icon {
    width: 16px;
    height: 16px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
    flex: 0 0 auto;
}

.header-catalog-icon span {
    display: block;
    border: 2px solid var(--color-white);
}

.header-search {
    position: relative;
    width: 100%;
}

.header-search input {
    width: 100%;
    height: 53px;
    padding: 0 56px 0 20px;
    border: 2px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-primary);
    font-size: 14px;
    transition: var(--transition-default);
}

.header-search input:focus {
    border-color: var(--color-accent);
}

.header-search input::placeholder {
    color: var(--color-placeholder);
}

.header-search button {
    position: absolute;
    top: 0;
    right: 0;
    width: 54px;
    height: 53px;
    color: var(--color-text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-search button:hover {
    color: var(--color-accent);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-primary);
}

/* Круглые иконочные кнопки — ЕДИНСТВЕННОЕ исключение из правила radius: 0 */
.header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50% !important;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-primary);
    position: relative;
    transition: var(--transition-default);
    flex: 0 0 44px;
}

.header-action:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.header-action .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: var(--color-accent);
    color: var(--color-white);
    font-size: 9px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-action svg,
.header-search svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Profile dropdown */
.header-profile-wrap {
    position: relative;
}

.header-profile-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(9,30,66,0.12);
    min-width: 220px;
    z-index: 500;
    flex-direction: column;
}

.header-profile-wrap.is-open .header-profile-dropdown {
    display: flex;
}

.header-profile-dropdown__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition-default);
    cursor: pointer;
}

.header-profile-dropdown__item:last-child {
    border-bottom: none;
}

.header-profile-dropdown__item:hover {
    background: var(--color-accent-bg);
    color: var(--color-accent);
}

.header-profile-dropdown__item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.header-profile-dropdown__label {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-top: 1px;
}

/* ↗ Сигнатурная кнопка-стрелка — фирменный элемент перехода */
.arrow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border: none;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    flex: 0 0 48px;
    transition: background var(--transition-default), color var(--transition-default);
    text-decoration: none;
}

.arrow-btn:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

/* ==========================================================================
   MAIN SECTION & GENERAL WRAPPERS
   ========================================================================== */

.equipment-section {
    width: 100%;
    padding: var(--spacing-md) 0 0;
    background: var(--color-white);
}

.equipment-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

/* Hero: большой слева + два малых справа */
.top-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 16px;
    margin-bottom: var(--spacing-md);
}

/* Если баннеры в админке не заведены, правая колонка пустует — тогда
   большой баннер занимает всю ширину, а не оставляет дыру рядом с собой.
   Пробелы от вывода компонентов :empty не ловит, поэтому :has. */
.top-grid:not(:has(.promo-card)) {
    grid-template-columns: 1fr;
}

.top-grid:not(:has(.promo-card)) .promo-column {
    display: none;
}

/* Правая колонка: два баннера вертикально */
.promo-column {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
}

/* ==========================================================================
   CARDS GENERAL STYLINGS
   ========================================================================== */

/* Баннеры героя — каждый равновеликий */
.banner-card,
.hero-card,
.promo-card,
.help-card {
    position: relative;
    overflow: hidden;
    background: var(--color-text-primary);
    color: var(--color-white);
}

/* Все баннеры hero одинаковой высоты */
.banner-card,
.hero-card {
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 26px;
}

.hero-bg,
.banner-bg,
.promo-bg,
.help-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: transform 0.5s ease;
}

.banner-card:hover .banner-bg,
.hero-card:hover .hero-bg,
.promo-card:hover .promo-bg,
.help-card:hover .help-bg {
    transform: scale(1.03);
}

.hero-overlay,
.banner-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Градиент снизу вверх: текст + стрелка внизу читаемы */
    background: linear-gradient(to top, rgba(9, 30, 66, 0.90) 0%, rgba(9, 30, 66, 0.45) 50%, rgba(9, 30, 66, 0.10) 100%);
}

/* Первый баннер — фирменный фиолетово-космический градиент */
.banner-card.bn1 {
    background:
        radial-gradient(130% 130% at 70% 20%, rgba(216, 93, 224, .7), transparent 55%),
        linear-gradient(150deg, #4a1799, #7b2bcf);
}

.banner-card.bn2 {
    background: linear-gradient(150deg, #ff4d8d, #6a4bf2);
}

.banner-card.bn3 {
    background: linear-gradient(150deg, #2b2b33, #4a4a55);
}

.banner-card.bn4 {
    background: linear-gradient(150deg, #1c1c28, #3a2a55);
}

.banner-content,
.hero-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    justify-content: flex-end;
}

.banner-title,
.hero-title {
    font-family: var(--font-headers);
    font-size: 21px;
    line-height: 1.1;
    font-weight: 600;
    color: var(--color-white);
    letter-spacing: -0.01em;
}

.banner-text,
.hero-text {
    font-size: 13.5px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
}

/* Сигнатурная стрелка ↗ — в баннерах внизу */
.banner-arrow {
    position: absolute;
    left: 26px;
    bottom: 26px;
    z-index: 4;
}

/* Dots Carousel indicators */
.hero-dots {
    position: absolute;
    z-index: 4;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.hero-dots span {
    width: 8px;
    height: 8px;
    background: rgba(255,255,255,0.4);
    cursor: pointer;
    transition: var(--transition-default);
}

.hero-dots span.active {
    background: var(--color-white);
    width: 18px;
}

.promo-card {
    min-height: 157px;
    padding: var(--spacing-md);
}

.promo-overlay,
.help-overlay,
.write-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(9, 30, 66, 0.95) 0%, rgba(9, 30, 66, 0.65) 56%, rgba(9, 30, 66, 0.2) 100%);
}

.promo-content,
.help-content,
.write-content {
    position: relative;
    z-index: 3;
}

.promo-content {
    max-width: 250px;
}

.promo-title {
    font-family: var(--font-headers);
    font-size: var(--heading-sub);
    line-height: var(--heading-sub-lh);
    font-weight: var(--heading-weight);
    margin-bottom: 6px;
}

.promo-text {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-sm);
}

/* General Buttons */
.purple-btn,
.promo-btn,
.submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: var(--color-accent);
    color: var(--color-white);
    font-weight: 700;
    transition: var(--transition-default);
}

.purple-btn:hover,
.promo-btn:hover,
.submit-btn:hover {
    background: var(--color-accent-hover);
}

.purple-btn {
    height: 42px;
    padding: 0 22px;
    font-size: 13px;
}

.purple-btn--outline {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
}

.purple-btn--outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
}

.hero-btns {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.promo-btn {
    height: 32px;
    padding: 0 15px;
    font-size: 11px;
}

/* Заголовки блоков — «Каталог», «Популярные товары», «Бренды»,
   «Часто задаваемые вопросы». На ступень мельче заголовка страницы:
   раньше они были с ним вровень (26), и на внутренних страницах блок
   спорил по весу с названием самой страницы. */
.catalog-title,
.section-title,
.brands-title,
.faq-title {
    font-family: var(--font-headers);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
}

.catalog-title,
.brands-title,
.faq-title {
    margin-bottom: var(--spacing-sm);
}

/* ==========================================================================
   BLOCK 3: POPULAR PRODUCTS (Nag Style)
   ========================================================================== */

.products-section,
.brands-section,
.buy-section,
.news-section {
    margin-bottom: var(--spacing-xl);
}

.products-head,
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
}

.products-left {
    display: flex;
    align-items: center;
    gap: 26px;
    min-width: 0;
}

.products-tabs {
    display: flex;
    align-items: center;
    gap: 22px;
    overflow-x: auto;
}

.popular-tab-panels {
    margin-top: 0;
}

.products-tab {
    position: relative;
    white-space: nowrap;
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 700;
    padding: 4px 0;
    border-bottom: 3px solid transparent;
}

.products-tab.active,
.products-tab:hover {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.show-all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
}

.show-all-mobile {
    display: none;
}

.show-all span {
    font-size: 18px;
    line-height: 1;
}

.show-all:hover {
    color: var(--color-accent-hover);
}

/* Products Grid */
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 22px;
    margin-top: 4px;
}

/* Standard Product Cards */
.product-card,
.viewed-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 24px;
    position: relative;
    display: flex;
    flex-direction: column;
    transition: var(--transition-default);
}

.product-card:hover,
.viewed-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(9, 30, 66, 0.08);
}

.product-label,
.viewed-label {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: 3px;
    background: #e9f0ff;
    color: #3057d5;
}

/* Tag variants — единственное место с цветами меток; раньше product.css
   и .catalog-card__tag переопределяли new/hit/recommend своими цветами,
   из-за чего одна и та же метка красилась по-разному на разных страницах */
.product-tag--new {
    background: #e6f9f0;
    color: #1a7a45;
}

.product-tag--hit {
    background: #fff4e5;
    color: #c05c00;
}

.product-tag--sale {
    background: #fff0f0;
    color: #c0392b;
}

.product-tag--recommend {
    background: #e9f0ff;
    color: #3057d5;
}

.product-favorite,
.viewed-favorite {
    width: 52px;
    height: 52px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 52px;
    transition: var(--transition-default);
}

.product-favorite:hover,
.viewed-favorite:hover,
.product-favorite.is-active,
.viewed-favorite.is-active {
    background: var(--color-accent);
    color: var(--color-white);
}

.product-img-wrap,
.viewed-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 160px;
    margin-bottom: var(--spacing-md);
}

.product-img,
.viewed-img {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    transition: transform var(--transition-default);
}

.product-card:hover .product-img,
.viewed-card:hover .viewed-img {
    transform: scale(1.05);
}

.product-price-row,
.viewed-price-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: var(--spacing-sm);
}

.product-price,
.viewed-price {
    font-family: var(--font-headers);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.product-old-price,
.viewed-old-price {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-decoration: line-through;
}

.product-discount,
.viewed-discount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 20px;
    padding: 0 8px;
    background: var(--color-error);
    color: var(--color-white);
    font-size: 10px;
    font-weight: 800;
}

.product-name,
.viewed-name {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-card-name);
    line-height: 1.5;
    font-weight: 600;
    color: var(--color-text-primary);
    word-break: break-word;
    overflow-wrap: break-word;
}

.product-name:hover,
.viewed-name:hover {
    color: var(--color-accent);
}

.product-rating,
.viewed-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--spacing-md);
    font-size: 13px;
    color: var(--color-text-secondary);
}

/* Бренд */
.product-brand,
.viewed-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    margin-top: auto;
}

.product-brand-name,
.viewed-brand-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Наличие и количество — вместо отзывов */
.product-stock,
.viewed-stock {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: var(--spacing-md);
    font-size: 12px;
}

.stock-label {
    color: #27a65a;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stock-label::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #27a65a;
    border-radius: 50%;
}

.stock-qty {
    color: var(--color-text-secondary);
    font-size: 11px;
}

.card-actions {
    display: grid;
    grid-template-columns: 1fr 52px;
    gap: 12px;
    margin-top: auto;
    align-items: center;
}

.card-cart-btn {
    width: 100%;
    height: 52px;
    background: var(--color-accent);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 700;
    transition: var(--transition-default);
}

.card-cart-btn:hover {
    background: var(--color-accent-hover);
}

.card-cart-icon {
    font-size: 18px;
    display: none;
}

/* Артикул */
.product-article,
.viewed-article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.product-article-value,
.viewed-article-value {
    font-weight: 600;
    color: var(--color-text-primary);
    overflow-wrap: anywhere;
    text-align: right;
    max-width: 60%;
}

/* Консультация менеджера */
.card-consult {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.card-consult:hover {
    background: var(--color-accent);
    color: #fff;
}

.card-cart-text {
    white-space: nowrap;
}

/* ==========================================================================
   BLOCK 4: BRANDS BLOCK
   ========================================================================== */

.brands-section {
    overflow: hidden;
}

.brands-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    width: max-content;
    animation: brands-marquee 30s linear infinite;
}

.brands-grid:hover {
    animation-play-state: paused;
}

@keyframes brands-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.brand-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 12px;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    transition: var(--transition-default);
}

.brand-card:hover {
    border-color: var(--color-accent);
}

.brand-card img {
    max-width: 100%;
    max-height: 36px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.6;
    transition: var(--transition-default);
}

.brand-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

.brand-card--text {
    font-family: var(--font-headers);
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-decoration: none;
    letter-spacing: 0.02em;
    min-width: 100px;
    white-space: nowrap;
}

.brand-card--text:hover {
    color: var(--color-accent);
    border-color: var(--color-accent);
}

/* ==========================================================================
   BLOCK 5: HOW TO BUY & HELP BLOCK
   ========================================================================== */

.buy-grid {
    display: grid;
    grid-template-columns: 5fr 1.25fr;
    gap: 12px;
}

.buy-steps-flow {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    z-index: 2;
}

.buy-steps-flow::before {
    content: "";
    position: absolute;
    top: 32px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: var(--color-border);
    z-index: 1;
}

.buy-steps-progress {
    position: absolute;
    top: 32px;
    left: 40px;
    right: 40px;
    height: 3px;
    background: var(--color-accent);
    z-index: 2;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s ease;
}

.buy-step {
    min-height: 150px;
    padding: 20px;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    position: relative;
    z-index: 3;
    transition: border-color var(--transition-default), box-shadow var(--transition-default), transform var(--transition-default);
}

.buy-step.active {
    border-color: var(--color-accent);
    box-shadow: 0 12px 30px rgba(114, 46, 209, 0.15);
    transform: scale(1.02);
}

.buy-step.active .step-number {
    background: var(--color-accent);
    color: var(--color-white);
}

.step-number {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 28px;
    padding: 0 10px;
    margin-bottom: 20px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    font-family: var(--font-headers); /* Unbounded для цифр шагов */
    font-size: 13px;
    font-weight: 600;
    transition: background var(--transition-default), color var(--transition-default);
}

.step-title {
    margin-bottom: 8px;
    font-size: var(--font-size-card-name);
    font-weight: var(--heading-weight);
}

.step-text {
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.45;
}

.help-card {
    min-height: 150px;
    padding: 22px;
}

.help-content {
    max-width: 250px;
}

.help-title {
    font-family: var(--font-headers);
    margin-bottom: 10px;
    font-size: var(--heading-sub);
    line-height: var(--heading-sub-lh);
    font-weight: var(--heading-weight);
}

.help-text {
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    line-height: 1.4;
}

/* ==========================================================================
   BLOCK 6: NEWS GRID
   ========================================================================== */

.news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.news-card {
    display: grid;
    grid-template-columns: 112px 1fr;
    min-height: 126px;
    overflow: hidden;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    transition: var(--transition-default);
}

.news-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(9, 30, 66, 0.08);
}

.news-img {
    width: 100%;
    height: 100%;
    min-height: 126px;
    object-fit: cover;
}

.news-body {
    position: relative;
    padding: 14px 14px 34px;
}

.news-date {
    margin-bottom: 7px;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 700;
}

/* Теперь это h3 — как названия товаров в карточках каталога. Начертание
   и размер прежние: сброс в начале файла снимает отступы у заголовков, а
   шрифт наследуется от body, как и у .product-name. */
.news-title {
    margin-bottom: 7px;
    font-size: var(--font-size-card-name);
    line-height: var(--line-height-card-name);
    font-weight: var(--heading-weight);
}

.news-text {
    color: var(--color-text-secondary);
    font-size: 11px;
    line-height: 1.35;
}

.news-arrow {
    position: absolute;
    right: 12px;
    bottom: 10px;
    color: var(--color-accent);
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    transition: var(--transition-default);
}

.news-card:hover .news-arrow {
    transform: translateX(3px);
}

/* ==========================================================================
   BLOCK 7: FAQ & CONTACT FORM CARD
   ========================================================================== */

.bottom-info-grid {
    display: grid;
    grid-template-columns: 1fr 1.12fr;
    gap: 16px;
    margin-bottom: 42px;
}

/* Блок FAQ: убираем внешнюю рамку, делаем строки серыми */
.faq-list {
    background: var(--color-white);
    border: 1px solid var(--color-border);
}



.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    min-height: 48px;
    padding: 18px 24px;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    transition: var(--transition-default);
}

.faq-question:hover {
    color: var(--color-accent);
}

/* SVG-шеврон заменён CSS-треугольником */
.faq-question::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--color-accent);
    border-bottom: 2px solid var(--color-accent);
    transform: rotate(45deg);
    flex: 0 0 10px;
    transition: transform 0.3s ease;
}

.faq-item.active .faq-question::after {
    transform: rotate(225deg);
    border-color: var(--color-accent-hover);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    padding: 0 24px;
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.5;
    transition: max-height 0.35s ease-out, padding 0.35s ease-out;
}

.faq-item.active .faq-answer {
    padding: 0 24px 20px;
}

/* Блок обратного звонка — светло-фиолетовая плашка по гайду */
.write-card {
    min-height: 322px;
    padding: 40px 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-bg); /* #F9F0FF */
    position: relative;
    overflow: visible;
}

/* Убираем тёмный фоновый overlay — теперь светлый фон */
.write-bg,
.write-overlay {
    display: none;
}

.write-content {
    width: 100%;
    max-width: 540px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.write-title {
    font-family: var(--font-headers);
    margin-bottom: 8px;
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-accent); /* Фиолетовый заголовок */
    letter-spacing: -0.01em;
}

.write-text {
    max-width: 420px;
    margin-bottom: 22px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.5;
}

.contact-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Белые поля ввода на светло-фиолетовом фоне */
.form-field {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-text-primary);
    font-size: 14px;
    font-family: var(--font-body);
    transition: var(--transition-default);
}

.form-field:focus {
    border-color: var(--color-accent);
    outline: none;
}

.form-field::placeholder {
    color: var(--color-placeholder);
}

textarea.form-field {
    height: 90px;
    padding-top: 14px;
    resize: none;
}

/* Кнопка «Перезвоните мне» */
.submit-btn {
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    background: var(--color-accent);
    color: var(--color-white);
    font-family: var(--font-body);
}

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

/* ==========================================================================
   BLOCK 8: VIEWED ITEMS BLOCK
   ========================================================================== */

.viewed-section {
    margin-bottom: 56px;
}

.viewed-title {
    font-family: var(--font-headers);
    margin-bottom: 28px;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--color-text-primary);
}

.viewed-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 22px;
}

/* ==========================================================================
   BLOCK 9: FOOTER
   ========================================================================== */

.site-footer {
    margin-top: 10px;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 48px 0;
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-sm);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.35fr repeat(3, 1fr) 1.35fr;
    gap: 34px;
    align-items: start;
}

.footer-logo {
    display: inline-block;
    margin-bottom: 18px;
}

.footer-logo img {
    max-width: 150px;
    max-height: 42px;
    object-fit: contain;
}

.footer-phone {
    display: block;
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.footer-phone:hover {
    color: var(--color-accent);
}

.footer-mail,
.footer-address {
    display: block;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
    font-size: 13px;
    line-height: 1.45;
}

.footer-mail:hover {
    color: var(--color-accent);
}

.footer-title {
    margin-bottom: 14px;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.footer-menu {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.footer-menu a {
    color: var(--color-text-secondary);
    font-size: 13px;
    transition: var(--transition-default);
}

.footer-menu a:hover {
    color: var(--color-accent);
}

/* Форма подписки на рассылку убрана вместе со скидкой 1,5% — её стили
   (.footer-subscribe-*) удалены. */

.footer-socials {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Квадратные кнопки соцсетей — border по гайду */
.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border: 1px solid var(--color-border);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    transition: var(--transition-default);
}

.footer-socials a:hover {
    background: var(--color-accent);
    color: var(--color-white);
    border-color: var(--color-accent);
}

/* Раньше здесь стояли буквы «VK». Иконка есть в спрайте, цвет берёт от
   ссылки — значит и наведение работает тем же правилом выше. */
.footer-socials a svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Юридическая строка футера */
.footer-legal {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: 12px;
    line-height: 1.5;
}

/* ==========================================================================
   RESPONSIVE DESIGN & MOBILE LAYOUTS
   ========================================================================== */

@media (max-width: 1180px) {
    .top-grid {
        grid-template-columns: 1.5fr 1fr;
    }

    .products-grid,
    .viewed-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .buy-grid {
        grid-template-columns: 1fr;
    }

    .buy-steps-flow {
        grid-template-columns: repeat(5, 1fr);
    }

    .help-card {
        grid-column: auto;
    }

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

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

/* ---- Tablet header (769px–1250px) ---- */
@media (max-width: 1250px) {
    .header-top {
        display: flex;
        align-items: center;
        min-height: 64px;
        gap: 0;
        border-bottom: none;
    }

    .header-top .header-logo {
        flex: 0 0 auto;
        margin-right: 20px;
    }

    .header-top .header-phone {
        margin-left: auto;
        font-size: 14px;
    }

    .header-top .header-contact {
        margin-left: 16px;
        font-size: 13px;
    }

    .header-nav {
        display: none;
    }

    .header-bottom {
        display: none;
    }

    .header-burger {
        margin-left: 20px;
    }

    .top-grid {
        grid-template-columns: 1fr;
    }

    .promo-column {
        grid-template-rows: auto;
        grid-template-columns: 1fr 1fr;
    }

    .bottom-info-grid {
        grid-template-columns: 1fr;
    }

    .hero-card {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .equipment-section {
        padding: 18px 0 0;
    }

    .equipment-container {
        padding: 0 16px;
    }

    .footer-container {
        padding: 0 16px;
    }

    .hero-content {
        padding: var(--spacing-md) var(--spacing-sm);
    }

    .hero-title {
        font-size: 23px;
    }

    .products-grid,
    .news-grid,
    .brands-grid,
    .viewed-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .buy-grid {
        grid-template-columns: 1fr;
    }

    .buy-steps-flow {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .buy-steps-flow::before,
    .buy-steps-progress {
        display: none !important;
    }

    .products-head .show-all {
        display: none;
    }

    .show-all-mobile {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--color-accent);
        font-size: 13px;
        font-weight: 700;
        margin-top: 18px;
    }

    .show-all-mobile:hover {
        color: var(--color-accent-hover);
    }

    .products-head,
    .section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--spacing-xs);
        border-bottom: none;
    }

    .products-left {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .products-tabs {
        width: 100%;
        border-bottom: 2px solid var(--color-border);
        padding-bottom: 2px;
    }

    .help-card {
        grid-column: auto;
    }

    .news-card {
        grid-template-columns: 1fr;
    }

    .news-img {
        height: 150px;
    }

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

    .products-section,
    .viewed-section {
        margin-bottom: var(--spacing-lg);
    }

    .products-grid,
    .viewed-grid {
        gap: 24px 18px;
    }

    .product-card,
    .viewed-card {
        padding: 16px;
    }

    .product-img-wrap,
    .viewed-img-wrap {
        height: 170px;
        margin-bottom: 18px;
        padding-top: 18px;
    }

    .product-img,
    .viewed-img {
        max-height: 150px;
    }

    .product-label,
    .viewed-label {
        min-height: 26px;
        padding: 0 8px;
        font-size: 10px;
    }

    .product-price,
    .viewed-price {
        font-size: 17px;
    }

    .product-old-price,
    .viewed-old-price,
    .product-discount,
    .viewed-discount,
    .product-rating,
    .viewed-rating {
        font-size: 12px;
    }

    .product-name,
    .viewed-name {
        min-height: 88px;
        margin-bottom: 40px;
        font-size: 13px;
    }

    .product-favorite,
    .viewed-favorite {
        width: 42px;
        height: 42px;
        font-size: 20px;
        flex-basis: 42px;
    }

    .card-actions {
        grid-template-columns: 1fr 42px;
        gap: 10px;
    }

    .card-cart-btn {
        height: 42px;
        gap: 8px;
        font-size: 14px;
    }

}

@media (max-width: 480px) {
    .brands-grid,
    .buy-grid,
    .news-grid,
    .footer-grid,
    .form-row {
        grid-template-columns: 1fr;
    }

    .products-grid,
    .viewed-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 16px;
    }

    .hero-card {
        min-height: 360px;
    }

    .help-card {
        grid-column: auto;
    }

    .products-head,
    .viewed-title {
        margin-bottom: 18px;
    }

    .section-title,
    .viewed-title {
        font-size: var(--heading-section-mobile);
    }

    .product-card,
    .viewed-card {
        min-width: 0;
        padding: 12px;
    }

    .product-img-wrap,
    .viewed-img-wrap {
        height: 132px;
        margin-bottom: 16px;
        padding: 18px 4px 0;
    }

    .product-img,
    .viewed-img {
        max-height: 116px;
    }

    .product-label,
    .viewed-label {
        min-height: 28px;
        padding: 0 8px;
        font-size: 11px;
    }

    .product-price,
    .viewed-price {
        font-size: 16px;
    }

    .product-name,
    .viewed-name {
        min-height: 0;
        margin-bottom: 8px;
        font-size: 12px;
        line-height: 1.45;
    }

    .product-brand,
    .viewed-brand {
        font-size: 11px;
    }

    .product-stock,
    .viewed-stock {
        font-size: 11px;
        margin-bottom: 10px;
    }

    .product-favorite,
    .viewed-favorite {
        width: 34px;
        height: 34px;
        font-size: 16px;
        flex-basis: 34px;
    }

    .card-actions {
        grid-template-columns: 1fr 34px;
        gap: 8px;
    }

    .card-cart-btn {
        height: 34px;
        font-size: 0;
        gap: 0;
    }

    .card-cart-icon {
        display: inline;
        font-size: 16px;
    }

    .card-cart-text {
        display: none;
    }

    .product-rating,
    .viewed-rating {
        font-size: 11px;
    }
}

/* ==========================================================================
   MOBILE SCROLLS (Brands & Banners matching user wireframe)
   ========================================================================== */

@media (max-width: 768px) {
    .brands-section {
        overflow: hidden;
    }

    .brands-grid {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0 0 10px;
        margin: 0 -12px;
        padding-left: 12px;
        padding-right: 12px;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    .brands-grid::-webkit-scrollbar {
        height: 0;
        display: none;
    }

    .brands-grid {
        scrollbar-width: none;
    }

    .brand-card {
        flex: 0 0 132px;
        min-width: 132px;
        min-height: 58px;
        scroll-snap-align: start;
    }
}

@media (max-width: 480px) {
    .brand-card {
        flex-basis: 124px;
        min-width: 124px;
    }
}

/* Mobile banners — горизонтальный скролл */
@media (max-width: 768px) {
    .top-grid {
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        margin: 0 -8px var(--spacing-md);
        padding: 0 8px 8px;
        grid-template-columns: none;
    }

    .top-grid::-webkit-scrollbar {
        display: none;
    }

    .top-grid {
        scrollbar-width: none;
    }

    /* Большой баннер — ширина 85% экрана */
    .top-grid .hero-card {
        flex: 0 0 85%;
        min-width: 0;
        min-height: 280px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    /* Правая колонка — развертывается в два отдельных слайда */
    .promo-column {
        display: contents;
    }

    .top-grid .promo-card {
        flex: 0 0 75%;
        min-width: 0;
        min-height: 200px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        padding: 20px 18px;
    }

    .hero-dots {
        display: none;
    }
}

@media (max-width: 480px) {
    .top-grid .hero-card,
    .top-grid .promo-card {
        flex-basis: 100%;
        min-height: 330px;
    }
}

/* Header mobile styles */
@media (max-width: 768px) {
    .site-header {
        border-bottom: 1px solid var(--color-border);
    }

    .header-container {
        min-height: 64px;
        padding: 0 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
        box-sizing: border-box;
    }

    .header-top,
    .header-bottom {
        display: contents;
    }

    .header-logo {
        order: 1;
        width: 154px;
        height: 40px;
        flex: 0 0 auto;
    }

    .header-logo img {
        max-height: 40px;
    }

    .header-phone,
    .header-contact,
    .header-nav {
        display: none !important;
    }

    .header-search {
        order: 3;
        margin-left: auto;
        width: 28px;
        height: 58px;
        flex: 0 0 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .header-search input {
        display: none;
    }

    .header-search button {
        position: static;
        width: 28px;
        height: 58px;
        color: var(--color-text-primary);
    }

    .header-search svg {
        width: 24px;
        height: 24px;
        stroke-width: 2.2;
    }

    .header-actions {
        order: 4;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        max-width: none;
        flex: 0 0 auto;
    }

    /* Скрываем избранное на мобилке */
    .header-actions > a[aria-label="Избранное"] {
        display: none;
    }

    /* Профиль: показываем только кнопку-иконку */
    .header-profile-wrap {
        position: relative;
        display: flex;
        align-items: center;
    }

    /* Размер значков: 36px вместо прежних 28. По 28 пикселей попасть пальцем
       заметно тяжелее - это меньше любого разумного минимума для касания. */
    .header-profile-wrap .header-action {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Корзина */
    .header-actions a[aria-label="Корзина"] {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .header-actions svg {
        width: 22px;
        height: 22px;
        stroke-width: 2.1;
    }

    .header-catalog-btn {
        display: none;
    }

    .header-burger {
        order: 5;
        display: inline-flex !important;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }
}

/* На очень маленьких экранах — только логотип, профиль, бургер */
@media (max-width: 400px) {
    .header-container {
        gap: 6px;
        padding: 0 10px;
    }

    .header-search {
        display: none !important;
    }

    .header-actions a[aria-label="Корзина"] {
        display: none;
    }

    .header-profile-wrap .header-action {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }

    .header-burger {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }

    .product-brand,
    .viewed-brand,
    .product-stock,
    .viewed-stock {
        display: none;
    }

    .header-logo {
        width: 130px;
    }
}

/* Нижняя граница — экраны уже 340 пикселей возвращаются к настройкам
   блока 400: с этими значениями логотип, значки и бургер в строку уже
   не помещаются и вылезают за правый край. */
@media (max-width: 380px) and (min-width: 340px) {
    .header-container {
        gap: 14px;
        padding-left: 18px;
    }

    .header-logo {
        width: 142px;
    }

    .header-catalog-btn {
        width: 54px;
        height: 54px;
        flex-basis: 54px;
    }
}

/* ---- Logo variants ---- */
.header-logo .logo-mobile { display: none; }
.header-logo .logo-desktop { display: block; }

.header-logo span.logo-mobile {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--color-accent);
    font-family: var(--font-headers);
    text-transform: uppercase;
    line-height: 1;
}

@media (max-width: 768px) {
    .header-logo .logo-desktop { display: none; }
    .header-logo .logo-mobile  { display: block; }
}

/* ---- Header burger (tablet + mobile only) ---- */
.header-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--color-accent-bg);
    color: var(--color-accent);
    border: none;
    cursor: pointer;
    flex: 0 0 auto;
    transition: var(--transition-default);
}

.header-burger:hover {
    background: var(--color-accent);
    color: var(--color-white);
}

@media (max-width: 1250px) {
    .header-burger { display: inline-flex; }
}

/* ---- Mobile menu drawer ---- */
/* ---- Mobile / Tablet drawer menu ---- */
.mobile-menu {
    display: none;
}

@media (max-width: 1250px) {
    .mobile-menu {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 9999;
        pointer-events: none;
    }

    .mobile-menu.is-open {
        pointer-events: auto;
    }

    .mobile-menu__overlay {
        position: absolute;
        inset: 0;
        background: rgba(9, 30, 66, 0.45);
        opacity: 0;
        transition: opacity 0.28s ease;
    }

    .mobile-menu.is-open .mobile-menu__overlay {
        opacity: 1;
    }

    .mobile-menu__panel {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 82vw;
        max-width: 340px;
        background: var(--color-white);
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.28s ease;
        overflow-y: auto;
    }

    .mobile-menu.is-open .mobile-menu__panel {
        transform: translateX(0);
    }

    .mobile-menu__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 16px 14px;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-menu__logo img {
        height: 36px;
        object-fit: contain;
    }

    .mobile-menu__close {
        width: 38px;
        height: 38px;
        background: var(--color-accent-bg);
        color: var(--color-accent);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        flex: 0 0 auto;
    }

    .mobile-menu__catalog {
        display: flex;
        align-items: center;
        gap: 12px;
        width: calc(100% - 32px);
        margin: 16px;
        padding: 0 20px;
        height: 50px;
        background: var(--color-accent);
        color: var(--color-white);
        font-family: var(--font-body);
        font-size: 15px;
        font-weight: 700;
        border: none;
        cursor: pointer;
    }

    .mobile-menu__catalog .header-catalog-icon span {
        border-color: var(--color-white);
    }

    .mobile-menu__nav {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-menu__nav a {
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 500;
        color: var(--color-text-primary);
        border-bottom: 1px solid var(--color-border);
        text-decoration: none;
    }

    .mobile-menu__nav a:last-child {
        border-bottom: none;
    }

    .mobile-menu__nav a:hover {
        color: var(--color-accent);
        background: var(--color-accent-bg);
    }

    .mobile-menu__account {
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-menu__bottom-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 20px;
        font-size: 15px;
        font-weight: 500;
        color: var(--color-text-primary);
        text-decoration: none;
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-menu__bottom-link:last-child {
        border-bottom: none;
    }

    .mobile-menu__bottom-link svg {
        stroke: currentColor;
        fill: none;
        stroke-width: 1.8;
        flex: 0 0 auto;
    }

    .mobile-menu__bottom-link:hover {
        color: var(--color-accent);
    }

    .mobile-menu__contacts {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 18px 20px;
        border-top: 1px solid var(--color-border);
    }

    .mobile-menu__contacts-phone {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-accent);
        text-decoration: none;
    }

    .mobile-menu__contacts-email {
        font-size: 14px;
        color: var(--color-text-secondary);
        text-decoration: none;
    }

    .mobile-menu__contacts-hours {
        font-size: 13px;
        color: var(--color-text-secondary);
    }
}

/* Full-width mobile menu on phones */
@media (max-width: 600px) {
    .mobile-menu__panel {
        width: 100%;
        max-width: 100%;
    }

    .mobile-menu__overlay {
        display: none !important;
    }
}

/* ==========================================================================
   Хлебные крошки
   Перенесены из account.css: используются на всех внутренних страницах,
   а не только в личном кабинете.
   ========================================================================== */


/* Breadcrumbs */
.account-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Тонкий ползунок — всегда виден */
    scrollbar-width: thin;
    scrollbar-color: var(--color-accent) var(--color-bg-secondary);
    padding-bottom: 6px;
}

.account-breadcrumbs::-webkit-scrollbar {
    height: 3px;
}

.account-breadcrumbs::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

.account-breadcrumbs::-webkit-scrollbar-thumb {
    background: var(--color-accent);
}

.account-breadcrumbs a {
    color: var(--color-accent);
    transition: var(--transition-default);
}

.account-breadcrumbs a:hover { color: var(--color-accent-hover); }

.account-breadcrumbs__sep { color: var(--color-placeholder); }


/* ------------------------------------------------------------------
   Отличия от макета, вынужденные обвязкой Битрикса.

   1. Корзину компонент оборачивает в свой <div id="bx_basket...">, поэтому
      ссылка перестаёт быть прямым потомком .header-actions. Обёртку делаем
      прозрачной для флекса, иначе на мобильном ломаются размеры и отступы.
   2. Поиск компонент тоже оборачивает — в <div class="bx-searchtitle">.
      У этой обёртки нет order, а у логотипа order:1, поэтому на мобильном
      она уезжала ЛЕВЕЕ логотипа. На мобильном её прячем целиком.
   3. Вместо схлопнутого поля из макета на мобильном показываем свою кнопку:
      она открывает модальное окно поиска. Порядок тот же, что в макете —
      лупа перед профилем.
   ------------------------------------------------------------------ */

.header-actions > div[id^="bx_basket"] {
    display: contents;
}

/* На десктопе поле поиска открыто, своя кнопка не нужна:
   иначе рядом со значком внутри поля появляется второй такой же. */
.header-action.header-mobile-search {
    display: none;
}

@media (max-width: 768px) {
    .header-bottom .bx-searchtitle {
        display: none;
    }

    /* В макете мобильный поиск — простая лупа, без кружка и рамки,
       в отличие от профиля и корзины. Повторяем. */
    .header-action.header-mobile-search {
        display: inline-flex;
        order: -1;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 0 !important;
        background: transparent;
    }
}

/* Раньше на экранах до 400px лупу прятали вслед за макетом. Но 390px — это
   ширина большинства iPhone, и поиска на них не оставалось ни в шапке, ни в
   шторке под бургером: искать товар с телефона было нечем. Поиск показываем
   на всех ширинах. */

/* ------------------------------------------------------------------
   Контакты в мобильной шторке.

   В макете там свои классы (.mobile-menu__contacts-phone и т.д.), но телефон,
   почта и режим работы приходят из тех же включаемых областей, что и в шапке.
   Заводить второй источник ради классов не стали — вместо этого повторяем
   оформление макета для той разметки, которую отдают включаемые области:
   ссылка .header-contact — это почта, span .header-contact — режим работы.
   ------------------------------------------------------------------ */
@media (max-width: 1250px) {
    /* В шапке эти классы на мобильном скрыты через !important — правило
       макета. Внутри шторки они, наоборот, нужны, поэтому возвращаем. */
    .mobile-menu__contacts .header-phone,
    .mobile-menu__contacts .header-contact {
        display: block !important;
    }

    .mobile-menu__contacts .header-phone {
        font-size: 16px;
        font-weight: 700;
        color: var(--color-accent);
        text-decoration: none;
    }

    .mobile-menu__contacts a.header-contact {
        font-size: 14px;
        color: var(--color-text-secondary);
        text-decoration: none;
    }

    .mobile-menu__contacts span.header-contact {
        font-size: 13px;
        color: var(--color-text-secondary);
    }
}

/* ------------------------------------------------------------------
   Отступ под шапку.

   Старый /assets задаёт .page { padding-top: calc(156 * var(--width-multiplier)) }
   — компенсация под прежнюю фиксированную шапку. Новая шапка в потоке,
   и этот отступ превращался в 117 пустых пикселей на десктопе.
   Снимаем; собственные отступы секций макета остаются.
   ------------------------------------------------------------------ */
.page {
    padding-top: 0;
}

/* ------------------------------------------------------------------
   Верхний блок главной на мобильном.

   Все баннеры — большой и два промо — складываются в одну горизонтальную
   ленту. Виден ровно один баннер во всю ширину блока, следующий листается
   пальцем; лента ещё и сама переключается по таймеру (см. js/main.js).

   Отличие от макета: там баннеры занимают 85% и 75% ширины, так что край
   следующего подглядывает. По решению от 01.09 показываем по одному целиком.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .top-grid {
        display: flex;
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        grid-template-columns: none;
        margin: 0 -8px var(--spacing-md);
        padding: 0 0 4px;
    }

    .top-grid::-webkit-scrollbar {
        display: none;
    }

    /* Правая колонка исчезает как контейнер: карточки встают в общую ленту */
    .promo-column {
        display: contents;
    }

    .top-grid .hero-card,
    .top-grid .promo-card {
        flex: 0 0 100%;
        min-width: 0;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

    .top-grid .hero-card {
        min-height: 280px;
    }

    .top-grid .promo-card {
        min-height: 200px;
        padding: 20px 18px;
    }

    .hero-dots {
        display: none;
    }
}

@media (max-width: 480px) {
    .top-grid .hero-card {
        min-height: 330px;
    }

    .top-grid .promo-card {
        min-height: 220px;
    }
}

/* ------------------------------------------------------------------
   Блок «Каталог».

   Полной переверстки по макету здесь пока нет — блок остаётся на своей
   разметке, приведены только ширина, сетка и типографика, чтобы он стоял
   в одну линию с верхним блоком и набирался теми же шрифтами.

   Баннер «Как получить максимальную скидку?» из блока убран, поэтому
   обёртка перестаёт быть двухколоночной, а плашки разделов расходятся
   на всю ширину.
   ------------------------------------------------------------------ */
.catalogue-block {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

.catalogue-block__wrapper {
    display: block;
}

.catalogue-block__catalogue {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: 100%;
}

@media (max-width: 1180px) {
    .catalogue-block__catalogue {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 900px) {
    .catalogue-block__catalogue {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .catalogue-block__catalogue {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}


/* ------------------------------------------------------------------
   Единая сетка страницы.

   До этого сеток было три: старый .container из /assets тянулся по ширине
   экрана (1302 пикселя при 1440), шапка жила по своей 1280, а блоки макета
   давали 1248 — ничего не совпадало ни на десктопе, ни на мобильном, где
   поля вдобавок складывались дважды: сначала .container, потом контейнер
   секции.

   Теперь поля задаются в одном месте — у шапки и у .container, — а вложенные
   контейнеры секций своих не добавляют. Шапка и блоки встают по одной линии.
   ------------------------------------------------------------------ */
.container,
.header-container {
    /* !important — потому что старый /assets задаёт .container ширину от
       экрана тоже через !important, и на широких мониторах она перебивала
       сетку макета: контент оказывался шире шапки. */
    max-width: 1280px !important;
    /* Ширина по родителю, а не по экрану. На экранах до 768 старый
       /assets задаёт .container ширину calc(360 * var(--width-multiplier)),
       что равно ровно 100vw — то есть вместе с полосой прокрутки.
       На страницах длиннее экрана контейнер получался на 15 пикселей
       шире видимой области и весь контент уезжал вправо от макета. */
    width: 100% !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-sm);
    padding-right: var(--spacing-sm);
}

.equipment-container,
.catalogue-block {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

/* Старый /assets делает .page флекс-контейнером — это осталось от
   раскладки с боковой колонкой. Контейнер внутри становился флекс-
   элементом и на страницах длиннее экрана растягивался по содержимому,
   вылезая за видимую область на ширину полосы прокрутки. В макете
   <main> обычный блок — возвращаем блочную раскладку. */
.page {
    display: block;
}

@media (max-width: 768px) {
    /* Поля по макету: у контента 16, у шапки 12. Раньше и там и там
       стояло 8 — вместе с обнулённым полем ленты баннеров это давало
       тот же отступ на главной, но на остальных страницах контент
       уезжал к краю на 8 пикселей ближе, чем в макете. */
    .header-container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Лента баннеров выходит за поля контейнера и идёт ближе к краю
       экрана — так в макете */
    .top-grid {
        margin-left: -8px;
        margin-right: -8px;
        padding-left: 0;
        padding-right: 0;
    }
}

/* ------------------------------------------------------------------
   Размеры значков и картинок.

   Старый /assets растягивает svg и img на всю ширину родителя. В макете
   этого нет, поэтому значки разъезжались: полосы бургера выходили толще,
   а иконки в шторке раздувались до размеров экрана. Задаём размеры явно.
   ------------------------------------------------------------------ */
/* Значки из макета несут собственные width и height в разметке, а старый
   /assets растягивает любой svg на всю ширину родителя — стрелка фильтра
   и плюс «Показать ещё» раздувались до 212 пикселей. Возвращаем таким
   значкам их собственный размер. Значков сайта правило не касается:
   они рисуются через <use> из спрайта и размеров в разметке не имеют. */
svg[width][height] {
    width: auto;
    height: auto;
    flex: 0 0 auto;
}

.header-burger svg {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

/* Старый /assets делает ссылки блочными, и обёртка логотипа растягивалась
   на всю ширину шторки, добавляя лишнюю высоту под картинкой. */
.mobile-menu__logo {
    display: inline-flex;
    align-items: center;
    width: auto;
    height: auto;
}

.mobile-menu__logo img {
    width: auto;
    height: 36px;
    max-width: none;
    object-fit: contain;
}

.mobile-menu__close svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.mobile-menu__bottom-link svg,
.mobile-menu__catalog svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Иконки в мобильной шапке жмутся к бургеру, как в макете: там поиск
   стоит отдельным элементом с отступом влево, и группа значков
   оказывается вплотную к кнопке меню.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .header-actions {
        margin-left: auto;
    }

    .header-burger {
        margin-left: 28px;
    }
}

/* ------------------------------------------------------------------
   Зазор между лентой баннеров и блоком «Каталог» — как в макете.
   ------------------------------------------------------------------ */
.top-grid {
    margin-bottom: 24px;
}

.catalogue-block {
    margin-top: 0;
    padding-top: 0;
    /* старый /assets даёт 46,5 пикселя снизу; в макете переход к следующей
       секции 42 */
    padding-bottom: 42px;
}

/* ------------------------------------------------------------------
   Выравнивание карточек товара.

   В макете все четыре названия случайно уместились в три строки, поэтому
   артикул, наличие и кнопки там стоят на одной линии. С реальными
   названиями длина разная, и строки разъезжаются. Закрепляем название на
   три строки: лишнее прячем многоточием, короткое добирает высоту.
   ------------------------------------------------------------------ */
.product-name {
    min-height: 63px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-name a {
    color: inherit;
}

/* Строки характеристик выводятся всегда, даже если значения нет: вместо
   пропуска ставится прочерк, иначе карточки снова разъедутся. */

/* ------------------------------------------------------------------
   Заголовки секций.

   Старый /assets задаёт всем h2 отступ снизу calc(56 * var(--width-multiplier))
   — 42 пикселя на 1440. У .catalog-title и родственных есть свой отступ, он
   старый перебивает, а у .section-title его не было: заголовок тянул шапку
   блока вниз, и вкладки со ссылкой «Смотреть все» переставали стоять на одной
   линии с ним. В макете такого отступа нет.
   ------------------------------------------------------------------ */
.section-title {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Иконки из спрайта сайта.

   Корзина и избранное берутся из /spritemap.svg — те же значки, что на
   боевом telecomo.ru, вместо нарисованных в макете. У символов спрайта нет
   собственных размеров, а старый /assets растягивает svg на всю ширину
   родителя, поэтому размеры задаём явно.
   ------------------------------------------------------------------ */
.product-favorite svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   Избранное в мобильной шапке — убрано.

   Решением от 01.09 значок показывали на всех экранах, но на телефоне
   места в шапке мало, а поиск для магазина важнее избранного. По решению
   от 11.09 в мобильной шапке остаются поиск, профиль и корзина; избранное
   доступно из шторки под бургером.

   Своего правила здесь больше нет: значок скрывает базовое правило
   .header-actions > a[aria-label="Избранное"] в блоке до 768px выше.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Узкие экраны: корзина остаётся в шапке.

   Макет на ширинах до 400 пикселей оставляет только логотип, профиль и
   бургер. Но 390 — это ширина большинства iPhone, и на них из шапки
   магазина пропадала корзина. Возвращаем её.

   Избранное здесь больше не показываем: место отдано поиску, без которого
   с телефона нельзя найти товар. Избранное осталось в шторке под бургером.
   Ширина сходится: логотип 154, три значка по 36 и бургер 40 — это 302 при
   доступных 358.
   ------------------------------------------------------------------ */
@media (max-width: 400px) {
    .header-actions a[aria-label="Корзина"] {
        display: inline-flex;
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        align-items: center;
        justify-content: center;
    }
}

/* Значок в кнопке «В корзину»: на узких экранах он заменяет текст.
   Размер задаём явно — у символа спрайта своего нет. */
.card-cart-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    vertical-align: middle;
}

/* Значок в слайде УТП: в макете у svg есть атрибуты 56 на 56, но старый
   /assets перебивает их правилом svg { width: 100% } — значок раздувался
   на всю ширину слайдера. */
.utp-slide__icon svg {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
}

/* Карточка новости: держим одинаковую высоту, как в макете.
   Заголовок и анонс ограничены строками — иначе длинные новости
   вытягивают карточку, и ряд разъезжается. */
.news-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-text {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Высота карточки новости зафиксирована по макету: иначе ряд скачет
   вслед за длиной анонсов, которые у нас свои. */
.news-card {
    min-height: 226px;
}

/* ------------------------------------------------------------------
   Низ подвала: платёжные системы, документы, реквизиты.

   Классы этого блока стилей не имели вовсе, поэтому колонки не
   раскладывались, ссылки шли сплошной строкой, а картинку платёжных
   систем старый /assets растягивал на всю ширину.
   ------------------------------------------------------------------ */
.footer-payments {
    margin-top: 16px;
}

.footer-payments img {
    width: auto;
    max-width: 100%;
    height: 28px;
    object-fit: contain;
}

.footer-legal .footer-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-legal__docs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.footer-legal__docs a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.footer-legal__docs a:hover {
    color: var(--color-accent);
}

.footer-legal__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@media (max-width: 768px) {
    .footer-legal__docs {
        flex-direction: column;
        gap: 8px;
    }
}

/* ------------------------------------------------------------------
   Верхний ряд шапки: текст по нижнему краю логотипа.

   Ряд был выровнен по центру, из-за чего телефон, почта, режим работы и
   меню висели на 11 пикселей выше низа логотипа и казались оторванными
   от него. Прижимаем к нижнему краю.
   ------------------------------------------------------------------ */
.header-top {
    align-items: end;
    padding-bottom: 12px;
}

@media (max-width: 1250px) {
    /* На планшете и мобильном ряд снова становится флексом по центру */
    .header-top {
        align-items: center;
        padding-bottom: 0;
    }
}

/* ------------------------------------------------------------------
   Единый стиль блоков и обводок.

   Было вразнобой: у карточки товара рамка 1 пиксель, у брендов, шагов
   покупки и новостей — 2, у плашек каталога рамки не было вовсе.
   При наведении подсветка тоже отличалась: где-то только рамка, где-то
   рамка с подъёмом и тенью, у шагов покупки ничего.

   Приводим к одному: рамка 2 пикселя, при наведении акцентная рамка,
   лёгкий подъём и тень.
   ------------------------------------------------------------------ */
.product-card,
.viewed-card,
.catalogue-block__card {
    border: 2px solid var(--color-border);
}

.catalogue-block__card,
.brand-card,
.buy-step {
    transition: var(--transition-default);
}

.catalogue-block__card:hover,
.brand-card:hover,
.buy-step:hover,
.product-card:hover,
.viewed-card:hover,
.news-card:hover {
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(9, 30, 66, 0.08);
}

/* ------------------------------------------------------------------
   Совсем узкие экраны: всё содержимое шапки должно помещаться.

   На 336 пикселях ряд не влезал: логотип 142, три значка, бургер 44 и
   отступы по 14 давали 334 при доступных 310 — бургер уезжал за правый
   край экрана. Ужимаем отступы и поля.

   Профиль держим того же размера, что поиск и корзина, — 36 пикселей.
   Раньше здесь его ужимали до 28 ради ряда из четырёх значков; теперь в
   шапке их три (избранное переехало в шторку), и место есть.
   ------------------------------------------------------------------ */
@media (max-width: 400px) {
    .header-profile-wrap .header-action {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }
}

@media (max-width: 380px) {
    .header-container {
        gap: 6px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .header-actions {
        gap: 4px;
    }

    .header-burger {
        margin-left: 8px;
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
    }
}

/* ------------------------------------------------------------------
   Базовый вид плашки каталога на главной (фон, поля, картинка,
   типографика названия) — раньше держался только на старом /assets и
   нигде не был перенесён в новый слой; из точечных правок здесь были
   только рамка, hover и разрешение переноса текста ниже. Пока /assets
   был подключён, это было незаметно — теперь переносим полностью.
   ------------------------------------------------------------------ */
.catalogue-block__card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 24px 20px;
    background: var(--color-bg-secondary);
}

.catalogue-block__card-image {
    width: 100%;
    height: 110px;
    object-fit: contain;
}

/* Название раздела на плашке — заголовочным шрифтом, как и такие же
   плашки на странице каталога (.catpage-card__name): это имя раздела,
   а не строка перечня. Раньше здесь был шрифт основного текста
   обычного начертания, и две сетки разделов выглядели по-разному. */
.catalogue-block__card-name {
    width: 100%;
    margin-top: 12px;
    text-align: center;
    font-family: var(--font-headers);
    font-size: var(--heading-card);
    line-height: var(--heading-card-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
}

@media (max-width: 768px) {
    .catalogue-block__card-image {
        height: 80px;
    }

    .catalogue-block__card-name {
        font-size: var(--font-size-text-s);
        line-height: var(--line-height-text-s);
    }
}

/* ------------------------------------------------------------------
   Названия разделов каталога не обрезаем.

   Старый /assets ограничивает подпись двумя строками и прячет остаток,
   поэтому «Системы безопасности и видеонаблюдения» обрывалось на полуслове.
   Взамен — запас высоты на 2 строки у всех плашек сразу (min-height),
   иначе ряд с длинным названием («Серверное оборудование и системы
   хранения») выше остальных, и рамки по сетке визуально не совпадают.
   ------------------------------------------------------------------ */
.catalogue-block__card-name {
    -webkit-line-clamp: none;
    overflow: visible;
    display: block;
    /* 3 строки, не 2: «Серверное оборудование и системы хранения» —
       самое длинное название из реальных разделов — реально
       переносится в 3 строки при текущей ширине плашки. */
    min-height: calc(1.5em * 3);
}

@media (max-width: 768px) {
    .catalogue-block__card-name {
        /* На узких экранах то же название переносится в 4 строки —
           карточки в 2 колонки уже, чем в 3-5 на десктопе. */
        min-height: calc(var(--line-height-text-s) * 1em * 4);
    }
}

/* Высоту плашки старый /assets задаёт жёстко, от ширины экрана. Длинные
   названия в неё не помещались и вылезали наружу. Отпускаем высоту по
   содержимому: с запасом на 2 строки названия (выше) все плашки и так
   получаются одной высоты. */
.catalogue-block__card {
    height: auto;
}

/* ------------------------------------------------------------------
   Хлебные крошки и верхний отступ страницы.

   Разметку крошек печатает bitrix:breadcrumb — её не трогаем, там
   микроразметка schema.org. Оформление берём из макета
   (.account-breadcrumbs): 13 пикселей, серый, разделитель «›».
   Старый /assets давал списку 46 пикселей отступа сверху и своё поле
   снизу — из-за этого между крошками и заголовком зияла дыра.

   В макете крошки лежат внутри страницы и верхний отступ (32) задаёт
   она сама. У нас их печатает header.php над контентом, поэтому этот
   отступ переносим на них, а расстояние до заголовка каждая страница
   задаёт сама.
   ------------------------------------------------------------------ */
.page-breadcrumbs {
    padding-top: var(--spacing-lg);
    margin: 0;
}

.page-breadcrumbs .breadcrumbs {
    display: flex;
    /* Одной строкой, как в макете: на узких экранах крошки не
       переносятся, а прокручиваются вбок. */
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.page-breadcrumbs .breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.page-breadcrumbs .breadcrumbs li + li::before {
    content: '›';
    color: var(--color-text-secondary);
}

.page-breadcrumbs .breadcrumbs a,
.page-breadcrumbs .breadcrumbs span {
    color: inherit;
    text-decoration: none;
    font-size: inherit;
}

.page-breadcrumbs .breadcrumbs a:hover {
    color: var(--color-accent);
}

/* Старый /assets задаёт секциям крупные вертикальные поля, посчитанные
   от ширины экрана. На переверстанных страницах отступы задают сами
   блоки, поэтому у обёртки их снимаем. Выбираем секцию по содержимому,
   чтобы не задеть страницы, которые ещё не переверстаны. */
.section:has(> .catpage),
.section:has(.catalog-layout) {
    padding-top: 0;
    padding-bottom: 0;
}

/* До заголовка разделов — 20 пикселей, как в макете */
.catpage {
    padding-top: 20px;
}

/* ------------------------------------------------------------------
   Хлебные крошки на узких экранах.

   Старый /assets держит список в одну строку: max-height 38 и
   overflow auto. Когда крошки не помещаются и переносятся, вторая
   строка обрезалась пополам. Разрешаем расти по содержимому.
   ------------------------------------------------------------------ */
.page-breadcrumbs .breadcrumbs {
    max-height: none;
    overflow-y: visible;
}

/* ------------------------------------------------------------------
   Кнопка карточки без значка.

   На узких экранах у кнопки «В корзину» прячется текст и остаётся
   значок. Но у товаров без цены вместо неё стоит «Подробнее», значка
   там нет — и кнопка оказывалась пустой. Такой кнопке текст оставляем.
   ------------------------------------------------------------------ */
.card-cart-btn:not(:has(.card-cart-icon)) {
    font-size: 13px;
}

.card-cart-btn:not(:has(.card-cart-icon)) .card-cart-text {
    display: inline;
}

/* ------------------------------------------------------------------
   Текстовые блоки под контентом: описание раздела и текст каталога.

   Оба приходят из админки готовой разметкой. Рамки у них нет — это
   обычный текст в потоке страницы, по той же сетке, что и остальные
   блоки. Размеры задаём явно каждому элементу: старый /assets считает
   их от ширины экрана, и списки шли то 12 пикселей на десктопе, то 19
   на мобильной, а межстрочный интервал заголовка доходил до 43.
   ------------------------------------------------------------------ */
.catalog-seo,
.product-list__description {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: 0 0 var(--spacing-lg);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.catalog-seo__title,
.product-list__description h2 {
    font-family: var(--font-headers);
    font-size: var(--heading-section);
    line-height: var(--heading-section-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-sm);
    /* В этих заголовках попадаются слова, которые на телефоне не влезают
       в строку целиком — «телекоммуникационного», «видеонаблюдения».
       Разрешаем перенос внутри слова, иначе хвост торчит за край блока. */
    overflow-wrap: break-word;
}

/* Заголовки внутри текста раздела — их пишет контент-менеджер из
   админки. Ставим ступень подраздела: крупнее абзацев, но мельче
   заголовка самого блока над ними. */
.catalog-seo__text h2,
.catalog-seo__text h3,
.product-list__description h3 {
    font-family: var(--font-headers);
    font-size: var(--heading-sub);
    line-height: var(--heading-sub-lh);
    font-weight: var(--heading-weight);
    color: var(--color-text-primary);
    margin: var(--spacing-md) 0 8px;
}

.catalog-seo__text,
.catalog-seo__text p,
.catalog-seo__text ul li,
.catalog-seo__text ol li,
.product-list__description p,
.product-list__description ul li,
.product-list__description ol li {
    /* Селектор с ul/ol намеренно: старый /assets задаёт размер
       правилом .product-list__description ul li, и без такой же
       вложенности он побеждает. */
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.catalog-seo__text p,
.product-list__description p {
    margin: 0 0 12px;
}

.catalog-seo__text ul,
.catalog-seo__text ol,
.product-list__description ul,
.product-list__description ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.catalog-seo__text ul li,
.catalog-seo__text ol li,
.product-list__description ul li,
.product-list__description ol li {
    margin-bottom: 4px;
}

.catalog-seo__text p:last-child,
.catalog-seo__text ul li:last-child,
.product-list__description p:last-child,
.product-list__description ul li:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Кнопка «В корзину» на узких экранах — во всех карточках сайта.

   Раньше подпись сменялась значком только ниже 480, и то лишь у
   карточек главной. Порог единый — 768, как у остальной мобильной
   вёрстки: и на главной, и в каталоге, и в «Вы смотрели ранее».
   Кнопки без значка это правило не трогает: у них подпись остаётся,
   иначе кнопка «Подробнее» была бы пустой.
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .card-cart-btn {
        gap: 0;
    }

    .card-cart-text {
        display: none;
    }

    .card-cart-icon {
        display: inline-flex;
        align-items: center;
    }
}

/* ------------------------------------------------------------------
   Кнопка корзины в карточке товара: служебная обёртка компонента.

   Компонент оборачивает кнопку в div — через него он подменяет её на
   ссылку «В корзине» после добавления товара. Обёртка не растягивалась
   на свою колонку, и в блоке похожих товаров кнопка сжималась до
   ширины значка — 18 пикселей вместо 80.
   ------------------------------------------------------------------ */
.card-actions > div {
    width: 100%;
    min-width: 0;
}

/* Экраны уже 320 пикселей: логотип, значки и бургер перестают помещаться
   в строку — сжимаем логотип и возвращаем бургеру уменьшенный размер. */
@media (max-width: 319px) {
    .header-container {
        gap: 6px;
        padding: 0 8px;
    }

    .header-logo {
        width: 112px;
    }

    .header-burger {
        flex: 0 0 36px;
        width: 36px;
        height: 36px;
    }
}

/* ------------------------------------------------------------------
   Универсальный переключатель вкладок (main.js: .tab__trigger клик
   ставит .is-active и на кнопке, и на соответствующей .tab-панели).
   Используется на регистрации/авторизации (Физическое/Юридическое
   лицо) и в табах карточки товара. Видимость и позиционирование самих
   .tab-панелей никогда не переносились из /assets — без /assets все
   вкладки показывались одновременно, друг под другом.
   ------------------------------------------------------------------ */
.tab {
    z-index: -1;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 0.2em, 0);
    transition: 0.35s;
}

.tab__container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.tab:not(:first-child) {
    position: absolute;
    left: 0;
    top: 0;
}

.tab.is-active {
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

/* ------------------------------------------------------------------
   ЛЕНТА БАННЕРОВ НА ТЕЛЕФОНЕ — СТОЛБИКОМ ПОД АНИМАЦИЕЙ.

   На широком экране раскладка макета не меняется: анимация слева,
   колонка из двух статичных промо справа.

   На узких экранах по макету все три баннера лежали горизонтальной
   лентой со скролл-снапом — их листали пальцем. С играющим баннером так
   не работает: статичные предложения остаются спрятаны за свайпом и их
   просто не видят. Поэтому здесь лента разворачивается в столбик:
   сверху анимация, под ней обе карточки.

   Правило идёт последним и перебивает карусельные блоки выше
   (768px и 480px).
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .top-grid {
        display: flex;
        flex-direction: column;
        /* Промежуток больше, чем у карусели: статичные карточки не должны
           начинаться сразу под играющим кадром, иначе они лезут в него
           и анимацию не рассматривают. */
        gap: var(--spacing-md);
        overflow: visible;
        scroll-snap-type: none;
        /* карусель уходила под края экрана отрицательными полями — столбику
           они не нужны */
        margin: 0 0 var(--spacing-md);
        padding: 0;
    }

    /* колонка промо остаётся «прозрачной», карточки — прямые элементы ленты */
    .promo-column { display: contents; }

    .top-grid .hero-card,
    .top-grid .promo-card {
        flex: 0 0 auto;
        min-width: 0;
        scroll-snap-align: none;
    }

    /* Анимации нужна высота и на телефоне: в полосе 300 пикселей от неё
       остаётся ~235 под содержимое страницы за вычетом шапки, и смотреть
       там нечего. На 420 остаётся ~356 — уже видно, что происходит. */
    .top-grid .hero-card { min-height: 420px; }

    /* статичные карточки, наоборот, пониже: здесь они второстепенные */
    .top-grid .promo-card { min-height: 170px; }
}