/* Bibimir — desktop header overrides (checkout unchanged) */
@media (min-width: 1200px) {
    .ds-header-catalog-button {
        background: #FFD400 !important;
        border: none !important;
        color: #1a1a1a !important;
        box-shadow: none;
    }

    .ds-header-catalog-button .button-text {
        color: #1a1a1a !important;
    }

    .ds-header-catalog-button svg,
    .ds-header-catalog-button svg path {
        fill: #1a1a1a !important;
        color: #1a1a1a;
    }

    .ds-header-catalog-button:hover {
        background: #F5C400 !important;
        color: #111 !important;
    }

    .ds-header.with-categories-menu .ds-header-topbar {
        border-bottom: 1px solid rgba(0, 23, 31, 0.08);
        gap: 1rem;
    }

    .ds-header.with-categories-menu .ds-menu-maincategories-desktop-box {
        height: 42px;
        overflow: hidden;
        min-width: 0;
        flex: 1 1 auto;
    }

    .bibimir-desktop-topbar-controls {
        flex-shrink: 0;
        height: 42px;
        gap: 0.75rem;
        margin-left: auto;
        padding-right: 1rem;
        overflow: visible !important;
        position: relative;
        z-index: 13040;
    }

    .bibimir-desktop-topbar-controls .ds-header-phone-button {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 34px;
    }

    .bibimir-desktop-topbar-controls .bibimir-lang-wrap,
    .bibimir-desktop-topbar-controls .bibimir-lang,
    .bibimir-desktop-topbar-controls .header__languages {
        margin: 0 !important;
        position: relative !important;
        overflow: visible !important;
    }

    .bibimir-desktop-topbar-controls .bibimir-lang-toggle {
        min-height: 34px;
    }

    .bibimir-desktop-topbar-controls .bibimir-lang-menu,
    .bibimir-desktop-topbar-controls .bibimir-lang .bibimir-lang-menu,
    .ds-header-topbar .bibimir-lang-menu {
        top: calc(100% + 8px) !important;
        left: unset !important;
        right: 0 !important;
        transform: translateX(0) !important;
        inset-inline-start: auto !important;
        inset-inline-end: 0 !important;
    }

    .ds-header-right > .ds-header-search {
        margin-right: 1rem !important;
    }

    /*
     * Desktop catalog:
     * - one fixed height for the left column and every right panel
     * - the first panel is always visible; hover/JS switches the active panel
     * - overflowing subcategories scroll inside their own panel
     */
    .ds-header.with-categories-menu .ds-header-left {
        position: static !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog,
    .ds-header.with-categories-menu .ds-menu-main-catalog,
    .ds-header.with-categories-menu .ds-menu-main-catalog.with-slideshow {
        --bibimir-catalog-height: min(70vh, 640px, calc(100vh - 8rem));
        --bibimir-catalog-col: 300px;
        /* Right panel: 3x column, but never past the viewport edge */
        --bibimir-catalog-panel: min(calc(var(--bibimir-catalog-col) * 3), calc(100vw - var(--bibimir-catalog-col) - 3rem));
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: auto !important;
        margin-top: 0 !important;
        width: var(--bibimir-catalog-col) !important;
        max-width: var(--bibimir-catalog-col) !important;
        height: var(--bibimir-catalog-height) !important;
        min-height: var(--bibimir-catalog-height) !important;
        max-height: var(--bibimir-catalog-height) !important;
        overflow: visible !important;
        transform: none !important;
        transition: none !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog.active,
    .ds-menu-catalog.ds-menu-main-catalog.with-slideshow {
        overflow: visible !important;
        pointer-events: auto !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog:not(.active):not(.with-slideshow),
    .ds-menu-catalog.ds-menu-main-catalog:not(.active):not(.with-slideshow) * {
        pointer-events: none !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner {
        min-height: 0 !important;
        max-height: none !important;
        height: 100% !important;
        overflow: visible !important;
    }

    /* Never scroll this wrapper: it would clip panels translated to the right. */
    .ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items {
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        min-height: 0 !important;
        height: 100% !important;
        gap: 0 !important;
        overflow: visible !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item {
        flex: 0 0 auto !important;
        height: auto !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item > a {
        height: auto !important;
        min-height: 2.75rem;
        padding-top: 0.65rem !important;
        padding-bottom: 0.65rem !important;
        box-sizing: border-box;
    }

    /* First-level category icons (SVG/PNG from category "oct_image") */
    .ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item .ds-menu-catalog-item-img {
        width: 24px !important;
        height: 24px !important;
        object-fit: contain;
        flex: 0 0 auto;
    }

    .ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item > span.d-inline-flex {
        min-width: 0;
    }

    /*
     * The panel must be positioned against the catalog shell, not against a
     * category row. Its inner wrapper owns vertical scrolling.
     */
    .ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item > .ds-menu-catalog {
        top: 0 !important;
        bottom: auto !important;
        height: var(--bibimir-catalog-height) !important;
        min-height: var(--bibimir-catalog-height) !important;
        max-height: var(--bibimir-catalog-height) !important;
        overflow: hidden !important;
        transition: none !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog {
        transition: none !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item > .ds-menu-catalog > .ds-menu-catalog-inner {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    /* There is always a visible right panel while the catalog is open. */
    .ds-menu-catalog.ds-menu-main-catalog.active > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item:first-child > .ds-menu-catalog,
    .ds-menu-catalog.ds-menu-main-catalog.with-slideshow > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item:first-child > .ds-menu-catalog {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 13023;
    }

    /* Hover and .is-open switch panels without ever leaving the right side blank. */
    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog-item:hover > .ds-menu-catalog,
    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog-item.is-open > .ds-menu-catalog {
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 13024;
    }

    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog-item:hover,
    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog-item.is-open,
    .ds-menu-catalog.ds-menu-main-catalog.active > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item:first-child,
    .ds-menu-catalog.ds-menu-main-catalog.with-slideshow > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item:first-child {
        background: #fcfcfc;
    }

    /* Wide megamenu: 4 columns side by side */
    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog-wide {
        height: var(--bibimir-catalog-height) !important;
        min-height: var(--bibimir-catalog-height) !important;
        max-height: var(--bibimir-catalog-height) !important;
        border-bottom-left-radius: 0 !important;
        overflow: hidden !important;
        /* Decouple panel width from the theme's 300%/translateX trick */
        left: 100% !important;
        transform: none !important;
        width: var(--bibimir-catalog-panel) !important;
        max-width: none !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog-wide > .ds-menu-catalog-inner {
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
    }

    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog-wide > .ds-menu-catalog-inner > .ds-menu-catalog-items {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        align-content: flex-start !important;
        justify-content: flex-start !important;
        gap: 1rem !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: initial !important;
    }

    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog-wide > .ds-menu-catalog-inner > .ds-menu-catalog-items > .ds-menu-catalog-item,
    .ds-menu-catalog.ds-menu-main-catalog .ds-menu-catalog-wide > .ds-menu-catalog-inner > .ds-menu-catalog-items > li {
        flex: 0 0 calc(25% - 1rem) !important;
        width: calc(25% - 1rem) !important;
        max-width: calc(25% - 1rem) !important;
        height: auto !important;
        min-height: 0 !important;
        align-self: flex-start !important;
        justify-content: flex-start !important;
    }

    /* Language dropdown */
    .bibimir-lang {
        position: relative;
        margin: 0 0.75rem 0 0.5rem;
        flex: 0 0 auto;
    }

    .bibimir-lang-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 10px;
        border: 1px solid rgba(0, 23, 31, 0.12);
        border-radius: 8px;
        background: #fff;
        color: #00171f;
        cursor: pointer;
        line-height: 1;
    }

    .bibimir-lang-toggle:hover {
        border-color: rgba(0, 168, 232, 0.45);
    }

    .bibimir-lang.is-open .bibimir-lang-toggle {
        border-color: var(--ds-primary-color, #00a8e8);
    }

    .bibimir-lang-code {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .bibimir-lang-caret {
        opacity: 0.6;
        transition: transform 0.15s ease;
    }

    .bibimir-lang.is-open .bibimir-lang-caret {
        transform: rotate(180deg);
    }

    .bibimir-lang-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: auto !important;
        right: 0 !important;
        min-width: 96px;
        width: max-content;
        max-width: 140px;
        padding: 4px;
        background: #fff;
        border: 1px solid rgba(0, 23, 31, 0.1);
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 23, 31, 0.12);
        z-index: 13050;
    }

    .bibimir-lang-menu #form-language {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .bibimir-lang-menu[hidden] {
        display: none !important;
    }

    .bibimir-lang-option {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 7px 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #00171f;
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
    }

    .bibimir-lang-option:hover,
    .bibimir-lang-option.is-active {
        background: rgba(0, 168, 232, 0.08);
    }

    /* Legacy mova RU|UA switcher → site-style language control (CSS only) */
    .header__languages.button,
    .header__languages {
        position: relative !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #fff !important;
        border: 1px solid rgba(0, 23, 31, 0.12) !important;
        border-radius: 8px !important;
        min-height: 40px !important;
        min-width: 64px !important;
        width: auto !important;
        height: auto !important;
        padding: 0 28px 0 12px !important;
        margin: 0 0.75rem 0 0.5rem !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .header__languages::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 0;
        height: 0;
        border-left: 4px solid transparent;
        border-right: 4px solid transparent;
        border-top: 4px solid #00171f;
        opacity: 0.55;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 1;
    }

    .header__languages .header__select,
    .header__languages #form-language {
        display: flex !important;
        align-items: center !important;
    }

    .header__languages .separator {
        display: none !important;
    }

    .header__languages .language-option {
        padding: 0 !important;
    }

    .header__languages .language-option:not(.active) {
        display: none !important;
    }

    .header__languages .language-option a {
        color: #00171f !important;
        font-size: 12px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em;
        text-decoration: none !important;
        line-height: 1 !important;
    }

    .header__languages:hover,
    .header__languages:focus-within {
        border-color: rgba(0, 168, 232, 0.45) !important;
    }

    .header__languages:hover .language-option:not(.active),
    .header__languages:focus-within .language-option:not(.active) {
        display: flex !important;
        align-items: center !important;
        position: absolute !important;
        top: calc(100% + 8px) !important;
        left: 0 !important;
        right: auto !important;
        min-width: 96px;
        padding: 8px 10px !important;
        background: #fff !important;
        border: 1px solid rgba(0, 23, 31, 0.1);
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 23, 31, 0.12);
        z-index: 13050;
    }

    .header__languages:hover .language-option:not(.active) a,
    .header__languages:focus-within .language-option:not(.active) a {
        font-weight: 500 !important;
        width: 100%;
    }

    .header__languages:hover .language-option:not(.active):hover,
    .header__languages:focus-within .language-option:not(.active):hover {
        background: rgba(0, 168, 232, 0.08) !important;
    }

    /* Auth icon — same footprint as wishlist/compare */
    .ds-header-user-button {
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 1rem 0 0 !important;
        line-height: 0 !important;
    }

    .ds-header-user-button svg {
        display: block;
        width: 25px;
        height: 25px;
    }

    .ds-header-cart-button {
        margin-left: 0 !important;
    }
}

/* Mobile header + bottom nav + burger lang */
@media (max-width: 991.98px) {
    .bibimir-lang-header,
    .header__languages,
    .bibimir-lang-mobile-source,
    .ds-header-right #language,
    .ds-header-right .bibimir-lang,
    .ds-header-right .header__languages,
    .ds-header-right .language.nav,
    .ds-header-right .langmark,
    .ds-header-right > #language,
    .ds-header-right > .language,
    .ds-header-right > .langmark,
    .ds-header-right > .bibimir-lang-wrap {
        display: none !important;
    }

    .ds-header-user-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 0.5rem 0 0 !important;
        line-height: 0 !important;
        order: 40;
    }

    .ds-header-user-button svg {
        display: block !important;
        width: 25px !important;
        height: 25px !important;
    }

    .ds-header-cart-button {
        order: 50;
    }

    .ds-mobile-bottom-nav-lang,
    .bibimir-lang-burger {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        justify-content: flex-start;
    }

    .bibimir-lang-burger-item {
        border-top: 1px solid rgba(0, 23, 31, 0.08) !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        justify-content: flex-start !important;
        background: transparent !important;
    }

    .bibimir-lang-mobile,
    .bibimir-lang-mobile-switch {
        display: inline-flex !important;
        align-items: center;
        justify-content: flex-start;
        gap: 6px;
        font-size: 14px;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: #00171f;
        line-height: 1;
        white-space: nowrap;
    }

    .bibimir-lang-mobile-link {
        border: 0;
        background: transparent;
        padding: 0;
        color: inherit;
        font: inherit;
        line-height: 1;
        cursor: pointer;
        pointer-events: auto !important;
        text-transform: uppercase;
        font-weight: 700;
    }

    .bibimir-lang-mobile-link.is-active {
        color: var(--ds-primary-color, #00a8e8);
        font-weight: 700;
        cursor: default;
    }

    .bibimir-lang-mobile-sep {
        opacity: 0.35;
        user-select: none;
    }
}

@media (min-width: 992px) {
    .bibimir-lang-header img,
    .header__languages img {
        display: none !important;
    }
}

/* Tablet/desktop language dropdown in header */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .bibimir-lang-header,
    .bibimir-lang:not(.bibimir-lang-mobile) {
        position: relative;
        margin: 0 8px 0 4px;
    }

    .bibimir-lang-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 36px;
        padding: 0 8px;
        border: 1px solid rgba(0, 23, 31, 0.12);
        border-radius: 8px;
        background: #fff;
        color: #00171f;
        cursor: pointer;
    }

    .bibimir-lang-code {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .bibimir-lang-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: auto !important;
        right: 0 !important;
        min-width: 96px;
        width: max-content;
        max-width: 140px;
        padding: 4px;
        background: #fff;
        border: 1px solid rgba(0, 23, 31, 0.1);
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 23, 31, 0.12);
        z-index: 13050;
    }

    .bibimir-lang-menu #form-language {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .bibimir-lang-menu[hidden] {
        display: none !important;
    }

    .bibimir-lang-option {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 7px 10px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
        text-align: left;
    }
}

/* Wider desktop catalog on large screens */
@media (min-width: 1400px) {
    .ds-menu-catalog.ds-menu-main-catalog,
    .ds-header.with-categories-menu .ds-menu-main-catalog,
    .ds-header.with-categories-menu .ds-menu-main-catalog.with-slideshow {
        --bibimir-catalog-col: 330px;
    }
}

@media (min-width: 1600px) {
    .ds-menu-catalog.ds-menu-main-catalog,
    .ds-header.with-categories-menu .ds-menu-main-catalog,
    .ds-header.with-categories-menu .ds-menu-main-catalog.with-slideshow {
        --bibimir-catalog-col: 360px;
    }
}