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

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

:root {
    /* --- 1. Бренд-переменные ------------------------------------------ */
    /* Основной синий бренда */
    --c-navy:      #103973;
    --c-navy-deep: #0c2c5b;
    --c-darker:    #2d496d;
    /* Синий-акцент (футер-лого, кнопки "Tudj meg többet") */
    --c-accent:    #318bd5;
    --c-tint:      #c6d9e8;
    --c-wash:      #eaf1f7;
    /* Жёлтый акцент CTA */
    --c-gold:      #ec9b4f;
    --c-gold-soft: #ffebbe;
    --c-gold-text: #b9701f;
    /* Красный (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: 1200px) {
    .topbar__nav {
        gap: 14px;
    }

    .topbar__inner {
        gap: 16px;
    }

    .topbar__nav-link {
        font-size: 15px;
    }
}

/* ==========================================================================
   SEOX-2327 DBXol — превентивные ревью-фиксы multi-2
   ========================================================================== */

/* [F] Нет горизонтального скролла из-за scroll-reveal (clip не ломает sticky) */
.page {
    overflow-x: clip;
}

/* [I] iPad Pro 1024: блок инфо товара («шапка») по центру, выровнен с галереей
   (ревью Anastasiya M). По умолч. flex растягивает .product__info на 705px влево. */
@media (max-width: 1024px) {
    .product__info {
        width: 100%;
        max-width: 500px;
        align-self: center;
    }
}

/* [G] specs__head теперь <h3> (SEO) — сбросить UA-margin */
.specs__head {
    margin: 0;
}

/* [H] Хедер на десктопе <1200: длинные ES-лейблы (Almacenamiento, Instrucciones)
   не влезают в инлайн-nav (срез ~24px на 1025–1079) → бургер-дроп до 1199.98 */
@media (max-width: 1199.98px) {
    .topbar__inner .product__cta--sm {
        height: 34px;
        padding: 6px 16px;
        font-size: 13px;
        width: fit-content;
        flex: 0 0 auto;
        margin-inline-start: auto;
    }

    .topbar__burger {
        display: block;
        position: relative;
    }

    .topbar__nav {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        right: 0;
        max-height: calc(100vh - var(--topbar-h));
        overflow-y: auto;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 16px 20px 24px;
        background: var(--c-navy);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        transform: translateY(-12px);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
    }

    .topbar__nav-link {
        padding: 14px 8px;
        font-size: 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .topbar__nav-link:last-of-type {
        border-bottom: 0;
    }

    .topbar__nav-link:after {
        display: none;
    }

    .topbar:before {
        content: "";
        position: fixed;
        inset: var(--topbar-h) 0 0;
        background: #00000073;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.25s ease, visibility 0.25s;
        pointer-events: none;
        z-index: -1;
    }

    .topbar.is-open .topbar__nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }

    .topbar.is-open:before {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}