/* StorefrontMenuView (storefront navigation spec §3.4): the customer menu's own stylesheet, served as _content/CCP.UI.Components/storefront-menu.css and linked by the host that draws the menu.
   Class block .storefront-menu* only; every colour is a --brand-* token NAME (light theme only, D-0286).

   Two layouts from ONE rule set. The collapsed list: a full-width column of rows at least 40px tall, a parent opening in place, indented one step per level. The wide layout: a row of top-level
   items whose panels hang under the bar. Wide applies from 992px up, or whenever the menu is told to be wide (.storefront-menu--wide, the staff preview), and never when told to be narrow.
   A media query cannot be combined with a class in one selector, so the layout is chosen by two switch properties set in exactly those places and read by every declaration that differs:
       --sm-if-wide    is `initial` (unusable) when the layout is wide and empty when it is narrow;
       --sm-if-narrow  is the reverse.
   A declaration reads  var(--sm-if-wide, WIDE VALUE) var(--sm-if-narrow, NARROW VALUE)  : the value whose switch is unusable is the one that survives, the other contributes nothing. */

.storefront-menu {
    --sm-if-wide: ;
    --sm-if-narrow: initial;
    position: relative;
    z-index: 20;
}

@media (min-width: 992px) {
    .storefront-menu:not(.storefront-menu--narrow) {
        --sm-if-wide: initial;
        --sm-if-narrow: ;
    }
}

.storefront-menu--wide {
    --sm-if-wide: initial;
    --sm-if-narrow: ;
    height: 100%;
}

.storefront-menu__list,
.storefront-menu__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.storefront-menu__list {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: var(--sm-if-wide, row) var(--sm-if-narrow, column);
    flex-wrap: var(--sm-if-wide, wrap) var(--sm-if-narrow, nowrap);
    gap: var(--sm-if-wide, var(--brand-space-1)) var(--sm-if-narrow, 0);
}

.storefront-menu__item {
    position: var(--sm-if-wide, relative) var(--sm-if-narrow, static);
    border-bottom: var(--sm-if-wide, none) var(--sm-if-narrow, 1px solid var(--brand-border));
}

.storefront-menu__item:last-child {
    border-bottom: none;
}

.storefront-menu__item--wide-panel {
    position: static;
}

/* A transparent layer behind the open panel: a click anywhere outside the menu lands on it and closes the panel. On the live site it covers the window; in the staff preview (the forced wide layout)
   it covers only the preview, so the first click elsewhere on the staff page is never swallowed. */
.storefront-menu__scrim {
    position: fixed;
    inset: 0;
    display: var(--sm-if-wide, block) var(--sm-if-narrow, none);
}

.storefront-menu--wide .storefront-menu__scrim {
    position: absolute;
}

.storefront-menu__link > a,
.storefront-menu__link > .storefront-menu__label {
    display: block;
    color: var(--brand-text);
    text-decoration: none;
}

.storefront-menu__link > a:hover,
.storefront-menu__link > a:focus-visible {
    color: var(--brand-primary);
}

.storefront-menu__top > a,
.storefront-menu__top > .storefront-menu__label,
.storefront-menu__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--brand-space-1);
    width: var(--sm-if-wide, auto) var(--sm-if-narrow, 100%);
    min-height: 2.5rem;
    padding: var(--sm-if-wide, var(--brand-space-3)) var(--sm-if-narrow, var(--brand-space-2) var(--brand-space-3));
    background: none;
    border: none;
    border-bottom: var(--sm-if-wide, 2px solid transparent) var(--sm-if-narrow, none);
    font-family: inherit;
    font-size: var(--sm-if-wide, var(--brand-font-size-sm)) var(--sm-if-narrow, var(--brand-font-size-base));
    font-weight: var(--brand-font-weight-medium);
    color: var(--brand-text);
    text-align: left;
    white-space: var(--sm-if-wide, nowrap) var(--sm-if-narrow, normal);
    cursor: pointer;
}

.storefront-menu__toggle:hover,
.storefront-menu__toggle:focus-visible,
.storefront-menu__item--open > .storefront-menu__toggle {
    color: var(--brand-primary);
}

/* The accent underline of the wide layout; in the collapsed list the border style is none, so the colour does nothing. */
.storefront-menu__top > a:hover,
.storefront-menu__top > a:focus-visible,
.storefront-menu__toggle:hover,
.storefront-menu__toggle:focus-visible,
.storefront-menu__item--open > .storefront-menu__toggle {
    border-bottom-color: var(--brand-primary);
}

.storefront-menu__caret {
    font-size: var(--brand-font-size-xs);
    transition: transform var(--brand-transition-fast);
}

.storefront-menu__toggle[aria-expanded="true"] .storefront-menu__caret {
    transform: rotate(180deg);
}

.storefront-menu__panel {
    position: var(--sm-if-wide, absolute) var(--sm-if-narrow, static);
    top: var(--sm-if-wide, 100%) var(--sm-if-narrow, auto);
    left: var(--sm-if-wide, 0) var(--sm-if-narrow, auto);
    z-index: 2;
    min-width: var(--sm-if-wide, 220px) var(--sm-if-narrow, 0);
    padding: var(--sm-if-wide, var(--brand-space-2) 0) var(--sm-if-narrow, 0 0 var(--brand-space-2) var(--brand-space-4));
    background: var(--sm-if-wide, var(--brand-surface)) var(--sm-if-narrow, none);
    border: var(--sm-if-wide, 1px solid var(--brand-border)) var(--sm-if-narrow, 0);
    border-radius: var(--sm-if-wide, var(--brand-radius-lg)) var(--sm-if-narrow, 0);
    box-shadow: var(--sm-if-wide, var(--brand-shadow-md)) var(--sm-if-narrow, none);
}

.storefront-menu__panel--wide {
    right: var(--sm-if-wide, 0) var(--sm-if-narrow, auto);
    padding: var(--sm-if-wide, var(--brand-space-4)) var(--sm-if-narrow, 0 0 var(--brand-space-2) var(--brand-space-4));
}

.storefront-menu__panel[hidden] {
    display: none;
}

.storefront-menu__columns {
    display: var(--sm-if-wide, grid) var(--sm-if-narrow, block);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--sm-if-wide, var(--brand-space-5)) var(--sm-if-narrow, 0);
}

.storefront-menu__column-heading {
    margin: 0;
    padding: var(--sm-if-wide, var(--brand-space-2) 0) var(--sm-if-narrow, var(--brand-space-2) var(--brand-space-3));
    font-size: var(--brand-font-size-sm);
    font-weight: var(--brand-font-weight-semibold);
    color: var(--brand-text);
}

.storefront-menu__column .storefront-menu__sublist {
    padding-left: var(--sm-if-wide, 0) var(--sm-if-narrow, var(--brand-space-4));
}

.storefront-menu__sublist--columns-2 {
    column-count: var(--sm-if-wide, 2) var(--sm-if-narrow, 1);
    column-gap: var(--brand-space-5);
}

.storefront-menu__sublist--columns-3 {
    column-count: var(--sm-if-wide, 3) var(--sm-if-narrow, 1);
    column-gap: var(--brand-space-5);
}

.storefront-menu__sublist li {
    break-inside: avoid;
}

.storefront-menu__sublist .storefront-menu__link > a,
.storefront-menu__sublist .storefront-menu__link > .storefront-menu__label {
    min-height: 2.5rem;
    padding: var(--brand-space-2) var(--brand-space-3);
    font-size: var(--brand-font-size-base);
    overflow-wrap: anywhere;
}

.storefront-menu__column-heading .storefront-menu__link > a,
.storefront-menu__column-heading .storefront-menu__link > .storefront-menu__label {
    padding: 0;
    font-size: var(--brand-font-size-sm);
    font-weight: var(--brand-font-weight-semibold);
}

.storefront-menu__sublist .storefront-menu__link > a:hover,
.storefront-menu__sublist .storefront-menu__link > a:focus-visible {
    background: var(--brand-primary-lighter);
}

.storefront-menu__sublist .storefront-menu__link a i {
    font-size: var(--brand-font-size-xs);
}