/*
 * Mega menu — three panes: category rail | subcategories | promotional panel.
 *
 * ============================================================
 * NO calc() IN THIS FILE. DO NOT ADD ANY.
 * ============================================================
 *
 * Magento minifies CSS during setup:static-content:deploy using
 * tubalmartin/cssmin, which strips whitespace around operators. That turns
 *
 *     calc(100% - var(--w) - 1.25rem)
 * into
 *     calc(100%-var(--w)-1.25rem)
 *
 * which is invalid, so the browser discards the whole declaration. The rule
 * looks perfect in the source file and simply does not exist in the browser.
 *
 * That is what made the promo copy keep reverting to full width and running
 * under the artwork: the reserved-width rule was being deleted in transit,
 * not overridden. Every width here is therefore a literal value, restated per
 * breakpoint. Verbose, but it survives the pipeline.
 *
 * Custom properties are used for colours only, where no arithmetic happens.
 *
 * ------------------------------------------------------------
 * SIZING MODEL
 *
 * Both flex and grid items default to a minimum size of `auto`, meaning they
 * will not shrink below their content's min-content width. Long promo copy
 * therefore forces its column wider than the dropdown unless that default is
 * released. Every track below is explicit, and every item that must be able
 * to shrink carries min-width: 0. Keep both properties when editing.
 * ------------------------------------------------------------
 */

:root {
    /*
     * Build stamp. Read it in the console with:
     *   getComputedStyle(document.documentElement).getPropertyValue('--mm-version')
     * If it does not report the value below, the stylesheet reaching the
     * browser is not this file and no CSS change will have any effect.
     */
    --mm-version: "2026-07-23-a";

    --mm-accent: #1d4ed8;
    --mm-accent-hover: #1e40af;
    --mm-accent-soft: #eaf1ff;
    --mm-panel-from: #eef4ff;
    --mm-panel-to: #f8fbff;
    --mm-ink: #0f172a;
    --mm-ink-soft: #334155;
    --mm-ink-muted: #64748b;
    --mm-line: #e8edf5;
    --mm-radius: 16px;
}

/* ------------------------------------------------------------------
   Dropdown shell

   Anchored to the menu item that opened it (its containing <li>), not
   centred under the whole nav. `left` is set inline, per-open, by
   positionDropdown() in the script block below: it measures the item's
   position, clamps it so the box never runs off the right edge of the nav,
   and re-applies the same clamp whenever the box's own width changes (via
   a ResizeObserver) -- which happens live as the visitor hovers between
   rail items that do and don't have sub-categories (see --no-sub below).
   Because the anchor point is the item, not the box's own centre, a width
   change only moves the box's right edge; the left edge -- and the rail
   sitting against it -- never jumps.

   `left: 0` here is only the pre-JS fallback while the box is still
   x-cloak'd/hidden; it's overwritten before the box becomes visible.

   The repeated selector raises specificity above the theme's own .mega-menu
   rule without resorting to !important.

   Width = 300 rail + 300 sub + 520 aside + 40 padding = 1160.
   ------------------------------------------------------------------ */
.mm-dropdown,
.menu-wrapper .mega-menu.mm-dropdown {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    right: auto;
    width: 1160px;
    max-width: 96vw;
    padding: 20px;
    overflow: hidden;
}

/* 300 + 300 + 40 */
.mm-dropdown:not(.mm-dropdown--with-panel),
.menu-wrapper .mega-menu.mm-dropdown:not(.mm-dropdown--with-panel) {
    width: 640px;
}

/*
 * --no-sub: the active rail item has no children of its own, so pane 2
 * (.mm-sub) is hidden by x-show in header.phtml. That alone leaves a blank
 * 300px column, because grid track sizes come from grid-template-columns,
 * not from whether the track's content is visible. These rules remove the
 * track itself and shrink the shell to match, rather than letting the aside
 * stretch into the freed space — a narrower menu reads as intentional, a
 * wider promo panel reads like a mistake, and stretching the card past its
 * designed width breaks its internal layout (see .mm-panel-main below).
 *
 * Shrinking used to visibly recentre the box, because it was centred under
 * the whole nav — width changing while the mouse was still inside the same
 * open dropdown made the panel jump sideways. Now that the box is anchored
 * to its trigger item instead (see "Dropdown shell" above), shrinking only
 * pulls in the right edge; the rail and the box's left edge don't move.
 *
 * 300 rail + 520 aside + 40 padding = 860.
 */
.mm-dropdown--no-sub.mm-dropdown--with-panel,
.menu-wrapper .mega-menu.mm-dropdown--no-sub.mm-dropdown--with-panel {
    width: 860px;
}

/* 300 rail + 40 padding = 340. No panel and no sub is rare (a rail entry
   with neither children nor promo content) but falls out of the same rule. */
.mm-dropdown--no-sub:not(.mm-dropdown--with-panel),
.menu-wrapper .mega-menu.mm-dropdown--no-sub:not(.mm-dropdown--with-panel) {
    width: 340px;
}

/*
 * Invisible bridge over the gap the theme's mt-1 leaves between the nav bar
 * and the panel. Without it a straight downward move exits the menu for a few
 * pixels, which combined with the close delay in header.phtml is what makes
 * the panel reachable. Purely a hit area — nothing is drawn.
 */
.mm-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
}

.mm-panes {
    display: grid;
    grid-template-columns: 300px 300px minmax(0, 520px);
    align-items: stretch;
}

.mm-dropdown:not(.mm-dropdown--with-panel) .mm-panes {
    grid-template-columns: 300px 300px;
}

.mm-dropdown--no-sub.mm-dropdown--with-panel .mm-panes {
    grid-template-columns: 300px minmax(0, 520px);
}

.mm-dropdown--no-sub:not(.mm-dropdown--with-panel) .mm-panes {
    grid-template-columns: 300px;
}

/* ------------------------------------------------------------------
   Pane 1 — category rail
   ------------------------------------------------------------------ */
.mm-rail {
    min-width: 0;
    margin: 0;
    padding: 0 20px 0 0;
    list-style: none;
}

.mm-rail-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 12px;
    color: var(--mm-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 140ms ease, color 140ms ease;
}

/*
 * Dark blue on light blue rather than white on solid blue: menu icons are
 * merchant-uploaded PNGs in whatever colour they happen to be, and a solid
 * fill would leave dark icons unreadable.
 */
.mm-rail-link.is-active {
    background: var(--mm-accent-soft);
    box-shadow: inset 0 0 0 1px rgba(29, 78, 216, 0.16);
    color: var(--mm-accent);
    font-weight: 700;
}

.mm-rail-link:hover:not(.is-active) {
    background: #f4f7fc;
}

.mm-rail-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

/* Keeps names aligned when only some categories have an icon. */
.mm-rail-icon--empty {
    display: block;
}

.mm-rail-name {
    flex: 1 1 auto;
    min-width: 0;
}

.mm-chevron {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    opacity: 0.55;
}

.mm-rail-link.is-active .mm-chevron {
    opacity: 1;
}

/* ------------------------------------------------------------------
   Pane 2 — children of the hovered rail entry
   ------------------------------------------------------------------ */
.mm-sub {
    min-width: 0;
    padding: 12px 28px;
    border-left: 1px solid var(--mm-line);
}

.mm-sub-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mm-sub-title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--mm-ink);
}

.mm-sub-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mm-sub-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    color: var(--mm-ink-soft);
    font-size: 16px;
    line-height: 1.35;
    text-decoration: none;
    transition: color 120ms ease;
}

.mm-sub-link:hover,
.mm-sub-link:focus-visible {
    color: var(--mm-accent);
}

/* Pinned to the foot so it sits at the bottom of a short list as well as a
   long one. */
.mm-view-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--mm-line);
    color: var(--mm-accent);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/*
 * Adjacent-sibling selector: this only matches when no subcategory list sits
 * between the title and the link, i.e. the category has no children. The link
 * then sits directly under the heading instead of being pushed to the foot of
 * a pane whose height comes from the rail beside it.
 */
.mm-sub-title + .mm-view-all {
    margin-top: 4px;
    padding-top: 16px;
}

.mm-view-all:hover {
    color: var(--mm-accent-hover);
}

.mm-view-all svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Pane 3 — promotional panel
   ------------------------------------------------------------------ */
.mm-aside {
    min-width: 0;
    padding-left: 28px;
}

/*
 * Panels share one grid cell so the dropdown holds a constant height as they
 * swap; without it the whole menu jumps on hover. minmax(0, 1fr) and the
 * min-* on the item are what stop grid's `auto` minimum from reappearing.
 */
.mm-panel-stack {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 100%;
    min-height: 440px;
    min-width: 0;
}

.mm-panel {
    grid-area: 1 / 1;
    min-width: 0;
    min-height: 0;
}

/*
 * THE TWO PANELS.
 *
 * Copy gets whatever is left; the artwork gets a track of its own that no
 * amount of admin-entered text can encroach on. This is the whole fix — the
 * copy and the image are never in the same box.
 *
 * Card content width is 520 aside - 28 aside padding - 64 card padding = 428.
 * Split as 222 copy + 16 gap + 190 artwork.
 */
.mm-panel-card,
.mm-aside .mm-panel-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px;
    border-radius: var(--mm-radius);
    background: linear-gradient(150deg, var(--mm-panel-from), var(--mm-panel-to));
    overflow: hidden;
}

/*
 * The copy + artwork row. The heading (above) and the CTA (below) are now
 * full-width blocks outside this grid, so the heading spans the whole card
 * on one line and the button stretches edge to edge.
 */
.mm-panel-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

/* Badge + heading block, full width above the copy/artwork row. */
.mm-panel-header {
    position: relative;
    z-index: 2;
}

/* No artwork uploaded: the copy has the whole row. */
.mm-panel-card--no-media .mm-panel-main,
.mm-aside .mm-panel-card--no-media .mm-panel-main {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Decorative contour lines across the foot of the card, drawn in CSS rather
 * than baked into each uploaded banner so every promo gets them without the
 * marketing team compositing anything.
 */
.mm-panel-card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%231d4ed8' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M-20 120 C 90 60, 240 60, 420 108'/%3E%3Cpath d='M-20 132 C 90 72, 240 72, 420 120'/%3E%3Cpath d='M-20 144 C 90 84, 240 84, 420 132'/%3E%3Cpath d='M-20 156 C 90 96, 240 96, 420 144'/%3E%3Cpath d='M-20 168 C 90 108, 240 108, 420 156'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 100% 100%;
    pointer-events: none;
}

/* LEFT PANEL — content. min-width: 0 is what permits the text to wrap. */
.mm-panel-body {
    position: relative;
    z-index: 2;
    min-width: 0;
    max-width: 100%;
    /* Backstop. The grid track already bounds this column; if anything ever
       escapes it again, it gets clipped rather than painted over the artwork. */
    overflow: hidden;
}

/*
 * Wrapping is forced, not assumed.
 *
 * The artwork column and the copy column were correct, yet the description
 * still ran straight across the card — which only happens when the text
 * cannot break. Something in the theme is applying white-space: nowrap
 * inside the menu (the nav uses it heavily on menu labels), and a paragraph
 * that will not wrap simply overflows its grid area and paints over its
 * neighbour, regardless of how well the columns are defined.
 *
 * Resetting it here is the fix. `word-break: break-word` and
 * `overflow-wrap: anywhere` additionally cover a pasted URL or an unspaced
 * product code, which have no break opportunity of their own.
 */
.mm-panel-body,
.mm-panel-badge,
.mm-panel-heading,
.mm-panel-subheading,
.mm-panel-text {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.mm-panel-badge {
    display: inline-block;
    margin-bottom: 16px;
    padding: 6px 11px;
    border-radius: 6px;
    background: var(--mm-accent-soft);
    color: var(--mm-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mm-panel-heading {
    margin: 0 0 14px;
    font-size: 34px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--mm-ink);
    /* Single line, per design. Safe here because the heading is now a
       full-width block above the copy/artwork row rather than sharing a
       column with the image. A heading longer than the card is clipped by
       the card's overflow rather than wrapping to a second line. */
    white-space: nowrap;
}

/* The short accent rule under the heading. */
.mm-panel-rule {
    display: block;
    width: 48px;
    height: 3px;
    margin-bottom: 24px;
    border-radius: 2px;
    background: var(--mm-accent);
}

.mm-panel-subheading {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mm-ink);
}

.mm-panel-text {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.65;
    color: var(--mm-ink-muted);
}

.mm-panel-cta {
    position: relative;
    z-index: 2;
    display: flex;
    width: 100%;
    box-sizing: border-box;
    margin-top: auto; /* pins the button to the foot of the card */
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 22px;
    border-radius: 8px;
    background: var(--mm-accent);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease;
}

.mm-panel-cta:hover,
.mm-panel-cta:focus-visible {
    background: var(--mm-accent-hover);
    color: #fff;
}

.mm-panel-cta svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

/*
 * RIGHT PANEL — artwork.
 *
 * The wrapper carries the size, not the image. Handing a raster file its own
 * width is the most reliable way for a layout like this to blow out, so the
 * box is fixed on all four properties and the image is told to fit inside it.
 */
.mm-panel-media {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 190px;
    min-width: 190px;
    max-width: 190px;
    height: 260px;
    overflow: hidden;
}

.mm-panel-banner {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
}

/* ------------------------------------------------------------------
   Narrower desktops — every width restated, since calc() is unavailable
   ------------------------------------------------------------------ */

/* 300 + 300 + 460 + 40 = 1100 */
@media (max-width: 1500px) {
    .mm-dropdown,
    .menu-wrapper .mega-menu.mm-dropdown {
        width: 1100px;
    }

    .mm-panes {
        grid-template-columns: 300px 300px minmax(0, 460px);
    }

    /* 300 rail + 460 aside + 40 padding = 800. Rail width is unchanged at
       this breakpoint, so the no-panel/no-sub case (rail only, 340px) still
       falls through to the base rule above and needs no restating here. */
    .mm-dropdown--no-sub.mm-dropdown--with-panel,
    .menu-wrapper .mega-menu.mm-dropdown--no-sub.mm-dropdown--with-panel {
        width: 800px;
    }

    .mm-dropdown--no-sub.mm-dropdown--with-panel .mm-panes {
        grid-template-columns: 300px minmax(0, 460px);
    }

    .mm-panel-main {
        grid-template-columns: minmax(0, 1fr) 165px;
    }

    .mm-panel-media {
        width: 165px;
        min-width: 165px;
        max-width: 165px;
        height: 230px;
    }

    .mm-panel-heading {
        font-size: 30px;
    }
}

/* 264 + 272 + 400 + 40 = 976 */
@media (max-width: 1340px) {
    .mm-dropdown,
    .menu-wrapper .mega-menu.mm-dropdown {
        width: 976px;
    }

    .mm-panes {
        grid-template-columns: 264px 272px minmax(0, 400px);
    }

    .mm-dropdown:not(.mm-dropdown--with-panel),
    .menu-wrapper .mega-menu.mm-dropdown:not(.mm-dropdown--with-panel) {
        width: 576px;
    }

    .mm-dropdown:not(.mm-dropdown--with-panel) .mm-panes {
        grid-template-columns: 264px 272px;
    }

    /* 264 rail + 400 aside + 40 padding = 704. */
    .mm-dropdown--no-sub.mm-dropdown--with-panel,
    .menu-wrapper .mega-menu.mm-dropdown--no-sub.mm-dropdown--with-panel {
        width: 704px;
    }

    .mm-dropdown--no-sub.mm-dropdown--with-panel .mm-panes {
        grid-template-columns: 264px minmax(0, 400px);
    }

    /* 264 rail + 40 padding = 304. Rail width changes at this breakpoint, so
       the no-panel/no-sub case must be restated even though the base rule
       already covers the width in principle. */
    .mm-dropdown--no-sub:not(.mm-dropdown--with-panel),
    .menu-wrapper .mega-menu.mm-dropdown--no-sub:not(.mm-dropdown--with-panel) {
        width: 304px;
    }

    .mm-dropdown--no-sub:not(.mm-dropdown--with-panel) .mm-panes {
        grid-template-columns: 264px;
    }

    .mm-panel-main {
        grid-template-columns: minmax(0, 1fr) 140px;
    }

    .mm-panel-card,
    .mm-aside .mm-panel-card {
        padding: 24px;
    }

    .mm-panel-media {
        width: 140px;
        min-width: 140px;
        max-width: 140px;
        height: 200px;
    }

    .mm-panel-heading {
        font-size: 26px;
    }

    .mm-panel-stack {
        min-height: 400px;
    }
}

/* Below this the panel cannot earn its space; the two left panes are enough.
   264 + 272 + 40 = 576 */
@media (max-width: 1140px) {
    .mm-aside {
        display: none;
    }

    .mm-dropdown,
    .menu-wrapper .mega-menu.mm-dropdown {
        width: 576px;
    }

    .mm-panes,
    .mm-dropdown:not(.mm-dropdown--with-panel) .mm-panes {
        grid-template-columns: 264px 272px;
    }

    /* Aside is hidden outright at this width, so --no-sub leaves nothing but
       the rail regardless of panel state. 264 rail + 40 padding = 304. */
    .mm-dropdown--no-sub,
    .menu-wrapper .mega-menu.mm-dropdown--no-sub {
        width: 304px;
    }

    .mm-dropdown--no-sub .mm-panes {
        grid-template-columns: 264px;
    }
}

/* ------------------------------------------------------------------
   Misc
   ------------------------------------------------------------------ */

/* Hidden until Alpine initialises, so there is no flash of every pane. */
[x-cloak] {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .mm-panel,
    .mm-panel-cta,
    .mm-rail-link,
    .mm-sub-link {
        transition: none !important;
    }
}

/* The dropdown is desktop-only; the mobile drawer is a separate layout. */
@media (max-width: 1023px) {
    .mm-dropdown {
        display: none;
    }
}