/* Mobile storefront header. Desktop presentation remains in header.css. */
@media (max-width: 767px) {
    #plp-site-header [data-plp-mobile-header] {
        background: #fff;
        border-bottom: 1px solid #e2e8ed;
        box-shadow: 0 4px 14px rgba(23, 48, 64, .06);
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-bar {
        grid-template-columns: 44px minmax(72px, 1fr) auto 44px;
        gap: 4px;
        align-items: start;
        min-height: calc(49px + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) 10px 0 0;
        border-bottom: 0;
        box-shadow: none;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-logo {
        justify-self: start;
        justify-content: flex-start;
        align-items: flex-start;
        width: 102px;
        max-width: 100%;
        height: 44px;
        padding: 8px 0;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-logo img {
        width: 102px;
        max-width: 100%;
        height: 28px;
        max-height: 28px;
        object-position: left top;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action,
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart--mobile-header {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        align-items: flex-start;
        margin: 0;
        padding: 10px;
        border: 0 !important;
        border-radius: 8px;
        background: transparent !important;
        color: #26343e !important;
        -webkit-text-fill-color: #26343e;
        box-shadow: none !important;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action:hover,
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action:focus,
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action:active,
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart--mobile-header:hover,
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart--mobile-header:focus,
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart--mobile-header:active {
        background: transparent !important;
        box-shadow: none !important;
        transform: none;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action:focus-visible,
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart--mobile-header:focus-visible {
        outline: 2px solid #00518f;
        outline-offset: -2px;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action--account {
        width: auto;
        gap: 5px;
        padding-inline: 0 14px;
        font-family: Arial, sans-serif;
        font-size: 13px;
        line-height: 1;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action--account .plp-site-icon {
        flex: 0 0 24px;
        width: 24px;
        height: 24px;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action--menu .plp-site-icon {
        width: 20px;
        height: 24px;
        stroke: none;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action--account .plp-site-icon {
        fill: none;
        stroke: currentColor;
        stroke-width: 4.8;
        stroke-linecap: butt;
    }
    #plp-site-header [data-plp-mobile-header] .plp-mobile-header-account-label {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        gap: 4px;
        line-height: 24px;
    }
    #plp-site-header [data-plp-mobile-header] .plp-mobile-header-account-name {
        max-width: clamp(48px, calc(100vw - 290px), 96px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #plp-site-header [data-plp-mobile-header] .plp-mobile-header-account-chevron {
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-action--account::after {
        display: none;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart--mobile-header {
        min-height: 44px;
        padding: 0;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart--mobile-header::before {
        content: "";
        position: absolute;
        top: 9px;
        left: 1px;
        width: 36px;
        height: 27px;
        background: url("../icons/mobile-header-cart.svg?v=20261015-reference-icons") center / contain no-repeat;
        pointer-events: none;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart--mobile-header .plp-site-icon {
        visibility: hidden;
        width: 36px;
        height: 27px;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart-label { display: none; }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__cart-badge {
        top: 3px;
        right: auto;
        /* Center over the basket, excluding the handle from the alignment. */
        left: 8px;
        transform: none;
        min-width: 0;
        width: 28px;
        height: 22px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #00518f;
        -webkit-text-fill-color: #00518f;
        font-family: Arial, sans-serif;
        font-size: 16px;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 22px;
        letter-spacing: 0;
        text-align: center;
        box-shadow: none;
        pointer-events: none;
    }
    #plp-site-header [data-plp-mobile-header] .plp-mobile-header-search {
        position: relative;
        z-index: 3;
        padding: 0 10px 16px;
        background: #fff;
    }
    body #plp-site-header.plp-site-header [data-plp-mobile-header] .plp-product-search__field {
        height: 44px;
        overflow: hidden;
        border: 0;
        border-radius: 9px;
        outline: 1px solid #bccedb;
        outline-offset: 0;
        box-shadow: none !important;
        /* Paint the full curve in the same color as the adjacent control.
           No white backing can bleed through the blue button's clipped edge. */
        background: linear-gradient(to left, #00518f 50px, #fff 50px);
    }
    body #plp-site-header.plp-site-header [data-plp-mobile-header] .plp-product-search__field:focus-within {
        outline: 2px solid #00518f;
        outline-offset: 2px;
        box-shadow: none !important;
    }
    #plp-site-header [data-plp-mobile-header] .plp-product-search__input {
        height: 44px;
        padding: 0 10px;
        border: 0;
        border-radius: 0;
        background: #fff;
        color: #26343e;
        font-size: 16px;
        line-height: normal;
    }
    #plp-site-header #plp-product-search-mobile-header,
    #plp-site-header #plp-product-search-mobile-header:focus,
    #plp-site-header #plp-product-search-mobile-header:focus-visible {
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }
    body #plp-site-header.plp-site-header [data-plp-mobile-header] .plp-product-search__button,
    body #plp-site-header.plp-site-header [data-plp-mobile-header] .plp-product-search__button:is(:hover, :focus, :focus-visible, :active) {
        position: relative;
        flex-basis: 50px;
        width: 50px;
        min-width: 50px;
        height: 44px;
        margin: 0;
        padding: 9px 13px;
        border: 0;
        /* The outer field supplies the shared curve; no second inner curve. */
        border-radius: 0 !important;
        background: #00518f !important;
        box-shadow: none !important;
        outline: none !important;
    }
    #plp-site-header [data-plp-mobile-header] .plp-product-search__button .plp-site-icon {
        width: 24px;
        height: 24px;
        visibility: hidden;
    }
    #plp-site-header [data-plp-mobile-header] .plp-product-search__button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 24px;
        height: 24px;
        background: url("../icons/mobile-header-search.svg?v=20261015-reference-icons") center / contain no-repeat;
        pointer-events: none;
    }
    #plp-site-header [data-plp-mobile-header] .plp-product-search__popover {
        top: calc(100% + 6px);
        max-height: min(62dvh, 440px);
        overflow-y: auto;
        overscroll-behavior: contain;
        border-radius: 12px;
    }
    #plp-site-header [data-plp-mobile-header] .plp-product-search__result { min-height: 64px; gap: 10px; padding: 9px 12px; }
    #plp-site-header [data-plp-mobile-header] .plp-product-search__footer { padding: 7px 10px; font-size: 12px; }
    /* One full-screen scrim covers the complete header and page. */
    html:has(body.plp-mobile-panel-open [data-plp-mobile-header]) {
        overflow: hidden;
    }
    body.plp-mobile-panel-open #plp-site-header:has([data-plp-mobile-header]) {
        z-index: 2000;
    }
    body.plp-mobile-panel-open:has([data-plp-mobile-header]) .plp-mobile-app-nav {
        visibility: hidden;
        pointer-events: none;
    }
    body #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-backdrop {
        z-index: 8;
        inset: 0;
        width: 100%;
        height: 100%;
        background: rgba(12, 28, 41, .42) !important;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-panel {
        z-index: 9;
        max-height: calc(100dvh - 180px);
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu {
        position: fixed;
        inset: 0 auto 0 0;
        width: min(360px, calc(100% - 44px));
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(20px, env(safe-area-inset-bottom, 0px));
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 0 20px 20px 0;
        background: #fff;
        box-shadow: 12px 0 48px rgba(12, 28, 41, .18);
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu:not([hidden]) {
        display: flex;
        flex-direction: column;
        animation: plp-mobile-menu-enter 220ms cubic-bezier(.2, .8, .2, 1) both;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-panel-heading {
        position: sticky;
        top: -1px;
        z-index: 2;
        flex-shrink: 0;
        min-height: 64px;
        gap: 8px;
        margin: 0 0 16px;
        padding: 0 0 16px;
        border-bottom: 1px solid #e7edf1;
        background: #fff;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-panel-heading span {
        margin-bottom: 3px;
        color: #00518f;
        font-size: 10px;
        letter-spacing: .12em;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-panel-heading strong {
        font-size: 18px;
        letter-spacing: -.025em;
        color: #202c36;
    }
    body #plp-site-header [data-plp-mobile-header] .plp-site-header__mobile-panel-heading > button[data-plp-mobile-panel-close] {
        flex: 0 0 44px;
        width: 44px;
        height: 44px;
        padding: 11px;
        border: 0;
        border-radius: 50%;
        background: #f2f5f7 !important;
        color: #26343e !important;
        box-shadow: none !important;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-menu-list {
        flex-shrink: 0;
        gap: 4px;
        margin: 0 0 24px;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-menu-list > li > :is(a, button) {
        grid-template-columns: 28px minmax(0, 1fr) 18px;
        gap: 12px;
        min-height: 54px;
        padding: 10px 12px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #26343e;
        font-size: 15px;
        font-weight: 650;
        box-shadow: none;
        transform: none;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-menu-list > li > .is-current,
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-menu-list > li.is-open > button {
        background: #f1f6fa;
        color: #00518f;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-menu-icon {
        width: 28px;
        height: 28px;
        border-radius: 0;
        background: transparent;
        color: #00518f;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-menu-icon .plp-site-icon {
        width: 21px;
        height: 21px;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__menu-item--shop {
        margin-bottom: 8px;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-menu-list > li.plp-site-header__menu-item--shop > a {
        min-height: 56px;
        background: #00518f;
        color: #fff;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__menu-item--shop > a .plp-site-header__mobile-menu-icon,
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__menu-item--shop > a > .plp-site-icon {
        background: transparent;
        color: #fff;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__submenu {
        margin: 4px 0 8px 26px;
        padding: 0 0 0 8px;
        border-left: 1px solid #dbe5ec;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__submenu a {
        grid-template-columns: 24px minmax(0, 1fr) 14px;
        gap: 8px;
        min-height: 48px;
        padding: 6px;
        background: transparent;
        color: #465a68;
        font-size: 13px;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-account-card {
        flex-shrink: 0;
        grid-template-columns: 36px minmax(0, 1fr) 16px;
        gap: 10px;
        margin-top: auto;
        min-height: 78px;
        padding: 14px 12px;
        border: 1px solid #dde8ef;
        border-radius: 14px;
        background: #f4f8fb;
        color: #17354a;
        box-shadow: none;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-account-icon {
        width: 36px;
        height: 36px;
        background: #fff;
        color: #00518f;
        border-radius: 50%;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-account-card small,
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu .plp-site-header__mobile-account-card > .plp-site-icon {
        color: #5b7282;
    }
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu :is(a, button):focus-visible {
        outline: 2px solid #009ab1;
        outline-offset: 2px;
    }
}
@keyframes plp-mobile-menu-enter {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
    #plp-site-header [data-plp-mobile-header] #plp-mobile-menu:not([hidden]) { animation: none; }
}

/* Optional mobile theme. Light remains the default and shares all geometry. */
@media (max-width: 767px) {
    #plp-site-header [data-plp-mobile-header-theme="dark"] {
        background: linear-gradient(135deg, var(--plp-shell-charcoal-deep) 0%, var(--plp-shell-charcoal) 58%, #2b3137 100%);
        border-bottom-color: #30383f;
    }
    #plp-site-header [data-plp-mobile-header-theme="dark"] .plp-site-header__mobile-bar,
    #plp-site-header [data-plp-mobile-header-theme="dark"] .plp-mobile-header-search {
        background: transparent;
    }
    #plp-site-header [data-plp-mobile-header-theme="dark"] .plp-site-header__mobile-action,
    #plp-site-header [data-plp-mobile-header-theme="dark"] .plp-site-header__cart--mobile-header {
        color: #fff !important;
        -webkit-text-fill-color: #fff;
    }
    #plp-site-header [data-plp-mobile-header-theme="dark"] .plp-site-header__cart--mobile-header::before {
        filter: brightness(0) invert(1);
    }
    body #plp-site-header.plp-site-header [data-plp-mobile-header-theme="dark"] .plp-product-search__field {
        outline-color: transparent;
    }
    body #plp-site-header.plp-site-header [data-plp-mobile-header-theme="dark"] .plp-product-search__field:focus-within {
        outline-color: #67b7ff;
    }
    #plp-site-header [data-plp-mobile-header-theme="dark"] .plp-site-header__cart-badge {
        color: #67b7ff;
        -webkit-text-fill-color: #67b7ff;
    }
    #plp-site-header [data-plp-mobile-header-theme="dark"] .plp-site-header__mobile-action:focus-visible,
    #plp-site-header [data-plp-mobile-header-theme="dark"] .plp-site-header__cart--mobile-header:focus-visible {
        outline-color: #67b7ff;
    }
}