/* ==========================================================================
   overrides.css — landing-specific values
   --------------------------------------------------------------------------
   ВСЁ, что меняется с ленда на ленд, живёт здесь. Файл подключается ПОСЛЕДНИМ —
   значит любая переменная или правило отсюда перекрывает базовые из других
   файлов. Бери этот файл за основу при заведении нового ленда.

   Содержит ровно три секции:
     1. Бренд-переменные   (цвет акцента, золота, фон, радиусы)
     2. Шрифт и оффер      (название продукта, цены, ссылки)
     3. Точечные правки    (для микрокорректировок без переписывания компонентов)
   ========================================================================== */

:root {
    /* --- 1. Бренд-переменные (палитра из Figma-макета Hondrodox, SEOX-2330) -
       Бирюзово-зелёный бренд + розовый CTA (как на упаковке Hondro/DOX). */
    /* Основной тёмно-бирюзовый бренда (Dark/Navy #286E5F): шапка, заголовки, цены, таймер */
    --c-navy:      #286e5f;
    --c-navy-deep: #2d6d5d; /* Primary/Dark */
    --c-darker:    #48917a; /* Primary/Darker */
    /* Бирюзовый акцент (ссылки, кнопка «назад», фокус) — Primary/Accent #39BE92 */
    --c-accent:    #39be92;
    --c-tint:      #c6e8de; /* Primary/Tint */
    --c-wash:      #eaf7f3; /* Primary/Wash — промо-бар, чипы доставки */
    /* Розовый CTA-акцент (главная кнопка заказа) — Accent #EC4F88 */
    --c-gold:      #ec4f88;
    --c-gold-soft: #ffebbe; /* плашка -50% по макету остаётся золотой */
    --c-gold-text: #dd9b00;
    /* Тень CTA — точное значение из макета (розово-красное свечение #F5005E) */
    --sh-cta:      0 8px 22px rgba(245, 0, 94, 0.35);
    /* Красный (warning) */
    --c-danger:    #da2f15;
    --c-danger-bg: #ffece9;

    /* --- 2. Типографика, оффер ---------------------------------------- */
    --ff-display: 'Brygada 1918', 'Geologica', serif;
    --ff-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Радиусы (если ленд требует более плоский/острый стиль) */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* --- 3. Точечные правки --------------------------------------------------
   Здесь можно держать одиночные правила, которые «подкручивают» компонент,
   не переписывая его исходные стили. Примеры:

   .topbar { background: linear-gradient(...); }
   .product__cta { text-transform: uppercase; }
   .desc__title { font-style: italic; }

   ----------------------------------------------------------------------- */

/* [A] Мини-форма заказа в шагах (order.html) */
.steps .register__submit {
    height: 46px;
    font-size: 14px;
}

.steps .mockform {
    height: auto;
    min-height: 200px;
}

/* [B] Видео-ревю: портрет 9:16 на всех ширинах */
.video {
    aspect-ratio: 9 / 16;
    max-width: min(100%, 300px);
    margin-inline: auto;
}

/* [C] Планшет: язык, CTA и бургер — справа */
@media (max-width: 1024px) {
    .header__lang {
        margin-left: auto;
    }
}

/* [D] Узкие экраны: карточки шагов не на всю ширину */
@media (max-width: 768px) {
    .steps {
        justify-items: center;
    }

    .steps__card {
        width: 100%;
        max-width: 400px;
    }
}

/* [E] CTA в шапке — одна строка; поджим отступов при переполнении */
.product__cta--sm {
    white-space: nowrap;
    text-align: center;
}

@media (min-width: 1025px) and (max-width: 1180px) {
    .topbar__nav {
        gap: 12px;
    }

    .topbar__inner {
        gap: 12px;
    }

    .product__cta--sm {
        padding: 6px 14px;
    }
}

/* [F] Тени/свечения по макету — в animations.css они захардкожены золотом/синим,
   не через переменные, поэтому переопределяем здесь (overrides.css грузится последним).
   CTA-пульс → розовое свечение #F5005E; hover-тени галереи → бирюза #286e5f (40,110,95). */
@keyframes pulse-cta {
    0%, 100% { box-shadow: 0 8px 22px rgba(245, 0, 94, 0.35); }
    50%      { box-shadow: 0 8px 30px rgba(245, 0, 94, 0.55); }
}

.product__main-img:hover {
    box-shadow: 0 24px 60px rgba(40, 110, 95, 0.18);
}

.product__thumb--active {
    box-shadow: 0 0 0 1px var(--c-navy), 0 6px 14px rgba(40, 110, 95, 0.18);
}

/* [G] Активная ссылка в шапке — белая (по макету nav белый на бирюзе, не розовый).
   Стоковый multi-2: text + подчёркивание ::after = var(--c-gold) → теперь розовые. */
.topbar__nav-link--active {
    color: #fff;
}

.topbar__nav-link::after {
    background: #fff;
}