/*
 * 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-21-h";

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

   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.

   Width = 300 rail + 300 sub + 520 aside + 40 padding = 1160.
   ------------------------------------------------------------------ */
.mm-dropdown,
.menu-wrapper .mega-menu.mm-dropdown {
    box-sizing: border-box;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-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;
}

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

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

.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: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 32px;
    border-radius: var(--mm-radius);
    background: linear-gradient(150deg, var(--mm-panel-from), var(--mm-panel-to));
    overflow: hidden;
}

/* No artwork uploaded: the copy has the whole card. */
.mm-panel-card--no-media,
.mm-aside .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;
}

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

/* 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 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 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);
    }

    .mm-panel-card,
    .mm-aside .mm-panel-card {
        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;
    }

    .mm-panel-card,
    .mm-aside .mm-panel-card {
        grid-template-columns: minmax(0, 1fr) 140px;
        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;
    }
}

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