/* ======================================================
   1. РАЗДЕЛЕНИЕ ВИДИМОСТИ (Desktop vs Mobile)
   ====================================================== */
.header-main__col-search, 
.desktop-cart { 
    display: block; 
}

.header-main__col-menu, 
.mobile-toolbar-icons, 
.header-mobile__placeholder { 
    display: none; 
}


/* ======================================================
   2. ДЕСКТОПНАЯ ВЕРСИЯ (экраны от 1025px)
   ====================================================== */
@media (min-width: 1025px) {
    /* Скрытие мобильных иконок на ПК */
    .mobile-toolbar-icons {
        display: none !important;
    }

    /* Кнопка "Каталог" */
    .btn-modern-catalog {
        display: inline-flex; 
        align-items: center; 
        justify-content: center;
        height: 48px; 
        min-width: 48px; 
        padding: 0 15px;
        background: #11497b; 
        color: #ffffff; 
        border: none; 
        border-radius: 5px;
        font-family: 'Manrope', sans-serif; 
        font-size: 14px; 
        font-weight: 500;
        cursor: pointer; 
        gap: 10px; 
        transition: background 0.4s ease;
        text-decoration: none; 
        white-space: nowrap; 
        box-shadow: none; 
        margin: 0;
    }
    .btn-modern-catalog:hover, 
    .hamburger-wrapper-desktop:hover .btn-modern-catalog { 
        background: #0e3c65; 
    }
    .btn-modern-catalog .hamburger__icon svg { 
        width: 14px; 
        height: 14px; 
        fill: currentColor; 
    }
    .hamburger-wrapper-desktop { 
        position: relative; 
    }

    /* Поиск Битрикс (Десктоп) */
    .header-main__col-search #title-search-input {
        height: 48px; 
        border: 2px solid #11497b; 
        border-right: none;
        border-radius: 5px 0 0 5px; 
        box-shadow: none !important;
    }
    .header-main__col-search .btn-outline-secondary {
        height: 48px; 
        width: 55px; 
        background: #11497b; 
        border: 2px solid #11497b;
        border-radius: 0 5px 5px 0; 
        color: white;
    }
    .header-main__col-search .btn-outline-secondary:hover { 
        background: #0e3c65; 
        border-color: #0e3c65; 
    }
}


/* ======================================================
   3. МОБИЛЬНАЯ ШАПКА (экраны до 1024px)
   ====================================================== */
@media (max-width: 1024px) {
    /* Меняем видимость */
    .header-main__col-menu, 
    .mobile-toolbar-icons, 
    .header-mobile__placeholder { 
        display: block; 
    }
    .mobile-toolbar-icons { 
        display: flex; 
    }
    .header-panel, 
    .header-main__col-search, 
    .desktop-cart { 
        display: none !important; 
    }

    /* Фиксация шапки при скролле */
    .header-mobile__placeholder { 
        height: 50px; 
    }
    .header-main { 
        position: fixed !important; 
        top: 0; 
        left: 0; 
        width: 100%; 
        padding: 0; 
        z-index: 5001 !important; 
        box-shadow: 0 1px 0 0 #eeeeee; 
        background: #ffffff; 
    }
    .header-main__container { 
        padding: 0 10px; 
        min-height: 50px; 
    }
    .header-main__row { 
        flex-wrap: nowrap; 
    }
    
    /* Сетка внутри мобильной шапки */
    .header-main__col-menu { 
        order: 1; 
        flex-shrink: 0; 
    }
    .header-main__col-logo { 
        order: 2; 
        flex-grow: 1; 
        text-align: center; 
        padding: 0 10px; 
    }
    .header-main__col-logo .logo img { 
        max-height: 24px; 
        max-width: 100%; 
        object-fit: contain; 
    }
    .header-main__col-toolbar { 
        order: 3; 
        flex-shrink: 0; 
        display: flex; 
        align-items: center; 
        gap: 10px; 
    }
}


/* ======================================================
   4. СОВМЕЩЕННЫЕ ИКОНКИ (Телефон + Поиск)
   ====================================================== */
.mobile-toolbar-icons {
    display: flex; 
    align-items: center; 
    gap: 4px;
    background: #f4f7f9; 
    padding: 4px; 
    border-radius: 10px;
}

.modern-icon-btn {
    background: none; 
    border: none; 
    width: 38px; 
    height: 38px;
    display: flex; 
    align-items: center; 
    justify-content: center;
    color: #11497b; 
    font-size: 16px; 
    text-decoration: none !important;
    transition: all 0.2s ease; 
    border-radius: 8px; 
    cursor: pointer;
    padding: 0; 
    margin: 0;
}

.modern-icon-btn:active { 
    background: #e2e8f0; 
    transform: scale(0.9); 
}

/* Фикс для точного выравнивания иконок FontAwesome */
.modern-icon-btn i { 
    font-weight: 900; 
    line-height: 1; 
    display: block; 
}

/* Разделитель между кнопками */
.modern-icon-btn:not(:last-child) { 
    border-right: 1px solid rgba(0, 0, 0, 0.05); 
}


/* ======================================================
   5. ВЫДВИЖНОЕ МЕНЮ (НАВИГАЦИЯ)
   ====================================================== */
/* Кнопка бургер */
.mobile-menu__trigger { 
    font-size: 24px; 
    padding: 0; 
    background: transparent; 
    border: none; 
    width: 44px; 
    height: 44px; 
    color: #11497b; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 12px; 
    transition: background 0.3s ease;
}
.mobile-menu__trigger:active { 
    background: rgba(17, 73, 123, 0.1); 
}

/* Размытие фона (Glassmorphism) */
body.is-overflow { overflow: hidden; }
body.is-overflow::before { 
    content: ''; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background-color: rgba(15, 23, 42, 0.4); 
    backdrop-filter: blur(8px); 
    -webkit-backdrop-filter: blur(8px);
    z-index: 5999; 
    transition: opacity 0.4s ease;
}

/* Панель меню (используется для Каталога и Контактов) */
.mobile-menu { 
    display: flex; 
    flex-direction: column; 
    position: fixed; 
    z-index: 6000; 
    top: 0; left: 0; 
    width: 100%; 
    max-width: 320px; 
    height: 100%; 
    transform: translateX(-100%); 
    background-color: #f8fafc; 
    box-shadow: 8px 0 30px rgba(0, 0, 0, 0.1); 
    border-radius: 0 24px 24px 0; 
    opacity: 0; 
    visibility: hidden; 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s ease; 
}
.mobile-menu.is-active { 
    opacity: 1; 
    visibility: visible; 
    transform: translateX(0); 
}

/* Шапка меню */
.mobile-menu__header { 
    display: flex; 
    align-items: center; 
    padding: 15px 20px; 
    height: 70px; 
    background-color: #ffffff; 
    border-radius: 0 24px 0 0; 
    border-bottom: 1px solid rgba(0,0,0,0.04); 
    flex-shrink: 0; 
}
.mobile-menu__header-title { 
    font-size: 18px; 
    font-weight: 700; 
    color: #0f172a; 
    flex-grow: 1; 
}
.mobile-menu__close { 
    width: 40px; 
    height: 40px; 
    background: #f1f5f9; 
    border-radius: 50%; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #64748b; 
    transition: all 0.3s ease;
}
.mobile-menu__close:active { 
    background: #e2e8f0; 
    transform: scale(0.95); 
}
.mobile-menu__close svg { 
    fill: none; 
    stroke: currentColor; 
    stroke-width: 2.5; 
    width: 20px; 
    height: 20px; 
    stroke-linecap: round; 
}

/* Контент меню */
.mobile-menu__content { 
    width: 100%; 
    padding: 24px 20px; 
    flex-grow: 1; 
    overflow-x: hidden; 
    overflow-y: auto; 
}
.mobile-collections { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
}

/* Карточки категорий (Soft UI) */
.mobile-collections__item > a { 
    display: flex; 
    align-items: center; 
    min-height: 56px; 
    padding: 8px 16px 16px 8px; 
    text-decoration: none; 
    color: #1e293b; 
    font-weight: 600; 
    font-size: 15px;
    background: #ffffff; 
    border-radius: 16px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.02); 
    transition: all 0.2s ease;
}
.mobile-collections__item > a:active { 
    background: #f1f5f9; 
    transform: scale(0.98); 
}
.mobile-collections__item.is-active > a { 
    color: #11497b; 
    background: rgba(17, 73, 123, 0.05); 
    border: 1px solid rgba(17, 73, 123, 0.1); 
}

/* Иконки в категориях */
.mobile-menu__icon {
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 40px; 
    height: 40px;
    background: #f8fafc; 
    color: #11497b; 
    border-radius: 12px; 
    margin-right: 14px; 
    flex-shrink: 0;
}
.mobile-collections__item.is-active > a .mobile-menu__icon { 
    background: #11497b; 
    color: #ffffff; 
}

/* Стрелочки категорий */
.mobile-collections__item > a > span { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 24px; 
    height: 24px; 
    margin-left: auto; 
    color: #cbd5e1;
}
.mobile-collections__item > a > span svg { 
    width: 12px; 
    height: 12px; 
}

/* Подменю (Выезжает справа) */
.mobile-collections__submenu { 
    display: flex; 
    flex-direction: column; 
    position: fixed; 
    z-index: 2; 
    left: 0; top: 0; 
    width: 100%; 
    max-width: 320px; 
    height: 100%; 
    background-color: #f8fafc; 
    transform: translateX(100%); 
    opacity: 0; 
    visibility: hidden; 
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; 
    border-radius: 0 24px 24px 0;
}
.mobile-collections__item.is-open > .mobile-collections__submenu { 
    transform: translateX(0); 
    opacity: 1; 
    visibility: visible; 
}

/* Кнопка "Назад" */
.mobile-collections__back { 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    width: 100%; 
    height: 70px; 
    background: #ffffff; 
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.04); 
    margin: 0; 
    padding: 0 20px; 
    font-size: 16px; 
    font-weight: 600;
    color: #0f172a; 
    cursor: pointer; 
    border-radius: 0 24px 0 0;
}
.mobile-collections__back svg { 
    width: 12px; 
    height: 12px; 
    color: #11497b; 
    stroke: currentColor; 
}

/* Доп. Страницы (текстовое меню) */
.mobile-pages {
    display: flex; 
    flex-direction: column; 
    gap: 4px; 
    margin-top: 25px; 
    padding-top: 20px; 
    border-top: 1px solid rgba(0, 0, 0, 0.05); 
}
.mobile-pages__item a {
    display: block; 
    padding: 10px 8px; 
    text-decoration: none; 
    color: #475569; 
    font-weight: 600;
    font-size: 15px; 
    border-radius: 10px; 
    transition: all 0.2s ease;
}
.mobile-pages__item a:active { 
    background-color: #f1f5f9; 
    color: #11497b; 
}


/* ======================================================
   5.1 СОВРЕМЕННЫЕ СТИЛИ ДЛЯ БЛОКА КОНТАКТОВ (ANIMATED & SOFT UI)
   ====================================================== */

/* Базовые настройки анимации выплывания */
.animate-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Запуск анимации, когда панель получает класс is-active */
.js-mobile-contacts-panel.is-active .animate-item {
    opacity: 1;
    transform: translateY(0);
}

/* Задержки (каскадный эффект) */
.js-mobile-contacts-panel.is-active .animate-item:nth-child(1) { transition-delay: 0.10s; }
.js-mobile-contacts-panel.is-active .animate-item:nth-child(2) { transition-delay: 0.15s; }
.js-mobile-contacts-panel.is-active .animate-item:nth-child(3) { transition-delay: 0.20s; }
.js-mobile-contacts-panel.is-active .animate-item:nth-child(4) { transition-delay: 0.25s; }


/* 1. Главный телефон с пульсацией */
.mobile-contacts__phones {
    margin-bottom: 20px;
}
.modern-phone-link {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 16px;
    border-radius: 16px;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid rgba(17, 73, 123, 0.05);
}
.modern-phone-link:active { transform: scale(0.98); }
.modern-phone-icon {
    width: 44px;
    height: 44px;
    background: rgba(17, 73, 123, 0.1);
    color: #11497b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 15px;
    flex-shrink: 0;
    /* Пульсация */
    animation: pulseContact 2s infinite cubic-bezier(0.66, 0, 0, 1);
}
@keyframes pulseContact {
    0% { box-shadow: 0 0 0 0 rgba(17, 73, 123, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(17, 73, 123, 0); }
    100% { box-shadow: 0 0 0 0 rgba(17, 73, 123, 0); }
}
.modern-phone-text {
    display: flex;
    flex-direction: column;
}
.modern-phone-text span {
    font-size: 12px;
    color: #64748b;
    margin-bottom: 2px;
}
.modern-phone-text b {
    font-size: 18px; /* <-- ИЗМЕНЕНО НА 18px */
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}

/* 2. Премиум Кнопка */
.btn-modern-pulse {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(135deg, #11497b 0%, #1a62a3 100%);
    color: #ffffff;
    border: none;
    padding: 16px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(17, 73, 123, 0.25);
    margin-bottom: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-modern-pulse:active {
    transform: scale(0.96);
    box-shadow: 0 4px 10px rgba(17, 73, 123, 0.15);
}
.btn-modern-pulse i { font-size: 14px; }


/* 3. Карточки контактов (Soft UI) */
.contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contacts__modern-card {
    display: flex;
    align-items: flex-start;
    background: #ffffff;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
    border: 1px solid rgba(0,0,0,0.03);
}
.contacts__modern-icon {
    width: 36px;
    height: 36px;
    background: #f1f5f9;
    color: #11497b;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    margin-right: 15px;
    flex-shrink: 0;
}
.contacts__modern-info {
    display: flex;
    flex-direction: column;
}
/* ВАШЕ ПРАВИЛО: */
.contacts__modern-info span {
    font-size: 14px; /* <-- ИЗМЕНЕНО НА 14px */
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.contacts__modern-info a {
    color: #0f172a;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}
.contacts__modern-info p {
    margin: 0;
    color: #475569;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 500;
}


/* 4. Социальные кнопки (Pill style) */
.modern-social-flex {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.modern-social-btn {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 14px 20px;
    border-radius: 30px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 15px;
    color: #0f172a;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    transition: all 0.2s ease;
}
.modern-social-btn:active { transform: scale(0.97); }
.modern-social-btn i, 
.modern-social-btn img {
    font-size: 22px;
    width: 24px;
    height: 24px;
    object-fit: contain;
    margin-right: 12px;
}
.modern-telegram i { color: #2AABEE; }

/* ======================================================
   6. ПАНЕЛЬ ПОИСКА GRUNDFOS (Выезжает сверху)
   ====================================================== */
.mobile-search-panel { 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: #fff; 
    z-index: 10000; 
    transform: translateY(-100%); 
    transition: transform 0.3s ease; 
    display: flex; 
    flex-direction: column; 
}
.mobile-search-panel.active { 
    transform: translateY(0); 
}
.mobile-search-panel__header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 15px 20px; 
    border-bottom: 1px solid #eee; 
    flex-shrink: 0; 
}
.mobile-search-panel__title { 
    font-weight: 700; 
    font-size: 17px; 
}
.mobile-search-panel__close { 
    background: none; 
    border: none; 
    font-size: 20px; 
    cursor: pointer;
}
.mobile-search-panel__body { 
    padding: 20px; 
    flex-grow: 1; 
    overflow-y: auto; 
}

/* Форма поиска */
.mobile-search-form__field { 
    position: relative; 
    display: flex; 
    align-items: center; 
    background: #f4f4f4; 
    border-radius: 8px; 
    padding: 0 15px; 
    height: 50px; 
    margin-bottom: 20px; 
}
.mobile-search-form__icon { 
    color: #999; 
    margin-right: 10px; 
}
.js-mobile-search-input { 
    flex-grow: 1; 
    border: none; 
    background: transparent; 
    outline: none; 
    font-size: 16px; 
}
.mobile-search-form__clear { 
    background: none; 
    border: none; 
    color: #999; 
    padding: 5px; 
    font-size: 16px; 
    cursor: pointer; 
}

/* Тэги Grundfos Style */
.mobile-search-tags__title { 
    font-size: 14px; 
    color: #999; 
    margin-bottom: 15px; 
}
.mobile-search-tags__list { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 8px; 
}
.search-tag { 
    background: #1f2e4d !important; 
    color: #ffffff !important; 
    border: none; 
    border-radius: 4px; 
    padding: 10px 14px; 
    font-size: 13px; 
    font-weight: 500; 
    text-transform: none; 
    cursor: pointer; 
    transition: opacity 0.2s;
}
.search-tag:active { 
    opacity: 0.8; 
}

/* Результаты AJAX поиска (Картинки и Текст) */
.mobile-search-hints__loading,
.mobile-search-hints__empty { 
    padding: 20px 0; 
    text-align: center; 
    color: #6c757d; 
}
.mobile-search-hints__loading i { 
    margin-right: 8px; 
}
.mobile-search-hints__group { 
    font-size: 12px; 
    text-transform: uppercase; 
    color: #999; 
    margin: 20px 0 8px 0; 
    font-weight: 700; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 5px; 
}
.mobile-search-hints__item { 
    display: flex; 
    align-items: center; 
    padding: 12px 0; 
    border-bottom: 1px solid #f0f0f0; 
    text-decoration: none !important; 
    color: #333; 
    font-size: 15px;
}
.mobile-search-hints__item:last-child { 
    border-bottom: none; 
}
.mobile-search-hints__item b { 
    color: #0056b3; 
    font-weight: 700; 
}

/* Картинки товаров в поиске */
.mobile-search-hints__img { 
    width: 40px; 
    height: 40px; 
    min-width: 40px; 
    margin-right: 15px; 
    object-fit: contain; 
    background: #f9f9f9; 
    border-radius: 4px; 
    border: 1px solid #eee; 
}
.mobile-search-hints__img_empty { 
    width: 40px; 
    height: 40px; 
    min-width: 40px; 
    margin-right: 15px; 
    background: #f0f0f0; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 4px; 
    color: #ccc; 
}
.mobile-search-hints__cat-icon {
    width: 40px; 
    height: 40px; 
    min-width: 40px; 
    margin-right: 15px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #999; 
    font-size: 18px;
}

/* Кнопка "Показать все результаты" */
.mobile-search-hints__all { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    margin-top: 20px; 
    padding: 15px; 
    background: #f4f7f9; 
    color: #1f2e4d; 
    font-weight: 700; 
    text-decoration: none; 
    border-radius: 8px; 
    font-size: 15px; 
}
.mobile-search-hints__all i { 
    margin-left: 10px; 
    font-size: 12px; 
}

/* Блокировка скролла страницы при открытых панелях */
body.no-scroll { 
    overflow: hidden; 
}