/* =============================================================
   WP Header Nav — Frontend Styles  v1.0.0
   All selectors scoped to #whn-header / .whn-* to avoid conflicts.
   Max Mega Menu overrides are scoped to .whn-nav.
   ============================================================= */

/* Classic & Block themes native header suppression (scoped to opt-in) */
body.whn-auto-hide-theme-header #masthead,
body.whn-auto-hide-theme-header .site-header,
body.whn-auto-hide-theme-header header.site-header,
body.whn-auto-hide-theme-header header:not(#whn-header),
body.whn-auto-hide-theme-header .storefront-primary-navigation,
body.whn-auto-hide-theme-header .header-widget-region,
body.whn-auto-hide-theme-header .wp-site-blocks>header,
body.whn-auto-hide-theme-header .wp-site-blocks>.wp-block-template-part,
body.whn-auto-hide-theme-header body>.wp-site-blocks>header {
    display: none !important;
}

/* Restore any <header> that may appear inside article/post content */
.entry-content header,
article header,
.wp-block-post-content header {
    display: revert !important;
}

/* Hide duplicate account items in primary menu via CSS immediately to prevent FOUC */
.whn-nav-list li.menu-item-account,
.whn-nav-list li a[href*="account"],
.whn-nav-list li a[href*="my-account"] {
    display: none !important;
}

/* When WP admin bar is visible, account for its height dynamically */
.admin-bar #whn-header.whn-sticky {
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wab-height, 0px) - 1px);
}

/* ── Base header ─────────────────────────────────────────────── */
#whn-header {
    --whn-text-current: var(--whn-text-top, var(--whn-text, #1a1a1a));
    --whn-bg-current: var(--whn-bg-top, var(--whn-bg, #fff));
    background: linear-gradient(var(--whn-overlay-top, transparent), var(--whn-overlay-top, transparent)),
        var(--whn-bg-top, var(--whn-bg, #fff));
    color: var(--whn-text-top, var(--whn-text, #1a1a1a));
    border-top: none !important;
    width: 100%;
    z-index: 99995;
    overflow: visible;
    box-sizing: border-box;
    transition: box-shadow 0.25s ease, background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* After scroll: switch to scrolled color set */
#whn-header.whn-scrolled {
    --whn-text-current: var(--whn-text, #1a1a1a);
    --whn-bg-current: var(--whn-bg, #fff);
    background: linear-gradient(var(--whn-overlay, transparent), var(--whn-overlay, transparent)),
        var(--whn-bg, #fff) !important;
    color: var(--whn-text, #1a1a1a) !important;
}

/* When mobile navigation drawer is open: use secondary brand header color on ALL pages.
   z-index raised above drawer (99998) so the overflowing brand logo renders on top. */
#whn-header.whn-nav-open,
body.whn-nav-open-active #whn-header {
    --whn-text-current: #ffffff;
    --whn-bg-current: var(--brand-color-secondary, #d97706);
    background: var(--brand-color-secondary, #d97706) !important;
    background-color: var(--brand-color-secondary, #d97706) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    z-index: 99999 !important;
}

#whn-header.whn-nav-open .whn-inner,
body.whn-nav-open-active #whn-header .whn-inner {
    will-change: auto !important;
    transform: none !important;
    perspective: none !important;
    filter: none !important;
}

#whn-header.whn-sticky {
    position: sticky;
    top: calc(var(--wab-height, 0px) - 1px);
}

#whn-header {
    border-bottom: 1px solid var(--whn-border-top, transparent) !important;
}

#whn-header.whn-scrolled {
    border-bottom-color: var(--whn-border, transparent) !important;
}

#whn-header.whn-scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

/* ── Inner container ─────────────────────────────────────────── */
.whn-inner {
    display: flex;
    align-items: center;
    height: var(--whn-h-desk, 64px);
    padding: 0 40px;
    width: 100%;
    box-sizing: border-box;
    transition: height 0.25s ease;
    will-change: height;
    position: relative;
    gap: 0;
}

#whn-header.whn-shrunk .whn-inner {
    height: calc(var(--whn-h-desk, 64px) * 0.8);
}

/* ── Logo ─────────────────────────────────────────────────────── */
.whn-logo {
    flex-shrink: 0;
    z-index: 100001 !important;
    position: relative;
    padding-left: var(--whn-logo-pl, 0px);
}

.whn-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--whn-text-current, #1a1a1a);
}

.whn-logo-text {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1;
}

.whn-logo-link img {
    display: block;
    height: auto;
    max-height: 38px;
    width: auto;
    transition: max-height 0.25s ease;
}

#whn-header.whn-shrunk .whn-logo-link img {
    max-height: 30px;
}

/* Brand logo (from Brand Assets plugin) — per-device width from CSS custom properties */
/* Higher specificity to beat .whn-logo-link img */
.whn-logo-link .whn-brand-logo-img {
    display: block;
    width: var(--wpba-logo-width-desk, 200px);
    max-width: 100%;
    height: auto;
    max-height: none;
    transition: transform 0.25s ease, width 0.25s ease;
}

#whn-header.whn-shrunk .whn-logo-link .whn-brand-logo-img {
    transform: scale(0.85);
    transform-origin: left center;
}

@media (max-width: 1024px) {
    .whn-logo-link .whn-brand-logo-img {
        width: var(--wpba-logo-width-tab, 140px);
    }
}

@media (max-width: 767px) {
    .whn-logo-link .whn-brand-logo-img {
        width: var(--wpba-logo-width-mob, 80px);
    }
}

/* ── Primary navigation ──────────────────────────────────────── */
.whn-nav {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    height: 100%;
    overflow: visible;
    margin-left: 40px;
}

/* ── Max Mega Menu overrides ─────────────────────────────────── */

/* Remove MMM's own background/border on the nav bar */
.whn-nav #mega-menu-wrap-whn-primary {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* Hide menu item icons when navbar is in horizontal mode (not mobile drawer) */
.whn-nav:not(.whn-mobile-open) .whn-drawer-icon,
.whn-nav:not(.whn-mobile-open) .mega-menu-icon,
.whn-nav:not(.whn-mobile-open)>ul>li>a>svg,
.whn-nav:not(.whn-mobile-open)>ul>li>a>img,
.whn-nav:not(.whn-mobile-open)>ul>li>a>i,
.whn-nav:not(.whn-mobile-open)>ul>li>a>.dashicons {
    display: none !important;
}

.whn-nav #mega-menu-whn-primary {
    background: transparent !important;
    height: 100%;
}

/* Top-level nav items */
.whn-nav #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link {
    color: var(--whn-text-current, #1a1a1a) !important;
    font-family: var(--whn-nav-font-family, inherit) !important;
    font-size: var(--whn-nav-font-size, 11px) !important;
    font-weight: var(--whn-nav-font-weight, 500) !important;
    letter-spacing: var(--whn-nav-letter-spacing, 0) !important;
    text-transform: var(--whn-nav-text-transform, uppercase) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 14px !important;
    height: var(--whn-h-desk, 64px);
    line-height: var(--whn-h-desk, 64px) !important;
    white-space: nowrap;
    position: relative;
    transition: opacity 0.15s ease;
}

.whn-nav #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link:focus-visible {
    outline: 2px solid var(--whn-text-current, #1a1a1a);
    outline-offset: 2px;
}

/* Override Max Mega Menu default active/current styles */
.whn-nav #mega-menu-whn-primary>li.mega-menu-item.mega-current-menu-item>a.mega-menu-link,
.whn-nav #mega-menu-whn-primary>li.mega-menu-item.mega-current-menu-ancestor>a.mega-menu-link,
.whn-nav #mega-menu-whn-primary>li.mega-menu-item.mega-current-page-ancestor>a.mega-menu-link,
.whn-nav #mega-menu-whn-primary>li.mega-menu-item.mega-current-ancestor>a.mega-menu-link,
.whn-nav #mega-menu-whn-primary>li.mega-menu-item:hover>a.mega-menu-link,
.whn-nav #mega-menu-whn-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--whn-nav-active, var(--brand-color-primary, #b3261e)) !important;
    border-color: transparent !important;
    font-weight: inherit !important;
    text-decoration: none !important;
}

#whn-header.whn-shrunk .whn-nav #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link {
    height: calc(var(--whn-h-desk, 64px) * 0.8);
    line-height: calc(var(--whn-h-desk, 64px) * 0.8) !important;
}

/* Underline slide-in on hover & active tab indicator */
.whn-nav #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--whn-nav-active, var(--brand-color-primary, #b3261e));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.22s ease;
    pointer-events: none;
}

.whn-nav #mega-menu-whn-primary>li.mega-menu-item:hover>a.mega-menu-link::after,
.whn-nav #mega-menu-whn-primary>li.mega-menu-item.mega-current-menu-item>a.mega-menu-link::after,
.whn-nav #mega-menu-whn-primary>li.mega-menu-item.mega-current-menu-ancestor>a.mega-menu-link::after,
.whn-nav #mega-menu-whn-primary>li.mega-menu-item.mega-current-page-ancestor>a.mega-menu-link::after,
.whn-nav #mega-menu-whn-primary>li.mega-menu-item.mega-toggle-on>a.mega-menu-link::after {
    transform: scaleX(1);
}

/* Dropdown panel */
.whn-nav .mega-sub-menu {
    background: #fff !important;
    border: none !important;
    border-top: 1px solid #e8e8e8 !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1) !important;
    border-radius: 0 !important;
    padding: 28px 32px !important;
    max-width: calc(100vw - 32px) !important;
}

/* Dropdown column headings */
.whn-nav .mega-sub-menu .mega-menu-item.mega-menu-item-type-widget>span,
.whn-nav .mega-sub-menu .mega-menu-column>.mega-menu-link {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #767676 !important;
    padding: 0 0 10px !important;
    border: none !important;
    background: transparent !important;
    cursor: default !important;
}

/* Dropdown links */
.whn-nav .mega-sub-menu a.mega-menu-link {
    color: #1a1a1a !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    padding: 5px 0 !important;
    background: transparent !important;
    border: none !important;
    line-height: 1.5 !important;
    transition: opacity 0.15s ease !important;
}

.whn-nav .mega-sub-menu a.mega-menu-link:hover {
    opacity: 0.55 !important;
    background: transparent !important;
}

/* Hide MMM's mobile toggle — we provide our own hamburger */
.whn-nav .mega-menu-toggle {
    display: none !important;
}

/* ── Icon action row ─────────────────────────────────────────── */
.whn-actions {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    z-index: 1;
    margin-left: auto;
}

.whn-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
    color: var(--whn-text-current, #1a1a1a) !important;
    padding: var(--whn-icon-padding, 6px) !important;
    border-radius: 4px;
    position: relative;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.15s ease;
    line-height: 1;
}

.whn-icon-btn:hover,
.whn-icon-btn:focus-visible {
    opacity: 0.55;
}

.whn-icon-btn:focus-visible {
    outline: 2px solid var(--whn-text-current, #1a1a1a) !important;
    outline-offset: 2px;
}

/* Cart count — circular badge */
.whn-cart-count {
    position: absolute;
    top: 0px;
    right: -2px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 99px;
    box-sizing: border-box;
    pointer-events: none;
    background: var(--whn-cart-badge-bg, #c0392b);
    color: var(--whn-cart-badge-text, #ffffff);
    border: 1.5px solid var(--whn-bg-current, #ffffff);
}



/* ── No-menu fallback hint ───────────────────────────────────── */
.whn-no-menu a {
    color: #767676;
    font-size: 13px;
    text-decoration: none;
    padding: 0 12px;
}

/* ── Tablet (769 – 1024 px) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
@media (min-width: 769px) and (max-width: 1024px) {
    .whn-inner {
        height: var(--whn-h-tab, 60px);
        padding: 0 24px;
    }

    #whn-header.whn-shrunk .whn-inner {
        height: calc(var(--whn-h-tab, 60px) * 0.8);
    }

    .whn-logo {
        padding-left: var(--whn-logo-pl, 0px);
    }

    .whn-icon-btn {
        padding: var(--whn-icon-padding, 6px) !important;
    }

    .whn-nav #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link {
        height: var(--whn-h-tab, 60px);
        line-height: var(--whn-h-tab, 60px) !important;
        font-size: var(--whn-nav-font-size, 11px) !important;
        letter-spacing: var(--whn-nav-letter-spacing, 0) !important;
    }

    #whn-header.whn-shrunk .whn-nav #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link {
        height: calc(var(--whn-h-tab, 60px) * 0.8);
        line-height: calc(var(--whn-h-tab, 60px) * 0.8) !important;
    }
}

/* ── Mobile ───────────────────────────────────────────────────── */
.whn-hamburger-btn {
    display: none;
}

/* Drawer foot hidden on desktop (shown only in mobile-open state) */
.whn-drawer-foot {
    display: none;
}

@media (max-width: 768px) {
    .whn-inner {
        height: var(--whn-h-mob, 54px);
        padding: 0 8px 0 8px;
    }

    /* Mobile nav font size */
    .whn-nav #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link {
        font-size: var(--whn-nav-font-size, 11px) !important;
        letter-spacing: var(--whn-nav-letter-spacing, 0) !important;
    }

    /* Mobile icon padding */
    .whn-icon-btn {
        padding: var(--whn-icon-padding, 6px) !important;
    }

    /* Three-zone layout: hamburger | logo (centered) | icons */
    .whn-hamburger-btn {
        display: flex;
        order: 1;
        margin-right: auto;
    }

    .whn-hamburger-btn:focus-visible {
        outline: 2px solid var(--whn-text-current, #1a1a1a);
        outline-offset: 2px;
    }

    .whn-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        order: 2;
    }

    .whn-nav {
        /* On mobile, MMM renders its own panel triggered by our hamburger */
        display: none;
    }

    /* Show mobile nav panel when toggled — full-width, below sticky header down to bottom of screen.
       The <nav> is portaled to <body> by JS so position:fixed resolves against the true browser
       viewport on iOS Safari / Brave (not a sticky-positioned containing block). */
    .whn-nav.whn-mobile-open {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 60px; /* fallback; JS sets style.top = header.getBoundingClientRect().bottom */
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        background: var(--wpc-surface-2, #FFFDF5) !important;
        overflow: hidden !important;
        z-index: 99998 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        animation: whn-panel-in 0.22s ease;
    }

    /* Force cream drawer background on MMM containers; scrollable menu area */
    .whn-nav.whn-mobile-open #mega-menu-wrap-whn-primary,
    .whn-nav.whn-mobile-open #mega-menu-whn-primary {
        background: var(--wpc-surface-2, #FFFDF5) !important;
    }

    .whn-nav.whn-mobile-open #mega-menu-wrap-whn-primary {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    @keyframes whn-panel-in {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .whn-actions {
        order: 3;
    }

    /* Mobile icon padding override */
    .whn-icon-btn {
        padding: var(--whn-icon-padding-mob, var(--whn-icon-padding, 6px)) !important;
    }

    /* MMM mobile menu list styles — clean vertical padding above first menu item */
    .whn-nav.whn-mobile-open .whn-nav-list,
    .whn-nav.whn-mobile-open #mega-menu-whn-primary {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px 0 0 0 !important;
        margin: 0 !important;
        background: var(--wpc-surface-2, #FFFDF5) !important;
    }

    .whn-drawer-header {
        display: none !important;
    }

    html.whn-scroll-locked,
    body.whn-scroll-locked {
        overflow: hidden !important;
        touch-action: none !important;
    }

    /* Hide drawer footer when drawer is not open.
       It is a direct <body> sibling (DOM portal) so must be hidden outside drawer context. */
    .whn-drawer-foot,
    .whn-drawer-footer {
        display: none !important;
    }

    body.whn-nav-open-active .whn-drawer-foot,
    body.whn-nav-open-active .whn-drawer-footer {
        display: flex !important;
        padding: 14px 20px max(16px, calc(14px + env(safe-area-inset-bottom, 0px))) !important;
        background: var(--wpc-surface-2, #FFFDF5) !important;
        border-top: 1px solid var(--wpc-border-color, #e5e0d8) !important;
        margin-top: auto !important;
        flex-shrink: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .whn-drawer-login-btn,
    .whn-drawer-account-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 12px 18px !important;
        background: var(--brand-color-secondary, #d97706) !important;
        color: #ffffff !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        text-decoration: none !important;
        letter-spacing: 0.05em !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
        transition: opacity 0.2s ease !important;
    }

    .whn-drawer-login-btn:hover,
    .whn-drawer-account-btn:hover {
        opacity: 0.9 !important;
    }

    .whn-drawer-account-btn:hover {
        opacity: 0.9;
    }

    .whn-nav.whn-mobile-open #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link,
    .whn-nav.whn-mobile-open ul.whn-nav-list>li>a,
    .whn-nav.whn-mobile-open .menu>li>a {
        height: auto !important;
        line-height: 1.5 !important;
        padding: 14px 24px !important;
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        border-bottom: var(--whn-drawer-divider-width, 1px) solid var(--whn-drawer-divider, transparent) !important;
        font-family: var(--whn-drawer-item-font-family, inherit);
        font-size: var(--whn-drawer-item-size-desk, 16px) !important;
        font-weight: var(--whn-drawer-item-weight, 500) !important;
        color: var(--whn-drawer-text, #1a1a1a) !important;
        text-decoration: none;
        text-transform: var(--whn-drawer-item-transform, uppercase);
        text-align: var(--whn-drawer-item-align, left) !important;
        letter-spacing: var(--whn-drawer-item-ls, 0) !important;
    }

    .whn-drawer-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        opacity: 0.85;
    }

    .whn-nav.whn-mobile-open .mega-sub-menu {
        box-shadow: none !important;
        border-top: none !important;
        position: static !important;
        padding: 0 0 8px 20px !important;
    }

    .whn-nav.whn-mobile-open .mega-sub-menu a.mega-menu-link {
        padding: 9px 20px !important;
        font-size: 14px !important;
    }

    /* Shrink disabled on mobile */
    #whn-header.whn-shrunk .whn-inner {
        height: var(--whn-h-mob, 54px);
    }

    /* ── Hamburger → ✕ animation (✕ forms from lines 1+3 rotating to centre) ─── */
    .whn-hamburger-btn svg line {
        transition: transform 0.22s ease, opacity 0.22s ease;
        transform-origin: 50% 50%;
        transform-box: view-box;
    }

    .whn-hamburger-btn[aria-expanded="true"] svg line:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .whn-hamburger-btn[aria-expanded="true"] svg line:nth-child(2) {
        opacity: 0;
    }

    .whn-hamburger-btn[aria-expanded="true"] svg line:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* ── Drawer foot (My Account + Login CTA) ─────────────────── */
    .whn-nav.whn-mobile-open .whn-drawer-foot {
        display: block;
        flex-shrink: 0;
        padding: 24px 20px 36px;
        border-top: var(--whn-drawer-divider-width, 1px) solid var(--whn-drawer-divider, #f0f0f0);
    }

    .whn-drawer-foot-title {
        margin: 0 0 12px;
        font-size: 12px;
        color: #767676;
        font-weight: 400;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }

    .whn-drawer-login-btn {
        display: block;
        width: fit-content !important;
        margin: 0 auto !important;
        background: var(--whn-drawer-cta-bg, #1a1a1a);
        color: var(--whn-drawer-cta-text, #fff) !important;
        text-align: center;
        padding: 12px 36px !important;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        text-decoration: none;
        border-radius: 30px !important;
        transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
    }

    .whn-drawer-login-btn:focus-visible {
        outline: 2px solid var(--whn-drawer-cta-text, #fff);
        outline-offset: 2px;
    }

    .whn-drawer-login-btn:hover {
        opacity: 0.95 !important;
        transform: scale(1.03);
    }

    /* When mobile navigation is open, use secondary brand color background & preserve exact header dimensions */
    #whn-header.whn-nav-open,
    body.whn-nav-open-active #whn-header {
        top: var(--wab-height, 0px) !important;
        background: var(--brand-color-secondary, #e65100) !important;
        background-color: var(--brand-color-secondary, #e65100) !important;
        color: #ffffff !important;
        box-shadow: none !important;
    }

    #whn-header.whn-nav-open .whn-icon-btn,
    #whn-header.whn-nav-open .whn-hamburger-btn,
    #whn-header.whn-nav-open .whn-actions .whn-icon-btn,
    body.whn-nav-open-active #whn-header .whn-icon-btn {
        color: #ffffff !important;
    }

    /* Account for WordPress Admin Bar when nav is open on mobile */
    @media (max-width: 782px) {
        body.admin-bar.whn-nav-open-active #whn-header {
            top: calc(46px + var(--wab-height, 0px)) !important;
        }
    }

    /* Account for WordPress Admin Bar when nav is open on desktop/tablet */
    @media (min-width: 783px) {
        body.admin-bar.whn-nav-open-active #whn-header {
            top: calc(32px + var(--wab-height, 0px)) !important;
        }
    }


}

/* Default "left" is the base layout: [logo][nav][auto][actions] */

/* ── Drawer nav item typography — tablet ────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

    .whn-nav.whn-mobile-open #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link,
    .whn-nav.whn-mobile-open ul.whn-nav-list>li>a,
    .whn-nav.whn-mobile-open .menu>li>a {
        font-size: var(--whn-drawer-item-size-tab, 16px) !important;
        font-weight: var(--whn-drawer-item-weight-tab, 500) !important;
        text-align: var(--whn-drawer-item-align-tab, left) !important;
        letter-spacing: var(--whn-drawer-item-ls-tab, 0) !important;
    }
}

/* ── Drawer nav item typography — mobile ────────────────────── */
@media (max-width: 768px) {

    .whn-nav.whn-mobile-open #mega-menu-whn-primary>li.mega-menu-item>a.mega-menu-link,
    .whn-nav.whn-mobile-open ul.whn-nav-list>li>a,
    .whn-nav.whn-mobile-open .menu>li>a {
        font-size: var(--whn-drawer-item-size-mob, 16px) !important;
        font-weight: var(--whn-drawer-item-weight-mob, 500) !important;
        text-align: var(--whn-drawer-item-align-mob, left) !important;
        letter-spacing: var(--whn-drawer-item-ls-mob, 0) !important;
    }
}

/* ── Tablet Logo Alignment (769 – 1024 px) ──────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {

    /* Left — reset any desktop center/right that would otherwise apply */
    #whn-header.whn-logo-tab-left .whn-logo {
        position: static !important;
        left: auto !important;
        transform: none !important;
        order: 0;
        margin-left: 0;
    }

    #whn-header.whn-logo-tab-left .whn-actions {
        order: 3;
    }

    /* Center */
    #whn-header.whn-logo-tab-center .whn-inner {
        position: relative;
    }

    #whn-header.whn-logo-tab-center .whn-logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 2;
    }

    #whn-header.whn-logo-tab-center .whn-nav {
        margin-left: 0;
    }

    /* Right */
    #whn-header.whn-logo-tab-right .whn-logo {
        position: static !important;
        left: auto !important;
        transform: none !important;
        order: 5;
        margin-left: 16px;
    }

    #whn-header.whn-logo-tab-right .whn-nav {
        margin-left: 0;
    }

    #whn-header.whn-logo-tab-right .whn-actions {
        order: 4;
    }
}

/* ── Mobile Logo Alignment ──────────────────────────────────── */
@media (max-width: 768px) {

    /* Left — static, flows naturally after hamburger */
    #whn-header.whn-logo-left .whn-hamburger-btn,
    #whn-header.whn-logo-mob-left .whn-hamburger-btn {
        margin-right: 0;
    }

    #whn-header.whn-logo-left .whn-logo,
    #whn-header.whn-logo-mob-left .whn-logo {
        position: static !important;
        left: auto !important;
        transform: none !important;
        order: 2;
    }

    /* Right — static, pushed to far right via flexbox order */
    #whn-header.whn-logo-right .whn-logo,
    #whn-header.whn-logo-mob-right .whn-logo {
        position: static !important;
        left: auto !important;
        transform: none !important;
        order: 5;
        margin-left: auto;
    }

    #whn-header.whn-logo-right .whn-actions,
    #whn-header.whn-logo-mob-right .whn-actions {
        order: 4;
    }

    /* Center — default mobile behaviour (position:absolute already applies) */
    #whn-header.whn-logo-center .whn-logo,
    #whn-header.whn-logo-mob-center .whn-logo {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

@media (min-width: 769px) {

    /* Center: logo absolutely centered, nav left, actions right */
    #whn-header.whn-logo-center .whn-inner {
        position: relative;
    }

    #whn-header.whn-logo-center .whn-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }

    #whn-header.whn-logo-center .whn-nav {
        margin-left: 0;
    }

    /* Right: nav left, actions + logo pushed right */
    #whn-header.whn-logo-right .whn-logo {
        order: 5;
        margin-left: 16px;
    }

    #whn-header.whn-logo-right .whn-nav {
        margin-left: 0;
    }

    #whn-header.whn-logo-right .whn-actions {
        order: 4;
        /* margin-left: auto already set; pushes both actions+logo to right */
    }
}

/* ── Live Search Results ─────────────────────────────────────── */
.whn-sp-spinner {
    position: absolute;
    right: 50px;
    top: 50%;
    margin-top: -8px;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: var(--whn-sp-accent, #1a1a1a);
    border-radius: 50%;
    animation: whn-spin 0.8s linear infinite;
    z-index: 5;
}

@keyframes whn-spin {
    to {
        transform: rotate(360deg);
    }
}

.whn-live-search-results {
    padding-top: 20px;
    padding-bottom: 40px;
}

.whn-sp-no-results {
    text-align: center;
    color: #666;
    font-size: 14px;
    padding: 40px 20px;
}

/* ── Hide toggles (classes on .whn-sp-products <ul>) ──────── */
.whn-sp-products.whn-hide-cart-btn .wcp-card .wcp-atc-btn {
    display: none !important;
}

.whn-sp-products.whn-hide-fat-btn .wcp-card .wcp-fat-btn {
    display: none !important;
}

.whn-sp-products.whn-hide-rating .wcp-card .wcp-rating-row {
    display: none !important;
}

.whn-sp-products.whn-hide-sale .wcp-card .wcp-badges-right {
    display: none !important;
}

.whn-sp-products.whn-hide-wishlist .wcp-card .wcp-wl-btn {
    display: none !important;
}

.whn-sp-products.whn-hide-quickview .wcp-card .wcp-qv-btn {
    display: none !important;
}

/* ── Primary & Secondary Logo Slots Layout ────────────────── */
.whn-logo-slot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    z-index: 100 !important;
}

/* Left slot: order -1 puts it before nav and action icons */
.whn-logo-slot-left {
    order: -1;
    padding-left: 0;
    z-index: 100 !important;
}

.whn-logo-slot-center {
    display: flex;
    /* always visible on desktop/tablet; mobile overrides to none */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100 !important;
    justify-content: center;
    align-items: center;
    width: max-content;
}

/* Logo vertical overlap calculation for out-of-bounds rendering (Desktop, Tablet, Mobile) */
.whn-logo-slot-left,
.whn-logo-slot-center,
.whn-logo-slot-right,
.whn-logo-link {
    overflow: visible !important;
    max-height: none !important;
}

.whn-brand-logo-img,
.whn-logo-link img {
    position: relative;
    z-index: 99999 !important;
    overflow: visible !important;
    display: block !important;
    width: auto !important;
    object-fit: contain !important;
    will-change: margin, height, transform;
}

@media (min-width: 1025px) {

    .whn-logo-primary .whn-brand-logo-img,
    .whn-logo-primary .whn-logo-link img {
        margin-top: calc(var(--whn-logo-overlap-above-desk, 0) * -1px) !important;
        margin-bottom: calc(var(--whn-logo-overlap-below-desk, 0) * -1px) !important;
        height: calc(var(--whn-h-desk, 64px) + (var(--whn-logo-overlap-above-desk, 0) + var(--whn-logo-overlap-below-desk, 0)) * 1px) !important;
        max-height: none !important;
    }

    .whn-logo-secondary .whn-brand-logo-img,
    .whn-logo-secondary .whn-logo-link img {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: var(--whn-h-desk, 64px) !important;
        max-height: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    .whn-logo-primary .whn-brand-logo-img,
    .whn-logo-primary .whn-logo-link img {
        margin-top: calc(var(--whn-logo-overlap-above-tab, 0) * -1px) !important;
        margin-bottom: calc(var(--whn-logo-overlap-below-tab, 0) * -1px) !important;
        height: calc(var(--whn-h-tab, 56px) + (var(--whn-logo-overlap-above-tab, 0) + var(--whn-logo-overlap-below-tab, 0)) * 1px) !important;
        max-height: none !important;
    }

    .whn-logo-secondary .whn-brand-logo-img,
    .whn-logo-secondary .whn-logo-link img {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: var(--whn-h-tab, 56px) !important;
        max-height: none !important;
    }
}

@media (max-width: 768px) {
    .whn-logo-slot-left {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        order: 2;
        gap: 8px;
        align-items: center;
        justify-content: center;
        z-index: 99999 !important;
        overflow: visible !important;
        max-height: none !important;
        height: 100% !important;
    }

    .whn-logo-primary .whn-brand-logo-img,
    .whn-logo-primary .whn-logo-link img,
    .whn-logo-slot-left .whn-logo-primary img,
    .whn-logo-slot-left .whn-logo-primary .whn-brand-logo-img {
        margin-top: calc(var(--whn-logo-overlap-above-mob, 15) * -1px) !important;
        margin-bottom: calc(var(--whn-logo-overlap-below-mob, 15) * -1px) !important;
        height: calc(var(--whn-h-mob, 50px) + (var(--whn-logo-overlap-above-mob, 15) + var(--whn-logo-overlap-below-mob, 15)) * 1px) !important;
        max-height: none !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
        overflow: visible !important;
    }

    .whn-logo-secondary .whn-brand-logo-img,
    .whn-logo-secondary .whn-logo-link img,
    .whn-logo-slot-left .whn-logo-secondary img,
    .whn-logo-slot-left .whn-logo-secondary .whn-brand-logo-img {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: var(--whn-h-mob, 50px) !important;
        max-height: none !important;
        width: auto !important;
        object-fit: contain !important;
        display: block !important;
        overflow: visible !important;
    }

    /* Center slot is hidden on mobile — left slot handles logo */
    .whn-logo-slot-center {
        display: none !important;
    }
}

/* Hide drawer footer by default (preventing it from bleeding into desktop/tablet horizontal menus) */
.whn-drawer-footer,
.whn-drawer-foot {
    display: none !important;
}

/* Only show the drawer footer when the mobile drawer is actually open */
.whn-nav.whn-mobile-open .whn-drawer-footer,
.whn-nav.whn-mobile-open .whn-drawer-foot {
    display: flex !important;
}

/* Hide all logos inside slots by default */
.whn-logo-slot .whn-logo-primary,
.whn-logo-slot .whn-logo-secondary {
    display: none;
    align-items: center;
    align-self: center;
}

/* 1. Desktop rules (min-width: 1025px) */
@media (min-width: 1024px) {
    .whn-logo-slot-left .whn-logo-primary.whn-align-p-desk-left.whn-p-show-desk-yes {
        display: flex;
    }

    .whn-logo-slot-left .whn-logo-secondary.whn-align-s-desk-left.whn-s-show-desk-yes {
        display: flex;
    }

    .whn-logo-slot-center .whn-logo-primary.whn-align-p-desk-center.whn-p-show-desk-yes {
        display: flex;
    }

    .whn-logo-slot-center .whn-logo-secondary.whn-align-s-desk-center.whn-s-show-desk-yes {
        display: flex;
    }

    /* Right-aligned logos — use left slot (only one slot renders per position) */
    .whn-logo-slot-left .whn-logo-primary.whn-align-p-desk-right.whn-p-show-desk-yes {
        display: flex;
    }

    .whn-logo-slot-left .whn-logo-secondary.whn-align-s-desk-right.whn-s-show-desk-yes {
        display: flex;
    }
}

/* 2. Tablet rules (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .whn-logo-slot-left .whn-logo-primary.whn-align-p-tab-left.whn-p-show-tab-yes {
        display: flex;
    }

    .whn-logo-slot-left .whn-logo-secondary.whn-align-s-tab-left.whn-s-show-tab-yes {
        display: flex;
    }

    .whn-logo-slot-center .whn-logo-primary.whn-align-p-tab-center.whn-p-show-tab-yes {
        display: flex;
    }

    .whn-logo-slot-center .whn-logo-secondary.whn-align-s-tab-center.whn-s-show-tab-yes {
        display: flex;
    }

    /* Right-aligned logos */
    .whn-logo-slot-left .whn-logo-primary.whn-align-p-tab-right.whn-p-show-tab-yes {
        display: flex;
    }

    .whn-logo-slot-left .whn-logo-secondary.whn-align-s-tab-right.whn-s-show-tab-yes {
        display: flex;
    }
}

/* 3. Mobile rules (max-width: 768px)
   NOTE: on mobile the center slot is hidden; the LEFT slot is absolutely
   positioned to the centre of the header. So logos with 'center' alignment
   must be shown inside the left slot, not the (hidden) center slot. */
@media (max-width: 768px) {

    /* Left-aligned logos */
    .whn-logo-slot-left .whn-logo-primary.whn-align-p-mob-left.whn-p-show-mob-yes {
        display: flex;
    }

    .whn-logo-slot-left .whn-logo-secondary.whn-align-s-mob-left.whn-s-show-mob-yes {
        display: flex;
    }

    /* Center-aligned logos — shown in left slot (which IS the centred element on mobile) */
    .whn-logo-slot-left .whn-logo-primary.whn-align-p-mob-center.whn-p-show-mob-yes {
        display: flex;
    }

    .whn-logo-slot-left .whn-logo-secondary.whn-align-s-mob-center.whn-s-show-mob-yes {
        display: flex;
    }

    /* Right-aligned logos — shown in left slot */
    .whn-logo-slot-left .whn-logo-primary.whn-align-p-mob-right.whn-p-show-mob-yes {
        display: flex;
    }

    .whn-logo-slot-left .whn-logo-secondary.whn-align-s-mob-right.whn-s-show-mob-yes {
        display: flex;
    }
}

/* =============================================================
   DARK MODE — the header bar, logo, nav links, icons and the mobile
   drawer are all admin-configured via --brand-color-* tokens that carry
   their own dark_value in the palette, so they adapt automatically.
   Only genuinely hardcoded light surfaces are overridden here.
   ============================================================= */
[data-theme="dark"] #whn-header.whn-scrolled {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .whn-cart-count {
    border-color: var(--wpc-surface);
}

/* ── Mega dropdown (hardcoded #fff surface) ────────────────── */
[data-theme="dark"] .whn-nav .mega-sub-menu {
    background: var(--wpc-surface-2) !important;
    border-top-color: var(--wpc-border) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .whn-nav .mega-sub-menu .mega-menu-column>.mega-menu-link {
    color: var(--wpc-on-surface-muted) !important;
}

[data-theme="dark"] .whn-nav .mega-sub-menu a.mega-menu-link {
    color: var(--wpc-on-surface) !important;
}

[data-theme="dark"] .whn-nav .mega-sub-menu a.mega-menu-link:hover {
    color: var(--wpc-accent) !important;
}

[data-theme="dark"] .whn-no-menu a {
    color: var(--wpc-on-surface-muted);
}

/* ── Mobile drawer submenu links (hardcoded #1a1a1a) ───────── */
[data-theme="dark"] .whn-nav.whn-mobile-open .mega-sub-menu a.mega-menu-link {
    color: var(--wpc-on-surface-muted) !important;
}

[data-theme="dark"] .whn-drawer-foot {
    border-top-color: var(--wpc-border);
}

[data-theme="dark"] .whn-drawer-foot-title {
    color: var(--wpc-on-surface-muted);
}