/* =============================================================================
   NIBE — слой редизайна главной страницы (v2)

   Подключается ТОЛЬКО на главной и ТОЛЬКО последним, после style.css и
   mainpage.css, поэтому переопределяет их по порядку каскада. Разметка блейдов
   при этом почти не тронута — весь новый вид живёт здесь.

   Файл нарезан на секции с маркерами вида
       #### BLOCK: <имя> ####  ...  #### /BLOCK: <имя> ####
   Откатить один блок = удалить его секцию. Откатить всё = удалить файл и
   строку подключения в resources/views/Front/layouts/main.blade.php.

   Секции: tokens, base, type, hero, videos, manage, leader, icons, faq,
           pumps, guarantee, dealers, calculator
   ============================================================================= */


/* #### BLOCK: tokens #### -----------------------------------------------------
   Палитра и метрики. Сама по себе ничего не меняет — на неё опираются
   остальные секции, поэтому удалять её нужно последней. */

:root {
    /* Фирменные цвета NIBE оставлены как есть, добавлены производные оттенки */
    --n-red: #e84129;
    --n-red-600: #c8331c;
    --n-red-tint: rgba(232, 65, 41, 0.1);

    --n-ink: #14171a;
    --n-body: #4a5358;
    --n-muted: #79838a;

    --n-line: rgba(20, 23, 26, 0.12);
    --n-line-soft: rgba(20, 23, 26, 0.07);
    --n-bg-soft: #f1f1ef;

    --n-radius: 12px;
    --n-radius-sm: 8px;

    --n-shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.05), 0 4px 12px rgba(20, 23, 26, 0.06);
    --n-shadow-md: 0 8px 24px rgba(20, 23, 26, 0.12), 0 2px 6px rgba(20, 23, 26, 0.06);

    --n-ease: cubic-bezier(0.2, 0.7, 0.3, 1);

    /* Единая ширина контента. До этого на странице уживались четыре разные:
       1155px (шапка), 950px (manage), 924px (лидер), 909px (FAQ), 1380px (насосы). */
    --n-w: 1160px;

    /* Шкала кеглей. До этого на странице насчитывалось 14 разных размеров
       без системы: 12, 13, 14, 15, 16, 18, 20, 23, 25, 29.6, 30, 40, 43.6, 44.4. */
    --n-fs-xs: 13px;
    --n-fs-sm: 14px;
    --n-fs-base: 16px;
    --n-fs-lg: 18px;
    --n-fs-h3: 19px;
    --n-fs-h2: clamp(21px, 2vw, 26px);
    --n-fs-h1: clamp(24px, 2.6vw, 32px);
    --n-lh-body: 1.6;
}

/* #### /BLOCK: tokens #### */


/* #### BLOCK: base #### -------------------------------------------------------
   Общая типографика и состояния фокуса на странице. */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: rgba(232, 65, 41, 0.18);
}

/* Было line-height:30px на всех заголовках — у 33px шрифта строки налезали
   друг на друга. Переводим на относительный интерлиньяж. */
.cd-main-content h1,
.cd-main-content h2,
.cd-main-content h3,
.cd-main-content h5 {
    line-height: 1.28;
}

.cd-main-content a:focus-visible,
.cd-main-content button:focus-visible,
.cd-main-content [tabindex]:focus-visible {
    outline: 2px solid var(--n-red);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .cd-main-content *,
    .cd-main-content *::before,
    .cd-main-content *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* #### /BLOCK: base #### */


/* #### BLOCK: type #### -------------------------------------------------------
   Единая типографика страницы.

   Основной текст был задан одним общим правилом в style.css как
   15px / font-weight 300 / line-height 24px / letter-spacing 1px. Веса 300
   среди подключённых начертаний Montserrat нет (грузятся 400/500/600/700),
   так что браузер всё равно рисовал 400 — а разрядка в 1px на кириллице
   заметно разрыхляла текст. Перечисляю здесь те же селекторы с префиксом,
   чтобы перебить исходные по специфичности.

   Экран контроллера в блоке NIBE UPLINK (.mainUplink, .txt_val, .text_val)
   намеренно набран Arial — он имитирует шрифт прибора, и здесь не трогается. */

.cd-main-content .faq p,
.cd-main-content .header .header__description p,
.cd-main-content .item-description p,
.cd-main-content .search_blockbyserialnumber p,
.cd-main-content #online-calc p,
.cd-main-content .wrapper__description_open_text p,
.cd-main-content .network__description p,
.manage .manage__container .manage__content .manage__description p,
.slider .slides .slider__wrapper .content__block .block__item .item-description p,
.block .description__block .block-description p {
    font-size: var(--n-fs-base);
    font-weight: 400;
    line-height: var(--n-lh-body);
    letter-spacing: normal;
}

/* Разрядку оставляем только заглавным заголовкам — там она к месту */
.cd-main-content h1,
.cd-main-content h2,
.cd-main-content h3,
.cd-main-content h5 {
    letter-spacing: 0.02em;
}

.cd-main-content .manage__title h3,
.cd-main-content .pump__item .item-title h2,
.cd-main-content .faq-title,
.cd-main-content .header__title h1 {
    font-weight: 700;
}

/* Подписи под миниатюрами в карусели примеров были 12px */
.cd-main-content .example .example__item .item-title h3 {
    font-size: var(--n-fs-xs);
    line-height: 1.5;
}

/* #### /BLOCK: type #### */


/* #### BLOCK: hero #### -------------------------------------------------------
   Шапка главной: меню-таблетка, переключатель языка, правая колонка ссылок,
   кнопка «Запит розрахунку», иконки под баннером. */

/* Таблетка основного меню: было сплошное серое #d2d2d2 с жёсткой тенью.
   Ниже 831px меню превращается в вертикальный список внутри выпадающей
   панели, и там исходный стиль убирает подложку — не мешаем ему. */
@media screen and (min-width: 831px) {
    .block .container-block .content .menu__block .menu-1 {
        background: rgba(255, 255, 255, 0.94);
        -webkit-backdrop-filter: saturate(1.4) blur(6px);
        backdrop-filter: saturate(1.4) blur(6px);
        border-radius: 999px;
        padding: 6px 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16), 0 8px 24px rgba(0, 0, 0, 0.16);
    }
}

.block .container-block .content .menu__block .menu-1 ul {
    align-items: center;
}

.block .container-block .content .menu__block .menu-1 ul li a {
    display: inline-block;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--n-ink);
    /* без этого пункты из двух слов («Теплові насоси», «Про Nibe») ломаются
       на две строки, как только у ссылок появляются боковые поля */
    white-space: nowrap;
    transition: background-color 0.2s var(--n-ease), color 0.2s var(--n-ease);
}

.block .container-block .content .menu__block .menu-1 ul li {
    flex: 0 0 auto;
}

.block .container-block .content .menu__block .menu-1 ul li a:hover {
    background-color: var(--n-red-tint);
    color: var(--n-red-600);
}

.block .container-block .content .menu__block .menu-1 ul li:not(:last-child) {
    margin-right: 2px;
}

/* Переключатель языка — сегментированный контрол вместо двух блёклых ссылок */
.menu-1 .wrapper__localization.wrapper__localization-home {
    display: flex;
    align-items: center;
    gap: 2px;
}

.menu-1 .wrapper__localization.wrapper__localization-home a.nav-link {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--n-muted);
    line-height: 1.2;
    transition: background-color 0.2s var(--n-ease), color 0.2s var(--n-ease);
}

.menu-1 .wrapper__localization.wrapper__localization-home a.nav-link:hover {
    background-color: rgba(20, 23, 26, 0.06);
    color: var(--n-ink);
}

.menu-1 .wrapper__localization.wrapper__localization-home a.nav-link.active {
    background-color: var(--n-red);
    color: #fff;
}

/* Правая колонка ссылок. Было #bcbcbc по тёмно-серому — контраст ниже нормы.
   Правило заперто в десктопный диапазон: ниже 1040px меню превращается
   в выпадающую панель на светлом фоне, там свой цвет. */
@media screen and (min-width: 1041px) {
    .block .container-block .content .menu__block .menu-2 ul li a {
        display: inline-block;
        color: rgba(255, 255, 255, 0.82);
        font-size: 13px;
        font-weight: 400;
        padding: 3px 0;
        transition: color 0.2s var(--n-ease);
    }

    .block .container-block .content .menu__block .menu-2 ul li a:hover {
        color: #fff;
        text-decoration: none;
    }

    .block .container-block .content .menu__block .menu-2 ul li a::after {
        content: "";
        display: block;
        height: 1px;
        width: 0;
        margin-left: auto;
        background-color: var(--n-red);
        transition: width 0.25s var(--n-ease);
    }

    .block .container-block .content .menu__block .menu-2 ul li a:hover::after {
        width: 100%;
    }
}

/* В диапазоне 831–1040px меню уже выпадающая светлая панель, но цвет ссылок
   остаётся #bcbcbc от десктопа — на светлом фоне они практически не читались.
   Ниже 831px исходный стиль сам переключает их на тёмный. */
@media screen and (min-width: 831px) and (max-width: 1040px) {
    .block .container-block .content .menu__block .menu-2 ul li a {
        color: var(--n-body);
    }

    .block .container-block .content .menu__block .menu-2 ul li a:hover {
        color: var(--n-red);
        text-decoration: none;
    }
}

/* Заголовок под баннером */
.block .description__block .block-title h1,
.block .description__block .block-title h2 {
    line-height: 1.16;
}

.block .description__block .block-description p {
    color: var(--n-body);
    max-width: 62ch;
}

/* Кнопка «Запит розрахунку» — у неё инлайновые стили, поэтому !important */
.block .sidebar a[href="/zapros"] {
    border-radius: 8px !important;
    box-shadow: var(--n-shadow-sm);
    transition: background-color 0.25s var(--n-ease), transform 0.25s var(--n-ease),
        box-shadow 0.25s var(--n-ease);
}

.block .sidebar a[href="/zapros"]:hover {
    background: var(--n-red) !important;
    transform: translateY(-2px);
    box-shadow: var(--n-shadow-md);
}

/* Ряд иконок-подсказок под баннером */
.block .icons__block .collapse__icon .item-icon img {
    transition: filter 0.25s var(--n-ease), transform 0.25s var(--n-ease);
}

.block .icons__block .collapse__icon .item-icon:hover img {
    filter: grayscale(0);
    transform: translateY(-3px) scale(1.06);
}

/* #### /BLOCK: hero #### */


/* #### BLOCK: videos #### -----------------------------------------------------
   Все три секции с видео: пара под слайдером, две врезки в блоке «лідер»
   и ряд из четырёх внизу. */

.videos__block {
    margin: 72px 0;
}

.videos__block .videos__items {
    width: min(var(--n-w), 92vw);
    margin-left: auto;
    margin-right: auto;
    gap: 24px;
}

/* Карточка ролика: скругление, тень, подъём по наведению */
.videos__block .videos__items .videos__wrapper {
    width: auto;
    flex: 1 1 260px;
    max-width: 320px;
    margin: 0;
    border-radius: var(--n-radius);
    overflow: hidden;
    box-shadow: var(--n-shadow-sm);
    transition: transform 0.35s var(--n-ease), box-shadow 0.35s var(--n-ease);
}

.videos__block .videos__items .videos__wrapper:hover {
    transform: translateY(-4px);
    box-shadow: var(--n-shadow-md);
}

/* Превью тянется по ширине карточки вместо фиксированных 290x180 / 500x280 */
.videos__block .videos__items .videos__wrapper .videos__item .item-logo {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
}

/* Затемнение было сплошным чёрным с opacity .47 — меняем на градиент,
   он меньше съедает картинку и даёт контраст кнопке */
.videos__block .videos__items .videos__wrapper .videos__item .item-logo::before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0.44) 100%);
    background-color: transparent;
    opacity: 1;
    transition: opacity 0.35s var(--n-ease);
}

.videos__block .videos__items .videos__wrapper:hover .videos__item .item-logo::before {
    opacity: 0.72;
}

/* Кнопка play: было 50px, белая, полупрозрачная, с почти невидимым значком */
.videos__block .videos__item .video {
    width: 64px;
    height: 64px;
    line-height: 64px;
    opacity: 1;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.32);
    transition: transform 0.3s var(--n-ease), background-color 0.3s var(--n-ease);
}

.videos__block .videos__item .video-main .video i {
    width: auto;
    font-size: 20px;
    color: var(--n-red);
    /* оптическая компенсация: треугольник визуально смещён влево */
    transform: translateX(2px);
    transition: color 0.3s var(--n-ease);
}

.videos__block .videos__items .videos__wrapper:hover .videos__item .video {
    transform: scale(1.08);
    background-color: var(--n-red);
}

.videos__block .videos__items .videos__wrapper:hover .videos__item .video-main .video i {
    color: #fff;
}

/* Пульсирующее кольцо подгоняем под новый размер кнопки */
.videos__block .videos__item .waves {
    width: 120px;
    height: 120px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.85);
    right: -28px;
    bottom: -28px;
}

/* Пара крупных роликов под слайдером */
.slider__videos .videos__items .videos__wrapper,
.slider__videos .videos__items .videos__wrapper:first-child,
.slider__videos .videos__items .videos__wrapper:last-child {
    flex: 1 1 420px;
    max-width: 520px;
    margin: 0;
}

.slider__videos .videos__items .videos__wrapper .videos__item .item-logo {
    aspect-ratio: 16 / 9;
}

/* Врезки в блоке «лідер»: два отдельных .videos__block внутри плавающей колонки */
.header .header__video .videos__block {
    margin: 0 0 20px;
}

.header .header__video .videos__block .videos__items {
    width: 100%;
}

.header .header__video .videos__block .videos__items .videos__wrapper {
    flex: 1 1 100%;
    max-width: none;
}

@media screen and (max-width: 600px) {
    .videos__block {
        margin: 48px 0;
    }

    .videos__block .videos__items {
        width: calc(100% - 32px);
        gap: 16px;
    }

    .videos__block .videos__items .videos__wrapper,
    .slider__videos .videos__items .videos__wrapper,
    .slider__videos .videos__items .videos__wrapper:first-child,
    .slider__videos .videos__items .videos__wrapper:last-child {
        flex: 1 1 100%;
        max-width: none;
    }

    .videos__block .videos__item .video {
        width: 54px;
        height: 54px;
        line-height: 54px;
    }
}

/* #### /BLOCK: videos #### */


/* #### BLOCK: manage #### -----------------------------------------------------
   «Розумний дім»: семь текстовых пунктов слева и три картинки справа.
   Было: колонка текста 459px внутри контейнера 950px и картинки,
   растянутые space-between на 1900px высоты — отсюда пустые провалы. */

.manage {
    padding: 64px 20px;
    background-color: var(--n-bg-soft);
}

.manage .manage__container {
    width: min(var(--n-w), 92vw);
    display: block;
}

/* Семь пунктов — карточки в две колонки вместо колонки на 1800px.
   Первый пункт («Контроль струму») длиннее остальных и идёт во всю ширину,
   после него оставшиеся шесть ровно ложатся в три ряда по два. */
.manage .manage__container > div:first-child {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    min-width: 0;
}

.manage .manage__container .manage__content {
    /* перебиваем .mt-5 из разметки */
    margin: 0 !important;
    background-color: #fff;
    border: 1px solid var(--n-line-soft);
    border-radius: var(--n-radius);
    padding: 26px 28px;
    min-width: 0;
}

.manage .manage__container .manage__content:first-child {
    grid-column: 1 / -1;
}

.manage .manage__container .manage__content .manage__title {
    margin-bottom: 10px;
}

.manage .manage__container .manage__content .manage__title h3 {
    font-size: var(--n-fs-h3);
    line-height: 1.3;
}

/* Заголовки пунктов — ссылки на страницы-подробности, но выглядели как
   обычный текст. Стрелка делает это очевидным. */
.manage .manage__container .manage__content .manage__title h3 a {
    color: var(--n-ink);
    transition: color 0.2s var(--n-ease);
}

.manage .manage__container .manage__content .manage__title h3 a::after {
    content: "→";
    display: inline-block;
    margin-left: 8px;
    color: var(--n-red);
    transition: transform 0.25s var(--n-ease);
}

.manage .manage__container .manage__content .manage__title h3 a:hover {
    color: var(--n-red);
    text-decoration: none;
}

.manage .manage__container .manage__content .manage__title h3 a:hover::after {
    transform: translateX(5px);
}

.manage .manage__container .manage__content .manage__description p {
    width: auto;
    max-width: 74ch;
    color: var(--n-body);
}

.manage .manage__container .manage__content .manage__description p:last-child {
    margin-bottom: 0;
}

/* Ссылка «Приклад» внутри текста была дефолтного бутстраповского синего */
.manage .manage__container .manage__content .manage__description a {
    color: var(--n-red);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s var(--n-ease);
}

.manage .manage__container .manage__content .manage__description a:hover {
    color: var(--n-red-600);
}

/* Ряд из трёх снимков оборудования убран по просьбе: карточки читаются
   сами по себе, а снимки только добавляли высоты. Разметка на месте —
   чтобы вернуть, достаточно удалить это правило. */
.manage .manage__container .manage__logo {
    display: none;
}

@media screen and (max-width: 985px) {
    .manage {
        padding: 48px 0;
    }

    .manage .manage__container > div:first-child {
        grid-template-columns: minmax(0, 1fr);
    }

    .manage .manage__container .manage__content:first-child {
        grid-column: auto;
    }

    /* Исходный стиль центрирует пункты на узких экранах, но абзацы внутри
       всё равно прижаты влево — получался центрированный заголовок
       над левым текстом. */
    .manage .manage__container .manage__content {
        text-align: left;
    }

    /* Заголовок-ссылка давал тач-цель высотой 22px. Растим до ~38px,
       не сдвигая текст: компенсируем отрицательным margin сверху. */
    .manage .manage__container .manage__content .manage__title h3 a {
        display: inline-block;
        padding: 8px 0;
        margin-top: -8px;
    }
}

@media screen and (max-width: 600px) {
    .manage .manage__container .manage__content {
        padding: 20px;
    }

}

/* #### /BLOCK: manage #### */


/* #### BLOCK: leader #### -----------------------------------------------------
   Секция «Тепловий насос NIBE = сучасне опалення від лідера галузі»:
   заголовок, плавающая колонка с двумя роликами, абзацы текста. */

.header .header__wrapper {
    width: min(var(--n-w), 92vw);
    padding-top: 8px;
}

.header .header__title h1 {
    font-size: var(--n-fs-h1);
    line-height: 1.25;
    font-weight: 700;
    text-align: left;
    /* было padding:21px — заголовок оказывался сдвинут вправо
       относительно текста под ним */
    padding: 0;
    margin-bottom: 28px;
}

.header .header__description {
    color: var(--n-body);
}

.header .header__description p {
    max-width: 70ch;
}

/* Ролики были float:right, и четыре абзаца обтекали их рваным краем:
   первые обрывались на 855px, следующие шли на всю ширину.
   Явные две колонки убирают эту рваность. Порядок в разметке обратный
   нужному, поэтому order. */
.header .wrapper__video {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: clamp(28px, 3vw, 48px);
    align-items: start;
}

.header .header__video {
    float: none;
    width: auto;
    margin: 0;
    order: 2;
}

.header .wrapper__description {
    order: 1;
    min-width: 0;
}

/* Первый абзац — вводный: в нём ключевые цифры (20400 працівників,
   2,865 млрд євро). Даём ему вес, чтобы стена из четырёх абзацев
   получила точку входа. */
.header .wrapper__description .description__block .header__description:first-child p {
    font-size: var(--n-fs-lg);
    line-height: 1.65;
    color: var(--n-ink);
}

.header .wrapper__description .description__block .header__description strong {
    font-weight: 600;
    color: var(--n-ink);
}

@media screen and (max-width: 860px) {
    .header .wrapper__video {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .header .header__video {
        order: 0;
    }

    .header .wrapper__description {
        order: 1;
    }
}

/* Ниже 696px исходный стиль центрирует основной текст — на узком экране
   рваный центрированный абзац читается хуже прижатого влево. */
@media screen and (max-width: 696px) {
    .header .header__description {
        text-align: left;
    }
}

/* #### /BLOCK: leader #### */


/* #### BLOCK: icons #### ------------------------------------------------------
   Плитка из девяти иконок-ссылок. Было flex + justify-content:around:
   неравные промежутки и рваный правый край. Стало — сетка равных колонок.

   Замечание: подпись и серая карточка «зашиты» внутрь самих SVG
   (public/buttons/*.svg, единый viewBox 239.1x302.1), поэтому CSS правит
   только размер, ритм и поведение, а не типографику подписей. */

.header .header__icon {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: 14px;
    justify-content: initial !important;
}

.header .header__icon .icon__item {
    margin: 0;
    min-width: 0;
}

.header .header__icon .icon__item a {
    display: block;
    border-radius: var(--n-radius-sm);
    transition: transform 0.25s var(--n-ease), filter 0.25s var(--n-ease);
}

.header .header__icon .icon__item a:hover {
    transform: translateY(-4px);
    filter: drop-shadow(0 10px 18px rgba(20, 23, 26, 0.18));
}

.header .header__icon .icon__item .item-icon {
    width: 100%;
    height: auto;
    aspect-ratio: 239 / 302;
}

.header .header__icon .icon__item .item-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

@media screen and (max-width: 1119px) {
    .header .header__icon {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Плиток девять, поэтому 4 колонки давали 4+4+1 — одинокая плитка в
   последнем ряду. Три колонки делят девятку ровно. */
@media screen and (max-width: 860px) {
    .header .header__icon {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media screen and (max-width: 560px) {
    .header .header__icon {
        gap: 10px;
    }
}

/* #### /BLOCK: icons #### */


/* #### BLOCK: faq #### --------------------------------------------------------
   Аккордеон «Найчастіші питання». Микроразметка schema.org в блейде
   не тронута — правится только внешний вид. */

.faq {
    margin-top: 56px;
    padding-bottom: 8px;
}

.faq .site-container {
    width: min(var(--n-w), 92vw);
}

.faq .faq-title {
    font-size: var(--n-fs-h2);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 8px;
}

.faq .faq__item {
    border-top: 1px solid var(--n-line);
}

.faq .faq__item:last-child {
    border-bottom: 1px solid var(--n-line);
}

.faq .faq__item .faq__item__title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
    padding: 18px 0;
    gap: 16px;
    color: var(--n-ink);
    transition: color 0.2s var(--n-ease);
}

.faq .faq__item .faq__item__title:hover {
    color: var(--n-red);
}

.faq .faq__item .faq__item__title .faq__item__title__arrow {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background-color: rgba(20, 23, 26, 0.05);
    color: var(--n-body);
}

.faq .faq__item .faq__item__title:hover .faq__item__title__arrow {
    background-color: var(--n-red-tint);
    color: var(--n-red);
}

.faq .faq__item .faq__item__title .faq__item__title__arrow.active {
    background-color: var(--n-red);
    color: #fff;
}

.faq .faq__item .faq__answer.active {
    padding-bottom: 20px;
    /* раскрытие сделано через max-height, и исходный потолок в 1000px
       после укрупнения основного текста стал впритык на узких экранах */
    max-height: 2400px;
}

.faq .faq__item .faq__answer p {
    max-width: 78ch;
    color: var(--n-body);
}

/* #### /BLOCK: faq #### */


/* #### BLOCK: pumps #### ------------------------------------------------------
   Три блока про типы насосов. Было: flex, картинка по центру серой плашки
   с полями сверху и снизу, текст 44% ширины, и разбивка на одну колонку
   уже при 1321px. Стало: сетка 1:1 с картинкой во всю половину. */

.pump__block {
    width: min(var(--n-w), 100%);
    margin-left: auto;
    margin-right: auto;
}

.pump__block .pump__item {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    justify-content: initial !important;
    gap: 0;
    padding: 0 !important;
    overflow: hidden;
    border-radius: var(--n-radius);
    background-color: var(--n-bg-soft);
}

.pump__block .pump__item.pump__item-active {
    background-color: #e6e7e4;
}

.pump__block .pump__item + .pump__item {
    margin-top: 24px;
}

.pump__block .pump__item .item-logo {
    min-height: 100%;
    overflow: hidden;
}

.pump__block .pump__item .item-logo img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    object-fit: cover;
    display: block;
}

.pump__block .pump__item .item-content {
    width: auto !important;
    padding: clamp(28px, 3.5vw, 56px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pump__block .pump__item .item-content .item-title {
    margin-top: 0;
    margin-bottom: 18px;
}

.pump__block .pump__item .item-content .item-title h2 {
    font-size: var(--n-fs-h2) !important;
    line-height: 1.25;
}

.pump__block .pump__item .item-content .item-description {
    font-size: var(--n-fs-base);
    color: var(--n-body);
}

.pump__block .pump__item .item-content .item-description p {
    max-width: 60ch;
}

@media screen and (max-width: 900px) {
    .pump__block .pump__item {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Порядок картинки и текста в разметке чередуется — приводим к одному виду */
    .pump__block .pump__item .item-logo {
        order: -1;
    }

    .pump__block .pump__item .item-logo img {
        min-height: 220px;
        max-height: 280px;
    }
}

/* #### /BLOCK: pumps #### */


/* #### BLOCK: guarantee #### --------------------------------------------------
   «Гарантія та сервіс від виробника» с поиском по серийному номеру.
   Блок отдаёт Vue-компонент searchBySerialNumber.vue, разметку не трогаем —
   правится только оформление, чтобы не требовалась пересборка laravel-mix. */

.search_blockbyserialnumber .search__block {
    width: min(760px, 92vw);
    margin-left: auto;
    margin-right: auto;
    background-color: #fff;
    border: 1px solid var(--n-line-soft);
    border-radius: 16px;
    padding: clamp(28px, 3vw, 44px);
    box-shadow: var(--n-shadow-sm);
}

.search_blockbyserialnumber .search__block > div {
    width: 100%;
}

/* Заголовок — ссылка на /guarantee, и он был покрашен дефолтным
   бутстраповским синим: единственное синее пятно на всей странице */
.search_blockbyserialnumber .search__title h2 {
    margin-bottom: 18px !important;
}

.search_blockbyserialnumber .search__title h2 a {
    color: var(--n-ink);
    font-size: var(--n-fs-h2);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.2s var(--n-ease), border-color 0.2s var(--n-ease);
}

.search_blockbyserialnumber .search__title h2 a:hover {
    color: var(--n-red);
    border-bottom-color: var(--n-red);
}

/* Селектор с .search__title — иначе исходное правило той же длины
   выигрывает и оставляет боковые поля по 56px */
.search_blockbyserialnumber .search__title .wrapper__text {
    padding: 0;
}

.search_blockbyserialnumber .wrapper__text p {
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
    color: var(--n-body);
}

/* Поле было 35px, кнопка 46px — стояли на разных базовых линиях */
.search_blockbyserialnumber .search__block-input {
    gap: 12px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.search_blockbyserialnumber .search__block-input .ml-3 {
    margin-left: 0 !important;
}

.search_blockbyserialnumber .search__input {
    flex: 1 1 300px;
    max-width: 420px;
}

.search_blockbyserialnumber .search__input .form-control {
    height: 48px;
    padding: 0 14px;
    font-size: 15px;
    border-radius: 10px;
    border: 1px solid var(--n-line);
}

.search_blockbyserialnumber .search__input .form-control:focus {
    border-color: var(--n-red);
    box-shadow: 0 0 0 3px var(--n-red-tint);
}

.search_blockbyserialnumber .search__button {
    height: 48px;
    line-height: 48px !important;
    padding: 0 28px;
    border-radius: 10px;
    background-color: var(--n-red) !important;
    border: 1px solid var(--n-red) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    transition: background-color 0.25s var(--n-ease);
}

.search_blockbyserialnumber .search__button:hover:not(:disabled) {
    background-color: var(--n-red-600) !important;
    border-color: var(--n-red-600) !important;
}

/* Вторичное действие «Записатись на ТО» было третьей по счёту кнопкой
   в блоке и третьего же цвета (синий btn-primary рядом с чёрной и красной).
   Рядом с ним в разметке лежат ещё два .mb-3 со скрытыми служебными
   кнопками — их отступы накапливали ~30px пустоты внизу карточки. */
.search_blockbyserialnumber .mb-3 {
    margin-bottom: 0 !important;
}


.search_blockbyserialnumber .btn.btn-primary {
    margin-top: 22px;
    height: 44px;
    padding: 0 22px;
    border-radius: 10px;
    background-color: transparent !important;
    border: 1px solid var(--n-line) !important;
    color: var(--n-ink) !important;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.2s var(--n-ease), border-color 0.2s var(--n-ease),
        background-color 0.2s var(--n-ease);
}

.search_blockbyserialnumber .btn.btn-primary:hover {
    background-color: var(--n-red-tint) !important;
    border-color: var(--n-red) !important;
    color: var(--n-red) !important;
}

.search_blockbyserialnumber .wrapper__button i {
    color: var(--n-muted);
    transition: color 0.2s var(--n-ease);
}

.search_blockbyserialnumber .wrapper__button i:hover {
    color: var(--n-red);
}

/* Ниже 570px исходный стиль разворачивает форму в колонку, и flex-basis
   начинает работать как высота — поле раздувалось до 300px. */
@media screen and (max-width: 900px) {
    /* Заголовок блока — ссылка на /guarantee, тач-цель была 26px */
    .search_blockbyserialnumber .search__title h2 a {
        display: inline-block;
        padding: 6px 0;
    }
}

@media screen and (max-width: 570px) {
    .search_blockbyserialnumber .search__block-input {
        padding: 0;
    }

    .search_blockbyserialnumber .search__input {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
    }

    .search_blockbyserialnumber .search__block-input .ml-3 {
        width: 100%;
    }

    .search_blockbyserialnumber .search__button {
        width: 100%;
    }
}

/* На узком экране текст схлопнут до 50-55px и обрывается посреди слова.
   Плавное затухание показывает, что это свёрнутый текст, а не обрезка. */
@media screen and (max-width: 500px) {
    .search_blockbyserialnumber .wrapper__text:not(.wrapper__text-active) {
        -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
    }
}

/* #### /BLOCK: guarantee #### */


/* #### BLOCK: dealers #### ----------------------------------------------------
   «NIBE — мережа дилерських центрів». Карта Украины занимала 938x625px плюс
   заголовок — около 740px экрана под элемент, которым пользуется меньшинство.
   Сворачиваем под кнопку: заголовок и описание видны всегда, карта
   разворачивается по клику.

   Кнопку вставляет скрипт в resources/views/Front/mainpage/mainpage.blade.php
   (карту рисует Vue-компонент, разметку которого не трогаем). Если скрипт
   не отработает, карта останется развёрнутой — без js-крючка .network__map
   класс схлопывания не получает. */

.network {
    width: min(var(--n-w), 92vw);
    margin: 0 auto;
    text-align: center;
}

.network .network__title h3 {
    font-size: var(--n-fs-h2);
    font-weight: 700;
    margin-bottom: 12px;
}

.network .network__description p {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: var(--n-body);
}

.network__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    height: 48px;
    padding: 0 26px;
    border: 1px solid var(--n-red);
    border-radius: 10px;
    background-color: var(--n-red);
    color: #fff;
    font-size: var(--n-fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.25s var(--n-ease), border-color 0.25s var(--n-ease);
}

.network__toggle:hover {
    background-color: var(--n-red-600);
    border-color: var(--n-red-600);
}

.network__toggle::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.25s var(--n-ease);
}

.network__toggle[aria-expanded="true"]::after {
    transform: translateY(2px) rotate(-135deg);
}

.network__map.network__map--collapsible {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s var(--n-ease), opacity 0.3s var(--n-ease);
}

.network__map.network__map--collapsible.network__map--open {
    max-height: 1400px;
    opacity: 1;
}

.network__map svg {
    width: 100%;
    height: auto;
    max-width: 820px;
}

/* #### /BLOCK: dealers #### */


/* #### BLOCK: calculator #### -------------------------------------------------
   «Вкажіть опалювану площу» — подбор модели по площади.
   Блок рисует Vue-компонент modFilter.vue, разметку не трогаем.

   Что чинится: синий ползунок (дефолт Bootstrap), названия моделей кеглем
   12px, все значения параметров подряд красным, серая карточка-подложка
   на белом фоне. */

.mod__filter #mod__calculator .col-md-9 {
    flex: 0 0 100%;
    max-width: min(var(--n-w), 100%);
    /* фон #F8F8F8 прибит инлайном в компоненте */
    background-color: #fff !important;
    border: 1px solid var(--n-line-soft);
    border-radius: 16px;
    box-shadow: var(--n-shadow-sm);
    padding-bottom: 24px !important;
}

/* :not(.header__card) обязателен — названия моделей в карточках ниже
   тоже размечены h5 внутри этого же контейнера */
.mod__filter #mod__calculator h5:not(.header__card) {
    font-size: var(--n-fs-h3);
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-top: 26px !important;
    margin-bottom: 22px !important;
}

.mod__filter .description {
    color: var(--n-body);
}

.mod__filter .description a {
    color: var(--n-red);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Блок ввода площади: белая карточка на белом не читалась как отдельный
   элемент управления — меняем местами, подложка теперь у него */
.mod__filter .card.calculate__container {
    background-color: var(--n-bg-soft);
    border: 0;
    border-radius: var(--n-radius);
    padding: 22px 24px 14px !important;
}

.mod__filter .card.calculate__container form > .form-group.d-flex {
    gap: 8px;
    font-size: var(--n-fs-base);
    color: var(--n-body);
    margin-bottom: 20px;
}

.mod__filter .card.calculate__container .form-control.w-25 {
    width: 130px !important;
    height: 48px;
    margin-right: 0 !important;
    border: 1px solid var(--n-line);
    border-radius: 10px;
    background-color: #fff;
    font-size: var(--n-fs-lg);
    font-weight: 600;
    color: var(--n-ink);
}

.mod__filter .card.calculate__container .form-control.w-25:focus {
    border-color: var(--n-red);
    box-shadow: 0 0 0 3px var(--n-red-tint);
}

/* Подписи границ прибиты инлайновым font-size:13px */
.mod__filter .card.calculate__container form .d-flex.justify-content-between > div {
    font-size: var(--n-fs-xs) !important;
    color: var(--n-muted);
}

/* Ползунок. Bootstrap красит его в #007bff и снимает нативный вид, поэтому
   accent-color не сработает — переопределяем псевдоэлементы вручную.
   Пройденную часть трека Chrome и Safari сами не красят: долю считает
   скрипт в mainpage.blade.php и кладёт в --n-range-fill. В Firefox то же
   самое делает нативный ::-moz-range-progress. */
.mod__filter .custom-range {
    height: 24px;
}

.mod__filter .custom-range:focus {
    outline: none;
}

.mod__filter .custom-range::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--n-red) 0,
        var(--n-red) var(--n-range-fill, 0%),
        rgba(20, 23, 26, 0.14) var(--n-range-fill, 0%),
        rgba(20, 23, 26, 0.14) 100%
    );
}

.mod__filter .custom-range::-webkit-slider-thumb {
    width: 22px;
    height: 22px;
    margin-top: -8px;
    background-color: #fff;
    border: 3px solid var(--n-red);
    box-shadow: 0 2px 8px rgba(20, 23, 26, 0.25);
    transition: transform 0.15s var(--n-ease);
}

.mod__filter .custom-range:active::-webkit-slider-thumb {
    transform: scale(1.12);
}

.mod__filter .custom-range::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background-color: rgba(20, 23, 26, 0.14);
}

.mod__filter .custom-range::-moz-range-progress {
    height: 6px;
    border-radius: 999px;
    background-color: var(--n-red);
}

.mod__filter .custom-range::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 3px solid var(--n-red);
    box-shadow: 0 2px 8px rgba(20, 23, 26, 0.25);
}

/* Всплывающее значение над ползунком было серым #cecece */
.mod__filter .bubble {
    background-color: var(--n-ink);
    color: #fff;
    font-size: var(--n-fs-xs);
    font-weight: 600;
    border-radius: 6px;
    padding: 5px 10px;
    white-space: nowrap;
}

.mod__filter .bubble::after {
    width: 0;
    height: 0;
    background: transparent;
    border: 5px solid transparent;
    border-top-color: var(--n-ink);
    bottom: -10px;
    transform: translateX(-50%);
}

/* Заголовки двух колонок были 16px обычного веса и терялись */
.mod__filter .calculate__container .row > .col-md-6 > h6 {
    font-size: var(--n-fs-lg);
    font-weight: 700;
    color: var(--n-ink);
    padding-left: 0 !important;
    margin-bottom: 14px !important;
}

/* Карточка модели */
.mod__filter .content_block .card {
    border: 1px solid var(--n-line-soft);
    border-radius: 10px;
    transition: border-color 0.2s var(--n-ease), box-shadow 0.2s var(--n-ease);
}

.mod__filter .content_block .card:hover {
    border-color: var(--n-red);
    box-shadow: var(--n-shadow-sm);
}

.mod__filter .content_block .card-header {
    background-color: transparent;
    border-bottom: 0;
    padding: 12px 14px !important;
}

/* Название модели было 12px — это основной элемент выбора в блоке */
.mod__filter .header__title:not(.uplink__button) {
    font-size: var(--n-fs-sm);
    font-weight: 500;
    line-height: 1.4;
    color: var(--n-ink);
}

.mod__filter .header__card i {
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--n-red-tint);
    color: var(--n-red);
    font-size: 11px;
    transition: background-color 0.2s var(--n-ease), color 0.2s var(--n-ease);
}

.mod__filter .content_block .card:hover .header__card i {
    background-color: var(--n-red);
    color: #fff;
}

.mod__filter .content__card {
    font-size: var(--n-fs-xs);
    line-height: 1.7;
    color: var(--n-body);
    padding: 2px 14px 14px;
}

.mod__filter .content__card a {
    font-size: var(--n-fs-xs);
    color: var(--n-red);
    font-weight: 600;
}

/* Было color:red на каждом значении подряд — акцент терял смысл */
.mod__filter .yes__no {
    color: var(--n-ink);
    font-weight: 600;
}

.mod__filter .content_block.scroll {
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
}

.mod__filter .content_block.scroll::-webkit-scrollbar-thumb {
    background-color: rgba(20, 23, 26, 0.28);
}

.mod__filter .content_block.scroll::-webkit-scrollbar-thumb:hover {
    background-color: var(--n-red);
}

@media screen and (max-width: 900px) {
    /* Ползунок был 24px высотой — попасть пальцем тяжело.
       Трек остаётся тонким, растёт только область захвата. */
    .mod__filter .custom-range {
        height: 44px;
    }

    .mod__filter .custom-range::-webkit-slider-thumb {
        width: 26px;
        height: 26px;
        margin-top: -10px;
    }

    .mod__filter .custom-range::-moz-range-thumb {
        width: 20px;
        height: 20px;
    }

    .mod__filter .card.calculate__container {
        padding: 18px 16px 10px !important;
    }

    .mod__filter .calculate__container {
        width: 96%;
    }
}

/* #### /BLOCK: calculator #### */