/*
 * Pilot mobile navigation drawer
 * ------------------------------
 * Shared mobile behaviour for Pilot Classic and Centered Retail headers.
 * Desktop mega-menu presentation remains owned by the existing theme CSS.
 */

.pilot-mobile-menu__backdrop,
.pilot-mobile-menu__chrome,
.pilot-mobile-menu__home,
.pilot-mobile-menu__view-heading,
.pilot-centered-retail-mobile-menu {
    display: none;
}

@media (max-width: 767px) {
    body.pilot-mobile-menu-open {
        overflow: hidden !important;
    }

    /*
     * Keep the mobile navigation in a stacking context above storefront
     * heroes, carousels and CTA layers. The drawer itself already has a
     * high z-index, but it cannot escape a lower-z-index navigation parent.
     */
    body.pilot-theme.pilot-mobile-menu-open .nav-sections,
    body.pilot-theme.pilot-mobile-menu-open .nav-sections-items,
    body.pilot-theme.pilot-mobile-menu-open .nav-sections-item-content,
    body.pilot-theme.pilot-mobile-menu-open .navigation.pilot-navigation,
    body.pilot-theme.pilot-mobile-menu-open .pilot-navigation,
    body.pilot-theme.pilot-mobile-menu-open .pilot-centered-nav {
        position: relative !important;
        z-index: 10000 !important;
    }

    /*
     * Keep the storefront logo out of the mobile drawer. Some Pilot header
     * variants place the logo in a higher stacking context than the menu,
     * which can otherwise show through the drawer while it is open.
     * visibility preserves the header layout and restores instantly on close.
     */
    body.pilot-theme.pilot-mobile-menu-open .page-header .logo,
    body.pilot-theme.pilot-mobile-menu-open .pilot-centered-retail-header__brand {
        pointer-events: none !important;
        visibility: hidden !important;
    }

    body.pilot-theme {
        --pilot-mobile-menu-bg: var(--pilot-editor-primary-dark, #071b39);
        --pilot-mobile-menu-text: var(--pilot-editor-primary-dark-text, #fff);
        --pilot-mobile-menu-accent: var(--pilot-editor-accent, #ff8a00);
        --pilot-mobile-menu-line: color-mix(in srgb, var(--pilot-mobile-menu-text) 17%, transparent);
        --pilot-mobile-menu-muted: color-mix(in srgb, var(--pilot-mobile-menu-text) 70%, transparent);
    }

    html[data-pilot-header-template="marketplace"] body.pilot-theme {
        --pilot-mobile-menu-bg: var(--pilot-editor-primary, #101827);
        --pilot-mobile-menu-text: var(--pilot-editor-primary-text, #fff);
    }

    html[data-pilot-header-template="split-brand"] body.pilot-theme {
        --pilot-mobile-menu-bg: var(--pilot-editor-primary, #9a6a2f);
        --pilot-mobile-menu-text: var(--pilot-editor-primary-text, #fffdf8);
    }

    html[data-pilot-header-template="clean"] body.pilot-theme {
        --pilot-mobile-menu-bg: var(--pilot-editor-light, #fff);
        --pilot-mobile-menu-text: var(--pilot-editor-light-text, #111827);
        --pilot-mobile-menu-line: color-mix(in srgb, var(--pilot-mobile-menu-text) 14%, transparent);
        --pilot-mobile-menu-muted: color-mix(in srgb, var(--pilot-mobile-menu-text) 62%, transparent);
    }

    body.pilot-theme .pilot-mobile-menu__backdrop {
        appearance: none;
        background: rgba(4, 10, 20, .58);
        border: 0;
        bottom: 0;
        cursor: pointer;
        display: block;
        left: 0;
        margin: 0;
        opacity: 0;
        padding: 0;
        pointer-events: none;
        position: fixed;
        right: 0;
        top: 0;
        transition: opacity .22s ease;
        visibility: hidden;
        z-index: 10001;
    }

    body.pilot-theme .pilot-category-menu--open > .pilot-mobile-menu__backdrop {
        opacity: 1;
        pointer-events: auto;
        visibility: visible;
    }

    html[data-pilot-header-template] body.pilot-theme [data-pilot-mega-menu].pilot-mega-menu,
    body.pilot-theme [data-pilot-mega-menu].pilot-mega-menu {
        background: var(--pilot-mobile-menu-bg) !important;
        border: 0 !important;
        border-radius: 0 !important;
        bottom: 0 !important;
        box-shadow: 16px 0 44px rgba(0, 0, 0, .28) !important;
        color: var(--pilot-mobile-menu-text) !important;
        display: block !important;
        height: 100dvh !important;
        left: 0 !important;
        margin: 0 !important;
        max-height: none !important;
        min-height: 0 !important;
        opacity: 0;
        overflow: hidden !important;
        padding: 0 !important;
        pointer-events: none;
        position: fixed !important;
        right: auto !important;
        top: 0 !important;
        transform: translate3d(-102%, 0, 0);
        transition: transform .24s ease, opacity .18s ease, visibility .24s step-end;
        visibility: hidden;
        width: min(88vw, 390px) !important;
        z-index: 10002 !important;
    }

    html[data-pilot-header-template] body.pilot-theme
    .pilot-category-menu--open [data-pilot-mega-menu].pilot-mega-menu,
    body.pilot-theme .pilot-category-menu--open [data-pilot-mega-menu].pilot-mega-menu {
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, 0, 0);
        transition: transform .24s ease, opacity .18s ease;
        visibility: visible;
    }

    body.pilot-theme .pilot-mobile-menu__chrome {
        align-items: center;
        border-bottom: 1px solid var(--pilot-mobile-menu-line);
        box-sizing: border-box;
        display: flex;
        height: 72px;
        justify-content: space-between;
        padding: 0 18px 0 20px;
    }

    body.pilot-theme .pilot-mobile-menu__title {
        color: var(--pilot-mobile-menu-text);
        font-size: 20px;
        font-weight: 800;
        letter-spacing: .02em;
        line-height: 1;
        margin: 0;
    }

    body.pilot-theme .pilot-mobile-menu__close,
    body.pilot-theme .pilot-mobile-menu__back {
        align-items: center;
        appearance: none;
        background: transparent !important;
        border: 0 !important;
        border-radius: 4px;
        box-shadow: none !important;
        color: var(--pilot-mobile-menu-text) !important;
        cursor: pointer;
        display: inline-flex;
        height: 42px;
        justify-content: center;
        margin: 0;
        min-width: 42px;
        padding: 0;
        width: 42px;
    }

    body.pilot-theme .pilot-mobile-menu__close:focus-visible,
    body.pilot-theme .pilot-mobile-menu__back:focus-visible {
        outline: 2px solid var(--pilot-mobile-menu-accent);
        outline-offset: 2px;
    }

    body.pilot-theme .pilot-mobile-menu__close svg {
        fill: none;
        height: 25px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-width: 1.8;
        width: 25px;
    }

    body.pilot-theme .pilot-mobile-menu__home {
        box-sizing: border-box;
        height: calc(100dvh - 72px);
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 18px 14px 28px;
    }

    body.pilot-theme .pilot-mobile-menu--home .pilot-mobile-menu__home {
        display: block;
    }

    body.pilot-theme .pilot-mobile-menu__search {
        margin: 0 0 18px;
    }

    body.pilot-theme .pilot-mobile-menu__search-label {
        border: 0;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    body.pilot-theme .pilot-mobile-menu__search-control {
        align-items: stretch;
        background: #fff;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: 4px;
        display: flex;
        min-height: 44px;
        overflow: hidden;
    }

    body.pilot-theme .pilot-mobile-menu__search-input {
        appearance: none;
        background: #fff !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #172033 !important;
        flex: 1 1 auto;
        font-size: 14px;
        height: 44px;
        margin: 0;
        min-width: 0;
        padding: 0 12px !important;
    }

    body.pilot-theme .pilot-mobile-menu__search-button {
        align-items: center;
        appearance: none;
        background: #fff !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: #172033 !important;
        display: flex;
        flex: 0 0 46px;
        height: 44px;
        justify-content: center;
        margin: 0;
        padding: 0;
        width: 46px;
    }

    body.pilot-theme .pilot-mobile-menu__search-button svg {
        fill: none;
        height: 21px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-width: 1.8;
        width: 21px;
    }

    body.pilot-theme .pilot-mobile-menu__links {
        border-top: 1px solid var(--pilot-mobile-menu-line);
    }

    body.pilot-theme .pilot-mobile-menu__row {
        align-items: center;
        appearance: none;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid var(--pilot-mobile-menu-line) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box;
        color: var(--pilot-mobile-menu-text) !important;
        display: grid;
        font-family: inherit;
        font-size: 14px;
        font-weight: 650;
        gap: 12px;
        grid-template-columns: 28px minmax(0, 1fr) 18px;
        line-height: 1.25;
        margin: 0;
        min-height: 58px;
        padding: 7px 8px;
        text-align: left;
        text-decoration: none !important;
        width: 100%;
    }

    body.pilot-theme .pilot-mobile-menu__row:not(.pilot-mobile-menu__row--categories) {
        grid-template-columns: 28px minmax(0, 1fr) 18px;
    }

    body.pilot-theme .pilot-mobile-menu__row:not(.pilot-mobile-menu__row--categories) >
    .pilot-mobile-menu__row-icon + span:last-child {
        grid-column: 2 / -1;
    }

    body.pilot-theme .pilot-mobile-menu__row--highlight {
        color: var(--pilot-mobile-menu-accent) !important;
    }

    body.pilot-theme .pilot-mobile-menu__row:hover,
    body.pilot-theme .pilot-mobile-menu__row:focus {
        background: color-mix(in srgb, var(--pilot-mobile-menu-text) 7%, transparent) !important;
        color: var(--pilot-mobile-menu-text) !important;
        text-decoration: none !important;
    }

    body.pilot-theme .pilot-mobile-menu__row-icon {
        align-items: center;
        display: flex;
        height: 28px;
        justify-content: center;
        width: 28px;
    }

    body.pilot-theme .pilot-mobile-menu__row-icon svg {
        fill: none;
        height: 22px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.6;
        width: 22px;
    }

    body.pilot-theme .pilot-mobile-menu__chevron {
        font-size: 27px;
        font-weight: 300;
        justify-self: end;
        line-height: 1;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__inner {
        background: var(--pilot-mobile-menu-bg) !important;
        box-sizing: border-box;
        height: calc(100dvh - 72px) !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow: hidden !important;
    }

    body.pilot-theme [data-pilot-mega-menu].pilot-mobile-menu--home .pilot-mega-menu__inner {
        display: none !important;
    }

    body.pilot-theme [data-pilot-mega-menu].pilot-mobile-menu--categories .pilot-mega-menu__inner,
    body.pilot-theme [data-pilot-mega-menu].pilot-mobile-menu--detail .pilot-mega-menu__inner {
        display: block !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__sidebar,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__content {
        background: var(--pilot-mobile-menu-bg) !important;
        border: 0 !important;
        box-sizing: border-box;
        height: calc(100dvh - 72px) !important;
        max-height: none !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        padding: 0 14px 28px !important;
    }

    body.pilot-theme [data-pilot-mega-menu].pilot-mobile-menu--categories .pilot-mega-menu__sidebar {
        display: block !important;
    }

    body.pilot-theme [data-pilot-mega-menu].pilot-mobile-menu--categories .pilot-mega-menu__content {
        display: none !important;
    }

    body.pilot-theme [data-pilot-mega-menu].pilot-mobile-menu--detail .pilot-mega-menu__sidebar {
        display: none !important;
    }

    body.pilot-theme [data-pilot-mega-menu].pilot-mobile-menu--detail .pilot-mega-menu__content {
        display: block !important;
    }

    body.pilot-theme .pilot-mobile-menu__view-heading {
        align-items: center;
        background: color-mix(in srgb, var(--pilot-mobile-menu-text) 7%, transparent);
        border-bottom: 1px solid var(--pilot-mobile-menu-line);
        box-sizing: border-box;
        display: grid;
        gap: 7px;
        grid-template-columns: 42px minmax(0, 1fr);
        margin: 0 -14px 12px;
        min-height: 58px;
        padding: 7px 14px 7px 6px;
        position: sticky;
        top: 0;
        z-index: 2;
    }

    body.pilot-theme .pilot-mobile-menu__view-heading > strong,
    body.pilot-theme .pilot-mobile-menu__detail-copy > strong {
        color: var(--pilot-mobile-menu-text);
        font-size: 14px;
        font-weight: 750;
        line-height: 1.25;
    }

    body.pilot-theme .pilot-mobile-menu__back {
        font-size: 32px;
        font-weight: 300;
        line-height: 1;
    }

    body.pilot-theme .pilot-mobile-menu__detail-copy {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        min-width: 0;
    }

    body.pilot-theme .pilot-mobile-menu__view-all {
        color: var(--pilot-mobile-menu-text) !important;
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none !important;
    }

    body.pilot-theme .pilot-mobile-menu__view-all[hidden] {
        display: none !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__sidebar-title {
        display: none !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__departments {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__departments li {
        margin: 0;
        padding: 0;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__department {
        align-items: center;
        background: transparent !important;
        border: 0 !important;
        border-bottom: 1px solid var(--pilot-mobile-menu-line) !important;
        border-left: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        color: var(--pilot-mobile-menu-text) !important;
        display: flex;
        font-size: 14px;
        font-weight: 600;
        justify-content: space-between;
        min-height: 54px;
        padding: 8px 8px !important;
        text-align: left;
        width: 100%;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__department:hover,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__department:focus,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__department.is-active {
        background: color-mix(in srgb, var(--pilot-mobile-menu-text) 7%, transparent) !important;
        border-left: 0 !important;
        color: var(--pilot-mobile-menu-text) !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__department svg {
        height: 17px;
        width: 17px;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__department svg path {
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__panel {
        color: var(--pilot-mobile-menu-text) !important;
        display: none !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__panel.is-active {
        display: block !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__grid {
        display: block !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__group {
        margin: 0;
        min-width: 0;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__section--featured_product,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__section--full_image,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__section--category_image {
        display: none !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__group-title,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__group-view-all,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__nested-item > a {
        align-items: center;
        border-bottom: 1px solid var(--pilot-mobile-menu-line);
        box-sizing: border-box;
        color: var(--pilot-mobile-menu-text) !important;
        display: flex !important;
        font-size: 14px !important;
        font-weight: 550 !important;
        justify-content: space-between;
        line-height: 1.25 !important;
        margin: 0 !important;
        min-height: 50px;
        padding: 9px 8px !important;
        text-decoration: none !important;
        width: 100%;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__group-title {
        font-weight: 750 !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__group-title::after,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__nested-item > a::after {
        background: none !important;
        content: "›";
        font-size: 23px;
        font-weight: 300;
        height: auto;
        margin: 0 0 0 12px;
        opacity: .86;
        width: auto;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__nested,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__nested-item {
        border: 0 !important;
        list-style: none;
        margin: 0 !important;
        padding: 0 !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__nested .pilot-mega-menu__nested {
        border-left: 1px solid var(--pilot-mobile-menu-line) !important;
        margin-left: 12px !important;
        padding-left: 8px !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__empty {
        background: transparent !important;
        border: 1px solid var(--pilot-mobile-menu-line) !important;
        color: var(--pilot-mobile-menu-text) !important;
    }

    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__empty p,
    body.pilot-theme [data-pilot-mega-menu] .pilot-mega-menu__empty a {
        color: var(--pilot-mobile-menu-text) !important;
    }

    /* Centered Retail: replace the desktop text bar with a header menu icon. */
    body.pilot-centered-retail-active .pilot-centered-nav {
        border: 0 !important;
        min-height: 0 !important;
    }

    body.pilot-centered-retail-active .pilot-centered-nav__bar {
        display: none !important;
    }

    body.pilot-centered-retail-active .pilot-centered-retail-header__main {
        gap: 8px;
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
        min-height: 76px;
        padding: 0 12px !important;
    }

    body.pilot-centered-retail-active .pilot-centered-retail-mobile-menu {
        align-items: center;
        appearance: none;
        background: transparent !important;
        border: 1px solid color-mix(in srgb, currentColor 42%, transparent) !important;
        border-radius: 5px;
        box-shadow: none !important;
        color: var(--pilot-centered-text) !important;
        cursor: pointer;
        display: flex;
        grid-column: 1;
        height: 42px;
        justify-content: center;
        margin: 0;
        min-width: 42px;
        padding: 0;
        width: 42px;
    }

    body.pilot-centered-retail-active .pilot-centered-retail-mobile-menu svg {
        fill: none;
        height: 22px;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-width: 1.8;
        width: 22px;
    }

    body.pilot-centered-retail-active .pilot-centered-retail-mobile-menu > span {
        border: 0;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    body.pilot-centered-retail-active .pilot-centered-retail-header__brand {
        grid-column: 2 !important;
        justify-self: start !important;
    }

    body.pilot-centered-retail-active .pilot-centered-retail-header__brand .logo img {
        max-width: 145px;
        width: min(var(--pilot-logo-mobile-width, 145px), 100%) !important;
    }

    body.pilot-centered-retail-active .pilot-centered-retail-header__actions {
        gap: 2px !important;
        grid-column: 3 !important;
        margin-right: 0 !important;
    }

    body.pilot-centered-retail-active .pilot-centered-retail-action,
    body.pilot-centered-retail-active .pilot-centered-retail-search-shell,
    body.pilot-centered-retail-active .pilot-centered-retail-search-toggle {
        flex-basis: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        width: 34px !important;
    }

    body.pilot-centered-retail-active .pilot-centered-retail-action svg {
        height: 22px !important;
        width: 22px !important;
    }
}