/* =========================================================================
   custom.css — консолидированная версия
   Разделы:
     1. Служебные правки (страница сравнения)
     2. Компактная шапка (desktop ≥ 1025px)
     3. Иконки хедера (общий контейнер)
     4. Бейдж корзины
     5. Бейдж сравнения
     6. Sign-in: клон + SVG + dropdown
     7. Мобильные правки (≤ 767px)
   ========================================================================= */

/* =========================================================================
   1. СЛУЖЕБНЫЕ ПРАВКИ
   ========================================================================= */

/* COMPARE_TIGHT_SPACING: компактнее на странице сравнения */
.compare-page-container .product-info {
    margin-bottom: 8px !important;
}
.compare-page-container .product-image-block {
    margin-bottom: 8px !important;
}

/* =========================================================================
   2. КОМПАКТНАЯ ШАПКА (только десктоп ≥ 1025px)
   Ниже 1025px — НИЧЕГО НЕ МЕНЯЕМ, чтобы не задеть мобильные иконки
   ========================================================================= */
@media (min-width: 1025px) {
    /* Верхняя строка меню (Распродажа, Блог...) — тоньше */
    .header.type1 .top-header,
    .header.type2 .top-header,
    .header.type3 .top-header,
    .header.type4 .top-header,
    .header.type5 .top-header,
    .header.type6 .top-header {
        padding-top: 2px;
        padding-bottom: 2px;
        min-height: 30px;
    }
    .header .top-header .menu .menu-list-0 > li > a,
    .header .top-header .menu-links .menu-link {
        padding: 5px 0;
    }

    /* Основная строка шапки — плотнее */
    .header.type1 .main-header,
    .header.type2 .main-header,
    .header.type3 .main-header,
    .header.type4 .main-header,
    .header.type5 .main-header,
    .header.type6 .main-header {
        padding-top: 6px;
        padding-bottom: 8px;
    }

    /* Логотип — меньше */
    .header .main-header .logo {
        height: 38px;
        max-width: 260px;
        margin-right: 16px;
    }
    .header .main-header .logo .slogan {
        font-size: 12px;
        line-height: 16px;
        width: 140px;
        margin-left: 14px;
    }

    /* Кнопка "Каталог" — компактнее */
    .header .main-header .menu-button .btn {
        padding: 9px 16px;
        font-size: 14px;
    }

    /* Форма поиска — компактнее */
    .header .main-header .search-header .search-line .search-form {
        padding: 8px 16px;
        border-radius: 8px;
    }
    .header .main-header .search-header .search-line .search-form .input input {
        font-size: 14px;
        padding: 4px 0;
        margin-left: 10px;
    }

    /* Отступ между шапкой и контентом */
    .page-container,
    .page-container > .container,
    .bx-breadcrumb,
    .breadcrumbs {
        margin-top: 0;
        padding-top: 8px;
    }
    .header + .container,
    .header + .wrapper,
    .header + .page-container {
        padding-top: 0;
    }
}

/* =========================================================================
   3. ИКОНКИ ХЕДЕРА — общий контейнер
   (базовый gap 20px, mobile переопределяет в разделе 7)
   ========================================================================= */
.main-header .icons,
.header .icons {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

/* =========================================================================
   4. БЕЙДЖ КОРЗИНЫ
   ========================================================================= */

/* Скрываем дефолтные точки Nextype */
.basket.no-empty::before,
.basket.no-empty::after,
.basket.no-empty .icon-basket::before,
.basket.no-empty .icon-basket::after,
.small-basket-container .basket.no-empty::before,
.small-basket-container .basket.no-empty::after {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Якорь */
.small-basket-container .basket {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
}

.small-basket-container .basket .icon-basket {
    position: relative !important;
    display: inline-block !important;
}

/* Бейдж с цифрой */
.small-basket-container .basket .basket-count {
    position: absolute !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    top: 2px !important;
    left: 10px !important;
    right: auto !important;
    background: #c9b192 !important;    /* пастельный золотистый, как на кнопке Каталог */
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 2px #fff !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Цена — только на десктопе */
.small-basket-container .basket .basket-total {
    display: inline-block !important;
    color: inherit !important;
    font-size: 14px !important;
}

/* Убираем старый span, если он как-то остался в кеше (защита) */
.small-basket-container .basket > span:not(.basket-count):not(.basket-total) {
    display: none !important;
}

/* =========================================================================
   5. БЕЙДЖ СРАВНЕНИЯ
   ========================================================================= */

/* Скрываем дефолтные точки Nextype */
.compare.no-empty::before,
.compare.no-empty::after,
.compare-container .compare.no-empty::before,
.compare-container .compare.no-empty::after,
.compare-container .compare .icon-compare-header::before,
.compare-container .compare .icon-compare-header::after {
    display: none !important;
    content: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Скрываем посторонние span'ы */
.compare-container .compare > span:not(.compare-count) {
    display: none !important;
}

/* Якорь */
.compare-container .compare {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.compare-container .compare .icon-compare-header {
    position: relative !important;
    display: inline-block !important;
}

/* Бейдж с цифрой. NB: по умолчанию скрыт — показывается при наличии
   товаров в сравнении (класс/инлайн-стиль задаёт JS/Bitrix). */
.compare-container .compare .compare-count {
    position: absolute !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    top: 2px !important;
    left: 16px !important;
    right: auto !important;
    background: #c9b192 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 0 2px #fff !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* =========================================================================
   6. SIGN-IN: КЛОН + SVG + DROPDOWN
   ========================================================================= */

/* --- Оригинал (внешний .sign-in в .top-header) прячем --- */
.top-header .sign-in.ec-signin-original {
    display: none !important;
}

/* --- Клон в .icons --- */
.icons .ec-signin-clone {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #2f3435 !important;
}

.icons .ec-signin-clone .dropdown {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
}

/* --- Ссылка-иконка --- */
.icons .ec-signin-clone .sign-in-link {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    padding-bottom: 4px !important;   /* мостик hover до меню */
    margin: 0 !important;
    gap: 0 !important;
    color: #2f3435 !important;
    text-decoration: none !important;
    line-height: 1 !important;
}

/* Прячем текстовую подпись и стрелку */
.icons .ec-signin-clone .sign-in-link > span:not(.ec-signin-svg),
.icons .ec-signin-clone .sign-in-link .icon-arrow-light-down {
    display: none !important;
}

/* Fallback-иконка шрифтом (если JS не отработал) */
.icons .ec-signin-clone .sign-in-link .icon-user-16 {
    font-size: 22px !important;
    line-height: 1 !important;
    color: #2f3435 !important;
    display: inline-block !important;
}

/* --- Наш SVG --- */
.icons .ec-signin-clone .sign-in-link .ec-signin-svg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    color: #2f3435 !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.icons .ec-signin-clone .sign-in-link .ec-signin-svg svg {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    color: #2f3435 !important;
}
.icons .ec-signin-clone:hover .ec-signin-svg svg {
    color: #b8945a !important;
}

/* --- Dropdown-меню --- */
/* Обёртка прозрачна, чтобы hover-«мостик» работал без провала мышки */
.icons .ec-signin-clone .dropdown-menu,
.top-header .sign-in .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin-top: 0 !important;
    padding-top: 12px !important;
    min-width: 200px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    z-index: 1050 !important;
}

/* Фон и тень — на внутренней обёртке */
.icons .ec-signin-clone .dropdown-menu .dropdown-menu-wrap,
.icons .ec-signin-clone .dropdown-menu > div > .dropdown-menu-wrap,
.top-header .sign-in .dropdown-menu .dropdown-menu-wrap {
    background: #fff !important;
    box-shadow: 0 6px 24px rgba(0,0,0,0.14) !important;
    border-radius: 10px !important;
    padding: 8px 0 !important;
    overflow: hidden !important;
}

/* Открытие по hover/open */
.icons .ec-signin-clone:hover .dropdown-menu,
.icons .ec-signin-clone .dropdown:hover .dropdown-menu,
.icons .ec-signin-clone .dropdown.open .dropdown-menu {
    display: block !important;
}

/* --- Пункты меню --- */
.icons .ec-signin-clone .dropdown-menu .dropdown-item,
.top-header .sign-in .dropdown-menu .dropdown-item {
    display: block !important;
    padding: 10px 18px !important;
    color: #2f3435 !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    border-radius: 0 !important;
}
.icons .ec-signin-clone .dropdown-menu .dropdown-item:hover,
.top-header .sign-in .dropdown-menu .dropdown-item:hover,
.icons .ec-signin-clone .dropdown-menu .dropdown-item.exit:hover,
.top-header .sign-in .dropdown-menu .dropdown-item.exit:hover {
    background-color: #f5efe6 !important;   /* светло-коричневый, пастельный */
    color: #b8945a !important;
}
.icons .ec-signin-clone .dropdown-menu .dropdown-item:hover > span,
.top-header .sign-in .dropdown-menu .dropdown-item:hover > span {
    color: #b8945a !important;
}

/* =========================================================================
   7. МОБИЛЬНЫЕ ПРАВКИ (≤ 767px)
   ========================================================================= */
@media (max-width: 767px) {

    /* --- Скрываем иконку сравнения — освобождаем ~60px --- */
    .main-header .icons .compare-container,
    .header .icons .compare-container {
        display: none !important;
    }

    /* Немного уменьшаем отступ между оставшимися иконками */
    .main-header .icons,
    .header .icons {
        gap: 10px !important;
    }

    /* --- Sign-in: никаких выпадашек, только переход на /personal/ --- */
    .icons .ec-signin-clone .dropdown-menu,
    .icons .ec-signin-clone .dropdown-menu-wrap {
        display: none !important;
        visibility: hidden !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
        pointer-events: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    /* Убираем «мостик» hover, чтобы не мешал тапу */
    .icons .ec-signin-clone .sign-in-link {
        padding-bottom: 0 !important;
    }

    /* Цена у корзины — только на десктопе */
    .small-basket-container .basket .basket-total {
        display: none !important;
    }
}