/**
 * PWD 2026 — Header v3.3.0
 *
 * Clean reset based on the stable v3.2.6 theme.
 * Desktop: one fixed header row inspired by Travelami.
 * Mobile/tablet: Listify's native header/menu mechanics.
 */

/* ---------------------------------------------------------
   Shared header appearance
   --------------------------------------------------------- */

body.pwd-2026 .site-header {
    z-index: 1000;
    border: 0;
    background: #fff;
    box-shadow: none;
}

body.pwd-2026 .site-branding img,
body.pwd-2026 .custom-logo {
    width: auto;
    height: auto;
}

body.pwd-2026 .nav-menu a,
body.pwd-2026 .primary.nav-menu a {
    color: var(--pwd-text);
    font-family: var(--pwd-font-body);
    font-weight: 500;
    letter-spacing: .025em;
}

body.pwd-2026 .nav-menu li {
    border-radius: 999px;
}

body.pwd-2026 .nav-menu li:hover {
    background: rgba(212, 139, 82, .10);
}

body.pwd-2026 .nav-menu a:hover,
body.pwd-2026 .primary.nav-menu a:hover {
    color: var(--pwd-accent-hover);
}

body.pwd-2026 .nav-menu ul ul {
    overflow: hidden;
    border: 1px solid var(--pwd-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--pwd-shadow-soft);
}

body.pwd-2026 .site-header .search-overlay-toggle,
body.pwd-2026 .site-header .current-cart {
    border-color: var(--pwd-border) !important;
    background: #fff;
}

/* ---------------------------------------------------------
   Desktop — one REAL header row
   --------------------------------------------------------- */

@media (min-width: 992px) {

    /*
     * Listify applies a body top offset when fixed-header is enabled.
     * Match that compensation to our actual 110px desktop header.
     * This prevents the blank/phantom band above the header.
     */
    body.pwd-2026.fixed-header,
    body.pwd-2026 {
        padding-top: 110px !important;
    }

    /*
     * Preserve Listify's fixed-header model rather than putting the
     * header back in normal document flow.
     */
    body.pwd-2026 .site-header {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 110px !important;
        min-height: 110px !important;
        background: #fff !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.pwd-2026 .primary-header,
    body.pwd-2026 .primary-header .container {
        height: 110px !important;
        min-height: 110px !important;
    }

    body.pwd-2026 .primary-header-inner {
        display: flex !important;
        align-items: center !important;
        gap: 30px !important;
        width: 100% !important;
        height: 110px !important;
        min-height: 110px !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* LEFT — logo */
    body.pwd-2026 .primary-header-inner > .site-branding {
        order: 1 !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        padding: 10px 0 !important;
    }

    body.pwd-2026 .primary-header-inner > .site-branding img,
    body.pwd-2026 .primary-header-inner > .site-branding .custom-logo,
    body.pwd-2026 .custom-header-image {
        max-height: 80px !important;
        width: auto !important;
        height: auto !important;
    }

    /* CENTER — existing #site-navigation moved here by header-layout.js */
    body.pwd-2026 .primary-header-inner > #site-navigation.pwd-header-main-nav {
        order: 2 !important;
        flex: 1 1 auto !important;
        align-self: stretch !important;
        position: static !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.pwd-2026 .primary-header-inner > #site-navigation.pwd-header-main-nav .container,
    body.pwd-2026 .primary-header-inner > #site-navigation.pwd-header-main-nav .navigation-bar-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.pwd-2026 .primary-header-inner > #site-navigation.pwd-header-main-nav .secondary.nav-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    body.pwd-2026 .primary-header-inner > #site-navigation.pwd-header-main-nav .secondary.nav-menu > li {
        display: inline-flex !important;
        align-items: center !important;
        float: none !important;
        margin: 0 !important;
    }

    body.pwd-2026 .primary-header-inner > #site-navigation.pwd-header-main-nav .secondary.nav-menu > li > a {
        display: flex !important;
        align-items: center !important;
        min-height: 110px !important;
        padding: 0 14px !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }

    /*
     * Hide Listify's mobile/menu toggle while the actual desktop menu
     * is structurally inside the primary header.
     */
    body.pwd-2026 .primary-header-inner > #site-navigation.pwd-header-main-nav .navigation-bar-toggle,
    body.pwd-2026 .primary-header-inner > #site-navigation.pwd-header-main-nav .nav-menu-toggle {
        display: none !important;
    }

    /* RIGHT — native Listify search/account controls */
    body.pwd-2026 .primary-header-inner > .primary.nav-menu {
        order: 3 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        float: none !important;
        background: transparent !important;
        border: 0 !important;
    }

    /*
     * The actual site menu is #site-navigation. Suppress any duplicate
     * full menu container inside Listify's utility nav, but leave the
     * search/account items themselves intact.
     */
    body.pwd-2026 .primary-header-inner > .primary.nav-menu > .nav-menu-container {
        display: none !important;
    }

    body.pwd-2026 .primary-header-inner > .primary.nav-menu > ul,
    body.pwd-2026 .primary-header-inner > .primary.nav-menu .menu {
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.pwd-2026 .primary-header-inner > .primary.nav-menu a {
        font-size: 16px !important;
    }

    /*
     * Once #site-navigation has been moved into the primary header,
     * there must be no residual second navigation row.
     */
    html.pwd-desktop-single-header body.pwd-2026 #site-navigation {
        border-top: 0 !important;
        border-bottom: 0 !important;
    }
}

/* ---------------------------------------------------------
   Tablet / mobile
   Keep Listify's native structure for our later mobile pass.
   --------------------------------------------------------- */

@media (max-width: 991px) {
    body.pwd-2026 .site-branding img,
    body.pwd-2026 .custom-logo {
        max-height: 52px;
    }

    body.pwd-2026 .nav-menu a,
    body.pwd-2026 .primary.nav-menu a {
        font-size: 14px;
    }
}


/* =========================================================
   v3.3.1 — Desktop header MENU ORDER
   Logo | Secondary menu centered | Primary menu/utilities right
   ========================================================= */

@media (min-width: 992px) {

    /*
     * #site-navigation is already correctly located inside the
     * primary header by v3.3.0. Now let its own wrapper arrange
     * Listify's Secondary and Primary menu areas deliberately.
     */
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .navigation-bar-wrapper {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 24px !important;
        width: 100% !important;
    }

    /*
     * SECONDARY MENU
     * This is the "Browse by" / regular site navigation.
     * Give it the flexible middle of the header.
     */
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu {
        order: 1 !important;
        flex: 1 1 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li {
        display: inline-flex !important;
        align-items: center !important;
        float: none !important;
    }

    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li > a {
        min-height: 110px !important;
        padding: 0 14px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
    }

    /*
     * PRIMARY MENU
     * Restore it and anchor it at the right side of the navigation.
     * This is the Listify "MENU" area.
     */
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu {
        order: 2 !important;
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin: 0 0 0 auto !important;
        padding: 0 !important;
        float: none !important;
        background: transparent !important;
        border: 0 !important;
    }

    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu .nav-menu-container,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu > ul,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu .menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu a {
        font-size: 16px !important;
    }

    /*
     * v3.3.0 suppressed the full primary-menu container because we
     * were initially treating it only as utilities. Undo that here:
     * the user wants the Primary Menu ("MENU") visible at right.
     */
    body.pwd-2026
    .primary-header-inner
    > .primary.nav-menu
    > .nav-menu-container {
        display: flex !important;
    }

    /*
     * If Listify renders search/account as separate siblings in the
     * navigation wrapper, keep them after the centered Secondary Menu.
     */
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .search-header,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .search-overlay-toggle,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .account-avatar,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .current-account {
        order: 3 !important;
        flex: 0 0 auto !important;
    }

    /*
     * The outer primary-header utility group, when present separately
     * from #site-navigation, belongs at the far right as well.
     */
    body.pwd-2026 .primary-header-inner > .primary.nav-menu {
        order: 3 !important;
        margin-left: 0 !important;
        flex: 0 0 auto !important;
    }
}


/* =========================================================
   v3.3.2 — Header cleanup
   1) Hide duplicate OUTER Primary Menu utility cluster
   2) Add breathing room between Secondary Menu icons + labels
   3) Remove hover bubbles; retain text-color hover only
   ========================================================= */

@media (min-width: 992px) {

    /*
     * We now have the fully functional Primary Menu/search/account
     * cluster inside #site-navigation. Hide the duplicate outer
     * primary nav that remains as a direct child of primary-header-inner.
     */
    body.pwd-2026
    .primary-header-inner
    > .primary.nav-menu {
        display: none !important;
    }

    /*
     * Keep the ACTIVE Primary Menu inside #site-navigation visible
     * and anchored to the right.
     */
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
    }

    /*
     * Secondary Menu icon spacing.
     * Listify places several menu icons on the LI itself, immediately
     * before the anchor label. Give the label extra left breathing room.
     */
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li > a {
        padding-left: 22px !important;
        padding-right: 14px !important;
    }

    /*
     * Where the icon is a generated pseudo-element or inline icon,
     * add an explicit gap as well.
     */
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li::before,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li > i,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li > a > i {
        margin-right: 8px !important;
    }

    /*
     * Remove the pale rounded hover/active bubbles from both menu areas.
     * Text color change remains handled by the existing hover rule.
     */
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu > li,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li:hover,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu > li:hover,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li.current-menu-item,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu > li.current-menu-item,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li.current-menu-ancestor,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu > li.current-menu-ancestor {
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li > a:hover,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu > li > a:hover,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li.current-menu-item > a,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu > li.current-menu-item > a,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .secondary.nav-menu > li.current-menu-ancestor > a,
    body.pwd-2026
    .primary-header-inner
    > #site-navigation.pwd-header-main-nav
    .primary.nav-menu > li.current-menu-ancestor > a {
        background: transparent !important;
        color: var(--pwd-accent-hover) !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   v3.3.6 — Desktop navigation fly-out fix
   Prevent long submenu labels from being clipped and allow
   nested fly-outs to extend outside the first submenu panel.
   ========================================================= */

@media (min-width: 992px) {

    /*
     * The earlier rounded-panel rule used overflow:hidden, which
     * clips long labels and any child fly-out menus. Let submenu
     * content extend naturally.
     */
    body.pwd-2026 .site-header .nav-menu .sub-menu,
    body.pwd-2026 .site-header .nav-menu .children,
    body.pwd-2026 .site-header ul.nav-menu .sub-menu,
    body.pwd-2026 .site-header ul.nav-menu .children {
        overflow: visible !important;
        width: max-content !important;
        min-width: 260px !important;
        max-width: 340px !important;
        z-index: 99999 !important;
    }

    /*
     * Give submenu links enough horizontal room and keep region /
     * category names on one readable line.
     */
    body.pwd-2026 .site-header .nav-menu .sub-menu > li,
    body.pwd-2026 .site-header .nav-menu .children > li {
        width: 100% !important;
        min-width: 260px !important;
        float: none !important;
    }

    body.pwd-2026 .site-header .nav-menu .sub-menu > li > a,
    body.pwd-2026 .site-header .nav-menu .children > li > a {
        display: block !important;
        width: 100% !important;
        min-width: 260px !important;
        padding: 11px 18px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        line-height: 1.25 !important;
        box-sizing: border-box !important;
    }

    /*
     * Keep the first-level fly-out directly beneath its parent.
     * Nested menus open to the right instead of being trapped
     * inside the first fly-out panel.
     */
    body.pwd-2026 .site-header .nav-menu > li {
        position: relative !important;
    }

    body.pwd-2026 .site-header .nav-menu > li > .sub-menu,
    body.pwd-2026 .site-header .nav-menu > li > .children {
        left: 0 !important;
        right: auto !important;
    }

    body.pwd-2026 .site-header .nav-menu .sub-menu .sub-menu,
    body.pwd-2026 .site-header .nav-menu .children .children,
    body.pwd-2026 .site-header .nav-menu .sub-menu .children,
    body.pwd-2026 .site-header .nav-menu .children .sub-menu {
        top: 0 !important;
        left: 100% !important;
        right: auto !important;
        margin-left: 6px !important;
    }

    /*
     * Make sure the structural header wrappers do not crop the menu.
     */
    body.pwd-2026 .site-header,
    body.pwd-2026 .primary-header,
    body.pwd-2026 .primary-header .container,
    body.pwd-2026 .primary-header-inner,
    body.pwd-2026 #site-navigation,
    body.pwd-2026 #site-navigation .container,
    body.pwd-2026 #site-navigation .navigation-bar-wrapper {
        overflow: visible !important;
    }
}


/* =========================================================
   v3.3.7 — Header finishing touches
   ========================================================= */

/* Make the logo link an explicit clickable layer. */
body.pwd-2026 .site-branding,
body.pwd-2026 .site-branding .custom-header {
    position: relative !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
}

body.pwd-2026 .site-branding .custom-header {
    display: inline-block !important;
}

/* All desktop fly-out menu labels align flush left. */
@media (min-width: 992px) {
    body.pwd-2026 .site-header .nav-menu .sub-menu,
    body.pwd-2026 .site-header .nav-menu .children,
    body.pwd-2026 .site-header .nav-menu .sub-menu li,
    body.pwd-2026 .site-header .nav-menu .children li,
    body.pwd-2026 .site-header .nav-menu .sub-menu a,
    body.pwd-2026 .site-header .nav-menu .children a {
        text-align: left !important;
    }

    body.pwd-2026 .site-header .nav-menu .sub-menu > li > a,
    body.pwd-2026 .site-header .nav-menu .children > li > a {
        justify-content: flex-start !important;
    }
}