.pageHeader {
    --header-icon: #1f2f58;
    --header-icon-hover: #eca521;
    --header-badge-bg: #eca521;
    --header-badge-text: #fff;
    --header-tint: #fbf5e9;
    --header-bar: 0px;
    --header-row: 100px;
    --header-h: calc(var(--header-bar) + var(--header-row));
}

.pageHeader.has-customer-bar {
    --header-bar: 40px;
}

.pageHeader.scrolled {
    --header-row: 72px;
}

.pageHeader.has-customer-bar.scrolled:has(#customer-view-bar:not(.is-active):not(.is-busy):not(:focus-within)) {
    --header-bar: 0px;
}

header.pageHeader {
    height: var(--header-h);
    transition: height .25s ease, border-color .25s ease;
}

    header.pageHeader > .navbar {
        margin-top: var(--header-bar);
        transition: margin-top .25s ease;
    }

    header.pageHeader #customer-view-bar {
        transform: translateY(calc(var(--header-bar) - 40px));
        transition: transform .25s ease;
    }

    header.pageHeader #searchBar,
    header.pageHeader #searchBar.show {
        top: calc(var(--header-h) - 10px);
        transition: opacity .25s ease, top .25s ease;
    }

.pageHeader .navbar-brand,
.pageHeader .navbar-brand img {
    transition: width .25s ease, max-width .25s ease;
}

.pageHeader.scrolled .navbar-brand {
    max-width: 136px;
}

/* It sits at the header's top edge, where the shorter header puts the icons. */
.pageHeader.scrolled .holiday-flyer-indicator {
    display: none;
}

.header-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--header-icon);
    font-family: inherit;
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

.header-icon .material-symbols-outlined {
    font-size: 24px;
}

.header-icon:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

/* Beats 2021.css's `a:hover`, which underlines and recolors the cart link. */
.header-icon:hover,
.header-icon:focus {
    color: var(--header-icon);
    text-decoration: none;
}

/* Bootstrap adds .show to an open dropdown's toggle, and Header.cshtml makes every .show a block. */
.header-icon.show {
    display: inline-flex;
}

@media (hover: hover) {
    .header-icon:hover {
        color: var(--header-icon-hover);
    }
}

/* Beats the 30px box 2021.css gives every `header #user-tools li a`. */
.pageHeader #user-tools .header-icon {
    justify-content: center;
    width: 36px;
    height: 36px;
}

.pageHeader #user-tools li {
    margin-right: 4px;
}

    .pageHeader #user-tools li:last-child {
        margin-right: 0;
    }

.pageHeader #user-tools .cart-item-count {
    top: 1px;
    right: 0;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--header-badge-bg);
    color: var(--header-badge-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    pointer-events: none;
}

.pageHeader #user-tools .account-summary,
.pageHeader #user-tools .account-backdrop {
    display: none;
}

/* The account icon is second of three now; -80px was sized for it being first. */
.pageHeader #user-tools .account-tool .dropdown-menu {
    right: -40px;
}

@media (max-width: 1199.98px) {
    .pageHeader > .navbar > .container-fluid {
        flex-wrap: nowrap;
        padding-left: 16px;
        padding-right: 6px;
    }

    .pageHeader.scrolled {
        --header-row: 64px;
    }

    .pageHeader .navbar-brand {
        flex: 0 1 auto;
        min-width: 0;
        max-width: 132px;
        margin: 0;
        padding: 0;
    }

    .pageHeader.scrolled .navbar-brand {
        max-width: 104px;
    }

    .pageHeader #user-tools {
        order: 1;
        margin-left: auto;
    }

        .pageHeader #user-tools li {
            margin-right: 0;
        }

        .pageHeader #user-tools .header-icon {
            width: 44px;
            height: 44px;
        }

        .pageHeader #user-tools .cart-item-count {
            top: 4px;
            right: 3px;
        }

    .pageHeader .navbar .navbar-toggler {
        order: 2;
        display: inline-flex;
        width: 44px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
    }

    .pageHeader .header-icon .material-symbols-outlined {
        font-size: 28px;
    }

    .pageHeader #user-tools .account-tool .dropdown-menu {
        position: fixed;
        top: var(--header-h);
        right: 8px;
        left: auto;
        width: calc(100vw - 16px);
        max-width: 340px;
        max-height: calc(100vh - var(--header-h) - 16px);
        margin: 0;
        padding: 0;
        overflow-y: auto;
        border: 0;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
        font-family: "sofia-pro", sans-serif;
    }

        .pageHeader #user-tools .account-tool .dropdown-menu li {
            margin: 0;
        }

    .pageHeader #user-tools .account-summary {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 14px 20px;
        background: var(--header-tint);
    }

    .pageHeader #user-tools .account-summary-name {
        min-width: 0;
        overflow: hidden;
        color: #1b1b1b;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pageHeader #user-tools .account-summary-detail {
        flex-shrink: 0;
        color: #6b6b6b;
        font-size: 13px;
        line-height: 1.3;
    }

    .pageHeader #user-tools .account-tool .dropdown-item {
        display: flex;
        align-items: center;
        width: 100%;
        height: auto;
        min-height: 48px;
        padding: 0 20px;
        border-bottom: 1px solid #efefef;
        color: #333;
        font-size: 15px;
    }

    .pageHeader #user-tools .account-tool .dropdown-menu li:last-child .dropdown-item {
        border-bottom: 0;
    }

    .pageHeader #user-tools .account-tool .dropdown-menu.show + .account-backdrop {
        display: block;
        position: fixed;
        top: var(--header-h);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999;
        background: rgba(0, 0, 0, .25);
    }
}

@media (max-width: 575.98px) {
    .pageHeader #user-tools .account-tool .dropdown-menu {
        right: 0;
        width: 100%;
        max-width: none;
        max-height: calc(100vh - var(--header-h));
        padding-bottom: 8px;
        border-radius: 0 0 16px 16px;
    }

    /* The scrolled header's border, shown at once rather than through the header's transition. */
    .pageHeader:has(#user-tools .account-tool .dropdown-menu.show) {
        border-bottom-color: #e4e4e4;
        transition: none;
    }
}

@media (max-width: 374.98px) {
    .pageHeader > .navbar > .container-fluid {
        padding-left: 12px;
        padding-right: 4px;
    }

    .pageHeader #user-tools .header-icon,
    .pageHeader .navbar .navbar-toggler {
        width: 40px;
    }
}

.offcanvas.mobile-nav {
    --mobile-nav-ink: #1f2f58;
    width: 86vw;
    max-width: 360px;
    border-left: 0;
    overflow: hidden;
    font-family: "sofia-pro", sans-serif;
    transition-duration: .32s;
    transition-timing-function: cubic-bezier(.32, .72, 0, 1);
}

.mobile-nav-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #fff;
    padding-bottom: env(safe-area-inset-bottom);
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s;
}

/* Visibility trails the slide so a panel's links leave the tab order only once it's out of view. */
.mobile-nav-root.is-behind {
    transform: translateX(-30%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s .28s;
}

.mobile-nav-sub {
    z-index: 1;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s .28s;
}

    .mobile-nav-sub.is-open {
        transform: none;
        visibility: visible;
        transition: transform .28s cubic-bezier(.32, .72, 0, 1), visibility 0s;
    }

.mobile-nav-bar {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 60px;
    padding: 0 6px;
    border-bottom: 1px solid #efefef;
    background: #fff;
}

.mobile-nav .header-icon {
    width: 44px;
    height: 44px;
    color: #1b1b1b;
}

.mobile-nav-root .mobile-nav-bar {
    justify-content: flex-end;
}

.mobile-nav-sub .mobile-nav-bar {
    padding: 0;
}

.mobile-nav .mobile-nav-back {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 0 16px;
    border: 0;
    background: none;
    color: #1b1b1b;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
}

    .mobile-nav .mobile-nav-back:active {
        background: #f6f6f6;
    }

.mobile-nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mobile-nav .mobile-nav-row {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 0 14px 0 20px;
    border: 0;
    border-bottom: 1px solid #efefef;
    border-radius: 0;
    background: none;
    color: #1b1b1b;
    font-family: inherit;
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

    .mobile-nav .mobile-nav-row:active {
        background: #f6f6f6;
    }

.mobile-nav-chevron {
    margin-left: auto;
    color: #9a9a9a;
    font-size: 20px;
}

.mobile-nav .mobile-nav-sublist .mobile-nav-row {
    font-size: 16px;
    font-weight: 400;
}

    .mobile-nav .mobile-nav-sublist .mobile-nav-row.mobile-nav-viewall {
        color: var(--mobile-nav-ink);
        font-weight: 600;
    }

.mobile-nav .mobile-nav-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 22px 20px 28px;
    color: var(--mobile-nav-ink);
    font-size: 15px;
    text-decoration: none;
}

    .mobile-nav .mobile-nav-phone .material-symbols-outlined {
        font-size: 18px;
    }

@media (prefers-reduced-motion: reduce) {
    .offcanvas.mobile-nav,
    .mobile-nav-panel,
    .mobile-nav-root.is-behind,
    .mobile-nav-sub,
    .mobile-nav-sub.is-open {
        transition: none;
    }
}