/* Start:/local/templates/union_2026/components/bitrix/catalog.element/door-configurator/style.css?179127845447393*/
/*
 * Карточка двери с конфигуратором. Значения — из макета дизайнера
 * («Карточка конфигуратора FILO-60», август 2026): чернила #16130f, подписи #9d968e,
 * разделители #ebe7e2, хайрлайн плитки #e8e4df, он же при наведении #b0a9a1.
 *
 * Правится руками, без sass: локальный компилятор переупорядочивает несвязанные правила и
 * даёт мусорный диф — так же, как у остальных вариантов карточки в этом каталоге.
 *
 * Утилиты Bootstrap 5 приходят из бандла union_2026 и перебивают компонентный CSS, поэтому
 * классы здесь свои (`door-*`) и с бутстраповскими не пересекаются.
 */

/* Ширину задаёт контейнер страницы (`.container-fluid.page-container` из шаблона сайта),
   как у остальных разделов union_2026. Своей `max-width` тут быть не должно: карточка
   вставала уже шапки и крошек, и левый край не совпадал.

   `--door-sticky-top` — отступ закреплённого кадра от верха экрана: меню сайта при
   прокрутке становится фиксированным (`.second-block.view-sticked`, 59 px), и кадр
   обязан вставать под ним, а не под него. */
.door-card {
    --door-sticky-top: 76px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0 0 60px;
    color: #16130f;
}

/* Две колонки, два блока: слева `__left` — только кадр с подписью, справа всё остальное:
   заголовок, цена, группы выбора, спецификация и кнопки. Расстановки по строкам нет
   намеренно: раньше три элемента раскладывались через `grid-row`, и достаточно было
   одному правилу не доехать, чтобы кадр и спецификация попали в одну ячейку.

   Кадр закреплён. Раньше закрепление пришлось снять: спецификация стояла под кадром в той
   же колонке, `sticky` держал кадр на месте, а она продолжала двигаться и заходила под
   него. Теперь в левой колонке нет ничего, кроме кадра, и заходить под него нечему.
   `align-self: start` обязателен: растянутая на всю высоту ряда ячейка закрепляться не
   может — ей некуда двигаться. */
@media (min-width: 992px) {
    .door-card {
        grid-template-columns: minmax(0, 1fr) minmax(420px, 540px);
        gap: 56px;
    }

    .door-card__left {
        position: sticky;
        top: var(--door-sticky-top);
        align-self: start;
    }

    /* Кадр целиком помещается в экран под фиксированным меню: квадрат во всю ширину колонки
       (810 px при 1440) выше экрана, и закреплённым он показывал бы дверь без низа.
       80 px — подпись под кадром и отступ снизу. Ширина ограничена, а не высота: при
       ограничении высоты квадрат со `object-fit: cover` резал бы картинку.
       Кадр прижат к левому краю колонки, в одну линию с крошками и шапкой: по центру
       колонки он отрывался от левого края страницы на 30–100 px в зависимости от экрана. */
    .door-card__frame {
        width: min(100%, calc(100vh - var(--door-sticky-top) - 80px));
        margin: 0;
    }
}

/* Левая колонка: кадр и подпись под ним. */
.door-card__left {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.door-card__frame {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.door-card__preview {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #f4f2ef;
    overflow: hidden;
}

/* Ширину задаёт сетка, высоту — пропорция: атрибуты width/height у картинки нужны, чтобы
   при загрузке не прыгала вёрстка, но без этой пары они бы растянули её на мобильной. */
.door-card__image {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    object-fit: cover;
    transition: opacity .22s ease;
}

/* Пока идёт сборка картинки на сервере — приглушаем её, чтобы клик не выглядел
   «ничего не произошло». Класс снимает JS по факту загрузки нового файла. */
.door-card__preview.is-loading .door-card__image {
    opacity: .55;
}

/* Переход на соседнюю пару «модель + короб» маскируется двумя движениями: старый блок
   гаснет на время загрузки, новый проявляется. Без этого подмена целого блока читается
   как перезагрузка страницы. */
.door-card {
    transition: opacity .22s ease;
}

.door-card.is-switching {
    opacity: .45;
    pointer-events: none;
}

/* Стартовое состояние нового блока. `transition: none` обязателен: иначе браузер
   анимирует и появление нуля, и возврат к единице — получается мигание. */
.door-card.is-entering {
    opacity: 0;
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    .door-card {
        transition: none;
    }
}

.door-card__progress,
.door-card__status {
    display: none;
}

.door-card__preview.is-loading .door-card__progress {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    overflow: hidden;
    background: rgba(22, 19, 15, .08);
}

.door-card__progress span {
    display: block;
    width: 33%;
    height: 100%;
    background: #16130f;
    animation: door-progress 1.1s linear infinite;
}

.door-card__preview.is-loading .door-card__status {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 20px;
    bottom: 20px;
    margin: 0;
    padding: 9px 14px;
    background: #fff;
    font-size: 12px;
    letter-spacing: .02em;
}

.door-card__spinner {
    display: block;
    width: 12px;
    height: 12px;
    border: 1.5px solid #d6d1ca;
    border-top-color: #16130f;
    border-radius: 50%;
    animation: door-spin .7s linear infinite;
}

@keyframes door-progress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

@keyframes door-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .door-card__progress span,
    .door-card__spinner {
        animation: none;
    }
}

/* Подпись под кадром — 16 px, вровень с названиями выбранного в шапках групп:
   это та же информация, только собранная в строку. */
.door-card__caption {
    display: flex;
    gap: 16px;
    align-items: baseline;
    margin: 0;
    font-size: 16px;
    color: #16130f;
}

/* Кадр открывается во весь экран. Подсказка — только при наведении: постоянная лупа
   поверх двери мешает разглядывать саму дверь, ради которой человек сюда и пришёл. */
.door-card__zoom {
    display: block;
    position: absolute;
    inset: 0;
    cursor: zoom-in;
}

/* Видна всегда, как на карточках `card-2-1`: по наведению её находят не все,
   а без неё увеличение остаётся незамеченным. */
.door-card__zoom-hint {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: block;
    width: 40px;
    height: 40px;
    opacity: .85;
    transition: opacity .15s ease;
}

.door-card__zoom:hover .door-card__zoom-hint,
.door-card__zoom:focus-visible .door-card__zoom-hint {
    opacity: 1;
}

.door-card__zoom:focus-visible {
    outline: 2px solid #16130f;
    outline-offset: -2px;
}

/* Стикеры — в правом верхнем углу кадра, шириной 100 px, как на карточках мебели и фурнитуры.
   Слой выше ссылки увеличения: она растянута на весь кадр и иначе перехватывала бы наведение —
   подпись стикера не появлялась бы. */
.door-card__stickers {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.door-card__stickers img {
    display: block;
    width: 100px;
    height: auto;
}

@media (max-width: 991px) {
    .door-card__stickers {
        top: 10px;
        right: 10px;
    }

    .door-card__stickers img {
        width: 80px;
    }
}

.door-card__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.door-card__title {
    margin: 0;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.35;
    text-wrap: pretty;
}

/* `relative` — ради подсказки к цене: она разворачивается на всю ширину строки, а не от
   кружка вправо, где в узкой колонке остаётся полтораста пикселей. */
.door-card__price {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: end;
    gap: 12px;
    margin: 14px 0 0;
    padding-bottom: 22px;
    border-bottom: 1px solid #ebe7e2;
}

.door-card__price-value {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* Цена до скидки. Считает её компонент (`BASE_PRICE` против `PRICE`), шаблон только
   печатает: пока скидок на двери нет, этих узлов в разметке не будет вовсе. */
.door-card__price-old {
    font-size: 18px;
    color: #9d968e;
    text-decoration: line-through;
}

.door-card__price-percent {
    align-self: center;
    padding: 3px 8px;
    background: #16130f;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
}

/* ── подсказка к цене ───────────────────────────────────────────────────── */

.door-card__price-info {
    align-self: center;
    display: inline-flex;
}

.door-card__price-info-button {
    width: 20px;
    height: 20px;
    padding: 0;
    background: #16130f;
    border: 0;
    border-radius: 50%;
    color: #fff;
    cursor: help;
    font-size: 12px;
    line-height: 20px;
}

.door-card__price-hint {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% - 8px);
    z-index: 40;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #16130f;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
}

/* Наведение и фокус, а не только наведение: на телефоне hover не наступает никогда, и
   подсказка старых карточек там недоступна вовсе. Кнопка получает фокус по тапу. */
.door-card__price-info-button:hover + .door-card__price-hint,
.door-card__price-info-button:focus + .door-card__price-hint,
.door-card__price-hint:hover {
    display: block;
}

.door-card__price-hint-title {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9d968e;
}

.door-card__price-hint p:last-child {
    margin-bottom: 0;
}

/* ── группы выбора ──────────────────────────────────────────────────────── */

.door-group {
    margin-top: 18px;
}

/* Подложка — только у шапки группы, у самих разделов фона нет. Заливка на весь блок
   собирала модели и короба в серый прямоугольник и спорила с белыми плитками внутри;
   на белом плитки читаются как отдельные карточки, а группы различаются шапками. */
.door-group--models .door-group__list,
.door-group--korobs .door-group__list {
    margin: 12px 0 0;
    padding: 0;
}

/* Шапка группы — на подложке: четыре списка образцов идут подряд, и без заливки
   заголовки теряются между ними, а по чему кликать, чтобы свернуть, непонятно вовсе. */
.door-group__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: #f4f2ef;
    cursor: pointer;
    list-style: none;
}

.door-group__head::-webkit-details-marker {
    display: none;
}

/* Названия групп — чернилами карточки, а не подписью: на подложке серый по светло-серому
   читался хуже, чем название выбранного справа, хотя главный здесь как раз заголовок. */
.door-group__label {
    flex: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #16130f;
}

.door-group__count {
    font-size: 11px;
    color: #b0a9a1;
}

/* Название выбранного — 16 px: у образцов подписи нет, и эта строка единственная,
   по которой посетитель читает свой выбор. */
.door-group__value {
    margin-left: auto;
    overflow: hidden;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Стрелка стоит слева от названия, перед текстом: в правом краю она соседствовала с
   названием выбранного и читалась как часть его, а не как «свернуть». */
.door-group__head::before {
    content: "";
    flex: none;
    width: 10px;
    height: 6px;
    background: currentColor;
    color: #16130f;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    transition: transform .15s ease;
}

.door-group[open] > .door-group__head::before {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .door-group__head::before {
        transition: none;
    }
}

.door-group__list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

.door-group--models .door-group__list--tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.door-group--korobs .door-group__list--tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.door-group__list--swatches {
    display: flex;
    flex-wrap: wrap;
}

/* Ряд образцов с «плюсом»: видно одну строку, остальное разворачивается. Два десятка
   образцов в развёрнутом виде занимают полэкрана, а выбирают обычно из первых. */
.door-swatches {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.door-swatches .door-group__list--swatches {
    flex: 1;
    min-width: 0;
    max-height: 76px;
    overflow: hidden;
}

.door-swatches.is-expanded .door-group__list--swatches {
    max-height: none;
}

/* ── свёртка плиток моделей и коробов ────────────────────────────────────
   Механизм общий с образцами (класс `.door-swatches`, обработчик в бандле), вид другой:
   виден первый ряд и краешек второго, а по центру среза стоит кнопка «Показать все».
   Обрезанный ряд и есть подсказка, что там ещё есть плитки, — без него кнопка выглядит
   декоративной.

   Высота среза считается от плитки: отступ 10 + картинка (262 или 72) + зазор 9 +
   две строки подписи 34 + отступ 12, плюс зазор сетки 8 и половина второго ряда.
   Поэтому она детерминирована и не зависит ни от ширины колонки, ни от длины названия.
   Меняете размер картинки — пересчитайте эти два числа. */
.door-swatches--tiles {
    display: block;
    position: relative;
}

.door-swatches--tiles .door-group__list--tiles {
    overflow: hidden;
}

.door-group--models .door-swatches--tiles .door-group__list--tiles {
    max-height: 455px;
}

/* У коробов подписи в три строки («Короб ПЛАНАР инс | PLANAR ins (со вставкой)»),
   поэтому три строки зарезервированы всегда: иначе плитки в ряду разной высоты и срез
   обрезает их по-разному. Ряд = 10 + 163 + 9 + 51 + 12 = 245, плюс зазор 8 и половина
   второго ряда. */
.door-group--korobs .door-options__link span {
    min-height: 3.9em;
}

.door-group--korobs .door-swatches--tiles .door-group__list--tiles {
    max-height: 363px;
}

.door-swatches--tiles.is-expanded .door-group__list--tiles {
    max-height: none;
}

/* Затемнение к низу — только в свёрнутом виде и не ловит клики: под ним живые плитки. */
.door-swatches--tiles:not(.is-expanded)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 110px;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 82%);
    pointer-events: none;
}

/* Кнопка у плиток — пилюля по центру среза, а не «плюс» сбоку. */
.door-swatches--tiles .door-swatches__more {
    position: absolute;
    left: 50%;
    bottom: 6px;
    /* Выше градиента: псевдоэлемент `::after` рисуется после детей и иначе накрывает
       кнопку — она выглядит выцветшей. */
    z-index: 1;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 28px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(22, 19, 15, .12);
}

.door-swatches--tiles .door-swatches__more::before,
.door-swatches--tiles .door-swatches__more::after {
    content: none;
}

.door-swatches__more-text {
    font-size: 14px;
    color: #16130f;
    white-space: nowrap;
}

/* Развёрнуто — кнопка встаёт в поток под сеткой, иначе она накрыла бы последний ряд. */
.door-swatches--tiles.is-expanded .door-swatches__more {
    position: static;
    transform: none;
    display: block;
    margin: 14px auto 0;
}

/* Высота — в ряд с образцами, чтобы «плюс» стоял по центру строки, а не по центру
   развёрнутой ленты. */
.door-swatches__more {
    position: relative;
    flex: none;
    width: 30px;
    height: 76px;
    margin-top: 12px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.door-swatches__more[hidden] {
    display: none;
}

.door-swatches__more::before,
.door-swatches__more::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #16130f;
    transform: translate(-50%, -50%);
    transition: opacity .15s ease;
}

.door-swatches__more::before {
    width: 16px;
    height: 1.5px;
}

.door-swatches__more::after {
    width: 1.5px;
    height: 16px;
}

/* Развёрнуто — остаётся «минус». */
.door-swatches.is-expanded .door-swatches__more::after {
    opacity: 0;
}

.door-swatches__more:focus-visible {
    outline: 2px solid #16130f;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .door-swatches__more::before,
    .door-swatches__more::after {
        transition: none;
    }
}

/* Подзаголовок группы отделок — «Натуральный шпон, матовый лак.». Чернилами карточки и
   чуть мельче названия группы: это подпись к ряду образцов, а не заголовок раздела. */
.door-group__subtitle {
    margin: 14px 0 0;
    font-size: 15px;
    font-weight: 500;
    color: #16130f;
}

.door-group__subtitle + .door-group__list {
    margin-top: 8px;
}

.door-group__hint {
    margin: 12px 0 0;
    font-size: 11px;
    color: #b0a9a1;
}

/* ── плитка модели и короба ─────────────────────────────────────────────── */

.door-options__item {
    position: relative;
    background: #fff;
}

/* Рамка рисуется псевдоэлементом поверх содержимого: `box-shadow: inset` ложится на фон
   элемента, а картинка образца занимает его целиком и перекрывает рамку — выбранного
   тогда не видно вовсе. `border` вместо тени по той же причине не годится: он сдвинул бы
   содержимое на 1–2 px при выборе. */
.door-options__item::after,
.door-finish::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid #e8e4df;
    pointer-events: none;
    transition: border-color .15s ease;
}

.door-options__item:hover::after,
.door-finish:hover::after {
    border-color: #b0a9a1;
}

.door-options__item.is-selected::after,
.door-finish.is-selected::after {
    border: 2px solid #16130f;
}

@media (prefers-reduced-motion: reduce) {
    .door-options__item::after,
    .door-finish::after {
        transition: none;
    }
}

/* Плитка — вертикальная карточка: картинка во всю ширину, подпись под ней по центру.
   Размеры сняты с карточки-эталона `/product/filo-60-veneer-invisible-6193/`: там плитка
   164 px и картинка 138 px. Горизонтальный чип с миниатюрой 52 px не годится — по такой
   картинке модель не отличить от соседней, а подпись сжимается до 45 px и рвётся
   в столбик по одному слову. */
.door-options__link {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 10px 6px 12px;
    color: inherit;
    font: inherit;
    text-align: center;
    text-decoration: none;
}

.door-options__link:hover {
    color: inherit;
}

/* Размеры сняты с карточки-эталона `/product/filo-60-veneer-invisible-6193/`:
   модель — полотно высотой 262, короб — узел в разрезе, 163 × 163. Высота фиксированная,
   а не в долях колонки: от неё считается высота свёрнутого ряда ниже, и «плавающая»
   плитка сделала бы её неверной. `contain`, а не `cover`: картинку нельзя ни обрезать,
   ни растянуть — пропорции полотна и есть то, что различает модели. */
.door-options__link img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    object-fit: contain;
    background: #fff;
}

/* У полотна фиксирована только высота, ширину задаёт пропорция картинки: полотна в
   справочнике сняты 1:3, и в жёстком боксе 95 × 262 дверь либо обрезалась, либо
   выглядела растянутой. Ширина 87–105 px при разных пропорциях на ряд не влияет. */
.door-group--models .door-options__link img {
    width: auto;
    height: 262px;
}

.door-group--korobs .door-options__link img {
    width: 163px;
    height: 163px;
}

/* Две строки под подпись зарезервированы всегда: иначе плитки в ряду разной высоты,
   и свёртка до одного ряда обрезает их по-разному. */
.door-options__link span {
    display: block;
    min-height: 2.6em;
    font-size: 13px;
    line-height: 1.3;
    hyphens: none;
    overflow-wrap: break-word;
}

.door-options__item.is-selected .door-options__link span {
    font-weight: 600;
}

.door-options__link:focus-visible {
    outline: 2px solid #16130f;
    outline-offset: 2px;
}

/* ── образец отделки ────────────────────────────────────────────────────── */

.door-finish {
    position: relative;
    width: 76px;
    height: 76px;
    background: #fff;
}

.door-finish__button {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}

.door-finish__button:focus-visible {
    outline: 2px solid #16130f;
    outline-offset: 2px;
}

.door-finish__button img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

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

   Фокус лупу не показывает - только фокус с клавиатуры на самой лупе (`:focus-visible`).
   С `:focus-within` у образца после закрытия панели оставалась вторая лупа: панель
   возвращает фокус на лупу, с которой её открыли, а выбрана к этому времени уже другая
   отделка. После клика мышью программный фокус `:focus-visible` не включает, после Escape -
   включает, и клавиатурный посетитель видит, где он. */
.door-finish__zoom {
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #16130f;
    cursor: zoom-in;
    opacity: 0;
    transition: opacity .15s ease;
}

.door-finish__zoom svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

.door-finish:hover .door-finish__zoom,
.door-finish__zoom:focus-visible,
.door-finish.is-selected .door-finish__zoom {
    opacity: 1;
}

.door-finish__zoom:hover {
    background: #fff;
}

.door-finish__zoom:focus-visible {
    outline: 2px solid #16130f;
    outline-offset: 1px;
}

/* ── отделка крупно: содержимое боковой панели ──────────────────────────── */

/* Сама панель — боковая панель сайта (`.modal-right` и `.side-panel`, `scss/modelRight.scss`):
   затемнение, выезд справа, крестик и запрет прокрутки там же. Заголовок — `.side-title`,
   миниатюры — образцы `.door-finish`, кнопка — `.btn`. Здесь только то, чего на сайте нет:
   кадр образца со стрелками, подписи и отметка выбранной на двери отделки. */

/* Пока открыта панель отделки, виджеты чата прячем: они висят поверх всего и оказываются на
   миниатюрах и кнопке выбора. Селекторы широкие намеренно — у Битрикс24 и YourGood разметка
   своя и меняется с их обновлениями. */
body:has(.side-panel.open .door-drawer) [class*="b24-widget-button"],
body:has(.side-panel.open .door-drawer) #bx-widget-button,
body:has(.side-panel.open .door-drawer) iframe[src*="yourgood"],
body:has(.side-panel.open .door-drawer) div[id^="yourgood"] {
    display: none !important;
}

.door-drawer__counter {
    margin-left: 10px;
    font-size: 14px;
    color: #9d968e;
}

/* Содержимое панели сайта (`.content`) — flex-строка фиксированной высоты, и `.inner` в ней
   шириной по содержимому. Панели отделки нужна вся ширина: иначе при трёх образцах в группе
   она сжималась бы до ширины заголовка. */
.side-panel .content > .inner:has(> .door-drawer) {
    flex: 1;
    min-width: 0;
}

/* Колонка на всю высоту панели: кадр забирает место, оставшееся после подписей, миниатюр и
   кнопки, и всё это видно без прокрутки. Квадратный кадр во всю ширину на экране 1440 × 900
   занимал 608 px, и название с миниатюрами уходили под кнопку. */
.door-drawer {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Скан отделки заполняет кадр целиком (`cover`): это текстура, полей у неё быть не должно, и
   обрезка по высоте её не портит. Меньше 260 px кадр не сжимается — дальше панель
   прокручивается. */
.door-drawer__stage {
    position: relative;
    flex: 1 0 260px;
    background: #f4f2ef;
    overflow: hidden;
    touch-action: pan-y;
}

.door-drawer__image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Стрелки листания — по краям кадра, на подложке: поверх текстуры тонкая стрелка без неё
   теряется. */
.door-drawer__arrow {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2px 10px rgba(22, 19, 15, .16);
    cursor: pointer;
    transform: translateY(-50%);
}

.door-drawer__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-top: 2px solid #16130f;
    border-right: 2px solid #16130f;
}

.door-drawer__arrow--prev {
    left: 12px;
}

.door-drawer__arrow--prev::before {
    transform: translate(-30%, -50%) rotate(-135deg);
}

.door-drawer__arrow--next {
    right: 12px;
}

.door-drawer__arrow--next::before {
    transform: translate(-70%, -50%) rotate(45deg);
}

.door-drawer__arrow:hover {
    background: #fff;
}

.door-drawer__arrow:disabled {
    opacity: .3;
    cursor: default;
}

.door-drawer__arrow:focus-visible {
    outline: 2px solid #16130f;
    outline-offset: 2px;
}

.door-drawer__name {
    margin: 16px 0 0;
    font-weight: 600;
    line-height: 1.3;
}

.door-drawer__material {
    margin: 4px 0 0;
    font-size: 14px;
    color: #6d655c;
}

.door-drawer__material:empty {
    display: none;
}

.door-drawer__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
}

/* Выбранная на двери отделка — точка в углу миниатюры. Текущая в панели — рамка выбранного
   образца (`.door-finish.is-selected`): это разные вещи, и пока листаешь, надо видеть обе. */
.door-drawer__thumbs .door-finish.is-chosen::before {
    content: "";
    position: absolute;
    right: 4px;
    top: 4px;
    z-index: 1;
    width: 10px;
    height: 10px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #16130f;
}

/* Кнопка выбора прижата к низу панели: содержимое выше бывает длиннее экрана, а действие
   должно оставаться под рукой. Слой выше точки выбранной отделки (`z-index: 1`), иначе при
   прокрутке точка проступает поверх кнопки. */
.door-drawer__actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-top: 16px;
    padding: 16px 0;
    background: #fff;
}

/* Попапы сайта (лайтбокс кадра, форма заявки) — поверх фиксированного меню: у Fancybox
   `z-index` 1050, у меню 10010, и при прокрученной странице меню накрывало бы верх
   попапа. Правило действует только на карточке конфигуратора: файл подключается её
   шаблоном. */
.fancybox__container {
    z-index: 10030;
}

/* ── заявка ─────────────────────────────────────────────────────────────── */

/* Оформление кнопок — классы сайта: `.btn` (`scss/main.scss`), `.btn-default`, `.btn-secondary`,
   `.btn-outline-secondary`, у корзины `.span-to-basket` для иконки. Здесь только раскладка и
   закрепление. Бандл подключается после стилей компонента и при равной специфичности
   перебивает их, поэтому переопределения самих кнопок пишутся через `.door-card__actions .btn`.

   Кнопки закреплены у нижнего края экрана. На десктопе — `sticky` внутри правой колонки:
   блок стоит последним в ней, поэтому держится у низа экрана с первого экрана и до конца
   карточки. На телефоне — панелью поверх страницы (см. раздел «мобильная»). */
.door-card__actions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 0 0;
}

@media (min-width: 992px) {
    .door-card__actions {
        position: sticky;
        bottom: 0;
        z-index: 3;
        margin-top: 8px;
        padding: 14px 0 22px;
        background: #fff;
    }

    /* Растушёвка над панелью: содержимое колонки уходит под неё плавно, а не обрезается
       белой кромкой. */
    .door-card__actions::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        height: 28px;
        background: linear-gradient(rgba(255, 255, 255, 0), #fff);
        pointer-events: none;
    }
}

.door-card__actions-row {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Цена печатается у заголовка; в панели она нужна только на телефоне. */
.door-card__actions-price {
    display: none;
}

.door-card__basket,
.door-card__request {
    flex: 0 1 250px;
    min-width: 160px;
}

/* Пока запрос в полёте, обработчик корзины держит на кнопке `data-basket-pending`. */
.door-card__basket[data-basket-pending="1"] {
    opacity: .7;
    pointer-events: none;
}

/* ── выбранная комплектация ─────────────────────────────────────────────── */

/* Под группами, с отступом от последней: это итог, а не ещё одна группа выбора. */
.door-specs {
    margin-top: 28px;
    padding: 26px 30px 28px;
    background: #f4f2ef;
}

.door-specs__title {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
}

.door-specs__list {
    margin: 0;
}

/* Подпись слева, значение справа; точки между ними не нужны — строк мало и они
   короткие. Перенос значения разрешён: длинное название короба в одну строку не встаёт. */
.door-specs__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding: 11px 0;
    border-bottom: 1px solid #e3ded7;
}

.door-specs__row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.door-specs__row dt {
    color: #6d655c;
    font-size: 15px;
}

.door-specs__row dd {
    margin: 0;
    font-size: 15px;
    text-align: right;
}

/* ── мобильная ──────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    /* Место под панель с кнопками отведено у всей страницы (правило `body:has` в конце
       файла): под карточкой идут блоки цены, интерьеров и вариантов, и панель закрывала бы
       уже не спецификацию, а низ подвала. */
    .door-card {
        gap: 0;
        padding: 0 16px 24px;
    }

    /* Обёртка левой колонки растворяется, кадр становится элементом сетки карточки:
       закрепление считается относительно сетки на всю высоту страницы, а внутри обёртки
       своей же высоты кадру было бы некуда двигаться. */
    .door-card__left {
        display: contents;
    }

    /* Кадр держит верх экрана, пока листаешь группы: посетитель меняет отделку и обязан
       видеть результат. Высота ограничена долей экрана, картинка вписывается целиком —
       квадрат 1:1 занял бы почти весь телефон. */
    .door-card__frame {
        position: sticky;
        top: 0;
        z-index: 10;
        gap: 8px;
        margin: 0 -16px;
        padding: 0 16px 8px;
        background: #fff;
    }

    .door-card__preview {
        aspect-ratio: auto;
        height: 40vh;
        min-height: 220px;
    }

    .door-card__image {
        object-fit: contain;
    }

    .door-group__head {
        padding: 13px 14px;
    }

    .door-group {
        margin-top: 10px;
    }

    .door-group__list {
        margin-bottom: 18px;
    }

    .door-group--models .door-group__list--tiles,
    .door-group--korobs .door-group__list--tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Образцы — лента с прокруткой: два десятка шпонов не должны растягивать экран.
       Отрицательные поля выводят ленту под края экрана, как в макете. */
    .door-group__list--swatches {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin: 12px -16px 18px;
        padding: 2px 16px 8px;
        scroll-padding: 16px;
    }

    .door-finish {
        flex: none;
        width: 76px;
        height: 76px;
    }

    /* На телефоне лента прокручивается вбок и так занимает одну строку — разворачивать
       нечего, а кнопке в ряду с образцами тесно. */
    .door-swatches {
        display: block;
    }

    .door-swatches .door-group__list--swatches {
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .door-swatches__more {
        display: none;
    }

    .door-card__title {
        margin-top: 16px;
        font-size: 17px;
    }

    .door-card__price {
        margin-top: 10px;
        padding-bottom: 16px;
    }

    .door-card__price-value {
        font-size: 22px;
    }

    /* Панель с ценой и кнопками закреплена у нижнего края экрана поверх страницы: до
       них не нужно листать. Ниже фиксированного меню сайта (10010) по слою, но они
       не пересекаются: меню сверху, панель снизу. `safe-area-inset` — под вырез
       iPhone: без него кнопки уходят под полоску жестов. */
    .door-card__actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10005;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 10px 16px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom));
        background: #fff;
        box-shadow: 0 -8px 24px rgba(22, 19, 15, .12);
    }

    /* Цена слева от кнопок — в панели она нужна: заголовок с ценой далеко вверху. */
    .door-card__actions-price {
        display: flex;
        flex-direction: column;
        flex: none;
        margin: 0;
    }

    .door-card__actions-price .door-card__price-value {
        font-size: 16px;
        line-height: 1.2;
    }

    .door-card__actions-price .door-card__price-old {
        font-size: 11px;
    }

    /* Ряд занимает остаток панели, кнопки делят его поровну. */
    .door-card__actions-row {
        flex: 1;
        min-width: 0;
        gap: 8px;
        justify-content: flex-end;
    }

    .door-card__basket,
    .door-card__request {
        flex: 1;
        min-width: 0;
    }

    /* Кнопка сайта рассчитана на свою строку: со шрифтом 10.1pt и отступами 20 px в половине
       нижней панели «В корзину» с иконкой ложится в три строки, «Оставить заявку» — в две.
       Здесь её ужимаем, а высоту держим не меньше 48 px — под палец; надпись по центру и
       тогда, когда она всё же переносится. */
    .door-card__actions .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 12px 8px;
        font-size: 11px;
        letter-spacing: .04em;
    }

    .door-specs {
        margin: 20px -16px 0;
        padding: 20px 18px 22px;
    }

    .door-specs__title {
        margin-bottom: 14px;
        font-size: 19px;
    }

    .door-specs__row {
        gap: 14px;
        padding: 9px 0;
    }

    .door-specs__row dt,
    .door-specs__row dd {
        font-size: 14px;
    }

    .door-drawer__actions {
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }

    /* На телефоне подписи и миниатюры в высоту панели не помещаются при любом кадре, поэтому
       кадр остаётся квадратом, а панель прокручивается. */
    .door-drawer__stage {
        flex: none;
        aspect-ratio: 1 / 1;
    }
}

/* ── блоки под первым экраном (вёрстка card-2-0) ────────────────────────── */

/* Разметка и оформление блоков — от `card-2-0` (`details/*.php`, её `style.css`). Здесь
   только стык с конфигуратором: у первого экрана свой отступ снизу 60 px, у блока цены
   сверху 80 px, и вместе между кнопками и ценой выходило 140 px пустоты. */
.door-details > .price-background-wrapper:first-child {
    margin-top: 20px;
}

@media (max-width: 991px) {
    /* Панель с кнопками на телефоне закреплена поверх страницы. Отступ на её высоту — у
       всей страницы: иначе панель закрывает низ подвала, где под карточкой теперь идут
       блоки цены, интерьеров и вариантов. */
    body:has(.door-card__actions) {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }
}

/* End */


/* Start:/local/templates/union_2026/components/bitrix/catalog.element/card-2-0/style.css?178964822032769*/
@charset "UTF-8";
.swiper.slider > .nav-prev.cursor-none,
.swiper.slider > .nav-next.cursor-none {
  width: 120px;
}

.row.firstBlock {
  margin-top: 25px;
}

.desc-under-photo p:first-child {
  font-size: 30px;
  margin-bottom: 35px !important;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 0.05em;
}

.desc-under-photo p:not(:first-child) {
  font-weight: normal;
  font-size: 20px;
  line-height: 30px;
}

/*** Стрелки на слайдере ***/
.cursor-none {
  cursor: none;
}

.swiper.slider {
  position: relative;
}

.nav-prev.cursor-none {
  position: absolute;
  left: 25%;
  width: 25%;
  z-index: 10;
  top: 0;
  height: 100%;
}

.nav-next.cursor-none {
  position: absolute;
  right: 25%;
  width: 25%;
  z-index: 10;
  top: 0;
  height: 100%;
}

.nav-prev.cursor-none {
  left: 0;
  width: 200px;
  margin-left: max(15px, (100% - 1700px) / 2);
}

.nav-next.cursor-none {
  right: 0;
  width: 200px;
}

/*** Стрелки на слайдере ***/
#product-slider-wrap2 .nav-next.cursor-none,
#product-slider-wrap2 .nav-prev.cursor-none {
  width: 135px;
}
#product-slider-wrap2 .swiper-pagination-bullet-active {
  background-color: #000 !important;
}
#product-slider-wrap2 .swiper-slide a:hover {
  text-decoration: none;
}

.fancybox-thumbs ul.custom-ul-fancybox {
  display: grid;
  grid-auto-rows: max-content;
}
.fancybox-thumbs ul.custom-ul-fancybox > li {
  max-width: 100%;
  max-height: none;
  width: auto;
  height: 200px;
  margin: 0;
}
.fancybox-thumbs ul.custom-ul-fancybox > li img {
  width: 100%;
  height: 200px;
}

#glasses .title,
#finishes .title {
  font-weight: 500;
  margin-bottom: 1px;
}
#glasses .glasses-block,
#glasses .finishes-block,
#finishes .glasses-block,
#finishes .finishes-block {
  margin-bottom: 20px;
}
#glasses ul,
#finishes ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  padding: 0;
  margin: 0;
  list-style: none;
}
#glasses ul li,
#finishes ul li {
  display: inline-block;
  width: 72px;
  height: 72px;
  padding: 3px;
  margin-right: 10px;
  margin-bottom: 10px;
}
#glasses ul li:hover img,
#finishes ul li:hover img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 6px 18px rgba(0, 0, 0, 0.35);
}
#glasses ul li a,
#finishes ul li a {
  text-decoration: none;
  display: block;
  transition: all 0.35s;
}
#glasses ul li a span,
#finishes ul li a span {
  display: block;
  height: auto;
  background-size: cover;
  padding-bottom: 100%;
}
#glasses ul li img,
#finishes ul li img {
  width: 100%;
  transition: all 0.35s;
}
#glasses ul li:hover a,
#finishes ul li:hover a {
  text-decoration: none;
}
#glasses ul li p,
#finishes ul li p {
  display: block;
  text-align: center;
  color: #454449;
  font-size: 0.87em;
}
.finishes-anoter > p {
  font-size: 17px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.05em;
}
.finishes-anoter p {
  opacity: 0.8;
}

.wrapper-right-block .loading img {
  width: 60px;
}
.wrapper-right-block .after-loading {
  display: none;
}

.hidden.visible {
  display: inline-block !important;
}

.btn-expand {
  position: relative;
  padding: 0;
  border: none;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

.btn-expand:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDEyOCAxMjgiIGhlaWdodD0iMTI4cHgiIGlkPSLQodC70L7QuV8xIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAxMjggMTI4IiB3aWR0aD0iMTI4cHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnPjxwb2x5Z29uIGZpbGw9IiMzNzM3MzciIHBvaW50cz0iMTI3LDU5IDY5LDU5IDY5LDEgNTksMSA1OSw1OSAxLDU5IDEsNjkgNTksNjkgNTksMTI3IDY5LDEyNyA2OSw2OSAxMjcsNjkgICAiLz48L2c+PC9zdmc+") no-repeat center;
  background-size: 33%;
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -ms-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  content: "";
}

.btn-expand.active:after {
  transform: rotate(135deg);
}

#tabs-properties ul.headers {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 20px;
}
@media screen and (max-width: 550px) {
  #tabs-properties ul.headers {
    grid-template-columns: 1fr;
  }
}
#tabs-properties ul.headers li {
  background: #f0f0f0;
  min-width: 135px;
  text-align: center;
  padding: 2px;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 1px;
  text-shadow: 1px 0px #ddd;
  border-bottom: 2px solid #ddd;
}
#tabs-properties ul.headers li a {
  text-decoration: none;
  display: inline-block;
  width: 100%;
  padding-top: 3px;
}
#tabs-properties ul.headers li a:hover {
  text-decoration: none;
}
#tabs-properties ul.headers li a:focus {
  outline: none;
  text-decoration: none;
}
#tabs-properties ul.headers li.ui-tabs-active {
  background-color: #fff;
  border-top: 2px solid #ddd;
  border-right: 2px solid #ddd;
  border-left: 2px solid #ddd;
  border-bottom: 2px solid #fff;
  text-shadow: none;
}

#korobs p {
  font-size: 13px;
}
#korobs .key {
  font-weight: 500;
}
#korobs .value {
  color: #8f8f8f;
  margin-left: 5px;
}
#korobs ul {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}
#korobs ul li {
  display: inline-block;
  margin-right: 50px;
  margin-bottom: 30px;
  max-width: 175px;
}
#korobs ul li > span,
#korobs ul li > a {
  padding: 6px;
}
#korobs ul li > span.active,
#korobs ul li > a.active {
  outline: 1px solid #000;
}
#korobs ul li:hover > a {
  outline: 1px solid #000;
}
#korobs ul li a {
  display: inline-block;
}
#korobs ul li:hover a {
  text-decoration: none;
}
#korobs ul li:hover span {
  background-color: #e9e9e9;
}
#korobs ul li p {
  display: block;
  text-align: right;
  margin-top: 0;
  font-size: 11px;
}
#korobs .title {
  cursor: pointer;
}

#models .key {
  font-weight: 500;
  margin-right: 4px;
}
#models .value {
  color: #939393;
}

#models ul {
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
}
#models ul li {
  display: inline-block;
  margin-right: 30px;
  margin-bottom: 30px;
}
#models ul li a {
  display: inline-block;
}
#models ul li img {
  padding: 5px;
  border: 1px solid transparent;
}
#models ul li img.active {
  border-color: #ffb2b2;
}
#models ul li:hover img {
  border-color: #ffb2b2;
}
#models ul li:hover a {
  text-decoration: none;
}
#models ul li:hover span {
  background-color: #000;
  color: #ffcf00;
}
#models ul li p {
  display: block;
  text-align: center;
  margin-top: 5px;
  font-size: 0.95em;
}
.finishes-anoter.hiddenExt {
  height: 130px;
  overflow: hidden;
}

#finishes .finishes--collapsed,
#models .finishes--collapsed {
  overflow: hidden;
  position: relative;
}

#finishes .finishes--collapsed:after,
#models .finishes--collapsed:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

.model-right:active, .model-right:focus-visible, .model-right:target, .model-right:focus {
  outline: none;
}

.btn-size-door {
  text-decoration: none;
  padding: 5px 5px;
  width: 256px;
  text-transform: uppercase;
  border: 1px solid #333333;
  color: rgba(51, 51, 51, 0.7882352941);
  font-size: 13px;
  display: inline-block;
  text-align: center;
  line-height: 18px;
}

.firstBlock .question {
  font-weight: normal;
  width: 100%;
  font-size: 14px;
  max-width: 47%;
  /* margin-top: 14px; */
  height: 45px;
}
@media screen and (max-width: 550px) {
  .firstBlock .question {
    max-width: 100%;
  }
}
.firstBlock h1 {
  margin-top: 0;
  font-size: 17px;
  margin-bottom: 20px;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 0.05em;
}
.firstBlock .h2 {
  margin-top: 0;
  font-size: 30px;
  margin-bottom: 15px;
  font-weight: 400;
  line-height: 48px;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 768px) {
  .firstBlock .product-slider-col-card20 .slider img {
    cursor: url("/img/curs/zoom-in.png"), auto;
  }
}
.firstBlock .main-image {
  position: relative;
}
.firstBlock .main-image .zoom {
  cursor: pointer;
  position: absolute;
  right: 36px;
  bottom: 20px;
  z-index: 1;
  width: 40px;
  height: 40px;
}
.firstBlock .product-slider-col-card20 {
  padding-right: 59px;
}
@media screen and (max-width: 768px) {
  .firstBlock .product-slider-col-card20 {
    padding-right: 0;
  }
}
.firstBlock .buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40px;
}
@media screen and (max-width: 550px) {
  .firstBlock .buttons {
    flex-direction: column;
  }
}
.firstBlock .btn-one {
  background: #000;
  background: #e8c21d;
  font-weight: normal;
  width: 47%;
  color: #000;
  font-size: 14px;
}
@media screen and (max-width: 550px) {
  .firstBlock .btn-one {
    width: 100%;
    margin-bottom: 15px;
    padding: 12px 0;
  }
}
.firstBlock .main-description {
  margin-top: 15px;
  line-height: initial;
  font-size: 14px;
}
.firstBlock .content-simple {
  width: 47%;
}
@media screen and (max-width: 550px) {
  .firstBlock .content-simple {
    width: 100%;
  }
}
.firstBlock .content-simple a {
  text-decoration: none;
  padding: 5px 5px;
  width: 100%;
  text-transform: uppercase;
  border: 1px solid #333333;
  color: rgba(51, 51, 51, 0.7882352941);
  font-size: 13px;
  display: inline-block;
  text-align: center;
  line-height: 18px;
}
@media screen and (max-width: 550px) {
  .firstBlock .content-simple a {
    padding: 11px 5px;
  }
}
.firstBlock .content-simple a:hover {
  text-decoration: none;
  opacity: 0.8;
}
.firstBlock .product-slider-col-card-right {
  padding-left: 100px;
  padding-top: 18px;
}
@media screen and (max-width: 768px) {
  .firstBlock .product-slider-col-card-right {
    padding-left: 0;
  }
}

.row-questions .text {
  font-size: 14px;
}

.ui-helper-hidden-accessible {
  display: none;
}

@media screen and (max-width: 1200px) {
  .only-mob {
    display: none;
  }
}

@media screen and (min-width: 1200px) {
  .only-desk {
    display: none;
  }
}

.inrter {
  padding-top: 80px;
}

.row-questions .title,
.inrter .title,
.styles .title,
.variants .title {
  font-size: 30px;
  margin-bottom: 35px !important;
  font-weight: 500;
  line-height: 48px;
  letter-spacing: 0.05em;
}
@media screen and (max-width: 768px) {
  .row-questions .title,
  .inrter .title,
  .styles .title,
  .variants .title {
    padding-bottom: 0;
    font-size: 25px;
  }
}

.row-questions .title {
  font-size: 30px;
}

.row-questions {
  padding-bottom: 50px;
}
@media screen and (max-width: 768px) {
  .row-questions {
    padding-bottom: 0;
  }
}
.row-questions .question {
  font-weight: normal;
  width: 100%;
  font-size: 14px;
  max-width: 204px;
  margin-top: 14px;
  height: 45px;
}
.row-questions .question:hover {
  opacity: 0.8;
}
.row-questions .text {
  font-size: 20px;
  line-height: 30px;
}

.style-wrapper {
  padding-top: 80px;
}
@media screen and (max-width: 768px) {
  .style-wrapper {
    padding-top: 0;
  }
}

.inrter_row .swiper-slide {
  text-align: right;
}

.variants_row .swiper-slide {
  text-align: right;
}
.variants_row video {
  max-width: 100%;
}
.variants_row .nav-prev.cursor-none {
  margin-left: 0 !important;
}

.variants_row .swiperVariants {
  max-width: 1920px;
  margin: 0 auto;
}

.inrter_row .inrter-swiper {
  max-width: 1920px;
  margin: 0 auto;
}

.inrter_row .swiper-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
.inrter_row .swiper-slide a .elImgFirst {
  opacity: 0.25;
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.inrter_row .swiper-slide a .secondImg {
  object-fit: contain !important;
  position: relative;
}

.variants_row .swiper-slide a {
  display: block;
}

.korob-swiper .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

.styles_row .swiper-slide a {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
}
.styles_row .swiper-slide a .elImgFirst {
  opacity: 0.25;
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.styles_row .swiper-slide a .secondImg {
  object-fit: contain !important;
  position: relative;
}

.price-line-new,
.inrter_row,
.styles_row,
.variants_row {
  position: relative;
  margin: 0;
  width: 100%;
  display: none;
}
@media screen and (max-width: 768px) {
  .price-line-new .swiper,
  .inrter_row .swiper,
  .styles_row .swiper,
  .variants_row .swiper {
    padding-left: 30px;
  }
}
.price-line-new .text,
.inrter_row .text,
.styles_row .text,
.variants_row .text {
  text-align: right;
  margin-top: 12px;
  color: rgba(51, 51, 51, 0.7882352941);
}
.price-line-new .slider,
.inrter_row .slider,
.styles_row .slider,
.variants_row .slider {
  margin-bottom: 45px;
}
.price-line-new .nav,
.inrter_row .nav,
.styles_row .nav,
.variants_row .nav {
  display: flex;
  position: relative;
}
.price-line-new .nav .swiper-scrollbar,
.inrter_row .nav .swiper-scrollbar,
.styles_row .nav .swiper-scrollbar,
.variants_row .nav .swiper-scrollbar {
  height: 1px;
}
.price-line-new .nav .left,
.inrter_row .nav .left,
.styles_row .nav .left,
.variants_row .nav .left {
  position: relative;
  width: 100%;
  transform: translate(0, -35%);
  margin-left: 6px;
}
@media screen and (max-width: 768px) {
  .price-line-new .nav .left,
  .inrter_row .nav .left,
  .styles_row .nav .left,
  .variants_row .nav .left {
    margin-left: 20px;
  }
}
.price-line-new .nav .right,
.inrter_row .nav .right,
.styles_row .nav .right,
.variants_row .nav .right {
  display: flex;
  position: relative;
  margin-left: 20px;
}
.price-line-new .nav .right .swiper-button-prev-custom,
.inrter_row .nav .right .swiper-button-prev-custom,
.styles_row .nav .right .swiper-button-prev-custom,
.variants_row .nav .right .swiper-button-prev-custom {
  margin-right: 25px;
}
.price-line-new .nav img,
.inrter_row .nav img,
.styles_row .nav img,
.variants_row .nav img {
  width: 26px;
  height: 32px;
}
.price-line-new .slider-default__buttons,
.inrter_row .slider-default__buttons,
.styles_row .slider-default__buttons,
.variants_row .slider-default__buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 16px;
  gap: 16px;
}

.price-line-new .slider {
  margin-bottom: 15px;
}

.price-korob .korob-swiper {
  padding-bottom: 10px;
}
.price-korob .korob-swiper .nav {
  display: flex;
  position: relative;
}
.price-korob .korob-swiper .nav .swiper-scrollbar {
  height: 1px;
}
.price-korob .korob-swiper .nav .left {
  position: relative;
  width: 82%;
  transform: translate(0, -35%);
  margin-left: 26px;
}
@media screen and (max-width: 768px) {
  .price-korob .korob-swiper .nav .left {
    margin-left: 20px;
  }
}
.price-korob .korob-swiper .nav .right {
  display: flex;
  position: relative;
  margin-left: 20px;
}
.price-korob .korob-swiper .nav .right .swiper-button-prev-custom {
  margin-right: 25px;
}
.price-korob .korob-swiper .nav img {
  width: 26px;
  height: 32px;
}
.price-korob .item .inner {
  width: 150px;
  padding: 5px;
  border: 1px solid transparent;
}
.price-korob .item .inner.active {
  border-color: #000;
}
.price-korob .item .inner:hover img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.price-korob .item .inner:hover a {
  text-decoration: none;
}
.price-korob .item .inner p {
  display: block;
  padding: 0px 9px;
  text-align: right;
  color: #454449;
  font-size: 0.87em;
  margin-bottom: 0;
}
.price-korob .item {
  text-align: center;
}
.price-korob ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  justify-content: space-between;
}
.price-korob ul li {
  display: inline-block;
  width: 150px;
  padding: 5px;
}
.price-korob ul li:hover img {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.price-korob ul li {
  border: 1px solid transparent;
}
.price-korob ul li.active {
  border-color: #000;
}
.price-korob ul li a {
  display: inline-block;
  text-decoration: none;
}
.price-korob ul li img {
  -webkit-transition: all 0.35s;
  -moz-transition: all 0.35s;
  -ms-transition: all 0.35s;
  -o-transition: all 0.35s;
  transition: all 0.35s;
}
.price-korob ul li:hover a {
  text-decoration: none;
}
.price-korob ul li p {
  display: block;
  text-align: right;
  color: #454449;
  font-size: 0.87em;
  margin-bottom: 0;
}

.price-background-wrapper {
  background: linear-gradient(to left, #ffffff 50%, #f1f1f1 50%);
  margin-top: 80px;
}

.row-description {
  margin-right: 0px !important;
  background-color: #f1f1f1;
  padding-bottom: 10px;
}
@media screen and (max-width: 768px) {
  .row-description {
    padding: 0 40px;
    padding-top: 30px;
    margin-top: 30px;
    border-top: 1px solid #ddd;
  }
}
.row-description p {
  font-size: 18px;
}
.row-description b {
  font-weight: 500 !important;
}
.row-description ul {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
.row-description ul li {
  margin-bottom: 7px;
  font-size: 18px;
  padding-left: 20px;
  position: relative;
}
.row-description ul li:before {
  content: "✔";
  position: absolute;
  top: 0;
  left: 0;
  color: #000000;
}

.row-prepere {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 10px 0 50px;
}
@media screen and (max-width: 768px) {
  .row-prepere {
    padding-top: 0;
    padding-bottom: 0;
  }
}
.row-prepere h2 {
  font-weight: 500;
  padding-top: 60px;
  font-size: 30px;
  margin-bottom: 20px;
}
.row-prepere p {
  font-weight: 500;
  padding-top: 60px;
  font-size: 30px;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .row-prepere p {
    font-size: 25px;
  }
}
.row-prepere ul {
  margin-left: 0;
  padding-left: 10px;
  list-style-image: url("/img/listAr.png");
  font-size: 18px;
}
.row-prepere ul li {
  margin-bottom: 7px;
}
.row-prepere .border-left {
  padding-right: 0;
}

@media screen and (max-width: 768px) {
  .price-block {
    background-color: #f1f1f1;
  }
}
.price-block .korob-list {
  padding: 33px;
  padding-right: 80px;
  padding-bottom: 15px;
  padding-left: 103px;
}
.price-block .korob-list.four {
  padding-left: 12px;
}
.price-block .left .inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  padding-top: 35px;
}
@media screen and (max-width: 768px) {
  .price-block .left .inner {
    align-items: center;
  }
}
.price-block .left .inner .ot {
  font-size: 17px;
  color: #565656;
}
.price-block .price-label {
  position: relative;
  text-decoration: none;
}
.price-block .firstPart {
  font-weight: 500;
  font-size: 48px;
}
.price-block .lastPart {
  font-weight: 500;
  font-size: 31px;
  margin-left: 7px;
}
.price-block .currency {
  font-size: 33px;
  margin-left: 5px;
  color: #565656;
}
.price-block .ico-info {
  position: absolute;
  right: -29px;
  top: -30px;
  background-color: #000;
  border-radius: 50px;
  color: #c3c3c3;
  vertical-align: revert;
  padding-top: 10px;
  text-align: center;
  font-weight: normal;
  height: 20px;
  font-size: 12px;
  width: 20px;
}

.price-row {
  display: flex;
  margin-right: 0px !important;
}
.price-row .question {
  font-weight: normal;
  width: 256px;
  font-size: 12px;
  max-width: 100%;
  margin-top: 14px;
  height: 45px;
}
.price-row .question:hover {
  opacity: 0.8;
}

.price-background {
  background-color: #f1f1f1;
}

.price-hover-block-hidden {
  display: none;
}

.price-hover-block:hover ~ .price-hover-block-hidden {
  display: block;
  position: absolute;
  background-color: #fff;
  border: 1px solid #222;
  padding: 8px 10px;
  z-index: 5;
  border-radius: 5px;
  max-width: 500px;
}

.price-hover-block-hidden .title-prhvrblock {
  margin-bottom: 5px;
  text-transform: uppercase;
}

.background-img {
  position: relative;
  text-align: right;
}
.background-img .fon-video-instr {
  padding-top: 100px;
}
.background-img .href {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
}
.background-img .text-wrapper {
  text-align: left;
}

.img-under-price {
  margin-top: 50px;
}

.row-btn {
  background-color: #f1f1f1;
  /* margin-top: 20px; */
  margin-right: 0px !important;
  padding-bottom: 15px;
}
@media screen and (max-width: 768px) {
  .row-btn {
    padding: 0 40px;
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
@media screen and (min-width: 768px) {
  .row-btn {
    padding-top: 20px;
  }
}
.row-btn .inner {
  padding-top: 14px;
  border-top: 1px solid #ddd;
}
@media screen and (min-width: 768px) {
  .row-btn .inner {
    margin-right: 75px;
    height: 50px;
  }
}
.row-btn ul {
  display: flex;
  margin-left: 0;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 768px) {
  .row-btn ul {
    flex-direction: column;
    justify-content: start;
    align-items: start;
  }
}
.row-btn ul .icon-download-alt- {
  width: 16px;
  display: inline-block;
  margin-right: 5px;
}
.row-btn ul .icon-download-alt- img {
  margin-bottom: 3px;
}
.row-btn ul li {
  text-transform: uppercase;
}
@media screen and (max-width: 768px) {
  .row-btn ul li {
    margin: 6px 0;
  }
}
.row-btn ul li a {
  color: #484848;
  font-size: 14px;
  text-decoration: none;
  letter-spacing: 0.5px;
  font-weight: 500;
}
@media screen and (max-width: 768px) {
  .row-btn ul li a {
    font-size: 11px;
  }
}
.row-btn ul li a:hover {
  text-decoration: none;
  opacity: 0.8;
}

.row-consul2 {
  padding: 110px 0;
}
@media screen and (max-width: 768px) {
  .row-consul2 {
    padding: 40px 0;
  }
}
.row-consul2 .question {
  cursor: pointer;
}
.row-consul2 .block {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 140px;
  padding-right: 60px;
}
@media screen and (max-width: 768px) {
  .row-consul2 .block {
    justify-content: center;
    padding-right: 0;
  }
}
.row-consul2 a {
  text-decoration: none;
}
.row-consul2 a:hover {
  text-decoration: none;
}
.row-consul2 .title {
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-size: 18px;
}
@media screen and (min-width: 768px) {
  .row-consul2 .title {
    text-transform: uppercase;
  }
}
.row-consul2 .text {
  color: #787878;
  max-width: 200px;
  line-height: normal;
}
.row-consul2 .block2 {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 140px;
  padding-left: 60px;
}
@media screen and (max-width: 768px) {
  .row-consul2 .block2 {
    justify-content: center;
    padding-left: 0;
  }
}
@media screen and (max-width: 767.98px) {
  .row-consul2 .border-left {
    border-top: 2px solid #ddd;
  }
}
@media screen and (min-width: 768px) {
  .row-consul2 .border-left {
    border-left: 2px solid #ddd;
  }
}

.row-consul {
  padding: 80px 0;
}
@media screen and (max-width: 768px) {
  .row-consul {
    max-width: 85%;
    margin: 0 auto !important;
  }
}
.row-consul .block {
  display: flex;
  align-items: center;
  justify-content: end;
  height: 140px;
  padding-right: 50px;
}
@media screen and (max-width: 768px) {
  .row-consul .block {
    justify-content: center;
    padding-right: 0;
  }
}
.row-consul .block .title {
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-size: 18px;
}
@media screen and (min-width: 768px) {
  .row-consul .block .title {
    text-transform: uppercase;
  }
}
.row-consul a {
  text-decoration: none;
}
.row-consul a:hover {
  text-decoration: none;
}
.row-consul .title {
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-size: 24px;
}
@media screen and (max-width: 768px) {
  .row-consul .title {
    font-size: 20px !important;
  }
}
.row-consul .text {
  color: #787878;
  max-width: 200px;
  line-height: normal;
  font-size: 20px;
}
@media screen and (max-width: 768px) {
  .row-consul .text {
    font-size: 17px !important;
  }
}
.row-consul .right {
  margin-left: 25px;
}
.row-consul .block2 {
  display: flex;
  align-items: center;
  justify-content: start;
  height: 140px;
  padding-left: 50px;
}
@media screen and (max-width: 768px) {
  .row-consul .block2 {
    justify-content: center;
    padding-left: 0;
  }
}
@media screen and (max-width: 767.98px) {
  .row-consul .border-left {
    border-top: 2px solid #ddd;
  }
}
@media screen and (min-width: 768px) {
  .row-consul .border-left {
    border-left: 2px solid #ddd;
  }
}

.under-price-slider {
  position: relative;
}
.under-price-slider .slick-list {
  overflow: hidden;
}
.under-price-slider .slick-track {
  display: flex;
}
.under-price-slider .label {
  padding-top: 10px;
}
.under-price-slider a:focus,
.under-price-slider a:active {
  outline: none;
}
@media screen and (min-width: 768px) {
  .under-price-slider img {
    cursor: url("/img/curs/zoom-in.png"), auto;
  }
}
.under-price-slider .slick-dots {
  /*display: none !important;*/
  position: absolute;
  bottom: 20px;
  z-index: 10005;
  right: 30px;
  display: block;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.under-price-slider .slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.4);
  border: 1px solid transparent;
  border-radius: 30px;
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  font-size: 0;
  /* text-indent: -999em; */
  box-shadow: inset 0 0 0 1px white;
  z-index: 99;
  transition: border 0.3s, background 0.3s;
  overflow: hidden;
}
.under-price-slider .slick-dots li.slick-active button:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 8px;
  height: 8px;
  margin: auto;
  border-radius: 50%;
  background: white;
  content: "";
}
.under-price-slider .slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}
.under-price-slider .slick-dots li button:before {
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.under-price-slider {
  /*** Стрелки на слайдере ***/
}
.under-price-slider .cursor-none {
  cursor: none;
}
.under-price-slider .swiper.slider {
  position: relative;
}
.under-price-slider .nav-prev {
  position: absolute;
  left: 25%;
  width: 25%;
  z-index: 5000;
  top: 0;
  height: 100%;
}
.under-price-slider .nav-next {
  position: absolute;
  right: 25%;
  width: 25%;
  z-index: 5000;
  top: 0;
  height: 100%;
}
.under-price-slider .nav-prev {
  left: 0;
  width: 200px;
  margin-left: max(15px, (100% - 1700px) / 2);
}
.under-price-slider .nav-next {
  right: 0;
  width: 200px;
}
.under-price-slider {
  /*** Стрелки на слайдере ***/
}
.under-price-slider .reduce-width-arrows .nav-prev {
  width: 100px;
}
.under-price-slider .reduce-width-arrows .nav-next {
  width: 100px;
}
.under-price-slider .slick-slide img {
  display: block;
  width: 100%;
}

#dialog-content-doors-size {
  display: none;
  width: 700px;
  max-width: 100%;
  padding-bottom: 50px;
}

.read-more-link {
  position: relative;
  height: 1px;
  text-align: center;
}
.read-more-link span {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: -20px 0 0;
  padding: 14px 24px;
  border: 1px solid #fff;
  border-radius: 100px;
  background-color: #fff;
  box-shadow: 0 5px 10px rgba(60, 60, 59, 0.15);
  color: #1d1d1b;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: border-color 0.3s, box-shadow 0.3s, background-color 0.3s;
}

.text-hidden.hiddenExt {
  background-image: linear-gradient(180deg, #000, rgba(0, 0, 0, 0.561));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.finishes-collapse-inner.finishes--collapsed {
  overflow: hidden;
}

.wrapper-left-block {
  padding-right: 0;
  padding-left: 30px;
}

.combine-container {
  position: relative;
}
.combine-container:not(.page-container) {
  margin-top: 20px;
}

.page-part {
  flex: 1 0 auto;
  flex-basis: auto;
}

.space-4 {
  margin-top: 35px;
}

.text-ltr {
  direction: ltr;
}

.span-to-basket {
  display: flex;
  align-items: center;
  justify-content: center;
}
.span-to-basket:before {
  margin-right: 5px;
}

.inrter_row .swiper-slide a {
  height: 256px;
}
.inrter_row .swiper-slide img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.inrter_row .swiper-slide.video-item iframe {
  height: 256px;
}

#models ul li img {
  height: 262px;
  width: auto;
  object-fit: contain;
}

.price-line-new .nav,
.inrter_row .nav,
.styles_row .nav,
.variants_row .nav {
  display: flex;
  align-items: center;
  position: relative;
}
.price-line-new .nav .swiper-scrollbar,
.inrter_row .nav .swiper-scrollbar,
.styles_row .nav .swiper-scrollbar,
.variants_row .nav .swiper-scrollbar {
  height: 1px;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
.price-line-new .nav .left,
.inrter_row .nav .left,
.styles_row .nav .left,
.variants_row .nav .left {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  transform: none;
  height: 46px;
  margin-left: 6px;
}
@media screen and (max-width: 768px) {
  .price-line-new .nav .left,
  .inrter_row .nav .left,
  .styles_row .nav .left,
  .variants_row .nav .left {
    margin-left: 20px;
  }
}
.price-line-new .nav .left .firstLevel,
.inrter_row .nav .left .firstLevel,
.styles_row .nav .left .firstLevel,
.variants_row .nav .left .firstLevel {
  position: relative;
  height: 100%;
}
.price-line-new .nav .right,
.inrter_row .nav .right,
.styles_row .nav .right,
.variants_row .nav .right {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  position: relative;
  margin-left: 20px;
}
.price-line-new .nav .right .swiper-button-prev-custom,
.inrter_row .nav .right .swiper-button-prev-custom,
.styles_row .nav .right .swiper-button-prev-custom,
.variants_row .nav .right .swiper-button-prev-custom {
  cursor: pointer;
}
.price-line-new .nav .right .swiper-button-prev-custom + .swiper-button-prev-custom,
.inrter_row .nav .right .swiper-button-prev-custom + .swiper-button-prev-custom,
.styles_row .nav .right .swiper-button-prev-custom + .swiper-button-prev-custom,
.variants_row .nav .right .swiper-button-prev-custom + .swiper-button-prev-custom {
  margin-left: 0;
}
.price-line-new .nav .right .swiper-button-prev-custom:first-child,
.inrter_row .nav .right .swiper-button-prev-custom:first-child,
.styles_row .nav .right .swiper-button-prev-custom:first-child,
.variants_row .nav .right .swiper-button-prev-custom:first-child {
  margin-right: 25px;
}
.price-line-new .nav img,
.inrter_row .nav img,
.styles_row .nav img,
.variants_row .nav img {
  width: 26px;
  height: 32px;
}

.btn-size-door {
  display: inline-flex;
  align-items: center;
}
.btn-size-door .mi {
  margin-right: 6px;
  font-size: 16px;
  line-height: 1;
}

.row-questions {
  padding-top: 70px;
}

.price-line-new .nav .swiper-button-prev-custom,
.price-line-new .nav .swiper-button-next-custom,
.inrter_row .nav .swiper-button-prev-custom,
.inrter_row .nav .swiper-button-next-custom,
.styles_row .nav .swiper-button-prev-custom,
.styles_row .nav .swiper-button-next-custom,
.variants_row .nav .swiper-button-prev-custom,
.variants_row .nav .swiper-button-next-custom {
  cursor: pointer;
  display: flex;
  align-items: center;
}

.fancybox__slide #dialog-content-doors-size,
.fancybox__content #dialog-content-doors-size {
  display: block !important;
}
.fancybox__slide #dialog-content-doors-size .read-more-link,
.fancybox__content #dialog-content-doors-size .read-more-link {
  height: auto;
  margin-top: 20px;
}
.fancybox__slide #dialog-content-doors-size .read-more-link span,
.fancybox__content #dialog-content-doors-size .read-more-link span {
  margin: 0;
}

.hiddenExt {
  display: block;
  overflow: hidden;
}

.span-to-basket.btn {
  display: flex;
  align-items: center;
  justify-content: center;
}
.span-to-basket.btn .mi {
  font-size: 16px;
  line-height: 1;
  margin-right: 6px;
}

.product-slider-col-card20 .main-image img {
  max-height: 626px;
  width: 100%;
  object-fit: contain;
}

/* End */
/* /local/templates/union_2026/components/bitrix/catalog.element/door-configurator/style.css?179127845447393 */
/* /local/templates/union_2026/components/bitrix/catalog.element/card-2-0/style.css?178964822032769 */