/* ==========================================================================
   Make My Theme — mega-menu.css

   The Products menu. Its own sheet rather than more of header.css:
   header.css is already ~850 lines and is edited constantly for the nav item
   set, and this is one self-contained surface.

   Above 900px it is a two-level flyout dressed exactly like the nav's "More"
   popover (header.css, .mm-nav__more-list): square corners, a Rule border,
   rung 2 (--shadow-2), 14px rows that take Pebble on hover. No counts and
   no footer strip, at any width. Column one lists
   the ranges; hovering or focusing one (mega-menu.js stamps .is-active)
   slides its groups out into column two. Below 900px it is full-screen and
   drills two levels deep.

   The §14.1 hover underline is NOT touched here. header.css's
   .mm-nav__list > li > a::after rule already implements it correctly and the trigger keeps its plain menu-link
   markup, so nothing in this file keys off .mm-nav__list > li > a.
   ========================================================================== */

/* ── Panel shell ───────────────────────────────────────────────────────────── */

/* <header> is position: sticky, which already makes it the containing block —
   it needs no position: relative of its own, and adding one would break the
   stick. Above 900px mega-menu.js measures the Products item and hands its
   bottom-left corner over as --mm-mega-top / --mm-mega-left, so the panel
   hangs from the item the way More's popover hangs from its button. */
.mm-mega {
    position: absolute;
    top: var(--mm-mega-top, 100%);
    left: var(--mm-mega-left, 0px);
    background: var(--paper);
    z-index: var(--z-raised);
    text-align: left;
}

/* The panel ships with the `hidden` attribute; the descendant display rules
   below would otherwise out-specify the UA's [hidden] { display: none }. */
.mm-mega[hidden] {
    display: none;
}

/* .mm-header carries --z-header (200) and therefore opens its own stacking
   context: every z-index inside it, including the panel's, is scoped to that
   context and cannot reach past the mobile nav drawer (--z-drawer, 400) the
   panel is opened from below 900px. So the whole header lifts for as long as
   the panel is open — mega-menu.js stamps the class — and drops back after.
   Raising .mm-mega alone would do nothing. */
.mm-header.mm-mega-is-open {
    z-index: var(--z-modal);
}

.mm-mega__grid,
.mm-mega__groups {
    list-style: none;
    margin: 0;
    padding: 0;
}


/* ── Range row ─────────────────────────────────────────────────────────────── */

.mm-mega__range-head {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Each name wears its range's own accent, passed in as --mm-range-accent from
   the brand registry (Core_Brand_Accents) — the footer's Products names do the
   same (maintainer sign-off 2026-10-15). The waived accents' shortfall is
   pinned in design-contrast.test.js. */
.mm-mega__range-name {
    flex: 1;
    color: var(--mm-range-accent, var(--ink));
    text-decoration: none;
}

.mm-mega__chevron {
    display: inline-flex;
    color: var(--ink-muted);
}


/* ── Group rows ────────────────────────────────────────────────────────────── */

.mm-mega__groups {
    display: flex;
    flex-direction: column;
}

.mm-mega__group {
    display: flex;
    align-items: center;
    font-size: var(--fs-14);
    color: var(--ink-soft);
    text-decoration: none;
}

/* A range with nothing configured states what it makes instead. */
.mm-mega__tagline {
    margin: 0;
    font-size: var(--fs-13);
    line-height: var(--lh-body);
    color: var(--ink-muted);
}


/* ── >=900px: the flyout ───────────────────────────────────────────────────── */

@media (width >= 900px) {

    /* Column one. Box, padding and row metrics are More's (header.css). */
    .mm-mega {
        min-width: 200px;
        padding: var(--sp-1) 0;
        border: 1px solid var(--rule);
        box-shadow: var(--shadow-2);
    }

    /* .container is the phone layout's gutter; the flyout has its own. */
    .mm-mega .mm-mega__inner {
        width: auto;
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .mm-mega__range-head {
        padding: var(--sp-2) var(--sp-3);
        font-size: var(--fs-14);
        white-space: nowrap;
        transition: background-color var(--dur-fast) var(--ease);
    }

    /* The open range keeps its Pebble row while the pointer is out in its
       groups, so the two columns read as one path. */
    .mm-mega__range.is-active .mm-mega__range-head {
        background: var(--paper-soft);
    }

    /* The open or pointed-at range's name goes Semibold, as the footer's
       Products names do on hover. */
    .mm-mega__range.is-active .mm-mega__range-name,
    .mm-mega__range-name:hover,
    .mm-mega__range-name:focus-visible {
        font-weight: var(--fw-semibold);
    }

    /* The name stretches over the whole row's height so the row is the link. */
    .mm-mega__range-name::before {
        content: "";
        position: absolute;
        inset: 0;
    }

    .mm-mega__range-head {
        position: relative;
    }

    .mm-mega__groups,
    .mm-mega__tagline {
        display: none;
    }

    /* Column two: the same popover, butted against column one's right edge
       (the panel is the nearest positioned ancestor) and at least as tall.
       It shares column one's border as its divider, and the clip keeps its
       shadow off column one. */
    .mm-mega__range.is-active > .mm-mega__groups,
    .mm-mega__range.is-active > .mm-mega__tagline {
        display: flex;
        position: absolute;
        top: -1px;
        left: 100%;
        box-sizing: border-box;
        min-width: 220px;
        min-height: calc(100% + 2px);
        padding: var(--sp-1) 0;
        background: var(--paper);
        border: 1px solid var(--rule);
        border-left: 0;
        box-shadow: var(--shadow-2);
        clip-path: inset(-32px -32px -32px 0);
    }

    .mm-mega__range.is-active > .mm-mega__tagline {
        display: block;
        width: 240px;
        padding: var(--sp-2) var(--sp-3);
    }

    .mm-mega__group {
        padding: var(--sp-2) var(--sp-3);
        white-space: nowrap;
        transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
    }

    .mm-mega__group:hover,
    .mm-mega__group:focus-visible {
        color: var(--ink);
        background: var(--paper-soft);
    }

    /* A sub-brand's single range: the template drops the range column, so the
       groups are column one, inside the panel's own box. */
    .mm-mega[data-ranges="single"] .mm-mega__groups {
        display: flex;
    }

    .mm-mega[data-ranges="single"] .mm-mega__tagline {
        display: block;
        width: 240px;
        padding: var(--sp-2) var(--sp-3);
    }
}

@media (width >= 900px) and (prefers-reduced-motion: reduce) {
    .mm-mega__range-head,
    .mm-mega__group { transition: none; }
}


/* ── Mobile chrome — hidden until the panel goes full-screen ───────────────── */

.mm-mega__bar,
.mm-mega__drill {
    display: none;
}


/* ── <900px: full-screen panel, ranges first, drill into one ───────────────── */

@media (width < 900px) {

    /* Over the mobile nav drawer it is opened from, so it needs the tier above
       --z-drawer. It is still a disclosure, not a dialog — no modal semantics,
       no focus trap: Escape closes it and returns focus to Products. */
    .mm-mega {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        overflow-y: auto;
        overscroll-behavior: contain;
        display: flex;
        flex-direction: column;
    }

    .mm-mega__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        min-height: var(--h-btn-lg);
        padding-inline: var(--container-pad);
        border-bottom: 1px solid var(--rule);
        position: sticky;
        top: 0;
        background: var(--paper);
    }

    /* The back button is `.core-btn--back` (core-controls.css, efficiency
       #558); only the close keeps a body here. */
    .mm-mega__close {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--sp-2);
        min-height: var(--h-control);
        min-width: var(--h-control);
        padding: 0;
        background: none;
        border: 0;
        font: inherit;
        font-size: var(--fs-14);
        color: var(--ink);
        cursor: pointer;
    }

    .mm-mega__bar-title {
        font-size: var(--fs-11);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-label);
        text-transform: uppercase;
        color: var(--ink-muted);
        margin-right: auto;
    }

    /* Screen 1 shows the range list; screen 2 shows one range's groups. */
    .mm-mega[data-view="ranges"] .mm-mega__back {
        display: none;
    }

    .mm-mega[data-view="range"] .mm-mega__bar-title {
        display: none;
    }

    .mm-mega__inner {
        flex: 1;
    }

    /* 52px: the 44px touch floor plus breathing room. */
    .mm-mega__range-head {
        min-height: var(--h-btn-lg);
        padding-block: var(--sp-2);
        border-bottom: 1px solid var(--rule);
    }

    .mm-mega__range-name {
        font-size: var(--fs-16);
        font-weight: var(--fw-semibold);
        letter-spacing: var(--tracking-display);
    }

    /* The drill arrow (below) is the phone's chevron. */
    .mm-mega__chevron {
        display: none;
    }

    /* Two actions per row, deliberately: the name goes to the range, the arrow
       drills into its groups. One row doing both would leave nothing to say
       the groups exist. */
    .mm-mega__drill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: var(--h-control);
        min-height: var(--h-control);
        margin-right: calc(var(--sp-3) * -1);
        padding: 0;
        background: none;
        border: 0;
        font: inherit;
        color: var(--ink-muted);
        cursor: pointer;
    }

    .mm-mega[data-view="ranges"] .mm-mega__groups,
    .mm-mega[data-view="ranges"] .mm-mega__tagline {
        display: none;
    }

    .mm-mega[data-view="range"] .mm-mega__range:not(.is-active) {
        display: none;
    }

    .mm-mega[data-view="range"] .mm-mega__range-head {
        border-bottom: 0;
        padding-top: var(--sp-4);
    }

    .mm-mega[data-view="range"] .mm-mega__drill {
        display: none;
    }

    /* A drilled-into range, and the single-range menu's first screen (below),
       list their groups the same way. */
    .mm-mega:is([data-view="range"], [data-ranges="single"]) .mm-mega__group {
        min-height: var(--h-btn-lg);
        padding-block: var(--sp-2);
        border-bottom: 1px solid var(--rule);
        font-size: var(--fs-16);
    }

    .mm-mega:is([data-view="range"], [data-ranges="single"]) .mm-mega__tagline {
        padding-block: var(--sp-4);
    }

    /* One range means there is nothing to choose between, so the template
       renders no range row at all: the groups are the first screen. Placed
       last in the block deliberately — it has the same specificity as the
       [data-view] rules above and needs to win on order. */
    .mm-mega[data-ranges="single"] .mm-mega__groups {
        display: flex;
    }

    .mm-mega[data-ranges="single"] .mm-mega__tagline {
        display: block;
    }
}