/* Start:/bitrix/templates/ecostroy/css/01-tokens.css?17884631813038*/
/* ==========================================================================
   Экострой — дизайн-токены
   Единственное место, где заданы цвета, шрифты, отступы и радиусы.
   Меняем здесь — меняется весь сайт.
   ========================================================================== */

:root {
    /* --- Цвета: бренд --- */
    --eco-green:        #1e4844;
    --eco-green-dark:   #153330;
    --eco-green-light:  #ECF3F2;
    --eco-green-hover:  #DCE9E8;
    --eco-lime:         #A8B66A;

    /* --- Цвета: текст --- */
    --eco-text:         #1E2420;
    --eco-text-soft:    #3A423C;
    --eco-text-muted:   #68706A;
    --eco-text-faint:   #9AA29B;

    /* --- Цвета: поверхности --- */
    --eco-bg:           #FFFFFF;
    --eco-bg-alt:       #F6F7F4;
    --eco-bg-input:     #FAFBF9;
    --eco-bg-image:     #EDF1EA;
    --eco-dark:         #1E2420;

    /* --- Цвета: границы --- */
    --eco-border:       #ECEFEA;
    --eco-border-strong:#D8DED4;
    --eco-border-soft:  #E4E8E0;

    /* --- Цвета: служебные --- */
    --eco-star:         #E6B800;
    --eco-cta:          var(--eco-green);

    /* --- Тени --- */
    --eco-shadow-sm:    0 4px 12px rgba(30, 36, 32, .06);
    --eco-shadow-md:    0 18px 36px rgba(30, 36, 32, .09);
    --eco-shadow-lg:    0 24px 50px rgba(30, 36, 32, .10);
    --eco-shadow-xl:    0 24px 56px rgba(30, 36, 32, .08);
    --eco-shadow-card:  0 24px 48px rgba(30, 36, 32, .12);
    --eco-shadow-cta:   0 10px 24px rgba(63, 107, 74, .28);
    --eco-shadow-cta-sm:0 6px 16px rgba(63, 107, 74, .22);

    /* --- Радиусы --- */
    --eco-r-sm:   12px;
    --eco-r-md:   16px;
    --eco-r-lg:   22px;
    --eco-r-xl:   28px;
    --eco-r-pill: 999px;

    /* --- Типографика --- */
    --eco-font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    /* Заголовки разделов — отдельная гарнитура */
    --eco-font-head: 'Unbounded', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

    --eco-h1: clamp(28px, 3.4vw, 44px);
    --eco-h2: clamp(28px, 3vw, 42px);
    --eco-h3: clamp(20px, 2.2vw, 26px);
    --eco-lead: 17px;
    --eco-body: 15px;
    --eco-small: 13px;

    /* --- Сетка / раскладка --- */
    --eco-container: 1280px;
    --eco-gutter: 24px;
    --eco-section-y: 60px;

    /* --- Анимация --- */
    --eco-ease: cubic-bezier(.22, .61, .36, 1);
    --eco-t-fast: .15s ease;
    --eco-t-base: .25s ease;
}

/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* End */


/* Start:/bitrix/templates/ecostroy/css/02-base.css?17882019817182*/
/* ==========================================================================
   Экострой — базовые стили, ресет и типографика
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    /* чтобы якорь не уезжал под липкую шапку */
    scroll-padding-top: 90px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--eco-font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--eco-text);
    background: var(--eco-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
    max-width: 100%;
    display: block;
}

a {
    color: var(--eco-green);
    text-decoration: none;
    transition: color var(--eco-t-fast);
}
a:hover { color: var(--eco-green-dark); }

button,
input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

input::placeholder,
textarea::placeholder { color: var(--eco-text-faint); }

h1, h2, h3, h4 {
    margin: 0;
    letter-spacing: -.02em;
    font-weight: 800;
    line-height: 1.15;
}

/* Заголовки разделов — Unbounded. Только h1 и h2: это названия блоков
   («Надёжные решения…», «Сертификаты…»). Подзаголовки внутри карточек
   (h3/h4) остаются на Manrope — иначе мелкий текст в широкой гарнитуре
   читается хуже и строки перестают помещаться. */
h1, h2 {
    font-family: var(--eco-font-head);
    /* У Unbounded нет 800-го начертания — просим 700, иначе браузер
       синтезирует жирность и буквы «плывут» */
    font-weight: 700;
    letter-spacing: -.01em;
}

p { margin: 0; }

/* --- Видимый фокус для доступности и клавиатурной навигации --- */
:focus-visible {
    outline: 3px solid var(--eco-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Скрыто визуально, доступно скринридерам */
.eco-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- Прелоадер страницы ---
   Перекрывает контент, пока страница не отрисована. Скрывается скриптом
   по событию load; на случай, если скрипт не сработает, есть страховочная
   анимация — через 3 секунды слой уходит сам и не блокирует сайт. */
.eco-loader {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--eco-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .35s ease, visibility .35s ease;
    animation: ecoLoaderFailsafe 0s linear 3s forwards;
}
.eco-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
}

.eco-loader__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

/* --- Спиннер: несколько вложенных колец с разной скоростью --- */
.eco-loader__spinner {
    position: relative;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eco-loader__spinner > span {
    position: absolute;
    border-radius: 50%;
}

/* Свечение под кольцами */
.eco-loader__glow {
    inset: 0;
    background: rgba(63, 107, 74, .15);
    filter: blur(16px);
    animation: ecoLoaderPulse 2s ease-in-out infinite;
}

/* Внешнее пунктирное кольцо — самое медленное */
.eco-loader__ring-dashed {
    inset: 0;
    border: 1px dashed rgba(63, 107, 74, .4);
    animation: ecoSpin 10s linear infinite;
}

/* Основная дуга */
.eco-loader__arc {
    inset: 4px;
    border: 2px solid transparent;
    border-top-color: var(--eco-green);
    box-shadow: 0 0 6px rgba(63, 107, 74, .5);
    animation: ecoSpin 2s linear infinite;
}

/* Встречная дуга — крутится в обратную сторону */
.eco-loader__arc-rev {
    inset: 12px;
    border: 2px solid transparent;
    border-bottom-color: var(--eco-green-dark);
    box-shadow: 0 0 6px rgba(46, 82, 55, .4);
    animation: ecoSpin 3s linear infinite reverse;
}

/* Внутреннее быстрое кольцо */
.eco-loader__ring-fast {
    inset: 20px;
    border: 1px solid transparent;
    border-left-color: rgba(46, 82, 55, .6);
    animation: ecoSpin 1s ease-in-out infinite;
}

/* Точка на орбите */
.eco-loader__orbit {
    inset: 0;
    animation: ecoSpin 4s linear infinite;
}
.eco-loader__orbit i {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--eco-green);
    box-shadow: 0 0 4px rgba(63, 107, 74, .9);
}

/* Ядро в центре */
.eco-loader__core {
    width: 8px;
    height: 8px;
    background: var(--eco-green-dark);
    box-shadow: 0 0 6px rgba(63, 107, 74, .6);
    animation: ecoLoaderPulse 2s ease-in-out infinite;
}

/* --- Подпись --- */
.eco-loader__text {
    /* Тот же шрифт, что и на сайте: прелоадер рисуется раньше остального
       контента, и на наследовании от body подпись успевала мелькнуть
       системным шрифтом */
    font-family: var(--eco-font);
    min-height: 16px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--eco-green-dark);
    text-align: center;
}
/* Каждая новая надпись всплывает снизу — класс снимает скрипт */
.eco-loader__text.is-changing {
    animation: ecoLoaderTextIn .5s ease both;
}

@keyframes ecoSpin {
    to { transform: rotate(360deg); }
}
@keyframes ecoLoaderPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .45; }
}
@keyframes ecoLoaderTextIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes ecoLoaderFailsafe {
    to { opacity: 0; visibility: hidden; }
}

/* Уважаем «уменьшить движение»: оставляем только пульсацию ядра */
@media (prefers-reduced-motion: reduce) {
    .eco-loader__ring-dashed,
    .eco-loader__arc,
    .eco-loader__arc-rev,
    .eco-loader__ring-fast,
    .eco-loader__orbit { animation: none; }
}

/* End */


/* Start:/bitrix/templates/ecostroy/css/03-layout.css?17886048373554*/
/* ==========================================================================
   Экострой — раскладка: контейнер, секции, сетки, заголовки секций
   ========================================================================== */

/* --- Контейнер --- */
.eco-container {
    max-width: var(--eco-container);
    margin: 0 auto;
    padding-left: var(--eco-gutter);
    padding-right: var(--eco-gutter);
    width: 100%;
}
.eco-container--narrow { max-width: 880px; }
.eco-container--cta    { max-width: 1232px; }

/* --- Секция --- */
.eco-section { padding: var(--eco-section-y) 0; }
.eco-section--alt   { background: var(--eco-bg-alt); }
.eco-section--white { background: var(--eco-bg); }
.eco-section--flush-top    { padding-top: 0; }
.eco-section--flush-bottom { padding-bottom: 0; }
/* Увеличенный отступ сверху: нужен там, где на секцию заходит блок
   с предыдущего экрана (например, счётчики над блоком преимуществ).
   Запас задан своим значением, а не от --eco-section-y: высота
   наезжающей карточки от отступов секции не зависит, и когда общий
   отступ уменьшили, заголовок начал бы подходить к ней вплотную. */
.eco-section--pad-top { padding-top: clamp(60px, 4vw, 200px); }

/* --- Шапка секции (надзаголовок + h2 + лид) --- */
.eco-section-head {
    max-width: 860px;
    margin-bottom: clamp(32px, 4vw, 52px);
}
.eco-section-head--center {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Заголовок слева, кнопка справа — разнесены по краям блока */
.eco-section-head--split {
    max-width: none;
    display: flex;
    /* по центру: кнопка встаёт вровень с заголовком, а не с нижней строкой */
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.eco-section-head--split > div { max-width: 760px; }
.eco-section-head__action { flex: 0 0 auto; }

.eco-eyebrow {
    display: inline-block;
    font-size: var(--eco-small);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--eco-green);
    margin-bottom: 14px;
}

.eco-section-head h2 { margin-top: 32px; margin-bottom: 16px; font-size: var(--eco-h2); }

.eco-lead {
    font-size: var(--eco-lead);
    line-height: 1.55;
    color: var(--eco-text-muted);
}

/* Шапка секции со ссылкой/кнопкой справа */
.eco-section-head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: clamp(28px, 4vw, 48px);
}
.eco-section-head-row .eco-section-head {
    margin-bottom: 0;
    max-width: 860px;
}

/* --- Авто-сетка: карточки подстраиваются под ширину --- */
.eco-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(var(--eco-col, 280px), 1fr));
}
.eco-grid--sm  { --eco-col: 200px; }
.eco-grid--md  { --eco-col: 270px; }
.eco-grid--lg  { --eco-col: 300px; }
.eco-grid--xl  { --eco-col: 320px; }
.eco-grid--gap-lg { gap: 22px; }

/* --- Утилиты --- */
.eco-mb-0 { margin-bottom: 0 !important; }

/* End */


/* Start:/bitrix/templates/ecostroy/css/04-ui.css?178872273712331*/
/* ==========================================================================
   Экострой — переиспользуемые UI-компоненты
   Кнопки, карточки, формы, бейджи, иконки. Используются на любой странице.
   ========================================================================== */

/* --------------------------------------------------------------------------
   КНОПКИ
   -------------------------------------------------------------------------- */
.eco-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--eco-font);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    padding: 13px 22px;
    border: 2px solid transparent;
    border-radius: 14px;
    cursor: pointer;
    transition: transform var(--eco-t-fast),
                filter var(--eco-t-fast),
                background var(--eco-t-fast),
                border-color var(--eco-t-fast);
    /* чтобы кнопка-ссылка и <button> выглядели одинаково */
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}
.eco-btn:disabled,
.eco-btn[aria-disabled="true"] {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
}

/* Основная — зелёная заливка */
.eco-btn--primary {
    background: var(--eco-cta);
    color: #fff;
    box-shadow: var(--eco-shadow-cta-sm);
}
.eco-btn--primary:hover:not(:disabled) {
    color: #fff;
    filter: brightness(.92);
    transform: translateY(-1px);
}

/* Вторичная — обводка */
.eco-btn--outline {
    background: rgb(246 247 244);
    color: var(--eco-green);
    /* border-color: var(--eco-green); */
}
.eco-btn--outline:hover:not(:disabled) {
    background: var(--eco-green-light);
    color: var(--eco-green);
    transform: translateY(-1px);
}

/* Мягкая — светло-зелёная подложка */
.eco-btn--soft {
    background: var(--eco-green-light);
    color: var(--eco-green);
    font-weight: 700;
    padding: 14px 24px;
}
.eco-btn--soft:hover:not(:disabled) {
    background: var(--eco-green-hover);
    color: var(--eco-green);
}

/* На тёмном фоне */
.eco-btn--ghost-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .4);
}
.eco-btn--ghost-light:hover:not(:disabled) {
    background: rgba(255, 255, 255, .1);
    color: #fff;
}

/* Текстовая, без фона */
.eco-btn--link {
    background: none;
    border: none;
    padding: 24px 0 0 0;
    color: var(--eco-text-muted);
    box-shadow: none;
}
.eco-btn--link:hover:not(:disabled) {
    color: var(--eco-text);
    transform: none;
}

/* Размеры */
.eco-btn--lg {
    font-size: 17px;
    height: 58px;
    padding: 0 32px;
    border-radius: var(--eco-r-md);
    box-shadow: var(--eco-shadow-cta);
}
.eco-btn--md {
    font-size: 16px;
    height: 56px;
    padding: 0 20px;
    border-radius: var(--eco-r-md);
}
.eco-btn--sm {
    font-size: 14px;
    padding: 11px 18px;
    border-radius: var(--eco-r-sm);
}
.eco-btn--block { width: 100%; }

/* Круглая кнопка-стрелка (слайдеры, лайтбокс) */
.eco-btn-round {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 14px;
    border: 1px solid var(--eco-border-strong);
    background: var(--eco-bg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--eco-t-fast), border-color var(--eco-t-fast);
}
.eco-btn-round:hover {
    background: var(--eco-green-light);
    border-color: var(--eco-green);
}
.eco-btn-round:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: var(--eco-bg);
    border-color: var(--eco-border-strong);
}

/* --------------------------------------------------------------------------
   КАРТОЧКИ
   -------------------------------------------------------------------------- */
.eco-card {
    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--eco-t-base), box-shadow var(--eco-t-base);
}
.eco-card--hover:hover {
    transform: translateY(-6px);
    box-shadow: var(--eco-shadow-card);
}

/* Карточка на серой подложке (преимущества) */
.eco-card--soft {
    background: var(--eco-bg-alt);
    border: none;
    border-radius: var(--eco-r-lg);
    padding: 28px;
    transition: transform var(--eco-t-base),
                box-shadow var(--eco-t-base),
                background var(--eco-t-base);
}
.eco-card--soft:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(30, 36, 32, .10);
    background: var(--eco-bg);
}

.eco-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.eco-card__title {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 8px;
    line-height: 1.3;
}
.eco-card__text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--eco-text-muted);
    margin-bottom: 18px;
    flex: 1;
}

/* Медиа-область карточки с зумом по наведению */
.eco-card__media {
    position: relative;
    overflow: hidden;
    background: var(--eco-bg-image);
}
.eco-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--eco-ease);
}
.eco-card--hover:hover .eco-card__media img,
.eco-zoom:hover img { transform: scale(1.07); }

.eco-zoom { overflow: hidden; }
.eco-zoom img { transition: transform .5s var(--eco-ease); }

/* Пока реальное фото не загружено (или файла ещё нет), на месте картинки
   остаётся ровная подложка, а не «битая» иконка — вёрстка не разъезжается. */
.eco-card__media img[src=""],
.eco-card__media img:not([src]),
img.is-missing {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   ИКОНКИ И БЕЙДЖИ
   -------------------------------------------------------------------------- */

/* Квадратная иконка со скруглением */
.eco-icon-box {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--eco-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--eco-shadow-sm);
    color: var(--eco-green);
}
.eco-icon-box--tint {
    background: var(--eco-green-light);
    box-shadow: none;
}
.eco-icon-box--sm { width: 44px; height: 44px; }

/* Бейдж-пилюля */
.eco-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    color: var(--eco-green);
    background: var(--eco-green-light);
    padding: 5px 12px;
    border-radius: var(--eco-r-pill);
}
.eco-badge--overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(63, 107, 74, .94);
    color: #fff;
}

/* Пилюля с пульсирующей точкой (регион работы) */
.eco-pill-live {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(239, 243, 236, .9);
    color: var(--eco-green);
    font-size: 13.5px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: var(--eco-r-pill);
}
.eco-pill-live::before {
    content: '';
    width: 8px;
    height: 8px;
    min-width: 8px;
    border-radius: 50%;
    background: var(--eco-green);
    animation: ecoPulseRing 2.2s ease-out infinite;
}

/* --------------------------------------------------------------------------
   ФОРМЫ (универсальные — используются во всех формах сайта)
   -------------------------------------------------------------------------- */
.eco-field { margin-bottom: 12px; }

.eco-input,
.eco-textarea {
    width: 100%;
    height: 56px;
    border-radius: var(--eco-r-md);
    border: 2px solid var(--eco-border);
    background: var(--eco-bg-input);
    padding: 0 20px;
    font-size: 16px;
    color: var(--eco-text);
    outline: none;
    transition: border-color var(--eco-t-fast), background var(--eco-t-fast);
}
.eco-textarea {
    height: auto;
    min-height: 120px;
    padding: 16px 20px;
    line-height: 1.5;
    resize: vertical;
}
.eco-input:focus,
.eco-textarea:focus {
    border-color: var(--eco-green);
    background: var(--eco-bg);
}
/* Поле с ошибкой валидации */
.eco-input.is-error,
.eco-textarea.is-error { border-color: #C4443B; }

.eco-field__error {
    display: none;
    font-size: 13px;
    color: #C4443B;
    margin-top: 6px;
}
.eco-field__error.is-visible { display: block; }

/* Согласие на обработку ПД — галочка, без неё форма не отправляется */
.eco-field--consent { margin-top: 14px; }
.eco-consent {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--eco-text-faint);
    cursor: pointer;
}
.eco-consent a {
    color: var(--eco-text-muted);
    text-decoration: underline;
}
.eco-consent__box {
    /* accent-color красит штатный чекбокс в фирменный зелёный —
       свой рисовать не нужно, доступность остаётся из коробки */
    accent-color: var(--eco-green);
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin: 1px 0 0;
    cursor: pointer;
}
.eco-consent__box.is-error {
    outline: 2px solid #C6493F;
    outline-offset: 2px;
}

/* Honeypot: скрытое поле-ловушка для ботов.
   Прячем так, чтобы бот, читающий разметку, счёл поле обычным,
   но живой пользователь его не увидел и не мог сфокусировать. */
.eco-hp {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Сообщения формы */
.eco-form__message {
    display: none;
    border-radius: var(--eco-r-sm);
    padding: 14px 18px;
    font-size: 14.5px;
    line-height: 1.5;
    margin-bottom: 14px;
}
.eco-form__message.is-visible { display: block; }
.eco-form__message--ok {
    background: var(--eco-green-light);
    color: var(--eco-green-dark);
}
.eco-form__message--error {
    background: #FBEDEC;
    color: #A5352D;
}

/* Отправленная форма: полей больше нет, остаётся только подтверждение.
   Скрываем всё, кроме сообщения, — так на месте формы виден один ответ,
   и заявку не отправят второй раз. */
.eco-form.is-sent > *:not(.eco-form__message) { display: none; }
.eco-form.is-sent .eco-form__message { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   АНИМАЦИИ
   -------------------------------------------------------------------------- */
@keyframes ecoFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ecoPulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(63, 107, 74, .4); }
    70%  { box-shadow: 0 0 0 14px rgba(63, 107, 74, 0); }
    100% { box-shadow: 0 0 0 0 rgba(63, 107, 74, 0); }
}

/* Появление блоков при скролле.
   Без JS (или если он не загрузился) контент остаётся видимым —
   это принципиально: не прячем содержимое от поисковиков и при ошибке скрипта. */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s var(--eco-ease), transform .6s var(--eco-ease);
}
.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* End */


/* Start:/bitrix/templates/ecostroy/css/05-chrome.css?178947601619261*/
/* ==========================================================================
   Экострой — «обвязка» сайта: шапка, меню, подвал, cookie, мобильная панель
   ========================================================================== */

/* --------------------------------------------------------------------------
   ПОЛОСА ПРОГРЕССА ЧТЕНИЯ
   -------------------------------------------------------------------------- */
.eco-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 90;
    background: transparent;
    pointer-events: none;
}
.eco-progress__bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--eco-green), var(--eco-lime));
    transform-origin: left;
    transition: width .08s linear;
}

/* --------------------------------------------------------------------------
   ШАПКА
   -------------------------------------------------------------------------- */
/* Шапка «лежит» поверх первого экрана: на главной hero подъезжает под неё,
   поэтому фон полупрозрачный, а рамки снизу нет. При скролле шапка
   уплотняется и получает почти непрозрачный фон, чтобы текст читался. */
.eco-header {
    position: sticky;
    top: 0;
    z-index: 60;
    /* background: rgba(255, 255, 255, .55); */
    /* backdrop-filter: blur(16px); */
    /* -webkit-backdrop-filter: blur(16px); */
    /* border-bottom: 1px solid transparent; */
    transition: box-shadow var(--eco-t-base),
                background var(--eco-t-base),
                border-color var(--eco-t-base);
}
.eco-header.is-scrolled {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: var(--eco-border);
    box-shadow: 0 8px 24px rgba(30, 36, 32, .08);
}

/* Страницы без первого экрана: там под шапкой сразу контент,
   поэтому фон нужен плотный с самого начала. */
body:not(.eco-has-hero) .eco-header {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: var(--eco-border);
}

.eco-header__inner {
    max-width: var(--eco-container);
    margin: 0 auto;
    padding: 12px var(--eco-gutter);
    display: flex;
    align-items: center;
    gap: 28px;
    transition: padding var(--eco-t-base);
}
.eco-header.is-scrolled .eco-header__inner { padding-top: 7px; padding-bottom: 7px; }

.eco-header__logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}
/* Логотип 1105x227 — пропорции 4.87:1. Задаём ширину, высота считается
   сама: так размер до скролла виден прямо в правиле. */
.eco-header__logo img {
    width: 420px;
    height: auto;
    max-width: 100%;
    transition: width var(--eco-t-base);
}
.eco-header.is-scrolled .eco-header__logo img { width: 205px; }

/* Два логотипа лежат друг на друге: белый показывается только на первом
   экране главной, обычный — везде остальное. Обе картинки в разметке,
   поэтому переключение мгновенное и не зависит от скрипта. */
.eco-header__logo { position: relative; }
.eco-header__logo-light {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--eco-t-base);
}
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-header__logo-dark  { opacity: 0; }
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-header__logo-light { opacity: 1; }

.eco-nav {
    display: flex;
    gap: 24px;
    font-size: 14.5px;
    font-weight: 600;
    flex: 1 1 auto;
    align-items: center;
}
.eco-nav__links { display: contents; }
/* Только ссылки меню: кнопки внутри панели красим их собственными
   правилами. Без :not(.eco-btn) этот селектор перебивал .eco-btn--primary
   по весу, и текст на зелёной кнопке становился тёмным. */
.eco-nav a:not(.eco-btn) { color: var(--eco-text); }
.eco-nav a:not(.eco-btn):hover,
.eco-nav a:not(.eco-btn).is-active { color: var(--eco-green); }

/* Шапка и низ нужны только мобильному меню */
.eco-nav__head,
.eco-nav__foot { display: none; }

/* --- Выпадающий список «Продукция» --- */
.eco-nav__item--drop { position: relative; }
.eco-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.eco-nav__caret { transition: transform var(--eco-t-fast); }
.eco-nav__item--drop:hover .eco-nav__caret { transform: rotate(180deg); }

/* Панель висит под пунктом. Открываем по наведению и по фокусу с клавиатуры;
   opacity+visibility вместо display, чтобы работал плавный переход. */
.eco-nav__drop {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 6px);
    z-index: 70;
    padding-top: 14px;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--eco-t-base), transform var(--eco-t-base), visibility var(--eco-t-base);
}
.eco-nav__item--drop:hover .eco-nav__drop,
.eco-nav__item--drop:focus-within .eco-nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.eco-nav__drop-inner {
    display: grid;
    grid-template-columns: repeat(4, 200px);
    gap: 8px;
    padding: 16px;
    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    box-shadow: var(--eco-shadow-lg);
}

/* --- Выпадающий список «О нас»: простой столбик ссылок --- */
.eco-nav__drop--plain { left: 0; transform: translate(0, 6px); }
.eco-nav__item--drop:hover .eco-nav__drop--plain,
.eco-nav__item--drop:focus-within .eco-nav__drop--plain {
    transform: translate(0, 0);
}

.eco-nav__sublist {
    list-style: none;
    margin: 0;
    padding: 8px;
    min-width: 210px;

    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-md);
    box-shadow: var(--eco-shadow-lg);
}
.eco-nav__sublist a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--eco-r-sm);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--eco-t-fast), color var(--eco-t-fast);
}
.eco-nav__sublist a:hover { background: var(--eco-bg-alt); }

.eco-nav__card { padding: 8px; border-radius: var(--eco-r-md); }
.eco-nav__card:hover { background: var(--eco-bg-alt); }

.eco-nav__card-link { display: block; }
.eco-nav__card-media {
    display: block;
    height: 180px;
    margin-bottom: 10px;
    border-radius: var(--eco-r-sm);
    background: var(--eco-bg-image);
    overflow: hidden;
}
.eco-nav__card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--eco-t-base);
}
.eco-nav__card:hover .eco-nav__card-media img { transform: scale(1.05); }

.eco-nav__card-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--eco-text);
}
.eco-nav__card:hover .eco-nav__card-title { color: var(--eco-green); }

.eco-nav__card-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.eco-nav__card-list a {
    display: block;
    padding: 3px 0;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--eco-text-muted);
}
.eco-nav__card-list a:hover { color: var(--eco-green); }

/* Затемнение под открытым мобильным меню */
.eco-nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(30, 36, 32, .45);
}

.eco-header__side {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: auto;
}
.eco-header__phone { text-align: right; }
.eco-header__phone a {
    font-size: 16px;
    font-weight: 800;
    color: var(--eco-text);
    display: block;
}
.eco-header__phone a:hover { color: var(--eco-green); }
/* Под телефоном стоит почта — это ссылка, поэтому задаём поведение
   при наведении. Селектор .eco-header a перебил бы цвет по весу. */
.eco-header__phone .eco-header__hours {
    display: block;
    font-size: 14px;
    color: var(--eco-text-muted);
    transition: color var(--eco-t-fast);
}
a.eco-header__hours:hover { color: var(--eco-green); }

/* --------------------------------------------------------------------------
   СВЕТЛАЯ ШАПКА НА ПЕРВОМ ЭКРАНЕ ГЛАВНОЙ

   Фон первого экрана тёмный, поэтому до скролла меню, телефон и почта
   белые, а кнопка «Заказать звонок» — белая с зелёным текстом.

   Все правила ограничены `body.eco-has-hero .eco-header:not(.is-scrolled)`:
   как только шапка уплотняется при скролле, она получает светлый фон и
   возвращается к обычным тёмным цветам — их не трогаем.
   -------------------------------------------------------------------------- */
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-nav > .eco-nav__links a:not(.eco-btn):not(.eco-nav__drop *),
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-nav > .eco-nav__links > .eco-nav__item > .eco-nav__link,
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-header__phone a,
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-header__phone .eco-header__hours {
    color: #fff;
}

body.eco-nav-open .eco-header:not(.is-scrolled) .eco-nav > .eco-nav__links a:not(.eco-btn):not(.eco-nav__drop *),
body.eco-nav-open .eco-header:not(.is-scrolled) .eco-nav > .eco-nav__links > .eco-nav__item > .eco-nav__link,
body.eco-nav-open .eco-header:not(.is-scrolled) .eco-header__phone a,
body.eco-nav-open .eco-header:not(.is-scrolled) .eco-header__phone .eco-header__hours {
    color: var(--eco-text);
}

/* Наведение: лёгкое приглушение вместо зелёного — зелёный на тёмном фоне
   читается хуже белого.
   :not(.eco-nav__drop *) обязателен: панель «Продукция» лежит внутри
   .eco-nav__links, и без исключения её ссылки белели на белом фоне. */
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-nav > .eco-nav__links a:not(.eco-btn):not(.eco-nav__drop *):hover,
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-header__phone a:hover,
body.eco-has-hero .eco-header:not(.is-scrolled) a.eco-header__hours:hover {
    color: rgba(255, 255, 255, .78);
}

/* Активный пункт подчёркиваем белым, а не зелёным */
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-nav > .eco-nav__links a:not(.eco-btn):not(.eco-nav__drop *).is-active {
    color: #fff;
}

/* Кнопка «Заказать звонок»: белая с зелёным текстом */
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-header__side .eco-btn--primary {
    background: #fff;
    border-color: #fff;
    color: var(--eco-green);
}
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-header__side .eco-btn--primary:hover {
    background: rgba(255, 255, 255, .88);
    border-color: rgba(255, 255, 255, .88);
    color: var(--eco-green-dark);
}

/* Полоски бургера на тёмном фоне тоже белые */
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-burger span {
    background: #fff;
}

/* Выпадающая панель «Продукция» лежит на своём светлом фоне —
   её ссылки оставляем тёмными, иначе белое по белому */
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-nav__drop a {
    color: var(--eco-text);
}
body.eco-has-hero .eco-header:not(.is-scrolled) .eco-nav__drop a:hover {
    color: var(--eco-green);
}

/* Бургер — только на мобильных */
.eco-burger {
    display: none;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid var(--eco-border-strong);
    border-radius: var(--eco-r-sm);
    background: var(--eco-bg);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.eco-burger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--eco-text);
    position: relative;
    transition: background var(--eco-t-fast);
}
.eco-burger span::before,
.eco-burger span::after {
    content: '';
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    background: var(--eco-text);
    transition: transform var(--eco-t-base);
}
.eco-burger span::before { top: -6px; }
.eco-burger span::after  { top: 6px; }

.eco-burger[aria-expanded="true"] span { background: transparent; }
.eco-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.eco-burger[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   ПОДВАЛ
   -------------------------------------------------------------------------- */
.eco-footer {
    background: var(--eco-dark);
    color: rgba(255, 255, 255, .8);
    padding: clamp(40px, 4.5vw, 56px) 0 20px;
    /* точка отсчёта для холста с градиентом */
    position: relative;
    overflow: hidden;
}

/* Живой градиент. Лежит поверх фона, но под содержимым и не ловит клики —
   ссылки и телефон работают как обычно. Появляется плавно, когда скрипт
   отрисовал первый кадр: иначе был бы заметен скачок цвета. */
.eco-footer__aurora {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .8s ease;
}
.eco-footer__aurora.is-on { opacity: 1; }

/* Содержимое поднимаем над холстом */
.eco-footer__inner,
.eco-footer__bottom { position: relative; z-index: 1; }

.eco-footer__inner {
    max-width: var(--eco-container);
    margin: 0 auto;
    padding: 0 var(--eco-gutter);
    display: flex;
    flex-wrap: wrap;
    gap: 36px;
    justify-content: space-between;
    align-items: flex-start;
}
/* Логотип уже белый — подложка под него не нужна */
.eco-footer__logo img {
    height: 46px;
    width: auto;
    margin-bottom: 18px;
}
.eco-footer__about {
    color: rgba(255, 255, 255, .65);
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 320px;
}
.eco-footer__cols {
    display: flex;
    gap: 48px;
    flex-wrap: wrap;
}
.eco-footer__col-title {
    color: rgba(255, 255, 255, .5);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.eco-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.eco-footer a { color: rgba(255, 255, 255, .8); font-size: 14.5px; }
.eco-footer a:hover { color: #fff; }

.eco-footer__phone {
    color: #fff !important;
    font-size: 24px;
    font-weight: 800;
    display: block;
    margin-bottom: 6px;
}
.eco-footer__hours {
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
    margin-bottom: 8px;
}
/* Почта под режимом работы: тот же размер, что у часов, но светлее —
   это ссылка, а не подпись. Отступ снизу держит прежнее расстояние
   до мессенджеров. */
.eco-footer__mail {
    display: inline-block;
    color: rgba(255, 255, 255, .85) !important;
    font-size: 14px;
    margin-bottom: 18px;
    text-decoration: none;
}
.eco-footer__mail:hover {
    color: #fff !important;
    text-decoration: underline;
}
.eco-footer__policy {
    display: inline-block;
    color: rgba(255, 255, 255, .55) !important;
    font-size: 13.5px;
    margin-top: 16px;
    text-decoration: underline;
}

/* Мессенджеры в подвале */
.eco-messengers { display: flex; gap: 12px; flex-wrap: wrap; }
.eco-messengers a {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    padding: 11px 18px;
    border-radius: var(--eco-r-sm);
    transition: background var(--eco-t-fast);
}
.eco-messengers a:hover { background: rgba(255, 255, 255, .2); }

.eco-footer__bottom {
    max-width: var(--eco-container);
    margin: 26px auto 0;
    padding: 16px var(--eco-gutter) 0;
    border-top: 1px solid rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
}

/* --------------------------------------------------------------------------
   COOKIE-БАННЕР
   -------------------------------------------------------------------------- */
.eco-cookie {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 80;
    max-width: 620px;
    margin: 0 auto;
    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(30, 36, 32, .18);
    padding: 18px 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.eco-cookie[hidden] { display: none; }
.eco-cookie__text {
    /* базис 320px + отступы шире, чем экран 360px, поэтому разрешаем
       блоку сжиматься: иначе баннер вылезал за край */
    flex: 1 1 240px;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.5;
    color: #4A524C;
}
.eco-cookie__text a { text-decoration: underline; }
.eco-cookie__actions { display: flex; gap: 10px; }

/* Нижняя мобильная панель действий убрана: звонок, мессенджеры и заявка
   переехали в мобильное меню под бургером — см. .eco-nav__foot. */
.image-404 img{
    margin: 24px auto;
}
.text-404{
    text-align: center;
}
/* End */


/* Start:/bitrix/templates/ecostroy/css/06-blocks.css?178862891429584*/
/* ==========================================================================
   Экострой — стили блоков страницы
   Hero, счётчики, квиз, кейсы, этапы, отзывы, сертификаты, CTA, контакты
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
/* Первый экран заезжает под шапку: она полупрозрачная и «лежит» поверх фото.
   Отрицательный отступ равен высоте шапки, а padding сверху возвращает
   текст на место, чтобы он не оказался под меню. */
.eco-hero {
    position: relative;
    overflow: hidden;
    margin-top: calc(-1 * var(--eco-header-h, 72px));
    min-height: clamp(760px, 96vh, 1060px);
    display: flex;
    align-items: center;
}
.eco-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 62% 55%;
    will-change: transform;
    z-index: 0;
}

/* Лёгкое затемнение вместо белого градиента: фото остаётся видимым,
   а тёмный текст поверх светлой части снимка по-прежнему читается. */
/* --------------------------------------------------------------------------
   ПОЯВЛЕНИЕ ПЕРВОГО ЭКРАНА

   Раньше после прелоадера всё возникало разом и статично. Теперь фон
   медленно отъезжает, а плашка, заголовок, подзаголовок, кнопки и
   карточка гарантий выходят друг за другом.

   Класс is-ready ставит скрипт, когда прелоадер уходит: иначе анимация
   проигрывалась бы за закрытым экраном и посетитель её не увидел.
   -------------------------------------------------------------------------- */
.js .eco-hero [data-hero] {
    opacity: 0;
    transform: translateY(26px);
    /* Страховка: если скрипт упадёт и класс is-ready не появится, текст
       проявится сам через 3 с — первый экран не останется пустым */
    animation: eco-hero-failsafe 0s linear 3s forwards;
}
@keyframes eco-hero-failsafe { to { opacity: 1; transform: none; } }

.js .eco-hero.is-ready [data-hero] {
    animation: none;
    opacity: 1;
    transform: none;
    transition: opacity .75s var(--eco-ease), transform .75s var(--eco-ease);
}

/* Шаги: каждый следующий элемент трогается чуть позже предыдущего */
.js .eco-hero.is-ready [data-hero="1"] { transition-delay: .05s; }
.js .eco-hero.is-ready [data-hero="2"] { transition-delay: .20s; }
.js .eco-hero.is-ready [data-hero="3"] { transition-delay: .35s; }
.js .eco-hero.is-ready [data-hero="4"] { transition-delay: .50s; }

/* Карточка гарантий лежит вне .eco-hero — ей отдельное правило */
.js .eco-counters [data-hero="5"] {
    opacity: 0;
    transform: translateY(34px);
    animation: eco-hero-failsafe 0s linear 3s forwards;
}
.js .eco-counters.is-ready [data-hero="5"] {
    animation: none;
    opacity: 1;
    transform: none;
    transition: opacity .8s var(--eco-ease) .62s, transform .8s var(--eco-ease) .62s;
}

/* Фон: очень медленный отъезд. Даёт ощущение движения, но не отвлекает
   от текста — 8 секунд на 6% масштаба почти незаметны глазу.
   Зум висит на обёртке: у самой картинки transform занят параллаксом. */
.eco-hero__bgwrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.js .eco-hero__bgwrap {
    transform: scale(1.06);
    transition: transform 8s cubic-bezier(.22, .61, .36, 1);
}
.js .eco-hero.is-ready .eco-hero__bgwrap { transform: none; }

/* Уважаем системную настройку «меньше движения» */
@media (prefers-reduced-motion: reduce) {
    .js .eco-hero [data-hero],
    .js .eco-counters [data-hero="5"] { opacity: 1; transform: none; }
    .js .eco-hero__bgwrap { transform: none; transition: none; }
}

.eco-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* background: linear-gradient(100deg,
        rgba(255, 255, 255, .55) 0%,
        rgba(255, 255, 255, .28) 45%,
        rgba(255, 255, 255, 0) 75%); */
}
.eco-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--eco-container);
    margin: 0 auto;
    /* Нижний отступ был большим, потому что карточка гарантий заходила
       на первый экран снизу. Теперь она внутри — запас не нужен. */
    padding: calc(var(--eco-header-h, 72px) + clamp(4px, 1vw, 12px))
             var(--eco-gutter)
             clamp(56px, 7vw, 96px);
}
.eco-hero__content {
    max-width: 780px;
    animation: ecoFadeUp .7s ease both;
    /* Плашка регионов скрыта — заголовок поднялся к шапке.
       Отступ возвращает композицию к макету. */
    padding-top: clamp(24px, 5vw, 50px);
}
.eco-hero h1 {
    font-size: var(--eco-h1);
    line-height: 1.18;
    margin: 0 0 14px;
    max-width: 780px;
    text-transform: uppercase;
}
.eco-hero__sub {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.55;
    margin-bottom: 22px;
    max-width: 560px;
}

/* Фон первого экрана тёмный — текст поверх него белый. Лёгкая тень
   добавлена, чтобы буквы читались и на светлых участках фотографии. */
.eco-hero__content {
    color: #fff;
    text-shadow: 0 1px 18px rgba(20, 24, 21, .35);
}
.eco-hero__content h1,
.eco-hero__content .eco-hero__sub { color: #fff; }
.eco-hero__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
/* Плашка регионов стоит над заголовком */
.eco-hero .eco-pill-live {
    background: rgba(255, 255, 255, .82);
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   СЧЁТЧИКИ (карточка внахлёст на hero)
   -------------------------------------------------------------------------- */
/* Карточка заходит на фото первого экрана: отрицательный отступ примерно
   равен её высоте, поэтому она «лежит» на hero, а не под ним. */
/* Карточка лежит внутри первого экрана, под подзаголовком, поэтому
   ни отрицательного наезда, ни собственных полей ей больше не нужно —
   отступы задаёт .eco-hero__inner. */
.eco-counters {
    position: relative;
    z-index: 3;
    margin: 26px 0 0;
    padding: 0;
}
/* Полупрозрачная подложка: фото первого экрана просвечивает, но текст
   на нём читается. blur размывает пёструю траву под карточкой — без него
   мелкие подписи сливались с фоном. */
/* Полупрозрачная тёмная подложка: фото первого экрана просвечивает,
   но белый текст и белые иконки на нём читаются. */
.eco-counters__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /* По макету карточка уже и выше: между рядами воздуха больше,
       чем между колонками, поэтому вертикальный зазор крупнее. */
    gap: 54px 24px;
    max-width: 560px;
    padding: 44px 40px;
    border-radius: var(--eco-r-xl);
    position: relative;
    overflow: hidden;

    /* Эффект матового стекла собран из градиентов, а не из backdrop-filter.
       Причина: под карточкой лежит .eco-hero__bg с параллаксом и
       will-change:transform — снимок из-за этого живёт в отдельном
       composited-слое, которого backdrop-filter «не видит», и размытия
       не происходит вовсе. Градиенты от слоёв не зависят и рисуются всегда. */
    background:
        radial-gradient(140% 120% at 18% -10%, rgba(255, 255, 255, .20) 0%, rgba(255, 255, 255, 0) 55%),
        linear-gradient(158deg, rgba(38, 47, 40, .46) 0%, rgba(14, 20, 16, .68) 100%);
}

/* Иконка сверху, подпись под ней — по центру */
.eco-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 0;
    border: none;
}

.eco-counter__icon {
    width: 80px;
    height: 80px;
    object-fit: contain;
    transition: transform var(--eco-t-base);
}
.eco-counter:hover .eco-counter__icon { transform: translateY(-3px) scale(1.06); }

.eco-counter__label {
    font-size: 16px;
    line-height: 1.35;
    color: #fff;
}


/* --------------------------------------------------------------------------
   ПЛИТКА ПРЕИМУЩЕСТВ

   Восемь одинаковых карточек в ровной сетке читались монотонно. Здесь
   сетка на 4 колонки, первые две карточки занимают по две — взгляд
   цепляется за главное, остальное дочитывается быстрее.
   -------------------------------------------------------------------------- */
.eco-bento {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}

.eco-bento__item {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Широкая карточка — две колонки. Такими идут первые две (главные
   преимущества) и последние две: карточек восемь, и без этого в нижнем
   ряду оставались два пустых места. */
.eco-bento__item--wide { grid-column: span 2; }

/* Акцент — только у первой пары: заливка и шрифт крупнее. Если выделить
   и нижнюю пару, подсвеченной окажется половина блока. */
.eco-bento__item--accent {
    background: linear-gradient(135deg,
        rgba(74, 143, 60, .10) 0%,
        rgba(74, 143, 60, .04) 55%,
        var(--eco-bg-alt) 100%);
}
.eco-bento__item--accent .eco-benefit__title { font-size: 20px; }
.eco-bento__item--accent .eco-benefit__text  { font-size: 15.5px; }

/* Тонкая зелёная полоса слева — появляется по наведению */
.eco-bento__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--eco-green);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform .45s var(--eco-ease);
}
.eco-bento__item:hover::before { transform: scaleY(1); transform-origin: top; }

/* Иконка оживает вместе с карточкой */
.eco-bento__item .eco-icon-box {
    transition: transform .45s var(--eco-ease), background .45s var(--eco-ease);
}
.eco-bento__item:hover .eco-icon-box {
    transform: translateY(-3px) rotate(-6deg) scale(1.08);
}

/* Появление: карточка не просто всплывает, а чуть подрастает.
   Очерёдность задаёт скрипт (data-reveal-group в js/ui.js), поэтому
   transition-delay здесь не ставим — иначе задержка удвоится. */
.js .eco-bento [data-reveal] {
    transform: translateY(30px) scale(.97);
    transition: opacity .65s var(--eco-ease), transform .65s var(--eco-ease);
}
.js .eco-bento [data-reveal].is-visible {
    transform: none;
}

@media (max-width: 1000px) {
    .eco-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eco-bento__item--wide { grid-column: span 2; }
}

@media (max-width: 620px) {
    .eco-bento { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .eco-bento__item--wide { grid-column: span 1; }
    .eco-bento__item--accent .eco-benefit__title { font-size: 18px; }
    .eco-quiz__option-icon { width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
    .eco-bento__item:hover .eco-icon-box { transform: none; }
}

/* --------------------------------------------------------------------------
   ПРЕИМУЩЕСТВА
   -------------------------------------------------------------------------- */
.eco-benefit__title {
    font-size: 18px;
    font-weight: 700;
    margin: 18px 0 10px;
    line-height: 1.3;
}
.eco-benefit__text {
    font-size: var(--eco-body);
    line-height: 1.55;
    color: var(--eco-text-muted);
}

/* --------------------------------------------------------------------------
   КВИЗ
   -------------------------------------------------------------------------- */
.eco-quiz {
    background: var(--eco-bg);
    border-radius: 26px;
    box-shadow: var(--eco-shadow-xl);
    padding: clamp(24px, 4vw, 44px);
    min-height: 380px;
    display: flex;
    flex-direction: column;
}
.eco-quiz__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 13.5px;
}
.eco-quiz__step { font-weight: 700; color: var(--eco-green); }
.eco-quiz__pct  { color: var(--eco-text-muted); }

.eco-quiz__progress {
    height: 8px;
    border-radius: var(--eco-r-pill);
    background: #EFF1EC;
    overflow: hidden;
    margin-bottom: 30px;
}
.eco-quiz__progress-bar {
    height: 100%;
    width: 0;
    border-radius: var(--eco-r-pill);
    background: linear-gradient(90deg, var(--eco-green), var(--eco-lime));
    transition: width .4s ease;
}

.eco-quiz__question {
    font-size: var(--eco-h3);
    font-weight: 800;
    margin-bottom: 8px;
}
.eco-quiz__note {
    font-size: var(--eco-body);
    color: var(--eco-text-muted);
    margin-bottom: 26px;
    min-height: 20px;
}

.eco-quiz__options {
    display: grid;
    /* 260px, а не 240: иконка выросла до 50px и длинным подписям
       («Установлю своими рабочими под вашим контролем») нужен запас */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}
.eco-quiz__option {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--eco-bg-alt);
    border: 2px solid transparent;
    border-radius: var(--eco-r-md);
    padding: 0px;
    font-family: var(--eco-font);
    font-size: 16px;
    font-weight: 600;
    color: var(--eco-text);
    cursor: pointer;
    /* 50px иконка + отступы сверху и снизу */
    min-height: 78px;
    transition: border-color var(--eco-t-fast),
                background var(--eco-t-fast),
                transform var(--eco-t-fast);
}
.eco-quiz__option:hover {
    border-color: var(--eco-green);
    background: var(--eco-bg);
    transform: translateY(-2px);
}
/* Иконки — цветные картинки 50×50, поэтому без зелёной подложки:
   она была нужна монохромным SVG, а под цветным PNG выглядит грязно */
.eco-quiz__option-icon {
    flex: 0 0 auto;
    width: 120px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px #1e4844 solid;
    border-radius: 16px;
}
@media (max-width: 1000px) {
    .eco-quiz__option-icon {width: 70px;}
}
.eco-quiz__option-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 15px;
}
.eco-quiz__back { margin-top: auto; padding-top: 26px; }

/* Финальный экран квиза и экран «отправлено» */
.eco-quiz__final {
    text-align: center;
    max-width: 520px;
    margin: auto;
    padding: 12px 0;
}
.eco-quiz__check {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--eco-green-light);
    color: var(--eco-green);
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
}
.eco-quiz__check--filled {
    width: 72px;
    height: 72px;
    background: var(--eco-green);
    color: #fff;
    font-size: 32px;
    margin-bottom: 24px;
}
.eco-quiz__final-title {
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    margin-bottom: 12px;
}
.eco-quiz__final-text {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--eco-text-muted);
    margin-bottom: 28px;
}

/* Панели квиза переключаются скриптом */
.eco-quiz__panel[hidden] { display: none; }

/* --------------------------------------------------------------------------
   КАТАЛОГ
   -------------------------------------------------------------------------- */
.eco-catalog__media { height: 210px; }
.eco-catalog__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.eco-price__from {
    font-size: var(--eco-small);
    color: var(--eco-text-faint);
}
.eco-price__value {
    font-size: 22px;
    font-weight: 800;
    color: var(--eco-text);
}

/* --------------------------------------------------------------------------
   КЕЙСЫ (горизонтальный скролл со снапом)
   -------------------------------------------------------------------------- */
.eco-cases-nav {
    display: flex;
    gap: 10px;
}

.eco-cases {
    max-width: var(--eco-container);
    margin: 0 auto;
    padding: 6px var(--eco-gutter) 18px;
    display: flex;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--eco-gutter);
    cursor: grab;
    /* плавный скролл на тач-устройствах */
    -webkit-overflow-scrolling: touch;
}
.eco-cases.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.eco-cases::-webkit-scrollbar { height: 8px; }
.eco-cases::-webkit-scrollbar-track { background: transparent; }
.eco-cases::-webkit-scrollbar-thumb {
    background: var(--eco-border-strong);
    border-radius: var(--eco-r-pill);
}

.eco-case {
    flex: 0 0 clamp(300px, 42vw, 440px);
    scroll-snap-align: start;
    border-radius: var(--eco-r-lg);
    overflow: hidden;
    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
}
.eco-case__media { height: 280px; overflow: hidden; background: var(--eco-bg-image); }
.eco-case__media img { width: 100%; height: 100%; object-fit: cover; }
.eco-case__body { padding: 22px 24px; }
.eco-case__title {
    font-size: 19px;
    font-weight: 800;
    margin: 12px 0 6px;
}
.eco-case__text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--eco-text-muted);
}

/* --------------------------------------------------------------------------
   ЭТАПЫ РАБОТЫ
   -------------------------------------------------------------------------- */
/* Этапы — нумерованный список, но маркеры рисуем сами */
.eco-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.eco-step {
    position: relative;
    border: 1px solid var(--eco-border);
    border-radius: 20px;
    padding: 26px 24px 24px;
    background: var(--eco-bg);
    transition: transform var(--eco-t-base),
                box-shadow var(--eco-t-base),
                border-color var(--eco-t-base);
}
.eco-step:hover {
    transform: translateY(-5px);
    box-shadow: var(--eco-shadow-md);
    border-color: var(--eco-lime);
}
.eco-step__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}
.eco-step__num {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--eco-green), var(--eco-green-dark));
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Пунктирная линия-«соединитель» между этапами */
.eco-step__line {
    flex: 1 1 auto;
    height: 2px;
    background: repeating-linear-gradient(90deg,
        var(--eco-border-strong) 0 8px, transparent 8px 14px);
}
.eco-step__title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.3;
}
.eco-step__text {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--eco-text-muted);
}

/* --------------------------------------------------------------------------
   ОТЗЫВЫ
   -------------------------------------------------------------------------- */
.eco-review {
    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
    margin: 0px;
}
.eco-review__stars {
    color: var(--eco-star);
    margin-bottom: 16px;
    font-size: 18px;
    letter-spacing: 3px;
}
.eco-review__text {
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--eco-text-soft);
    flex: 1;
    margin: 0;
}
.eco-review__author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
}
.eco-review__avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--eco-bg-image);
    flex: 0 0 auto;
}
.eco-review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.eco-review__name { font-size: 15px; font-weight: 700; }
.eco-review__meta { font-size: 13px; color: var(--eco-text-muted); }

/* --------------------------------------------------------------------------
   СЕРТИФИКАТЫ
   -------------------------------------------------------------------------- */
/* Лента сертификатов: 4 документа в поле зрения, остальные листаются.
   Механика и разметка те же, что у фотогалереи (.eco-gallery). */
.eco-certs {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    /* место под тень карточки при наведении, иначе она обрезается */
    padding: 6px 0 14px;
}
.eco-certs.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.eco-certs::-webkit-scrollbar { height: 8px; }
.eco-certs::-webkit-scrollbar-track { background: transparent; }
.eco-certs::-webkit-scrollbar-thumb {
    background: var(--eco-border-strong);
    border-radius: var(--eco-r-pill);
}

.eco-cert {
    flex: 0 0 calc((100% - 48px) / 4);
    scroll-snap-align: start;
    background: var(--eco-bg-alt);
    border: 1px solid var(--eco-border);
    border-radius: 18px;
    padding: 16px;
    transition: transform var(--eco-t-base), box-shadow var(--eco-t-base);
}
.eco-cert:hover {
    transform: translateY(-4px);
    box-shadow: var(--eco-shadow-card);
}
.eco-cert__thumb {
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--eco-r-sm);
    overflow: hidden;
    background: var(--eco-bg-image);
    cursor: pointer;
    border: none;
    width: 100%;
    display: block;
}
.eco-cert__thumb img { width: 100%; height: 100%; object-fit: contain; }
.eco-cert__zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(30, 36, 32, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.eco-cert__caption {
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    margin-top: 14px;
    color: var(--eco-text-soft);
}

/* Лайтбокс */
.eco-lightbox {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(20, 24, 21, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    animation: ecoFadeUp .25s ease both;
}
.eco-lightbox[hidden] { display: none; }
.eco-lightbox__figure {
    max-width: 90vw;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin: 0;
}
.eco-lightbox__img {
    max-width: 90vw;
    max-height: 72vh;
    border-radius: 14px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
    background: #fff;
}
.eco-lightbox__caption {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}
.eco-lightbox__btn {
    position: absolute;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--eco-t-fast);
}
.eco-lightbox__btn:hover { background: rgba(255, 255, 255, .2); }
.eco-lightbox__btn--close { top: 24px; right: 24px; width: 44px; height: 44px; font-size: 20px; }
.eco-lightbox__btn--prev  { left: 20px;  top: 50%; transform: translateY(-50%); }
.eco-lightbox__btn--next  { right: 20px; top: 50%; transform: translateY(-50%); }

/* --------------------------------------------------------------------------
   CTA-ПОЛОСА
   -------------------------------------------------------------------------- */
.eco-cta {
    max-width: 1232px;
    margin: 0 auto;
    background: var(--eco-dark);
    border-radius: var(--eco-r-xl);
    padding: clamp(36px, 5vw, 60px);
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
/* Декоративное свечение в углу */
.eco-cta::after {
    content: '';
    position: absolute;
    right: -60px;
    top: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 182, 106, .28), transparent 70%);
    pointer-events: none;
}
.eco-cta__text { max-width: 620px; position: relative; z-index: 1; }
.eco-cta__text h2 {
    color: #fff;
    font-size: clamp(24px, 2.6vw, 34px);
    margin-bottom: 12px;
    letter-spacing: -.01em;
}
.eco-cta__text p {
    color: rgba(255, 255, 255, .72);
    font-size: 16.5px;
    line-height: 1.55;
}
.eco-cta__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   КОНТАКТЫ
   -------------------------------------------------------------------------- */
.eco-contact {
    background: var(--eco-bg-alt);
    border-radius: 20px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.eco-contact__label {
    font-size: var(--eco-small);
    color: var(--eco-text-muted);
}
.eco-contact__value {
    font-size: 22px;
    font-weight: 800;
    color: var(--eco-text);
}
.eco-contact__value--sm { font-size: 18px; font-weight: 700; }
.eco-contact a.eco-contact__value:hover { color: var(--eco-green); }
.eco-contact__note {
    font-size: 14px;
    color: var(--eco-text-muted);
}
.eco-contact__chips {
    display: flex;
    gap: 10px;
    margin-top: 6px;
    flex-wrap: wrap;
}
.eco-contact__chips a {
    background: var(--eco-bg);
    color: var(--eco-text);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: var(--eco-r-sm);
    border: 1px solid var(--eco-border-soft);
    transition: border-color var(--eco-t-fast);
}
.eco-contact__chips a:hover { border-color: var(--eco-green); }

/* End */


/* Start:/bitrix/templates/ecostroy/css/08-sections.css?179181446557219*/
/* ==========================================================================
   Экострой — стили блоков, добавленных после первой итерации
   Продукция, галерея, обновлённый CTA с фото консультанта, шапка внутренних
   страниц. Держим отдельно от 06-blocks.css, чтобы файлы не разрастались.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ПРОДУКЦИЯ (разделы каталога)
   -------------------------------------------------------------------------- */
/* Разделов каталога сейчас четыре. При auto-fit они вставали как 3 + 1,
   и последняя карточка «повисала» в одиночестве. Фиксируем 4 в ряд на
   широком экране и 2 в ряд на среднем — ряды всегда заполнены. */
.eco-products-grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1180px) {
    .eco-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .eco-products-grid { grid-template-columns: 1fr; }
}

.eco-product { padding: 0; }

/* Вся карточка — одна ссылка, поэтому внутренние элементы делаем блочными */
.eco-product__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}
.eco-product__link:hover { color: inherit; }

.eco-product__media {
    display: block;
    height: 240px;
    /* Фото товара показываем целиком, а не обрезаем по краям */
    background: white;
}
.eco-product__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
    transition: transform .5s var(--eco-ease);
}
.eco-card--hover:hover .eco-product__media img { transform: scale(1.05); }

/* Внутри ссылки нужен явный flex-контекст, иначе «Смотреть модели»
   не прижимается к низу и карточки в ряду разной высоты */
.eco-product .eco-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.eco-product .eco-card__title { display: block; }

/* Описание есть не у всех разделов — растягиваем его, чтобы низ карточек
   выравнивался независимо от наличия текста */
.eco-product .eco-card__text {
    display: block;
    flex: 1;
    margin-bottom: 0;
}

.eco-product__more {
    display: block;
    margin-top: auto;
    padding-top: 14px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--eco-green);
}
.eco-card--hover:hover .eco-product__more { color: var(--eco-green-dark); }

/* --------------------------------------------------------------------------
   ГАЛЕРЕЯ
   -------------------------------------------------------------------------- */
/* Лента: 4 фото в поле зрения, остальные прокручиваются вбок.
   Ширина карточки считается из ширины ленты минус промежутки. */
.eco-gallery {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    /* место под тень карточки при наведении, иначе она обрезается */
    padding: 6px 0 14px;
}
.eco-gallery.is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    scroll-behavior: auto;
}
.eco-gallery::-webkit-scrollbar { height: 8px; }
.eco-gallery::-webkit-scrollbar-track { background: transparent; }
.eco-gallery::-webkit-scrollbar-thumb {
    background: var(--eco-border-strong);
    border-radius: var(--eco-r-pill);
}

.eco-gallery__item {
    position: relative;
    flex: 0 0 calc((100% - 48px) / 4);
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
    border: none;
    padding: 0;
    margin: 0;
    border-radius: var(--eco-r-md);
    overflow: hidden;
    background: var(--eco-bg-image);
    cursor: pointer;
    transition: transform var(--eco-t-base), box-shadow var(--eco-t-base);
}
.eco-gallery__item:hover {
    transform: translateY(-4px);
    box-shadow: var(--eco-shadow-card);
}

.eco-gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--eco-ease);
}
.eco-gallery__item:hover img { transform: scale(1.07); }

/* Иконка «увеличить» проявляется по наведению */
.eco-gallery__zoom {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(30, 36, 32, .65);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--eco-t-base), transform var(--eco-t-base);
    pointer-events: none;
}
.eco-gallery__item:hover .eco-gallery__zoom,
.eco-gallery__item:focus-visible .eco-gallery__zoom {
    opacity: 1;
    transform: none;
}


/* --------------------------------------------------------------------------
   CTA С ФОТО КОНСУЛЬТАНТА
   -------------------------------------------------------------------------- */

/* Текст слева, фото справа. Кнопки теперь внутри текстовой колонки. */
.eco-cta {
    align-items: stretch;
    gap: 20px;
    /* нижний отступ убираем: фото «стоит» на нижней кромке блока */
    padding-bottom: 0;
    /* снимаем обрезку — иначе фигура, выходящая вверх, срезалась бы по кромке */
    overflow: visible;
}
/* Декоративное свечение само по себе должно оставаться внутри скруглённого
   угла, поэтому обрезаем именно его, а не весь блок. */
.eco-cta::after {
    clip-path: inset(0 round var(--eco-r-xl));
}

/* Секции с CTA нужен запас сверху: фигура поднимается над блоком.
   В варианте с формой фигуры нет — запас убираем. */
.eco-cta-section { padding-top: 100px; }
.eco-cta-section:has(.eco-cta--form) { padding-top: 0; }

/* --- Пятно света за курсором ---
   Зелёное свечение, повторяющее фирменный цвет. Лежит под содержимым и
   не ловит клики, поэтому кнопки и ссылки работают как обычно.
   Скругление повторяем через clip-path: у самого блока overflow снят,
   иначе срезалась бы фигура консультанта. */
.eco-cta__spot {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    clip-path: inset(0 round var(--eco-r-xl));
    /* Пока скрипт не подставил координаты, пятна не видно */
    opacity: 0;
    transition: opacity .4s var(--eco-ease);
}
.eco-cta__spot::before {
    content: '';
    position: absolute;
    /* Координаты и размер задаёт скрипт: он же плавно их догоняет */
    left: var(--eco-spot-x, 50%);
    top: var(--eco-spot-y, 50%);
    width: var(--eco-spot-size, 280px);
    height: var(--eco-spot-size, 280px);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(126, 176, 106, .40) 0%,
        rgba(63, 107, 74, .20) 45%,
        transparent 70%);
    transition: width .3s var(--eco-ease), height .3s var(--eco-ease);
}
.eco-cta.is-spot-on .eco-cta__spot { opacity: 1; }

/* Без мыши и при отключённой анимации эффект не нужен вовсе */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
    .eco-cta__spot { display: none; }
}

/* --- Вариант CTA с формой вместо фото --- */
.eco-cta--form {
    /* фигуры нет, значит и запас под неё не нужен */
    padding-bottom: clamp(36px, 5vw, 60px);
    align-items: center;
}
.eco-cta--form .eco-cta__text { padding-bottom: 0; }

.eco-cta__form {
    flex: 0 1 420px;
    background: var(--eco-bg);
    border-radius: var(--eco-r-lg);
    padding: clamp(22px, 2.6vw, 30px);
    position: relative;
    z-index: 1;
}
/* Согласие на тёмном фоне карточки остаётся на светлом — цвет не меняем,
   но ссылку делаем заметнее */
.eco-cta__form .eco-consent { margin-top: 12px; }

@media (max-width: 900px) {
    .eco-cta__form { flex: 1 1 100%; }
}
.eco-cta__text {
    flex: 1 1 460px;
    padding-bottom: clamp(36px, 5vw, 60px);
    align-self: center;
}
.eco-cta__text .eco-cta__actions { margin-top: 28px; }

/* Фигура консультанта намеренно выходит за верхнюю кромку тёмного блока —
   так CTA выглядит объёмнее. Блок при этом не обрезает её (overflow снят). */
.eco-cta__media {
    flex: 0 1 530px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
    margin-top: -100px;
    margin-bottom: 0;
}
.eco-cta__media img {
    width: 100%;
    max-width: 530px;
    height: auto;
    object-fit: contain;
    object-position: bottom;
}

/* --------------------------------------------------------------------------
   ДОРОЖНАЯ КАРТА «КАК ПРОХОДИТ МОНТАЖ»
   Слева список этапов, справа подробности выбранного.
   -------------------------------------------------------------------------- */
.eco-roadmap {
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: 28px;
    /* Правая панель по содержимому, а не во всю высоту списка: со
       stretch под формой оставалась большая пустая область. */
    align-items: start;
}

/* --- Список этапов --- */
.eco-roadmap__list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* место под линию прогресса слева */
    padding-left: 22px;
}

/* Направляющая линия и её заполненная часть */
.eco-roadmap__rail {
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: var(--eco-r-pill);
    background: var(--eco-border);
    overflow: hidden;
}
.eco-roadmap__rail-fill {
    display: block;
    width: 100%;
    height: 0;
    border-radius: var(--eco-r-pill);
    background: linear-gradient(180deg, var(--eco-green), var(--eco-lime));
    transition: height .4s var(--eco-ease);
}

.eco-roadmap__tab {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-radius: var(--eco-r-sm);
    padding: 12px 14px;
    cursor: pointer;
    font-family: var(--eco-font);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--eco-text-muted);
    transition: background var(--eco-t-fast), color var(--eco-t-fast);
}
.eco-roadmap__tab:hover {
    background: var(--eco-bg-alt);
    color: var(--eco-text);
}
.eco-roadmap__tab.is-active {
    background: var(--eco-green-light);
    color: var(--eco-text);
    font-weight: 700;
}

.eco-roadmap__num {
    flex: 0 0 auto;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: var(--eco-bg-alt);
    color: var(--eco-text-muted);
    font-size: 18px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--eco-t-fast), color var(--eco-t-fast);
}
.eco-roadmap__tab.is-active .eco-roadmap__num,
.eco-roadmap__tab.is-done .eco-roadmap__num {
    background: var(--eco-green);
    color: #fff;
}

/* --- Панель с подробностями --- */
.eco-roadmap__panels {
    position: relative;
    background: var(--eco-bg-alt);
    border-radius: var(--eco-r-lg);
    padding: clamp(8px, 3vw, 34px);
    display: flex;
    flex-direction: column;
}

.eco-roadmap__panel[hidden] { display: none; }
/* Слева иконка с номером шага, справа описание. Небольшой минимум по высоте,
   чтобы блок не «прыгал» при переключении: у шагов текст разной длины. */
.eco-roadmap__panel {
    animation: ecoFadeUp .35s var(--eco-ease) both;
    min-height: 150px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 24px;
    align-items: center;
}

/* --- Левая колонка: иконка и под ней номер шага --- */
.eco-roadmap__step-no {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding-right: 26px;
    border-right: 1px solid var(--eco-border);
    align-self: stretch;
}
/* «Шаг 7 из 8» — одной строкой, поэтому счётчик не переносится
   и не растягивает левую колонку по высоте */
.eco-roadmap__step-counter {
    display: none;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
}
.eco-roadmap__step-of {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--eco-text-faint);
}
.eco-roadmap__step-total {
    font-size: 12px;
    color: var(--eco-text-faint);
}

/* Иконка — плашка над номером. Зелёная заливка вместо белой с тенью:
   в связке с подписью так читается как единый значок этапа. */
.eco-roadmap__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex: 0 0 auto;
    margin-bottom: 10px;
    border-radius: 18px;
    background: #f6f7f4;
    color: var(--eco-green);
    svg{
        width: 60px;
        height: 60px;
    }
}

/* --- Правая колонка: описание этапа --- */
.eco-roadmap__body {
    display: flex;
    align-items: center;
    min-height: 100%;
}
.eco-roadmap__copy { min-width: 0; }

.eco-roadmap__badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--eco-green);
    background: var(--eco-green-light);
    padding: 5px 12px;
    border-radius: var(--eco-r-pill);
    margin-bottom: 10px;
}
.eco-roadmap__title {
    font-size: clamp(20px, 2.2vw, 27px);
    margin-bottom: 10px;
    font-family: var(--eco-font-head);
}
.eco-roadmap__text {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--eco-text-muted);
    max-width: 560px;
}

/* Форма заявки под описанием этапа */
.eco-roadmap__form {
    margin-top: 60px;
    padding-top: 18px;
    border-top: 1px solid var(--eco-border-soft);
}
@media (max-width: 620px) {
    .eco-roadmap__form {
        margin-top: 20px;
    }
}
.eco-roadmap__form-head {
    margin-bottom: 12px;
}
.eco-roadmap__form-head strong {
    display: block;
    color: var(--eco-green);
    margin-bottom: 4px;
    font-family: var(--eco-font-head);
    font-size: 20px;
}
.eco-roadmap__form-head span {
    font-size: var(--eco-small);
    color: var(--eco-text-muted);
    line-height: 1.5;
}
/* Имя, телефон и кнопка в одну строку — форма занимает одну строку
   вместо трёх, правая колонка получается заметно ниже. */
.eco-roadmap__form .eco-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 10px;
    align-items: start;
}
/* Ловушку для ботов не трогаем: она скрыта своими стилями и должна
   остаться в разметке «обычным» полем. */
.eco-roadmap__form .eco-form__message,
.eco-roadmap__form .eco-field--consent,
.eco-roadmap__form .eco-hp { grid-column: 1 / -1; }
/* После отправки в форме остаётся только сообщение — раскладка в одну
   колонку, иначе оно осталось бы в узкой ячейке грида. */
.eco-roadmap__form .eco-form.is-sent { grid-template-columns: 1fr; }
/* Кнопка встаёт третьей колонкой в одну строку с полями. Позицию задаём
   явно: в разметке она идёт после согласия, иначе ушла бы на новую строку. */
.eco-roadmap__form .eco-btn--block {
    grid-column: 3;
    grid-row: 1;
    width: auto;
    padding-left: 26px;
    padding-right: 26px;
}
/* Согласие — во вторую строку, под полями */
.eco-roadmap__form .eco-field--consent { grid-row: 2; }

/* --------------------------------------------------------------------------
   ЗАГОЛОВКИ В ОДНУ СТРОКУ (только на широких экранах)
   На узких переносы возвращаются — иначе текст пришлось бы уменьшать.
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
    .eco-title-nowrap { white-space: nowrap; }
}

/* Секция квиза: заголовок в одну строку, поэтому контейнер шире */
.eco-quiz-section .eco-section-head--center { max-width: none; }

/* --------------------------------------------------------------------------
   ФОН БЛОКА КВИЗА
   Фотография травы + плотная зелёная вуаль поверх: сам снимок пёстрый,
   и без вуали белая карточка квиза и заголовок на нём терялись.
   -------------------------------------------------------------------------- */
.eco-quiz-section {
    position: relative;
    isolation: isolate;
    background-image: url('/upload/img/fresh-grass.jpg');
    background-size: cover;
    background-position: center;
    /* fixed даёт лёгкий параллакс на десктопе; на мобильных отключаем ниже —
       iOS его не поддерживает и растягивает картинку */
    background-attachment: fixed;
}
.eco-quiz-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, #637668bd 0%, rgb(35 58 40 / 0%) 55%, rgb(56 78 61 / 0%) 100%);
}
/* Заголовок и лид на тёмном фоне */
.eco-quiz-section .eco-section-head h2 { color: #fff; }
.eco-quiz-section .eco-section-head .eco-lead { color: rgba(255, 255, 255, .82); }

/* Тач-устройства (в первую очередь iOS) не поддерживают fixed-фон:
   картинка растягивается на всю страницу и «дёргается» при прокрутке.
   Проверяем не ширину, а тип указателя — планшет может быть и широким. */
@media (hover: none), (pointer: coarse), (max-width: 900px) {
    .eco-quiz-section { background-attachment: scroll; }
}

/* --------------------------------------------------------------------------
   СЕРТИФИКАТЫ — ЛЕНТА С ПРОКРУТКОЙ
   Раньше здесь была сетка на 4 колонки под четыре документа. Сканов стало
   больше десятка, поэтому блок переведён на ленту (.eco-certs в 06-blocks.css),
   а на узких экранах карточек в поле зрения меньше.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .eco-cert { flex-basis: calc((100% - 16px) / 2); }
}

@media (max-width: 560px) {
    .eco-certs { gap: 12px; }
    .eco-cert { flex-basis: 78%; padding: 12px; }
}

/* --------------------------------------------------------------------------
   ОТЗЫВЫ
   -------------------------------------------------------------------------- */
.eco-reviews-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 1180px) {
    .eco-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .eco-reviews-grid { grid-template-columns: 1fr; }
}

/* Отзывов теперь четыре в ряд — уменьшаем внутренние отступы карточки,
   иначе текст в узкой колонке «задыхается» */
.eco-reviews-grid .eco-review { padding: 22px 20px; }
.eco-reviews-grid .eco-review__text { font-size: 14.5px; line-height: 1.55; }
.eco-reviews-grid .eco-review__author { margin-top: 18px; gap: 12px; }
.eco-reviews-grid .eco-review__avatar { width: 46px; height: 46px; }
.eco-reviews-grid .eco-review__stars { margin-bottom: 12px; font-size: 16px; }

/* --- Раскладка: виджет Яндекс.Карт слева, наши отзывы справа ---------------

   Ширину левой колонке задаёт сам виджет (560px по умолчанию, но не шире
   доступного места). Правая берёт остаток и раскладывает карточки
   в два столбца — четыре отзыва встают ровным блоком 2×2 вровень
   с виджетом. */
.eco-reviews-layout {
    display: grid;
    grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
    gap: 24px;
    /* stretch (по умолчанию): виджет тянется на всю высоту строки,
       то есть вровень с сеткой отзывов справа */
    align-items: stretch;
}

/* Внутри раскладки колонок всегда две: правило на 4 колонки выше
   рассчитано на полную ширину контейнера, здесь места меньше */
.eco-reviews-layout .eco-reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Колонка виджета — цепочка растяжки от строки грида до самого iframe:
   каждое звено обязано быть 100%, иначе высота «схлопнется» по содержимому */
.eco-reviews-widget { display: flex; }

/* Виджет — чужая страница в iframe: своей высоты она не сообщает,
   поэтому высоту ему задаёт соседняя колонка. min-height страхует
   случай, когда отзывов мало и сетка справа окажется низкой. */
.eco-reviews-widget__frame {
    position: relative;
    flex: 1;
    min-height: 600px;
    overflow: hidden;
    border-radius: var(--eco-r-md);
}
.eco-reviews-widget__frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-md);
    box-sizing: border-box;
}

/* Ссылка на карточку организации: лежит поверх нижней кромки виджета */
.eco-reviews-widget__link {
    position: absolute;
    left: 0;
    bottom: 8px;
    display: block;
    width: 100%;
    max-height: 14px;
    padding: 0 16px;
    box-sizing: border-box;
    font-size: 10px;
    line-height: 14px;
    color: var(--eco-text-faint);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.eco-reviews-widget__link:hover { color: var(--eco-green); }

/* Места под две колонки карточек уже нет — отзывы уходят в один столбец
   рядом с виджетом, он остаётся читаемым.

   Колонка отзывов при этом становится длинной, и растянутый вровень с ней
   виджет получился бы неоправданно высоким. Прижимаем его к верху и
   ограничиваем: тянется по соседу, но не выше разумного. */
@media (max-width: 1180px) {
    .eco-reviews-layout { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
    .eco-reviews-layout .eco-reviews-grid { grid-template-columns: minmax(0, 1fr); }

    /* .eco-reviews-widget {
        position: sticky;
        top: calc(var(--eco-header-h, 72px) + 16px);
        align-self: start;
        height: 600px;
    } */
}

/* Планшет и телефон: виджет над отзывами, во всю ширину. Тянуться уже
   не по чему — колонка одна, поэтому возвращаем ему фиксированную высоту
   и снижаем её: на узком экране 600px занимают почти весь вид. */
@media (max-width: 900px) {
    .eco-reviews-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .eco-reviews-layout .eco-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eco-reviews-widget__frame { min-height: 0; height: 480px; }
}

@media (max-width: 620px) {
    .eco-reviews-layout .eco-reviews-grid { grid-template-columns: minmax(0, 1fr); }
    .eco-reviews-widget__frame { min-height: 0; height: 420px; }
}

/* --- Вариант для страницы /company/reviews/ --------------------------------

   Справа не плитка, а список отзывов во всю ширину плюс форма. Список
   длинный, поэтому виджет не растягиваем по нему: держим фиксированную
   высоту и прилипаем — он остаётся на виду, пока читают отзывы. */
.eco-reviews-layout--page {
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    align-items: start;
}

.eco-reviews-layout--page .eco-reviews-widget {
    position: sticky;
    top: calc(var(--eco-header-h, 72px) + 16px);
    align-self: start;
    height: 640px;
}

.eco-reviews-layout__body { min-width: 0; }

@media (max-width: 1100px) {
    /* Виджет над отзывами: рядом с ним колонка становится слишком узкой
       для широких карточек с цитатой и фото автора */
    .eco-reviews-layout--page { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    .eco-reviews-layout--page .eco-reviews-widget {
        position: static;
        height: 520px;
    }
}

@media (max-width: 620px) {
    .eco-reviews-layout--page .eco-reviews-widget { height: 440px; }
}

/* Призыв оставить отзыв на Яндекс Картах: текст и кнопка над виджетом,
   в его же колонке. Прижаты влево. */
.eco-reviews-widget__cta {
    margin-bottom: 20px;
    text-align: left;
}
.eco-reviews-widget__cta .eco-btn { margin-top: 16px; }

/* Колонка теперь из двух частей, поэтому складываем их столбцом, а высоту
   отдаём содержимому. Прилипшая колонка не должна быть выше экрана — иначе
   низ виджета не увидеть, — так что ужимается именно виджет. */
.eco-reviews-layout--page .eco-reviews-widget {
    flex-direction: column;
    height: auto;
    max-height: calc(100vh - var(--eco-header-h, 72px) - 32px);
}
.eco-reviews-layout--page .eco-reviews-widget__frame {
    flex: 0 1 640px;
    min-height: 360px;
}
/* Высота рамки приходит из flex, а не задана числом: процентная высота
   iframe от такой не считается, поэтому растягиваем его по краям рамки */
.eco-reviews-layout--page .eco-reviews-widget__frame iframe {
    position: absolute;
    top: 0;
    left: 0;
}

@media (max-width: 1100px) {
    /* Колонка одна и не прилипает — виджету возвращаем фиксированную высоту */
    .eco-reviews-layout--page .eco-reviews-widget { height: auto; max-height: none; }
    .eco-reviews-layout--page .eco-reviews-widget__frame {
        flex: none;
        height: 520px;
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .eco-reviews-layout--page .eco-reviews-widget { height: auto; }
    .eco-reviews-layout--page .eco-reviews-widget__frame { height: 440px; }
}


/* --------------------------------------------------------------------------
   ШАПКА ВНУТРЕННЕЙ СТРАНИЦЫ
   -------------------------------------------------------------------------- */
.eco-page-head {
    background: var(--eco-bg-alt);
    padding: clamp(28px, 4vw, 48px) 0 clamp(32px, 4vw, 52px);
    border-bottom: 1px solid var(--eco-border);
    /* Отступ до следующего блока, чтобы шапка страницы не липла к контенту */
    margin-bottom: clamp(32px, 4vw, 56px);
}
.eco-page-head h1 {
    font-size: var(--eco-h2);
    margin: 0;
}
/* Между крошками и заголовком */
.eco-page-head .eco-crumbs { margin-bottom: 14px; }

/* Подзаголовок под H1 — короткое описание раздела */
.eco-page-head__lead {
    font-size: var(--eco-lead);
    line-height: 1.55;
    color: var(--eco-text-muted);
    margin-top: 14px;
    /* max-width: 760px; */
}

/* --------------------------------------------------------------------------
   СТРАНИЦА «О КОМПАНИИ»
   -------------------------------------------------------------------------- */
.eco-about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
}
.eco-about-intro h2 {
    font-size: var(--eco-h2);
    margin-bottom: 18px;
}
.eco-about-intro__text .eco-lead + .eco-lead { margin-top: 14px; }

.eco-about-intro__actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.eco-about-intro__media {
    border-radius: var(--eco-r-lg);
    overflow: hidden;
    box-shadow: var(--eco-shadow-lg);
}
.eco-about-intro__media img {
    width: 100%;
    height: 100%;
    max-height: 535px;
    object-fit: cover;
}

/* Цифры компании */
.eco-about-facts { grid-template-columns: repeat(4, 1fr); }

.eco-fact {
    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    padding: 28px 26px;
    text-align: center;
}
.eco-fact__value {
    font-size: clamp(30px, 3.4vw, 42px);
    font-weight: 800;
    color: var(--eco-green);
    line-height: 1;
    margin-bottom: 10px;
}
.eco-fact__label {
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--eco-text-muted);
}

/* --------------------------------------------------------------------------
   СТРАНИЦА «КОНТАКТЫ»
   -------------------------------------------------------------------------- */
.eco-contacts-layout {
    display: grid;
    grid-template-columns: 1fr minmax(320px, 460px);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
}
.eco-contacts-info h2 {
    font-size: var(--eco-h2);
    margin-bottom: 16px;
}

.eco-contacts-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 32px;
}
.eco-contact-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

/* Карточка с формой заявки */
.eco-contacts-form {
    background: var(--eco-bg-alt);
    border-radius: var(--eco-r-lg);
    padding: clamp(24px, 3vw, 36px);
}
.eco-contacts-form__title {
    font-size: 22px;
    margin-bottom: 8px;
}
.eco-contacts-form__note {
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--eco-text-muted);
    margin-bottom: 22px;
}
/* Внутри серой карточки поля должны оставаться белыми */
.eco-contacts-form .eco-input,
.eco-contacts-form .eco-textarea { background: var(--eco-bg); }

/* --- Карта офисов --- */
.eco-map {
    position: relative;
    border-radius: var(--eco-r-lg);
    overflow: hidden;
    background: var(--eco-bg-alt);
    border: 1px solid var(--eco-border);
    min-height: 420px;
}
/* Карта, показанная сразу (без заглушки): высоту задаёт контейнер */
.eco-map--ready { min-height: 0; }

.eco-map iframe {
    display: block;
    width: 100%;
    height: 460px;
    border: 0;
}

/* Заглушка до загрузки карты */
.eco-map__stub {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 30px 20px;
}
.eco-map__stub-title {
    font-size: 20px;
    font-weight: 800;
}
.eco-map__stub-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--eco-text-muted);
}

@media (max-width: 760px) {
    .eco-map { min-height: 340px; }
    .eco-map iframe { height: 360px; }
}

@media (max-width: 1000px) {
    .eco-about-intro,
    .eco-contacts-layout { grid-template-columns: 1fr; }

    /* Фото на странице «О компании» уводим под текст */
    .eco-about-intro__media { order: -1; }
    .eco-about-intro__media img { max-height: 300px; }

    .eco-about-facts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .eco-about-facts { grid-template-columns: 1fr; }
    .eco-about-intro__actions .eco-btn { width: 100%; }
}

/* Область контента внутренних страниц: типографика для текста из админки */
.eco-content { padding: var(--eco-section-y) 0; }
.eco-content h2 { font-size: var(--eco-h3); margin: 32px 0 14px; }
.eco-content h3 { font-size: 20px; margin: 26px 0 12px; }
.eco-content p { margin: 0 0 14px; line-height: 1.6; }
.eco-content ul,
.eco-content ol { margin: 0 0 16px; padding-left: 22px; line-height: 1.6; }
.eco-content li { margin-bottom: 8px; }
.eco-content img { border-radius: var(--eco-r-md); height: auto; }
.eco-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 18px;
}
.eco-content th,
.eco-content td {
    border: 1px solid var(--eco-border);
    padding: 10px 14px;
    text-align: left;
}
.eco-content th { background: var(--eco-bg-alt); font-weight: 700; }

/* Широкие таблицы прокручиваем, чтобы страница не разъезжалась вбок */
.eco-content__scroll { overflow-x: auto; }

/* --------------------------------------------------------------------------
   АДАПТИВ ДЛЯ ЭТИХ БЛОКОВ
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Дорожная карта: список сверху, подробности снизу */
    .eco-roadmap { grid-template-columns: 1fr; gap: 20px; }

    /* Ленту «таблеток» убираем совсем: она требовала горизонтального
       скролла, а он на телефоне неудобен и незаметен. Вместо неё —
       все этапы подряд одним списком (панели раскрывает скрипт). */
    .eco-roadmap__list { display: none; }
    .eco-roadmap__rail { display: none; }

    .eco-roadmap__panels {
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    /* Каждый этап — самостоятельная карточка.
       Анимацию появления снимаем: она рассчитана на показ по одной панели,
       а когда видны все восемь, блок бы дёргался целиком.
       min-height тоже сбрасываем — иначе восемь карточек по 150px
       растянули бы страницу впустую. */
    .eco-roadmap__panel {
        grid-template-columns: 1fr;
        gap: 14px;
        align-items: start;
        animation: none;
        min-height: 0;
        background: var(--eco-bg-alt);
        border-radius: var(--eco-r-lg);
        /* По бокам заметно меньше: к отступу карточки прибавляется
           отступ контейнера, и вместе они съедали ширину у текста */
        padding: 16px 12px;
    }
    /* Иконка и подпись выстраиваются в строку: колонкой они съедают
       слишком много высоты на узком экране */
    .eco-roadmap__step-no {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        padding: 0 0 12px;
        border-right: none;
        border-bottom: 1px solid var(--eco-border);
    }
    .eco-roadmap__icon {
        width: 44px;
        height: 44px;
        margin-bottom: 0;
        border-radius: 14px;
    }
    .eco-roadmap__icon svg { width: 22px; height: 22px; }

    .eco-roadmap__body { align-items: flex-start; min-height: 0; }

    /* Форма этапов: на узком экране всё в одну колонку. Явные grid-column
       и grid-row из десктопных правил обязательно сбрасываем — иначе поля
       остаются в трёх колонках и телефон сжимается до нечитаемого. */
    .eco-roadmap__form .eco-form { grid-template-columns: 1fr; }
    .eco-roadmap__form .eco-btn--block,
    .eco-roadmap__form .eco-field--consent {
        grid-column: 1;
        grid-row: auto;
    }
    .eco-roadmap__form .eco-btn--block { width: 100%; }

    /* На планшете фото консультанта уводим вниз, текст на всю ширину */
    .eco-cta { padding-bottom: 0; }
    .eco-cta__text {
        flex: 1 1 100%;
        padding-bottom: 24px;
    }
    /* В колонку фигура уже не выходит за верхнюю кромку: там текст,
       на который она бы наехала. Отрицательный отступ снимаем. */
    .eco-cta__media {
        flex: 1 1 100%;
        justify-content: center;
        max-width: 380px;
        margin: 0 auto;
    }
    .eco-cta__media img { max-width: 380px; }
}

@media (max-width: 1100px) {
    /* Три фото в поле зрения */
    .eco-gallery__item { flex: 0 0 calc((100% - 32px) / 3); }
}

@media (max-width: 760px) {
    /* Два фото; стрелки прячем — листают пальцем */
    .eco-gallery { gap: 12px; }
    .eco-gallery__item { flex: 0 0 calc((100% - 12px) / 2); }
    .eco-cases-nav { display: none; }

    .eco-product__media { height: 200px; }

    /* Иконка «увеличить» на тач-устройствах видна всегда — наведения нет */
    .eco-gallery__zoom { opacity: 1; transform: none; }

    .eco-cta__actions .eco-btn { width: 100%; }
    .eco-cta__media { max-width: 300px; }
    .eco-cta__media img { max-width: 300px; }

    /* На телефоне фигура консультанта за кромку блока не выходит, значит и
       снимать обрезку незачем. С overflow:visible декоративное свечение
       (::after стоит на right:-60px) вылезало за экран и растягивало
       документ на 44px — вместе с ним «уезжали» все фиксированные блоки,
       включая панель мобильного меню. */
    .eco-cta { overflow: hidden; }
}

@media (max-width: 480px) {
    /* Почти во всю ширину — на маленьком экране мелкие плитки не рассмотреть */
    .eco-gallery__item { flex: 0 0 76%; }
}

/* --------------------------------------------------------------------------
   БЛОК «КОНТАКТЫ» НА ГЛАВНОЙ: слева способы связи, справа карта
   -------------------------------------------------------------------------- */
.eco-contacts-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: stretch;
}
/* Все контакты одной карточкой: строки внутри, а не отдельные плитки */
.eco-contacts-split__info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    background: var(--eco-bg-alt);
    border-radius: var(--eco-r-lg);
    padding: clamp(24px, 3vw, 36px);
}
.eco-contacts-split__info .eco-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.eco-contacts-split__info .eco-contact-row + .eco-contact-row {
    padding-top: 22px;
    border-top: 1px solid var(--eco-border);
}

.eco-contacts-split__map { display: flex; }
/* Карта во всю высоту карточки контактов: обе колонки stretch,
   поэтому высоту задаёт та, что выше. */
.eco-contacts-split__map .eco-map {
    flex: 1;
    min-height: 0;
    border: none;
}
.eco-contacts-split__map .eco-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    border: 0;
}

/* Планшет: карта уходит под контакты */
@media (max-width: 1000px) {
    .eco-contacts-split { grid-template-columns: 1fr; }
    .eco-contacts-split__map .eco-map iframe { min-height: 340px; }
}

/* ==========================================================================
   СТРАНИЦА ОТЗЫВОВ (/company/reviews/)
   Отличается от блока на главной: отзывы идут в один столбец во всю
   ширину, автор и оценка вынесены в левую колонку.
   ========================================================================== */

.eco-reviews-list {
    display: grid;
    gap: 16px;
}

.eco-review-wide {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 26px;
    align-items: start;

    margin: 0;
    padding: 28px 30px;
    background: var(--eco-bg-alt);
    border-radius: var(--eco-r-lg);
    transition: background var(--eco-t-base), box-shadow var(--eco-t-base);
}
.eco-review-wide:hover {
    background: var(--eco-green-light);
    box-shadow: var(--eco-shadow-sm);
}

/* --- Левая колонка: фото, имя, оценка --- */
.eco-review-wide__side {
    display: flex;
    align-items: center;
    gap: 14px;
}

.eco-review-wide__avatar {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--eco-bg-image);
}
.eco-review-wide__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.eco-review-wide__author { min-width: 0; }

.eco-review-wide__name {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--eco-text);
}
.eco-review-wide__meta {
    margin-top: 2px;
    font-size: 13px;
    color: var(--eco-text-muted);
}
.eco-review-wide__stars {
    margin-top: 5px;
    font-size: 13px;
    letter-spacing: 1px;
    color: var(--eco-star);
}

/* --- Правая колонка: сам отзыв --- */
.eco-review-wide__body { position: relative; }

/* Декоративная кавычка за текстом */
.eco-review-wide__quote {
    position: absolute;
    top: -26px;
    left: -8px;
    font-size: 76px;
    line-height: 1;
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--eco-green);
    opacity: .14;
    pointer-events: none;
}

.eco-review-wide__text {
    position: relative;
    margin: 0;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--eco-text-soft);
}

@media (max-width: 760px) {
    .eco-review-wide {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 22px 20px;
    }
    /* Кавычка на телефоне налезала на первую строку */
    .eco-review-wide__quote { display: none; }
}

/* --- Аватар-заглушка -------------------------------------------------------
   Отзыв с сайта приходит без фото автора: показываем первую букву имени
   вместо пустого серого круга. */
.eco-review__initial {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--eco-green-light);
    color: var(--eco-green-dark);
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
}

/* --- Фотографии, приложенные к отзыву -------------------------------------
   Открываются в общем лайтбоксе — том же, что у галереи и сертификатов. */
.eco-review-wide__photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.eco-review-photo {
    /* Кнопка, а не ссылка: лайтбокс открывается скриптом, отдельной
       страницы у снимка нет — ссылке было бы некуда вести */
    padding: 0;
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-sm);
    background: var(--eco-bg-image);
    width: 108px;
    height: 82px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color var(--eco-t-fast), transform var(--eco-t-fast);
}
.eco-review-photo:hover {
    border-color: var(--eco-green);
    transform: translateY(-2px);
}
.eco-review-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Форма отзыва ----------------------------------------------------------
   Стоит под списком отзывов, в правой колонке страницы /company/reviews/. */
.eco-review-form-card {
    margin-top: 32px;
    padding: 28px 30px;
    border: 1px dashed var(--eco-border-strong);
    border-radius: var(--eco-r-lg);
}

.eco-review-form__title {
    margin: 0 0 6px;
    font-size: var(--eco-h3);
    line-height: 1.25;
}

.eco-review-form__lead {
    margin: 0 0 22px;
    max-width: 560px;
    font-size: var(--eco-body);
    line-height: 1.6;
    color: var(--eco-text-muted);
}

/* Имя, город, телефон и оценка — по два в ряд: форма не растягивается
   в длинный столбец, а поля остаются достаточно широкими */
.eco-review-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 16px;
}

.eco-field__hint {
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--eco-text-faint);
}

/* Оценка выравнивается по нижнему краю соседнего поля с телефоном */
.eco-field--rating {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}

/* --- Звёзды ----------------------------------------------------------------
   Radio-кнопки: выбор работает и без JS. В разметке звёзды идут от 5 к 1,
   поэтому «горит» наведённая и все, что идут после неё в потоке (~), —
   визуально это звёзды слева от неё. */
.eco-rating {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.eco-rating__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.eco-rating__star {
    cursor: pointer;
    font-size: 0;
    line-height: 1;
    color: var(--eco-border-strong);
    transition: color var(--eco-t-fast), transform var(--eco-t-fast);
}
.eco-rating__star::before {
    content: '★';
    font-size: 30px;
    line-height: 1;
}
.eco-rating__star:hover { transform: scale(1.12); }

/* Отмеченная звезда и все левее неё */
.eco-rating__input:checked ~ .eco-rating__star,
.eco-rating__star:hover,
.eco-rating__star:hover ~ .eco-rating__star {
    color: #E8B430;
}

/* Клавиатурная навигация: видимая рамка на выбранной звезде */
.eco-rating__input:focus-visible + .eco-rating__star {
    outline: 2px solid var(--eco-green);
    outline-offset: 3px;
    border-radius: 4px;
}

/* --- Прикрепление фотографий ---------------------------------------------- */
.eco-filedrop {
    display: block;
    position: relative;
    padding: 18px 20px;
    border: 2px dashed var(--eco-border-strong);
    border-radius: var(--eco-r-md);
    background: var(--eco-bg-alt);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--eco-t-fast), background var(--eco-t-fast);
}
.eco-filedrop:hover {
    border-color: var(--eco-green);
    background: var(--eco-green-light);
}

/* Штатное поле прячем: его вид не настраивается, роль берёт на себя рамка */
.eco-filedrop__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.eco-filedrop__label {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--eco-green-dark);
}

.eco-filedrop__hint {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--eco-text-faint);
}

/* Список выбранных файлов — заполняется скриптом */
.eco-filedrop__list {
    display: grid;
    gap: 4px;
    margin-top: 10px;
}
.eco-filedrop__list:empty { display: none; }

.eco-filedrop__item {
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--eco-text-muted);
}
.eco-filedrop__item.is-bad { color: #C4443B; }

@media (max-width: 700px) {
    .eco-review-form-card { padding: 22px 20px; }
    .eco-review-form__grid { grid-template-columns: minmax(0, 1fr); }
    .eco-review-form .eco-btn { width: 100%; justify-content: center; }
    .eco-review-photo { width: 92px; height: 70px; }
}

/* ==========================================================================
   НОВОСТИ (/company/news/)
   ========================================================================== */

.eco-news-list {
    display: grid;
    gap: 16px;
}

.eco-news-card {
    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    overflow: hidden;
    transition: border-color var(--eco-t-base), box-shadow var(--eco-t-base);
}
.eco-news-card:hover {
    border-color: var(--eco-border-strong);
    box-shadow: var(--eco-shadow-sm);
}

/* Карточка строкой: фото слева, текст справа */
.eco-news-card__link {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    align-items: stretch;
}

.eco-news-card__media {
    display: block;
    background: var(--eco-bg-image);
    overflow: hidden;
}
.eco-news-card__media img {
    width: 100%;
    height: 100%;
    min-height: 150px;
    object-fit: cover;
    object-position: left;
    transition: transform var(--eco-t-base);
}
.eco-news-card:hover .eco-news-card__media img { transform: scale(1.04); }

.eco-news-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    padding: 22px 24px;
}

.eco-news-card__date {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--eco-text-faint);
}

.eco-news-card__title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    color: var(--eco-text);
}
.eco-news-card:hover .eco-news-card__title { color: var(--eco-green); }

.eco-news-card__lead {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--eco-text-muted);
}

.eco-news-card__more {
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--eco-green);
}

/* Между 1000px и 1180px рядом с колонкой каталога 420px не помещаются —
   отдаём картинке меньше, иначе текст сжимается в узкий столбец. */
@media (max-width: 1180px) {
    .eco-news-card__link { grid-template-columns: 300px minmax(0, 1fr); }
    .eco-news-card__media img { min-height: 200px; }
}

@media (max-width: 700px) {
    .eco-news-card__link { grid-template-columns: 1fr; }
    .eco-news-card__media img { min-height: 190px; }
    .eco-news-card__body { padding: 18px 18px 20px; }
}

/* --- Карточка одной новости --- */
.eco-news-detail__date {
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--eco-text-faint);
}

.eco-news-detail__media {
    margin-bottom: 22px;
    border-radius: var(--eco-r-lg);
    overflow: hidden;
    background: var(--eco-bg-image);
}
.eco-news-detail__media img {
    display: block;
    width: 100%;
    height: auto;
}

.eco-news-detail__text {
    margin-bottom: 26px;
    font-size: var(--eco-lead);
    line-height: 1.75;
    color: var(--eco-text-soft);
}
.eco-news-detail__text p { margin: 0 0 14px; }
.eco-news-detail__text p:last-child { margin-bottom: 0; }
.eco-news-detail__text img {
    max-width: 100%;
    height: auto;
    border-radius: var(--eco-r-md);
}
.eco-news-detail__text a { color: var(--eco-green); text-decoration: underline; }

/* ==========================================================================
   ЮРИДИЧЕСКИЙ ТЕКСТ (политика конфиденциальности и подобные страницы)
   Только текст: без карточек и подложек, с комфортной длиной строки.
   ========================================================================== */

.eco-legal {
    font-size: var(--eco-body);
    line-height: 1.8;
    color: var(--eco-text-soft);
}

.eco-legal p { margin: 0 0 16px; }
.eco-legal p:last-child { margin-bottom: 0; }

.eco-legal a {
    color: var(--eco-green);
    text-decoration: underline;
}

/* End */


/* Start:/bitrix/templates/ecostroy/css/breadcrumb.css?17860194372242*/
/* ==========================================================================
   Экострой — хлебные крошки
   Отдельный файл: компонент используется на всех внутренних страницах
   и правится независимо от остальной вёрстки.
   ========================================================================== */

.eco-crumbs {
    /* На узких экранах путь может не поместиться — прокручиваем его вбок,
       а не переносим и не ломаем страницу */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.eco-crumbs::-webkit-scrollbar { display: none; }

.eco-crumbs__list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--eco-text-muted);
    white-space: nowrap;
}

.eco-crumbs__item {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Разделитель — своя стрелка, а не текстовый слэш:
   не выделяется при копировании текста страницы */
.eco-crumbs__item + .eco-crumbs__item::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid var(--eco-border-strong);
    border-bottom: 1.5px solid var(--eco-border-strong);
    transform: rotate(-45deg);
}

.eco-crumbs__link {
    color: var(--eco-text-muted);
    text-decoration: none;
    transition: color var(--eco-t-fast);
}
.eco-crumbs__link:hover {
    color: var(--eco-green);
    text-decoration: underline;
}

.eco-crumbs__current {
    color: var(--eco-text);
    font-weight: 600;
}

/* Последнюю крошку на узком экране не даём растянуть строку:
   обрезаем многоточием, полный заголовок всё равно виден в H1 */
@media (max-width: 560px) {
    .eco-crumbs__current {
        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* End */


/* Start:/bitrix/templates/ecostroy/css/catalog.css?179096442069794*/
/* ==========================================================================
   Экострой — каталог: карточки товаров, пагинация, услуги
   Отдельный файл: правится независимо от остальной вёрстки.
   ========================================================================== */

/* --------------------------------------------------------------------------
   СЕТКА ТОВАРОВ
   -------------------------------------------------------------------------- */
.eco-goods-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

@media (max-width: 1180px) {
    .eco-goods-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
    .eco-goods-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .eco-goods-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* --------------------------------------------------------------------------
   КАРТОЧКА ТОВАРА
   -------------------------------------------------------------------------- */
.eco-good { padding: 0; }

.eco-good__link {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}
.eco-good__link:hover { color: inherit; }

.eco-good__media {
    display: block;
    position: relative;
    height: 300px;
    background: #fff;
    overflow: hidden;
}
/* Оборудование снимают на белом фоне — показываем целиком, без обрезки */
.eco-good__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 14px;
    transition: transform .45s var(--eco-ease);
}
.eco-card--hover:hover .eco-good__media img { transform: scale(1.06); }

.eco-good__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px 20px 20px;
}

.eco-good__title {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin-bottom: 8px;
}

.eco-good__meta {
    display: block;
    font-size: 13.5px;
    color: var(--eco-text-muted);
    margin-bottom: 14px;
}

/* Низ карточки прижимаем вниз, чтобы цены выровнялись в ряду */
.eco-good__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
}

.eco-good__price {
    font-size: 19px;
    font-weight: 800;
    color: var(--eco-text);
    white-space: nowrap;
}
.eco-good__price--ask {
    font-size: 15px;
    font-weight: 700;
    color: var(--eco-text-muted);
}

/* Старая цена над текущей — вид тот же, что у .eco-product-card__old */
.eco-good__prices {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.eco-good__old {
    font-size: 14px;
    color: var(--eco-text-faint);
    text-decoration: line-through;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .eco-good__media { height: 150px; }
    .eco-good__body { padding: 14px; }
    .eco-good__title { font-size: 14.5px; }
    .eco-good__price { font-size: 16px; }
    /* Кнопка в узкой карточке занимает всю ширину под ценой */
    .eco-good__foot .eco-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   КАРТОЧКА УСЛУГИ
   -------------------------------------------------------------------------- */
.eco-service__media {
    display: block;
    height: 220px;
    background: var(--eco-bg-alt);
}
.eco-service__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--eco-ease);
}
.eco-card--hover:hover .eco-service__media img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   СЕТКА ФОТОГАЛЕРЕИ (страница /photo/)
   В отличие от карусели на главной, здесь всё выложено плиткой.
   -------------------------------------------------------------------------- */
.eco-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
/* Плитки на странице галереи не тянутся в ленту — сбрасываем flex-размер */
.eco-photo-grid .eco-gallery__item {
    flex: none;
    width: 100%;
}

@media (max-width: 760px) {
    .eco-photo-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
}

/* --------------------------------------------------------------------------
   ПАГИНАЦИЯ
   -------------------------------------------------------------------------- */
.eco-pagination {
    display: flex;
    justify-content: center;
    margin-top: 36px;
}

/* Разметку выдаёт шаблон system.pagenavigation, поэтому опираемся
   на его классы, а не на свои */
.eco-pagination .eco-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.eco-pagination a,
.eco-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--eco-r-sm);
    border: 1px solid var(--eco-border);
    background: var(--eco-bg);
    color: var(--eco-text);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--eco-t-fast), border-color var(--eco-t-fast);
}
.eco-pagination a:hover {
    background: var(--eco-green-light);
    border-color: var(--eco-green);
    color: var(--eco-green);
}
.eco-pagination .eco-pager__current {
    background: var(--eco-green);
    border-color: var(--eco-green);
    color: #fff;
}
.eco-pagination .eco-pager__dots {
    border-color: transparent;
    background: none;
    min-width: 24px;
    padding: 0;
}

/* ==========================================================================
   КАРТОЧКА ТОВАРА (/catalog/.../<код-товара>/)
   ========================================================================== */

.eco-product-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 40px;
    align-items: start;
}

/* --- Галерея --- */
.eco-product-card__main {
    display: block;
    width: 100%;
    /* 4:3 вместо квадрата: у товаров вертикальная форма, квадрат давал
       много пустого поля по бокам */
    aspect-ratio: 4 / 3;
    padding: 24px;
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    background: #fff;
    cursor: zoom-in;
}
.eco-product-card__main img {
    width: 100%;
    height: 100%;
    /* contain: у товаров разные пропорции, обрезать их нельзя */
    object-fit: contain;
}
.eco-product-card__main--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eco-text-faint);
    cursor: default;
}

.eco-product-card__thumbs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.eco-product-card__thumb {
    width: 84px;
    height: 84px;
    padding: 6px;
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-sm);
    background: var(--eco-bg);
    cursor: pointer;
    transition: border-color var(--eco-t-fast);
}
.eco-product-card__thumb img { width: 100%; height: 100%; object-fit: contain; }
.eco-product-card__thumb:hover,
.eco-product-card__thumb.is-active { border-color: var(--eco-green); }

/* --- Цена и заявка --- */
.eco-product-card__buy {
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    background: var(--eco-bg);
    box-shadow: var(--eco-shadow-sm);
    padding: 28px;
    position: sticky;
    top: calc(var(--eco-header-h, 72px) + 16px);
}
.eco-product-card__prices {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
}
.eco-product-card__price {
    font-size: 32px;
    font-weight: 800;
    color: var(--eco-text);
    line-height: 1.1;
}
.eco-product-card__price--ask { font-size: 24px; color: var(--eco-green); }
/* Старая цена мелким шрифтом рядом с текущей */
.eco-product-card__old {
    font-size: 14px;
    color: var(--eco-text-faint);
    text-decoration: line-through;
}
.eco-product-card__discount {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: var(--eco-green);
    border-radius: var(--eco-r-pill);
    padding: 4px 10px;
}
.eco-product-card__note {
    font-size: var(--eco-small);
    color: var(--eco-text-muted);
    line-height: 1.5;
    margin: 12px 0 0;
}
.eco-product-card__actions {
    display: grid;
    gap: 10px;
    margin-top: 20px;
}
.eco-product-card__perks {
    list-style: none;
    margin: 20px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--eco-border);
    display: grid;
    gap: 9px;
    font-size: var(--eco-small);
    color: var(--eco-text-soft);
}
.eco-product-card__perks li {
    position: relative;
    padding-left: 22px;
}
/* Галочка нарисована, а не символом — не копируется вместе с текстом */
.eco-product-card__perks li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 5px;
    width: 11px;
    height: 6px;
    border-left: 2px solid var(--eco-green);
    border-bottom: 2px solid var(--eco-green);
    transform: rotate(-45deg);
}

/* --- Характеристики --- */
.eco-specs {
    margin: 0;
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    overflow: hidden;
}
.eco-specs__row {
    display: grid;
    grid-template-columns: minmax(180px, .5fr) minmax(0, 1fr);
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid var(--eco-border);
}
.eco-specs__row:first-child { border-top: none; }
.eco-specs__row:nth-child(odd) { background: var(--eco-bg-alt); }
.eco-specs dt { color: var(--eco-text-muted); font-size: var(--eco-body); margin: 0; }
.eco-specs dd { margin: 0; font-weight: 600; font-size: var(--eco-body); }

/* --- Описание из админки --- */
.eco-prose {
    font-size: var(--eco-lead);
    line-height: 1.7;
    color: var(--eco-text-soft);
    max-width: 900px;
}
.eco-prose > *:first-child { margin-top: 0; }
.eco-prose p { margin: 0 0 14px; }
.eco-prose h2, .eco-prose h3, .eco-prose h4 {
    color: var(--eco-text);
    margin: 28px 0 12px;
    line-height: 1.3;
}
.eco-prose h2 { font-size: 24px; }
.eco-prose h3 { font-size: 20px; }
.eco-prose h4 { font-size: 17px; }
.eco-prose ul, .eco-prose ol { margin: 0 0 14px; padding-left: 22px; }
.eco-prose li { margin-bottom: 7px; }
.eco-prose a { color: var(--eco-green); }
.eco-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--eco-r-md);
}
/* Таблицы из старого контента бывают шире экрана — даём им прокрутку */
.eco-prose table {
    display: block;
    overflow-x: auto;
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
}
.eco-prose th, .eco-prose td {
    border: 1px solid var(--eco-border);
    padding: 9px 14px;
    text-align: left;
    font-size: var(--eco-body);
}
.eco-prose th { background: var(--eco-bg-alt); font-weight: 700; }

/* ==========================================================================
   ДЕТАЛЬНАЯ СТРАНИЦА УСЛУГИ / АКЦИИ (parts/article.php)
   ========================================================================== */

.eco-article {
    max-width: 900px;
}
.eco-article__media {
    border-radius: var(--eco-r-lg);
    overflow: hidden;
    background: var(--eco-bg-alt);
    margin-bottom: 26px;
}
.eco-article__media img {
    display: block;
    width: 100%;
    height: auto;
}
.eco-article__till {
    margin-bottom: 18px;
}
.eco-article__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 32px;
    padding-top: 26px;
    border-top: 1px solid var(--eco-border);
}

@media (max-width: 620px) {
    .eco-article__foot .eco-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   КАТАЛОГ: ДВЕ КОЛОНКИ (боковое меню + содержимое)
   ========================================================================== */

.eco-catalog-layout {
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 34px;
    align-items: start;
}

/* Левая колонка: меню разделов и под ним фильтр.
   Своей прокрутки у колонки нет: она обрезала выпадающую панель
   разделов. Колонка растёт по содержимому и прилипает целиком —
   если она выше экрана, прилипание отключается (см. ниже). */
.eco-catalog-layout__aside {
    position: sticky;
    top: calc(var(--eco-header-h, 72px) + 16px);
    /* sticky создаёт контекст наложения: поднимаем колонку над карточками,
       чтобы выпадающая панель разделов не уходила под них */
    z-index: 20;

    display: grid;
    gap: 14px;
    min-width: 0;
}

/* Высокая колонка прилипать не должна — иначе нижняя часть фильтра
   становится недоступной. Отключаем прилипание на невысоких экранах. */
@media (max-height: 900px) {
    .eco-catalog-layout__aside { position: static; }
}

/* Части каталога подключаются внутрь колонки и приносят свои обёртки.
   Гасим их: отступы и ширину задаёт сама колонка. */
.eco-catalog-layout__body > .eco-section {
    padding: 0;
    background: none;
}
.eco-catalog-layout__body > .eco-section + .eco-section {
    padding-top: clamp(28px, 3.5vw, 44px);
}
.eco-catalog-layout__body .eco-container {
    max-width: none;
    padding: 0;
    margin: 0;
}

/* Колонка уже полной ширины: по четыре карточки в ряд они сжимаются.
   Плитку разделов и товаров пересобираем под доступное место. */
.eco-catalog-layout__body .eco-products-grid { grid-template-columns: repeat(3, 1fr); }
.eco-catalog-layout__body .eco-goods-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1240px) {
    .eco-catalog-layout__body .eco-products-grid,
    .eco-catalog-layout__body .eco-goods-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
    .eco-catalog-layout__body .eco-products-grid { grid-template-columns: 1fr; }
}

/* Картинку разделов делаем ниже: при узкой карточке высота 240px
   оставляла под фото много пустого места */
.eco-catalog-layout__body .eco-product__media { height: 190px; }

/* ==========================================================================
   БОКОВОЕ МЕНЮ КАТАЛОГА (parts/catalog.nav.php)
   Дерево разделов: верхний уровень всегда виден, подразделы
   раскрываются у текущей ветки и по наведению.
   ========================================================================== */

/* Прилипание переехало на .eco-catalog-layout__aside: меню и фильтр
   прокручиваются как одна колонка */
.eco-catnav {
    background: var(--eco-bg-alt);
    border-radius: var(--eco-r-lg);
    padding: 10px;
}
.eco-catnav__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eco-text-faint);
    padding: 10px 12px 12px;
}

/* Кнопка «Каталог» и стрелки раскрытия нужны только там, где меню
   свёрнуто, — на широком экране работает наведение */
.eco-catnav__toggle,
.eco-catnav__expand { display: none; }
.eco-catnav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}
.eco-catnav__item { position: relative; }

.eco-catnav__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 12px;
    border-radius: var(--eco-r-sm);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--eco-text-soft);
    transition: background var(--eco-t-fast), color var(--eco-t-fast);
}
.eco-catnav__link:hover {
    background: var(--eco-bg);
    color: var(--eco-green);
}
.eco-catnav__link.is-active {
    background: var(--eco-green);
    color: #fff;
}
.eco-catnav__chevron {
    flex: 0 0 auto;
    opacity: .55;
    transition: transform var(--eco-t-fast);
}
/* Стрелка смотрит вправо: подразделы выезжают сбоку */
.eco-catnav__item--has-kids:hover > .eco-catnav__link .eco-catnav__chevron {
    transform: translateX(2px);
}

/* --- Панель подразделов: выезжает справа от пункта --- */
.eco-catnav__drop {
    position: absolute;
    top: -10px;
    left: calc(100% + 8px);
    z-index: 30;

    width: max-content;
    min-width: 240px;
    max-width: min(640px, 60vw);

    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-md);
    box-shadow: var(--eco-shadow-md);
    padding: 16px 18px;

    opacity: 0;
    visibility: hidden;
    transform: translateX(-6px);
    transition: opacity var(--eco-t-fast), transform var(--eco-t-fast), visibility var(--eco-t-fast);
}
.eco-catnav__item:hover > .eco-catnav__drop,
.eco-catnav__item:focus-within > .eco-catnav__drop {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Бренды в колонки: у «Станций» их девять, в одну колонку панель
   уехала бы за нижний край экрана */
.eco-catnav__cols {
    columns: 2 190px;
    column-gap: 26px;
}
.eco-catnav__col {
    break-inside: avoid;
    margin-bottom: 16px;
}
.eco-catnav__col:last-child { margin-bottom: 0; }

.eco-catnav__kid {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--eco-text);
    margin-bottom: 7px;
}
.eco-catnav__kid:hover,
.eco-catnav__kid.is-active { color: var(--eco-green); }

.eco-catnav__sub {
    list-style: none;
    margin: 0;
    padding: 0 0 0 1px;
    display: grid;
    gap: 5px;
}
.eco-catnav__sub a {
    font-size: 13.5px;
    color: var(--eco-text-muted);
}
.eco-catnav__sub a:hover,
.eco-catnav__sub a.is-active { color: var(--eco-green); }

/* --------------------------------------------------------------------------
   Планшет и телефон: боковой колонки нет — меню уезжает над содержимым.

   Раскрытым дерево здесь не оставить: три десятка ссылок отодвигали
   товары на экран вниз, и на каждом разделе их приходилось прокручивать.
   Поэтому меню свёрнуто в одну строку с названием текущего раздела, а
   ветки раскрываются по стрелке (js/ui.js, initCatalogNav).

   Панель по наведению не показываем: на тач-устройстве первое касание
   открывало бы её вместо перехода.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    /* minmax(0,1fr) вместо 1fr: колонка по умолчанию не уже своего
       содержимого, и широкий блок внутри (например, лента вкладок)
       растягивал бы её вместе со всей страницей. */
    .eco-catalog-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }

    /* Колонка перестаёт прилипать и прокручиваться отдельно —
       меню и фильтр просто идут над содержимым */
    .eco-catalog-layout__aside {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        margin-right: 0;
        gap: 12px;
    }

    .eco-catnav {
        position: static;
        padding: 6px;
        /* без min-width:0 грид-элемент растягивается по содержимому
           ленты и тянет страницу вбок */
        min-width: 0;
    }

    /* Заголовок-надпись заменяет кнопка: она же говорит, где мы сейчас */
    .eco-catnav__title { display: none; }

    /* --- Свёрнутое меню: одна строка вместо трёх десятков ссылок --- */
    .eco-catnav__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        width: 100%;
        padding: 11px 12px;
        border: 0;
        border-radius: var(--eco-r-sm);
        background: none;
        color: var(--eco-text);
        text-align: left;
        cursor: pointer;
        /* палец должен попадать по строке, а не по тексту */
        min-height: 48px;
    }
    .eco-catnav__toggle-label {
        display: grid;
        gap: 2px;
        min-width: 0;
    }
    .eco-catnav__toggle-cap {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--eco-text-faint);
    }
    /* Название текущего раздела: длинное режем многоточием, чтобы
       кнопка оставалась в одну строку */
    .eco-catnav__toggle-here {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .eco-catnav__toggle-ico {
        flex: 0 0 auto;
        color: var(--eco-text-muted);
        transition: transform var(--eco-t-fast);
    }
    .eco-catnav[data-catnav].is-open .eco-catnav__toggle-ico { transform: rotate(180deg); }

    /* Дерево скрыто, пока не нажали кнопку. Без скрипта (класс не
       проставлен) список остаётся видимым — меню работает и так. */
    .eco-catnav.is-collapsible .eco-catnav__list { display: none; }
    .eco-catnav.is-collapsible.is-open .eco-catnav__list { display: grid; }

    /* --- Дерево: список в одну колонку --- */
    /* Две колонки резали длинные названия разделов пополам и мешали
       понять, где кончается один раздел и начинается другой */
    .eco-catnav__list {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
        padding-top: 4px;
    }
    .eco-catnav__item {
        min-width: 0;
        /* строка раздела: ссылка слева, кнопка раскрытия справа */
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
    .eco-catnav__link {
        white-space: normal;
        min-height: 46px;
    }

    /* Стрелка вправо не нужна: подразделы раскрываются вниз */
    .eco-catnav__chevron { display: none; }

    /* Кнопка раскрытия ветки — рядом со ссылкой, чтобы переход в раздел
       и просмотр подразделов не спорили за одно касание */
    .eco-catnav__expand {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: var(--eco-r-sm);
        background: none;
        color: var(--eco-text-muted);
        cursor: pointer;
    }
    .eco-catnav__expand svg { transition: transform var(--eco-t-fast); }
    .eco-catnav__item.is-open > .eco-catnav__expand { color: var(--eco-green); }
    .eco-catnav__item.is-open > .eco-catnav__expand svg { transform: rotate(180deg); }

    /* --- Подразделы: раскрываются под своим разделом --- */
    .eco-catnav__drop {
        grid-column: 1 / -1;
        position: static;
        display: none;
        width: auto;
        min-width: 0;
        max-width: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        padding: 2px 0 8px 12px;
        background: none;
        border: none;
        border-left: 2px solid var(--eco-border);
        border-radius: 0;
        box-shadow: none;
        margin: 0 0 4px 12px;
    }
    /* Наведение на телефоне не работает как задумано: первое касание
       открывало бы панель вместо перехода — раскрываем только по классу */
    .eco-catnav__item:hover > .eco-catnav__drop,
    .eco-catnav__item:focus-within > .eco-catnav__drop { display: none; }
    .eco-catnav__item.is-open > .eco-catnav__drop { display: block; }

    .eco-catnav__cols { columns: 1; }
    .eco-catnav__col {
        break-inside: auto;
        margin-bottom: 4px;
    }
    .eco-catnav__kid {
        display: block;
        padding: 9px 10px;
        margin: 0;
        border-radius: var(--eco-r-sm);
        font-size: 14px;
    }
    .eco-catnav__kid.is-active {
        background: var(--eco-green-light);
        color: var(--eco-green);
    }

    /* Третий уровень показываем только у ветки, в которой находимся:
       раскрытый целиком, список уходил бы на несколько экранов */
    .eco-catnav__sub { display: none; }
    .eco-catnav__col.is-open > .eco-catnav__sub { display: grid; }
    .eco-catnav__sub {
        gap: 0;
        padding-left: 10px;
        margin-left: 10px;
        border-left: 2px solid var(--eco-border);
    }
    .eco-catnav__sub a {
        display: block;
        padding: 8px 10px;
        border-radius: var(--eco-r-sm);
        font-size: 13.5px;
    }
    .eco-catnav__sub a.is-active {
        background: var(--eco-green-light);
        color: var(--eco-green);
    }
}

/* ==========================================================================
   ФИЛЬТР КАТАЛОГА (parts/catalog.filter.php)
   Стоит в левой колонке под меню разделов. Оформлен так же, как меню:
   светлая подложка, скруглённая карточка.
   ========================================================================== */

.eco-filter {
    background: var(--eco-bg-alt);
    border-radius: var(--eco-r-lg);
    padding: 10px;
}

/* --- Шапка панели: заголовок, счётчик и кнопка показа --- */
.eco-filter__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px 12px;
}
/* Кнопка занимает всю ширину и переносится на свою строку */
.eco-filter__head .eco-filter__toggle { flex: 1 0 100%; }

.eco-filter__title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eco-text-faint);
}

/* Сколько условий выбрано — видно, не разворачивая панель */
.eco-filter__count {
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;

    border-radius: var(--eco-r-pill);
    background: var(--eco-green);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
}

/* Кнопка «Показать/Скрыть фильтры» — на всю ширину панели,
   над самими условиями. Работает и на десктопе, и на телефоне. */
.eco-filter__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 12px;

    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-sm);
    background: var(--eco-bg);
    color: var(--eco-green);

    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--eco-t-fast), border-color var(--eco-t-fast);
}
.eco-filter__toggle:hover {
    background: var(--eco-green-light);
    border-color: var(--eco-green);
}

/* Иконка воронки: перечёркнута, когда фильтры открыты — нажатие
   на кнопку их скроет. Когда скрыты, воронка целая: нажатие покажет. */
.eco-filter__toggle-ico { flex: 0 0 auto; }
.eco-filter__toggle-slash { opacity: 0; transition: opacity var(--eco-t-fast); }
.eco-filter__toggle[aria-expanded="true"] .eco-filter__toggle-slash { opacity: 1; }

/* Запасная подпись «Показать фильтры» — только для узкого экрана до
   загрузки скрипта (правило ниже, в @media). Везде остальное скрыта:
   на широком экране панель открыта, а после старта скрипта подпись
   ставит он сам. */
.eco-filter__toggle-text--narrow { display: none; }

/* Скрытая панель: без JS остаётся открытой — фильтр работает всегда */
.js .eco-filter__body { display: none; }
.js .eco-filter.is-open .eco-filter__body { display: block; }

/* --- Группы условий --- */
.eco-filter__group {
    padding: 12px;
    border-top: 1px solid var(--eco-border-soft);
}
.eco-filter__group:first-child { border-top: none; }

.eco-filter__group-title {
    margin-bottom: 10px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--eco-text);
}

/* --- Цена --- */
.eco-filter__price {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.eco-filter__price-field {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 0 10px;
    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-sm);
    transition: border-color var(--eco-t-fast);
}
.eco-filter__price-field:focus-within { border-color: var(--eco-green); }

.eco-filter__price-label {
    flex: 0 0 auto;
    font-size: 12.5px;
    color: var(--eco-text-faint);
}

.eco-filter__price-field input {
    width: 100%;
    min-width: 0;
    padding: 9px 0;

    border: none;
    background: none;
    outline: none;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: var(--eco-text);
}
/* Стрелки у числового поля в узкой колонке только мешают */
.eco-filter__price-field input::-webkit-outer-spin-button,
.eco-filter__price-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.eco-filter__price-field input {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* --- Списки значений --- */
/* Прокрутки внутри списка нет: она прятала часть значений и мешала
   выпадающим панелям. Длинные списки сворачиваются по кнопке
   «Показать все» — см. .eco-filter__more ниже. */
.eco-filter__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

/* Свёрнутый длинный список: показываем первые значения, остальные
   скрыты до нажатия «Показать все» */
.js .eco-filter__list.is-clipped > li.is-hidden { display: none; }

.eco-filter__more {
    margin-top: 6px;
    padding: 4px 8px;
    border: none;
    background: none;

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--eco-green);
    text-align: left;
    cursor: pointer;
}
.eco-filter__more:hover { text-decoration: underline; }

.eco-filter__option {
    display: flex;
    align-items: center;
    gap: 9px;

    padding: 7px 8px;
    border-radius: var(--eco-r-sm);
    cursor: pointer;
    transition: background var(--eco-t-fast);
}
.eco-filter__option:hover { background: var(--eco-bg); }

/* Настоящий чекбокс убираем с глаз, но оставляем доступным
   с клавиатуры и для скринридеров */
.eco-filter__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.eco-filter__box {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;

    background: var(--eco-bg);
    border: 1.5px solid var(--eco-border-strong);
    border-radius: 6px;
    color: #fff;
    transition: background var(--eco-t-fast), border-color var(--eco-t-fast);
}
.eco-filter__box svg { opacity: 0; transition: opacity var(--eco-t-fast); }

.eco-filter__option input:checked ~ .eco-filter__box {
    background: var(--eco-green);
    border-color: var(--eco-green);
}
.eco-filter__option input:checked ~ .eco-filter__box svg { opacity: 1; }

/* Видимая рамка при переходе с клавиатуры */
.eco-filter__option input:focus-visible ~ .eco-filter__box {
    outline: 2px solid var(--eco-green);
    outline-offset: 2px;
}

.eco-filter__option-text {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.35;
    color: var(--eco-text-soft);
}
.eco-filter__option input:checked ~ .eco-filter__option-text {
    color: var(--eco-green);
    font-weight: 700;
}

.eco-filter__option-count {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--eco-text-faint);
}

/* --- Кнопки --- */
.eco-filter__actions {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--eco-border-soft);
}

.eco-filter__reset {
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--eco-text-muted);
    transition: color var(--eco-t-fast);
}
.eco-filter__reset:hover { color: var(--eco-green); }

/* --------------------------------------------------------------------------
   Планшет и телефон: панель по умолчанию свёрнута.

   Скрипт грузится в конце body, поэтому класс .js появляется только после
   разбора всей страницы. Без правила ниже панель успевала отрисоваться
   раскрытой и лишь потом схлопывалась — на телефоне это отодвигало товары
   на экран вниз. Поэтому на узком экране скрываем условия сразу в CSS,
   не дожидаясь скрипта.

   Без JS панель не открыть, но фильтр остаётся рабочим: форма
   отправляется обычным GET, а условия доступны на широком экране.
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
    .eco-filter__body { display: none; }
    .eco-filter.is-open .eco-filter__body { display: block; }

    /* До загрузки скрипта показываем «Показать фильтры»: условия уже скрыты.
       Первое правило намеренно исключает запасную подпись — иначе оба
       правила спорили бы за один элемент и всё держалось на их порядке. */
    .eco-filter__toggle:not(.is-live) .eco-filter__toggle-text:not(.eco-filter__toggle-text--narrow) { display: none; }
    .eco-filter__toggle:not(.is-live) .eco-filter__toggle-text--narrow { display: inline; }
    .eco-filter__toggle:not(.is-live) .eco-filter__toggle-slash { opacity: 0; }

    .eco-filter.is-open .eco-filter__body {
        columns: 2 220px;
        column-gap: 12px;
    }
    .eco-filter__group { break-inside: avoid; }
    .eco-filter__actions {
        break-inside: avoid;
        /* Кнопки в колонку не заворачиваем — они относятся ко всей форме */
        column-span: all;
    }
}

@media (max-width: 560px) {
    .eco-filter.is-open .eco-filter__body { columns: 1; }
}

/* ==========================================================================
   ПАНЕЛЬ НАД ПЛИТКОЙ: СЧЁТЧИК И СОРТИРОВКА (parts/catalog.php)
   ========================================================================== */

.eco-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;

    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--eco-border);
}

.eco-toolbar__info {
    font-size: 14px;
    font-weight: 700;
    color: var(--eco-text);
}
.eco-toolbar__hint {
    margin-left: 4px;
    font-weight: 500;
    color: var(--eco-text-muted);
}

/* --- Выпадающий список сортировки --- */
.eco-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.eco-sort__label {
    font-size: 13.5px;
    color: var(--eco-text-muted);
}

.eco-sort__box {
    position: relative;
}

.eco-sort__current {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 8px 12px;
    background: var(--eco-bg-alt);
    border-radius: var(--eco-r-sm);
    cursor: pointer;
    list-style: none;
    user-select: none;
    white-space: nowrap;

    font-size: 13.5px;
    font-weight: 700;
    color: var(--eco-text);
    transition: background var(--eco-t-fast), color var(--eco-t-fast);
}
.eco-sort__current::-webkit-details-marker { display: none; }

.eco-sort__current:hover { color: var(--eco-green); }
.eco-sort__current svg { opacity: .6; transition: transform var(--eco-t-fast); }
.eco-sort__box[open] .eco-sort__current svg { transform: rotate(180deg); }

.eco-sort__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 25;

    list-style: none;
    margin: 0;
    padding: 6px;
    min-width: 210px;

    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-md);
    box-shadow: var(--eco-shadow-md);
}

.eco-sort__option {
    display: block;
    padding: 9px 11px;
    border-radius: var(--eco-r-sm);

    font-size: 13.5px;
    font-weight: 600;
    color: var(--eco-text-soft);
    white-space: nowrap;
    transition: background var(--eco-t-fast), color var(--eco-t-fast);
}
.eco-sort__option:hover {
    background: var(--eco-bg-alt);
    color: var(--eco-green);
}
.eco-sort__option.is-active {
    background: var(--eco-green);
    color: #fff;
}

@media (max-width: 560px) {
    .eco-toolbar {
        gap: 10px;
        /* Сортировка занимает строку целиком: рядом со счётчиком
           длинные названия режимов не помещались */
        flex-direction: column;
        align-items: stretch;
    }
    .eco-sort { justify-content: space-between; }
    .eco-sort__menu { right: auto; left: 0; }
}

/* ==========================================================================
   ПУСТАЯ ВЫБОРКА ФИЛЬТРА
   ========================================================================== */

.eco-empty {
    padding: 34px 30px;
    border: 1px dashed var(--eco-border-strong);
    border-radius: var(--eco-r-lg);
    background: var(--eco-bg-alt);
    text-align: center;
}

.eco-empty__title {
    margin-bottom: 8px;
    font-size: var(--eco-h3);
    font-weight: 800;
    line-height: 1.25;
    color: var(--eco-text);
}

.eco-empty__text {
    max-width: 520px;
    margin: 0 auto 18px;
    font-size: var(--eco-body);
    line-height: 1.6;
    color: var(--eco-text-muted);
}

.eco-empty__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ==========================================================================
   ПОДЕЛИТЬСЯ ТОВАРОМ (parts/catalog.detail.php)
   Штатные ссылки соцсетей — без счётчиков и сторонних скриптов,
   поэтому карточка не тянет чужой JS.
   ========================================================================== */

.eco-share {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;

    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--eco-border);
}

.eco-share__label {
    font-size: 13px;
    color: var(--eco-text-muted);
}

.eco-share__list {
    display: flex;
    gap: 8px;
}

.eco-share__btn {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;

    border-radius: 50%;
    background: var(--eco-bg-alt);
    color: var(--eco-text-muted);
    transition: background var(--eco-t-fast), color var(--eco-t-fast), transform var(--eco-t-fast);
}
.eco-share__btn:hover {
    color: #fff;
    transform: translateY(-2px);
}

/* Фирменные цвета соцсетей — узнаваемость важнее единой палитры */
.eco-share__btn--vk:hover { background: #0077FF; }
.eco-share__btn--max:hover { background: var(--eco-green); }
.eco-share__btn--wa:hover { background: #25D366; }
.eco-share__btn--ok:hover { background: #EE8208; }

@media (max-width: 420px) {
    .eco-share { gap: 8px; }
    .eco-share__btn { width: 34px; height: 34px; }
}

/* ==========================================================================
   Конфигуратор погребов TINGARD (/catalog/pogreb/tingard/)
   Выбор серии → выбор размера → карточка выбранной модели.
   Разметка: parts/catalog.cellar.php, поведение: js/ui.js (initCellar).
   ========================================================================== */

.eco-cellar {
    margin-bottom: 8px;
}

/* --- Шаг выбора --- */
.eco-cellar__step {
    margin-bottom: 22px;
}

.eco-cellar__step-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--eco-text);
    margin-bottom: 10px;
}

/* --- Вкладки серий --- */
.eco-cellar__series {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eco-cellar__serie {
    flex: 1 1 160px;
    padding: 14px 20px;
    border: 1px solid var(--eco-border-strong);
    border-radius: var(--eco-r-pill);
    background: var(--eco-bg);
    cursor: pointer;
    font-family: var(--eco-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--eco-text-muted);
    transition: background var(--eco-t-fast), color var(--eco-t-fast),
                border-color var(--eco-t-fast);
}

.eco-cellar__serie:hover {
    background: var(--eco-bg-alt);
    color: var(--eco-text);
}

.eco-cellar__serie.is-active {
    background: var(--eco-green);
    border-color: var(--eco-green);
    color: #fff;
}

/* --- Кнопки размеров --- */
.eco-cellar__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.eco-cellar__size {
    min-width: 104px;
    padding: 11px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    border: 1px solid var(--eco-border-strong);
    border-radius: var(--eco-r-md);
    background: var(--eco-bg);
    cursor: pointer;
    font-family: var(--eco-font);
    transition: background var(--eco-t-fast), border-color var(--eco-t-fast);
}

.eco-cellar__size:hover {
    background: var(--eco-bg-alt);
}

.eco-cellar__size.is-active {
    border-color: var(--eco-green);
    background: var(--eco-green-light);
}

.eco-cellar__size-name {
    font-size: 16px;
    font-weight: 800;
    color: var(--eco-text);
}

.eco-cellar__size-delta {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--eco-text-muted);
}

/* --- Карточка выбранной модели --- */
.eco-cellar__model {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    padding: 24px;
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    background: var(--eco-bg-alt);
}

.eco-cellar__media {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    border-radius: var(--eco-r-md);
    background: var(--eco-bg);
    overflow: hidden;
}

.eco-cellar__media img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.eco-cellar__name {
    margin: 0 0 14px;
    font-size: var(--eco-h3);
    line-height: 1.25;
}

/* --- Характеристики --- */
.eco-cellar__specs {
    margin: 0 0 18px;
    display: grid;
    gap: 8px;
}

.eco-cellar__spec {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--eco-border);
}

.eco-cellar__spec dt {
    font-size: 14px;
    color: var(--eco-text-muted);
}

.eco-cellar__spec dd {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--eco-text);
    text-align: right;
}

/* --- Цена --- */
.eco-cellar__price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin-bottom: 18px;
}

.eco-cellar__price-label {
    font-size: 14px;
    color: var(--eco-text-muted);
}

.eco-cellar__price {
    font-size: 26px;
    font-weight: 800;
    color: var(--eco-text);
}

.eco-cellar__price--ask {
    font-size: 20px;
    color: var(--eco-text-muted);
}

.eco-cellar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* --- Адаптив --- */
@media (max-width: 900px) {
    .eco-cellar__model {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .eco-cellar__media { min-height: 200px; }
}

@media (max-width: 560px) {
    .eco-cellar__serie {
        flex: 1 1 100%;
        padding: 12px 16px;
    }
    .eco-cellar__size {
        flex: 1 1 calc(50% - 5px);
        min-width: 0;
    }
    .eco-cellar__model { padding: 16px; }
    .eco-cellar__price { font-size: 22px; }
    .eco-cellar__actions .eco-btn { width: 100%; }
}

/* --- Кнопка «Все размеры» --- */
.eco-cellar__size--all .eco-cellar__size-name { letter-spacing: .01em; }

/* Несколько карточек подряд (режим «Все») разделяем отступом */
.eco-cellar__model + .eco-cellar__model { margin-top: 16px; }

/* ==========================================================================
   Доп. оборудование: выбор нескольких позиций в заявку
   ========================================================================== */

.eco-extra {
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Карточка целиком — переключатель */
.eco-extra__pick {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    cursor: pointer;
    border-radius: inherit;
    transition: box-shadow var(--eco-t-fast);
}

/* Галочку прячем визуально, но оставляем доступной с клавиатуры */
.eco-extra__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.eco-extra__pick .eco-good__media { position: relative; }

/* Отметка в углу картинки */
.eco-extra__mark {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 26px;
    height: 26px;
    border: 2px solid var(--eco-border-strong);
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    transition: background var(--eco-t-fast), border-color var(--eco-t-fast);
}

.eco-extra__mark::after {
    content: '';
    position: absolute;
    top: 6px;
    left: 8px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--eco-t-fast);
}

.eco-extra.is-picked .eco-extra__mark {
    background: var(--eco-green);
    border-color: var(--eco-green);
}

.eco-extra.is-picked .eco-extra__mark::after { transform: rotate(45deg) scale(1); }

.eco-extra.is-picked {
    border-color: var(--eco-green);
    /* box-shadow: 0 0 0 2px var(--eco-green) inset; */
}

/* Клавиатурный фокус виден, раз сам чекбокс скрыт */
.eco-extra__input:focus-visible + .eco-good__media .eco-extra__mark {
    outline: 2px solid var(--eco-green);
    outline-offset: 2px;
}

.eco-extra__state {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--eco-green);
}

.eco-extra__more {
    padding: 0 16px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--eco-text-muted);
}

.eco-extra__more:hover { color: var(--eco-green); }

/* --- Сводка заказа --- */
.eco-extras__summary {
    margin-top: 22px;
    padding: 20px 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 28px;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    background: var(--eco-bg-alt);
}

.eco-extras__summary[hidden] { display: none; }

.eco-extras__totals {
    flex: 1 1 280px;
    display: grid;
    gap: 6px;
}

.eco-extras__line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font-size: 14.5px;
    color: var(--eco-text-soft);
}

.eco-extras__line--total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid var(--eco-border-strong);
    font-size: 17px;
    font-weight: 800;
    color: var(--eco-text);
}

.eco-extras__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 560px) {
    .eco-extras__summary { padding: 16px; }
    .eco-extras__actions { width: 100%; }
    .eco-extras__actions .eco-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Фильтр размеров без JS

   Радиокнопки лежат в начале панели, карточки — после них, поэтому состояние
   :checked достаётся до карточек соседним комбинатором «~». Скрипт в этой
   части не участвует: фильтр работает даже со старым JS из кэша браузера.

   Конкретные пары «radio → размер» дописывает PHP (см. catalog.cellar.php):
   набор размеров у серий разный, и общим правилом их не покрыть.
   -------------------------------------------------------------------------- */

/* Сам переключатель не виден — кликают по <label class="eco-cellar__size"> */
.eco-cellar__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Клавиатурный фокус: подсвечиваем связанную кнопку, раз input скрыт */
.eco-cellar__radio:focus-visible ~ .eco-cellar__step .eco-cellar__size[for] {
    outline: none;
}

/* ==========================================================================
   Вкладки с материалами под конфигуратором погребов
   Разметка: parts/catalog.cellar.tabs.php. Переключение — на радиокнопках
   и CSS, скрипт не нужен. Правила «выбрана вкладка → её панель» дописывает
   PHP: количество вкладок задаёт администратор.
   ========================================================================== */

.eco-tabs {
    position: relative;
    /* Блок живёт в grid-колонке каталога: без min-width:0 её минимальной
       шириной становится содержимое, и колонка перестаёт сжиматься. */
    min-width: 0;
}

/* Переключатели скрыты — кликают по <label class="eco-tabs__tab"> */
.eco-tabs__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* --- Полоса вкладок --- */
.eco-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.eco-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border: 1px solid var(--eco-border-strong);
    border-radius: var(--eco-r-pill);
    background: var(--eco-bg);
    cursor: pointer;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--eco-text-muted);
    transition: background var(--eco-t-fast), color var(--eco-t-fast),
                border-color var(--eco-t-fast);
}

.eco-tabs__tab:hover {
    background: var(--eco-bg-alt);
    color: var(--eco-text);
}

/* Счётчик материалов во вкладке */
.eco-tabs__count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: var(--eco-r-pill);
    background: var(--eco-bg-alt);
    font-size: 12px;
    font-weight: 800;
    color: var(--eco-text-muted);
}

.eco-tabs__tab:hover .eco-tabs__count { background: var(--eco-border); }

/* У активной вкладки счётчик светлый: на зелёном фоне серый нечитаем.
   Саму подсветку кнопки задаёт правило, которое собирает PHP (см. блок
   <style> в catalog.cellar.tabs.php) — вкладок произвольное количество. */
.eco-tabs__tab .eco-tabs__count {
    transition: background var(--eco-t-fast), color var(--eco-t-fast);
}

/* Клавиатурный фокус виден, раз сам input скрыт */
.eco-tabs__radio:focus-visible ~ .eco-tabs__nav .eco-tabs__tab {
    outline: 2px solid var(--eco-green);
    outline-offset: 2px;
}

/* --- Панели --- */
.eco-tabs__panel { display: none; }

.eco-tabs__grid {
    display: grid;
    /* min(300px, 100%) вместо 300px: иначе минимальная ширина колонки
       распирает всю колонку каталога на узком экране и страница уезжает
       по горизонтали. */
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}

/* --- Карточка документа --- */
.eco-doc {
    display: flex;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-md);
    background: var(--eco-bg);
    color: inherit;
    transition: border-color var(--eco-t-fast), box-shadow var(--eco-t-fast),
                transform var(--eco-t-fast);
}

.eco-doc:hover {
    border-color: var(--eco-green);
    box-shadow: var(--eco-shadow-sm);
    transform: translateY(-2px);
    color: inherit;
}

.eco-doc__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--eco-r-sm);
    background: var(--eco-green-light);
    color: var(--eco-green);
}

.eco-doc__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* min-width:0 + перенос: длинное имя файла не должно расширять карточку */
    min-width: 0;
    overflow-wrap: anywhere;
}

.eco-doc__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--eco-text);
    /* Имена файлов длинные и без пробелов («РОСС RU.04CCН0.06593») —
       на узком экране такая строка распирала карточку */
    overflow-wrap: anywhere;
}

.eco-doc__lead {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--eco-text-muted);
}

.eco-doc__meta {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--eco-text-faint);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* --- Карточка видео --- */
.eco-vid {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-md);
    background: var(--eco-bg);
    overflow: hidden;
}

/* Пропорция 16:9 держится без скриптов */
.eco-vid__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--eco-bg-image);
}

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

/* Превью-кнопка: обложка ролика плюс круглая кнопка «плей» по центру */
.eco-vid__play {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    overflow: hidden;
}
.eco-vid__play img,
.eco-vid__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--eco-t-base);
}
.eco-vid__play:hover img,
.eco-vid__play:hover .eco-vid__preview { transform: scale(1.05); }

/* Кадр из локального ролика вместо обложки: сам ролик не кликается,
   клик всегда достаётся кнопке-обёртке */
.eco-vid__preview {
    pointer-events: none;
    background: var(--eco-bg-image);
}

/* Обложку получить неоткуда (VK не отдаёт превью без токена, а вручную
   её не загрузили) — рисуем подложку, которая читается как видео:
   мягкий градиент и перфорация киноплёнки по краям. Пустой прямоугольник
   выглядел бы как незагрузившаяся картинка. */
.eco-vid__play--blank {
    background:
        /* перфорация слева и справа */
        radial-gradient(circle at 10px 50%, rgba(63, 107, 74, .16) 3.5px, transparent 4px) left / 20px 20px repeat-y,
        radial-gradient(circle at 10px 50%, rgba(63, 107, 74, .16) 3.5px, transparent 4px) right / 20px 20px repeat-y,
        linear-gradient(135deg, #e8efe6 0%, #d7e4d3 100%);
}

.eco-vid__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 24, 21, .62);
    color: #fff;
    /* иконка «плей» визуально смещена влево — компенсируем */
    padding-left: 3px;
    transition: background var(--eco-t-base), transform var(--eco-t-base);
}
.eco-vid__play:hover .eco-vid__btn {
    background: var(--eco-green);
    transform: translate(-50%, -50%) scale(1.06);
}
.eco-vid__play:focus-visible .eco-vid__btn { background: var(--eco-green); }

/* --------------------------------------------------------------------------
   ОКНО ПРОСМОТРА ВИДЕО
   -------------------------------------------------------------------------- */
.eco-vidbox {
    position: fixed;
    inset: 0;
    z-index: 96;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity var(--eco-t-base);
}
/* display:flex перебивает встроенный [hidden], поэтому скрытие задаём явно —
   иначе невидимое окно растянуто на весь экран и перехватывает все клики. */
.eco-vidbox[hidden] { display: none; }
.eco-vidbox.is-open { opacity: 1; }

.eco-vidbox__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(20, 24, 21, .92);
}

.eco-vidbox__dialog {
    position: relative;
    width: min(1100px, 100%);
}

.eco-vidbox__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: var(--eco-r-md);
    overflow: hidden;
}
.eco-vidbox__frame iframe,
.eco-vidbox__frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    /* Ролик может быть не 16:9 — вписываем целиком, а не обрезаем */
    background: #000;
    object-fit: contain;
}

.eco-vidbox__caption {
    margin-top: 12px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.eco-vidbox__close {
    position: absolute;
    top: -44px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.eco-vidbox__close:hover { background: rgba(255, 255, 255, .26); }

@media (max-width: 700px) {
    .eco-vidbox { padding: 16px; }
    .eco-vidbox__close { top: -40px; }
    .eco-vid__btn { width: 48px; height: 48px; }
}

.eco-vid__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px 16px;
}

.eco-vid__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--eco-text);
    overflow-wrap: anywhere;
}

.eco-vid__lead {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--eco-text-muted);
}

/* --- Адаптив --- */
@media (max-width: 760px) {
    .eco-tabs__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    /* Вкладки в одну строку с прокруткой: на узком экране перенос
       съедал бы пол-экрана до контента.
       Отрицательных полей не ставим — они расширяли бы блок за пределы
       колонки и добавляли горизонтальную прокрутку всей странице. */
    .eco-tabs__nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        /* Без min-width:0 строка вкладок задаёт колонке каталога свою
           максимальную ширину, и вся страница уезжает по горизонтали:
           grid-колонка считает минимумом сумму всех вкладок. */
        min-width: 0;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .eco-tabs__nav::-webkit-scrollbar { display: none; }

    .eco-tabs__tab {
        flex: 0 0 auto;
        padding: 10px 14px;
        font-size: 13.5px;
    }

    .eco-doc { padding: 14px; gap: 12px; }
    .eco-doc__icon { width: 38px; height: 38px; }
}

/* Подсказка в пустой вкладке */
.eco-tabs__empty {
    margin: 0;
    padding: 22px;
    border: 1px dashed var(--eco-border-strong);
    border-radius: var(--eco-r-md);
    background: var(--eco-bg-alt);
    font-size: 14.5px;
    color: var(--eco-text-muted);
}

.icons-box {position: relative; padding: 16px 0 0 0;}
.icons-box .icon {float:left; position: relative; font-size: 15px; color: #98abba; padding: 10px 0 10px 70px; margin: 0 30px 5px 0;}
.item:hover .icons-box .icon{color: #000;}
.icons-box .icon:before {content: ""; position: absolute; width: 40px; height: 40px; left: 0; top: 18px; margin: -22px 0 0 0; background-image: url('/upload/img/sprite.png'); background-repeat: no-repeat;}
.icons-box .icon b {float: left;margin: 0 5px 0 -25px;font-weight:normal;color:#000}
.icons-box .icon i {float: left;font-style:normal}
.item:hover .icons-box .icon  b{color: #11B8E3;}

.icons-box .people:before {background-position: -6px -380px;}
.icons-box .taps:before {background-position: -52px -380px;}
.icons-box .toilets:before {background-position: -103px -378px;}
.icons-box .showers:before {background-position: -152px -380px;}
.icons-box .machines:before {background-position: -208px -380px;}
.item .checkboxes li { float: left; margin: 0 40px 0 0;padding:0!important}
.item .checkboxes li:before {content: none!important}
.icons-box .sbros:before {background-position: -246px -378px;}
.item:hover .people:before {background-position: -6px -436px;}
.item:hover .taps:before {background-position: -52px -436px;}
.item:hover .toilets:before {background-position: -103px -434px;}
.item:hover .showers:before {background-position: -152px -436px;}
.item:hover .machines:before {background-position: -208px -436px;}
.item:hover .sbros:before {background-position: -246px -434px;}

.chars-box {position: relative; padding: 0 0 0px 0; display: flex; width: 100%;}
.chars-box .title {font-size: 16px; color: #98abba; padding: 5px 0 5px 0;}
.chars-box .digit {position: relative; font-size: 35px/*; padding: 0 4px 0 0;*/}
.chars-box .digit sup {position: absolute;margin-top: -5px;font-size: 60%;}
.chars-box .measure {font-size: 16px; color: #98abba;}
.chars-box .productivity {float:left; width: 30%; margin: 0 2.5% 20px 0;}
.chars-box .weight {float:left; width: 20%; margin: 0 2.5% 20px 0;}
.chars-box .third {float:left; width: 45%; margin: 0 0 20px 0;}
.chars-box .third .wrapper {padding-right: 0;}
.chars-box .third .height {float:left; width: 33%;}
.chars-box .third .diameter {float:left; width: 33%;}
.chars-box .third .length {float:left; width: 33%;}

@media (max-width: 560px) {
    .chars-box{display: inline-block;}
    .chars-box .productivity {width: 45%; margin: 0 5.5% 20px 0;}
    .chars-box .weight {width: 45%;}
    .chars-box .third {width: 100%;}
}

.pricetable tr:hover td {
    background-color: #f4f6f8;
}
.prop-link{
    color: #1e4844;
    text-decoration: underline;
}

.compareicon td strong:before{
	display:block;
	width:64px;
	height:64px;
    background-image:url('/upload/img/compare-septik-icons.png');
    content: '';
    text-align: center;
    left: 50%;
	margin-left: -32px;
    position: relative;
	background-position:-2000px 0
}	

.compareicon td.metod strong:before{
	background-position:66px 0;
}
.compareicon td.weight strong:before{
	background-position:191px 0;
}
.compareicon td.ploshad strong:before{
	background-position:-63px;
}
/* End */


/* Start:/bitrix/templates/ecostroy/css/aside.css?17875871347600*/
/* ==========================================================================
   БОКОВАЯ КОЛОНКА ВНУТРЕННИХ СТРАНИЦ (parts/aside.php)

   Виджеты «Акции», «Последние новости» и блок консультации.
   Меню каталога в той же колонке оформлено в catalog.css (.eco-catnav),
   здесь только то, что добавляется под ним.

   Сетку колонки и её поведение на узких экранах задаёт
   .eco-catalog-layout в catalog.css — своих брейкпоинтов
   на раскладку тут нет, только на внутренности карточек.
   ========================================================================== */

.eco-aside-card {
    background: var(--eco-bg-alt);
    border-radius: var(--eco-r-lg);
    padding: 10px;
}

/* --- Шапка виджета: заголовок и ссылка на весь раздел --- */
.eco-aside-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px 12px;
}

/* Тот же вид, что у заголовка меню каталога, — виджеты читаются как один блок */
.eco-aside-card__title {
    margin: 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--eco-text-faint);
}

.eco-aside-card__all {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--eco-green);
    white-space: nowrap;
    transition: color var(--eco-t-fast);
}
.eco-aside-card__all:hover { color: var(--eco-green-dark); }

.eco-aside-list {
    display: grid;
    gap: 4px;
}

/* --- Строка списка: миниатюра слева, текст справа --- */
.eco-aside-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 11px;
    align-items: start;
    padding: 10px 12px;
    border-radius: var(--eco-r-sm);
    color: inherit;
    transition: background var(--eco-t-fast);
}
.eco-aside-item:hover { background: var(--eco-bg); }

/* Без картинки колонка под миниатюру не нужна. Модификатор ставит PHP:
   :has() поддерживают не все браузеры, на которые рассчитан сайт */
.eco-aside-item--nopic {
    grid-template-columns: minmax(0, 1fr);
}

.eco-aside-item__media {
    display: block;
    overflow: hidden;
    border-radius: 9px;
    background: var(--eco-bg);
    aspect-ratio: 4 / 3;
}
.eco-aside-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--eco-t-med, .3s ease);
}
.eco-aside-item:hover .eco-aside-item__media img { transform: scale(1.05); }

.eco-aside-item__body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.eco-aside-item__title {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--eco-text);
    /* Длинные названия акций режем на две строки: иначе строка списка
       разъезжается и виджеты теряют ритм */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.eco-aside-item:hover .eco-aside-item__title { color: var(--eco-green); }

.eco-aside-item__text {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--eco-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.eco-aside-item__meta {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--eco-text-faint);
}

/* ==========================================================================
   БЛОК КОНСУЛЬТАЦИИ
   Стоит последним в колонке: закрывает низ, когда акций и новостей мало.
   ========================================================================== */

.eco-aside-cta {
    display: grid;
    gap: 8px;
    padding: 18px;
    border-radius: var(--eco-r-lg);
    background: var(--eco-green-light);
}

.eco-aside-cta__title {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--eco-green-dark);
}

.eco-aside-cta__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--eco-text-soft);
}

/* Кнопка на всю ширину колонки — колонка узкая, центрировать нечего */
.eco-aside-cta__btn {
    justify-content: center;
    width: 100%;
    margin-top: 2px;
}

.eco-aside-cta__phone {
    justify-self: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--eco-green-dark);
    transition: color var(--eco-t-fast);
}
.eco-aside-cta__phone:hover { color: var(--eco-green); }

/* ==========================================================================
   АДАПТИВ

   На узких экранах колонка уже развёрнута под содержимое
   (.eco-catalog-layout в catalog.css). Виджеты при этом становятся
   широкими — раскладываем их в две колонки, чтобы список не тянулся
   вниз пустой лентой, и возвращаем одну колонку на телефоне.
   ========================================================================== */

@media (max-width: 1000px) {
    .eco-aside-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 10px;
    }

    .eco-aside-cta {
        /* Текст слева, кнопка и телефон справа: в одну колонку
           блок занимал бы пол-экрана */
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 18px;
    }
    .eco-aside-cta__title { grid-column: 1; }
    .eco-aside-cta__text  { grid-column: 1; }
    .eco-aside-cta__btn {
        grid-column: 2;
        grid-row: 1 / span 2;
        width: auto;
        min-width: 190px;
        margin-top: 0;
    }
    .eco-aside-cta__phone {
        grid-column: 2;
        grid-row: 3;
        justify-self: end;
    }
}

@media (max-width: 620px) {
    .eco-aside-list { grid-template-columns: minmax(0, 1fr); }

    .eco-aside-cta {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px;
    }
    .eco-aside-cta__btn {
        grid-column: 1;
        grid-row: auto;
        width: 100%;
        min-width: 0;
    }
    .eco-aside-cta__phone {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
    }
}

/* ==========================================================================
   СОДЕРЖИМОЕ ПРАВОЙ КОЛОНКИ

   Текстовые страницы (новость, услуга, акция) раньше стояли в узком
   контейнере 880px. Теперь они лежат в правой колонке — она шире,
   и длинная строка читается хуже. Ограничиваем ширину самого текста,
   не трогая картинки и кнопки.
   ========================================================================== */

.eco-catalog-layout__body .eco-news-detail__text,
.eco-catalog-layout__body .eco-prose {
    max-width: 74ch;
}

/* End */


/* Start:/bitrix/templates/ecostroy/css/about.css?17891442148689*/
/* ==========================================================================
   СТРАНИЦА «О КОМПАНИИ» (/company/)

   Врезки, карточки с цифрами и плашки брендов. Вводный блок
   (.eco-about-intro) оформлен в 08-sections.css вместе с остальными
   секциями — здесь только то, что появилось на этой странице.
   ========================================================================== */

/* Врезка — выделенный абзац с важной мыслью */
.eco-callout {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin: 28px 0;
    padding: 22px 26px;
    border-radius: var(--eco-r-lg);
    background: var(--eco-green-light);
    border-left: 4px solid var(--eco-green);
}
.eco-callout__icon {
    flex: 0 0 auto;
    color: var(--eco-green);
    margin-top: 2px;
}
.eco-callout p {
    margin: 0;
    font-size: var(--eco-body);
    line-height: 1.65;
    color: var(--eco-text-soft);
}
.eco-callout p + p { margin-top: 10px; }
.eco-callout a {
    color: var(--eco-green-dark);
    text-decoration: underline;
}

/* --- Карточки с цифрами --------------------------------------------------- */
.eco-about-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
}

.eco-about-fact {
    padding: 24px 22px;
    border-radius: var(--eco-r-lg);
    background: var(--eco-bg-alt);
}
.eco-about-fact svg{
    max-width: 55px;
    height: auto;
    margin-bottom: 12px;
}
.eco-about-fact__value {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--eco-green);
}
.eco-about-fact__label {
    margin-top: 8px;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--eco-text-muted);
}

@media (max-width: 900px) {
    .eco-about-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .eco-about-facts { grid-template-columns: minmax(0, 1fr); }
    .eco-callout { flex-direction: column; gap: 10px; padding: 18px 20px; }
}

/* ==========================================================================
   БЛОК «МЫ ГОРДИМСЯ СВОЕЙ РАБОТОЙ»

   Слева виджет отзывов Яндекс.Карт, справа текст. Колонки выровнены
   по высоте: виджет тянется на всю строку грида (align-items: stretch
   по умолчанию), а внутри цепочка растяжки доходит до самого iframe —
   каждое звено обязано быть 100%, иначе высота схлопнется.
   ========================================================================== */

.eco-pride {
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
    gap: 28px;
}

/* Колонка виджета: flex, чтобы рамка внутри заняла всю высоту строки */
.eco-pride .eco-reviews-widget { display: flex; }

.eco-pride .eco-reviews-widget__frame {
    flex: 1;
    /* Нижняя граница на случай, если текст справа окажется короче */
    min-height: 520px;
}

.eco-pride__text {
    min-width: 0;
    /* Текст распределяется по высоте: последняя кнопка прижата к низу,
       и колонка выглядит собранной, а не «висящей» сверху */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.eco-pride__text .eco-lead { margin: 0 0 16px; }
.eco-pride__text .eco-callout { margin: 8px 0 0; }

.eco-pride__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

@media (max-width: 1000px) {
    /* Виджет над текстом: рядом с ним колонка становится слишком узкой */
    .eco-pride { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .eco-pride .eco-reviews-widget__frame { min-height: 0; height: 520px; }
}

@media (max-width: 620px) {
    .eco-pride .eco-reviews-widget__frame { height: 440px; }
    .eco-pride__actions .eco-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   ЛОГОТИПЫ ПРОИЗВОДИТЕЛЕЙ

   Файлы приходят в разных форматах и пропорциях — от вытянутых (ZORDE
   почти 6:1) до квадратных (Тингард 1:1). Поэтому логотип не растягиваем:
   вписываем в общую площадку по object-fit, и все марки читаются
   одинаково крупно независимо от исходного размера.
   ========================================================================== */

.eco-brands {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 30px;
}

.eco-brand {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    /* Единая площадка для всех логотипов */
    aspect-ratio: 16 / 9;
    padding: 18px;

    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-lg);
    background: var(--eco-bg);
    overflow: hidden;

    transition: border-color var(--eco-t-base, .25s ease),
                box-shadow var(--eco-t-base, .25s ease),
                transform var(--eco-t-base, .25s ease);
}

/* Мягкий подъём карточки под курсором */
.eco-brand:hover {
    border-color: var(--eco-green);
    box-shadow: var(--eco-shadow-md);
    transform: translateY(-4px);
}

/* Блик, пробегающий по плитке при наведении */
.eco-brand::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 55%;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .65) 50%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
}
.eco-brand:hover::after {
    animation: ecoBrandShine .75s ease-out;
}
@keyframes ecoBrandShine {
    0%   { left: -70%; opacity: 0; }
    12%  { opacity: 1; }
    100% { left: 130%; opacity: 0; }
}

/* Логотип: приглушён, пока на него не навели, — ряд выглядит спокойным
   и не спорит с остальной страницей */
.eco-brand__logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;

    filter: grayscale(1);
    opacity: .62;
    transition: filter var(--eco-t-base, .25s ease),
                opacity var(--eco-t-base, .25s ease),
                transform var(--eco-t-base, .25s ease);
}
.eco-brand:hover .eco-brand__logo {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.06);
}

/* Запасной вариант, когда файла логотипа нет */
.eco-brand__name {
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    color: var(--eco-text-muted);
}

/* Тем, кто просил уменьшить движение, оставляем только смену цвета */
@media (prefers-reduced-motion: reduce) {
    .eco-brand,
    .eco-brand__logo { transition: none; }
    .eco-brand:hover { transform: none; }
    .eco-brand:hover .eco-brand__logo { transform: none; }
    .eco-brand:hover::after { animation: none; }
}

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 1180px) {
    .eco-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .eco-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .eco-brand { padding: 14px; }
}
@media (max-width: 460px) {
    /* Две колонки — меньше делать нельзя: логотипы станут нечитаемыми */
    .eco-brands { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .eco-brand { padding: 12px; }
}

/* На сенсорных экранах наведения нет: показываем логотипы сразу
   в цвете, иначе они так и остались бы серыми */
@media (hover: none) {
    .eco-brand__logo { filter: none; opacity: 1; }
    .eco-brand::after { display: none; }
}

/* End */


/* Start:/bitrix/templates/ecostroy/css/faq.css?17867380447377*/
/* ==========================================================================
   Экострой — «Вопрос-ответ»
   Раскрывающийся список на <details>/<summary>. Стрелка и подсветка
   работают на чистом CSS, скрипт нужен только для режима аккордеона.
   ========================================================================== */

/* Две колонки сделаны через CSS-колонки, а не grid: в сетке пункты
   стоят общими рядами, и раскрытый ответ слева толкал вниз соседа
   справа — правая колонка «прыгала». Колонки раскладываются
   независимо, поэтому раскрытие двигает только свой столбец. */
.eco-faq {
    columns: 2;
    column-gap: 12px;
}

/* Карточка не должна разрываться между колонками */
.eco-faq__item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    /* inline-block не даёт пункту расползтись по обеим колонкам
       в старых движках */
    display: inline-block;
    width: 100%;
    margin-bottom: 12px;
    vertical-align: top;
}

/* Узкий контейнер под две колонки не подходит — расширяем страницу */
.eco-faq-page .eco-container--narrow { max-width: 1280px; }

@media (max-width: 900px) {
    .eco-faq { columns: 1; }
}

.eco-faq__item {
    background: var(--eco-bg);
    border: 1px solid var(--eco-border);
    border-radius: var(--eco-r-md);
    overflow: hidden;
    transition: border-color var(--eco-t-base), box-shadow var(--eco-t-base);
}
.eco-faq__item:hover { border-color: var(--eco-border-strong); }

.eco-faq__item[open] {
    border-color: var(--eco-green);
    box-shadow: var(--eco-shadow-sm);
}

/* --------------------------------------------------------------------------
   ВОПРОС
   -------------------------------------------------------------------------- */
.eco-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    padding: 20px 22px;
    cursor: pointer;
    list-style: none;               /* убираем штатный треугольник */
    user-select: none;

    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--eco-text);
    transition: color var(--eco-t-fast);
}
/* Треугольник Safari/Chrome */
.eco-faq__q::-webkit-details-marker { display: none; }

.eco-faq__q:hover { color: var(--eco-green); }
.eco-faq__item[open] .eco-faq__q { color: var(--eco-green); }

/* Обводка только при переходе с клавиатуры */
.eco-faq__q:focus-visible {
    outline: 2px solid var(--eco-green);
    outline-offset: -3px;
    border-radius: var(--eco-r-md);
}

.eco-faq__q-text { flex: 1 1 auto; }

/* --- Значок «плюс → минус» --- */
.eco-faq__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;

    width: 32px;
    height: 32px;
    margin-top: -3px;

    border-radius: 50%;
    background: var(--eco-green-light);
    color: var(--eco-green);
    transition: background var(--eco-t-base), color var(--eco-t-base);
}
.eco-faq__item[open] .eco-faq__icon {
    background: var(--eco-green);
    color: #fff;
}

/* Вертикальная черта ложится на горизонтальную — плюс становится минусом */
.eco-faq__icon-bar {
    transform-origin: 12px 12px;
    transition: transform var(--eco-t-base) var(--eco-ease);
}
.eco-faq__item[open] .eco-faq__icon-bar { transform: rotate(90deg); }

/* --------------------------------------------------------------------------
   ОТВЕТ
   Раскрытие анимируем через grid-template-rows: высота содержимого
   заранее неизвестна, а max-height давал бы рывок на длинных ответах.
   -------------------------------------------------------------------------- */
.eco-faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--eco-t-base) var(--eco-ease);
}
.eco-faq__item[open] .eco-faq__a { grid-template-rows: 1fr; }

.eco-faq__a-inner {
    overflow: hidden;
    min-height: 0;
    padding: 0 22px;
}
.eco-faq__item[open] .eco-faq__a-inner { padding-bottom: 22px; }

.eco-faq__a-inner > *:first-child { margin-top: 0; }
.eco-faq__a-inner > *:last-child { margin-bottom: 0; }

.eco-faq__a-inner p {
    margin: 0 0 12px;
    font-size: var(--eco-body);
    line-height: 1.7;
    color: var(--eco-text-soft);
}

.eco-faq__a-inner ul,
.eco-faq__a-inner ol {
    margin: 0 0 12px;
    padding-left: 20px;
    font-size: var(--eco-body);
    line-height: 1.7;
    color: var(--eco-text-soft);
}
.eco-faq__a-inner li { margin-bottom: 6px; }

.eco-faq__a-inner a { color: var(--eco-green); text-decoration: underline; }

/* --- Таблица в ответе (нормативы расстояний) --- */
.eco-faq__a-inner table {
    width: 100%;
    margin: 16px 0 12px;
    border-collapse: collapse;
    font-size: 14px;

    /* На узком экране таблица прокручивается, а не ломает страницу */
    display: block;
    overflow-x: auto;
    white-space: nowrap;
}

.eco-faq__a-inner th,
.eco-faq__a-inner td {
    padding: 11px 14px;
    text-align: left;
    border-bottom: 1px solid var(--eco-border);
}

.eco-faq__a-inner th {
    background: var(--eco-bg-alt);
    font-weight: 700;
    color: var(--eco-text);
    white-space: nowrap;
}

.eco-faq__a-inner td { color: var(--eco-text-soft); }
.eco-faq__a-inner tbody tr:last-child td { border-bottom: none; }
.eco-faq__a-inner tbody tr:hover td { background: var(--eco-bg-alt); }

/* --------------------------------------------------------------------------
   БЛОК «НЕ НАШЛИ ОТВЕТ»
   -------------------------------------------------------------------------- */
.eco-faq__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;

    margin-top: 34px;
    padding: 28px 30px;
    border-radius: var(--eco-r-lg);
    background: var(--eco-green-light);
}

.eco-faq__cta-text { flex: 1 1 320px; }

.eco-faq__cta-title {
    margin: 0 0 6px;
    font-size: var(--eco-h3);
    line-height: 1.25;
    color: var(--eco-text);
}

.eco-faq__cta p {
    margin: 0;
    font-size: var(--eco-body);
    line-height: 1.6;
    color: var(--eco-text-soft);
}

/* --------------------------------------------------------------------------
   ТЕЛЕФОН
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .eco-faq__q {
        padding: 16px 16px;
        font-size: 15.5px;
        gap: 12px;
    }
    .eco-faq__icon { width: 28px; height: 28px; }

    .eco-faq__a-inner { padding: 0 16px; }
    .eco-faq__item[open] .eco-faq__a-inner { padding-bottom: 18px; }

    .eco-faq__cta {
        padding: 22px 20px;
        margin-top: 26px;
    }
    .eco-faq__cta .eco-btn { width: 100%; justify-content: center; }
}

/* End */


/* Start:/bitrix/templates/ecostroy/css/modal.css?17867409424000*/
/* ==========================================================================
   Экострой — модальное окно заявки
   Одно окно на весь сайт (разметка в footer.php), открывается кнопками
   с атрибутом data-eco-modal. Логика — initModal() в js/ui.js.
   ========================================================================== */

.eco-modal {
    position: fixed;
    inset: 0;
    z-index: 200;              /* выше шапки (100) и мобильной панели */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.eco-modal[hidden] { display: none; }

/* --- Затемнение --- */
.eco-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(30, 36, 32, .55);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--eco-t-base);
}
.eco-modal.is-open .eco-modal__backdrop { opacity: 1; }

/* --- Само окно --- */
.eco-modal__dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 460px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: var(--eco-bg);
    border-radius: var(--eco-r-lg);
    box-shadow: var(--eco-shadow-card);
    padding: 34px 32px 28px;

    opacity: 0;
    transform: translateY(16px) scale(.98);
    transition: opacity var(--eco-t-base), transform .25s var(--eco-ease);
}
.eco-modal.is-open .eco-modal__dialog {
    opacity: 1;
    transform: none;
}

/* --- Кнопка закрытия --- */
.eco-modal__close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--eco-text-muted);
    cursor: pointer;
    transition: background var(--eco-t-fast), color var(--eco-t-fast);
}
.eco-modal__close:hover {
    background: var(--eco-green-light);
    color: var(--eco-text);
}

/* --- Тексты --- */
.eco-modal__title {
    font-size: clamp(22px, 2.4vw, 27px);
    line-height: 1.25;
    margin: 0 34px 10px 0;   /* справа — место под крестик */
}
.eco-modal__text {
    font-size: var(--eco-body);
    line-height: 1.55;
    color: var(--eco-text-muted);
    margin: 0 0 22px;
}

.eco-modal__contact {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--eco-border);
    text-align: center;
    font-size: var(--eco-small);
    color: var(--eco-text-muted);
}
.eco-modal__contact a {
    color: var(--eco-green);
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Телефон: окно прижимаем к низу экрана — так до него дотягивается большой
   палец, а форма не прыгает при появлении экранной клавиатуры.
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .eco-modal {
        padding: 0;
        align-items: flex-end;
    }
    .eco-modal__dialog {
        max-width: none;
        max-height: 92vh;
        border-radius: var(--eco-r-lg) var(--eco-r-lg) 0 0;
        padding: 28px 20px 24px;
        /* Выезжает снизу; открытое состояние сбрасывает сдвиг ниже */
        transform: translateY(100%) scale(1);
    }
    .eco-modal.is-open .eco-modal__dialog { transform: translateY(0); }
}

/* Поля, которые показывает не каждая кнопка (ФИО и описание задачи
   в окне «Получить консультацию»). Разметка есть всегда, видимость
   переключает скрипт — см. data-modal-fields в footer.php. */
.eco-field--optional.is-hidden { display: none; }

/* End */


/* Start:/bitrix/templates/ecostroy/css/07-responsive.css?178947638817661*/
/* ==========================================================================
   Экострой — адаптив
   Подход mobile-first по содержанию, но правки идут сверху вниз по брейкпоинтам,
   т.к. базовые стили рассчитаны на десктоп + clamp().
   Брейкпоинты: 1100 (планшет-альбом), 900 (планшет), 760 (телефон), 480 (узкий).
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1100px — прячем меню в бургер, шапка компактнее
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .eco-burger { display: flex; }

    /* Меню — панель во весь экран. fixed + inset вместо выпадающего блока:
       так меню не зависит от высоты шапки и не прокручивается вместе со
       страницей.

       Закрытую панель убираем через display:none. Вариант со сдвигом
       (transform или left) не годится: сдвинутый блок всё равно попадает
       в ширину прокрутки, и страница уезжала вбок ровно на ширину экрана.
       Плавность даём анимацией при открытии. */
    .eco-nav {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 65;
        flex-direction: column;
        /* Десктопное правило центрирует пункты по вертикали — в колонке это
           сжимало бы блоки по содержимому вместо ширины панели */
        align-items: stretch;
        gap: 0;
        background: var(--eco-bg);
        padding: 0;
        /* Сбрасываем flex из десктопных правил: с flex-basis:auto панель
           считала высоту по содержимому шапки и сжималась до 70px,
           игнорируя top/bottom. */
        flex: none;
        /* Размер задают left/right/top/bottom из inset. 100vw здесь нельзя:
           эта единица включает полосу прокрутки, и панель вылезала за край. */
        width: auto;
        height: auto;
        /* содержимое длиннее экрана — прокручиваем внутри панели */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .eco-nav.is-open {
        display: flex;
        animation: ecoNavIn .25s var(--eco-ease) both;
    }
    @keyframes ecoNavIn {
        from { transform: translateX(12%); opacity: 0; }
        to   { transform: none; opacity: 1; }
    }
    .eco-nav-scrim.is-on { display: block; }

    /* Шапка панели: подпись и крестик */
    .eco-nav__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px var(--eco-gutter);
        border-bottom: 1px solid var(--eco-border);
        position: sticky;
        top: 0;
        background: var(--eco-bg);
        z-index: 2;
    }
    .eco-nav__head-title {
        font-size: 13px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--eco-text-faint);
    }
    .eco-nav__close {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--eco-border-strong);
        border-radius: var(--eco-r-sm);
        background: var(--eco-bg);
        color: var(--eco-text);
        cursor: pointer;
    }

    .eco-nav__links {
        display: block;
        padding: 4px var(--eco-gutter) 0;
    }
    .eco-nav__links > a,
    .eco-nav__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 0;
        border-bottom: 1px solid var(--eco-border);
        font-size: 16.5px;
    }

    /* Каталог: на телефоне список всегда раскрыт, без наведения */
    .eco-nav__item--drop { position: static; }
    .eco-nav__caret { display: none; }
    .eco-nav__drop {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        padding-top: 0;
    }
    .eco-nav__drop-inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px 0 4px;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* «О нас»: подпункты идут списком с отступом, чтобы было видно
       вложенность — рамку и тень выпадающей панели убираем */
    .eco-nav__sublist {
        min-width: 0;
        padding: 0 0 6px 14px;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .eco-nav__sublist a {
        padding: 11px 0;
        border-bottom: 1px solid var(--eco-border);
        font-size: 15px;
        color: var(--eco-text-muted);
    }
    .eco-nav__sublist li:last-child a { border-bottom: none; }
    .eco-nav__card {
        padding: 10px;
        border: 1px solid var(--eco-border);
        border-radius: var(--eco-r-md);
    }
    /* Карточка строкой: картинка слева, название справа. Так плашка
       занимает меньше высоты, и весь каталог виден без прокрутки. */
    .eco-nav__card-link {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .eco-nav__card-media {
        height: 46px;
        width: 46px;
        flex: 0 0 auto;
        margin-bottom: 0;
        background: none;
    }
    /* На маленькой плашке кадрирование срезало бы половину изделия —
       показываем товар целиком */
    .eco-nav__card-media img { object-fit: contain; }
    .eco-nav__card-title { font-size: 13px; }
    .eco-nav__card { padding: 8px; }
    /* Подразделы в карточках свернуть: иначе меню становится бесконечным */
    .eco-nav__card-list { display: none; }

    /* Низ панели: кнопки, телефон, почта, мессенджеры */
    .eco-nav__foot {
        display: block;
        margin-top: auto;
        padding: 18px var(--eco-gutter) calc(20px + env(safe-area-inset-bottom));
    }
    .eco-nav__actions {
        display: grid;
        gap: 10px;
        margin-bottom: 18px;
    }
    .eco-nav__contacts {
        display: grid;
        gap: 10px;
        margin-bottom: 16px;
    }
    .eco-nav__contact {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border: 1px solid var(--eco-border);
        border-radius: var(--eco-r-md);
        background: var(--eco-bg-alt);
    }
    .eco-nav__contact-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        border-radius: 12px;
        background: var(--eco-green-light);
        color: var(--eco-green);
    }
    .eco-nav__contact strong {
        display: block;
        font-size: 15.5px;
        color: var(--eco-text);
    }
    .eco-nav__contact small {
        display: block;
        font-size: 12.5px;
        font-weight: 500;
        color: var(--eco-text-muted);
    }

    .eco-nav__social {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .eco-nav__social a {
        flex: 1 1 auto;
        text-align: center;
        padding: 11px 14px;
        border: 1px solid var(--eco-border-strong);
        border-radius: var(--eco-r-pill);
        font-size: 13.5px;
        font-weight: 700;
        color: var(--eco-text);
    }

    /* Пока меню открыто, страница под ним не прокручивается */
    body.eco-nav-open { overflow: hidden; }

    /* backdrop-filter у шапки делает её точкой отсчёта для position:fixed —
       панель меню обрезалась по высоте шапки (70px вместо всего экрана).
       Пока меню открыто, размытие снимаем: под панелью его всё равно не видно. */
    body.eco-nav-open .eco-header {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Cookie-баннер лежит выше меню (z-index 80) и перекрывал бы его низ —
       пока меню открыто, прячем. Согласие спросим, когда меню закроют. */
    body.eco-nav-open .eco-cookie { display: none; }

    .eco-header { position: sticky; }
    .eco-header__inner { position: relative; gap: 16px; }
    /* Бургер прижимаем к правому краю */
    .eco-header__side { margin-left: auto; gap: 12px; }
}

/* --------------------------------------------------------------------------
   ≤ 900px — планшет
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    :root {
        --eco-gutter: 20px;
        /* Промежуточный шаг между 60px на десктопе и 28px на телефоне */
        --eco-section-y: 40px;
    }

    .eco-counters__grid { padding: 34px 30px; gap: 38px 20px; }

    .eco-hero__inner { padding-bottom: clamp(48px, 8vw, 72px); }

    /* Карточка товара: галерея и блок заказа в колонку */
    .eco-product-card { grid-template-columns: 1fr; gap: 28px; }
    /* Липкий блок в одной колонке только мешает */
    .eco-product-card__buy { position: static; }

    /* CTA — в колонку */
    .eco-cta { flex-direction: column; align-items: flex-start; }
    .eco-cta__actions { width: 100%; }
    .eco-cta__actions .eco-btn { flex: 1 1 220px; }

    /* Отступы внутри блока и над ним заметно меньше: на телефоне
       clamp давал 36px по кругу плюс 100px сверху у секции — экран
       уходил почти целиком под воздух вокруг текста */
    .eco-cta-section { padding-top: 48px; }    
    .eco-cta { padding: 28px 22px 0px; gap: 20px; background: #1e4844;}
    .eco-cta .eco-btn--primary{border-radius: var(--eco-r-md);background: #ffffff;  color: #1e4844;}

    .eco-quiz__options { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   ≤ 760px — телефон
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
    :root { --eco-section-y: 28px; }

    /* Телефон и кнопку в шапке убираем — они есть в мобильном меню.
       Кнопку внутри самого меню не трогаем: там она нужна. */
    .eco-header__phone { display: none; }
    .eco-header__side > .eco-btn { font-size: 12px;padding: 9px; }
    .eco-header__inner { gap: 12px; }
    /* На телефоне размер задаём по той же оси, что и на десктопе (ширина),
       иначе фиксированные width и height вместе исказят пропорции. */
    .eco-header__logo img { width: 165px; }
    .eco-header.is-scrolled .eco-header__logo img { width: 146px; }

    /* Hero: фото уходит на задний план, текст на плотной подложке */
    /* .eco-hero__scrim {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, .93) 0%,
            rgba(255, 255, 255, .88) 55%,
            rgba(255, 255, 255, .82) 100%);
    } */
    .eco-hero__inner { padding: 20px var(--eco-gutter) 48px; }
    .eco-hero__actions .eco-btn { width: 100%; }

    .eco-counters { margin-top: 20px; }

    /* Заголовок с кнопкой: на телефоне кнопка уходит под заголовок */
    .eco-section-head--split { align-items: flex-start; }
    .eco-section-head__action { width: 100%; justify-content: center; }

    /* Характеристики: две колонки не помещаются — название над значением */
    .eco-specs__row { grid-template-columns: 1fr; gap: 4px; padding: 12px 16px; }
    .eco-product-card__buy { padding: 22px 18px; }
    .eco-product-card__price { font-size: 27px; }
    .eco-product-card__main { padding: 16px; }
    .eco-product-card__thumb { width: 68px; height: 68px; }
    .eco-prose { font-size: var(--eco-body); }

    /* Кейсы: карточка почти во всю ширину экрана */
    .eco-case { flex: 0 0 84vw; }
    .eco-case__media { height: 210px; }

    /* Стрелки слайдера прячем — на тач-устройстве листают пальцем */
    .eco-cases-nav { display: none; }

    .eco-card--soft { padding: 22px; }
    .eco-card__body { padding: 20px; }
    .eco-review { padding: 24px; }
    .eco-contact { padding: 24px; }

    .eco-quiz { padding: 22px 18px; min-height: 0; }
    /* Иконка 50px не даёт опуститься ниже — держим высоту по ней */
    .eco-quiz__option { padding: 14px 16px; min-height: 74px; gap: 12px; }


    /* Подвал: всё в одну колонку */
    .eco-footer__inner { flex-direction: column; gap: 28px; }
    .eco-footer__cols { gap: 28px; flex-direction: column; }
    .eco-footer__about { max-width: none; }

    /* Секции с горизонтальным CTA — в колонку */
    .eco-section-head-row { align-items: flex-start; }
    .eco-section-head-row .eco-btn { width: 100%; }

    /* Лайтбокс: боковые кнопки вниз, чтобы не перекрывали картинку */
    .eco-lightbox { padding: 16px; }
    .eco-lightbox__btn--prev { left: 16px;  top: auto; bottom: 20px; transform: none; }
    .eco-lightbox__btn--next { right: 16px; top: auto; bottom: 20px; transform: none; }
}

/* --------------------------------------------------------------------------
   ≤ 480px — узкие телефоны
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
    :root { --eco-gutter: 16px; }

    /* На телефоне карточка во всю ширину, но плитка 2×2 сохраняется:
       в одну колонку она вытянулась бы на пол-экрана */
    .eco-counters__grid {
        border-radius: var(--eco-r-lg);
        padding: 22px 18px;
        gap: 18px 12px;
    }
    .eco-counter { gap: 10px; }
    .eco-counter__icon { width: 42px; height: 42px; }
    .eco-counter__label { font-size: 14px; }

    .eco-case { flex: 0 0 88vw; }

    /* Карточки каталога в меню оставляем в две колонки и на узком экране:
       в одну список получался на несколько экранов прокрутки. */
    /* Картинку и отступы ужимаем — освободившееся место отдаём названию,
       чтобы длинные слова вроде «энергонезависимые» вставали целиком */
    .eco-nav__card-media { height: 38px; width: 38px; }
    .eco-nav__card { padding: 7px; }
    .eco-nav__card-link { gap: 8px; min-width: 0; }
    .eco-nav__card-title {
        font-size: 11.5px;
        line-height: 1.3;
        min-width: 0;
        /* страховка: если слово всё же не влезет, перенесём его,
           а не выпустим за край карточки */
        overflow-wrap: break-word;
    }

    .eco-cookie__actions { width: 100%; }
    .eco-cookie__actions .eco-btn { flex: 1; }
}

/* --------------------------------------------------------------------------
   Печать — убираем всё интерактивное
   -------------------------------------------------------------------------- */
@media print {
    .eco-progress,
    .eco-nav-scrim,
    .eco-cookie,
    .eco-lightbox,
    .eco-header__side,
    .eco-burger { display: none !important; }

    .eco-header { position: static; }
    body { background: #fff; }
    .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* End */
/* /bitrix/templates/ecostroy/css/01-tokens.css?17884631813038 */
/* /bitrix/templates/ecostroy/css/02-base.css?17882019817182 */
/* /bitrix/templates/ecostroy/css/03-layout.css?17886048373554 */
/* /bitrix/templates/ecostroy/css/04-ui.css?178872273712331 */
/* /bitrix/templates/ecostroy/css/05-chrome.css?178947601619261 */
/* /bitrix/templates/ecostroy/css/06-blocks.css?178862891429584 */
/* /bitrix/templates/ecostroy/css/08-sections.css?179181446557219 */
/* /bitrix/templates/ecostroy/css/breadcrumb.css?17860194372242 */
/* /bitrix/templates/ecostroy/css/catalog.css?179096442069794 */
/* /bitrix/templates/ecostroy/css/aside.css?17875871347600 */
/* /bitrix/templates/ecostroy/css/about.css?17891442148689 */
/* /bitrix/templates/ecostroy/css/faq.css?17867380447377 */
/* /bitrix/templates/ecostroy/css/modal.css?17867409424000 */
/* /bitrix/templates/ecostroy/css/07-responsive.css?178947638817661 */