/* ==========================================================================
   База: сброс, типографика, контейнер, кнопки
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font-base);
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-text);
    background: var(--c-white);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
/* Ссылки в тексте согласия под формами («политикой» → /policy/,
   «обработки персональных данных» → /personal-data/). Внешне неотличимы от
   остального текста: цвет наследуется, подчёркивания нет — выделяются только
   при наведении. Правило лежит в base.css, потому что текст согласия есть и в
   подвале, который выводится на всех страницах, включая главную без pages.css. */
.consent__link { color: inherit; text-decoration: none; transition: color .2s; }
.consent__link:hover { color: var(--c-accent); }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.15; }

/* --- Контейнер --- */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- Заголовки секций --- */
.section-title {
    font-size: 48px;
    font-weight: 400;
    line-height: 60px;
    text-align: center;
    letter-spacing: 0;
    text-transform: uppercase;
    margin: 0 0 40px;
}

/* --- Кнопки --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 28px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    transition: background-color .2s ease, color .2s ease, opacity .2s ease;
    white-space: nowrap;
}
.btn--accent { background: var(--c-accent); color: var(--c-white); }
.btn--accent:hover { background: var(--c-accent-600); }
.btn--ghost {
    background: transparent;
    color: var(--c-white);
    border: 1px solid var(--c-border-dark);
}
.btn--ghost:hover { background: rgba(255,255,255,.08); }

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

/* --- Уведомления форм ---
   Элемент создаёт script.js прямо в body, поэтому он работает и на обычных
   страницах с footer, и в отдельном просмотрщике PDF без общего шаблона. */
.site-toast {
    position: fixed; z-index: 1100; right: 24px; bottom: 24px;
    width: min(420px, calc(100vw - 48px)); min-height: 56px;
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px 14px 18px; border-radius: var(--radius-sm);
    color: var(--c-white); background: var(--c-navy-900);
    border-left: 4px solid var(--c-accent); box-shadow: 0 10px 30px rgba(5, 7, 59, .28);
    font-size: 16px; line-height: 20px;
}
.site-toast[hidden] { display: none; }
.site-toast--success { background: var(--c-accent); }
.site-toast--error { border-left-color: #E03A3A; }
.site-toast__text { flex: 1 1 auto; }
.site-toast__close {
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0;
    border-radius: 50%; background: transparent; color: var(--c-white);
    font-size: 26px; line-height: 24px;
}
.site-toast__close:hover { background: rgba(255, 255, 255, .14); }
.site-toast__close:focus-visible { outline: 2px solid var(--c-white); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
    .site-toast { animation: site-toast-in .2s ease-out; }
}
@keyframes site-toast-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 1279px) {
    :root {
        --gutter: 28px;
        --qlinks-safe: env(safe-area-inset-bottom, 0px);
        --qlinks-height: calc(70px + var(--qlinks-safe));
    }
    .section-title { font-size: 32px; line-height: 40px; margin-bottom: 36px; }
    /* На планшете и телефоне низ экрана занимает .qlinks. Соседним
       селектором тост не отличить: панель лежит внутри .page-wrapper,
       а тост скрипт создаёт прямо в body. Поднимаем всегда, а на странице
       просмотра каталога, где панели нет, отступ возвращает pdfview.css. */
    .site-toast { bottom: calc(var(--qlinks-height) + 16px); }
}
/* Мобайл — спек Figma 1780:90070: гаттер 16, заголовок секции 32/40,
   базовый кегль текста 16/20, кнопка h40 (паддинг 12/24, r12) */
@media (max-width: 767px) {
    :root { --gutter: 16px; }
    body { font-size: 16px; }
    .site-toast { right: 16px; width: calc(100vw - 32px); }
    .section-title { font-size: 32px; line-height: 40px; margin-bottom: 20px; }
    /* Кнопка 40px: 10 + 20 (line-height) + 10. Без фиксированной height —
       иначе ломаются кнопки с переносом текста и варианты h44 («Подробнее»). */
    .btn { padding: 10px 24px; border-radius: 12px; font-size: 16px; line-height: 20px; min-height: 40px; }
}

/* --- Зафиксированные кнопки на всех страницах (Figma 1471:91545) --- */
.fabs { position: fixed; top: 50%; transform: translateY(-50%); z-index: 60; display: flex; flex-direction: column; gap: 12px; }
.fabs--left  { left: 0; }
.fabs--right { right: 0; }
.fabs__btn img { width: 55px; height: 55px; display: block; }
.fabs__btn { display: block; cursor: default; transition: opacity .2s; }

/* Выезжающая кнопка (Figma ix60rZFbGiwzv1CujV7uy0 173:22812/22985/23037):
   в покое — квадрат 55×55 с иконкой, приклеен к левому краю (левый угол прямой);
   при ховере расширяется вправо и показывает подпись. */
.fab { position: relative; display: flex; align-items: center; height: 55px; width: 55px;
    padding: 8px 10px; gap: 8px; overflow: hidden; white-space: nowrap;
    background: #FF6A00; border-radius: 0 8px 8px 0; color: #fff;
    transition: width .28s cubic-bezier(.22,.61,.36,1); }
.fab__ic { flex: 0 0 auto; width: 35px; display: flex; align-items: center; justify-content: center; }
.fab__ic img { width: auto; height: auto; max-width: 35px; max-height: 40px; display: block; }
.fab__label { flex: 0 0 auto; font-size: 14px; line-height: 16.8px; font-weight: 400; color: #fff;
    opacity: 0; transition: opacity .22s ease .04s; }
/* Развёрнутая ширина у каждой кнопки своя — под длину подписи (замер макета) */
.fabs--left .fab:nth-child(1):hover, .fabs--left .fab:nth-child(1):focus-visible { width: 218px; }
.fabs--left .fab:nth-child(2):hover, .fabs--left .fab:nth-child(2):focus-visible { width: 206px; }
.fabs--left .fab:nth-child(3):hover, .fabs--left .fab:nth-child(3):focus-visible { width: 184px; }
.fab:hover .fab__label, .fab:focus-visible .fab__label { opacity: 1; }

/* --- Fixed_Bottom_Bar: замена левой колонки на планшете/мобиле (Figma 1502:46123) --- */
.qlinks { display: none; }
@media (max-width: 1279px) {
    .fabs--left { display: none; }
    .qlinks {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        display: flex; align-items: center; justify-content: center; gap: 154px;
        height: var(--qlinks-height); padding: 10px 16px calc(10px + var(--qlinks-safe));
        border-radius: 12px 12px 0 0;
        background: linear-gradient(90deg, #05073F 0%, #062675 100%);
    }
    .qlinks a { display: flex; align-items: center; gap: 8px; color: #919DC1; font-size: 12px; line-height: 14px; }
    .qlinks a:hover { color: var(--c-accent); }
    .qlinks img { width: 32px; height: 32px; flex: none; }
    /* Резерв под закреплённую полосу (70px), чтобы она не перекрывала низ
       футера при прокрутке до упора. Селектор из двух классов обязателен:
       в footer.css ниже по загрузке стоит `.footer__bottom { padding: 0 }`
       и одиночный класс он перебивал — отступ не работал вовсе. */
    .footer .footer__bottom { padding-bottom: calc(60px + var(--qlinks-safe)); }
}
@media (max-width: 767px) {
    .qlinks { justify-content: space-between; gap: 8px; }
}