/* ==========================================================================
   MARSHRUT — универсальные токены (шрифты, отступы, скругления)
   Значения перенесены из 7 таблиц. Привязка к классам, не к тегам.
   ВЕРТИКАЛЬНАЯ РИТМИКА — ТОЛЬКО ЧЕРЕЗ gap flex-контейнера (никаких margin),
   чтобы у последнего/единственного элемента не было лишнего отступа снизу.

   Размеры (на самом элементе):
     H2            → .marshrut-title
     H3            → .marshrut-subtitle
     основной текст→ .marshrut-text
     блок          → .marshrut-block   (только padding)
     скругления    → .marshrut-radius-lg (24) / .marshrut-radius-sm (16)

   Отступы = gap на родителе (flex column):
     между блоками → .marshrut-blocks-gap
     внутри блока  → .marshrut-block-gap
     после H2      → .marshrut-title-gap
     после H3      → .marshrut-subtitle-gap
     текст-текст   → .marshrut-text-gap

   Базовые значения = desktop (контейнер 1450). Ниже — брейкпоинты.
   ========================================================================== */

/* --- Сброс дефолтных отступов у текстовых элементов (ритмика — через gap) --- */
.marshrut-title,
.marshrut-subtitle,
.marshrut-text {
    margin: 0;
}


/* Road Radio Bold */
@font-face {
    font-family: 'roadradio';
    src: url('/catalog/view/theme/unishop2/fonts/roadradio/roadradio_bold.woff2') format('woff2'),
         url('/catalog/view/theme/unishop2/fonts/roadradio/roadradio_bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Размеры шрифтов --- */
.marshrut-title {
    font-size: 48px !important;
    font-weight: 600 !important;
    line-height: 120% !important;
}

.marshrut-subtitle {
    font-size: 32px !important;
}

.marshrut-text {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 150% !important;
}

/* --- Блок: только внутренние отступы (padding) --- */
.marshrut-block {
    padding: 50px;
}

/* --- Цвета текста --- */
.marshrut-text-white {
    color: #fff !important;
}

.marshrut-text-dark {
    color: #020A0A !important;
}

/* --- Скругления (постоянны на всех брейкпоинтах) --- */
.marshrut-radius-lg {
    border-radius: 24px;
}

.marshrut-radius-sm {
    border-radius: 16px;
}

/* --- gap-контейнеры (flex column). Отступ только МЕЖДУ элементами --- */
.marshrut-blocks-gap,
.marshrut-block-gap,
.marshrut-title-gap,
.marshrut-subtitle-gap,
.marshrut-text-gap {
    display: flex;
    flex-direction: column;
}

.marshrut-blocks-gap {
    gap: 130px;
}

.marshrut-block-gap {
    gap: 50px;
}

.marshrut-title-gap {
    gap: 50px;
}

.marshrut-subtitle-gap {
    gap: 24px;
}

.marshrut-text-gap {
    gap: 16px;
}


/* ===== Контейнер 1250 ===== */
@media screen and (max-width: 1599px) {
    .marshrut-title-gap {
        gap: 40px;
    }
}


/* ===== Контейнер 1120 ===== */
@media screen and (max-width: 1344px) {
    .marshrut-title {
        font-size: 40px !important;
    }

    .marshrut-subtitle {
        font-size: 28px !important;
    }

    .marshrut-blocks-gap {
        gap: 110px;
    }

    .marshrut-title-gap {
        gap: 36px;
    }

    .marshrut-subtitle-gap {
        gap: 20px;
    }
}


/* ===== Контейнер 920 ===== */
@media screen and (max-width: 1199px) {
    .marshrut-block {
        padding: 40px;
    }

    .marshrut-blocks-gap {
        gap: 100px;
    }

    .marshrut-block-gap {
        gap: 40px;
    }

    .marshrut-title-gap {
        gap: 32px;
    }
}


/* ===== Контейнер 700 ===== */
@media screen and (max-width: 991px) {
    .marshrut-title {
        font-size: 32px !important;
    }

    .marshrut-block {
        padding: 30px;
    }

    .marshrut-blocks-gap {
        gap: 80px;
    }

    .marshrut-block-gap {
        gap: 30px;
    }

    .marshrut-title-gap {
        gap: 28px;
    }
}


/* ===== Контейнер 518 ===== */
@media screen and (max-width: 767px) {
    .marshrut-subtitle {
        font-size: 20px !important;
    }

    .marshrut-block {
        padding: 28px;
    }

    .marshrut-blocks-gap {
        gap: 60px;
    }

    .marshrut-block-gap {
        gap: 20px;
    }
}


/* ===== Контейнер 270 ===== */
@media screen and (max-width: 567px) {
    .marshrut-title {
        font-size: 24px !important;
    }

    .marshrut-subtitle {
        font-size: 18px !important;
    }

    .marshrut-text {
        font-size: 14px !important;
    }

    .marshrut-block {
        padding: 20px;
    }

    .marshrut-title-gap {
        gap: 20px;
    }
}


/* ==========================================================================
   ПЕРВАЯ СЕКЦИЯ (герой): верхний блок (svg + h2) и нижняя плашка
   Расстояние между блоками — gap (не margin)
   ========================================================================== */

.marshrut-first-section {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 522px;
    background:
        linear-gradient(0deg, rgba(31, 31, 31, 0.00) 48.47%, #1F1F1F 100%),
        linear-gradient(180deg, rgba(31, 31, 31, 0.00) 89.21%, #1F1F1F 100%),
        url('/image/catalog/landings/marshrut/marshrut-55/head-bg.webp') 50% / cover no-repeat;
    background-color: #FFF;
}

/* Верхний блок — svg + заголовок */
.marshrut-first-section__top {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* SVG-бейдж — резиновый на всю ширину родителя, пропорции сохраняются viewBox */
.marshrut-first-section__badge {
    display: block;
    width: 100%;
    height: auto;
}

/* Подзаголовок героя — по центру, ограничен по ширине */
.marshrut-first-section__top .marshrut-title {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* Нижняя полупрозрачная плашка — по центру, ограничена по ширине, текст по центру */
.marshrut-first-section__bottom {
    max-width: 608px;
    margin: 0 auto;
    padding: 20px;
    text-align: center;
    border-radius: 24px;
    background: rgba(0, 0, 0, 0.40);
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
}

/* Расстояние между верхним и нижним блоком по брейкпоинтам */
@media screen and (max-width: 991px) {
    .marshrut-first-section {
        gap: 278px;
    }
}

@media screen and (max-width: 567px) {
    .marshrut-first-section {
        gap: 303px;
    }
}


/* ==========================================================================
   СЕКЦИЯ ВИДЕО — тёмная карточка с заголовком и адаптивным видео 16:9
   ========================================================================== */

.marshrut-video {
    background: #1F1F1F;
}

.marshrut-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 24px;
}

.marshrut-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ==========================================================================
   СЕКЦИЯ «ГРАММЫ» — фон с затемнением, 2 колонки (455 / 457)
   ========================================================================== */

.marshrut-features {
    display: flex;
    justify-content: space-between;
    background:
        radial-gradient(220.53% 68.67% at 79.02% 34.62%, rgba(31, 31, 31, 0.00) 0%, rgba(31, 31, 31, 0.00) 22.62%, #1F1F1F 100%),
        linear-gradient(0deg, rgba(31, 31, 31, 0.00) 76.4%, rgba(31, 31, 31, 0.85) 90.43%, #1F1F1F 95.53%),
        linear-gradient(180deg, rgba(31, 31, 31, 0.00) 58.02%, #1F1F1F 100%),
        url('/image/catalog/landings/marshrut/marshrut-55/features-bg.webp') 50% / cover no-repeat;
    background-color: #1F1F1F;
}

/* Левая колонка (455) и правая (457) */
.marshrut-features__left {
    flex: 0 0 455px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.marshrut-features__right {
    flex: 0 0 457px;
    display: flex;
    align-items: flex-end;
}

/* Левая колонка: интро (заголовок + лид) */
.marshrut-features__intro {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.marshrut-features__lead {
    color: rgba(255, 255, 255, 0.70) !important;
}

/* Список «грамм»-карточек */
.marshrut-features__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marshrut-features__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 20px;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.40);
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
}

.marshrut-features__item-title {
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 120% !important;
}

.marshrut-features__item-text {
    color: rgba(255, 255, 255, 0.60) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 150% !important;
}

/* Правая колонка: плашка с габаритами */
.marshrut-features__card {
    width: 100%;
    padding: 20px;
    border-radius: 16px;
    background: #266141;
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
}


/* --- Адаптив секции «граммы» --- */

/* ===== Контейнер 920: колонки складываются в одну ===== */
@media screen and (max-width: 1199px) {
    .marshrut-features {
        flex-direction: column;
        gap: 50px;
    }

    .marshrut-features__left,
    .marshrut-features__right {
        flex: 0 0 auto;
    }

    .marshrut-features__left {
        max-width: 454px;
    }

    .marshrut-features__right {
        width: 100%;
    }
}

/* ===== Контейнер 518: мобильный фон (mini), плашка уходит под контент ===== */
@media screen and (max-width: 767px) {
    .marshrut-features {
        background-color: #1F1F1F;
        background-image: url('/image/catalog/landings/marshrut/marshrut-55/features-bg-mini.webp');
        background-size: cover;
        background-position: top center;
    }

    .marshrut-features__left {
        max-width: 100%;
        gap: 75vw;
    }
}

/* ===== Контейнер 270 ===== */
@media screen and (max-width: 567px) {
    .marshrut-features__left {
        gap: 110vw;
    }
}


/* ==========================================================================
   СЕКЦИЯ «ДЛЯ ЭКСТРЕМАЛЬНЫХ КЛИМАТИЧЕСКИХ ЗОН» — шапка + Swiper-слайдер. Пока десктоп
   ========================================================================== */

.marshrut-guarantee {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

/* Шапка: заголовок слева, текст справа (768), space-between */
.marshrut-guarantee__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.marshrut-guarantee__lead {
    flex: 0 0 768px;
    max-width: 768px;
    color: rgba(2, 10, 10, 0.60) !important;
}

/* Слайдер */
.marshrut-guarantee__slider {
    width: 100%;
    overflow: hidden;
}

/* Слайд фиксированной ширины (slidesPerView: 'auto') */
.marshrut-guarantee__slider .swiper-slide {
    width: 768px;
    height: auto;
}

/* Карточка: фикс. высота, фон-картинка через img, текст-панель снизу */
.marshrut-guarantee__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 670px;
    border-radius: 24px;
    overflow: hidden;
}

.marshrut-guarantee__card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Текст-панель: одинаковая высота у всех задаётся из JS (по самой высокой) */
.marshrut-guarantee__card-body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.40);
    -webkit-backdrop-filter: blur(17.5px);
    backdrop-filter: blur(17.5px);
}

.marshrut-guarantee__card-title {
    margin: 0;
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 120% !important;
    color: #fff !important;
}

.marshrut-guarantee__card-desc {
    margin: 0;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 150% !important;
    color: rgba(255, 255, 255, 0.70) !important;
}

.marshrut-guarantee__card-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marshrut-guarantee__card-point {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 150% !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

.marshrut-guarantee__check {
    flex-shrink: 0;
}

.marshrut-guarantee__card-point p {
    margin: 0;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 150% !important;
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Управление: стрелки + scrollbar */
.marshrut-guarantee__controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

.marshrut-guarantee__nav {
    flex: 0 0 auto;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.marshrut-guarantee__nav svg {
    display: block;
}

.marshrut-guarantee__nav.swiper-button-disabled {
    opacity: 0.4;
    cursor: default;
}

/* Прогрессбар — тянется на всю ширину между стрелками, заполняется по прогрессу */
.marshrut-guarantee__progress {
    flex: 1 1 auto;
    padding: 20px;
    border-radius: 12px;
    background: rgba(67, 67, 73, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.marshrut-guarantee__progress-track {
    box-sizing: border-box;
    width: 100%;
    height: 8px;
    padding: 2px;
    border-radius: 44px;
    background: rgba(255, 255, 255, 0.20);
}

.marshrut-guarantee__progress-fill {
    width: 100%;
    height: 100%;
    border-radius: 44px;
    background: #FFF;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}


/* --- Адаптив секции «Для экстремальных климатических зон»: шапка --- */

/* ===== Контейнер 1250 ===== */
@media screen and (max-width: 1599px) {
    .marshrut-guarantee__lead {
        flex-basis: 537px;
        max-width: 537px;
    }
}

/* ===== Контейнер 1120: заголовок карточки 28 ===== */
@media screen and (max-width: 1344px) {
    .marshrut-guarantee__lead {
        flex-basis: 465px;
        max-width: 465px;
    }

    .marshrut-guarantee__card-title {
        font-size: 28px !important;
    }
}

/* ===== Контейнер 920: шапка вертикально, слайд 680×600 ===== */
@media screen and (max-width: 1199px) {
    .marshrut-guarantee__head {
        flex-direction: column;
        gap: 20px;
    }

    .marshrut-guarantee__lead {
        flex: 0 0 auto;
        max-width: 100%;
    }

    .marshrut-guarantee__slider .swiper-slide {
        width: 680px;
    }

    .marshrut-guarantee__card {
        height: 600px;
    }
}

/* ===== Контейнер 700: слайд 491×664, padding панели 30 ===== */
@media screen and (max-width: 991px) {
    .marshrut-guarantee__slider .swiper-slide {
        width: 491px;
    }

    .marshrut-guarantee__card {
        height: 664px;
    }

    .marshrut-guarantee__card-body {
        padding: 30px;
    }
}

/* ===== Контейнер 518: слайд на всю ширину, padding панели 28, заголовок 20 ===== */
@media screen and (max-width: 767px) {
    .marshrut-guarantee__slider .swiper-slide {
        width: 100%;
    }

    .marshrut-guarantee__card-body {
        padding: 28px;
    }

    .marshrut-guarantee__card-title {
        font-size: 20px !important;
    }
}

/* ===== Контейнер 270: padding панели 20, заголовок 18, текст 14 ===== */
@media screen and (max-width: 567px) {
    .marshrut-guarantee__card-body {
        padding: 20px;
    }

    .marshrut-guarantee__card-title {
        font-size: 18px !important;
    }

    .marshrut-guarantee__card-desc {
        font-size: 14px !important;
    }
}


/* ==========================================================================
   СЕКЦИЯ «ВСЕСЕЗОННЫЙ ФОРМАТ» — фон-картинка на всю ширину, заголовок + плашка.
   Пока десктоп (плитки в шахматном порядке — следующим шагом)
   ========================================================================== */

/* Обёртка секции — тёмный фон, отступ только сверху/снизу */
.marshrut-seasons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 50px 0;
    background: #1F1F1F;
}

/* Верхний блок-герой: фон-картинка на всю ширину */
.marshrut-seasons__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 600px;
    padding: 0 50px;
    overflow: hidden;
    text-align: center;
    background:
        linear-gradient(270deg, rgba(31, 31, 31, 0.20) 0%, rgba(31, 31, 31, 0.02) 48.05%, rgba(31, 31, 31, 0.20) 100%),
        linear-gradient(180deg, #1F1F1F 0%, rgba(31, 31, 31, 0.00) 33.02%, rgba(31, 31, 31, 0.20) 48.61%, #1F1F1F 89.75%),
        url('/image/catalog/landings/marshrut/marshrut-55/seasons-bg.webp') 50% / cover no-repeat;
    background-color: #565656;
}

.marshrut-seasons__title {
    margin: 0;
    font-size: 48px !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    color: #fff !important;
}

/* Плашка: матовый фон (текстура капель — заменить на реальную), padding 10 */
.marshrut-seasons__plaque {
    width: 100%;
    padding: 10px;
    border-radius: 24px;
    background-image: url(/image/catalog/landings/marshrut/marshrut-55/rain-bg.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.marshrut-seasons__plaque-text {
    font-family: 'roadradio', sans-serif !important;
    font-size: 60px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    text-transform: uppercase !important;
    color: #fff !important;
}

/* --- Плитки в шахматном порядке: видео + текст --- */
.marshrut-seasons__tiles {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 0 50px;
}

/* Пара «видео + текст». В DOM видео всегда первое — при складывании
   в колонку оно окажется сверху во всех парах */
.marshrut-seasons__row {
    display: flex;
    gap: 20px;
}

/* Перевёрнутая пара — видео справа (переворот только по горизонтали) */
.marshrut-seasons__row--reverse {
    flex-direction: row-reverse;
}

.marshrut-seasons__tile {
    border-radius: 24px;
    overflow: hidden;
}

/* Видео-плитка: фиксированные 662×298, зациклённое видео без управления */
.marshrut-seasons__tile--video {
    flex: 0 0 662px;
    height: 298px;
}

.marshrut-seasons__tile--video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Текстовая плитка: занимает остаток ширины, высота — по видео в паре */
.marshrut-seasons__tile--text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
    padding: 50px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

/* Фон текстовой плитки — свой под каждое условие */.marshrut-seasons__tile--rain {
    background-image: url('/image/catalog/landings/marshrut/marshrut-55/rain-bg.webp');
}

.marshrut-seasons__tile--heat {
    background-image: url('/image/catalog/landings/marshrut/marshrut-55/heat-bg.webp');
}

.marshrut-seasons__tile--wind {
    background-image: url('/image/catalog/landings/marshrut/marshrut-55/wind-bg.webp');
}

.marshrut-seasons__tile--cold {
    background-image: url('/image/catalog/landings/marshrut/marshrut-55/cold-bg.webp');
}

.marshrut-seasons__tile-title {
    margin: 0;
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 120% !important;
    color: #fff !important;
}

.marshrut-seasons__tile-desc {
    margin: 0;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 150% !important;
    color: rgba(255, 255, 255, 0.70) !important;
}


/* --- Адаптив секции «Всесезонный формат»: padding (50 → 20),
       заголовок по шкале H2, плашка 60 → 20 --- */

/* ===== Контейнер 1120: видео 510×298 ===== */
@media screen and (max-width: 1344px) {
    .marshrut-seasons__title {
        font-size: 40px !important;
    }

    .marshrut-seasons__plaque-text {
        font-size: 55px !important;
    }

    .marshrut-seasons__tile--video {
        flex-basis: 510px;
    }
    .marshrut-seasons__tile-title {
        font-size: 28px !important;
    }
}

/* ===== Контейнер 920: пара в столбец — видео сверху на всю ширину ===== */
@media screen and (max-width: 1199px) {
    .marshrut-seasons {
        padding: 40px 0;
    }

    .marshrut-seasons__hero {
        padding: 0 40px;
    }

    .marshrut-seasons__plaque-text {
        font-size: 50px !important;
    }

    /* видео в DOM первое, поэтому column (не column-reverse) — оно сверху в обеих парах */
    .marshrut-seasons__row,
    .marshrut-seasons__row--reverse {
        flex-direction: column;
    }

    .marshrut-seasons__tile--video {
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        aspect-ratio: 662 / 298;
    }

    .marshrut-seasons__tiles {
        gap: 40px;
        padding: 0 40px;
    }

    .marshrut-seasons__tile--text {
        padding: 40px;
    }
}

/* ===== Контейнер 700 ===== */
@media screen and (max-width: 991px) {
    .marshrut-seasons {
        padding: 30px 0;
    }

    .marshrut-seasons__hero {
        padding: 0 30px;
    }

    .marshrut-seasons__title {
        font-size: 32px !important;
    }

    .marshrut-seasons__tiles {
        gap: 30px;
        padding: 0 30px;
    }

    .marshrut-seasons__tile--text {
        padding: 30px;
    }

    .marshrut-seasons__tile-title {
        font-size: 20px !important;
    }
}

/* ===== Контейнер 518: высота героя становится резиновой ===== */
@media screen and (max-width: 767px) {
    .marshrut-seasons {
        padding: 28px 0;
    }

    .marshrut-seasons__hero {
        height: auto;
        padding: 28px;
    }

    .marshrut-seasons__plaque-text {
        font-size: 40px !important;
    }

    .marshrut-seasons__tiles {
        gap: 28px;
        padding: 0 28px;
    }

    .marshrut-seasons__tile--text {
        padding: 28px;
    }
}

/* ===== Контейнер 270 ===== */
@media screen and (max-width: 567px) {
    .marshrut-seasons {
        padding: 20px 0;
    }

    .marshrut-seasons__hero {
        padding: 20px;
    }

    .marshrut-seasons__title {
        font-size: 24px !important;
    }

    .marshrut-seasons__plaque-text {
        font-size: 20px !important;
    }

    .marshrut-seasons__tiles {
        gap: 20px;
        padding: 0 20px;
    }

    .marshrut-seasons__tile--text {
        padding: 20px;
    }

    .marshrut-seasons__tile-title {
        font-size: 18px !important;
    }

    .marshrut-seasons__tile-desc {
        font-size: 14px !important;
    }
}


/* ==========================================================================
   СЕКЦИЯ «ЭРГОНОМИКА ПРОСТРАНСТВА» — заголовок + картинка слева и список справа.
   Высота картинки на десктопе задаётся высотой правой колонки (stretch)
   ========================================================================== */

.marshrut-comfort {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.marshrut-comfort__body {
    display: flex;
    gap: 50px;
}

/* Картинка: фикс. ширина, высота тянется по списку */
.marshrut-comfort__media {
    position: relative;
    flex: 0 0 710px;
    overflow: hidden;
}

.marshrut-comfort__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Список: занимает остаток, отступ между карточками 20 на всех разрешениях */
.marshrut-comfort__list {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.marshrut-comfort__item {
    padding: 20px;
    border-radius: 16px;
    background: #1F1F1F;
}

.marshrut-comfort__item-title {
    margin: 0;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    color: #fff !important;
}

.marshrut-comfort__item-desc {
    margin: 0;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 150% !important;
    color: rgba(255, 255, 255, 0.70) !important;
}


/* --- Адаптив секции «Эргономика пространства»: отступы 50 → 20, размеры картинки --- */

/* ===== Контейнер 1120: картинка 600 ===== */
@media screen and (max-width: 1344px) {
    .marshrut-comfort__media {
        flex-basis: 600px;
    }
}

/* ===== Контейнер 920: картинка уходит наверх, высота 526 ===== */
@media screen and (max-width: 1199px) {
    .marshrut-comfort,
    .marshrut-comfort__body {
        gap: 40px;
    }

    .marshrut-comfort__body {
        flex-direction: column;
    }

    .marshrut-comfort__media {
        flex: 0 0 auto;
        width: 100%;
        height: 526px;
    }
}

/* ===== Контейнер 700: высота картинки 426 ===== */
@media screen and (max-width: 991px) {
    .marshrut-comfort,
    .marshrut-comfort__body {
        gap: 30px;
    }

    .marshrut-comfort__media {
        height: 426px;
    }
}

/* ===== Контейнер 518: картинка резиновая, пропорции 518/326 ===== */
@media screen and (max-width: 767px) {
    .marshrut-comfort,
    .marshrut-comfort__body {
        gap: 28px;
    }

    .marshrut-comfort__media {
        height: auto;
        aspect-ratio: 518 / 326;
    }
}

/* ===== Контейнер 270 ===== */
@media screen and (max-width: 567px) {
    .marshrut-comfort,
    .marshrut-comfort__body {
        gap: 20px;
    }

    .marshrut-comfort__item-title,
    .marshrut-comfort__item-desc {
        font-size: 14px !important;
    }
}


/* ==========================================================================
   СЕКЦИЯ «ЭРГОНОМИКА ПРОСТРАНСТВА 2» — фото с затемнением сверху + сетка плиток 3×2.
   Плитки одинаковой высоты (grid-auto-rows: 1fr — все ряды по самому высокому)
   ========================================================================== */

.marshrut-cozy {
    overflow: hidden;
    background: #1F1F1F;
}

/* Фото на всю ширину, высота — по пропорции 1450×602 (до контейнера 1120) */
.marshrut-cozy__media {
    aspect-ratio: 1450 / 602;
    background:
        linear-gradient(180deg, rgba(31, 31, 31, 0.00) 68.57%, #1F1F1F 100%),
        url('/image/catalog/landings/marshrut/marshrut-55/cozy.webp') 50% / cover no-repeat,
        linear-gradient(270deg, #1F1F1F 22.2%, rgba(31, 31, 31, 0.00) 31.26%, rgba(31, 31, 31, 0.20) 70.51%, #1F1F1F 82.59%),
        linear-gradient(181deg, #1F1F1F 1.24%, rgba(31, 31, 31, 0.00) 35.38%, rgba(31, 31, 31, 0.20) 75.67%, #1F1F1F 98.78%);
    background-color: #1F1F1F;
}

/* Сетка плиток 3×2, отступ между плитками 20 на всех разрешениях */
.marshrut-cozy__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr;
    gap: 20px;
    padding: 50px;
}

/* Padding плитки — по шкале «отступ после H3» (24 → 20), gap внутри 10 всегда */
.marshrut-cozy__tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #535353 11.33%, rgba(83, 83, 83, 0.00) 129.34%);
}

.marshrut-cozy__tile-title {
    margin: 0;
    font-size: 32px !important;
    font-weight: 500 !important;
    line-height: 120% !important;
    color: #fff !important;
}

.marshrut-cozy__tile-text {
    margin: 0;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 150% !important;
    color: rgba(255, 255, 255, 0.70) !important;
}


/* --- Адаптив секции: padding блока плиток 50 → 20, padding плитки 24 → 20 --- */

/* ===== Контейнер 1120 ===== */
@media screen and (max-width: 1344px) {
    .marshrut-cozy__tile {
        padding: 20px;
    }

    .marshrut-cozy__tile-title {
        font-size: 28px !important;
    }
}

/* ===== Контейнер 920: плитки в один столбец, высота фото 490 ===== */
@media screen and (max-width: 1199px) {
    .marshrut-cozy__tiles {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        padding: 40px;
    }

    .marshrut-cozy__media {
        aspect-ratio: auto;
        height: 490px;
    }
}

/* ===== Контейнер 700 ===== */
@media screen and (max-width: 991px) {
    .marshrut-cozy__tiles {
        padding: 30px;
    }

    .marshrut-cozy__tile-title {
        font-size: 20px !important;
    }
}

/* ===== Контейнер 518 ===== */
@media screen and (max-width: 767px) {
    .marshrut-cozy__tiles {
        padding: 28px;
    }
}

/* ===== Контейнер 270: высота фото 233 ===== */
@media screen and (max-width: 567px) {
    .marshrut-cozy__tiles {
        padding: 20px;
    }

    .marshrut-cozy__media {
        height: 233px;
    }

    .marshrut-cozy__tile-title {
        font-size: 18px !important;
    }

    .marshrut-cozy__tile-text {
        font-size: 14px !important;
    }
}


/* ==========================================================================
   СЕКЦИЯ «ГАРАНТИЯ» — фото-фон + контент слева и кнопка покупки.
   С контейнера 920 фото уходит наверх отдельной картинкой, контент под ним
   ========================================================================== */

.marshrut-buy {
    display: flex;
    align-items: center;
    min-height: 473px;
    padding: 50px;
    background:
        linear-gradient(90deg, #1F1F1F 23.69%, rgba(31, 31, 31, 0.00) 72.38%),
        url('/image/catalog/landings/marshrut/marshrut-55/warranty.webp') 122.57% 76.84% / 80.426% 137.609% no-repeat;
    background-color: #2C2C2C;
}

/* Картинка показывается только в сложенном виде */
.marshrut-buy__img {
    display: none;
}

/* Отступы внутри контента дают токены:
   заголовок → текст .marshrut-title-gap (50 → 20),
   текст → кнопка .marshrut-subtitle-gap (24 → 20) */
.marshrut-buy__content {
    width: 795px;
}

/* Кнопка покупки (стили как у .universal-link-button в wuben) */
.marshrut-buy__btn {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 5px 5px 5px 30px;
    border: 1px solid #FFF;
    border-radius: 40px;
    background: #266141;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: all 0.3s ease;
    cursor: pointer;
}

.marshrut-buy__btn-text {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 150% !important;
    color: #fff !important;
    text-align: left;
}

.marshrut-buy__btn-icon {
    display: flex;
    flex: 0 0 auto;
}

.marshrut-buy__btn:hover {
    background: #1f5236;
    transform: translateY(-2px);
}

.marshrut-buy__btn:hover svg rect {
    fill: #E2EBE6;
}

.marshrut-buy__btn:active {
    background: #183f2a;
    transform: translateY(0);
}


/* --- Адаптив секции «Гарантия» --- */

/* ===== Контейнер 1120: min-height 452 ===== */
@media screen and (max-width: 1344px) {
    .marshrut-buy {
        min-height: 452px;
    }
}

/* ===== Контейнер 920: фото наверх, контент на всю ширину ===== */
@media screen and (max-width: 1199px) {
    .marshrut-buy {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
        min-height: 0;
        padding: 40px;
        background: #1F1F1F;
    }

    .marshrut-buy__img {
        display: block;
        width: 100%;
        height: auto;
    }

    .marshrut-buy__content {
        width: 100%;
    }
}

/* ===== Контейнер 700 ===== */
@media screen and (max-width: 991px) {
    .marshrut-buy {
        gap: 30px;
        padding: 30px;
    }
}

/* ===== Контейнер 518 ===== */
@media screen and (max-width: 767px) {
    .marshrut-buy {
        gap: 28px;
        padding: 28px;
    }
}

/* ===== Контейнер 270 ===== */
@media screen and (max-width: 567px) {
    .marshrut-buy {
        gap: 20px;
        padding: 20px;
    }
}


/* ==========================================================================
   СЕКЦИЯ «ВОПРОСЫ И ОТВЕТЫ» — аккордеон (порт .eighth-section из wuben).
   Отступ заголовок → список даёт токен .marshrut-title-gap (50 → 20)
   ========================================================================== */

.marshrut-faq__list {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.marshrut-faq__item {
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-bottom: 1px solid rgba(2, 10, 10, 0.16);
    background-color: #fff;
}

.marshrut-faq__button {
    margin: 0;
    padding: 30px 0 0;
    display: flex;
    align-items: flex-start;
    gap: 28px;
    width: 100%;
    border: 0;
    background-color: transparent;
    text-align: left;
    cursor: pointer;
}

.marshrut-faq__item:not(.is-active) .marshrut-faq__button {
    padding-bottom: 30px;
}

/* Иконка «плюс/минус»: вторая палочка исчезает в раскрытом состоянии */
.marshrut-faq__icon {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 5px;
    color: #266141 !important;
}

.marshrut-faq__icon::before,
.marshrut-faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 2px;
    border-radius: 20px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.marshrut-faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.marshrut-faq__item.is-active .marshrut-faq__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}

.marshrut-faq__question {
    margin: 0;
    padding: 0;
    color: #020A0A !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    line-height: 120% !important;
    transition: color 0.3s ease;
}

.marshrut-faq__item.is-active .marshrut-faq__question,
.marshrut-faq__button:hover .marshrut-faq__question {
    color: #266141 !important;
}

/* Высота анимируется из JS (0 ↔ scrollHeight) */
.marshrut-faq__answer {
    height: 0;
    overflow: hidden;
    transition: height 0.35s ease;
}

.marshrut-faq__answer-inner {
    padding: 22px 0 30px 52px;
}

.marshrut-faq__text {
    max-width: 1280px;
}


/* --- Адаптив секции «Вопросы и ответы» --- */

/* ===== Контейнер 1250 ===== */
@media screen and (max-width: 1599px) {
    .marshrut-faq__question {
        font-size: 28px !important;
    }
}

/* ===== Контейнер 1120 ===== */
@media screen and (max-width: 1344px) {
    .marshrut-faq__button {
        gap: 24px;
        padding-top: 26px;
    }

    .marshrut-faq__item:not(.is-active) .marshrut-faq__button {
        padding-bottom: 26px;
    }

    .marshrut-faq__question {
        font-size: 26px !important;
    }

    .marshrut-faq__answer-inner {
        padding: 18px 0 26px 48px;
    }
}

/* ===== Контейнер 920 ===== */
@media screen and (max-width: 1199px) {
    .marshrut-faq__question {
        font-size: 24px !important;
    }
}

/* ===== Контейнер 700 ===== */
@media screen and (max-width: 991px) {
    .marshrut-faq__button {
        gap: 20px;
        padding-top: 24px;
    }

    .marshrut-faq__item:not(.is-active) .marshrut-faq__button {
        padding-bottom: 24px;
    }

    .marshrut-faq__icon {
        margin-top: 3px;
    }

    .marshrut-faq__question {
        font-size: 22px !important;
    }

    .marshrut-faq__answer-inner {
        padding: 16px 0 24px 44px;
    }
}

/* ===== Контейнер 518 ===== */
@media screen and (max-width: 767px) {
    .marshrut-faq__button {
        gap: 16px;
        padding-top: 20px;
    }

    .marshrut-faq__item:not(.is-active) .marshrut-faq__button {
        padding-bottom: 20px;
    }

    .marshrut-faq__question {
        font-size: 20px !important;
    }

    .marshrut-faq__answer-inner {
        padding: 12px 0 20px 40px;
    }
}

/* ===== Контейнер 270 ===== */
@media screen and (max-width: 567px) {
    .marshrut-faq__button {
        gap: 12px;
        padding-top: 18px;
    }

    .marshrut-faq__item:not(.is-active) .marshrut-faq__button {
        padding-bottom: 18px;
    }

    .marshrut-faq__icon {
        flex-basis: 18px;
        width: 18px;
        height: 18px;
        margin-top: 3px;
    }

    .marshrut-faq__icon::before,
    .marshrut-faq__icon::after {
        width: 14px;
    }

    .marshrut-faq__question {
        font-size: 18px !important;
    }

    .marshrut-faq__answer-inner {
        padding: 10px 0 18px 30px;
    }
}