/*
 * Шапка сайту — новий вигляд для oct_deals.
 * Кольори — змінні теми (--ds-primary-color та ін.), тож колір з налаштувань теми й темна тема підхоплюються самі.
 * Розмітку не змінено: місто й телефон переносяться у верхній рядок стилями, тому меню, пошук, кошик і модулі працюють як раніше.
 * Перебудова — від 1200px (там, де тема показує кнопку «Каталог» і горизонтальне меню); на телефоні — шапка теми з дрібними правками.
 */
.hs-header {
    --hs-accent: var(--ds-primary-color, #00A8E8);
    --hs-text: var(--ds-dark-text-color, #1d2433);
    --hs-muted: var(--ds-light-text-color, #7a8291);
    --hs-border: var(--ds-border-color, #e7eaf0);
    --hs-surface: var(--ds-white-color, #fff);
    --hs-badge: #FF5A1F;
    border-top: 4px solid var(--hs-accent);
}

/* Пошук — рамка в колір акценту на всіх екранах */
.hs-header #searchInput { border-color: var(--hs-accent); }
.hs-search-text { display: none; }

.hs-header .badge.rounded-pill { background: var(--hs-badge) !important; color: #fff !important; }
.hs-header .ds-cart-qty:not(.active) { display: none !important; }

.hs-label, .hs-cart-info { display: none; }

@media (min-width: 1200px) {
    .hs-header { padding-top: 0 !important; padding-bottom: 0 !important; }
    .hs-header > .container-xl:first-child { position: relative; }
    .hs-header > .container-xl:first-child > .d-flex.flex-row { min-height: 84px; padding: 14px 0; margin-bottom: 0 !important; }

    /* ---- Верхній рядок ---- */
    .hs-header.hs-with-topbar > .container-xl:first-child { padding-top: 44px; }
    /* Під час прокрутки липка шапка «заїжджає» вгору на смугу й верхній рядок — видно лише основний рядок */
    .hs-header.hs-with-topbar.sticky-top { top: -48px; }
    .hs-topbar {
        position: absolute; top: 0; left: calc(var(--bs-gutter-x, 1.5rem) * .5); right: calc(var(--bs-gutter-x, 1.5rem) * .5);
        height: 44px; align-items: center; justify-content: flex-end; padding: 0 240px 0 300px;
    }
    .hs-topbar-links { display: flex; flex-wrap: nowrap; align-items: center; gap: 24px; min-width: 0; overflow: hidden; }

    /* Перемикач світлої/темної теми — компактно у верхньому рядку */
    .hs-theme.ds-theme-switcher { display: inline-flex; flex: none; gap: 2px; margin: 0 0 0 22px; padding: 2px !important; border-radius: 15px; background: var(--ds-light-bg-color, #f2f4f7); }
    .hs-theme .ds-theme-switcher-btn {
        display: flex; align-items: center; justify-content: center; width: 30px; height: 26px; margin: 0 !important; padding: 0 !important;
        border: 0; border-radius: 13px; background: transparent; color: var(--hs-text); cursor: pointer;
    }
    .hs-theme .ds-theme-switcher-btn.active { background: var(--hs-surface); box-shadow: 0 1px 3px rgba(16, 24, 40, .15); }

    /* Перенесене у верхній рядок — з вікна «Клієнту» прибираємо */
    .hs-moved-links .hs-user .ds-dropdown-links,
    .hs-with-topbar .hs-user .hs-theme-title,
    .hs-with-topbar .hs-user .ds-dropdown-inner > .ds-theme-switcher { display: none !important; }
    .hs-user .ds-header-user-logged { margin-bottom: 0 !important; }

    /* «Кабінет»: гість — клік відкриває вхід (вікно не спливає), увійдений — своє ім'я, зелена позначка, при наведенні — картка з виходом */
    .hs-user:not(.is-logged):not(.has-lang) .ds-dropdown { display: none !important; }
    .hs-user .ds-header-user-button { position: relative; }
    .hs-user.is-logged .ds-header-user-button::before {
        content: ""; position: absolute; top: -3px; left: 50%; margin-left: 4px; width: 14px; height: 14px; border: 2px solid var(--hs-surface); border-radius: 50%;
        background: #2E9F3E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2l2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
    }
    .hs-header .hs-user.is-logged .ds-header-user-button .fsz-12 { max-width: 96px; overflow: hidden; text-overflow: ellipsis; color: var(--hs-accent) !important; font-weight: 600 !important; }
    .hs-topbar-link { color: var(--hs-text); font-size: 14px; line-height: 1; text-decoration: none; white-space: nowrap; transition: color .15s; }
    .hs-topbar-link:hover { color: var(--hs-accent); text-decoration: none; }
    .hs-topbar-link.is-accent { color: var(--hs-accent); font-weight: 600; }

    /* Місто — «пігулка» зліва у верхньому рядку */
    .hs-with-topbar .ds-header-right .cu-ds-city {
        position: absolute; top: 7px; left: calc(var(--bs-gutter-x, 1.5rem) * .5); z-index: 10; margin: 0 !important;
        height: 30px; padding: 0 12px; border: 1px solid var(--hs-border); border-radius: 15px; background: var(--hs-surface);
    }
    .hs-with-topbar .ds-header-right .cu-ds-city:hover { border-color: var(--hs-accent); }
    .hs-with-topbar .cu-ds-city .cu-trigger { font-size: 13px; }
    .hs-with-topbar .cu-ds-city .cu-current-name { max-width: 240px; }

    /* Телефон — праворуч у верхньому рядку, кольором акценту */
    /* z-index вище за лічильники (у них 2), інакше «0» обраного й порівняння видно поверх вікна контактів */
    .hs-with-topbar .ds-header-right .hs-phone { position: absolute; top: 8px; right: calc(var(--bs-gutter-x, 1.5rem) * .5); z-index: 10; margin: 0 !important; }
    .hs-with-topbar .hs-phone .ds-header-phone-button { gap: 6px; }
    .hs-with-topbar .hs-phone .ds-header-phone-button .fsz-12 { text-decoration: none !important; }
    .hs-with-topbar .hs-phone .ds-header-phone-button .fsz-12 { color: var(--hs-accent) !important; font-size: 14px !important; font-weight: 600 !important; }
    .hs-with-topbar .hs-phone .button-icon-phone { background-color: var(--hs-accent) !important; }
    .hs-with-topbar .hs-phone .ds-arrow-down { width: 10px !important; height: 10px !important; flex: 0 0 10px; }

    /* ---- Основний рядок ---- */
    .hs-header .ds-header-left { flex: 0 0 auto !important; }
    .hs-header #logo { height: var(--hs-logo-h, 50px) !important; }
    .hs-header .ds-header-catalog-button.button {
        height: 50px !important; margin-left: 24px !important; padding: 0 20px !important; gap: 10px; border: 0 !important; border-radius: 8px !important;
        background: var(--hs-accent) !important; box-shadow: none !important; transition: filter .15s;
    }
    .hs-header .ds-header-catalog-button.button:hover { filter: brightness(.94); }
    .hs-header .ds-header-catalog-button .button-text { color: #fff !important; font-size: 16px !important; font-weight: 600; }
    .hs-header .ds-header-catalog-button svg path { fill: #fff !important; }

    .hs-header .ds-header-right { gap: 14px; padding-right: 0 !important; }
    .hs-header .ds-header-search { flex: 1 1 auto; min-width: 0; }
    .hs-header .ds-header-right > *:not(.cu-ds-city):not(.hs-phone) { margin-left: 0 !important; margin-right: 0 !important; }

    /* Пошук із кнопкою «Знайти» */
    .hs-header .ds-header-search { padding-left: 22px !important; margin-right: 10px; }
    .hs-header #searchInput {
        height: 50px !important; padding: 0 140px 0 18px !important; border: 2px solid var(--hs-accent) !important; border-radius: 8px !important;
        background: var(--hs-surface) !important; color: var(--hs-text); font-size: 16px !important;
    }
    .hs-header #searchInput::placeholder { font-size: 15px !important; color: var(--hs-muted); }
    .hs-header .ds-header-right .ds-header-search-button.button {
        top: 0 !important; right: 0 !important; transform: none !important; width: auto !important; height: 50px !important; flex: none !important;
        padding: 0 20px !important; gap: 10px; border-radius: 0 8px 8px 0 !important; background: var(--hs-accent) !important; transition: filter .15s;
    }
    .hs-header .ds-header-right .ds-header-search-button.button:hover { filter: brightness(.94); }
    .hs-header .ds-header-search-button svg path { fill: #fff !important; }
    .hs-search-text { display: inline; color: #fff; font-size: 16px; font-weight: 600; }

    /* Іконки з підписами під ними */
    .hs-with-labels .ds-header-right .hs-user .ds-header-user-button,
    .hs-with-labels .ds-header-right .ds-header-viewed-button.button,
    .hs-with-labels .ds-header-right .ds-header-wishlist-button.button,
    .hs-with-labels .ds-header-right .ds-header-compare-button.button {
        display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
        width: auto !important; height: auto !important; flex: 0 0 auto !important; min-width: 50px; margin: 0 !important; padding: 0 !important; gap: 4px;
    }
    .hs-with-labels .hs-user .ds-header-user-button { cursor: pointer; }
    .hs-with-labels .hs-user .ds-header-user-button .fsz-12,
    .hs-label { display: block; color: var(--hs-text) !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.2; white-space: nowrap; }
    .hs-with-labels .hs-user .ds-arrow-down { display: none !important; }
    .hs-with-labels .ds-header-right svg { width: 20px; height: 20px; }
    .hs-with-labels .ds-header-right .button-icon:not(.button-icon-phone):not(.ds-arrow-down) { width: 20px; height: 20px; }
    .hs-with-labels .hs-user .ds-header-user-button .fsz-12 { text-decoration: none !important; border: 0 !important; }
    .hs-with-labels .ds-header-right .ds-header-user-button:hover .fsz-12,
    .hs-with-labels .ds-header-right .button:hover .hs-label { color: var(--hs-accent) !important; }
    .hs-header .ds-header-right .badge.rounded-pill { top: -8px !important; right: auto !important; left: 50% !important; margin-left: 4px; transform: none !important; }

    /* Кошик: іконка + «Сума: 4 999 ₴» у рамці */
    .hs-header .ds-header-right .ds-header-cart-button.button {
        display: inline-flex !important; flex-direction: row; align-items: center; gap: 10px; width: auto !important; height: 50px !important;
        flex: 0 0 auto !important; padding: 0 14px !important; border: 1px solid var(--hs-accent) !important; border-radius: 10px !important;
        background: color-mix(in srgb, var(--hs-accent) 8%, var(--hs-surface)) !important;
    }
    .hs-header .ds-header-cart-button .button-icon-cart { width: 22px !important; height: 22px !important; background-color: var(--hs-accent) !important; }
    .hs-cart-info { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; }
    .hs-cart-info small { color: var(--hs-muted); font-size: 12px; }
    .hs-cart-info small { font-size: 11px; }
    .hs-cart-info b { color: var(--hs-text); font-size: 16px; font-weight: 700; white-space: nowrap; }
    .hs-header .ds-header-cart-button .hs-label { display: block; }
    .hs-header .ds-header-right .ds-header-cart-button .badge.rounded-pill { left: auto !important; right: -8px !important; margin: 0; }

    /* Горизонтальне меню теми — окремим рядком під шапкою */
    .hs-header .ds-menu-maincategories-desktop-box { border-top: 1px solid var(--hs-border); }
    .hs-header .ds-menu-maincategories-item-title { font-size: 15px !important; }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .hs-header .ds-header-catalog-button.button { margin-left: 20px !important; padding: 0 18px !important; }
    .hs-header .ds-header-right { gap: 10px; }
    .hs-header .ds-header-search { padding-left: 20px !important; }
    .hs-header #searchInput { padding-right: 60px !important; }
    .hs-search-text { display: none; }
    .hs-topbar-links { gap: 18px; }
    .hs-with-labels .ds-header-right .ds-header-viewed-button.button { display: none !important; }
}

/* Логотип: висота з налаштувань модуля, ширина за пропорціями файлу.
   Тема ставить width/height з налаштувань (75×35) атрибутами й у своєму <style> — тут вони перекриваються. */
.hs-header #logo,
.ds-footer .ds-footer-logo {
    width: auto !important; max-width: 100%; max-height: none !important; object-fit: contain;
}
.hs-header #logo { height: var(--hs-logo-h-m, 38px) !important; max-width: 60vw; }
.ds-footer .ds-footer-logo { height: var(--hs-logo-h-f, 40px) !important; }

@media (min-width: 1200px) {
    .hs-header #logo { height: var(--hs-logo-h, 50px) !important; max-width: 260px; }
}