/* Start:/local/components/a1/partitions.section/templates/.default/style.css?178903861437912*/
/* ==========================================================================
   Раздел «Перегородки» — стили секции (этап 5, §4.2–§4.5 и §5 ТЗ).

   Слой живёт в шаблоне компонента, а не в css/ шаблона сайта: там только то,
   что нужно ВСЕМ разделам редизайна (конвенция §13, врезка в include/assets.php).
   Битрикс подключает этот файл сам, регистрировать его нигде не нужно.

   Цвета, кегли, сетка и длительности — переменные шаблона a1 (tokens.css).
   Локальные переменные ниже держат только геометрию этого раздела и одно
   значение цвета, которого в токенах нет (подложка стрелки, см. комментарий).

   Брейкпоинты: базовый уровень — Mob 360, дальше 800 (Tab), 1200 и 1600.
   Ховеры — под @media (hover: hover); ховер карточки дополнительно ограничен
   шириной 1200: на tab и mob их нет (§5).

   ПОРЯДОК БАНДЛОВ НА ПРОДЕ (правка от 10.09.2026). Объединение CSS там
   включено, и бандл page_ с этим файлом печатается ДО template_ со слоями
   css/ шаблона. Правило отсюда, перекрывающее класс шаблона на том же
   элементе (.a1-txt, .a1-h4, .a1-button), при равной специфичности
   проигрывает — поэтому такие правила пишутся через класс блока. Локально
   объединение выключено и порядок обратный: там дефект не виден. Аудит
   каскада на живой странице нашёл три таких правила, все переписаны.
   ========================================================================== */

.a1-partitions {
    /* ------------------------------------------------------------------
       Вертикальный ритм страницы (замер по макету, Mob 1590:37262)
       ------------------------------------------------------------------ */
    /* Отступ от нижнего края хедера до надзаголовка: 110 − 70 */
    --a1-prt-top: 40px;
    /* Кнопки hero → сетка карточек: 620 − 580 */
    --a1-prt-hero-gap: 40px;
    /* Сетка → CTA-блок и CTA-блок → форма: 10686 − 10526 */
    --a1-prt-section-gap: 160px;
    /* Шаг внутри hero: надзаголовок → H1 */
    --a1-prt-eyebrow-gap: 10px;
    /* Шаг между H1, абзацем и кнопками hero */
    --a1-prt-hero-step: 20px;

    /* ------------------------------------------------------------------
       Hero: абзацный отступ первой строки H1 и ширина правой колонки.
       На Mob и Tab отступа нет, колонка во всю ширину контента.
       Поведение отступа между 1200 и 1600 — во врезке при @media 1200.
       ------------------------------------------------------------------ */
    --a1-prt-indent: 0px;
    --a1-prt-aside-width: 100%;
    --a1-prt-text-width: 100%;

    /* ------------------------------------------------------------------
       Карточка товара (§5, узлы 1632:7536 / 7569 / 7606 / 7519).
       Высота фото фиксированная на каждом брейкпоинте: пропорции слайдера
       в макете разные (320×200, 350×250, 530×350, 730×400), одним
       соотношением сторон их не описать.
       ------------------------------------------------------------------ */
    --a1-prt-photo-h: 200px;
    --a1-prt-arrow: 20px;
    --a1-prt-arrow-inset: 10px;
    --a1-prt-arrow-blur: 5px;
    /*
     * Подложка стрелки слайдера — Black с альфой 0.7. Отдельного токена под
     * альфа-варианты Black в tokens.css нет, а из var(--a1-black) прозрачность
     * не собрать (relative color syntax браузерами проекта не гарантирована).
     * Литерал заперт в одной переменной — как это сделано в самом tokens.css
     * для --a1-header-bg и --a1-divider-color.
     */
    --a1-prt-arrow-bg: rgba(34, 34, 34, 0.7);
    /*
     * Затемнение фото карточки — ПРОЗРАЧНОЕ, то есть базовое состояние
     * повторяет макет.
     *
     * Слоя затемнения в макете нет НИ В ОДНОМ узле: ни в четырёх вариантах
     * компонента карточки (1632:7519 / 7536 / 7569 / 7606), ни в боевом
     * инстансе 1490:8967, где поверх <img> сразу идёт блок «Информация».
     * Отдельного узла ховер-состояния карточки в макете тоже нет, легенда
     * 1641:106434 карточку не описывает. Единственный источник требования —
     * текстовая аннотация 1641:103923, и §5/§8 ТЗ просто её повторяют.
     * То есть макет противоречит сам себе, и базовым состоянием берётся
     * нарисованное: с непрозрачным слоем все 20 фотографий раздела были бы
     * темнее макета, и это первое, что видно при сверке.
     *
     * Переменная и правило ниже оставлены намеренно: если дизайнер подтвердит
     * затемнение, оно вернётся одной строкой — уже с его значением, а не
     * с догадкой вёрстки. Структура ховера при этом цела: снятие затемнения
     * по-прежнему прописано, вместе со scale(1.05), который в макете есть.
     */
    --a1-prt-card-shade: transparent;
    --a1-prt-card-scale: 1.05;
    /* Шаг между заголовком и описанием карточки */
    --a1-prt-card-info-gap: 10px;
    /* Шаг между слайдером, информацией и кнопками */
    --a1-prt-card-gap: 20px;

    /* ------------------------------------------------------------------
       CTA-блок конфигуратора (§4.4, узел 1490:8984)
       ------------------------------------------------------------------ */
    /* Отступ от линии до контента, одинаковый на всех брейкпоинтах */
    --a1-prt-cta-pad: 40px;
    /* Заголовок → подпись: 10 на Mob, 20 дальше */
    --a1-prt-cta-gap: 10px;
    /* Текстовый блок → плашка-кнопка, пока они в столбец */
    --a1-prt-cta-col-gap: 40px;
    --a1-prt-cta-gears: 120px;
    --a1-prt-cta-btn-pad: 20px;
    --a1-prt-cta-btn-h: 80px;
    --a1-prt-cta-btn-title-width: 141px;
    --a1-prt-cta-note-width: 100%;

    /* Хедер фиксированный — контент начинается под его полосой */
    padding-top: calc(var(--a1-header-height) + var(--a1-prt-top));
    /*
     * Отступ до следующей секции — формы «Получите индивидуальное предложение»
     * (§4.5, этап 6). Он здесь, а не у формы: подвал уже задаёт свои 40 над
     * первой линией, и если бы отступ ставила форма снизу, они бы сложились.
     */
    padding-bottom: var(--a1-prt-section-gap);
}

@media (min-width: 800px) {
    .a1-partitions {
        --a1-prt-top: 60px;
        --a1-prt-hero-gap: 60px;
        --a1-prt-section-gap: 200px;

        --a1-prt-photo-h: 250px;
        --a1-prt-arrow: 24px;
        --a1-prt-arrow-inset: 20px;

        --a1-prt-cta-gap: 20px;
        --a1-prt-cta-gears: 300px;
        --a1-prt-cta-btn-pad: 40px;
        --a1-prt-cta-btn-h: 200px;
        --a1-prt-cta-btn-title-width: 225px;
        --a1-prt-cta-note-width: 400px;
    }
}

@media (min-width: 1200px) {
    .a1-partitions {
        /*
         * АБЗАЦНЫЙ ОТСТУП H1 — НЕ ФИКСИРОВАННАЯ ВЕЛИЧИНА, А ДОЛЯ КОНТЕЙНЕРА.
         * Правка от 29.07.2026 по замечанию заказчика на ширине ~1400–1500.
         *
         * Макет рисует отступ дважды: 510 при контенте 1520 (стиль
         * «1600px/510-h1», узел 1490:8963) и 380 при контенте 1120
         * («1200px/380-h1», 1641:58101). Это одна и та же доля ширины
         * контента — 33.55 % и 33.93 %, — а не два независимых числа:
         * композиция заголовка на обоих брейкпоинтах ОДНА (замер рендера
         * узлов: строка 1 «ПЕРЕГОРОДКИ ДЛЯ» с отступом, строка 2
         * «АВТОМОБИЛЕЙ: ПРИВАТНОСТЬ И КОМФОРТ» от левого края и почти во всю
         * ширину, строка 3 «БИЗНЕС-КЛАССА» снова с отступом). Фиксированные
         * 380 между контрольными точками эту композицию ломали: контейнер
         * растёт до 1519, отступ стоит, первой строке достаётся 1139 вместо
         * 740 — и слово «АВТОМОБИЛЕЙ:» перескакивает наверх (замер: на 1300
         * ещё макетная разбивка, на 1400 уже сломанная). Заодно правая
         * колонка, привязанная к тому же отступу, уезжала с 34 % ширины
         * контента на 25 %.
         *
         * Линейная интерполяция по ширине КОНТЕНТА контейнера, обе
         * контрольные точки макета попадают ровно:
         *     32.5 % × 1120 + 16 = 380   (1200)
         *     32.5 % × 1520 + 16 = 510   (1600 и шире — контейнер упёрт в 1520)
         *
         * Проценты, а не vw: 100vw считает полосу прокрутки, а доступная
         * ширина — нет (врезка про clamp() в layout.css шаблона). Процент
         * считается от коробки контейнера и верен при любой полосе — и в
         * text-indent заголовка, и в margin-inline-start правой колонки:
         * содержащий блок у них один и тот же.
         */
        --a1-prt-indent: calc(32.5% + 16px);
        --a1-prt-aside-width: 360px;
        --a1-prt-text-width: 494px;

        --a1-prt-photo-h: 350px;
    }
}

@media (min-width: 1600px) {
    .a1-partitions {
        /* --a1-prt-indent здесь не переопределяется: формула выше даёт
           ровно макетные 510, потому что контейнер шире 1520 не бывает.
           Жёсткие 510 были бы хуже: при классической полосе прокрутки
           окно 1600 даёт контент у́же 1520, и отступ промахнулся бы. */
        --a1-prt-aside-width: 494px;

        --a1-prt-photo-h: 400px;

        --a1-prt-cta-gears: 380px;
        --a1-prt-cta-btn-title-width: 299px;
        --a1-prt-cta-note-width: 383px;
    }
}

/* ==========================================================================
   HERO (§4.2)
   ========================================================================== */

/*
 * Опорная коробка для единиц cqw: 100cqw = ширина контента контейнера
 * (у .a1-partitions__hero-head нет ни своих полей, ни отступов). Нужна
 * кеглю H1 на промежуточных ширинах — разбор при .a1-partitions__title.
 * position: relative — под надзаголовок, который с 1200 стоит абсолютом.
 */
.a1-partitions__hero-head {
    position: relative;
    container-type: inline-size;
}

.a1-partitions__eyebrow {
    margin-bottom: var(--a1-prt-eyebrow-gap);
}

/*
 * На Mob и Tab строки заголовка — inline: в макете там сплошной текст без
 * принудительных переносов (узлы 1590:37264 и 1641:58168).
 */
.a1-partitions__title-line {
    display: inline;
}

.a1-partitions__hero-aside {
    display: flex;
    flex-direction: column;
    gap: var(--a1-prt-hero-step);
    margin-top: var(--a1-prt-hero-step);
    /*
     * На десктопе правая колонка выровнена по КОРОБКЕ абзацного отступа H1,
     * то есть по той же величине --a1-prt-indent.
     *
     * Макет по этой границе несогласован сам с собой: на 1200 он ставит
     * колонку ровно по коробке (420 = 40 паддинга + 380 отступа), а на 1600
     * сдвигает на 553 при коробке 550 — на 3 px правее, по видимому началу
     * букв. Выбрана коробка на обоих брейкпоинтах: единообразие правила
     * важнее трёх пикселей на одной ширине. Расхождение с макетом: 1600 — 3 px,
     * 1200 — ноль.
     *
     * Величина текучая (calc(32.5 % + 16px), разбор при объявлении), поэтому
     * между контрольными точками колонка едет вместе с заголовком, а не
     * стоит на месте, пока контейнер растёт: 420 → 452.5 → 485 → 517.5 → 550
     * на 1200 / 1300 / 1400 / 1500 / 1600. Процент считается от контейнера,
     * то есть от того же содержащего блока, что и text-indent заголовка,
     * и оба остаются согласованными на любой ширине.
     */
    margin-inline-start: var(--a1-prt-indent);
}

.a1-partitions__hero-text {
    max-width: var(--a1-prt-text-width);
}

.a1-partitions__actions {
    display: flex;
    flex-direction: column;
    gap: var(--a1-prt-hero-step);
    width: 100%;
    max-width: var(--a1-prt-aside-width);
}

/*
 * Перенос нужен на экранах уже 360: там «Конфигуратор» набирается по
 * содержимому, и на 320 подписи двух кнопок в строку уже не помещаются —
 * без переноса вторая кнопка вылезала за экран (замер: правый край 324 при
 * ширине 320). На 360 и выше строка не переносится, макет не меняется.
 * На десктопе перенос не срабатывает никогда: там у обеих кнопок
 * flex-basis: 0, и гипотетический размер строки всегда помещается.
 */
.a1-partitions__actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a1-prt-hero-step);
}

.a1-partitions__action {
    flex: 1 1 0;
    min-width: 0;
}

/*
 * Иконки в кнопках hero: шестерёнки у «Конфигуратора» и лист у «Скачать
 * каталог». Рисуются CSS-маской, цвет берут из currentColor — по §8 иконка
 * внутри кнопки перекрашивается вместе с ней, а <img> цвет не наследует.
 * Габариты (20×20 и flex: 0 0 auto) приходят из .a1-button__icon шаблона —
 * здесь только заливка и сама маска.
 */
.a1-partitions__action-icon {
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.a1-partitions__action-icon--gears {
    -webkit-mask-image: url('/local/components/a1/partitions.section/templates/.default/images/gears.svg');
    mask-image: url('/local/components/a1/partitions.section/templates/.default/images/gears.svg');
}

.a1-partitions__action-icon--catalog {
    -webkit-mask-image: url('/local/components/a1/partitions.section/templates/.default/images/download.svg');
    mask-image: url('/local/components/a1/partitions.section/templates/.default/images/download.svg');
}

/*
 * Mob: «Конфигуратор» по содержимому, «Скачать каталог» занимает остаток,
 * иконка прижата к правому краю, зазор до подписи 8 вместо 16
 * (узлы 1590:38618 и 1590:38608).
 */
@media (max-width: 799.98px) {
    .a1-partitions__actions-row {
        --a1-button-gap: 8px;
    }

    .a1-partitions__action--configurator {
        flex: 0 0 auto;
    }

    /* Через ряд, а не одиночным классом: иначе justify-content на проде
       перебивает .a1-button (врезка о порядке бандлов в шапке файла) */
    .a1-partitions__actions-row .a1-partitions__action--catalog {
        /* basis по содержимому, а не 0: иначе строка «всегда помещается»
           и перенос на узком экране не срабатывает */
        flex: 1 1 auto;
        justify-content: space-between;
    }
}

/*
 * Desktop 1200 и 1600: первая строка каждого абзаца H1 сдвинута вправо, в
 * освободившемся углу стоит надзаголовок. text-indent наследуется, поэтому
 * отступ получает первая строка каждой строки-блока — ровно как в макете.
 */
@media (min-width: 1200px) {
    .a1-partitions__eyebrow {
        position: absolute;
        top: 0;
        left: 0;
        margin-bottom: 0;
    }

    /*
     * КЕГЛЬ H1 МЕЖДУ 1200 И 1600 ТЕКУЧИЙ. Правка от 29.07.2026, там же где
     * отступ, и по той же причине — иначе композиция макета не держится.
     *
     * Одним отступом задачу не решить, это арифметика, а не вкусовщина.
     * При кегле 50, зафиксированном до 1600, первой строке на 1599 остаётся
     * 1519 − 510 = 1009 px, а сломанная разбивка «ПЕРЕГОРОДКИ ДЛЯ
     * АВТОМОБИЛЕЙ:» занимает 850 — то есть влезает и случается. Чтобы она
     * НЕ влезала, отступ на 1519 должен быть больше 669, а на 1520 он обязан
     * стать 510: два несовместимых требования. Остаётся масштабировать сам
     * кегль — тогда ширина строки растёт быстрее, чем место под неё
     * (0.85 px против 0.675 px на пиксель контейнера), и разбивка макета
     * держится на всём диапазоне.
     *
     * Интерполируются ДВА ТИПОГРАФИЧЕСКИХ НАБОРА МАКЕТА, а не выдуманные
     * числа: 50 px — h1 набора «1200px» при контенте 1120, 70 px — h1 набора
     * «1600px» при контенте 1520. Обе точки формула даёт ровно:
     *     5 % × 1120 − 6 = 50     (1200)
     *     5 % × 1520 − 6 = 70     (1600 и шире)
     * Межстрочный (1.2) и трекинг (−0.06em) относительные — едут сами.
     *
     * cqw, а не vw: та же полоса прокрутки, что и у отступа. max() с токеном
     * страхует снизу: у́же 1120 контента (окно 1200 с классической полосой)
     * кегль не падает ниже макетных 50. Движок без контейнерных запросов
     * отбросит объявление целиком и оставит токен — деградация штатная.
     */
    .a1-partitions__title {
        text-indent: var(--a1-prt-indent);
        font-size: max(var(--a1-h1-size), calc(5cqw - 6px));
    }

    .a1-partitions__title-line {
        display: block;
    }
}

/* ==========================================================================
   КАТАЛОГ РЕШЕНИЙ (§4.3)
   ========================================================================== */

.a1-partitions__catalog {
    margin-top: var(--a1-prt-hero-gap);
}

/* ==========================================================================
   КАРТОЧКА ТОВАРА (§5)
   ========================================================================== */

.a1-partitions-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--a1-prt-card-gap);
    /* Карточки одной строки сетки равны по высоте, кнопки прижаты к низу */
    height: 100%;
}

.a1-partitions-card__top {
    display: flex;
    flex-direction: column;
    gap: var(--a1-prt-card-gap);
}

.a1-partitions-card__media {
    position: relative;
    overflow: hidden;
    height: var(--a1-prt-photo-h);
}

/*
 * Фото и заголовок открывают поп-ап «Подробнее» (правка от 29.07.2026,
 * [data-a1-details-zone]). Из стилей им нужен только курсор: своей роли,
 * своего фокуса и своей остановки в порядке обхода Tab у зон нет — клик
 * переадресуется настоящей кнопке «Подробнее» той же карточки, разбор
 * при forwardToDetails() в script.js. Поэтому ни :focus-visible, ни
 * outline здесь не описаны: фокус живёт на кнопке и рисуется её стилями.
 *
 * Ховер карточки (scale фото, снятие затемнения)
 * висит на .a1-partitions-card:hover ниже и этой правкой не затронут —
 * он по-прежнему только на 1200/1600 и только там, где есть мышь.
 */
.a1-partitions-card__media,
.a1-partitions-card__title {
    cursor: pointer;
}

/*
 * Слайды лежат стопкой. Пропорции фото на брейкпоинтах разные, поэтому кадр
 * подрезает object-fit, а не сервер: один ресайз обслуживает все четыре.
 */
.a1-partitions-card__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--a1-transition), visibility var(--a1-transition),
        transform var(--a1-transition);
}

.a1-partitions-card__photo.is-active {
    opacity: 1;
    visibility: visible;
}

/* Фото ещё не залито: плашка тех же габаритов, чтобы карточка не съехала */
.a1-partitions-card__photo--empty {
    opacity: 1;
    visibility: visible;
    background-color: var(--a1-black-light);
}

.a1-partitions-card__shade {
    position: absolute;
    inset: 0;
    background-color: var(--a1-prt-card-shade);
    pointer-events: none;
    transition: opacity var(--a1-transition);
}

/*
 * Стрелки слайдера. Показываются только когда фото больше одного — их и в
 * разметке тогда нет (§5). Порядок в DOM (фото → затемнение → стрелки) уже
 * задаёт порядок отрисовки, поэтому z-index не нужен: шкала --a1-z-* остаётся
 * шкалой страничных слоёв, а не расходуется на внутренности карточки.
 */
.a1-partitions-card__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--a1-prt-arrow);
    height: var(--a1-prt-arrow);
    padding: 0;
    border: 0;
    background-color: var(--a1-prt-arrow-bg);
    backdrop-filter: blur(var(--a1-prt-arrow-blur));
    -webkit-backdrop-filter: blur(var(--a1-prt-arrow-blur));
    color: var(--a1-text);
    cursor: pointer;
}

.a1-partitions-card__arrow--prev {
    left: var(--a1-prt-arrow-inset);
}

.a1-partitions-card__arrow--next {
    right: var(--a1-prt-arrow-inset);
}

.a1-partitions-card__arrow-icon {
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url('/local/components/a1/partitions.section/templates/.default/images/chevron.svg');
    mask-image: url('/local/components/a1/partitions.section/templates/.default/images/chevron.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Иконка нарисована «влево»; правой стрелке она же, развёрнутая */
.a1-partitions-card__arrow--next .a1-partitions-card__arrow-icon {
    transform: rotate(180deg);
}

.a1-partitions-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--a1-prt-card-info-gap);
}

/*
 * Описание карточки — Light, а не Regular из §5: правка от 10.09.2026 по
 * просьбе заказчика «делаем тоньше». Шрифт вариативный (ось wght 100–900,
 * css/fonts.css), отдельный файл под начертание не нужен — замер на живом
 * сайте: 300 рисуется заметно тоньше 400. Селектор через блок карточки —
 * иначе на проде проигрывает .a1-txt (врезка о порядке бандлов в шапке).
 */
.a1-partitions-card .a1-partitions-card__text {
    font-weight: var(--a1-fw-light);
}

/*
 * На Mob заголовок карточки набран стилем Mob/h2 (22 px), а не Mob/h4 (16) —
 * проверено по узлу 600:2939. Класс в разметке остаётся .a1-h4: на Tab, 1200
 * и 1600 он даёт ровно макетные 22 / 22 / 26.
 *
 * Селектор через блок карточки — правка от 10.09.2026: с одиночным классом
 * правило на проде проигрывало .a1-h4, и заголовок на Mob был 16 px с самой
 * выкладки (врезка о порядке бандлов в шапке файла).
 */
@media (max-width: 799.98px) {
    .a1-partitions-card .a1-partitions-card__title {
        font-size: var(--a1-h2-size);
        line-height: var(--a1-h2-lh);
    }
}

/*
 * Кнопки карточки: на Mob и Tab друг под другом во всю ширину, в ряд —
 * начиная с 1200 (§5). Переключение на 1200, а не на 800: планшет в макете
 * (узел 1022:10886) кнопки ещё складывает. Утилита .a1-row из layout.css тут
 * не подходит — она разворачивается уже на 800.
 */
.a1-partitions-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--a1-prt-card-gap);
}

@media (min-width: 1200px) {
    .a1-partitions-card__actions {
        flex-direction: row;
    }

    .a1-partitions-card__button {
        flex: 1 1 0;
        min-width: 0;
    }
}

/*
 * Ховер карточки (§5, аннотация 1641:103922): фото ×1.05 и снятие
 * затемнения. Только Desktop 1200 и 1600 и только там, где есть мышь.
 *
 * Подчёркивания заголовка НЕТ — правка от 10.09.2026. Его требовала
 * аннотация, но в макете оно не нарисовано, и заказчик с дизайнером
 * сошлись на том, что его быть не должно. Длительность — общий
 * --a1-transition (с той же даты 0.4s, см. tokens.css).
 */
@media (hover: hover) and (min-width: 1200px) {
    .a1-partitions-card:hover .a1-partitions-card__photo.is-active {
        transform: scale(var(--a1-prt-card-scale));
    }

    .a1-partitions-card:hover .a1-partitions-card__shade {
        opacity: 0;
    }
}

/* ==========================================================================
   CTA-БЛОК КОНФИГУРАТОРА (§4.4)
   ========================================================================== */

.a1-partitions__cta {
    margin-top: var(--a1-prt-section-gap);
}

/*
 * Линии сверху и снизу — псевдоэлементы, а не border: в макете блок ровно
 * 302 высотой вместе с обеими линиями (40 + 222 + 40), а бордюры добавили бы
 * к этому ещё 2 px. Тем же приёмом нарисованы разделители подвала.
 */
.a1-partitions__cta-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--a1-prt-cta-col-gap);
    padding-block: var(--a1-prt-cta-pad);
}

.a1-partitions__cta-inner::before,
.a1-partitions__cta-inner::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--a1-divider-color);
}

.a1-partitions__cta-inner::before {
    top: 0;
}

.a1-partitions__cta-inner::after {
    bottom: 0;
}

.a1-partitions__cta-text {
    display: flex;
    flex-direction: column;
    gap: var(--a1-prt-cta-gap);
}

.a1-partitions__cta-note {
    max-width: var(--a1-prt-cta-note-width);
}

/*
 * Ведущий абзац подписи есть только на Mob (узел 1590:38628 — два абзаца
 * с интервалом 10); на Tab, 1200 и 1600 подпись состоит из одного абзаца
 * (1641:58229, 1641:58162, 1490:8988). Интервал 10 задавать нечем — его даёт
 * --a1-prt-cta-gap колонки .a1-partitions__cta-text, на Mob это ровно 10.
 * Скрытие через display: none, а не visibility: узел не должен занимать место
 * и не должен читаться скринридером на тех ширинах, где макет его не рисует.
 */
@media (min-width: 800px) {
    .a1-partitions__cta-lead {
        display: none;
    }
}

.a1-partitions__cta-button {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    min-height: var(--a1-prt-cta-btn-h);
    padding-inline: var(--a1-prt-cta-btn-pad);
    background-color: var(--a1-black);
    backdrop-filter: blur(var(--a1-button-blur));
    -webkit-backdrop-filter: blur(var(--a1-button-blur));
    color: var(--a1-text);
    transition: background-color var(--a1-transition);
}

/*
 * Ховер плашки — своя пара кадров в макете, а не строка «тёмная кнопка»
 * из §8: 1641:104389 (покой) → 1641:104394 (ховер), подпись перехода
 * 1641:104398 «0.2s ease in out»; длительность — общий --a1-transition
 * (с 10.09.2026 это 0.4s, см. tokens.css).
 *
 * Замер по рендеру обоих кадров: фон #222222 → #7C7C7C, шестерёнки
 * #7C7C7C → #F0F0F0, подпись #F0F0F0 в обоих. То есть фон занимает цвет
 * шестерёнок, а шестерёнки — цвет подписи. Стоявший здесь --a1-black-light
 * (#484848) взят из общей строки §8 и этой паре кадров не соответствует.
 *
 * Промежуточного кадра у пары нет, значит форма перехода — простая смена
 * цвета, без вытеснения снизу вверх.
 */
@media (hover: hover) {
    .a1-partitions__cta-button:hover {
        background-color: var(--a1-grey);
    }
}

.a1-partitions__cta-button:active {
    background-color: var(--a1-grey);
}

/*
 * Ширина подписи задана макетом и держит перенос на две строки: без неё
 * на широкой плашке подпись вытянулась бы в одну.
 */
.a1-partitions__cta-button-title {
    position: relative;
    max-width: var(--a1-prt-cta-btn-title-width);
}

/* Шестерёнки прижаты к правому верхнему углу и обрезаются нижней границей
   плашки — так они нарисованы в макете (380 в плашке высотой 222 на 1600,
   300 в плашке высотой 174 на 1200).

   ЦВЕТ ГРАФИКИ НЕ СТАТИЧЕСКИЙ — правка от 29.07.2026. На ховере шестерёнки
   светлеют с Grey до Light (узлы 1641:104389 → 1641:104394), поэтому здесь
   больше не <img>: растровое содержимое <img> средствами CSS не перекрасить.
   Файл стал маской — остаётся внешним и кэшируемым (10,6 КБ пути, инлайн
   раздул бы разметку страницы), а цвет приходит из токенов. В самом файле
   сохраняется заливка #7C7C7C, но маску интересует только альфа-канал.

   Запасной вариант для движка без масок — пусто: подложка без маски дала бы
   сплошной прямоугольник во всю коробку поверх плашки, а шестерёнки
   декоративны, их отсутствие ничего не ломает. Отсюда @supports, а не голое
   правило, и отсюда же ховер-правила ВНУТРИ @supports: без масок красить
   нечего, и покрасился бы тот самый прямоугольник. */
.a1-partitions__cta-gears {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--a1-prt-cta-gears);
    height: var(--a1-prt-cta-gears);
    pointer-events: none;
}

@supports ((mask-image: url('/local/components/a1/partitions.section/templates/.default/images/gears.svg'))
        or (-webkit-mask-image: url('/local/components/a1/partitions.section/templates/.default/images/gears.svg'))) {
    .a1-partitions__cta-gears {
        background-color: var(--a1-grey);
        -webkit-mask-image: url('/local/components/a1/partitions.section/templates/.default/images/gears.svg');
        mask-image: url('/local/components/a1/partitions.section/templates/.default/images/gears.svg');
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        /* Растянуть по коробке, как это делал <img> с явными width/height */
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
        transition: background-color var(--a1-transition);
    }

    @media (hover: hover) {
        .a1-partitions__cta-button:hover .a1-partitions__cta-gears {
            background-color: var(--a1-text);
        }
    }

    /*
     * Нажатие осветляет шестерёнки вместе с фоном по той же паре кадров.
     * Иначе на тач-устройствах, где ховера нет, а :active остаётся
     * единственным откликом на касание, шестерёнки цвета Grey оказались бы
     * на фоне Grey и на время касания пропадали бы совсем.
     */
    .a1-partitions__cta-button:active .a1-partitions__cta-gears {
        background-color: var(--a1-text);
    }
}

/*
 * С 1200 текстовый блок и плашка встают в две равные колонки с шагом 20
 * (1520 = 750 + 20 + 750, 1120 = 550 + 20 + 550). Высоту плашки задаёт не
 * своя переменная, а растяжение по строке грида — в макете она равна высоте
 * текстовой колонки.
 */
@media (min-width: 1200px) {
    .a1-partitions__cta-inner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 20px;
        align-items: stretch;
    }

    .a1-partitions__cta-button {
        min-height: 0;
    }
}

/* End */


/* Start:/local/components/a1/partitions.details/templates/.default/style.css?178534351315573*/
/* ==========================================================================
   Содержимое поп-апа «Подробнее» (§6 ТЗ, этап 6).

   Оболочка модалки — затемнение, «Закрыть ✕», охранные поля, коробка на
   десктопе и полноэкранный лист на tab/mob — живёт в css/modal.css шаблона:
   она общая с модалкой формы. Здесь только содержимое, потому что данные
   специфичны для раздела (конвенция §13 и include/assets.php).

   Узлы с направляющими: `1641:99160` (1600), `1641:99285` (1200),
   `1641:99655` (Tab), `1641:99999` (Mob).

   Замер вертикального ритма (все четыре брейкпоинта): шаг между блоками
   поп-апа — 20; заголовок и описание — 10; заголовок колонки и её текст —
   10, на Mob 4 (узел 1641:100042: заголовок 0..18, текст с 22); линия
   отбита сверху и снизу по 20; строки сроков на Mob идут друг под другом
   с шагом 10 (узел 1641:100049: 0 и 27 при высоте строки 17).

   Литералов цвета и кегля здесь нет: всё через переменные tokens.css,
   локальные переменные держат только геометрию.
   ========================================================================== */

.a1-details {
    /* ----------------------------------------------------------------------
       Локальные переменные содержимого
       ---------------------------------------------------------------------- */

    /* Единый вертикальный шаг поп-апа */
    --a1-det-gap: 20px;
    /* Шаг «заголовок → текст» внутри блока и внутри колонки */
    --a1-det-head-gap: 10px;
    --a1-det-col-gap: 4px;
    /* ----------------------------------------------------------------------
       Перечень ОПЦИЙ. Все четыре числа сняты с контентных фреймов макета
       (1660:10962 — шесть пунктов и пометка, 1660:10936 — один пункт и
       пометка, 1660:10977 — строка МАТЕРИАЛОВ без маркера). Замер вёлся
       по краям знаков и по массе чернил маркера, отсюда дробное значение.

         маркер          — круглая точка Ø 4.36 (масса чернил), берём 4.5;
         --marker-left   — левый край точки на 8 от края колонки;
         --list-indent   — текст пунктов и переносы строк на 22;
         --item-gap      — шаг между пунктами 21 при интерлиньяже 16.8 → 4;
         --note-gap      — шаг «последний пункт → пометка» 27 → 10.

       Числа одинаковы на всех брейкпоинтах: перечень живёт только в
       контентных фреймах (они шириной 750), а txt по §3 на всех четырёх
       ширинах один и тот же стиль — 14/1.2 без изменений по медиа.
       ---------------------------------------------------------------------- */
    --a1-det-marker: 4.5px;
    --a1-det-marker-left: 8px;
    --a1-det-list-indent: 22px;
    --a1-det-item-gap: 4px;
    --a1-det-note-gap: 10px;
    /* Высота кадра галереи на десктопе. Раскладок две (§6, правка ТЗ
       от 28.07.2026): в широкой (1200…1599, коробка по контейнеру) кадр
       1072×500, в узкой (от 1600, коробка 750) — 702×400. Базовое значение
       здесь широкое, узкое переключается @media 1600 ниже.
       На листе tab/mob кадр во всю ширину экрана, поэтому там задаётся
       не высота, а соотношение сторон. */
    --a1-det-photo-h: 500px;
    --a1-det-photo-ratio: 3 / 2;
    /* Стрелка слайдера: 20×20 с отступом 20 от краёв кадра (узлы
       1641:99196 и 1641:99197). В карточке товара она 24 — это разные
       размеры, а не описка: карточка меряется узлом 1632:7519. */
    --a1-det-arrow: 20px;
    --a1-det-arrow-inset: 20px;
    /* Подложка стрелки — та же, что в карточке (§5): Black с альфой 0.7.
       ЖДЁТ ТОКЕНА: литерал повторяет решение этапа 5 и держится здесь
       только потому, что в tokens.css нет rgb-триплета Black — из
       --a1-black собрать rgba() нечем. Когда триплет появится, оба
       литерала (здесь и в partitions.section) заменяются разом. */
    --a1-det-arrow-bg: rgba(34, 34, 34, 0.7);
    --a1-det-arrow-blur: 5px;

    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--a1-det-gap);
}

/*
 * Обязательное правило: display: flex выше перебивает браузерный [hidden],
 * и без него на экране оказались бы все двадцать поп-апов сразу.
 */
.a1-details[hidden] {
    display: none;
}

/*
 * ГОРИЗОНТАЛЬНЫЕ ПОЛЯ НА ЛИСТЕ tab/mob. Содержимое стоит по контейнеру
 * (20 от края), а кадр галереи по макету уходит В КРАЙ экрана: узел
 * 1641:99705 на Tab имеет x=0 и ширину 800 при контенте 760, узел
 * 1641:100036 на Mob — x=0 и ширину 360 при контенте 320.
 * На десктопе полей нет: их держит паддинг коробки (24).
 */
.a1-details > * {
    padding-inline: var(--a1-container-pad);
}

.a1-details__gallery {
    padding-inline: 0;
}

@media (min-width: 1200px) {
    .a1-details > * {
        padding-inline: 0;
    }
}

/* --------------------------------------------------------------------------
   Заголовок и описание
   -------------------------------------------------------------------------- */
.a1-details__head {
    display: flex;
    flex-direction: column;
    gap: var(--a1-det-head-gap);
}

/* --------------------------------------------------------------------------
   Галерея: слайдер со стрелками и свайпом, клик открывает fancybox (§6)
   -------------------------------------------------------------------------- */
.a1-details__gallery {
    position: relative;
    overflow: hidden;
    /* На листе кадр тянется во всю ширину экрана, поэтому высота считается
       от пропорции: 360×240 на Mob и 800×500 на Tab — это 3/2 и 8/5 */
    aspect-ratio: var(--a1-det-photo-ratio);
}

@media (min-width: 800px) {
    .a1-details {
        --a1-det-photo-ratio: 8 / 5;
        --a1-det-col-gap: 10px;
    }
}

@media (min-width: 1200px) {
    .a1-details__gallery {
        /* В коробке ширина кадра постоянна (1072 или 702), поэтому высота
           задаётся числом, как в макете, а не пропорцией */
        aspect-ratio: auto;
        height: var(--a1-det-photo-h);
    }

    /*
     * ОПИСАНИЕ В ШАПКЕ — ПОЛУШИРИННОЕ В ШИРОКОЙ РАСКЛАДКЕ: 526 из 1072,
     * то есть ровно колонка сетки ОПЦИИ/МАТЕРИАЛЫ (узлы 1641:99285
     * и 1641:55672). Строки во всю ширину 1072 в макете нет — при коробке
     * по контейнеру абзац в 14 px растянулся бы на 1072 и перестал читаться.
     */
    .a1-details__text {
        max-width: calc((100% - var(--a1-det-gap)) / 2);
    }
}

/*
 * Узкая раскладка (§6): от 1600 коробка сжимается до 750, и оба размера
 * возвращаются к узлу 1641:99160 — кадр 702×400, описание во всю ширину
 * контента. Граница та же, что у --a1-modal-width в css/modal.css шаблона.
 */
@media (min-width: 1600px) {
    .a1-details {
        --a1-det-photo-h: 400px;
    }

    .a1-details__text {
        max-width: none;
    }
}

/*
 * Кадры лежат стопкой. Пропорции кадра на брейкпоинтах разные, поэтому
 * подрезает object-fit, а не сервер: один ресайз обслуживает все четыре.
 * Приём и переходы — те же, что у слайдера карточки (§5).
 */
.a1-details__slide {
    position: absolute;
    inset: 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--a1-transition), visibility var(--a1-transition);
}

.a1-details__slide.is-active {
    opacity: 1;
    visibility: visible;
}

.a1-details__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.a1-details__arrow {
    position: absolute;
    top: 50%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--a1-det-arrow);
    height: var(--a1-det-arrow);
    margin-top: calc(var(--a1-det-arrow) / -2);
    background-color: var(--a1-det-arrow-bg);
    backdrop-filter: blur(var(--a1-det-arrow-blur));
    -webkit-backdrop-filter: blur(var(--a1-det-arrow-blur));
    color: var(--a1-text);
    transition: color var(--a1-transition);
}

.a1-details__arrow--prev {
    left: var(--a1-det-arrow-inset);
}

.a1-details__arrow--next {
    right: var(--a1-det-arrow-inset);
}

@media (hover: hover) {
    .a1-details__arrow:hover {
        color: var(--a1-accent);
    }
}

/* Иконка маской: <img> не наследует цвет, а §8 требует перекраски */
.a1-details__arrow-icon {
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask-image: url('/local/components/a1/partitions.details/templates/.default/images/chevron.svg');
    mask-image: url('/local/components/a1/partitions.details/templates/.default/images/chevron.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Иконка нарисована «влево»; правой стрелке она же, развёрнутая */
.a1-details__arrow--next .a1-details__arrow-icon {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   Колонки ОПЦИИ / МАТЕРИАЛЫ, линия и строка сроков
   -------------------------------------------------------------------------- */
.a1-details__facts {
    display: flex;
    flex-direction: column;
    gap: var(--a1-det-gap);
}

/*
 * На Mob колонки идут в один столбец (§6), шаг между ними 10
 * (узел 1641:100045: второй блок начинается на 96 при высоте первого 86).
 * С 800 — две колонки с шагом 20.
 */
.a1-details__cols,
.a1-details__terms {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--a1-det-head-gap);
}

@media (min-width: 800px) {
    .a1-details__cols,
    .a1-details__terms {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--a1-det-gap);
    }
}

.a1-details__col {
    display: flex;
    flex-direction: column;
    gap: var(--a1-det-col-gap);
}

/*
 * Содержимое колонки под заголовком. Шаг здесь пунктовый (4), а не
 * заголовочный: между собой абзацы МАТЕРИАЛОВ стоят так же плотно, как
 * пункты ОПЦИЙ. Отдельную обёртку заводим потому, что «заголовок →
 * содержимое» на Mob сжимается до 4, а «перечень → пометка» остаётся 10, и
 * одним gap колонки два разных значения не выразить.
 */
.a1-details__col-body {
    display: flex;
    flex-direction: column;
    gap: var(--a1-det-item-gap);
}

.a1-details__list {
    display: flex;
    flex-direction: column;
    gap: var(--a1-det-item-gap);
}

/*
 * Маркер рисуем сами, а не list-style: браузерный ::marker не позволяет
 * задать точный диаметр и отбивку, а base.css шаблона к тому же гасит
 * list-style у всех ul. Отступ держит padding, поэтому перенос длинного
 * пункта встаёт под текст, а не под точку (проверено на пункте
 * «Монитор 43” … Apple TV», он переносится на всех четырёх брейкпоинтах).
 */
.a1-details__list-item {
    position: relative;
    padding-inline-start: var(--a1-det-list-indent);
}

.a1-details__list-item::before {
    content: '';
    position: absolute;
    /* Точка по центру ПЕРВОЙ строки: половина разницы между высотой
       строки (кегль × интерлиньяж токенов txt) и диаметром маркера */
    top: calc((var(--a1-txt-size) * var(--a1-txt-lh) - var(--a1-det-marker)) / 2);
    inset-inline-start: var(--a1-det-marker-left);
    width: var(--a1-det-marker);
    height: var(--a1-det-marker);
    border-radius: 50%;
    /* currentColor — чтобы маркер жил в цвете текста колонки и не требовал
       собственного токена; цвет приходит из --a1-text через .a1-details */
    background-color: currentColor;
}

/*
 * Пометка редакции отбита от перечня сильнее, чем пункты друг от друга
 * (замер 27 против 21 при интерлиньяже 16.8). Разницу добавляем сверху к
 * общему шагу колонки. :not(:first-child) — у продукта, где кроме пометки
 * ничего нет, она идёт сразу под заголовком и лишней отбивки не получает.
 */
.a1-details__note:not(:first-child) {
    margin-top: calc(var(--a1-det-note-gap) - var(--a1-det-item-gap));
}

.a1-details__line {
    display: block;
    height: 1px;
    background-color: var(--a1-divider-color);
}

/*
 * Кнопка прижата книзу на полноэкранном листе (§6, Mob). На десктопе
 * коробка сжата по содержимому, свободного места нет и правило простаивает.
 */
.a1-details__foot {
    margin-top: auto;
}

/* End */
/* /local/components/a1/partitions.section/templates/.default/style.css?178903861437912 */
/* /local/components/a1/partitions.details/templates/.default/style.css?178534351315573 */