/*
 * ======================================================
 *  Разделение видимости элементов Desktop vs Mobile
 * ======================================================
 */

/* По умолчанию (для десктопа) ПОКАЗЫВАЕМ десктопные элементы */
.header-main__col-search, .desktop-cart {
    display: block;
}

/* По умолчанию (для десктопа) СКРЫВАЕМ мобильные элементы */
.header-main__col-menu, .mobile-toolbar-icons, .header-mobile__placeholder {
    display: none;
}


/*
 * ======================================================
 *  СТИЛИ ДЛЯ ДЕСКТОПНОЙ ВЕРСИИ (экраны от 1025px)
 * ======================================================
 */
@media (min-width: 1025px) {

    /* --- Стили для десктопной кнопки "Каталог" (взяты из вашего старого кода) --- */
    .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;
    }
}


/*
 * ======================================================
 *  СТИЛИ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ (экраны до 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; }
    .mobile-toolbar-icons a { color: #000000; font-size: 18px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; text-decoration: none; }
}


/*
 * ======================================================
 *  СТИЛИ ДЛЯ ВЫДВИЖНОГО МЕНЮ (не меняются)
 * ======================================================
 */
.mobile-menu__trigger { font-size: 20px; padding: 0; background: transparent; border: none; width: 50px; height: 50px; color: #000; cursor: pointer; display: flex; align-items: center; justify-content: center; }
body.is-overflow { overflow: hidden; }
body.is-overflow::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 5999; }
.mobile-menu { display: flex; flex-direction: column; position: fixed; z-index: 6000; top: 0; left: 0; width: 100%; height: 100%; max-width: 300px; transform: translateX(-100%); background-color: #ffffff; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transition: 0.4s all; }
.mobile-menu.is-active { opacity: 1; visibility: visible; transform: translateX(0); }
.mobile-menu__header { display: flex; align-items: center; padding: 0 10px 0 20px; height: 50px; background-color: #f7f8fa; font-weight: 600; flex-shrink: 0; }
.mobile-menu__header-title { font-size: 14px; flex-grow: 1; }
.mobile-menu__close { padding: 10px; width: 50px; height: 50px; background: transparent; border: none; cursor: pointer; }
.mobile-menu__close svg { fill: transparent; stroke: currentColor; stroke-width: 2; }
.mobile-menu__content { width: 100%; padding: 20px; flex-grow: 1; overflow: hidden auto; }
.mobile-collections { display: flex; flex-direction: column; gap: 10px; }
.mobile-collections__item > a { display: flex; align-items: center; gap: 5px; min-height: 24px; text-decoration: none; color: #000; }
.mobile-collections__item > a > span { display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; margin-left: auto; }
.mobile-collections__item.is-active > a { color: #11497b; }
.mobile-collections__submenu { display: flex; flex-direction: column; position: fixed; z-index: 2; left: 0; top: 0; width: 100%; max-width: 300px; height: 100%; background-color: #ffffff; transform: translateX(-100%); opacity: 0; visibility: hidden; transition: 0.4s all; }
.mobile-collections__item.is-open > .mobile-collections__submenu { transform: translateX(0); opacity: 1; visibility: visible; }
.mobile-collections__back { width: 50px; height: 50px; background: transparent; border: none; margin: 0 0 0 -20px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; }
.mobile-contacts { margin-top: 20px; padding-top: 20px; border-top: 1px solid #eeeeee; display: flex; flex-direction: column; gap: 20px; }
.mobile-contacts__phones { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; font-size: 16px; font-weight: 600; }
.mobile-contacts a { text-decoration: none; color: #000; }