/* ============================================================
   OptionSoft Mobile Menu — modern neumorphic ("soft UI") layout.
   Design language mirrors the OTI.WebMenu site: soft gradient
   background, raised/inset shadows for depth, pill radii, and the
   Roboto / Roboto Condensed type pairing. No absolute positioning.
   Accent stays OptionSoft blue; override per dealer via .theme-*.
   ============================================================ */

:root {
    /* Accent — Apple system blue */
    --mm-primary: #0071e3;
    --mm-primary-dark: #0058b9;
    --mm-primary-rgb: 0, 113, 227;
    --mm-red: #ff3b30;
    --mm-green: #34c759;

    /* Surfaces & text — Apple neutral palette */
    --mm-bg-from: #eef0f4;
    --mm-bg-to: #e1e5ec;
    --mm-surface: #e9ebf0;          /* neumorphic base for backup panels */
    --mm-card: #f1f2f5;
    --mm-bar: #15161a;              /* dark navbar */
    --mm-text: #1d1d1f;
    --mm-muted: #6e6e73;
    --mm-line: rgba(60, 60, 67, .12);

    /* Neumorphic shadow tokens (light source: top-left) */
    --mm-depth: rgba(163, 177, 198, .55);
    --mm-shadow-soft: 3px 3px 8px var(--mm-depth), -3px -3px 8px #ffffff;
    --mm-shadow-raised: 5px 5px 12px var(--mm-depth), -5px -5px 12px #ffffff;
    --mm-shadow-raised-lg: 9px 9px 22px var(--mm-depth), -9px -9px 22px #ffffff;
    --mm-shadow-inset: inset 4px 4px 8px rgba(136, 165, 191, .5), inset -4px -4px 8px #ffffff;
    --mm-shadow-primary: 4px 4px 10px rgba(var(--mm-primary-rgb), .4), -4px -4px 10px #ffffff;
    --mm-shadow: var(--mm-shadow-soft);

    /* Radius scale */
    --mm-radius-sm: 12px;
    --mm-radius: 18px;
    --mm-radius-lg: 24px;
    --mm-radius-pill: 999px;

    /* Bento tokens — layered, deeper elevation */
    --mm-tile-border: #e8e8ed;
    --mm-tint: rgba(var(--mm-primary-rgb), .10);
    --mm-card-bg: #ffffff;          /* tiles / cards / buttons */
    --mm-track: #eceef2;            /* segmented track, toggle off */
    --mm-knob: #ffffff;             /* toggle knob */
    --mm-elev-1: 0 2px 4px rgba(20,28,46,.06), 0 10px 24px rgba(20,28,46,.10);
    --mm-elev-2: 0 4px 10px rgba(20,28,46,.10), 0 18px 40px rgba(20,28,46,.16);
    --mm-elev-3: 0 10px 22px rgba(20,28,46,.12), 0 34px 64px rgba(20,28,46,.22);
    --mm-elev-primary: 0 8px 22px rgba(var(--mm-primary-rgb), .42);

    /* Accent palette */
    --mm-c-blue: #0071e3;
    --mm-c-green: #34c759;
    --mm-c-indigo: #5e5ce6;
    --mm-c-cyan: #32ade6;
    --mm-c-orange: #ff9500;
    --mm-c-purple: #af52de;
    --mm-c-pink: #ff2d55;
    --mm-c-gold: #d99a00;
    --mm-c-bronze: #c0793a;
    --mm-c-silver: #8a8a90;

    --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}

/* Per-dealer theme examples. */
.theme-gogocar { --mm-primary: #e4002b; --mm-primary-dark: #b80023; --mm-primary-rgb: 228, 0, 43; }

/* ---------- Dark mode ---------- */
:root.mm-dark {
    --mm-bg-from: #16181c; --mm-bg-to: #0c0d10;
    --mm-card-bg: #1e2127; --mm-card: #23262d; --mm-surface: #23262d;
    --mm-text: #f2f3f6; --mm-muted: #a0a6b0;
    --mm-line: rgba(255, 255, 255, .10);
    --mm-tile-border: #2c2f37;
    --mm-track: #2d313a; --mm-knob: #e8eaee;
    --mm-elev-1: 0 2px 4px rgba(0,0,0,.40), 0 10px 24px rgba(0,0,0,.50);
    --mm-elev-2: 0 4px 10px rgba(0,0,0,.50), 0 18px 40px rgba(0,0,0,.62);
    --mm-elev-3: 0 10px 22px rgba(0,0,0,.55), 0 34px 64px rgba(0,0,0,.72);
}
:root.mm-dark .mm-bseg i,
:root.mm-dark .mm-dot { background: #3a3f49; }
:root.mm-dark .mm-gauge__track { stroke: #3a3f49; }

/* ---------- Site-wide loader ---------- */
.mm-loader { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.3rem; background: linear-gradient(135deg, #1b1e24, #0c0d10); }
.mm-loader__logo { height: 46px; width: auto; }
.mm-loader__msg { color: rgba(255, 255, 255, .7); font-size: .95rem; }
.mm-spinner--lg { width: 46px; height: 46px; border-width: 4px; }

/* Full-screen overlay while a whole-package / custom selection is applied */
.mm-siteloader { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: rgba(18, 20, 26, .38); backdrop-filter: blur(2px); }

.mm-topbar__divider { width: 1px; height: 24px; background: rgba(255,255,255,.18); margin: 0 .2rem; }
.mm-topbar__spacer { flex: 0 0 auto; width: 120px; }

* { box-sizing: border-box; }

html, body { min-height: 100%; }
body {
    margin: 0;
    background: linear-gradient(135deg, var(--mm-bg-from), var(--mm-bg-to)) fixed;
    color: var(--mm-text);
    font-family: var(--font-body);
}

h1, h2, .mm-stage__title, .mm-pkgcol__title, .mm-carousel__head h2,
.mm-selected__head h2, .mm-modal__head h2, .mm-survey__qtext, .mm-logo {
    font-family: var(--font-heading);
}

/* ---------- Buttons ---------- */
.mm-btn {
    appearance: none;
    border: none;
    background: var(--mm-surface);
    color: var(--mm-text);
    border-radius: var(--mm-radius-pill);
    padding: .65rem 1.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: .9rem;
    letter-spacing: .3px;
    cursor: pointer;
    box-shadow: var(--mm-shadow-raised);
    transition: box-shadow .2s ease, transform .08s ease, background .15s ease;
}
.mm-btn:hover { box-shadow: var(--mm-shadow-soft); }
.mm-btn:active { box-shadow: var(--mm-shadow-inset); transform: translateY(1px); }
.mm-btn--primary { background: var(--mm-primary); color: #fff; box-shadow: var(--mm-shadow-primary); }
.mm-btn--primary:hover { background: var(--mm-primary-dark); box-shadow: var(--mm-shadow-soft); }
.mm-btn--muted { background: #535d74; color: #fff; }
.mm-btn--block { display: block; width: 100%; }
.mm-btn--pill { padding: .45rem 1.2rem; font-size: .82rem; }
.mm-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: var(--mm-shadow-soft); }

/* ---------- Launcher ---------- */
.mm-launcher { max-width: 720px; margin: 4rem auto; padding: 2rem; background: var(--mm-surface); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-raised-lg); }
.mm-launcher__links { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.mm-launcher__form { display: flex; gap: .6rem; margin: 1.5rem 0 1rem; }
.mm-launcher__hint { color: var(--mm-muted); font-size: .85rem; }
.mm-input {
    flex: 1; max-width: 320px; padding: .7rem 1rem; border: none; border-radius: var(--mm-radius-sm);
    background: var(--mm-surface); box-shadow: var(--mm-shadow-inset); font-size: 1rem; color: var(--mm-text);
}
.mm-input:focus { outline: none; box-shadow: var(--mm-shadow-inset), 0 0 0 2px rgba(var(--mm-primary-rgb), .35); }

.mm-loading { padding: 4rem; text-align: center; color: var(--mm-muted); font-size: 1.1rem; }
.mm-loaderror { padding: 3rem 1.5rem; text-align: center; max-width: 560px; margin: 2rem auto; background: var(--mm-surface); border-radius: var(--mm-radius-lg); box-shadow: var(--mm-shadow-raised-lg); }
.mm-loaderror h2 { margin-bottom: .5rem; }
.mm-loaderror__queue { color: var(--mm-muted); margin: 1rem 0 1.5rem; }
.mm-banner { background: #fff4d6; color: #6b5300; padding: .55rem 1rem; text-align: center; font-size: .85rem; box-shadow: var(--mm-shadow-soft); }

/* ---------- Shell ---------- */
.mm-shell { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

/* ---------- Top bar ---------- */
.mm-topbar {
    display: flex; align-items: center; gap: 1rem;
    background: var(--mm-bar); color: #fff; padding: .7rem 1.4rem;
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
}
.mm-topbar__brand { flex: 0 0 auto; }
.mm-logo { font-size: 1.45rem; letter-spacing: .06em; color: #fff; font-weight: 400; }
.mm-logo strong { font-weight: 700; }
.mm-logo-img { height: 30px; width: auto; display: block; }
.mm-topbar__pill {
    flex: 1 1 auto; text-align: center; background: var(--mm-primary); color: #fff;
    border: none; cursor: pointer; font-family: inherit;
    border-radius: var(--mm-radius-pill); padding: .5rem 1.4rem; font-weight: 500; font-size: .95rem;
    max-width: max-content; margin: 0 auto; box-shadow: var(--mm-elev-primary);
    transition: filter .15s ease;
}
.mm-topbar__pill:hover { filter: brightness(1.08); }
.mm-topbar__sep { opacity: .55; margin: 0 .4rem; }
.mm-topbar__actions { flex: 0 0 auto; display: flex; gap: .4rem; }

/* Compact term switcher inside the top bar */
.mm-termnav { display: inline-flex; gap: 2px; background: rgba(255,255,255,.14); border-radius: 999px; padding: 3px; }
.mm-termnav__btn { border: none; background: transparent; color: #fff; font: inherit; font-size: .8rem; font-weight: 700; border-radius: 999px; padding: .3rem .7rem; cursor: pointer; white-space: nowrap; transition: background .15s, color .15s; }
.mm-termnav__btn.is-active { background: var(--mm-primary); box-shadow: var(--mm-elev-1); }
.mm-termnav__btn:hover:not(.is-active):not(:disabled) { background: rgba(255,255,255,.12); }
.mm-termnav__btn:disabled { cursor: default; opacity: .6; }
.mm-viewtoggle {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.75); border-radius: 10px; width: 36px; height: 36px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s;
}
.mm-viewtoggle:hover { background: rgba(255,255,255,.16); color: #fff; }
.mm-viewtoggle.is-active { background: var(--mm-primary); border-color: transparent; color: #fff; box-shadow: 0 2px 10px rgba(var(--mm-primary-rgb),.5); }

/* ---------- Panels ---------- */
.mm-panel {
    background: var(--mm-surface); border: none; border-radius: var(--mm-radius-lg);
    box-shadow: var(--mm-shadow-raised-lg); display: flex; flex-direction: column;
}
.mm-panel__foot { margin-top: auto; padding: 1rem; border-top: 1px solid var(--mm-line); }
.mm-panel__total { font-size: .95rem; margin-bottom: .7rem; }

/* ---------- Showcase layout ---------- */
.mm-showcase {
    flex: 1; display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); /* three equal thirds */
    gap: 2rem; padding: 1.75rem 2rem; align-items: stretch;             /* panels match height */
}
.mm-carousel { padding: 1.35rem; gap: .85rem; max-height: calc(100dvh - 96px); }
.mm-carousel__head { display: flex; align-items: center; justify-content: space-between; }
.mm-carousel__head h2 { font-size: 1.4rem; margin: 0; letter-spacing: .05em; font-weight: 700; }
.mm-navbtn {
    border: none; background: var(--mm-surface); border-radius: 50%; width: 40px; height: 40px;
    font-size: 1.2rem; cursor: pointer; line-height: 1; color: var(--mm-text); box-shadow: var(--mm-shadow-raised);
}
.mm-navbtn:hover:not(:disabled) { box-shadow: var(--mm-shadow-soft); }
.mm-navbtn:active:not(:disabled) { box-shadow: var(--mm-shadow-inset); }
.mm-navbtn:disabled { opacity: .35; cursor: default; }
.mm-carousel__dots { display: flex; gap: .4rem; justify-content: center; }
.mm-dot { width: 9px; height: 9px; border-radius: 50%; background: #c3c8d0; cursor: pointer; box-shadow: var(--mm-shadow-inset); }
.mm-dot.is-active { background: var(--mm-primary); box-shadow: none; }
.mm-carousel__products { display: flex; flex-direction: column; gap: .6rem; overflow-y: auto; padding: .3rem .6rem; }

/* ---------- Stage (center) ---------- */
.mm-stage { display: flex; flex-direction: column; align-items: center; gap: 1.4rem; padding-top: .5rem; }
.mm-stage__title { font-size: 2.4rem; font-weight: 700; margin: 0; letter-spacing: .01em; }
.mm-stage__car { width: min(520px, 80%); color: #3a4250; filter: drop-shadow(8px 12px 16px rgba(70,85,110,.35)); }
.mm-stage__car img { width: 100%; height: auto; }
.mm-car { width: 100%; height: auto; }
.mm-instructions {
    background: var(--mm-surface); border: none; border-radius: var(--mm-radius-lg);
    padding: 1.4rem 1.6rem; max-width: 660px; box-shadow: var(--mm-shadow-raised-lg);
}
.mm-instructions__title { text-align: center; font-weight: 700; margin: 0 0 .9rem; }
.mm-instructions ol { margin: 0; padding-left: 1.2rem; line-height: 1.7; color: #2a2f36; }

/* ---------- Selected column ---------- */
.mm-selected {
    background: var(--mm-surface); border: none; border-radius: var(--mm-radius-lg);
    box-shadow: var(--mm-shadow-raised-lg), inset 0 0 0 2px rgba(var(--mm-primary-rgb), .35);
    display: flex; flex-direction: column; max-height: calc(100dvh - 96px);
    transition: box-shadow .15s ease, background .15s ease;
}
.mm-selected.is-dragover { background: #e6f1f8; box-shadow: var(--mm-shadow-raised-lg), inset 0 0 0 3px var(--mm-primary); }
.mm-selected.is-dragover .mm-selected__list { pointer-events: none; }
.mm-selected__head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.1rem .35rem; }
.mm-selected__head h2 { margin: 0; letter-spacing: .06em; font-weight: 700; }
.mm-selected__list { padding: .85rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; overflow-y: auto; flex: 1; }
.mm-selected__empty { color: var(--mm-muted); text-align: center; margin: 2rem 0; }
.mm-selected__total { padding: .85rem 1.1rem; border-top: 1px solid var(--mm-line); }
.mm-selected__actions { display: flex; gap: .6rem; padding: 1rem 1.1rem; }
.mm-selected__actions .mm-btn { flex: 1; }
.mm-selected { position: relative; }
.mm-selected__loader {
    position: absolute; inset: 0; z-index: 6;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
    background: rgba(233, 235, 240, .72); backdrop-filter: blur(1px);
    border-radius: var(--mm-radius-lg); color: var(--mm-muted); font-weight: 600; font-size: .85rem;
}

/* Spinner */
.mm-spinner {
    width: 26px; height: 26px; border-radius: 50%; display: inline-block;
    border: 3px solid rgba(var(--mm-primary-rgb), .25); border-top-color: var(--mm-primary);
    animation: mm-spin .7s linear infinite;
}
.mm-spinner--sm { width: 15px; height: 15px; border-width: 2px; }
@keyframes mm-spin { to { transform: rotate(360deg); } }

/* ---------- Product card ---------- */
.mm-prow { display: flex; align-items: center; gap: .55rem; }
.mm-product {
    position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 74px;
    background: var(--mm-card); border: none; border-radius: var(--mm-radius);
    box-shadow: var(--mm-shadow-raised); padding: .6rem 1.15rem .55rem; overflow: hidden;
    transition: box-shadow .2s ease;
}
.mm-product:hover { box-shadow: var(--mm-shadow-raised-lg); }
.mm-product--draggable { cursor: grab; }
.mm-product--draggable:active { cursor: grabbing; }
.mm-prow.is-selected .mm-product { box-shadow: var(--mm-shadow-soft), 0 0 0 2px var(--mm-primary); }

/* Faint vehicle watermark */
.mm-product__bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    display: flex; align-items: flex-end; justify-content: flex-end; opacity: .08; color: #2f3742;
}
.mm-product__bg .mm-car { width: 64%; height: auto; transform: translate(12%, 18%); }

/* Red YouTube-style play button, top-right */
.mm-product__play {
    position: absolute; top: .5rem; right: .5rem; z-index: 2;
    width: 30px; height: 21px; border: 0; border-radius: 6px; cursor: pointer;
    background: #ff0000; box-shadow: 0 2px 5px rgba(214,0,0,.5);
    display: flex; align-items: center; justify-content: center; transition: transform .1s;
}
.mm-product__play:hover { transform: scale(1.06); }
.mm-product__play:active { transform: scale(.96); }
.mm-product__playicon { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent #fff; }

.mm-product__name { position: relative; z-index: 1; font-weight: 700; font-size: .95rem; color: var(--mm-text); line-height: 1.2; padding-right: 42px; }
.mm-product__desc {
    position: relative; z-index: 1; font-size: .75rem; color: var(--mm-muted); line-height: 1.35; margin-top: .25rem; max-width: 94%;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mm-product__price { position: relative; z-index: 1; align-self: flex-end; margin-top: auto; padding-top: .4rem; font-weight: 700; font-size: .82rem; color: var(--mm-text); white-space: nowrap; }

/* +/✓/✕ action gutter */
.mm-prow__action { flex: 0 0 auto; display: flex; align-items: center; }
.mm-iconbtn {
    width: 38px; height: 38px; border-radius: 50%; border: none;
    background: var(--mm-surface); color: var(--mm-primary); font-size: 1.2rem; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--mm-shadow-raised); transition: box-shadow .2s, transform .08s;
}
.mm-iconbtn:hover { box-shadow: var(--mm-shadow-soft); }
.mm-iconbtn:active { box-shadow: var(--mm-shadow-inset); transform: translateY(1px); }
.mm-iconbtn--in { background: var(--mm-primary); color: #fff; box-shadow: var(--mm-shadow-primary); }
.mm-iconbtn--remove { color: var(--mm-red); }
/* Dealer-locked product: shown as included, not interactive (can't be removed). */
.mm-iconbtn--locked { background: var(--mm-primary); color: #fff; box-shadow: var(--mm-shadow-primary); cursor: default; opacity: .75; }

/* ---------- Coverage gauge ---------- */
.mm-gauge { position: relative; width: 80px; height: 80px; text-align: center; }
.mm-gauge__svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.mm-gauge__track { fill: none; stroke: #d7dade; stroke-width: 8; }
.mm-gauge__bar { fill: none; stroke-width: 8; stroke-linecap: round; transition: stroke-dasharray .4s ease; }
.mm-gauge__value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .9rem; }
.mm-gauge__label { font-size: .5rem; font-weight: 700; letter-spacing: .04em; margin-top: 2px; }
.coverage-none   .mm-gauge__bar { stroke: #d11d2c; } .coverage-none   .mm-gauge__label { color: #d11d2c; }
.coverage-low    .mm-gauge__bar { stroke: #e8821e; } .coverage-low    .mm-gauge__label { color: #e8821e; }
.coverage-moderate .mm-gauge__bar { stroke: #d4af1e; } .coverage-moderate .mm-gauge__label { color: #b8950f; }
.coverage-high   .mm-gauge__bar { stroke: #6abf3e; } .coverage-high   .mm-gauge__label { color: #559b2e; }
.coverage-full   .mm-gauge__bar { stroke: #36a832; } .coverage-full   .mm-gauge__label { color: #2c8a29; }

/* ---------- Column view ---------- */
.mm-columns { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(300px, 360px); gap: 1.1rem; padding: 1rem 1.5rem 1.25rem; overflow-y: auto; overflow-x: hidden; align-items: stretch; }
.mm-colcard {
    min-width: 0; min-height: 0; overflow: hidden;
    padding: 0; background: var(--mm-card-bg); box-shadow: var(--mm-elev-2);
}
.mm-colcard__head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: .9rem 1.15rem; background: var(--tier, var(--mm-primary)); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--tier, var(--mm-primary)) 42%, transparent); }
.mm-colcard__name { font-size: 1.25rem; font-weight: 700; color: #fff; }
.mm-colcard__price { font-weight: 700; font-size: 1.05rem; white-space: nowrap; color: #fff; }
.mm-colcard__price .mm-btile__mut { color: rgba(255, 255, 255, .82); }
.mm-colcard__term { position: relative; z-index: 1; padding: .45rem 1.15rem; font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--mm-muted); background: color-mix(in srgb, var(--tier, var(--mm-primary)) 10%, transparent); border-bottom: 1px solid var(--mm-border); }
.mm-colcard .mm-plist { flex: 1; padding: .8rem .8rem 0; }
.mm-colcard .mm-colcard__select { margin: .8rem; width: auto; }
.mm-columns .mm-bsel { min-width: 0; }
/* Upsell: Selected column on the left, then the upgrade tiers — all columns equal width. */
.mm-columns--upsell { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }

/* Two/Three Term: a thin Select button per term (stacked in Column view, side by side in Bento).
   The preferred (longer) term is the primary; the rest are secondary. */
.mm-termbtns { display: flex; gap: .5rem; }
.mm-termbtns--stack { flex-direction: column; margin: .8rem; }
.mm-termbtns--row { flex: 1; flex-direction: row; flex-wrap: wrap; }
.mm-termbtns--row > .mm-termbtn { flex: 1; }
.mm-termbtn { border: none; border-radius: 999px; padding: .42rem .8rem; font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter .15s ease, box-shadow .15s ease; }
.mm-termbtn--primary { background: var(--mm-primary); color: #fff; box-shadow: var(--mm-elev-primary); }
.mm-termbtn--secondary { background: var(--mm-card-bg); color: var(--mm-primary); box-shadow: var(--mm-elev-1); }
.mm-termbtn:hover:not(:disabled) { filter: brightness(1.06); }
.mm-termbtn:disabled { opacity: .55; cursor: default; }

/* Column view responsiveness: 4-up (wide) → 2-up + Selected full-width bottom → 1-up. */
@media (max-width: 1600px) {
    .mm-columns { grid-template-columns: 1fr 1fr; }
    .mm-columns .mm-bsel { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .mm-columns { grid-template-columns: 1fr; }
}

/* Tiered: package tiers only (no Selected/bsel panel), so the grid spans the full width across the
   packages — no reserved right-hand column. */
.mm-columns--tiered { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
@media (max-width: 1200px) { .mm-columns--tiered { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .mm-columns--tiered { grid-template-columns: 1fr; } }

/* ---------- Modal ---------- */
.mm-modal-backdrop { position: fixed; inset: 0; background: rgba(20,22,26,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 1.5rem; z-index: 1000; }
.mm-modal { background: var(--mm-surface); border-radius: var(--mm-radius-lg); box-shadow: 0 24px 70px rgba(0,0,0,.4); width: min(1100px, 100%); max-height: 90dvh; overflow: auto; padding: 1.5rem 2rem 2rem; }
.mm-modal__head { text-align: center; border-bottom: 1px solid var(--mm-line); padding-bottom: 1rem; }
.mm-modal__head h2 { margin: 0; letter-spacing: .08em; font-weight: 700; }
.mm-modal__foot { display: flex; justify-content: flex-end; gap: .6rem; padding-top: 1rem; }
.mm-compare__intro { color: #3a3f47; margin: 1rem 0 1.25rem; }
.mm-compare__grid { display: grid; grid-template-columns: minmax(340px, 3fr) repeat(var(--cols), minmax(58px, .7fr)); gap: .15rem 1rem; align-items: center; }
.mm-compare__colhead { text-align: center; font-weight: 800; font-size: .8rem; letter-spacing: .04em; }
.mm-compare__rowhead { padding: .3rem 0; }
.mm-compare__pname { font-weight: 800; color: var(--mm-primary); font-size: .92rem; }
.mm-compare__pdesc { font-size: .74rem; color: var(--mm-muted); line-height: 1.3; }
.mm-compare__pdesc strong { color: var(--mm-text); }
.mm-compare__cell { text-align: center; }
.mm-compare__rowhead--total { font-weight: 800; }
.mm-compare__price { font-weight: 700; }
.mm-check { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: var(--mm-primary); color: #fff; font-size: .8rem; box-shadow: var(--mm-shadow-soft); }
.mm-check--off { background: var(--mm-surface); color: transparent; box-shadow: var(--mm-shadow-inset); }
.mm-compare__cell input[type=checkbox] { width: 20px; height: 20px; }

/* ---------- Two Term comparison ---------- */
.mm-twoterm__cards { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: 1rem; margin: 1rem 0 .5rem; }
.mm-twoterm__card { border: 1px solid var(--mm-line); border-radius: var(--mm-radius-lg); padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; background: var(--mm-surface); box-shadow: var(--mm-shadow-soft); }
.mm-twoterm__card--sel { border-color: var(--mm-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--mm-primary) 35%, transparent); }
.mm-twoterm__term { font-weight: 800; font-size: 1.35rem; color: var(--mm-text); }
.mm-twoterm__apr { color: var(--mm-muted); font-size: .82rem; letter-spacing: .03em; }
.mm-twoterm__pay { font-weight: 800; font-size: 2rem; color: var(--mm-primary); line-height: 1.1; margin-top: .35rem; }
.mm-twoterm__paycap { color: var(--mm-muted); font-size: .76rem; }
.mm-twoterm__pkgs { list-style: none; margin: .5rem 0 0; padding: .75rem 0 0; border-top: 1px solid var(--mm-line); display: flex; flex-direction: column; gap: .3rem; }
.mm-twoterm__pkg { display: flex; justify-content: space-between; font-size: .8rem; color: var(--mm-text); }
.mm-twoterm__pkg span:last-child { font-weight: 700; color: var(--mm-primary); }
.mm-twoterm__choose { margin-top: auto; }
.mm-twoterm__badge { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mm-primary); }
@media (max-width: 640px) { .mm-twoterm__cards { grid-template-columns: 1fr; } }

/* ---------- Term Print (read-only per-product breakdown across terms) ---------- */
/* Full-screen branded loader (covers the top bar) while terms price, to avoid a chrome flicker. */
.mm-tp-loading { position: fixed; inset: 0; z-index: 4000; }
.mm-termprint { padding: 1rem clamp(.75rem, 3vw, 2rem) 2rem; }
.mm-termprint__intro { color: var(--mm-muted); max-width: 70ch; margin: .25rem auto 1.25rem; text-align: center; }
.mm-termprint__grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1rem; }
.mm-tpcard { display: flex; flex-direction: column; background: var(--mm-card-bg); border: none; border-radius: var(--mm-radius-lg); padding: 0; overflow: hidden; box-shadow: var(--mm-elev-2); }
.mm-tpcard--sel { outline: 2px solid var(--mm-primary); outline-offset: -1px; }
.mm-tpcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: .9rem 1.15rem; background: var(--tier, var(--mm-primary)); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--tier, var(--mm-primary)) 42%, transparent); }
.mm-tpcard__term { font-weight: 700; font-size: 1.2rem; color: #fff; }
.mm-tpcard__hprice { font-weight: 700; font-size: 1.05rem; white-space: nowrap; color: #fff; }
.mm-tpcard__sub { padding: .45rem 1.15rem; font-size: .8rem; font-weight: 600; letter-spacing: .01em; color: var(--mm-muted); background: color-mix(in srgb, var(--tier, var(--mm-primary)) 10%, transparent); border-bottom: 1px solid var(--mm-border); }
.mm-tpcard__products { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: .8rem .8rem 0; }
.mm-tpcard__products .mm-prow2--static { cursor: default; }
.mm-tpcard__products .mm-prow2--static:hover { transform: none; }
.mm-tpcard__pprice { font-weight: 700; font-size: .82rem; color: var(--mm-text); white-space: nowrap; }
.mm-tpcard__select { margin: .8rem; width: auto; }
.mm-termprint__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; max-width: 900px; margin: 1.25rem auto 0; }
.mm-termprint__chosen { color: var(--mm-text); }
@media (max-width: 720px) { .mm-termprint__grid { grid-template-columns: 1fr; } }

/* ---------- Submit modal ---------- */
.mm-submit__intro { text-align: center; color: #3a3f47; margin: 1rem 0 1.25rem; }
.mm-submit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 2rem; }
.mm-submit__sect { color: var(--mm-text); border-bottom: 1px solid var(--mm-line); padding-bottom: .35rem; margin: 0 0 .5rem; letter-spacing: .04em; }
.mm-submit__sect--forfeit { color: #c0392b; }

/* Discount disclosure (DiscloseDiscounts): struck-through pre-discount price + saving %. */
.mm-disc__pre { text-decoration: line-through; opacity: .55; font-weight: 400; margin-right: .35em; }
.mm-disc__pct { color: #16a34a; font-weight: 700; margin-right: .35em; }
.mm-bpkg__disc { text-align: center; font-size: .8rem; margin-bottom: .4rem; }

/* Selected Options print — two columns: chosen (Selected) | declined (Forfeited). */
.mm-selopts { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: 1.75rem; padding: 1.5rem clamp(1rem, 3vw, 2.25rem) 1.75rem; width: 100%; max-width: 1500px; margin-inline: auto; }
.mm-selopts__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; align-items: start; }
.mm-btile.mm-selopts__col { display: flex; flex-direction: column; gap: 0; padding: 0; overflow: hidden; }
.mm-selopts__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: .85rem 1.15rem; letter-spacing: .03em; font-size: 1rem; font-weight: 700; color: #fff; }
.mm-selopts__head--sel { background: #16a34a; box-shadow: 0 6px 14px color-mix(in srgb, #16a34a 40%, transparent); }
.mm-selopts__head--forfeit { background: #c0392b; box-shadow: 0 6px 14px color-mix(in srgb, #c0392b 40%, transparent); }
.mm-selopts__headinfo { font-weight: 700; font-size: .9rem; opacity: .92; }
.mm-selopts__sub { padding: .45rem 1.15rem; font-size: .8rem; font-weight: 600; color: var(--mm-muted); border-bottom: 1px solid var(--mm-border); }
.mm-selopts__sub--sel { background: color-mix(in srgb, #16a34a 10%, transparent); }
.mm-selopts__sub--forfeit { background: color-mix(in srgb, #c0392b 10%, transparent); }
.mm-selopts__list { display: flex; flex-direction: column; gap: .85rem; padding: .85rem; }
.mm-selopts__foot { display: flex; flex-direction: column; align-items: center; gap: .85rem; margin-top: .5rem; padding-top: 1.25rem; border-top: 1px solid var(--mm-line); text-align: center; }
.mm-selopts__totalrow { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }
.mm-selopts__total { color: var(--mm-primary); font-weight: 800; font-size: 1.1rem; }
.mm-selopts__submit { width: 50%; }
@media (max-width: 720px) { .mm-selopts__cols { grid-template-columns: 1fr; } .mm-selopts__submit { width: 100%; } }

/* Tiered print — the chosen package card is highlighted. */
.mm-colcard--sel { outline: 2px solid var(--mm-primary); outline-offset: -1px; }
.mm-tiered { display: flex; flex-direction: column; gap: 1rem; }
.mm-submit__row { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; font-size: .85rem; }
.mm-submit__row > span:first-child { flex: 1; min-width: 0; }
.mm-submit__act { width: 26px; height: 26px; border-radius: 50%; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none; font-size: 14px; }
.mm-submit__act--add { background: color-mix(in srgb, var(--mm-primary) 16%, var(--mm-card-bg)); color: var(--mm-primary); }
.mm-submit__act--rm { background: color-mix(in srgb, var(--mm-red) 16%, var(--mm-card-bg)); color: var(--mm-red); }
.mm-submit__act--locked { background: color-mix(in srgb, var(--mm-primary) 16%, var(--mm-card-bg)); color: var(--mm-primary); cursor: default; }
.mm-submit__act:disabled { opacity: .5; cursor: default; }
.mm-submit__pname--in { color: var(--mm-primary); font-weight: 700; }
.mm-submit__pname--out { color: #c0392b; font-weight: 700; }
.mm-submit__pprice { white-space: nowrap; color: var(--mm-primary); font-weight: 600; }
.mm-submit__pprice--out { color: #c0392b; }
.mm-submit__none { color: var(--mm-muted); }
.mm-submit__total { text-align: right; color: var(--mm-primary); font-weight: 800; font-size: 1.1rem; padding: 1rem 0; border-top: 1px solid var(--mm-line); margin-top: 1rem; }
.mm-submit__sign { display: grid; grid-template-columns: 1fr 2fr; gap: 1rem; }
.mm-submit__pad--cobuyer { margin-top: 1rem; }
.mm-submit__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .75rem; }
.mm-submit__check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; }
.mm-submit__consent { font-size: .68rem; color: var(--mm-muted); line-height: 1.45; margin-top: 1rem; }
.mm-submit__error { color: #c0392b; font-weight: 600; text-align: center; margin-top: .75rem; }

.mm-sigpad { display: flex; flex-direction: column; gap: .35rem; }
.mm-sigpad__label { font-weight: 700; font-size: .85rem; letter-spacing: .04em; }
.mm-sigpad__canvas { width: 100%; height: 120px; border: none; border-radius: var(--mm-radius-sm); background: #fff; cursor: crosshair; box-shadow: var(--mm-shadow-inset); }

/* ---------- Confirmation ---------- */
.mm-confirm { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; gap: .5rem; }
.mm-confirm__check { width: 88px; height: 88px; border-radius: 50%; background: var(--mm-green); color: #fff; font-size: 2.6rem; display: flex; align-items: center; justify-content: center; margin-bottom: .5rem; box-shadow: var(--mm-shadow-raised-lg); }
.mm-confirm h1 { margin: 0; }
.mm-confirm__total { color: var(--mm-primary); font-weight: 800; font-size: 1.3rem; }
.mm-confirm__hint { color: var(--mm-muted); }
.mm-confirm__phone { font-weight: 700; }

/* ---------- Document (PDF view / sign) ---------- */
.mm-document { flex: 1; min-height: 0; display: flex; flex-direction: row; gap: 1.25rem; padding: 1.25rem; align-items: stretch; }
.mm-document__pdf { flex: 2; min-width: 0; display: flex; flex-direction: column; gap: .5rem; }
.mm-document__frame { flex: 1; width: 100%; min-height: 0; border: none; border-radius: var(--mm-radius); background: #fff; box-shadow: var(--mm-shadow-raised-lg); }
.mm-document__open { align-self: flex-start; display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: var(--mm-primary); text-decoration: none; }
.mm-document__open:hover { text-decoration: underline; }
.mm-document__side { flex: 1; min-width: 320px; display: flex; flex-direction: column; }
.mm-document__sign { width: 100%; background: var(--mm-surface); border: none; border-radius: var(--mm-radius-lg); padding: 1.1rem; box-shadow: var(--mm-shadow-raised-lg); }
.mm-document__actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: .6rem; }
.mm-document__signed { color: #2c8a29; font-weight: 800; font-size: 1.1rem; }
/* Narrow screens: stack the PDF above the signature. */
@media (max-width: 820px) {
    .mm-document { flex-direction: column; }
    .mm-document__side { width: 100%; min-width: 0; }
    .mm-document__frame { min-height: 60vh; }
}

/* ---------- Survey / questionnaire ---------- */
.mm-survey { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1.5rem; }
.mm-survey__card { width: min(680px, 100%); background: var(--mm-card-bg); border: none; border-radius: var(--mm-radius-lg); box-shadow: var(--mm-elev-2); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.mm-survey__intro { text-align: center; align-items: center; }
.mm-survey__progress { color: var(--mm-muted); font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mm-survey__qtext { margin: 0; font-size: 1.5rem; }
.mm-survey__video { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--mm-radius); background: #000; box-shadow: var(--mm-elev-1); }
.mm-survey__opts { display: flex; flex-direction: column; gap: .7rem; }
.mm-survey__opt { text-align: left; padding: .95rem 1.2rem; border: 1px solid var(--mm-tile-border); background: var(--mm-card-bg); color: var(--mm-text); border-radius: var(--mm-radius); font-size: 1rem; cursor: pointer; box-shadow: var(--mm-elev-1); transition: box-shadow .15s ease, transform .1s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.mm-survey__opt:hover { box-shadow: var(--mm-elev-2); transform: translateY(-1px); border-color: var(--mm-primary); }
.mm-survey__opt.is-on { background: var(--mm-primary); border-color: transparent; color: #fff; box-shadow: var(--mm-elev-primary); }
.mm-survey__rate { display: flex; flex-wrap: wrap; gap: .6rem; }
.mm-survey__ratebtn { width: 54px; height: 54px; border-radius: var(--mm-radius-sm); border: 1px solid var(--mm-tile-border); background: var(--mm-card-bg); color: var(--mm-text); font-size: 1.1rem; font-weight: 700; cursor: pointer; box-shadow: var(--mm-elev-1); transition: box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.mm-survey__ratebtn:hover { background: var(--mm-primary); border-color: transparent; color: #fff; box-shadow: var(--mm-elev-primary); }
.mm-survey__text { width: 100%; min-height: 120px; padding: .9rem; border: 1px solid var(--mm-tile-border); border-radius: var(--mm-radius-sm); font-size: 1rem; resize: vertical; background: var(--mm-card-bg); color: var(--mm-text); }
.mm-survey__text:focus { outline: none; border-color: var(--mm-primary); box-shadow: 0 0 0 3px var(--mm-tint); }

/* ---------- Bento (main view) ---------- */
.mm-bento { flex: 1; min-height: 0; padding: 1rem 1.5rem 1.25rem; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.mm-bento__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.mm-bento__grid--prod { flex: 0 0 auto; grid-template-columns: repeat(var(--prod-cols, 5), minmax(0, 1fr)); }
.mm-bento__label { display: flex; align-items: center; gap: .45rem; font-size: .78rem; color: var(--mm-muted); margin: .9rem .25rem .55rem; font-weight: 600; }

.mm-btile { background: var(--mm-card-bg); border: none; border-radius: var(--mm-radius-lg); padding: 1.1rem 1.25rem; position: relative; display: flex; flex-direction: column; box-shadow: var(--mm-elev-1); transition: box-shadow .25s ease, transform .14s ease; }
.mm-btile--sel { box-shadow: var(--mm-elev-2), 0 0 0 2px var(--mm-primary), 0 0 0 6px var(--mm-tint); }
.mm-btile__mut { color: var(--mm-muted); font-size: .8rem; }

/* Vehicle hero */
.mm-bhero { align-items: center; text-align: center; padding: 1.6rem; gap: .15rem; }
.mm-bhero .mm-car { width: 30%; min-width: 180px; color: #3a4250; }
.mm-bhero__img { max-height: 150px; object-fit: contain; }
.mm-bhero__name { font-size: 1.7rem; font-weight: 700; margin-top: .4rem; }

/* Package panel + Selected rail */
.mm-bmain { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1rem; }
.mm-bpkg { padding: 1rem 1.1rem; align-self: start; }

.mm-seg { display: flex; background: var(--mm-track); border-radius: 999px; padding: 4px; margin-bottom: .5rem; }
.mm-seg button { flex: 1; border: none; background: transparent; border-radius: 999px; padding: .55rem 0; font: inherit; font-size: .9rem; font-weight: 700; color: var(--t, var(--mm-muted)); cursor: pointer; transition: background .15s, color .15s; }
.mm-seg button.on { background: var(--t, var(--mm-primary)); color: #fff; box-shadow: var(--mm-elev-1); }
.mm-seg button:disabled { cursor: default; }

.mm-plist { display: flex; flex-direction: column; gap: .4rem; padding: .15rem; }
.mm-prow2 { display: flex; align-items: center; gap: 11px; padding: .4rem .8rem; border-radius: var(--mm-radius-sm); background: color-mix(in srgb, var(--pc, var(--mm-primary)) 7%, var(--mm-card-bg)); box-shadow: var(--mm-elev-1); cursor: grab; transition: box-shadow .2s ease, transform .1s ease; }
.mm-prow2:hover { box-shadow: var(--mm-elev-2); transform: translateY(-1px); }
.mm-prow2:active { cursor: grabbing; }
.mm-prow2 .mm-btile__mut { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-prow2__body { min-width: 0; }
.mm-bpkg__foot { display: flex; align-items: stretch; gap: .6rem; margin-top: 1.1rem; }
.mm-bpkg__foot .mm-bbtn { margin-top: 0; width: auto; }
.mm-bpkg__compare { flex: 0 0 auto; white-space: nowrap; }
.mm-bpkg__select { flex: 1; }
.mm-bpkg__nav { flex: 0 0 auto; display: flex; gap: .4rem; }
.mm-navbtn2 { width: 46px; border: 1px solid var(--mm-tile-border); background: var(--mm-card-bg); color: var(--mm-text); border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: var(--mm-elev-1); transition: box-shadow .15s ease, border-color .15s ease, transform .08s ease; }
.mm-navbtn2:hover { border-color: var(--mm-primary); box-shadow: var(--mm-elev-2); }
.mm-navbtn2:active { transform: translateY(1px); }

/* Red play button + video modal */
.mm-play { width: 34px; height: 24px; border: 0; border-radius: 6px; background: #ff0000; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(214,0,0,.45); flex: none; transition: transform .1s ease; }
.mm-play:hover { transform: scale(1.08); }
.mm-play__tri { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent #fff; }
.mm-play--corner { position: absolute; bottom: .85rem; right: .95rem; z-index: 2; width: 25px; height: 18px; border-radius: 5px; }
.mm-play--corner .mm-play__tri { border-width: 4px 0 4px 7px; }

.mm-vidmodal { background: #000; border-radius: var(--mm-radius-lg); overflow: hidden; width: min(820px, 100%); box-shadow: 0 24px 70px rgba(0,0,0,.5); }
.mm-vidmodal__head { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1rem; background: #15161a; color: #fff; }
.mm-vidmodal__title { font-weight: 600; }
.mm-vidmodal__close { background: rgba(255,255,255,.12); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.mm-vidmodal__video { display: block; width: 100%; max-height: 70vh; background: #000; }

/* Info + deal-recap modals */
.mm-infomodal, .mm-dealmodal { width: min(560px, 100%); }
.mm-info__lead { color: var(--mm-muted); margin: 1rem 0 .75rem; }
.mm-info__list { margin: 0; padding-left: 1.2rem; line-height: 1.75; }
.mm-info__list li { margin-bottom: .45rem; }
.mm-deal { margin: 1rem 0; }
.mm-deal__row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .95rem; }
.mm-deal__row span { color: var(--mm-muted); }
.mm-deal__row--accent strong, .mm-deal__row--total strong { color: var(--mm-primary); }
.mm-deal__row--total { font-size: 1.1rem; }
.mm-deal__sep { height: 1px; background: var(--mm-line); margin: .5rem 0; }
.mm-prow2__body { flex: 1; min-width: 0; }
.mm-prow2__name { font-weight: 700; font-size: .95rem; }
.mm-bic--sm { width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }

.mm-cart { flex: none; width: 42px; height: 33px; border-radius: 999px; border: 1px solid var(--mm-tile-border); background: var(--mm-card-bg); color: var(--mm-primary); display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; box-shadow: var(--mm-elev-1); transition: box-shadow .15s ease, background .15s ease, color .15s ease, transform .08s ease; }
.mm-cart:hover { box-shadow: var(--mm-elev-2); border-color: var(--mm-primary); }
.mm-cart:active { transform: translateY(1px); }
.mm-cart.is-in { background: var(--mm-primary); border-color: transparent; color: #fff; box-shadow: var(--mm-elev-primary); }
.mm-cart:disabled { opacity: .55; cursor: default; box-shadow: none; }
/* Dealer-locked product: shown as included, not interactive (can't be removed). */
.mm-cart--locked { cursor: default; opacity: .8; }
.mm-cart--locked:hover { box-shadow: var(--mm-elev-primary); border-color: transparent; }

.mm-bsel { padding: 1.1rem 1.2rem; min-height: 0; overflow: hidden; transition: box-shadow .15s ease, background .15s ease; }
.mm-bsel.is-dragover { background: color-mix(in srgb, var(--mm-primary) 10%, var(--mm-card-bg)); box-shadow: var(--mm-elev-2), inset 0 0 0 2px var(--mm-primary); }
.mm-bsel.is-dragover .mm-bsel__list, .mm-bsel.is-dragover .mm-bsel__foot { pointer-events: none; }
.mm-bsel__empty { color: var(--mm-muted); font-size: .85rem; display: flex; align-items: center; gap: 7px; padding: 1.2rem 0; }
.mm-bsel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; }
.mm-bsel__title { font-size: 1.3rem; font-weight: 700; }
.mm-bsel__list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; }
.mm-bsel__row { display: flex; align-items: center; gap: 8px; font-size: .85rem; }
.mm-bsel__pn { flex: 1; min-width: 0; font-weight: 500; }
.mm-bsel__rm { flex: none; width: 24px; height: 24px; border-radius: 50%; border: none; background: transparent; color: var(--mm-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; transition: background .15s ease, color .15s ease; }
.mm-bsel__rm:hover { background: color-mix(in srgb, var(--mm-red) 16%, var(--mm-card-bg)); color: var(--mm-red); }
.mm-bsel__rm:disabled { opacity: .4; cursor: default; }
/* Dealer-locked product: shown in the rail but not removable. */
.mm-bsel__rm--locked { cursor: default; color: var(--mm-primary); }
.mm-bsel__rm--locked:hover { background: transparent; color: var(--mm-primary); }
.mm-bsel__foot { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--mm-line); display: flex; flex-direction: column; gap: .5rem; }
.mm-bsel__total { font-size: 1.6rem; font-weight: 700; }

.mm-btile--prod { cursor: pointer; padding: .8rem .85rem; background: color-mix(in srgb, var(--pc, var(--mm-primary)) 7%, var(--mm-card-bg)); }
.mm-btile--prod .mm-bic { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
.mm-btile--prod:hover, .mm-btile--pkg:hover { box-shadow: var(--mm-elev-3); transform: translateY(-3px); }
.mm-bic { width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: color-mix(in srgb, var(--pc, var(--mm-primary)) 16%, var(--mm-card-bg)); color: var(--pc, var(--mm-primary)); }
.mm-btile__pname { font-weight: 700; font-size: .84rem; margin-top: .5rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mm-badd { position: absolute; top: .8rem; right: .8rem; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--mm-tile-border); background: var(--mm-card-bg); color: var(--mm-muted); display: flex; align-items: center; justify-content: center; font-size: 15px; cursor: pointer; box-shadow: var(--mm-elev-1); }
.mm-btile--sel .mm-badd { background: var(--mm-primary); color: #fff; border-color: transparent; box-shadow: var(--mm-elev-primary); }
/* Dealer-locked product tile: shown selected (visual comes from .mm-btile--sel .mm-badd, since a
   locked product is always selected), just non-interactive. */
.mm-badd--locked { cursor: default; }
.mm-btile--locked { cursor: default; }

/* Color-coded selection + tier accents */
.mm-btile--prod.mm-btile--sel { box-shadow: var(--mm-elev-2), 0 0 0 2px var(--pc), 0 0 0 6px color-mix(in srgb, var(--pc) 16%, transparent); }
.mm-btile--prod.mm-btile--sel .mm-badd { background: var(--pc); box-shadow: 0 6px 16px color-mix(in srgb, var(--pc) 45%, transparent); }
.mm-btile--pkg.mm-btile--sel { box-shadow: var(--mm-elev-2), 0 0 0 2px var(--tier), 0 0 0 6px color-mix(in srgb, var(--tier) 16%, transparent); }
.mm-bbtn--tier { background: var(--tier, var(--mm-primary)); border-color: transparent; color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--tier, var(--mm-primary)) 42%, transparent); }
.mm-bbtn--tier:hover { filter: brightness(.95); box-shadow: 0 10px 24px color-mix(in srgb, var(--tier, var(--mm-primary)) 52%, transparent); }

.mm-bbtn { border: 1px solid var(--mm-tile-border); background: var(--mm-card-bg); color: var(--mm-text); border-radius: 999px; padding: .65rem 1rem; font-size: .9rem; font-weight: 600; width: 100%; cursor: pointer; margin-top: auto; box-shadow: var(--mm-elev-1); transition: box-shadow .2s ease, transform .08s ease, background .15s ease; }
.mm-bbtn:hover { border-color: var(--mm-primary); box-shadow: var(--mm-elev-2); }
.mm-bbtn:active { transform: translateY(1px); box-shadow: var(--mm-elev-1); }
.mm-bbtn--pri { background: var(--mm-primary); border-color: transparent; color: #fff; box-shadow: var(--mm-elev-primary); }
.mm-bbtn--pri:hover { background: var(--mm-primary-dark); box-shadow: var(--mm-elev-primary); }
.mm-bbtn--ghost { background: transparent; box-shadow: none; }
.mm-bbtn--ghost:hover { box-shadow: var(--mm-elev-1); }
.mm-bbtn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.coverage-none .mm-bring { stroke: #d11d2c; } .coverage-none .mm-bcov-pct { color: #d11d2c; }
.coverage-low .mm-bring { stroke: #e8821e; } .coverage-low .mm-bcov-pct { color: #e8821e; }
.coverage-moderate .mm-bring { stroke: #d4af1e; } .coverage-moderate .mm-bcov-pct { color: #b8950f; }
.coverage-high .mm-bring { stroke: #6abf3e; } .coverage-high .mm-bcov-pct { color: #559b2e; }
.coverage-full .mm-bring { stroke: #36a832; } .coverage-full .mm-bcov-pct { color: #2c8a29; }

@media (max-width: 1100px) {
    /* Allow the page to grow + scroll instead of squeezing into one viewport. */
    .mm-shell { height: auto; min-height: 100dvh; overflow: visible; }
    .mm-bento, .mm-bpkg, .mm-bsel, .mm-plist, .mm-bsel__list { overflow: visible; min-height: 0; }
    .mm-bmain { display: block; }
    .mm-bmain > * { margin-bottom: 1rem; }
    .mm-bento__grid--prod { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Gas / fuel comparison ---------- */
.mm-gas { flex: 1; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: center; }
.mm-gas__title { font-size: 1.8rem; font-weight: 700; }
.mm-gas__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; width: min(900px, 100%); }
.mm-gas__card { gap: .9rem; }
.mm-gas__card h2 { font-size: 1.1rem; margin: 0 0 .25rem; }
.mm-gas__row { display: flex; align-items: center; gap: 12px; }
.mm-gas__label { width: 110px; font-size: .85rem; color: var(--mm-text); flex: none; }
.mm-gas__track { flex: 1; height: 22px; background: var(--mm-track); border-radius: 999px; overflow: hidden; }
.mm-gas__fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.mm-gas__val { width: 90px; text-align: right; font-weight: 700; font-size: .85rem; flex: none; }
.mm-gas__facts { width: min(900px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; text-align: center; }
.mm-gas__facts > div { display: flex; flex-direction: column; gap: .2rem; }
.mm-gas__facts strong { font-size: 1.2rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .mm-showcase { grid-template-columns: 1fr; }
    .mm-carousel, .mm-selected, .mm-pkgcol { max-height: none; }
}
@media (max-width: 640px) {
    .mm-topbar { flex-wrap: wrap; }
    .mm-topbar__pill { order: 3; flex-basis: 100%; max-width: 100%; }
    .mm-stage__title { font-size: 1.7rem; }
    .mm-showcase, .mm-columns { padding: 1rem; }
    /* Phones can't fit the column view — hide its toggle so customers stay on the main view. */
    .mm-viewtoggle--column { display: none; }

    /* Package footer: Compare + arrows on one row, full-width Select (with price) below. */
    .mm-bpkg__foot { flex-wrap: wrap; }
    .mm-bpkg__compare { flex: 1 1 auto; }
    .mm-bpkg__select { order: 3; flex: 1 1 100%; }
}