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

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

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

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

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

    /* 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 now runs down to 768px (tablet). Below that the mobile
   drawer takes over, so the dropdown is hidden only under 768px — not 1024
   as before, when the hamburger owned the whole 768–1024 band. */
@media (max-width: 767px) {
    .mm-dropdown {
        display: none;
    }
}

/* ==================================================================
   TABLET (768–1023px) — two-column mega menu, promo banner below

   The header now shows the desktop menu bar from 768px up (the menu bar
   and hamburger were flipped from lg to md). In this band the dropdown
   collapses to two columns — category rail + subcategories — and the
   promotional panel is dropped onto its own full-width row beneath them.
   The panel is display:none from 1140px down for desktop, so it is
   re-enabled and re-laid-out here. Tap targets are enlarged throughout.

   NO calc() — literal widths only, per the note at the top of this file.
   ================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {

    /* The nav bar can hold more items than a tablet is wide; let it scroll
       sideways rather than overflow or wrap mid-bar. */
    .menu-wrapper .main-menu {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .menu-wrapper .main-menu::-webkit-scrollbar { display: none; }

    /* Shell: one width for every variant, capped to the viewport. The
       desktop range's per-variant widths are all overridden back to this. */
    .mm-dropdown,
    .menu-wrapper .mega-menu.mm-dropdown,
    .mm-dropdown--with-panel,
    .mm-dropdown--no-sub,
    .mm-dropdown--no-sub.mm-dropdown--with-panel,
    .mm-dropdown:not(.mm-dropdown--with-panel),
    .menu-wrapper .mega-menu.mm-dropdown--no-sub.mm-dropdown--with-panel {
        width: 700px;
        max-width: 94vw;
        padding: 16px;
    }

    /* Two columns: rail + subcategories. */
    .mm-panes,
    .mm-dropdown:not(.mm-dropdown--with-panel) .mm-panes,
    .mm-dropdown--no-sub.mm-dropdown--with-panel .mm-panes {
        grid-template-columns: 240px minmax(0, 1fr);
        row-gap: 4px;
    }

    /* --no-sub: no subcategory column; rail spans the row, promo still
       drops below. */
    .mm-dropdown--no-sub .mm-panes,
    .menu-wrapper .mega-menu.mm-dropdown--no-sub .mm-panes {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Re-enable the promo panel (display:none from 1140px down) and give it
       the full width beneath the two columns. */
    .mm-aside {
        display: block;
        grid-column: 1 / -1;
        min-width: 0;
        margin-top: 4px;
        padding-left: 0;
        padding-top: 16px;
        border-top: 1px solid var(--mm-line);
    }

    /* Panel is now wide-and-short rather than tall-and-narrow. */
    .mm-panel-stack { min-height: 200px; }

    .mm-panel-card,
    .mm-aside .mm-panel-card {
        grid-template-columns: minmax(0, 1fr) 200px;
        padding: 24px;
    }

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

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

    /* Touch targets. */
    .mm-rail-link { padding: 14px; min-height: 52px; }
    .mm-sub       { padding: 8px 20px; }
    .mm-sub-link  { padding: 13px 0; min-height: 48px; }
    .mm-view-all  { min-height: 48px; }
}

/* ==================================================================
   MOBILE (<768px) — full-screen drill-down drawer

   Root shows the top-level categories. Selecting one pushes a sub-panel
   in from the right holding that category's subcategories, a "View All"
   link, and its promotional banner(s) as a swipeable (scroll-snap)
   carousel. All class names here are NEW — they do not touch the theme's
   own .mob-* base styles (mob-body, mob-list, mob-item, mob-row, ...).
   ================================================================== */
@media (max-width: 767px) {

    /* Body becomes the positioning context and clips the sliding panels. */
    .mob-body.mob-body--drill {
        position: relative;
        overflow: hidden;
        padding: 0;
    }

    /* Root list and each sub-panel are absolute, full-height scrollers. */
    .mob-pane--root {
        position: absolute;
        inset: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        transition: transform 280ms ease, opacity 280ms ease;
    }

    /* Nudged back while a sub-panel is open, for depth. */
    .mob-pane--root.is-pushed {
        transform: translateX(-18%);
        opacity: 0.35;
        pointer-events: none;
    }

    .mob-subpanel {
        position: absolute;
        inset: 0;
        z-index: 5;
        display: flex;
        flex-direction: column;
        background: #fff;
    }

    /* Slide, driven by the Alpine x-transition classes on the element. */
    .mob-slide-enter,
    .mob-slide-leave {
        transition: transform 280ms ease;
        will-change: transform;
    }
    .mob-slide-from { transform: translateX(100%); }
    .mob-slide-to   { transform: translateX(0); }

    .mob-subpanel-head {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 0 0 auto;
        padding: 14px 12px;
        border-bottom: 1px solid #e8edf5;
        background: #fff;
    }

    .mob-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: #f4f7fc;
        color: #1d4ed8;
        cursor: pointer;
    }
    .mob-back svg { width: 22px; height: 22px; }

    .mob-subpanel-title {
        font-size: 17px;
        font-weight: 700;
        color: #0f172a;
    }

    .mob-subpanel-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 8px 0 28px;
    }

    /* Vertical subcategory list — large tap rows. */
    .mob-sub-vertical { margin: 0; padding: 0; list-style: none; }
    .mob-sub-vertical > li { border-bottom: 1px solid #f1f5f9; }
    .mob-sub-vertical a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 52px;
        padding: 14px 16px;
        color: #334155;
        font-size: 16px;
        text-decoration: none;
    }
    .mob-sub-vertical a:active { background: #f4f7fc; }
    .mob-sub-vertical svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.5; }

    /* View All. */
    .mob-viewall {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 14px 16px 0;
        min-height: 50px;
        padding: 13px 16px;
        border-radius: 12px;
        background: #eaf1ff;
        color: #1d4ed8;
        font-size: 16px;
        font-weight: 600;
        text-decoration: none;
    }
    .mob-viewall svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* Promotional banner(s). One = full width; several = a horizontal,
       swipeable, scroll-snapping carousel. */
    .mob-promo { margin-top: 22px; padding: 0 16px; }
    .mob-promo-label {
        margin: 0 0 10px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: #64748b;
    }
    .mob-promo-carousel {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .mob-promo-carousel::-webkit-scrollbar { display: none; }

    .mob-promo-card {
        position: relative;
        flex: 0 0 84%;
        scroll-snap-align: center;
        display: block;
        border-radius: 14px;
        overflow: hidden;
        background: linear-gradient(150deg, #eef4ff, #f8fbff);
        text-decoration: none;
    }
    /* A lone banner fills the width rather than leaving a peek gap. */
    .mob-promo-card:first-child:last-child { flex-basis: 100%; }

    .mob-promo-card img {
        display: block;
        width: 100%;
        height: 150px;
        object-fit: contain;
        background: #fff;
    }
    .mob-promo-card-body { padding: 12px 14px 14px; }
    .mob-promo-card-badge {
        display: inline-block;
        margin-bottom: 6px;
        padding: 3px 8px;
        border-radius: 5px;
        background: #eaf1ff;
        color: #1d4ed8;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
    }
    .mob-promo-card-title {
        margin: 0 0 4px;
        font-size: 16px;
        font-weight: 700;
        line-height: 1.25;
        color: #0f172a;
    }
    .mob-promo-card-cta {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-top: 6px;
        color: #1d4ed8;
        font-size: 14px;
        font-weight: 600;
    }
    .mob-promo-card-cta svg { width: 15px; height: 15px; }

    .mob-promo-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 10px;
    }
    .mob-promo-dots span {
        width: 6px;
        height: 6px;
        border-radius: 9999px;
        background: #cbd5e1;
    }
    .mob-promo-dots--single { display: none; }
}