/* Theme 2 — final mobile header + off-canvas navigation polish.
   Scope: <= 991.98px only. Desktop storefront is intentionally untouched. */

@media (max-width: 991.98px) {
    .theme2-storefront .storefront-sticky-shell.stx-header,
    .theme2-storefront .stx-mainbar,
    .theme2-storefront .stx-categorybar {
        width: 100%;
        max-width: 100%;
    }

    .theme2-storefront .stx-mainbar {
        padding: 0 !important;
    }

    .theme2-storefront .stx-header-container {
        width: 100%;
        max-width: none !important;
        padding-inline: 12px !important;
    }

    .theme2-storefront .stx-mainbar__inner {
        display: grid !important;
        grid-template-columns: 44px minmax(90px, 1fr) auto !important;
        grid-template-areas:
            "menu logo mobile-actions"
            "search search search" !important;
        align-items: center !important;
        column-gap: 10px !important;
        row-gap: 8px !important;
        min-height: 0 !important;
        padding: 9px 0 10px !important;
    }

    .theme2-storefront .stx-mobile-menu-btn {
        grid-area: menu !important;
        justify-self: start !important;
        align-self: center !important;
    }

    .theme2-storefront .stx-logo {
        grid-area: logo !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        min-width: 0;
    }

    .theme2-storefront .stx-logo__surface {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 92px !important;
        height: 40px !important;
        padding: 2px 4px !important;
        overflow: visible !important;
    }

    .theme2-storefront .stx-logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 88px !important;
        max-height: 36px !important;
        object-fit: contain !important;
        object-position: center !important;
    }

    .theme2-storefront .stx-mobile-actions {
        grid-area: mobile-actions !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
        min-width: 0;
    }

    .theme2-storefront .stx-mobile-menu-btn.vl-offcanvas-toggle,
    .theme2-storefront .stx-mobile-action {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: transparent !important;
        color: #fff !important;
        box-shadow: none !important;
    }

    .theme2-storefront .stx-mobile-menu-btn.vl-offcanvas-toggle:hover,
    .theme2-storefront .stx-mobile-menu-btn.vl-offcanvas-toggle:focus-visible,
    .theme2-storefront .stx-mobile-action:hover,
    .theme2-storefront .stx-mobile-action:focus-visible {
        background: rgba(255, 255, 255, .10) !important;
        outline: none;
    }

    .theme2-storefront .stx-mobile-menu-btn .icon-bar {
        width: 20px !important;
        height: 2px !important;
        margin: 0 !important;
        border-radius: 999px;
        background: #fff !important;
    }

    .theme2-storefront .stx-mobile-action {
        font-size: 17px !important;
    }

    .theme2-storefront .stx-mobile-badge {
        top: 0 !important;
        right: -1px !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 3px !important;
        border-width: 2px !important;
        font-size: 7.5px !important;
        line-height: 1 !important;
    }

    .theme2-storefront .stx-search {
        grid-area: search !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .theme2-storefront .stx-search__box {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 44px !important;
        width: 100% !important;
        height: 42px !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(15, 32, 54, .12) !important;
    }

    .theme2-storefront .stx-search__box input[type="search"] {
        width: 100% !important;
        min-width: 0 !important;
        height: 42px !important;
        padding: 0 12px !important;
        font-size: 13px !important;
        line-height: 42px !important;
        text-overflow: ellipsis;
    }

    .theme2-storefront .stx-search__submit {
        width: 44px !important;
        height: 42px !important;
        min-width: 44px !important;
        padding: 0 !important;
        font-size: 15px !important;
    }

    .theme2-storefront .stx-categorybar {
        min-height: 38px !important;
        border-top: 1px solid rgba(22, 48, 77, .06) !important;
        box-shadow: 0 2px 8px rgba(15, 32, 54, .05) !important;
    }

    .theme2-storefront .stx-categorybar__mobile {
        min-height: 38px !important;
    }

    /* Off-canvas shell */
    .theme2-storefront .vl-offcanvas {
        top: 0 !important;
        bottom: 0 !important;
        left: min(-88vw, -340px) !important;
        width: min(88vw, 340px) !important;
        max-width: 340px !important;
        height: 100vh !important;
        height: 100dvh !important;
        overflow: hidden !important;
        border-radius: 0 18px 18px 0 !important;
        background: #fff !important;
        box-shadow: 18px 0 48px rgba(15, 32, 54, .24) !important;
    }

    .theme2-storefront .vl-offcanvas.vl-offcanvas-open {
        left: 0 !important;
    }

    .theme2-storefront .vl-offcanvas-wrapper {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        height: 100% !important;
        min-height: 0;
        padding: 0 !important;
        overflow: hidden !important;
    }

    .theme2-storefront .vl-offcanvas-header {
        position: relative;
        z-index: 2;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex: 0 0 auto;
        width: 100%;
        min-height: 66px !important;
        margin: 0 !important;
        padding: 11px 13px 11px 16px !important;
        border: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
        background: #16304d !important;
    }

    .theme2-storefront .vl-offcanvas-logo,
    .theme2-storefront .vl-offcanvas-logo a {
        display: inline-flex !important;
        align-items: center !important;
        min-width: 0;
    }

    .theme2-storefront .vl-offcanvas-logo img {
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-width: 104px !important;
        max-height: 40px !important;
        object-fit: contain !important;
        object-position: left center !important;
    }

    .theme2-storefront .vl-offcanvas-close-toggle {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(255, 255, 255, .18) !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, .10) !important;
        color: #fff !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .theme2-storefront .vl-offcanvas-close-toggle:hover,
    .theme2-storefront .vl-offcanvas-close-toggle:focus-visible {
        background: rgba(255, 255, 255, .18) !important;
        color: #fff !important;
        transform: none !important;
        outline: none;
    }

    .theme2-storefront .vl-offcanvas-menu {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 9px 12px 18px !important;
        background: #fff !important;
        scrollbar-width: thin;
        scrollbar-color: #b8c3cf transparent;
    }

    .theme2-storefront .vl-offcanvas-menu::-webkit-scrollbar {
        width: 5px;
    }

    .theme2-storefront .vl-offcanvas-menu::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #b8c3cf;
    }

    .theme2-storefront .vl-offcanvas-menu nav,
    .theme2-storefront .vl-offcanvas-menu nav > ul {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .theme2-storefront .vl-offcanvas-menu nav ul li {
        position: relative;
        width: 100% !important;
        margin: 0 !important;
        border-bottom: 1px solid #edf1f5 !important;
    }

    .theme2-storefront .vl-offcanvas-menu nav ul li > a,
    .theme2-storefront .vl-offcanvas-menu nav a[class*="select-btn-"],
    .theme2-storefront .vl-offcanvas-menu nav a.nav-fade {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 44px !important;
        padding: 10px 42px 10px 9px !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #203642 !important;
        font-size: 13.5px !important;
        line-height: 1.3 !important;
        font-weight: 650 !important;
        text-decoration: none !important;
    }

    .theme2-storefront .vl-offcanvas-menu nav ul li > a:hover,
    .theme2-storefront .vl-offcanvas-menu nav ul li > a:focus-visible {
        background: #f1f5f9 !important;
        color: #16304d !important;
    }

    /* The fixed utility links: Wishlist, About Us and Contact remain visually clear
       before the dynamic product-category list starts. */
    .theme2-storefront .vl-offcanvas-menu nav > ul > li:nth-child(5) > a,
    .theme2-storefront .vl-offcanvas-menu nav > ul > li:nth-child(6) > a,
    .theme2-storefront .vl-offcanvas-menu nav > ul > li:nth-child(7) > a {
        color: #16304d !important;
        font-weight: 750 !important;
    }

    .theme2-storefront .vl-offcanvas-menu nav li button.vl-menu-close {
        position: absolute !important;
        top: 4px !important;
        right: 2px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: #6d7d88 !important;
        font-size: 12px !important;
    }

    .theme2-storefront .vl-offcanvas-menu nav li.active > button.vl-menu-close i {
        transform: rotate(90deg);
    }

    .theme2-storefront .vl-offcanvas-menu nav .sub-menu,
    .theme2-storefront .vl-offcanvas-menu nav .navbar__sub-menu,
    .theme2-storefront .vl-offcanvas-menu nav .navbar__sub-menu__nested {
        margin: 0 0 6px !important;
        padding: 4px 0 6px 10px !important;
        border: 0 !important;
        border-radius: 9px !important;
        background: #f7f9fb !important;
    }

    .theme2-storefront .vl-offcanvas-menu nav .sub-menu li > a,
    .theme2-storefront .vl-offcanvas-menu nav .navbar__sub-menu li > a {
        min-height: 39px !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
    }

    .theme2-storefront .vl-offcanvas-overlay {
        background: rgba(6, 18, 31, .58) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

@media (max-width: 575.98px) {
    .theme2-storefront .stx-header-container {
        padding-inline: 8px !important;
    }

    /* Equal side columns keep the CUB logo optically centered. */
    .theme2-storefront .stx-mainbar__inner {
        grid-template-columns: 70px minmax(0, 1fr) 70px !important;
        grid-template-rows: 38px 40px !important;
        grid-template-areas:
            "menu logo mobile-actions"
            "search search search" !important;
        column-gap: 5px !important;
        row-gap: 6px !important;
        padding: 7px 0 8px !important;
    }

    .theme2-storefront .stx-mobile-menu-btn {
        justify-self: start !important;
    }

    .theme2-storefront .stx-logo {
        justify-self: center !important;
        justify-content: center !important;
    }

    .theme2-storefront .stx-logo__surface {
        width: 78px !important;
        height: 38px !important;
        padding: 1px 3px !important;
    }

    .theme2-storefront .stx-logo img {
        max-width: 76px !important;
        max-height: 34px !important;
    }

    .theme2-storefront .stx-mobile-actions {
        justify-self: end !important;
        width: 70px !important;
        gap: 2px !important;
    }

    .theme2-storefront .stx-mobile-menu-btn.vl-offcanvas-toggle,
    .theme2-storefront .stx-mobile-action {
        flex-basis: 34px !important;
        width: 34px !important;
        min-width: 34px !important;
        height: 36px !important;
    }

    .theme2-storefront .stx-mobile-menu-btn .icon-bar {
        width: 18px !important;
    }

    .theme2-storefront .stx-search__box,
    .theme2-storefront .stx-search__box input[type="search"],
    .theme2-storefront .stx-search__submit {
        height: 40px !important;
    }

    .theme2-storefront .stx-search__box {
        grid-template-columns: minmax(0, 1fr) 42px !important;
        border-radius: 7px !important;
    }

    .theme2-storefront .stx-search__box input[type="search"] {
        padding-inline: 11px !important;
        font-size: 12px !important;
        line-height: 40px !important;
    }

    .theme2-storefront .stx-search__submit {
        width: 42px !important;
        min-width: 42px !important;
    }

    .theme2-storefront .stx-categorybar,
    .theme2-storefront .stx-categorybar__mobile {
        min-height: 36px !important;
    }

    .theme2-storefront .stx-categorybar__mobile.d-flex {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .theme2-storefront .stx-categorybar__mobile > a {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        min-height: 36px !important;
        padding: 0 2px !important;
        border-right: 1px solid #edf1f5 !important;
        color: #243947 !important;
        font-size: 10.5px !important;
        line-height: 1.1 !important;
        font-weight: 700 !important;
        text-align: center !important;
        text-overflow: ellipsis;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    .theme2-storefront .stx-categorybar__mobile > a:nth-child(5) {
        border-right: 0 !important;
    }

    /* About Us, Contact and product categories are intentionally kept in the
       hamburger sidebar at phone widths so the top row stays uncluttered. */
    .theme2-storefront .stx-categorybar__mobile > a:nth-child(n + 6) {
        display: none !important;
    }

    .theme2-storefront .vl-offcanvas {
        width: min(90vw, 326px) !important;
        max-width: 326px !important;
        left: min(-90vw, -326px) !important;
        border-radius: 0 16px 16px 0 !important;
    }

    .theme2-storefront .vl-offcanvas.vl-offcanvas-open {
        left: 0 !important;
    }

    .theme2-storefront .vl-offcanvas-header {
        min-height: 62px !important;
        padding: 10px 11px 10px 14px !important;
    }

    .theme2-storefront .vl-offcanvas-logo img {
        max-width: 96px !important;
        max-height: 37px !important;
    }

    .theme2-storefront .vl-offcanvas-close-toggle {
        flex-basis: 34px !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 9px !important;
        font-size: 17px !important;
    }

    .theme2-storefront .vl-offcanvas-menu {
        padding: 8px 11px 16px !important;
    }

    .theme2-storefront .vl-offcanvas-menu nav ul li > a,
    .theme2-storefront .vl-offcanvas-menu nav a[class*="select-btn-"],
    .theme2-storefront .vl-offcanvas-menu nav a.nav-fade {
        min-height: 42px !important;
        padding-top: 9px !important;
        padding-bottom: 9px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 359.98px) {
    .theme2-storefront .stx-mainbar__inner {
        grid-template-columns: 64px minmax(0, 1fr) 64px !important;
        column-gap: 3px !important;
    }

    .theme2-storefront .stx-logo__surface {
        width: 70px !important;
    }

    .theme2-storefront .stx-logo img {
        max-width: 68px !important;
    }

    .theme2-storefront .stx-mobile-actions {
        width: 64px !important;
        gap: 0 !important;
    }

    .theme2-storefront .stx-mobile-menu-btn.vl-offcanvas-toggle,
    .theme2-storefront .stx-mobile-action {
        flex-basis: 31px !important;
        width: 31px !important;
        min-width: 31px !important;
        height: 33px !important;
    }

    .theme2-storefront .stx-categorybar__mobile > a {
        font-size: 9.8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .theme2-storefront .vl-offcanvas,
    .theme2-storefront .vl-offcanvas-close-toggle,
    .theme2-storefront .vl-offcanvas-menu nav li button.vl-menu-close i {
        transition: none !important;
    }
}