/*
 * Mega menu — three panes: category rail | subcategories | promotional panel.
 *
 * SIZING MODEL — read before changing widths.
 *
 * Every column width here is an explicit track, never an intrinsic one. No
 * `max-content`, no percentage-of-a-shrinking-parent, no flex-basis:auto, no
 * absolutely positioned artwork.
 *
 * The reason: both flex and grid items default to a minimum size of `auto`,
 * which means "do not shrink below the content's min-content width". A long
 * line of promo copy therefore forced the promo pane wider than the dropdown,
 * the dropdown's overflow clip sliced the artwork off, and releasing that
 * default on one layer simply moved the problem to the next one up.
 *
 * With declared tracks there is nothing to compute and nothing to overflow:
 * text wraps into the width it is given, and the image scales inside its box.
 * Keep it that way — if a column needs to be wider, change the variable.
 *
 * Plain CSS with prefixed class names rather than Tailwind utilities, because
 * the theme's Tailwind build only scans paths listed in its own config and
 * would compile module classes to nothing.
 */

: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 being served is
     * not this file and no CSS change will have any effect.
     */
    --mm-version: "2026-07-21-f";

    --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;

    /* The three tracks, plus the dropdown's own padding. */
    --mm-rail-width: 300px;
    --mm-sub-width: 300px;
    --mm-aside-width: 520px;
    --mm-pad: 20px;

    /* Fixed box for the artwork inside the promo card. */
    --mm-media-width: 190px;
    --mm-media-height: 260px;
}

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

/*
 * Centred under <nav>, not under the item that opened it: the panel is far
 * wider than any single menu item, so anchoring it to one would push it off
 * the right of the screen for anything past the middle of the bar. Auto
 * margins rather than translateX, because Alpine's x-transition animates
 * transform and the two would fight.
 *
 * The repeated selector raises specificity above the theme's own .mega-menu
 * rule without resorting to !important.
 */
.mm-dropdown,
.menu-wrapper .mega-menu.mm-dropdown {
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: calc(
        var(--mm-rail-width) + var(--mm-sub-width) + var(--mm-aside-width) + (2 * var(--mm-pad))
    );
    max-width: calc(100vw - 2rem);
    padding: var(--mm-pad);
    overflow: hidden;
}

.mm-dropdown:not(.mm-dropdown--with-panel),
.menu-wrapper .mega-menu.mm-dropdown:not(.mm-dropdown--with-panel) {
    width: calc(var(--mm-rail-width) + var(--mm-sub-width) + (2 * var(--mm-pad)));
}

/* Declared tracks. minmax(0, …) on the last one keeps it from claiming extra
   width if the dropdown is ever clamped by the viewport. */
.mm-panes {
    display: grid;
    grid-template-columns: var(--mm-rail-width) var(--mm-sub-width) minmax(0, var(--mm-aside-width));
    align-items: stretch;
}

.mm-dropdown:not(.mm-dropdown--with-panel) .mm-panes {
    grid-template-columns: var(--mm-rail-width) var(--mm-sub-width);
}

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

.mm-rail-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    color: var(--mm-ink);
    font-size: 1rem;
    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 1.875rem;
    width: 1.875rem;
    height: 1.875rem;
    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: 1.125rem;
    height: 1.125rem;
    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: 0.75rem 1.75rem;
    border-left: 1px solid var(--mm-line);
}

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

.mm-sub-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    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: 0.75rem;
    padding: 0.55rem 0;
    color: var(--mm-ink-soft);
    font-size: 1rem;
    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: 0.75rem;
    margin-top: auto;
    padding-top: 1.1rem;
    border-top: 1px solid var(--mm-line);
    color: var(--mm-accent);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

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

.mm-view-all svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

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

/*
 * 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;
}

/*
 * Copy takes the remaining track, artwork gets a declared one.
 * Selector goes through .mm-aside to sit above any theme rule on .mega-menu
 * descendants without needing !important.
 */
.mm-panel-card,
.mm-aside .mm-panel-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--mm-media-width);
    align-items: center;
    gap: 1.25rem;
    height: 100%;
    padding: 2rem;
    border-radius: var(--mm-radius);
    background: linear-gradient(150deg, var(--mm-panel-from), var(--mm-panel-to));
    overflow: hidden;
}

/* No artwork uploaded: copy spans the full card. */
.mm-panel-card--no-media {
    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;
}

/*
 * The copy's width is stated outright, not inferred from the grid track.
 *
 * Belt and braces on purpose: if anything upstream overrides the card's
 * `display: grid` — a theme rule, a stale stylesheet, a future edit — the
 * track disappears and the copy silently reverts to full width, which is
 * exactly the overlap this keeps producing. An explicit width holds under
 * grid, flex or plain block layout, so the artwork's space is reserved no
 * matter which of those the card ends up in.
 *
 * The 1.25rem matches the card's gap; change both together.
 */
.mm-panel-body {
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    width: calc(100% - var(--mm-media-width) - 1.25rem) !important;
    max-width: calc(100% - var(--mm-media-width) - 1.25rem) !important;
    min-width: 0;
}

/* No artwork uploaded: the copy has the whole card. */
.mm-panel-card--no-media .mm-panel-body {
    width: 100% !important;
    max-width: 100% !important;
}

/* A pasted URL or unspaced product code must not widen the track. */
.mm-panel-heading,
.mm-panel-subheading,
.mm-panel-text {
    overflow-wrap: anywhere;
}

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

.mm-panel-heading {
    margin: 0 0 0.9rem;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--mm-ink);
}

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

.mm-panel-subheading {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--mm-ink);
}

.mm-panel-text {
    margin: 0 0 1.75rem;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--mm-ink-muted);
}

.mm-panel-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.4rem;
    border-radius: 8px;
    background: var(--mm-accent);
    color: #fff;
    font-size: 0.9375rem;
    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: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

/*
 * The artwork lives in a box of declared size and is told to fit inside it.
 * A raster image with no width of its own is the single most reliable way for
 * a layout like this to blow out, so the box is never allowed to be intrinsic.
 */
.mm-panel-media {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    flex: 0 0 var(--mm-media-width);
    width: var(--mm-media-width);
    min-width: var(--mm-media-width);
    max-width: var(--mm-media-width);
    height: var(--mm-media-height);
    overflow: hidden;
}

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

/* ------------------------------------------------------------------
   Narrower desktops — step the tracks down rather than let them clash
   ------------------------------------------------------------------ */
@media (max-width: 1500px) {
    :root {
        --mm-aside-width: 460px;
        --mm-media-width: 165px;
        --mm-media-height: 230px;
    }

    .mm-panel-heading {
        font-size: 2rem;
    }
}

@media (max-width: 1340px) {
    :root {
        --mm-rail-width: 264px;
        --mm-sub-width: 272px;
        --mm-aside-width: 400px;
        --mm-media-width: 140px;
        --mm-media-height: 200px;
    }

    .mm-panel-card {
        padding: 1.5rem;
    }

    .mm-panel-heading {
        font-size: 1.75rem;
    }

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

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

    .mm-dropdown,
    .menu-wrapper .mega-menu.mm-dropdown {
        width: calc(var(--mm-rail-width) + var(--mm-sub-width) + (2 * var(--mm-pad)));
    }

    .mm-panes {
        grid-template-columns: var(--mm-rail-width) var(--mm-sub-width);
    }
}

/* ------------------------------------------------------------------
   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;
    }
}