/*
Theme Name: MM Carz
Theme URI: https://mmcarz.com.au
Author: MM Carz
Description: Lean custom theme for MM Carz — no page builder, no Motors. Dior-inspired typography + palette, Cavalo-style hero filters, LV-style catalogue, Tesla-style listing. Car photos via Cloudflare/R2.
Version: 0.2.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: mmcarz
*/

/* ============================== Design tokens ============================== */
:root {
  /* Palette — Dior monochrome-luxe (charcoal on white/off-white/cream) */
  --ink: #33383c;          /* Dior charcoal — one text colour site-wide, no pure black */
  --text: #33383c;         /* Dior body charcoal */
  --muted: #8b9095;        /* secondary text */
  --bg: #ffffff;
  --bg-soft: #f8f8f8;      /* Dior off-white */
  --cream: #f3efe8;        /* warm surface */
  --line: #e6e4e0;         /* hairline */
  --ink-contrast: #ffffff;
  --brand-blue: #0266b1;   /* live MM Carz header blue */

  --serif: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --maxw: 1320px;
  --gutter: clamp(20px, 4vw, 64px);

  /* Uppercase, wide-tracked label treatment (very Dior) */
  --label-ls: 0.18em;

  /* iOS bottom-anchor drift correction — see mmcarz_ios_bottom_anchor_fix() in functions.php.
     ZERO everywhere except iOS Safari mid-toolbar-collapse, so it changes no shipped geometry.
     Every `position: fixed` element anchored to the BOTTOM adds it to its own offset. */
  --mm-vvfix: 0px;
}

/* ============================== Base ============================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: .62; }

h1, h2, h3 { font-family: var(--serif); color: var(--text); font-weight: 400; line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); font-weight: 400; }
h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 400; }

.label, .eyebrow {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--label-ls); color: var(--muted);
}

.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 8vw, 110px); }

/* ============================== Buttons ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: var(--label-ls);
  padding: 16px 30px; border: 1px solid var(--ink); background: var(--ink); color: var(--ink-contrast);
  border-radius: 8px;
  cursor: pointer; transition: background .25s ease, color .25s ease; white-space: nowrap;
}
.btn:hover { background: transparent; color: var(--ink); opacity: 1; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--ink-contrast); }
.btn--light { border-color: #fff; background: #fff; color: var(--ink); }
.btn--light:hover { background: transparent; color: #fff; }

/* ============================== Header (cloned from live MM Carz) ============================== */
.mm-site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;   /* equal side columns => nav is truly centred; logo hugs left, icons hug right */
  height: 58px; padding: 0 clamp(20px, 2.5vw, 24px);   /* Dior-tight gutter — logo + icons hug the edges (Dior = 24px) */
  font-family: var(--sans);
  transition: transform .35s ease, background .3s ease, box-shadow .3s ease;
}
.mm-site-header.is-hidden { transform: translateY(-100%); }   /* hide on scroll down, reveal on scroll up */
.mm-site-header--overlay { background: transparent; }
.mm-site-header--solid,
.mm-site-header--overlay.is-stuck { background: var(--brand-blue); box-shadow: 0 1px 0 rgba(0,0,0,.12); }
/* Article header (body.mm-article-page — single insight posts): Hanamaru post pattern. At the TOP of
   the light reading page the overlay header is transparent with INK nav/icons + the dark wordmark;
   once scrolled (.is-stuck, y>60 — including when it re-appears on scroll-up mid-article) it reverts
   to the standard blue + white; back at the top it goes transparent/ink again. */
.mm-logo .mm-logo__ink { display: none; height: 26px; width: auto; margin: -4px 0; }   /* OPTICAL match to the 18px white logo: the wordmark PNG has padding baked in (glyphs fill 68% of its height vs 99%), so 26px renders the same visible mark; negative margins cancel the padding so the header height doesn't grow */
/* Drop the fixed-header body offset on articles (same trick as body.mm-svc-overlay) so the hero's
   tinted band extends UP UNDER the transparent header — otherwise a 58px strip of bare white body
   shows behind it and the header reads as white, not transparent. The hero pads itself instead. */
body.mm-article-page.mm-yt-page { padding-top: 0; }   /* double class: outranks body:not(.home){padding-top:58px} further down */
body.mm-article-page .mm-article__hero { padding-top: calc(58px + clamp(24px, 3vw, 44px)); }
body.mm-article-page .mm-site-header--overlay { background: transparent; box-shadow: none; }
body.mm-article-page .mm-site-header--overlay :is(.mm-nav a, .mm-icon, .mm-menu-burger, .mm-ins-burger) { color: #33383c; }
body.mm-article-page .mm-site-header--overlay .mm-logo img { display: none; }
body.mm-article-page .mm-site-header--overlay .mm-logo .mm-logo__ink { display: block; }
/* Scrolled (.is-stuck): WHITE header (not the blue brand bar) — frosted so the article blurs softly
   underneath when it re-appears mid-read; nav stays ink, wordmark stays dark. */
/* No bottom hairline (Heng 16/07): the frosted panel already separates itself from the article by the
   blur alone — the 1px shadow read as a hard border under the glass. */
body.mm-article-page .mm-site-header--overlay.is-stuck { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: none; }

.mm-logo { display: flex; align-items: center; justify-self: start; }
.mm-logo:hover { opacity: 1; }   /* no dim on hover (overrides the global a:hover fade) */
.mm-logo img { height: 18px; width: auto; display: block; }

.mm-nav { justify-self: center; }   /* centre grid cell — truly centred between the equal 1fr side columns */
.mm-nav > ul { display: flex; align-items: center; gap: 30px; list-style: none; margin: 0; padding: 0; }
.mm-nav a { color: #fff; font-family: var(--sans); font-weight: 400; font-size: 14px; letter-spacing: .01em; white-space: nowrap; }
.mm-nav a:hover { opacity: .65; }
/* Hover sub-panel under "Explore Vehicles" (single item for now: /sold/). Header-extension:
   the <li> is stretched to the full 58px bar height so the flap anchors FLUSH to the header's
   bottom edge (no bridge gap, and the whole bar-height is hover surface). Same brand blue,
   square top / rounded bottom = a flap sliding out of the bar. Keyboard: focus-within. */
.mm-nav__hasSub { position: relative; height: 58px; display: flex; align-items: center; }
/* Width follows the CONTENT, with the old parent-width as a floor. Setting both left and right locked
   the flap to the width of "Explore Vehicles"; the label inside is white-space:nowrap, so any language
   whose "Recently sold" is wider than its "Explore Vehicles" spilled its text straight out of the blue
   background. Cantonese is the extreme: 睇車 (2 chars) vs 啱啱賣出 (4) — double the parent. 7 of 20
   languages overflowed (es it pt el yue ko pa). min-width keeps English pixel-identical. */
.mm-nav__sub { position: absolute; top: calc(100% - 15px); left: -16px; right: auto; width: max-content; min-width: calc(100% + 24px);   /* 16px overhang left (matches the link padding so the R sits under the E) + 8px right = the original parent+24 floor */ transform: translateY(4px); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }   /* left-aligned with the nav label; tucks 15px up under the bar (blue-on-blue) so the labels sit close */
.mm-nav__hasSub:hover .mm-nav__sub, .mm-nav__hasSub:focus-within .mm-nav__sub { opacity: 1; pointer-events: auto; transform: translateY(0); }
.mm-nav__sub a { display: block; white-space: nowrap; background: var(--brand-blue); color: #fff; border: 0; border-radius: 0 0 6px 6px; padding: 4px 10px 8px 16px; font-size: 14px; }   /* same size as the nav labels */
.mm-nav__sub a:hover { opacity: 1; color: rgba(255, 255, 255, .72); }   /* dim the TEXT only — opacity here would fade the whole flap and it reads as transparent */
/* Transparent (overlay, pre-scroll) header: drop the flap's blue box so "Recently sold" sits
   directly over the hero, matching the see-through bar. Once scrolled the header turns blue
   (.is-stuck) and the blue-on-blue flap returns. */
.mm-site-header--overlay:not(.is-stuck) .mm-nav__sub a { background: transparent; }

/* ...but NOT on a SCROLLED article page. This template flips the nav to INK (rule ~103) and that
   selector catches the flap links too, so once scrolled the blue flap from the rule above returns
   and gives ink-on-brand-blue — a luminance gap of ~31. The frosted panel is the cover for that.
   (The home page keeps its see-through flap: the text there is WHITE over a dark video, so it reads.)

   🚨 Scoped to .is-stuck on 06/08/2026 (Heng: "at top of page remove background"). It used to apply
   in BOTH states, on the stated grounds that at the top the ink would land "straight onto the hero
   PHOTO". That is no longer true and is worth not re-deriving: rule ~101 gives the article hero
   `padding-top: calc(58px + clamp(24px,3vw,44px))`, so the hero's CONTENT — image included — starts
   at 82px at the very tightest, and the flap ends at exactly 82px. Measured: image top 96px vs flap
   band 47–82px, no overlap, and the only thing painted behind the flap is the page's own white.
   So at the top the flap is ink-on-white, and the panel was a faint off-white box over white —
   visible as a rectangle, protecting nothing. If the hero padding ever shrinks below the header
   height, this needs revisiting. */
body.mm-article-page .mm-site-header--overlay.is-stuck .mm-nav__sub a {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.mm-has-sub { position: relative; }
.mm-sub { position: absolute; top: 100%; left: -18px; min-width: 210px; background: var(--brand-blue); padding: 10px 0; margin: 0; list-style: none; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.mm-has-sub:hover .mm-sub { opacity: 1; visibility: visible; transform: none; }
.mm-sub li a { display: block; padding: 9px 22px; font-size: 14px; }

.mm-header-actions { display: flex; align-items: center; gap: 14px; justify-self: end; }
.mm-icon { display: inline-flex; align-items: center; color: #fff; background: none; border: 0; padding: 4px; cursor: pointer; transition: opacity .2s ease; }
.mm-logo-group .mm-icon--hdrsearch { display: none; }   /* the next-to-hamburger search only appears on the collapsed header (≤1200px, see media block) */
.mm-icon:hover { opacity: .65; }
.mm-icon svg { width: 18px; height: 18px; }
/* Optically even icons: the FILLED search + heart glyphs are drawn smaller inside their 24 viewBox
   (extent ~14.4 / ~15.4) than the thin-stroked globe + phone (~18.4 incl. stroke), so at the shared
   18px box they render visibly smaller (~10.8 / ~11.6px vs ~13.8px). Scale just those two up to the
   globe/phone glyph extent — paint-only, so the 18px layout box (and icon spacing) is unchanged.
   Factor = 18.4 / own extent. Keyed on data-panel so the drawer tabs stay even too. */
.mm-icon[data-panel="search"] svg   { transform: scale(1.28); }
.mm-icon[data-panel="wishlist"] svg { transform: scale(1.19); }

/* Inner pages: opaque fixed header — reserve its height so content isn't hidden */
body:not(.home) { padding-top: 58px; }

/* ---- Collapsed-header hamburger (tablet-landscape & down) ---- */
/* 2-line Dior burger that replaces the horizontal nav; hidden on desktop, opens the
   off-canvas "menu" panel through the same engine as the icon tabs. It morphs its two lines
   into an X while the menu drawer is open (driven by html.mm-menu-open, set in header.php's
   open()/close() for the LEFT/menu drawer only) — the same line->X the off-canvas Close plays
   (Dior's #menuburger-close; see .mm-oc-close__ic below), so the two read as one motion. */
.mm-menu-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-left: -8px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; transition: opacity .2s ease; }
.mm-menu-burger:hover { opacity: .65; }
.mm-menu-burger .mm-burger { position: relative; display: block; width: 14px; height: 12px; transform: translateY(-1px); }   /* 14px line width — cloned from Dior's #menuburger (rects width=14); optical nudge sits the icon 1px higher */
.mm-menu-burger .mm-burger i { position: absolute; left: 0; right: 0; height: 1.4px; border-radius: 0.7px; background: currentColor;   /* 1.4px thick + fully-rounded ends (rx .7) — Dior burger line spec */
  /* Two-stage Dior morph via `top` (collapse) + `transform: rotate()` (fold). These reverse cleanly
     on iOS Safari, unlike the individual translate/rotate props (those snapped to their initial value
     on close). CLOSE order: the X un-rotates to one centre line FIRST (transform, no delay), THEN the
     bars split apart (top, delayed until the un-rotate finishes) — "X -> 1 line -> hamburger". Open
     reverses it below. Explicit rotate(0deg) so the reverse has a concrete target to interpolate to. */
  transform: rotate(0deg);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), top .3s cubic-bezier(.22,.61,.36,1) .22s; }   /* slower fold so it plays THROUGH the drawer slide, not a quick snap (Dior feel) */
.mm-menu-burger .mm-burger i:first-child { top: 3px; }
.mm-menu-burger .mm-burger i:last-child  { top: 8px; }
/* menu open -> the two bars first COLLAPSE together to one centre line (top, no delay), THEN rotate
   into the X (transform delayed until the collapse finishes) — "hamburger -> 1 line -> X". */
html.mm-menu-open .mm-menu-burger .mm-burger i { transition: top .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1) .22s; }
html.mm-menu-open .mm-menu-burger .mm-burger i:first-child { top: 5.5px; transform: rotate(45deg); }
html.mm-menu-open .mm-menu-burger .mm-burger i:last-child  { top: 5.5px; transform: rotate(-45deg); }
.mm-oc-tabs .mm-icon.mm-icon--menu { display: none; }   /* the menu tab only appears inside the drawer once the header collapses */

@media (max-width: 1200px) {
  /* Tablet-landscape (1024) & down: the 8-item nav no longer fits alongside the logo +
     action icons, so it collapses to a hamburger. Logo centres (Dior); the burger takes
     the top-left. This is ALSO the only menu access below 560px (there was none before). */
  /* Thinner bar on tablet/mobile — the collapsed header is mostly empty space around a small logo,
     and a fixed header on a small screen should hand height back to content. Desktop keeps 58px. */
  .mm-site-header { grid-template-columns: 1fr auto; gap: 12px; height: 50px; }   /* 2 tracks: burger (col1, left) + actions (col2, right). With the nav hidden, a 3-track grid would auto-place the actions into the empty middle track and collide with the centred logo. */
  body:not(.home) { padding-top: 50px; }        /* match the reserved header space to the new height */
  body .mm-yt { --mm-yt-h: 50px; }              /* keep the insights sidebar's sticky offset in sync (higher specificity so it wins over the base .mm-yt) */
  .mm-nav { display: none; }
  .mm-menu-burger { display: inline-flex; }
  .mm-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .mm-site-header .mm-ins-burger { display: none; }                       /* no 2nd burger on insights pages */
  .mm-site-header--insights { padding-left: clamp(20px, 2.5vw, 24px); }   /* reset the ins-burger nudge */
  .mm-oc-tabs .mm-icon.mm-icon--menu { display: inline-flex; }
  /* Icon layout on the collapsed header (Heng 08/07/2026): SEARCH moves to the left, next to the
     hamburger; the right actions become wishlist + globe + call. */
  .mm-logo-group .mm-icon--hdrsearch { display: inline-flex; margin-left: -6px; }   /* show the left (next-to-burger) search; -6px pulls it in so the burger→search glyph gap matches the right-hand icon rhythm (the 40px burger button's wide padding otherwise leaves it ~6px looser) */
  .mm-header-actions [data-panel="search"] { display: none; }    /* ...and hide the right-hand one */
  /* The globe/language icon is BACK next to wishlist in the header. On the TABLET + PHONE slide-up
     sheet the drawer's OWN globe tab is shown too (it already sits between the heart + phone in the
     markup) so language stays reachable while a sheet is open and the header globe is under the
     backdrop (Heng 08/07/2026 — extended to iPhone portrait on request). */
}

/* ============================== Off-canvas (Dior-style slide-in) ============================== */
html.mm-oc-open { overflow: hidden; }
.mm-offcanvas { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.mm-offcanvas.is-open { visibility: visible; }
.mm-offcanvas__backdrop { position: absolute; inset: 0; background: rgba(20,22,24,.28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transition: opacity .4s ease; }
/* Hamburger (menu) drawer: blur the background the SAME as the Explore page's frosted filter bar
   (.mm-filters2--inv → blur(40px) saturate(180%)). Scoped to the left drawer per "when click on hamburger". */
.mm-offcanvas.mm-oc--left .mm-offcanvas__backdrop { -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%); }
.mm-offcanvas.is-open .mm-offcanvas__backdrop { opacity: 1; }
.mm-offcanvas__panel {
  position: absolute; top: 8px; right: 8px; bottom: 8px; width: min(960px, 92vw);
  background: #fff; transform: translateX(calc(100% + 8px)); transition: transform .42s cubic-bezier(.2,.7,.2,1), width .6s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column; overflow: hidden;
  border-radius: 6px;   /* subtle corners; floats with a thin gap off the edges (Dior) */
}
.mm-offcanvas.is-open .mm-offcanvas__panel { transform: none; }
/* Hamburger opens the drawer from the LEFT (Dior menu); the right-side icons keep the right drawer.
   width is set explicitly so it wins over the 901-1200 tablet rule's `width:auto` (which, combined
   with right:auto, would otherwise shrink the panel to its content). */
.mm-offcanvas.mm-oc--left .mm-offcanvas__panel { right: auto; left: 8px; width: min(960px, 92vw); transform: translateX(calc(-100% - 8px)); }
.mm-offcanvas.mm-oc--left.is-open .mm-offcanvas__panel { transform: none; }
/* 🚨 Slide-in via a keyframe ANIMATION, not just the transition. A transition's start value is the
   panel's PREVIOUS computed transform, which is unreliable across the closed drawer's
   visibility:hidden state — that's what let the menu drift in from the right "from time to time".
   An animation always plays from its own `from` keyframe, so the drawer ALWAYS enters from its own
   side. open() drops + re-adds is-open (with a reflow) on every open, which restarts the animation. */
@keyframes mmDrawerInRight { from { transform: translateX(calc(100% + 8px)); } to { transform: none; } }
@keyframes mmDrawerInLeft  { from { transform: translateX(calc(-100% - 8px)); } to { transform: none; } }
@keyframes mmDrawerInUp    { from { transform: translateY(calc(100% + 8px)); } to { transform: none; } }   /* phone/tablet bottom-sheet slide-up */
/* Exit keyframes — the "down"/back half of the animation, played on .is-closing (see the ≤1200 block).
   Bottom-sheet panels slide DOWN off-screen; the left menu drawer slides back out to its own edge. */
@keyframes mmDrawerOutDown  { from { transform: none; } to { transform: translateY(calc(100% + 8px)); } }
@keyframes mmDrawerOutLeft  { from { transform: none; } to { transform: translateX(calc(-100% - 8px)); } }
/* Hamburger MENU drawer: FADE in/out instead of sliding (Heng 09/07/2026 — mobile portrait). The
   left slide (mmDrawerInLeft/OutLeft above) stays defined but is no longer used for the menu; the
   right icon drawers keep their slide / bottom-sheet motion. transform is pinned to none (see the
   .mm-oc--left.is-open rule + the .is-closing override) so the panel fades in place. */
@keyframes mmDrawerFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes mmDrawerFadeOut { from { opacity: 1; } to { opacity: 0; } }
.mm-offcanvas.is-open .mm-offcanvas__panel { animation: mmDrawerInRight .42s cubic-bezier(.2,.7,.2,1) both; }
.mm-offcanvas.mm-oc--left.is-open .mm-offcanvas__panel { animation: mmDrawerFadeIn .34s ease both; }
@media (prefers-reduced-motion: reduce) { .mm-offcanvas.is-open .mm-offcanvas__panel, .mm-offcanvas.is-closing .mm-offcanvas__panel { animation: none; } }

/* Tablet + phone (≤1200px, both orientations — Heng 08/07/2026): the right-side drawers
   (Wishlist / Call / Search) become a FULL-WIDTH floating card — 8px gap all round so the rounded
   floating look is kept — and slide UP from the bottom (bottom-sheet) instead of in from the right,
   sliding back DOWN on close (see .is-closing below). The header burger's own LEFT menu drawer keeps
   its left slide (higher specificity on .mm-oc--left wins). Was ≤560 (phone-only) until 08/07/2026. */
@media (max-width: 1200px) {
  .mm-offcanvas__panel { left: 8px; right: 8px; width: auto; transform: translateY(calc(100% + 8px)); }
  .mm-offcanvas.is-open .mm-offcanvas__panel { animation-name: mmDrawerInUp; }
  .mm-oc-tabs .mm-icon.mm-icon--menu { display: none; }   /* drop the redundant hamburger from the drawer tab row (header burger already opens the menu) */

  /* Hide the "Close" word next to the X from tablet-landscape down (≤1200 — Heng 08/07/2026): the
     morphing X is a clear enough close affordance on the sheet. Visually-hidden (not display:none) so
     the button keeps its accessible name, and the client-side translator still owns the text. */
  .mm-oc-close__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

  /* Slide DOWN on close (the "down" half of the animation): close() adds .is-closing + keeps the
     sheet painted for ~.42s while it exits, then a timer drops the class. The hamburger MENU drawer
     fades out in place instead (transform pinned to none so it doesn't jump to its off-screen park).
     Desktop (>1200) has no .is-closing rule, so it keeps the instant-hide close as before. */
  .mm-offcanvas.is-closing { visibility: visible; }
  .mm-offcanvas.is-closing .mm-offcanvas__panel { animation: mmDrawerOutDown .42s cubic-bezier(.4,0,.6,1) both; }
  .mm-offcanvas.is-closing.mm-oc--left .mm-offcanvas__panel { animation-name: mmDrawerOutLeft; }   /* Heng: revert the menu close to a left slide (still fades IN on open) */
}

/* Change-language (from the hamburger menu) opens the language panel FULL-SCREEN with the options
   centred (Dior). :has() styles the floating panel from its active language child; only on
   tablet/mobile — desktop keeps the normal floating drawer for the header globe. margin:auto in a
   flex column centres both axes and stays scroll-safe when the language list is taller than the screen. */
@media (max-width: 1200px) {
  .mm-offcanvas.is-open:has(.mm-panel--lang.is-active) .mm-offcanvas__panel {
    top: 0; right: 0; bottom: 0; left: 0; width: auto; max-width: none; border-radius: 0;
  }
  .mm-offcanvas:has(.mm-panel--lang.is-active) .mm-oc-body { display: flex; flex-direction: column; }
  .mm-offcanvas:has(.mm-panel--lang.is-active) .mm-panel--lang { margin: auto; text-align: center; }
  .mm-offcanvas:has(.mm-panel--lang.is-active) .mm-lang-cat__head,
  .mm-offcanvas:has(.mm-panel--lang.is-active) .mm-lang-cat button { text-align: center; }
}

/* top bar: Close (left) + icon tabs (right). The hairline is INSET to align with the
   content (Close text / icons), not the panel edges, and the active tab's underline
   sits directly on that line. */
.mm-oc-bar { position: relative; display: flex; align-items: stretch; justify-content: space-between; gap: 16px; height: 64px; padding: 0 clamp(24px, 3vw, 40px); }
.mm-oc-bar::after { content: ""; position: absolute; left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); bottom: 0; height: 1px; background: var(--line); }
.mm-oc-close { align-self: center; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 13px; color: var(--ink); cursor: pointer; transition: opacity .2s ease; }
.mm-oc-close:hover { opacity: .6; }
/* Dior close morph (mirrors #menuburger-close: animation-collapse + animation-rotate + fade-in):
   two lines that first collapse into one centre line, then rotate into the X — matched to the
   header burger's two-stage morph above so both read as the same motion. */
.mm-oc-close__ic { position: relative; display: inline-block; width: 18px; height: 18px; opacity: 0; transition: opacity .3s ease .12s; }
.mm-oc-close__ic i { position: absolute; left: 3px; right: 3px; height: 1.4px; border-radius: 0.7px; background: currentColor;   /* 1.4px thin + fully-rounded ends — matches the Dior burger/close line spec */
  transform: rotate(0deg);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), top .3s cubic-bezier(.22,.61,.36,1) .22s; }   /* CLOSE: un-rotate to one line, then split apart (slower fold, plays through the slide) */
.mm-oc-close__ic i:first-child { top: 6px; }
.mm-oc-close__ic i:last-child  { top: 11px; }
.mm-offcanvas.is-open .mm-oc-close__ic { opacity: 1; }
.mm-offcanvas.is-open .mm-oc-close__ic i { transition: top .3s cubic-bezier(.22,.61,.36,1), transform .3s cubic-bezier(.22,.61,.36,1) .22s; }   /* OPEN: collapse to one line, then rotate into X */
.mm-offcanvas.is-open .mm-oc-close__ic i:first-child { top: 8.5px; transform: rotate(45deg); }
.mm-offcanvas.is-open .mm-oc-close__ic i:last-child  { top: 8.5px; transform: rotate(-45deg); }
.mm-oc-close svg { width: 15px; height: 15px; }
.mm-oc-tabs { display: flex; align-items: stretch; gap: 22px; }
.mm-oc-tabs .mm-icon { position: relative; z-index: 1; display: flex; align-items: center; color: var(--ink); padding: 0; border-bottom: 1px solid transparent; }   /* active underline thin, flush on the bar hairline (Dior) */
.mm-oc-tabs .mm-icon.is-active { border-bottom-color: var(--ink); }
/* Search tab hides itself while the search panel is active (the drawer already IS search, so the
   tab is redundant). open() toggles .is-active on the tab matching the active panel, so tapping
   another top-right tab (wishlist/call) clears it and reveals search again; tapping search re-hides. */
.mm-oc-tabs .mm-icon[data-panel="search"].is-active { display: none; }

/* body: centered content */
.mm-oc-body { flex: 1; overflow-y: auto; padding: clamp(34px, 5vh, 56px) clamp(24px, 4vw, 56px); }
.mm-panel { display: none; max-width: 460px; margin: 0 auto; text-align: center; }
.mm-panel.is-active { display: block; }

/* ---- Menu panel (mobile/tablet primary nav — Dior stacked list) ---- */
.mm-panel--menu { max-width: 520px; margin: 0 auto; text-align: left; }
.mm-oc-menu { list-style: none; margin: 0; padding: 0; }
.mm-oc-menu > li + li { border-top: 1px solid var(--line); }
.mm-ocm__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px; font-family: var(--sans); font-size: 16px; color: var(--ink); transition: opacity .2s ease; }
.mm-ocm__link--hassub { padding-bottom: 4px; }
.mm-ocm__link:hover { opacity: .55; }
.mm-ocm__link svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; transition: transform .25s ease; }
.mm-ocm__link:hover svg { transform: translateX(4px); }
.mm-ocm__sub { display: inline-block; padding: 0 2px 16px; font-family: var(--sans); font-size: 13px; color: var(--muted); transition: opacity .2s ease; }
.mm-ocm__sub:hover { opacity: .6; }
/* Utility group under the main nav — grey divider + Wishlist / Appointment / Change-language.
   The <button> rows reuse .mm-ocm__link, so reset the native button chrome. */
.mm-ocm__divider { height: 1px; background: var(--line); margin: 6px 0; }
.mm-oc-menu button.mm-ocm__link { width: 100%; background: none; border: 0; cursor: pointer; font-size: 14px; }   /* utility rows (Wishlist / Appointment / Change language) — 14px, smaller than the 16px main nav */
.mm-ocm__langlabel { display: inline-flex; align-items: baseline; gap: 6px; }
.mm-lang-current { color: var(--muted); }

/* --- Accessibility comfort-mode toggle, pinned flush at the bottom of the menu drawer --- */
/* Make the menu panel fill the drawer height so the toggle's margin-top:auto sinks it to the bottom;
   the empty space between the nav and the toggle reads as intentional breathing room (Dior). */
.mm-oc-body:has(.mm-panel--menu.is-active) { display: flex; flex-direction: column; padding-bottom: 0; }
.mm-panel--menu.is-active { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.mm-a11y-toggle { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 15px 0 calc(15px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--line); background: none; font-family: var(--sans); color: var(--ink); cursor: pointer; transition: opacity .2s ease; }
.mm-a11y-toggle:hover { opacity: .7; }
.mm-a11y-toggle__ic { display: inline-flex; flex: 0 0 auto; }
.mm-a11y-toggle__ic svg { width: 20px; height: 20px; }
.mm-a11y-toggle__label { font-size: 15px; }
.mm-a11y-toggle__sw { margin-left: auto; position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: var(--line); transition: background .25s ease; }
.mm-a11y-toggle__knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.28); transition: transform .25s ease; }
.mm-a11y-toggle[aria-pressed="true"] .mm-a11y-toggle__sw { background: var(--brand-blue); }
.mm-a11y-toggle[aria-pressed="true"] .mm-a11y-toggle__knob { transform: translateX(18px); }

/* Comfort mode bundled by the toggle: larger type (rem/clamp text) + higher contrast + reduced motion. */
html.mm-a11y { font-size: 112.5%; --ink: #000; --muted: #3d4247; --line: #7c828a; }
html.mm-a11y *, html.mm-a11y *::before, html.mm-a11y *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }   /* iteration-count:1 stops LOOPING animations (e.g. Michi's orb) from strobing at near-zero duration */
/* Wishlist / Change-language / Appointment reveal with a soft fade + subtle slide-up on open.
   Applied to the content (not the drawer) so it layers over the drawer's own slide; the class
   toggles (is-active / is-open) re-trigger the animation on every open. */
@keyframes mmFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.mm-offcanvas.is-open .mm-panel[data-panel-content="wishlist"].is-active,
.mm-offcanvas.is-open .mm-panel--lang.is-active { animation: mmFadeUp .5s cubic-bezier(.2,.7,.2,1) .06s both; }
.mm-apptform.is-open .mm-apptform__body { animation: mmFadeUp .5s cubic-bezier(.2,.7,.2,1) .1s both; }
@media (prefers-reduced-motion: reduce) {
  .mm-offcanvas.is-open .mm-panel[data-panel-content="wishlist"].is-active,
  .mm-offcanvas.is-open .mm-panel--lang.is-active,
  .mm-apptform.is-open .mm-apptform__body { animation: none; }
}

/* ---- Search panel — Dior carbon copy (wide, left-aligned: lens+input, suggestions, you-may-also-like) ---- */
/* Search uses the same floating drawer as the other panels (Dior), with the wide Dior search
   layout left-aligned, filling the drawer width. */
.mm-panel--search { max-width: none; margin: 0; text-align: left; }
.mm-panel--search.is-active { display: block; }
.mm-oc-search { position: relative; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ink); padding: 4px 0 14px; margin: 0; }
.mm-oc-search__lens { display: inline-flex; color: var(--ink); }
.mm-oc-search__lens svg { width: 20px; height: 20px; }
.mm-oc-search__input { flex: 1; border: 0; background: none; outline: none; font: inherit; font-size: 13px; color: var(--ink); padding: 6px 0; }
.mm-oc-search__input::placeholder { color: var(--muted); }
.mm-oc-search__go { background: none; border: 0; padding: 6px; color: var(--muted); cursor: pointer; display: inline-flex; transition: color .2s ease, transform .2s ease; }
.mm-oc-search__go:hover { color: var(--ink); transform: translateX(2px); }
.mm-oc-search__go svg { width: 20px; height: 20px; }

.mm-oc-searchfor { text-align: right; margin: 16px 0 0; font-size: 14px; color: var(--ink); }
.mm-oc-searchfor a { text-decoration: underline; text-underline-offset: 4px; }
.mm-oc-searchfor a:hover { opacity: .55; }

.mm-oc-heading { font-size: 14px; font-weight: 400; color: var(--muted); margin: 0 0 4px; }

.mm-oc-suggest { margin-top: 28px; }
.mm-oc-suggest ul { list-style: none; margin: 0; padding: 0; }
.mm-oc-suggest li a { display: inline-block; padding: 5px 0; line-height: 1.4; font-size: 14px; color: var(--ink); }
.mm-oc-suggest li a:hover { opacity: .55; }

/* Tablet + phone (≤1200 — Heng 08/07/2026): pull Suggestions up close under the search field, and
   move the "Search for all vehicles in stock" line DOWN — left-aligned, sitting between the Suggestions
   list and "You may also like" (flex order on the search column; desktop keeps it right-aligned up top). */
@media (max-width: 1200px) {
  .mm-search-main  { display: flex; flex-direction: column; }
  .mm-oc-search    { order: 1; }
  .mm-oc-suggest   { order: 2; margin-top: 18px; }
  .mm-oc-searchfor { order: 3; text-align: left; margin: 30px 0 0; }
  .mm-oc-ymal      { order: 4; }
}

.mm-oc-ymal { margin-top: 30px; }
.mm-oc-ymal .mm-oc-heading { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 14px; }   /* Dior: this heading is darker/heavier than "Suggestions" */
.mm-oc-ymal__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; margin-top: 0; }   /* 2-col mosaic — 4 cars (2×2) at every breakpoint; thin gap */
.mm-oc-ymal__item { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); }
.mm-oc-ymal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mm-oc-ymal__item:hover img { transform: scale(1.04); opacity: 1; }
.mm-oc-ymal__item:nth-child(n+5) { display: none; }   /* safety cap — never show more than 4 (2×2), even if the render count ever changes */

/* ---- Live search-as-you-type: results expand LEFT, suggestions become highlighted autocomplete ---- */
/* When typing, the drawer widens (right-anchored, so it grows to the left) to reveal a results column. */
.mm-offcanvas.mm-oc--searching .mm-offcanvas__panel { width: min(1180px, 96vw); }
.mm-search-layout { display: grid; grid-template-columns: 1fr; }
/* Searching: two full-height, independently-scrolling columns so the divider reaches the panel
   bottom and the "See all" pill can pin to the very bottom of the results column. */
.mm-oc--searching .mm-oc-body { display: flex; overflow: hidden; padding: clamp(22px, 3vh, 32px) clamp(18px, 2.2vw, 30px) 0; }   /* hug the edges, Dior-tight */
.mm-oc--searching .mm-panel--search.is-active { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }
.mm-oc--searching .mm-search-layout { flex: 1 1 auto; min-height: 0; grid-template-columns: minmax(300px, 380px) 1fr; grid-template-rows: 100%; }
.mm-oc--searching .mm-search-results { overflow-y: auto; border-right: 1px solid var(--line); padding-right: clamp(20px, 2.4vw, 32px); padding-bottom: 20px; }
.mm-oc--searching .mm-search-main { overflow-y: auto; padding-left: clamp(20px, 2.4vw, 32px); }
/* subtle, Dior-quiet scrollbar on the columns */
.mm-oc--searching .mm-search-results, .mm-oc--searching .mm-search-main { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.mm-oc--searching .mm-search-results::-webkit-scrollbar, .mm-oc--searching .mm-search-main::-webkit-scrollbar { width: 6px; }
.mm-oc--searching .mm-search-results::-webkit-scrollbar-thumb, .mm-oc--searching .mm-search-main::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
/* align the Close / icon bar with the tightened content edges while searching */
.mm-oc--searching .mm-oc-bar { padding-left: clamp(18px, 2.2vw, 30px); padding-right: clamp(18px, 2.2vw, 30px); }
.mm-oc--searching .mm-oc-bar::after { left: clamp(18px, 2.2vw, 30px); right: clamp(18px, 2.2vw, 30px); }

/* Tablet landscape (901–1200px): off-canvas drawer refinements. At ≤1200 the header nav
   collapses to a top-left hamburger (see the collapsed-header block above), so the drawer is
   the primary navigation surface here and gets a full-width, centred treatment:
   1. Stretch the drawer edge-to-edge with equal 8px gaps both sides. The default is right-anchored
      and capped at 960px, leaving a big empty gap on the LEFT (~74px @1024 → ~226px @1194) while
      the right gap stays 8px. The second selector keeps it symmetric in the searching state too
      (the searching rule otherwise re-widens it to min(1180px,96vw), reintroducing the gap).
   2. Drop the menu hamburger from the drawer's tab row — the header already shows a burger at this
      width, so it read as a redundant second hamburger sitting next to the search icon.
   3. Keep the Call Us panel block centred in the drawer, but left-align its content so the
      lead, contact rows and links line up flush under the "Call Us" heading.
   Also applied to PORTRAIT tablets (601–900px, e.g. iPad/Air/Pro-11 portrait) via the 2nd media
   clause, so the drawer looks identical whichever way the tablet is held. And to LANDSCAPE PHONES
   (3rd clause: landscape + short height ≤500 + width ≤950) so iPhone-landscape gets the same
   full-width, left-flush, icon-free menu. Portrait phones (≤600) keep the base right-anchored drawer. */
@media (min-width: 901px) and (max-width: 1200px),
       (orientation: portrait) and (min-width: 601px) and (max-width: 900px),
       (orientation: landscape) and (max-width: 950px) and (max-height: 500px) {
  .mm-offcanvas__panel,
  .mm-offcanvas.mm-oc--searching .mm-offcanvas__panel {
    left: 8px;
    right: 8px;
    width: auto;
  }

  /* remove the redundant menu hamburger from the drawer tab row */
  .mm-oc-tabs .mm-icon.mm-icon--menu { display: none; }

  /* Call Us: block stays centred (base margin:auto), content left-aligned flush under the heading */
  .mm-panel--call { text-align: left; }
  .mm-panel--call .mm-call-methods { align-items: stretch; }
  .mm-panel--call .mm-call-row { width: 100%; justify-content: flex-start; }
  .mm-panel--call .mm-call-links { align-items: flex-start; }

  /* --- Hamburger MENU drawer (left) refinements — Heng directive 07/07/2026, width updated 08/07/2026.
     Only the .mm-oc--left drawer; the right-side icon drawers keep their edge-to-edge treatment from
     the rule above. Width: FULL-WIDTH floating card matching the icon drawers (Heng 08/07 — was a
     narrow ~400px content-hug; changed so the menu is a full takeover, floating-card look kept via
     the base top/bottom:8 + border-radius). Drop the top-right icon tabs, left-align the list flush
     under the close control, and strip the row chevrons + per-item hairlines. --- */
  .mm-offcanvas.mm-oc--left .mm-offcanvas__panel {
    left: 8px; right: 8px; width: auto; max-width: none;   /* full-width floating card (8px both sides, from the base top/bottom:8 + radius:6) */
  }
  .mm-offcanvas.mm-oc--left .mm-oc-tabs { display: none; }                         /* remove the top-right search/wishlist/language/call icons */
  /* Left gutter for the whole drawer (bar hairline + Close + list). 25px (≈33px from the screen edge
     with the 8px drawer offset) gives the menu content a Dior-style generous left indent — Heng
     08/07/2026 "push everything right a bit", confirmed against dior.com's mobile nav. Was 17px. */
  .mm-offcanvas.mm-oc--left .mm-oc-bar { padding-left: 25px; }
  .mm-offcanvas.mm-oc--left .mm-oc-bar::after { left: 25px; right: 16px; }   /* top hairline: match the 16px body right gutter (base is a roomy ~31px) */
  .mm-offcanvas.mm-oc--left .mm-oc-body { padding-top: 12.5px; padding-left: 25px; padding-right: 16px; }   /* 12.5 body-top; left/right gutters now symmetric + tight (17/16) instead of a roomy ~31px right */
  .mm-offcanvas.mm-oc--left .mm-panel--menu { max-width: none; margin: 0; }        /* un-centre so items sit hard left */
  .mm-offcanvas.mm-oc--left .mm-ocm__link { padding: 12.5px 0; }  /* 25px vertical gaps (12.5+12.5); flush-left with the close control (main nav inherits base 16px; util rows set to 14px below) */
  .mm-offcanvas.mm-oc--left .mm-ocm__link svg { display: none; }                   /* no per-row chevron arrow */
  .mm-offcanvas.mm-oc--left .mm-oc-menu > li + li { border-top: 0; }               /* no grey divider under each page */

  /* --- Live search on tablet/landscape (Heng 08/07/2026): keep the drawer SINGLE-COLUMN and drop the
     AJAX results in where the "You may also like" grid was, instead of the desktop expand-left
     two-column split. The search JS (header.php run()) already hides YMAL (ymal.hidden) + reveals
     .mm-search-results while typing, so we only re-flow the searching layout here: input + suggestions
     stay, and the results grid follows directly under them (flex order:2 — main is order:1). This
     overrides the base .mm-oc--searching two-column rules for this width; desktop keeps expand-left. --- */
  .mm-oc--searching .mm-oc-body { display: block; overflow-y: auto; padding: clamp(34px, 5vh, 56px) clamp(24px, 4vw, 56px); }
  .mm-oc--searching .mm-panel--search.is-active { display: block; }
  .mm-oc--searching .mm-search-layout { display: flex; flex-direction: column; grid-template-columns: none; }
  .mm-oc--searching .mm-search-main { order: 1; overflow: visible; padding-left: 0; }
  .mm-oc--searching .mm-search-results { order: 2; overflow: visible; border-right: 0; padding: 0; margin-top: 30px; }
  .mm-oc--searching .mm-search-results__more { position: static; margin-top: 24px; }
  /* keep the Close/tabs bar steady when typing (don't tighten its gutters like the desktop split does) */
  .mm-oc--searching .mm-oc-bar { padding-left: clamp(24px, 3vw, 40px); padding-right: clamp(24px, 3vw, 40px); }
  .mm-oc--searching .mm-oc-bar::after { left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); }
}

/* ===== Phone portrait (≤600px — iPhone etc., Heng 08/07/2026) ===== */
/* Two things the wider tablet block above (min-width 601+) never reached on a phone in portrait:
   1. "You may also like" reveals cars 5–6 → a 6-car grid (still 2 columns, so 3 rows).
   2. Live search was falling through to the DESKTOP two-column split (minmax(300px,380px) 1fr), which
      overflows a ~390px screen and left the YMAL grid on screen — mirror the tablet single-column
      re-flow so the AJAX results replace the grid and drop in below the field + suggestions. */
@media (max-width: 600px) {
  /* phone keeps the same 4-car 2×2 mosaic — no extra cars revealed (only 4 are rendered now) */

  .mm-offcanvas.mm-oc--searching .mm-offcanvas__panel { left: 8px; right: 8px; width: auto; }   /* stay a full-width bottom-sheet while searching (override the desktop min(1180px,96vw) widen) */
  .mm-oc--searching .mm-oc-body { display: block; overflow-y: auto; padding: clamp(34px, 5vh, 56px) clamp(24px, 4vw, 56px); }
  .mm-oc--searching .mm-panel--search.is-active { display: block; }
  .mm-oc--searching .mm-search-layout { display: flex; flex-direction: column; grid-template-columns: none; }
  .mm-oc--searching .mm-search-main { order: 1; overflow: visible; padding-left: 0; }
  .mm-oc--searching .mm-search-results { order: 2; overflow: visible; border-right: 0; padding: 0; margin-top: 30px; }
  .mm-oc--searching .mm-search-results__more { position: static; margin-top: 24px; }
  .mm-oc--searching .mm-oc-bar { padding-left: clamp(24px, 3vw, 40px); padding-right: clamp(24px, 3vw, 40px); }
  .mm-oc--searching .mm-oc-bar::after { left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); }

  /* Hamburger MENU drawer — same treatment as the tablet off-canvas (mirrors the 601–1200 .mm-oc--left
     block, which excluded phone portrait). Full-width floating card with 8px gaps both sides, no
     top-right icon tabs, menu items hard-left and pushed up under the close control, no chevron
     arrows, no grey row dividers. (Heng 08/07/2026.) */
  .mm-offcanvas.mm-oc--left .mm-offcanvas__panel { left: 8px; right: 8px; width: auto; max-width: none; }
  .mm-offcanvas.mm-oc--left .mm-oc-tabs { display: none; }
  .mm-offcanvas.mm-oc--left .mm-oc-bar { padding-left: 25px; }
  .mm-offcanvas.mm-oc--left .mm-oc-bar::after { left: 25px; right: 16px; }
  .mm-offcanvas.mm-oc--left .mm-oc-body { padding-top: 12.5px; padding-left: 25px; padding-right: 16px; }
  .mm-offcanvas.mm-oc--left .mm-panel--menu { max-width: none; margin: 0; }
  .mm-offcanvas.mm-oc--left .mm-ocm__link { padding: 12.5px 0; }
  .mm-offcanvas.mm-oc--left .mm-ocm__link svg { display: none; }
  .mm-offcanvas.mm-oc--left .mm-oc-menu > li + li { border-top: 0; }
}

.mm-search-results { position: relative; }
.mm-search-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.mm-oc-heading--dark { color: var(--ink); font-weight: 600; font-size: 16px; margin: 0; }
.mm-search-results__count { font-size: 13px; color: var(--muted); white-space: nowrap; }
.mm-search-results__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 3px; }   /* Dior: cards nearly touch */
.mm-sr-card { display: block; color: var(--ink); }
.mm-sr-card__media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-soft); }
.mm-sr-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mm-sr-card:hover .mm-sr-card__media img { transform: scale(1.04); }
.mm-sr-card__title { display: block; margin-top: 9px; font-size: 13px; line-height: 1.35; }
.mm-search-results__empty { font-size: 14px; color: var(--muted); }
/* floating "See all vehicles (N)" pill, sticky at the bottom of the results column (Dior) */
.mm-search-results__more {
  position: sticky; bottom: 0; z-index: 3;
  display: block; width: fit-content; max-width: 100%; margin: 24px auto 0;
  padding: 13px 26px; background: var(--ink); color: #fff; border-radius: 4px;
  font-size: 13px; font-weight: 500; text-align: center; white-space: nowrap;
  box-shadow: 0 8px 22px -8px rgba(20,22,24,.55);
}
.mm-search-results__more:hover { background: #000; opacity: 1; }
.mm-search-results__more[hidden] { display: none; }   /* respect the hidden attribute (display:block above would otherwise override it) */

/* thin top progress bar shown while a language switch is fetching translations */
#mm-tr-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--brand-blue); z-index: 9999; opacity: 0; pointer-events: none; transition: width .9s ease, opacity .4s ease; }
#mm-tr-bar.is-on { opacity: 1; width: 92%; }
#mm-tr-bar.is-done { opacity: 0; width: 100%; transition: width .2s ease, opacity .35s ease .15s; }

/* Autocomplete state: list items go muted, only the matched substring is dark+bold (Dior). */
.mm-oc--searching .mm-oc-suggest li a { color: var(--muted); }
.mm-oc--searching .mm-oc-suggest li a strong { color: var(--ink); font-weight: 600; }
.mm-oc-suggest__none { color: var(--muted); font-size: 14px; padding: 5px 0; }

.mm-oc-lead { font-size: 14px; font-weight: 500; color: var(--ink); margin: 0 0 10px; }
.mm-oc-link { display: inline-block; font-size: 13px; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.mm-search-input { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--ink); font: inherit; font-size: 1.15rem; text-align: center; margin-bottom: 26px; outline: none; background: none; }
.mm-lang-list { list-style: none; margin: 0; padding: 0; text-align: left; }
.mm-lang-list button { background: none; border: 0; padding: 15px 0; width: 100%; text-align: left; font: inherit; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--line); cursor: pointer; transition: opacity .2s ease; }
.mm-lang-list button:hover { opacity: .55; }

/* ---- Language panel (in the off-canvas drawer) — Dior style, 2 columns grouped by region ---- */
.mm-panel--lang { max-width: max-content; text-align: left; }   /* hug the columns + centre the block (margin:0 auto from .mm-panel); text stays left */
.mm-lang-title { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 26px; }   /* Dior heading treatment */
/* Continents in 3 CONTENT-width columns with one uniform gap — so the whitespace between columns
   is even regardless of how short/long each region's language names are (equal 1fr columns made
   short-content columns leave a bigger trailing gap than wide-content ones). */
.mm-lang-cats { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 68px; row-gap: 40px; }
.mm-lang-col { display: flex; flex-direction: column; gap: 34px; }
.mm-lang-cat__head { font-size: 16px; font-weight: 600; color: var(--ink); margin: 0 0 10px; }   /* Dior region heading: dark + bold */
.mm-lang-cat ul { list-style: none; margin: 0; padding: 0; }
.mm-lang-cat button { background: none; border: 0; padding: 6px 0; width: 100%; text-align: left; line-height: 1.4; font-family: var(--sans); font-size: 14px; font-weight: 400; color: var(--ink); cursor: pointer; transition: opacity .2s ease; }   /* Dior links: 14px / charcoal, comfortable rhythm */
.mm-lang-cat button:hover { opacity: .55; }
@media (max-width: 640px) { .mm-lang-cats { grid-template-columns: repeat(2, 1fr); } }
/* Mobile portrait (phones are <=430px upright): the regions stack, so Asia Pacific would fall to the
   BOTTOM behind Europe + North America. It carries Australia (English) + the Chinese/Cantonese/
   Japanese/Korean/SE-Asian set this audience actually uses, so lift it to the top of the stack. */
@media (max-width: 440px) {
  .mm-lang-cats { grid-template-columns: 1fr; }
  .mm-lang-col--apac { order: -1; }
}

/* ---- Call/Contact panel (in the off-canvas drawer) — LV-style "Call Us" ---- */
.mm-panel--call { max-width: 400px; text-align: left; }   /* centred block (margin:0 auto from .mm-panel), text stays left */
.mm-call-title { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 14px; }
.mm-call-lead { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0 0 30px; max-width: 440px; }
.mm-call-methods { display: flex; flex-direction: column; }
.mm-call-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 13px 0; background: none; border: 0; text-align: left; font: inherit; font-size: 15px; color: var(--ink); text-decoration: none; cursor: pointer; transition: opacity .2s ease; }
.mm-call-row:hover { opacity: .55; }
.mm-call-row__ic { display: inline-flex; align-items: center; justify-content: center; width: 20px; flex: none; color: var(--ink); }
.mm-call-row__ic svg { width: 18px; height: 18px; }
.mm-call-divider { height: 1px; background: var(--line); margin: 22px 0; }
.mm-call-links { display: flex; flex-direction: column; gap: 18px; }
.mm-call-links a { font-size: 14px; color: var(--ink); text-decoration: none; transition: opacity .2s ease; }
.mm-call-links a:hover { opacity: .55; }
/* Visit-us block (address -> gmaps + opening hours), sits above the Common questions links. */
.mm-call-visit { margin: 0 0 22px; }
.mm-call-visit__title { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 14px; }   /* match the "Call Us" title size/style */
.mm-call-visit__addr { display: inline-block; font-size: 14px; line-height: 1.5; color: var(--ink); text-decoration: none; transition: opacity .2s ease; }
.mm-call-visit__addr:hover { opacity: .55; text-decoration: underline; text-underline-offset: 2px; }
.mm-call-visit__hours { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 7px 0 0; }

/* ---- Book-an-appointment form — Dior overlay that lays on TOP of the off-canvas panel ---- */
.mm-apptform { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; background: #fff; border-radius: 6px; transform: translateX(100%); visibility: hidden; transition: transform .42s cubic-bezier(.2,.7,.2,1), visibility .42s; }
.mm-apptform.is-open { transform: none; visibility: visible; }
.mm-apptform__bar { position: relative; display: flex; align-items: center; height: 64px; flex: none; padding: 0 clamp(24px, 3vw, 40px); }
.mm-apptform__bar::after { content: ""; position: absolute; left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); bottom: 0; height: 1px; background: var(--line); }
.mm-apptform__back { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font-family: var(--sans); font-size: 13px; color: var(--ink); cursor: pointer; transition: opacity .2s ease; }
.mm-apptform__back:hover { opacity: .6; }
.mm-apptform__back svg { width: 15px; height: 15px; }
.mm-apptform__x { margin-left: auto; width: 34px; height: 34px; border: 0; background: none; color: var(--muted); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; transition: color .2s ease; }
.mm-apptform__x:hover { color: var(--ink); }
.mm-apptform__x svg { width: 18px; height: 18px; }
.mm-apptform__body { flex: 1; overflow-y: auto; padding: clamp(26px, 4vw, 44px) clamp(24px, 3vw, 40px); }
.mm-apptform__title { font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 12px; }
.mm-apptform__lead { font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0 0 26px; max-width: 440px; }
.mm-apptform__form { display: flex; flex-direction: column; gap: 16px; max-width: 440px; }
.mm-apptform__row { display: flex; gap: 18px; }
.mm-apptform__row .mm-apptform__field { flex: 1; min-width: 0; }
/* Service QUOTE and FINANCE ENQUIRY aren't appointments — no slot to pick, so the date/time row goes
   (the submit handler's NO_DATE list + rest-appointment.php both skip the date requirement for these). */
.mm-apptform[data-appt-type="Service quote"] .mm-apptform__row--when,
.mm-apptform[data-appt-type="Finance enquiry"] .mm-apptform__row--when { display: none; }
.mm-apptform__field { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 15px; color: var(--ink); outline: none; transition: border-color .2s ease; }
.mm-apptform__field::placeholder { color: var(--muted); }
.mm-apptform__field:focus { border-bottom-color: var(--ink); }
/* Touch: >=16px stops iOS auto-zoom on focus (off-canvas appt form + search). */
@media (pointer: coarse) { .mm-apptform__field, .mm-oc-search__input { font-size: 16px; } }
/* ===== SITE-WIDE input hygiene (13/07/2026, Heng) ===== */
/* Touch: force every text field to >=16px so iOS Safari never auto-zooms on focus (desktop unaffected). */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="file"]),
  textarea, select { font-size: 16px !important; }
}
/* Kill the browser autofill yellow everywhere, keeping each field's own bg + text colour (the transition
   defers the yellow ~forever; currentColor keeps light AND dark forms correct). */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: currentColor;
  caret-color: currentColor;
  transition: background-color 100000s ease 0s;
}
/* Smooth marquee placeholder overlay (built by the site-footer JS for placeholders that overflow a
   narrow field): scrolls the text on a seamless CSS loop instead of the laggy char-ticker. */
.mm-phov { position: absolute; z-index: 1; overflow: hidden; pointer-events: none; display: flex; align-items: center; white-space: nowrap; box-sizing: border-box; }
.mm-phov__t { display: inline-flex; white-space: nowrap; will-change: transform; color: var(--muted); animation: mm-phmarq var(--mm-phd, 10s) linear infinite; }
@keyframes mm-phmarq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mm-phov__t { animation: none; } }
/* Marquee colour = each form's placeholder colour (CSS, not JS — Safari's getComputedStyle ::placeholder
   is unreliable). Default var(--muted); per-form overrides below match the real ::placeholder rules. */
.mm-sold__alert-form .mm-phov__t { color: rgba(20, 22, 24, .4); }
.mm-svq__form .mm-phov__t { color: rgba(255, 255, 255, .68); }
.mm-svp-f .mm-phov__t { color: rgba(255, 255, 255, .72); }
.mm-svc-form__f .mm-phov__t { color: #a39d92; }
.mm-aibar .mm-phov__t { color: rgba(255, 255, 255, .72); text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
.mm-phon::placeholder { color: transparent !important; -webkit-text-fill-color: transparent !important; }
/* Kill the browser autofill yellow on the appt form (panel is #fff), keep ink text. */
.mm-apptform__field:-webkit-autofill, .mm-apptform__field:-webkit-autofill:hover,
.mm-apptform__field:-webkit-autofill:focus, .mm-apptform__field:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset; box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 100000s ease 0s;
}
textarea.mm-apptform__field { resize: vertical; min-height: 70px; }
.mm-apptform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mm-apptform__submit { align-self: flex-start; margin-top: 8px; }
.mm-apptform__submit:disabled { opacity: .5; cursor: default; }
.mm-apptform__status { margin: 16px 0 0; font-size: 14px; max-width: 440px; line-height: 1.5; }
.mm-apptform__status.is-ok { color: #047857; }
.mm-apptform__status.is-err { color: #e80012; }
/* Centre the form block in the wide panel (fields + text stay left-aligned). */
.mm-apptform__title, .mm-apptform__lead, .mm-apptform__form, .mm-apptform__status { max-width: 440px; margin-left: auto; margin-right: auto; }
/* ---- Custom Dior date + time pickers (replace the native inputs) ---- */
.mm-dtpick { position: relative; flex: 1; min-width: 0; }
.mm-dtpick__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 15px; color: var(--ink); cursor: pointer; text-align: left; transition: border-color .2s ease; }
.mm-dtpick.is-open .mm-dtpick__trigger, .mm-dtpick__trigger:focus-visible { border-bottom-color: var(--ink); outline: none; }
.mm-dtpick__val { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* "Date"/"Time" placeholder */
.mm-dtpick__val.is-filled { color: var(--ink); }
.mm-dtpick__ic { width: 17px; height: 17px; color: var(--muted); flex: none; }
.mm-dtpick.is-open .mm-dtpick__ic { color: var(--ink); }
.mm-dtpick__pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 36px rgba(20,22,24,.14); padding: 14px; }
.mm-cal { width: 268px; }
.mm-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mm-cal__title { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.mm-cal__nav { width: 30px; height: 30px; border: 0; background: none; color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.mm-cal__nav:hover { background: rgba(0,0,0,.05); }
.mm-cal__wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.mm-cal__wd span { text-align: center; font-size: 11px; color: var(--muted); padding: 3px 0; }
.mm-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mm-cal__day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; border-radius: 7px; transition: background .12s ease, color .12s ease; }
.mm-cal__day--empty { visibility: hidden; pointer-events: none; }
.mm-cal__day:hover:not(:disabled) { background: rgba(2,102,177,.10); }   /* brand-blue tint */
.mm-cal__day.is-today { font-weight: 700; }
.mm-cal__day.is-sel { background: #0266b1; color: #fff; }   /* brand blue */
.mm-cal__day:disabled { color: #c7cbce; cursor: default; }
.mm-time { width: 150px; padding: 6px; }
.mm-time__list { display: flex; flex-direction: column; max-height: 232px; overflow-y: auto; }
.mm-time__slot { border: 0; background: none; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer; text-align: left; padding: 8px 12px; border-radius: 7px; transition: background .12s ease, color .12s ease; }
.mm-time__slot:hover { background: rgba(2,102,177,.10); }
.mm-time__slot.is-sel { background: #0266b1; color: #fff; }
.mm-time__list::-webkit-scrollbar { width: 6px; }
.mm-time__list::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 3px; }
/* Send button: rounded-square corners like the off-canvas + Title Case (not ALL CAPS). */
.mm-apptform__submit { border-radius: 6px; text-transform: none; letter-spacing: normal; }

/* ---- Michi chat — Dior re-skin for the NEW BUILD ONLY ----------------------------------------
   The shared widget (chat.mmcarz.com.au) is token-driven; the theme footer adds .mm-dior to
   #mm-chat-panel/#mm-chat-fab so these overrides apply on the rebuild ONLY (live never loads this
   stylesheet). We override the panel background, text colour and font (-> Manrope/charcoal, Dior),
   and widen it to fill the off-canvas when opened from "Chat online". We deliberately DON'T touch
   --mm-blue* / --mm-surface / --mm-border / the radii, so the blue accent, the speech bubbles
   (user = blue, bot = white+border) and the logo aura ring stay exactly as the widget ships them. */
#mm-chat-panel.mm-dior {
  --mm-bg: #ffffff;     /* Dior white — body matches the white header (Heng); bot bubbles stay distinct via their hairline border */
  --mm-text: #33383c;   /* Dior charcoal (was near-black #1c1a17) */
  --mm-muted: #8b9095;  /* theme muted */
}
#mm-chat-panel.mm-dior,
#mm-chat-panel.mm-dior * {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif !important;
}
/* Generous Dior horizontal padding — ONLY in full-canvas (off-canvas "Chat online") mode, where
   the panel is 760px wide. The narrow FAB-opened floating chat keeps the widget's original padding. */
#mm-chat-panel.mm-dior.mm-chat-fullcanvas .mm-header { padding-left: clamp(20px, 3vw, 30px); padding-right: clamp(16px, 2.4vw, 24px); }
#mm-chat-panel.mm-dior.mm-chat-fullcanvas .mm-body   { padding-left: clamp(20px, 3vw, 30px); padding-right: clamp(20px, 3vw, 30px); }
#mm-chat-panel.mm-dior.mm-chat-fullcanvas .mm-footer { padding-left: clamp(20px, 3vw, 30px); padding-right: clamp(20px, 3vw, 30px); }
/* "MM Carz AI" tagline under the Michi name. 🐛 It was INVISIBLE because the widget's subtitle
   reuses class `.mm-sub`, which collides with THIS theme's nav-dropdown `.mm-sub`
   (position:absolute; opacity:0; visibility:hidden) — and the widget is light-DOM, so the theme
   rule leaked in and hid it. Reset every hiding property so the tagline shows. */
#mm-chat-panel.mm-dior .mm-header .mm-sub {
  position: static; opacity: 1; visibility: visible; transform: none; background: none;
  min-width: 0; padding: 0; margin: 2px 0 0;
  color: var(--mm-muted); font-size: 11.5px; letter-spacing: .02em;
}
/* Quick-reply chips — thin, tight, and ALL exactly the same height. Two fixes for evenness:
   (1) "Chat with a consultant" stacked its Online/Offline status on a 2nd line
       (.mm-chip-label-wrap is flex-direction:column in the widget) -> flatten it to one row;
   (2) plain chips vs the label-wrapped consultant chip rendered at slightly different heights
       -> give every chip a fixed min-height + vertical centering so they all match exactly. */
#mm-chat-panel.mm-dior .mm-quickactions-row { gap: 4px; max-width: 100%; align-items: center; }
#mm-chat-panel.mm-dior .mm-quickaction-btn { padding: 0 11px; min-height: 26px; align-items: center; line-height: 1.2; font-size: 11px; gap: 4px; }
#mm-chat-panel.mm-dior .mm-quickaction-btn svg,
#mm-chat-panel.mm-dior .mm-quickaction-btn .mm-chip-icon { width: 11px !important; height: 11px !important; }
#mm-chat-panel.mm-dior .mm-chip-label-wrap { flex-direction: row; align-items: center; gap: 5px; line-height: 1.2; }
#mm-chat-panel.mm-dior .mm-chip-label-main { font-size: 11px; }
#mm-chat-panel.mm-dior .mm-chip-status { font-size: 9.5px; margin-top: 0; }
/* 🐛 Offline "Chat with a consultant" icon vanished on hover: the widget's generic :hover rule
   forces chip icons white (for the blue-bg hover), but this chip's bg stays white when unavailable
   -> white-on-white. Keep its icon muted (visible) on hover/focus. */
#mm-chat-panel.mm-dior .mm-quickaction-btn--unavailable:hover svg,
#mm-chat-panel.mm-dior .mm-quickaction-btn--unavailable:hover svg *,
#mm-chat-panel.mm-dior .mm-quickaction-btn--unavailable:focus-visible svg,
#mm-chat-panel.mm-dior .mm-quickaction-btn--unavailable:focus-visible svg * {
  color: var(--mm-muted) !important; stroke: var(--mm-muted) !important;
}
/* Remove the divider line under the header so it flows cleanly into the intro (Dior). */
#mm-chat-panel.mm-dior .mm-header { border-bottom: none; }
/* Hide the floating chat bubble while the header off-canvas is open (it otherwise floats over the
   drawer/backdrop). "Chat online"'s programmatic fab.click() still fires on a display:none element. */
html.mm-oc-open #mm-chat-fab { display: none !important; }
/* Same fix for the insights bottom tab bar: it is z-index:1000, the off-canvas is z-index:200, so the
   bar poked THROUGH the open menu (Heng 17/07). Hide it while the menu is open. */
html.mm-oc-open .mm-yt-bottnav { display: none !important; }
/* Full-canvas: opened from the off-canvas "Chat online" -> fill the drawer (wide), not the narrow
   floating panel. Same bounds as .mm-offcanvas__panel (.mm-dior bumps specificity over the widget). */
#mm-chat-panel.mm-chat-fullcanvas {
  top: 8px; right: 8px; bottom: 8px; left: auto;
  width: min(960px, 92vw); max-width: none;
  height: auto; max-height: none;
  border-radius: 6px;
}
@media (max-width: 640px) {
  #mm-chat-panel.mm-chat-fullcanvas { top: 0; right: 0; bottom: 0; left: 0; width: 100%; border-radius: 0; }
}

/* ============================== Hero (Cavalo-style) ============================== */
.mm-hero {
  position: relative; min-height: 100vh; min-height: 100svh; min-height: 100dvh;   /* dvh: no bg gap once the mobile address bar collapses */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff; overflow: hidden; padding: 80px var(--gutter) 140px;
}
.mm-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; }
.mm-hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,22,24,.54) 0%, rgba(20,22,24,.44) 40%, rgba(20,22,24,.76) 100%); }

/* Video hero: poster <img> is the LCP; <video> fades in over it once buffered. */
.mm-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #141618; }
.mm-hero__poster,
.mm-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-hero__video { z-index: 1; opacity: 0; transition: opacity .6s ease; }
.mm-hero__video.is-playing { opacity: 1; }
/* Darkened a notch (top + overall) so the white header/nav text and the frosted filter bar stay
   legible over the brighter driving footage (sunset skies, white cars). */
.mm-hero__media::after { content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(16,18,20,.70) 0%, rgba(16,18,20,.54) 42%, rgba(16,18,20,.84) 100%); }
/* Mobile + reduced motion + low-data: never load/play the clip — the poster carries the hero. */
/* Portrait hero gallery. Slide 1 is always present (it carries the desktop poster via <picture>);
   slides 2+ exist only in portrait, where the video is already hidden and the landscape poster used
   to cover-crop to a 26%-wide slice. Mirrors the .mm-cta__slides pattern — same 1.6s cross-fade,
   same .is-active contract — so both galleries behave identically. */
.mm-hero__slides { position: absolute; inset: 0; z-index: 0; }
.mm-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.mm-hero__slide.is-active { opacity: 1; }
.mm-hero__slide img,
.mm-hero__slide picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-hero__slide--v { display: none; }

@media (max-width: 900px) { .mm-hero__video { display: none; } }
@media (orientation: portrait) and (max-width: 1100px) { .mm-hero__slide--v { display: block; } }
@media (prefers-reduced-motion: reduce) { .mm-hero__video { display: none !important; } }
.mm-hero__inner { position: relative; z-index: 1; max-width: 760px; }
.mm-hero .eyebrow { color: rgba(255,255,255,.8); margin-bottom: 18px; }
.mm-hero h1 { color: #fff; margin-bottom: 14px; font-weight: 300; }
.mm-hero p { color: rgba(255,255,255,.85); font-size: 1.05rem; margin: 0 auto; max-width: 540px; }

/* Filter bar — Cavalo's row of pills + search */
.mm-filterbar {
  position: relative; z-index: 2; width: min(1080px, 96%); margin: 40px auto -88px;
  display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px;
  /* Apple-style frosted glass over the hero, same 6px corners as the off-canvas panel. */
  background: rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
  padding: 16px; border: 1px solid rgba(255,255,255,.55); border-radius: 6px;
  box-shadow: 0 30px 70px -30px rgba(20,22,24,.45);
}
.mm-field { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 8px 14px; border: 1px solid rgba(255,255,255,.5); background: rgba(255,255,255,.3); border-radius: 4px; }
.mm-field label { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.mm-field select { border: 0; background: transparent; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--ink); padding: 2px 0; cursor: pointer; outline: none; -webkit-appearance: none; appearance: none; }
.mm-filterbar .btn { height: 100%; }

/* Filter bar — pills (Make/Model · Price · Year/KMs · More Filters), Dior-modern:
   clean flat bar over the dimmed hero. No apple-glass blur/white-fill (that light glass was
   actually LOWERING the white-text contrast); a whisper of dark tint instead raises legibility
   over bright video frames while still reading as one tappable control. */
.mm-filters2 {
  position: relative; z-index: 3; width: fit-content; max-width: 94%; margin: 36px auto -86px;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; border-radius: 24px;
}
/* Hero bar — fully naked: no panel at all, just white labels + hairline dividers over the (deepened)
   hero dim. Legibility comes from the scrim + text-shadow, not a glass substrate. */
.mm-filters2:not(.mm-filters2--inv) { background: transparent; border: 0; }
/* Inventory/archive bar: NO glass (Heng 11/07/2026). The frosted rgba+blur(40px)+big-shadow block
   that used to live here out-specified the later "row of light cards" re-theme, so the Explore
   page's opened Filter & Sort read as a blurred see-through strip with a stray drop shadow — and
   the blur made the form a containing block that squashed the drawer drill-ins. The re-theme at
   .mm-filters2--inv (further down) now styles every inv-bar context. */
.mm-fpill { position: relative; flex: 0 0 auto; }
.mm-fpill + .mm-fpill > summary { border-left: 0; }
/* No hairline dividers between pills (Heng 10/07/2026 — removed the hero bar's
   rgba(255,255,255,.14) border-left separators; the pills read as one naked row). */
.mm-fpill > summary {
  list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none;
  display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
  padding: 15px 22px; font-size: 14px; font-weight: 500; letter-spacing: .02em;
  color: rgba(255,255,255,.96); text-shadow: 0 1px 3px rgba(0,0,0,.45); transition: background .18s ease;
}
.mm-fpill > summary::-webkit-details-marker { display: none; }
.mm-fpill > summary:hover { background: transparent; }
.mm-fpill[open] > summary { background: #fff; color: var(--ink); text-shadow: none; }
.mm-fpill > summary i { font-style: normal; font-weight: 400; color: #cfe6fb; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; max-width: 130px; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.mm-fpill[open] > summary i { color: #0266b1; text-shadow: none; }
.mm-fpill > summary b { display: inline-block; margin-left: 8px; align-self: center; width: 8px; height: 8px; font-size: 0; border-right: 1.5px solid rgba(255,255,255,.9); border-bottom: 1.5px solid rgba(255,255,255,.9); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
.mm-fpill[open] > summary b { border-right-color: #828a90; border-bottom-color: #828a90; filter: none; transform: translateY(1px) rotate(-135deg); }
/* Hero pills stay WHITE-labelled when open/tapped (the naked bar has no white panel to invert onto);
   the rotated chevron + the dropdown itself signal the open state. Inventory bar keeps dark-on-white. */
.mm-filters2:not(.mm-filters2--inv) > .mm-fpill[open] > summary { background: transparent; color: rgba(255,255,255,.96); text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.mm-filters2:not(.mm-filters2--inv) > .mm-fpill[open] > summary i { color: #cfe6fb; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.mm-filters2:not(.mm-filters2--inv) > .mm-fpill[open] > summary b { border-right-color: rgba(255,255,255,.9); border-bottom-color: rgba(255,255,255,.9); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
/* ^ direct child (>) on purpose: the white-on-open treatment is for the naked hero bar's own pills.
   As a descendant selector it also hit the Price/Year-KMs pills after they relocate into the sheet's
   white More pane -> white-on-white invisible text when opened. */

.mm-fpop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 248px;
  background: #fff; border: 1px solid rgba(20,22,24,.1); border-radius: 12px;
  box-shadow: 0 28px 60px -24px rgba(20,22,24,.3); padding: 20px; text-align: left;
  animation: mmfpop .16s ease;
}
@keyframes mmfpop { from { opacity: 0; transform: translateY(-4px); } }
.mm-fpill:last-of-type > .mm-fpop { left: auto; right: 0; }
.mm-fpop label { display: block; font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: .01em; color: var(--ink); margin: 16px 0 8px; }
.mm-fpop > label:first-child { margin-top: 0; }
/* Price / Year / KM range pickers — custom popover dropdown that copies the Book-an-appointment
   date/time picker: the trigger reuses .mm-dtpick__trigger (underline, muted-until-filled), the
   open list reuses .mm-dtpick__pop + .mm-time + .mm-time__slot (white rounded card, blue hover/sel). */
.mm-fpop--range { min-width: 340px; }
.mm-fsel__pop.mm-time { width: 100%; min-width: 152px; padding: 6px; }
.mm-fsel__pop.mm-time .mm-time__list { max-height: 240px; }
.mm-frange .mm-fsel:last-of-type .mm-fsel__pop { left: auto; right: 0; }   /* max/To opens right-aligned, no overflow */

/* Year/KMs segmented toggle (Cavalo-style) — Dior tracked caps in an inset track, white active thumb. */
.mm-fseg { display: flex; gap: 3px; padding: 3px; background: rgba(20,22,24,.045); border-radius: 4px; margin-bottom: 18px; }
.mm-fseg__btn { flex: 1; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); padding: 8px 16px; border-radius: 3px; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.mm-fseg__btn.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20,22,24,.10); }
.mm-fseg__btn:hover:not(.is-active) { color: var(--ink); }
.mm-ykpane[hidden] { display: none; }

/* ---- More Filters modal (crental-style: body grid + drive/fuel/seats chips + colour swatches) ---- */
.mm-ftrigger { /* a pill-styled <button> that opens the modal (looks like the other summaries) */
  flex: 1 1 auto; min-width: 150px; cursor: pointer; -webkit-user-select: none; user-select: none;
  display: flex; align-items: baseline; gap: 7px; white-space: nowrap;
  padding: 16px 20px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; letter-spacing: .02em;
  color: var(--ink); background: none; border: 0; border-left: 1px solid rgba(20,22,24,.08); transition: background .18s ease;
}
.mm-ftrigger:hover { background: rgba(20,22,24,.03); }
.mm-ftrigger i { font-style: normal; font-weight: 400; color: #0266b1; font-size: 12px; }
.mm-ftrigger b { margin-left: auto; align-self: center; font-size: 9px; color: var(--muted); }

.mm-fmodal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.mm-fmodal[hidden] { display: none; }
.mm-fmodal__scrim { position: absolute; inset: 0; background: rgba(20,22,24,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.mm-fmodal__card { position: relative; z-index: 1; width: min(820px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: #fff; border-radius: 8px; box-shadow: 0 40px 100px -28px rgba(20,22,24,.55); animation: mmfpop .2s ease; }
.mm-fmodal__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; background: none; color: var(--muted);
  cursor: pointer; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; z-index: 2; }
.mm-fmodal__x svg { width: 20px; height: 20px; }
.mm-fmodal__x:hover { background: rgba(20,22,24,.06); color: var(--ink); }
.mm-fmodal__scroll { overflow-y: auto; padding: 40px 40px 10px; }
.mm-fsec { margin-bottom: 30px; }
.mm-fsec__h { font-size: 15px; font-weight: 600; color: var(--ink); letter-spacing: .01em; margin: 0 0 16px; }
.mm-fsec__cols { display: flex; flex-wrap: wrap; gap: 30px 56px; }
.mm-fsec__cols .mm-fsec { margin-bottom: 0; }

.mm-bodygrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 16px; }
.mm-bodycard { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px 12px;
  border: 1px solid transparent; border-radius: 10px; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.mm-bodycard input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mm-bodycard__svg { width: 92px; height: 45px; color: #cbd0d4; transition: color .15s ease; }
.mm-bodycard__img { width: 92px; height: 64px; object-fit: contain; display: block; margin: 0 auto; }
/* the generic ".mm-fpop label" caption style forces these card <label>s to display:block,
   which kills the column flex — re-assert it so the car image centres above its title. */
.mm-fpop label.mm-bodycard { display: flex; flex-direction: column; align-items: center; margin: 0; }
.mm-bodycard__svg .mm-bodycard__wheel { color: #aeb4b8; }
.mm-bodycard__name { font-size: 13px; color: var(--muted); letter-spacing: .01em; transition: color .15s ease; }
.mm-bodycard:hover { background: rgba(20,22,24,.03); }
.mm-bodycard:hover .mm-bodycard__svg { color: #aab0b4; }
.mm-bodycard:has(input:checked) { border-color: #0266b1; background: rgba(2,102,177,.06); }
.mm-bodycard:has(input:checked) .mm-bodycard__svg { color: #5e666b; }
.mm-bodycard:has(input:checked) .mm-bodycard__name { color: var(--ink); font-weight: 600; }
.mm-bodycard:has(input:focus-visible) { outline: 2px solid #0266b1; outline-offset: 1px; border-radius: 10px; }   /* keyboard focus only — no lingering blue ring after a mouse click */

.mm-chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.mm-fpop label.mm-chip { margin: 0; }   /* the generic ".mm-fpop label" caption margin was inflating the chip rows */
.mm-chip { cursor: pointer; }
.mm-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mm-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 50px; padding: 9px 16px;
  border: 1px solid var(--line); border-radius: 6px; font-size: 13px; color: var(--ink); background: #fff; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.mm-chip:hover span { border-color: var(--muted); }
.mm-chip:has(input:checked) span { background: #eef5fb; border-color: #0266b1; color: #0266b1; font-weight: 600; }
.mm-chip:has(input:focus-visible) span { outline: 2px solid #0266b1; outline-offset: 1px; }

/* Paint colours — Dior-style: bigger square swatch with the label centred underneath, flowing across in rows (no dividers). */
.mm-swatches { display: flex; flex-wrap: wrap; gap: 14px; align-content: flex-start; }
.mm-fpop label.mm-swatch { display: flex; flex-direction: column; align-items: center; gap: 7px; width: 58px; cursor: pointer; margin: 0; padding: 0; border: 0; transition: none; }
.mm-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mm-swatch__dot { width: 46px; height: 46px; border-radius: 4px; flex: none; transition: box-shadow .15s ease; }
/* 🚨 The name must never be wider than its swatch. The label sits in a 58px
   column, and one car carrying a VIN in its colour field rendered a 135px word
   that shoved every swatch after it out of line (Heng, 09/08/2026). The facet
   now refuses non-colour values upstream (mmcarz_is_paint_name), so this is the
   second line of defence: whatever arrives, it wraps inside its own column
   instead of breaking the row. overflow-wrap alone is not enough — a VIN is one
   unbroken token, so it needs anywhere. */
.mm-swatch__name { font-size: 13px; font-weight: 400; color: var(--ink); letter-spacing: .01em; text-align: center; transition: color .15s ease; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
.mm-swatch:hover .mm-swatch__name { text-decoration: underline; text-underline-offset: 3px; }
.mm-swatch:has(input:checked) .mm-swatch__name { font-weight: 600; }
/* Selected: dark ring with a white gap (both layers were 2px before — the ink ring hid completely under
   the white one, so picking a colour gave NO visible confirmation). No tick — Heng preference. */
.mm-swatch:has(input:checked) .mm-swatch__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.mm-swatch:has(input:focus-visible) .mm-swatch__dot { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0266b1; }

.mm-fmodal__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 40px; border-top: 1px solid var(--line); }
.mm-fmodal__foot .mm-fclear { position: static; }
.mm-fmodal__foot .btn { padding: 12px 34px; }

@media (max-width: 640px) {
  .mm-fmodal__scroll { padding: 34px 22px 8px; }
  .mm-bodygrid { grid-template-columns: repeat(2, 1fr); }
  .mm-fsec__cols { gap: 24px 32px; }
  .mm-fmodal__foot { padding: 16px 22px; }
}

/* More Filters as a wide dropdown popover (consistent with the other pills) */
.mm-fpop--more { min-width: 420px; max-width: min(92vw, 460px); max-height: min(56vh, 460px); overflow-y: auto; overflow-x: hidden; padding: 20px 22px; }
.mm-fpop--more::-webkit-scrollbar { width: 6px; }
.mm-fpop--more::-webkit-scrollbar-track { background: transparent; }
.mm-fpop--more::-webkit-scrollbar-thumb { background: rgba(20,22,24,.18); border-radius: 3px; }
/* --- Engine-start dropdown parts (mobile portrait only; markup + JS in functions.php). Every part here is
   hidden by default and only turns on inside the @media (max-width:560px) hero block far below. --- */
.mm-fstart, .mm-fptabs, .mm-fpop__foot { display: none; }
/* Michi webchat FAB ducks while the engine-start dropdown is open (class synced in the filter JS). */
#mm-chat-fab { transition: opacity .2s ease, transform .2s ease; }
/* iOS bottom-anchor drift (the same one that floated the filter island — see --mm-vvfix).
   🚨 It MUST be corrected with margin-bottom, not `bottom`: the widget writes
   `inset: auto 16px 16px auto !important` as an INLINE style, and an inline !important beats a
   stylesheet !important at any specificity — verified, `html body #mm-chat-fab { bottom: 111px
   !important }` moved it 0px. `transform` is no good either: four rules already own the fab's
   transform (scale on phones, the in-bar translate on a listing, the insights bottom-nav lift), so
   an extra translate would have to be appended to each of them. margin-bottom is free, and on a
   bottom-anchored fixed box it shifts the border box exactly as `bottom` would. */
#mm-chat-fab, #mm-launcher-bubble { margin-bottom: var(--mm-vvfix, 0px); }
#mm-chat-fab.mm-fab-hide { opacity: 0 !important; pointer-events: none !important; transform: scale(.7); }
/* SHEET-C: page scroll locks while the bottom sheet is open (class synced in the filter JS). */
body.mm-sheet-lock { overflow: hidden; }
/* Up mirrors down exactly: full travel, no opacity pop — same smoothness both ways (curve below is the
   reverse of the down's accelerate curve, so entry decelerates the way the exit accelerates). */
@keyframes mm-sheet-up { from { transform: translateY(103%); } to { transform: none; } }
@keyframes mm-sheet-down { to { transform: translateY(103%); } }
@keyframes mm-aura-spin { to { transform: rotate(1turn); } }
@keyframes mm-spin-cw { to { transform: rotate(1turn); } }
@keyframes mm-spin-ccw { to { transform: rotate(-1turn); } }
@media (prefers-reduced-motion: reduce) { .mm-fstart::before, .mm-fstart::after, .mm-filters2 .mm-fpop { animation: none !important; } }
.mm-fpop__scroll { display: contents; }   /* transparent passthrough on desktop; becomes the scroll region on mobile */
.mm-fpop--more .mm-fsec { margin-bottom: 13px; }
.mm-fpop--more .mm-fsec:last-child { margin-bottom: 2px; }
.mm-fpop--more .mm-fsec__h { font-size: 12px; margin: 0 0 7px; }
.mm-fpop--more .mm-bodygrid { grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)); gap: 10px 16px; justify-items: start; }
.mm-fpop--more .mm-bodycard { padding: 8px 6px 6px; gap: 3px; border-radius: 8px; }
.mm-fpop--more label.mm-bodycard { align-items: center; }   /* image + name centred (Heng: centre the body text label on all devices) */
.mm-fpop--more .mm-bodycard__svg { width: 62px; height: 31px; }
.mm-fpop--more .mm-bodycard__img { width: 78px; height: 54px; }
.mm-fpop--more .mm-bodycard__name { font-size: 12px; }
.mm-fpop--more .mm-fsec__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 26px; align-items: start; }
.mm-fpop--more .mm-chip span { min-width: 44px; padding: 7px 13px; font-size: 12.5px; font-weight: 400; }
/* 4-item chip groups (Cylinders, Drive) lay out as 2 columns rather than an uneven 3 + 1 wrap.
   Content-width columns (not 1fr) keep the two chips close, matching Fuel's tighter flex gap. */
.mm-fpop--more .mm-chips:has(.mm-chip:nth-child(4):last-child) { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; justify-content: start; }
/* Push the Paint heading down so the gap above it is even with the rest of the sections. */
.mm-fpop--more .mm-fsec:has(.mm-swatches) { margin-top: 20px; }
/* Lifestyle gets the same top separation as Paint (both are full-width sections), and both
   headings get a little more space beneath them so their taller swatch/chip rows breathe. */
.mm-fpop--more .mm-fsec--life { margin-top: 20px; }
.mm-fpop--more .mm-fsec:has(.mm-swatches) .mm-fsec__h,
.mm-fpop--more .mm-fsec--life .mm-fsec__h { margin-bottom: 11px; }
/* Lifestyle chips — a line icon leads each chip; icon inherits currentColor (blue when checked). */
.mm-chip--life span { gap: 6px; }
.mm-chip--life span svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mm-chip--life span i { font-style: normal; }
/* Discounts — same chip as Lifestyle directly above it, so the two sections read
   as one drawer rather than two designs. No count on the label (Heng). */
.mm-chip--disc span { gap: 6px; }
.mm-chip--disc span svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mm-chip--disc span i { font-style: normal; }
.mm-fpop--more .mm-swatch__dot { width: 42px; height: 42px; }
/* The dot is centred in a wider (58px) cell, so the first dot sits ~6px right of the "Paint" heading.
   Pull the row left by that inset so the first colour lines up under the word. */
.mm-fpop--more .mm-swatches { margin-left: -6px; gap: 10px 14px; }

/* ---- "Ask MM Carz AI" natural-language search ---- */
/* Small ask button on the Body row inside More Filters (heading left, button right). Same logo as the
   Sell-Your-Car hero. On the homepage it opens the NL bar below the island; on inventory it focuses search. */
.mm-fsec__hrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mm-fsec__hrow .mm-fsec__h { margin: 0; }
.mm-aiask { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; line-height: 0; transition: opacity .15s ease, transform .1s ease; }
.mm-aiask:hover { opacity: .82; transform: translateY(-1px); }
.mm-aiask__pre { font-weight: 500; font-size: 12px; line-height: 1; color: var(--mm-blue, #0266b1); letter-spacing: .01em; }
.mm-aiask__logo { width: 40px; height: 40px; object-fit: contain; flex: 0 0 auto; display: block; }
/* 🚨 Ask MM Carz AI MUST stay visible in the More Filters drill of the off-canvas drawer (Heng
   11/07/2026 — do NOT re-add `.mm-invbar.is-drawer .mm-aiask { display:none }`). Tapping it drills
   back out and focuses the drawer's keyword search row (JS: the [data-ai-ask] handler in functions.php). */
/* The NL bar: drops below the filter island as a clean underline-style field (no pill outline) — WHITE text to match the naked island. */
/* Fully drop it from layout when closed. .mm-aibar's display:flex (below) would otherwise beat the UA
   [hidden]{display:none}, leaving an invisible-but-hoverable box that the ".mm-filters2 *:hover{opacity:1
   !important}" rule reveals on hover — so it must ONLY appear on click (which clears the [hidden] attr). */
.mm-aibar[hidden] { display: none !important; }
.mm-aibar { position: absolute; top: calc(100% + 16px); left: 0; right: 0; z-index: 70;
  display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 16px;
  background: transparent; border: 0; border-radius: 0;
  opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .2s ease; }
/* Underline runs only from the placeholder start (16px) to the arrow icon's right edge (17px), not full width. */
.mm-aibar::after { content: ""; position: absolute; left: 16px; right: 17px; bottom: 0; height: 1px; background: rgba(255,255,255,.4); }
.mm-aibar.is-open { opacity: 1; transform: translateY(0); }
.mm-aibar__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-family: inherit; font-size: 15px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.mm-aibar__input::placeholder { color: rgba(255,255,255,.72); }
.mm-aibar__mic, .mm-aibar__go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; transition: background .15s ease, color .15s ease, transform .1s ease; }
.mm-aibar__mic { background: transparent; color: #fff; margin-right: -10px; }   /* no bg; nudged further toward the arrow */
.mm-aibar__mic:hover { background: transparent; opacity: .78; }
.mm-aibar__mic.listening { background: #e24b4a; color: #fff; animation: mm-aimic 1.2s ease-in-out infinite; }
@keyframes mm-aimic { 0%, 100% { box-shadow: 0 0 0 0 rgba(226,75,74,.5); } 70% { box-shadow: 0 0 0 8px rgba(226,75,74,0); } }
.mm-aibar__go { background: transparent; color: #fff; }   /* no blue pill — plain white arrow */
.mm-aibar__go:hover { background: transparent; opacity: .78; transform: translateY(-1px); }
.mm-aibar.is-busy { pointer-events: none; }
.mm-aibar.is-busy .mm-aibar__go { position: relative; color: transparent; }
.mm-aibar.is-busy .mm-aibar__go::after { content: ""; position: absolute; inset: 0; margin: auto; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: mm-ig-spin .7s linear infinite; }
@media (max-width: 560px) { .mm-aibar__input { font-size: 14px; } }

/* lift open-pill popovers above the "Latest arrivals" section that sits under the hero filter bar */
.mm-filters2 { z-index: 40; }
.mm-fpill[open] { z-index: 60; }
.mm-fpop { z-index: 60; }
/* The hero clips its overflow (for the bg); let an open filter popover spill out below it. */
.mm-hero:has(.mm-fpill[open]) { overflow: visible; }
.mm-frange { display: flex; align-items: center; gap: 10px; }
.mm-frange select { flex: 1; min-width: 0; }
.mm-frange span { color: var(--muted); }
.mm-fpop--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; min-width: 380px; }
.mm-fpop--grid > div > label { margin-top: 16px; }
.mm-fpop--grid > div:nth-child(-n+2) > label { margin-top: 0; }

/* Make/Model checkbox tree */
.mm-fpop--mm { padding: 8px 6px 8px 18px; min-width: 344px; }
.mm-mmtree { max-height: 366px; overflow-y: auto; padding-right: 10px; }
.mm-mmtree::-webkit-scrollbar { width: 6px; }
.mm-mmtree::-webkit-scrollbar-thumb { background: rgba(20,22,24,.18); border-radius: 3px; }
.mm-mmrow { border-bottom: 1px solid rgba(20,22,24,.07); }
.mm-mmrow:last-child { border-bottom: 0; }
.mm-mmhead { display: flex; align-items: stretch; }
.mm-mmmake { flex: 1; display: flex; align-items: center; gap: 11px; padding: 12px 2px; cursor: pointer; }
.mm-mmmake .mm-mmname { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: .01em; }
.mm-mmcount { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Make + model counts hug the name (were pushed to the far right by the margin-left:auto above). */
.mm-mmmake .mm-mmcount, .mm-mmmodel .mm-mmcount { margin-left: 0; }
.mm-mmtoggle { width: 34px; align-self: stretch; background: none; border: 0; cursor: pointer; position: relative; flex: 0 0 auto; }
.mm-mmtoggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-right: 1.4px solid var(--muted); border-bottom: 1.4px solid var(--muted); transform: translate(-50%,-70%) rotate(45deg); transition: transform .2s ease; }
.mm-mmrow.is-open .mm-mmtoggle::after { transform: translate(-50%,-30%) rotate(-135deg); }
.mm-mmmodels { display: none; grid-template-columns: 1fr 1fr; gap: 2px 16px; padding: 0 0 12px 30px; }
.mm-mmrow.is-open .mm-mmmodels { display: grid; }
.mm-mmmodel { display: flex; align-items: center; gap: 9px; padding: 6px 0; cursor: pointer; }
.mm-mmmodel .mm-mmname { font-size: 13px; color: var(--ink); }
.mm-mmmodel .mm-mmcount { font-size: 10.5px; }
/* The generic ".mm-fpop label" caption style (Price/Year field captions) was bleeding onto
   the make/model checkbox rows — forcing display:block (which nullified align-items:center and
   dropped the checkbox to the text baseline), plus uppercase + a stray 16/7 margin. Re-assert a
   clean flex row so each label centres against its box, Cavalo-style. */
.mm-fpop label.mm-mmmake, .mm-fpop label.mm-mmmodel, .mm-fpop label.mm-fcheck {
  display: flex; align-items: center; margin: 0;
  text-transform: none; letter-spacing: normal; font-weight: 400; color: var(--ink);
}
.mm-mmname, .mm-mmcount { line-height: 16px; }

/* "More Filters" categorical facets (Body / Drive / Fuel / Seats / Colour) reuse the exact
   Make/Model checkbox-row look: flex row, centred box, right-aligned count, natural case. */
/* (legacy facet popover width removed — superseded by the .mm-fpop--more rule above) */
.mm-fgroup { min-width: 0; }
.mm-mmtree--flat { max-height: 246px; margin-top: 6px; padding-right: 8px; }
.mm-fcheck { gap: 10px; padding: 7px 2px; cursor: pointer; }
.mm-fcheck .mm-mmname { font-size: 13.5px; color: var(--ink); }
.mm-fcheck .mm-mmcount { font-size: 10.5px; }
.mm-mmtree input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid rgba(20,22,24,.35); border-radius: 2px; background: #fff; cursor: pointer; position: relative; transition: border-color .15s ease, background .15s ease; }
.mm-mmtree input[type="checkbox"]:checked { background: var(--ink); border-color: var(--ink); }
.mm-mmtree input[type="checkbox"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.mm-mmtree input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 2px; left: 5px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }

.mm-factions { display: contents; }   /* desktop: transparent — search + clear sit inline in the glass bar. Becomes the bottom actions row on mobile portrait (see the <=560 block). */
.mm-factive { display: none; }   /* active-filters summary — mobile-portrait only */
.mm-fgo { flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; justify-content: center; min-width: 56px; padding: 0 18px; border: 0; background: none; color: rgba(255,255,255,.95); cursor: pointer; border-radius: 0 24px 24px 0; transition: background .18s ease; }
.mm-fgo svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.mm-fgo:hover { background: transparent; }
.mm-filters2.has-filters .mm-fgo { border-radius: 0; }
/* Desktop: search icon hidden on load; appears only once a filter is selected (mmRefreshClear
   toggles .has-filters live on every checkbox change — same signal the Clear link uses). Scoped
   >760px so the mobile-portrait actions row keeps its own show/hide behaviour untouched. */
@media (min-width: 761px) {
  .mm-filters2:not(.has-filters) .mm-fgo { display: none; }
}
/* Tablet portrait (Heng 10/07/2026): with pill summaries the active bar can overflow and wrap
   awkwardly — drop Clear onto its OWN row, right-aligned so it sits under the search icon
   (fclear right padding ≈ centres "Clear" under the fgo glyph). Hero bar only. */
@media (min-width: 761px) and (max-width: 1024px) {
  .mm-filters2:not(.mm-filters2--inv) .mm-fgo { margin-left: auto; }   /* search -> right end of its wrapped row */
  .mm-filters2:not(.mm-filters2--inv) .mm-fclear { flex: 1 1 100%; justify-content: flex-end; padding: 6px 12px 0 0; }   /* Clear -> own row, right-aligned under the glyph */
}
/* Clear only appears once a filter is active */
.mm-fclear { flex: 0 0 auto; display: none; align-items: center; padding: 0 16px; font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.95); opacity: .7; text-shadow: 0 1px 2px rgba(0,0,0,.4); text-decoration: none; }
.mm-filters2.has-filters .mm-fclear { display: flex; }
.mm-fclear:hover { opacity: 1; }
.mm-fclear__x { display: none; width: 18px; height: 18px; }   /* desktop shows the "Clear" text; the ✕ icon is a mobile-only affordance (see the <=560 block) */
/* round the bar's end pieces so the heavier corner radius reads cleanly */
.mm-fpill:first-child > summary { border-top-left-radius: 24px; border-bottom-left-radius: 24px; }
.mm-fclear { border-top-right-radius: 24px; border-bottom-right-radius: 24px; }
@media (max-width: 760px) {
  .mm-filters2 { margin-bottom: -118px; }
  .mm-fpill { min-width: 50%; flex-basis: 50%; }
  .mm-fpill > summary { border-left: 0; }
  .mm-fpop, .mm-fpop--grid, .mm-fpop--mm { min-width: min(300px, 86vw); }
  .mm-fpop--grid, .mm-mmmodels { grid-template-columns: 1fr; }
}

/* ---- Mobile portrait (<=560px): homepage hero filter stacks. Row 1 = Make/Model, Row 2 = More Filters
   (both full-width; chevrons aligned; no divider between them). Price + Year/KMs are relocated (by
   mmFilterReflow in functions.php) into the top of the More Filters popover. The search + Clear form a
   bottom "actions" row that stays hidden until a filter is active, then appears with a full-width divider
   line and the search icon on the right, aligned under the chevrons. Inventory bar excluded (own drawer). */
@media (max-width: 560px) {
  .mm-filters2:not(.mm-filters2--inv) { width: 92%; max-width: 92%; margin-top: 14px; }   /* CTA hugs the heading (base is 36px) */

  /* ---- Island → round ENGINE START/STOP CTA. The two pills stay in the DOM (their popovers are the
     dropdown's two panes) but their summaries are hidden; the engine button + the mm-fptabs bar inside
     each pane drive them instead (JS in functions.php). ---- */
  .mm-filters2:not(.mm-filters2--inv) { justify-content: center; }
  /* min-width:0 kills the <=760 block's "min-width:50%" pill grid — a closed pill must take NO width
     here, or the flex row wraps and the engine button lands off-centre. */
  .mm-filters2:not(.mm-filters2--inv) > .mm-fpill { position: static; flex: 0 0 auto; min-width: 0; }
  .mm-filters2:not(.mm-filters2--inv) > .mm-fpill > summary { display: none; }
  .mm-filters2:not(.mm-filters2--inv) > .mm-fstart {
    position: relative; z-index: 0;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto; padding: 0; background: none; border: 0; color: #fff; cursor: pointer; font-family: inherit;
    transition: transform .12s ease;
  }
  .mm-fstart:active { transform: scale(.95); }
  /* LED aura ring in the MM Carz tri-colour (light blue -> dark blue -> red), like a keyless start
     button's illuminated ring: a crisp ring (::before) + a soft blurred glow (::after), slowly rotating.
     Masked to a RING (not a disc) so the face can stay fully transparent; they hang off the button at
     z-index:-1 (negative-z pseudos paint above their own element's background, so they can't live on
     the ring span itself). */
  /* ===== BMW-M RING TRIAL (11/07/2026, Heng — compare vs the old tri-colour aura). Three independent
     M-colour arcs (light-blue outer, dark-blue mid, red inner) that START clustered at the top like the
     M roundel, then rotate: red CW, dark-blue CCW, light-blue CW. Each is a masked ring layer with its
     own spin. TO REVERT: delete this block, un-comment the OLD aura below, drop the .mm-fstart__mring
     span in functions.php. */
  .mm-fstart__mring { position: absolute; inset: -7px; border-radius: 50%; z-index: -1; pointer-events: none; }
  /* Solid white ring BASE fills the whole 6px band so the white areas are ONE continuous line - no dark
     gaps between the tracks (that gap was the "border" Heng saw on the plain-white areas). The 3 colour
     arcs ride ON TOP at 3 touching sub-bands (outer lb / mid db / inner r): where a colour is present it
     replaces the white there; at the start all 3 stack at the top like the M roundel. */
  .mm-fstart__mring::before {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff;
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6.2px), #000 calc(100% - 6px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - 6.2px), #000 calc(100% - 6px));
  }
  .mm-marc {
    position: absolute; inset: 0; border-radius: 50%; will-change: transform;
    background: conic-gradient(from -100deg, transparent 0 6deg, var(--c) 16deg 184deg, transparent 194deg 360deg);
  }
  .mm-marc--lb { --c: #2ea4df;   /* outer sub-band, clockwise */
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 2.2px), #000 calc(100% - 2px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - 2.2px), #000 calc(100% - 2px));
    animation: mm-spin-cw 6s linear infinite;
  }
  .mm-marc--db { --c: #123f88;   /* middle sub-band, anti-clockwise */
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 4.2px), #000 calc(100% - 4px), #000 calc(100% - 2px), #0000 calc(100% - 1.8px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - 4.2px), #000 calc(100% - 4px), #000 calc(100% - 2px), #0000 calc(100% - 1.8px));
    animation: mm-spin-ccw 7s linear infinite;
  }
  .mm-marc--r { --c: #e30613;    /* inner sub-band, clockwise */
    -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6.2px), #000 calc(100% - 6px), #000 calc(100% - 4px), #0000 calc(100% - 3.8px));
            mask: radial-gradient(farthest-side, #0000 calc(100% - 6.2px), #000 calc(100% - 6px), #000 calc(100% - 4px), #0000 calc(100% - 3.8px));
    animation: mm-spin-cw 5s linear infinite;
  }
  @media (prefers-reduced-motion: reduce) { .mm-marc { animation: none; } }
  /* OLD tri-colour aura (kept for quick revert):
  .mm-fstart::before, .mm-fstart::after {
    content: ""; position: absolute; inset: -2px; border-radius: 50%; z-index: -1;
    background: conic-gradient(from 200deg, #5bc2f4, #0266b1 38%, #e03131 72%, #5bc2f4);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
    animation: mm-aura-spin 6s linear infinite;
  }
  .mm-fstart::after { filter: blur(6px); opacity: .8; }
  */
  /* ===== BMW-M RING TRIAL END ===== */
  /* Transparent face — hairline bezel + text over the dimmed hero. Depth comes from shadows only
     (inset top highlight + inset bottom shade + a grounding drop shadow), so it stays see-through. */
  .mm-fstart__ring {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    width: 80px; height: 80px; border-radius: 50%;
    border: 0;
    background: transparent;
    box-shadow: none;   /* no bevel/drop-shadow — the 3 M rings are the only outline (Heng: no borders) */
  }
  .mm-fstart__eng, .mm-fstart__ss { font-size: 6.5px; font-weight: 700; letter-spacing: .22em; color: rgba(255,255,255,.92); text-shadow: 0 1px 3px rgba(0,0,0,.55); }
  .mm-fstart__pw { width: 17px; height: 17px; margin: 1px 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }

  /* ===== SHEET-C START — both panes open as a tall IG-style bottom sheet (grabber + scrim + slide-up).
     TO REVERT to the below-the-button dropdown: delete from here to "SHEET-C END" and un-comment the
     DROPDOWN block right after it. Height is the one tunable: --mm-sheet-h. ===== */
  .mm-filters2:not(.mm-filters2--inv) { --mm-sheet-h: 86svh; }
  /* While a pane is open: lift the form above the fixed header (z 100) and paint a full-screen scrim
     behind the sheet. The scrim is the form's own ::after, so tapping it IS tapping the form — outside
     any pill — which the global outside-click handler already treats as "close". */
  .mm-filters2:not(.mm-filters2--inv):has(> .mm-fpill[open]) { z-index: 500; }
  .mm-filters2:not(.mm-filters2--inv):has(> .mm-fpill[open])::after {
    content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(10,14,18,.5);
  }
  .mm-filters2:not(.mm-filters2--inv) > .mm-fpill > .mm-fpop {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; min-width: 0; max-width: none;
    height: var(--mm-sheet-h); max-height: none;
    display: flex; flex-direction: column; overflow: hidden;
    padding: 26px 16px calc(4px + env(safe-area-inset-bottom, 0px));   /* top clears the grabber; slim bottom so the footer CTA hugs the screen edge (nearer the Safari bottom bar); env() still clears the home indicator */
    border: 0; border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px -18px rgba(0,0,0,.45);
    animation: mm-sheet-up .24s cubic-bezier(.3,0,.6,1);   /* reverse of the .is-closing exit curve */
  }
  .mm-filters2:not(.mm-filters2--inv) > .mm-fpill > .mm-fpop::before {   /* grabber */
    content: ""; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 2px; background: #d9dcdf;
  }
  /* Engine-button count badge — replaces the old active-filters strip: shows how many filters are set
     once the sheet is dismissed (synced in recount()). */
  .mm-fstart__n {
    position: absolute; top: -3px; right: -6px; z-index: 1; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: #0266b1; color: #fff; font-size: 10.5px; font-weight: 700;
    display: none; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.4);
  }
  .mm-fstart__n.is-on { display: inline-flex; }
  /* ===== SHEET-C END ===== */
  /* ---- DROPDOWN (pre-sheet) block, kept for easy revert — un-comment if SHEET-C is removed: ----
  .mm-filters2:not(.mm-filters2--inv) > .mm-fpill > .mm-fpop {
    left: 0; right: 0; top: calc(100% + 14px); width: auto; min-width: 0; max-width: none;
    display: flex; flex-direction: column; max-height: min(62vh, 500px); overflow: hidden;
    padding: 14px 16px 12px;
  }
  ---- */
  .mm-filters2:not(.mm-filters2--inv) > .mm-fpill > .mm-fpop > .mm-fpop__scroll { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* The tree scrolls via .mm-fpop__scroll here — kill its own cap/scrollbar (incl. the stale inline
     max-height the pill-toggle handler sets; same fix as the inv drawer). */
  .mm-filters2:not(.mm-filters2--inv) .mm-fpop--mm .mm-mmtree { max-height: none !important; overflow: visible; padding-right: 0; }
  /* mm-fptabs, NOT mm-ftab(s) — that name belongs to the featured-features category pills (24px capsules);
     sharing it made these render as capsules AND restyled that section's tabs on mobile. */
  .mm-filters2:not(.mm-filters2--inv) .mm-fptabs { display: flex; flex: 0 0 auto; background: #f2f2f2; border-radius: 3px; padding: 3px; margin: 0 0 12px; }
  .mm-fptab { flex: 1; border: 0; background: none; padding: 8px 0; font-size: 12.5px; color: #6b7178; border-radius: 2px; cursor: pointer; font-family: inherit; }
  .mm-fptab.is-on { background: #fff; color: #1a2733; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
  .mm-filters2:not(.mm-filters2--inv) > .mm-fpill > .mm-fpop > .mm-fpop__foot {
    display: flex; align-items: center; gap: 12px; flex: 0 0 auto; padding: 11px 0 0; margin-top: 10px; border-top: 1px solid #ececec;
  }
  .mm-fpop__foot .mm-fpop__reset { flex: 0 0 auto; text-align: center; background: none; border: 1px solid #d5d9dc; border-radius: 6px; color: #6b7178; font-size: 13px; cursor: pointer; padding: 11px 14px; white-space: nowrap; font-family: inherit; transition: opacity .15s ease; }
  .mm-fpop__foot .mm-fpop__reset:disabled { opacity: .4; pointer-events: none; }   /* greyed until a filter is active (synced in recount) */
  /* SHEET-C: slide-down exit — .is-closing plays before the JS actually flips the details closed.
     Full selector so it outranks the slide-up rule above. */
  .mm-filters2:not(.mm-filters2--inv) > .mm-fpill > .mm-fpop.is-closing { animation: mm-sheet-down .2s cubic-bezier(.4,0,.7,1) forwards; }
  .mm-fpop__foot .mm-fpop__see { margin-left: auto; flex: 1 1 auto; max-width: none; background: #1a2733; color: #fff; border: 0; border-radius: 6px; padding: 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; }

  /* Active-filters strip — RETIRED by SHEET-C: the sheet footer covers apply/reset and the engine
     button's count badge covers the "filters pending" signal. TO REVERT (bring the underline strip
     back): un-comment the .has-filters rule below — the follow-on rules (::after line, factive,
     fclear, fgo) are inert while it's off. */
  .mm-factions { display: none; }
  /* .mm-filters2:not(.mm-filters2--inv).has-filters > .mm-factions {
    display: flex; position: absolute; left: 0; right: 0; top: calc(100% + 10px);
    align-items: center; gap: 6px; padding-bottom: 5px;
  } */
  /* "Ask Michi" NL search open → hide the active-filters strip so its underline + search icon don't
     duplicate the Ask Michi bar's own search. It comes back when Ask Michi closes (data-open cleared) or
     the user opens another filter (which closes Ask Michi — see functions.php pill toggle handler). */
  .mm-filters2:not(.mm-filters2--inv).has-filters:has(.mm-aibar[data-open="1"]) > .mm-factions { display: none; }
  .mm-filters2:not(.mm-filters2--inv).has-filters > .mm-factions::after {   /* the line, inset: filters-start (22px) -> search-icon-end (16px) */
    content: ""; position: absolute; left: 22px; right: 16px; bottom: 0; height: 1px; background: rgba(255,255,255,.5);
  }
  /* active selections, left-aligned under the pill headings (22px pill padding), single-line ellipsis */
  .mm-filters2:not(.mm-filters2--inv).has-filters > .mm-factions > .mm-factive {
    display: block; flex: 1 1 auto; min-width: 0; order: 1; text-align: left;
    padding: 4px 0 4px 22px; font-size: 13px; color: rgba(255,255,255,.95); text-shadow: 0 1px 3px rgba(0,0,0,.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* ✕ clear, to the left of search */
  .mm-filters2:not(.mm-filters2--inv).has-filters > .mm-factions > .mm-fclear { order: 2; display: flex; align-items: center; flex: 0 0 auto; padding: 4px; border-radius: 0; opacity: .95; }
  .mm-filters2:not(.mm-filters2--inv).has-filters > .mm-factions > .mm-fclear .mm-fclear__t { display: none; }
  .mm-filters2:not(.mm-filters2--inv).has-filters > .mm-factions > .mm-fclear .mm-fclear__x { display: block; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
  /* search on the right, aligned under the chevrons */
  .mm-filters2:not(.mm-filters2--inv).has-filters > .mm-factions > .mm-fgo { order: 3; align-self: center; flex: 0 0 auto; min-width: 0; padding: 4px 16px 4px 4px; border-radius: 0; }

  /* Relocated Price / Year-KMs — stacked sections pinned to the top of the More Filters popover */
  .mm-morestack:empty { display: none; }
  .mm-morestack:not(:empty) { margin-bottom: 14px; padding-bottom: 4px; border-bottom: 1px solid rgba(20,22,24,.1); }
  .mm-morestack .mm-fpill { position: static; display: block; width: 100%; min-width: 0; flex-basis: auto; }
  .mm-morestack .mm-fpill > summary {
    padding: 11px 2px; color: var(--ink); text-shadow: none; font-size: 13px; font-weight: 600;
    justify-content: space-between; border-radius: 0;
  }
  .mm-morestack .mm-fpill[open] > summary { background: transparent; }
  /* active value (e.g. "$5k - $20k") rides right, tight against the chevron */
  .mm-morestack .mm-fpill > summary i { color: var(--muted); text-shadow: none; max-width: none; font-weight: 400; margin-left: auto; text-align: right; }
  .mm-morestack .mm-fpill > summary b { border-right-color: #828a90; border-bottom-color: #828a90; filter: none; }
  .mm-morestack .mm-fpop { position: static; box-shadow: none; border: 0; border-radius: 0; padding: 2px 0 8px; min-width: 0; animation: none; }
  .mm-morestack .mm-fpop--range { min-width: 0; }
}

/* ============================== Catalogue grid (LV-style) ============================== */
.mm-cat-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 38px; }
.mm-cat-head h1 { margin: 0; }
.mm-cat-count { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.mm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 1.6vw, 26px); }
/* Square corners (Heng, 02/08/2026). overflow:hidden stays — it is what keeps
   the media's zoom-on-hover inside the tile, and has nothing to do with the radius. */
.mm-card { display: flex; flex-direction: column; color: var(--ink); text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 0; overflow: hidden; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; }
.mm-card:hover { opacity: 1; transform: translateY(-6px); box-shadow: 0 28px 50px -30px rgba(20,22,24,.32); border-color: transparent; }   /* opacity:1 overrides the global a:hover{opacity:.62} link-dim — without it the tile washes white on hover */
.mm-card__media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--bg-soft); }
.mm-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.mm-card:hover .mm-card__media img { transform: scale(1.06); }
.mm-card__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px; }
.mm-card__title { font-family: var(--serif); font-size: 1rem; font-weight: 500; line-height: 1.3; margin: 0; }
.mm-card__meta { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
/* "Deposit received" above a card's title (Heng 02/08/2026). Sized and coloured
   like .mm-card__meta beside it, but sentence case, NOT uppercase (Heng): it is
   a plain statement about the car, and shouting it turns a fact into a label. */
.mm-card__status { font-size: 11px; text-transform: none; letter-spacing: .04em; color: var(--muted); margin: 0 0 3px; }
.mm-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.mm-card__price { font-size: 0.92rem; font-weight: 500; color: var(--ink); letter-spacing: .01em; margin-top: 5px; }
.mm-card__egc { margin-left: 5px; font-size: .62em; font-weight: 500; letter-spacing: .07em; color: var(--muted); vertical-align: 0.45em; }

/* ── The struck-through "was" price ────────────────────────────────────────────
   ONE rule for every price on the site — grid card, listing header, sticky bar,
   carousel slide, wishlist row, compare table, featured hero, every picker sheet.
   It has to be one rule because the same car's saving must look identical
   wherever a buyer meets it, and there are ~20 places a price is drawn.

   Three properties are doing the work, and each is why it can be shared:
     font: inherit  — it IS the price's font, so it always matches whatever
                      surface it lands on (serif hero, sans card, 12px mobile).
     font-size: .78em — "slightly smaller" measured against its OWN parent, so it
                      scales with a clamp()ed price instead of needing a value per
                      surface.
     currentColor + opacity — the only colour trick that survives BOTH contexts:
                      --ink on a white card AND white-on-photograph in the
                      .mm-grid--inv grid, with no override needed for either.
                      A hard-coded var(--muted) would disappear over a dark photo.

   🚨 text-decoration:none is not tidying. The element is <s>, so browsers draw a
   horizontal line-through by default — leave it on and every price wears TWO
   strikes, the browser's flat one and ours at 20°. */
.mm-was {
  position: relative; display: inline-block; margin-left: .5em;
  font: inherit; font-size: .78em; color: inherit; opacity: .55;
  text-decoration: none; white-space: nowrap;
}
/* The slash. A rotated 1px rule rather than a linear-gradient because the angle
   then stays CONSTANT: a gradient hard-stop drawn corner-to-corner shallows out
   as the number gets longer, so $9,800 and $139,800 would wear different angles
   in the same grid. Heng picked the constant-angle version (20°) on 09/08/2026.

   🚨 The LENGTH is capped so the stroke stays inside the digits (Heng, 09/08/2026:
   "the slash line can not go out so fit within price"). A rotated line grows in
   BOTH axes, and the vertical growth is what escapes: measured on the live grid,
   a full-width line across "$32,800" spans 1.38em vertically while the glyph ink
   is only 1.085em tall, so it broke out ~0.15em above and below the number.

   Both caps are needed, and each guards a different axis:
     100%  — horizontal. Without it a short price like $800 gets a line wider
             than its own text, which pokes out the sides.
     3.1em — vertical. sin(20°) x 3.1em = 1.06em, just inside the 1.085em ink
             height. This is the longest a 20° line can be and still be contained
             by the digits it crosses.
   So on a long price the stroke crosses the middle rather than running corner to
   corner — that is the trade for keeping one constant angle everywhere. */
.mm-was::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: min(100%, 3.1em); height: 1px; background: currentColor;
  transform: translate(-50%, -50%) rotate(-20deg); transform-origin: center;
  pointer-events: none;
}
/* The featured hero is the one price that is itself a FLEX container (line ~4258),
   so it already puts a 12px gap between its children and the margin above lands on
   top of it — measured 25px there against ~13px everywhere else, which reads as the
   two figures having come apart. The container's own gap is the correct spacing. */
.mm-fcar__price .mm-was { margin-left: 0; }
/* Sold cars, and any price that is not a live offer, never carry a was — a
   was/now beside a completed sale is a claim about a transaction that already
   happened. Belt to the PHP's braces (see single-listings.php / sold-cards.php). */
.mm-card--sold .mm-was, .mm-lx__cardhead .mm-lx__trim + .mm-lx__price .mm-was { display: none; }
.mm-card__price--tba { font-size: .9rem; font-weight: 500; color: var(--muted); }
.mm-card__go { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft); color: var(--ink); flex: 0 0 auto; transition: background .3s ease, color .3s ease, transform .3s ease; }
.mm-card__go svg { width: 16px; height: 16px; }
.mm-card:hover .mm-card__go { background: var(--ink); color: #fff; transform: translateX(2px); }

/* Hover preview swaps the hero <img>'s own src (see archive-listings.php) — no overlay elements,
   so there's no separate layer to composite and no white blank. Nothing to style here. */

/* ---- Wishlist heart (top-right of the tile) — white, fills red when saved ---- */
.mm-card__fav { position: absolute; top: 14px; right: 14px; z-index: 4; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-card__fav svg { width: 19px; height: 19px; fill: none; stroke: #fff; stroke-width: 1.5; filter: drop-shadow(0 1px 4px rgba(20,22,24,.5)); transition: transform .2s ease, fill .2s ease, stroke .2s ease; }
.mm-card__fav:hover svg { transform: scale(1.12); }
.mm-card__fav.is-active svg { fill: #e80012; stroke: #e80012; }

/* Trending counters (views/visits/likes/shares/compares) across the TOP of the car photo — same
   treatment as the title/price at the bottom: plain white 13px text + icons on a mirrored gradient
   scrim, no pill backgrounds. Rendered server-side ONLY when the grid is sorted by Trending. */
.mm-card__trend { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; gap: 10px; padding: 12px 14px 36px; pointer-events: none;
  background: linear-gradient(to bottom, rgba(20,22,24,.52) 0%, rgba(20,22,24,.14) 58%, rgba(20,22,24,0) 100%); }
.mm-card__trend-chip { display: inline-flex; align-items: center; gap: 5px; color: #fff; font-family: var(--sans); font-size: 12.5px; font-weight: 400; letter-spacing: .01em; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,.45); font-variant-numeric: tabular-nums; }
.mm-card__trend-chip svg { width: 13px; height: 13px; fill: currentColor; flex: none; opacity: .92; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.mm-card__trend-chip svg.mm-tc-stroke { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }   /* stroke-drawn icons (share paper-plane, same glyph as the listing page) */
@media (max-width: 560px) { .mm-card__trend { display: none; } }   /* mobile portrait: skip the chips (Heng) */

/* Filters (catalogue) */
.mm-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 34px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.mm-filters select { padding: 11px 16px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13px; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.mm-filters .btn { padding: 11px 22px; }

/* ============================== Inventory archive — quiet intro + LV grid ============================== */
/* A Dior-quiet centered intro (heading + Filter & Sort CTA + count) over an edge-to-edge 4-column
   catalogue grid (Louis Vuitton all-shoes). The global `body { padding-top: 58px }` already clears
   the fixed header, so .mm-inv adds NONE of its own (a second 58px here was the "too much top space"). */

/* ---- Quiet centered intro: heading -> Filter & Sort CTA -> count (Dior all-shoes spacing) ---- */
.mm-invintro {
  min-height: 350px; box-sizing: border-box; padding: 24px var(--gutter);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
/* The visible group (heading + CTA + count). Positioning anchor for the filter dropdown so the panel
   hangs directly UNDER the count without joining the flex flow (grid never moves). */
.mm-invintro__stack { position: relative; display: flex; flex-direction: column; align-items: center; }
.mm-invintro__title { margin: 0; font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.01em; }
/* "Filter & Sort": cloned from Dior — soft-cornered white chip, borderless, gentle all-round shadow. */
.mm-invintro__filter {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: clamp(20px, 2.6vw, 30px);
  width: 130px; height: 45px; padding: 0; box-sizing: border-box; border: 0; border-radius: 8px; background: #fff;
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .01em; color: var(--ink); cursor: pointer;
  box-shadow: 0 4px 16px rgba(20, 22, 24, .15);
  transition: box-shadow .18s ease, background .18s ease, opacity .25s ease, transform .25s ease, visibility .25s;
}
.mm-invintro__filter:hover { box-shadow: 0 6px 20px rgba(20, 22, 24, .2); }
.mm-invintro__filter svg { width: 18px; height: 18px; }
.mm-invintro__filter.is-open { background: var(--bg-soft); }
/* Top CTA fades out once scrolled (hands off to the sticky bottom pill). */
.mm-invintro__filter.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px); }
/* Sticky "Filter & Sort" island — fixed ~20px from the bottom, fades in on scroll-down.
   +--mm-vvfix: iOS Safari leaves a bottom-anchored fixed element at the height the toolbar USED to
   occupy when the toolbar collapses on scroll, so the island floated ~44px clear of the screen edge
   until a later scroll forced a reflow (Heng, iPad, 07/08/2026). */
.mm-invsticky {
  position: fixed; bottom: calc(20px + var(--mm-vvfix, 0px)); left: 50%; top: auto; margin-top: 0; z-index: 60;
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(14px);
}
.mm-invsticky.is-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.mm-invintro__count { margin: clamp(16px, 2.2vw, 26px) 0 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---- Filters: HIDDEN on load; the CTA reveals a single blended row. Spans nearly the full screen
   width so Sort can sit hard against the right edge; the 4 filters (+ search) stay centered. ---- */
.mm-invbar {
  position: absolute; top: calc(100% + 25px); left: 50%;   /* between the CTA and grid, nudged up slightly */
  transform: translateX(-50%) translateY(-6px);
  width: calc(100vw - 20px); z-index: 50; text-align: left;   /* near-full width, a few px from each edge */
  background: none; border: 0; border-radius: 0; box-shadow: none;
  opacity: 0; visibility: hidden; pointer-events: none;   /* fades in/out via .is-open (toggle JS) */
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.mm-invbar.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity .25s ease, transform .25s ease, visibility 0s;
}
/* ============================================================================
   OFF-CANVAS DRAWER (Dior): the bottom sticky pill slides this in from the right.
   The same band + the same filter form, reflowed into a vertical click-accordion.
   ============================================================================ */
/* Drawer chrome + scrim are inert until drawer mode. */
.mm-invbar__bar, .mm-invbar__actions { display: none; }
.mm-invscrim { position: fixed; inset: 0; background: rgba(20, 22, 24, .28); z-index: 999; border: 0;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); opacity: 0; transition: opacity .4s ease; will-change: opacity; }
  /* blur was 20px full-viewport — the most expensive thing a page can composite; on a busy
     GPU its .4s fade-in dropped frames so the panel appeared to lag behind the "blurred
     background" (Heng 11/07/2026). 12px reads the same frosted but roughly halves the raster. */
.mm-invscrim[hidden] { display: none; }
.mm-invscrim.is-on { opacity: 1; }
/* Lock the page behind the drawer WITHOUT losing scroll position (body fixed at -scrollY in JS). */
html.mm-inv-lock body { position: fixed; left: 0; right: 0; width: 100%; }
html.mm-inv-lock #mm-chat-fab { display: none !important; }   /* hide the Michi chat orb while the drawer is open (beats the widget's inline display) */

/* The off-canvas panel — one clean, unambiguous FLUSH RIGHT-EDGE side drawer at EVERY width (Heng
   12/07/2026). Full height, anchored to the right edge (inset: 0 0 0 auto), no floating gap / no
   centering / no bottom-sheet — the old base-bottom-sheet + @media-481-override tangle (plus the
   inline .mm-invbar translateX(-50%) centering) resolved inconsistently and the panel "floated
   randomly". This single high-specificity rule (0,2,0 / 0,3,0) beats the inline base every time.
   Parked fully off the right edge (translateX(100%)); slides to translateX(0) = flush against the
   edge. Explore (#mm-invfilters) AND Recently Sold (#mm-soldbar) both carry .mm-invbar. */
.mm-invbar.is-drawer {
  position: fixed; inset: 8px 8px 8px auto;   /* 8px gap top/right/bottom, anchored to the right edge (floating card) */
  width: min(380px, calc(100vw - 16px)); max-width: none; margin: 0; z-index: 1000;
  background: #fff; border-radius: 4px;   /* subtle corners — less rounded (Heng 12/07/2026) */
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 1; visibility: visible;
  transform: translateX(calc(100% + 8px)) !important;   /* parked fully off the right edge (past the 8px gap) — !important so the inline .mm-invbar / .is-open translateX(-50%) centering can NEVER leak in and make the drawer float */
  transition: transform .42s cubic-bezier(.2, .7, .2, 1);
  will-change: transform; backface-visibility: hidden;   /* pure GPU transform */
}
.mm-invbar.is-drawer.is-open { transform: translateX(0) !important; }   /* settles 8px from the right edge (floating card) */
/* Mobile portrait ONLY: a BOTTOM SHEET instead of a right-side card — full width with the same 8px gap
   on every edge, slides UP from the bottom / down to close (Heng 12/07/2026). Placed after the base
   drawer rules + same specificity, so its !important transforms win when this media matches; tablet/
   desktop keep the right-side card. */
@media (max-width: 480px) and (orientation: portrait) {
  .mm-invbar.is-drawer { inset: 8px; width: auto; max-width: none; transform: translateY(calc(100% + 8px)) !important; }   /* full-width, 8px all round; parked below -> slides up */
  .mm-invbar.is-drawer.is-open { transform: translateY(0) !important; }
}
/* The inline filter row is RETIRED at every width — the top "Filter & Sort" island now opens the
   off-canvas DRAWER (right-slide) on desktop, laptop, tablet and phone alike (Heng 12/07/2026). Keep the
   inline bar hidden on page load at ALL widths (a stray rule was surfacing it on tablet portrait).
   `.is-drawer` excluded so the drawer shows; `.is-open` excluded so an arrived-with-URL-filters reveal can
   still surface the active-filters row. !important to beat whatever surfaced it. */
.mm-invbar:not(.is-drawer):not(.is-open) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Car-picker filter drawer (finance + compare pages) — a clone of this inventory off-canvas, reused via
   mmcarz_car_filter_modal(). Hidden until the Filter button; JS adds .is-drawer (flips it to the fixed
   drawer above) then .is-open (slides in). Sits above the picker sheet. The Reset control is a <button>
   here (inventory uses an <a>), so normalise its chrome and keep it clickable. */
.mm-invbar--pick:not(.is-drawer) { display: none !important; }
.mm-invbar--pick.is-drawer { z-index: 1200; }
.mm-invscrim--pick { z-index: 1180; }
/* Re-assert the theme vars on the drawer. The finance calculator (.mm-fin) blanks --ink et al., which
   broke inheritance into this fixed drawer — the checked checkbox's `background: var(--ink)` (line ~678)
   went invalid and stayed white, hiding the white ::after tick. Same fix the old .mmf-modal used. */
.mm-invbar--pick { --ink:#33383c; --muted:#8b9095; --line:#e6e4e0; --bg-soft:#f8f8f8; --soft:#f8f8f8; }
/* Make/Model checked box: hardcode the dark fill. Its base rule uses `background: var(--ink)` with no
   fallback, and var(--ink) resolves invalid inside the finance calculator context (so it stayed white and
   the white ::after tick was invisible). !important + a literal colour is immune to that. */
.mm-invbar--pick .mm-mmtree input[type="checkbox"]:checked { background: #33383c !important; border-color: #33383c !important; }
/* Reset here follows the SAME grey-when-idle / dark-when-active state machine as the Explore drawer
   (base .mm-invbar__reset greyed + disabled; the :has(.has-filters) rule below darkens + enables it).
   This used to force it permanently dark + clickable, so it never greyed out — the whole point of the
   "clone the explore off-canvas" ask (Heng 12/07/2026). Keep only the <button> appearance reset; leave
   colour / pointer-events / cursor / border to the shared base + :has() rules so the two drawers match. */
.mm-invbar--pick .mm-invbar__reset { -webkit-appearance: none; appearance: none; }
/* Force the dark "Show N cars" fill — the finance calculator context resets button backgrounds, which
   otherwise wins over the base .mm-invbar__see and leaves white-on-transparent (invisible) text. */
.mm-invbar--pick .mm-invbar__see { background: var(--ink, #33383c) !important; color: #fff !important; font: inherit; }
/* Hide the Michi chat orb (#mm-chat-fab, z-index 999998) while the drawer is open so it can't cover
   the footer — mirrors the inventory drawer's html.mm-inv-lock #mm-chat-fab rule (we don't body-lock
   here because the picker already prevents page scroll). */
html.mm-drawer-open #mm-chat-fab { display: none !important; }
html.mm-finpop-open #mm-chat-fab, html.mm-finmodal-open #mm-chat-fab { display: none !important; }   /* hide the Michi orb while the finance CTA popup is open (both pages) */

/* Header (title + close) and footer (reset + apply). The divider is a short, centered hairline
   (inset from the edges) — same treatment as the header off-canvas bar, not a full-width border. */
.mm-invbar.is-drawer .mm-invbar__bar { display: flex; align-items: flex-start;
  position: relative; flex: 0 0 auto; padding: 22px 24px 30px; }   /* 30px gap below the heading to the line */
.mm-invbar.is-drawer .mm-invbar__bar::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 0;
  height: 1px; background: var(--line, #e6e7e9); }   /* wider, centered hairline */
/* Heading centered; the close (and back) stay pinned to the edges. */
.mm-invbar.is-drawer .mm-invbar__title,
.mm-invbar.is-drawer.is-subopen .mm-invbar__subtitle { position: absolute; left: 50%; top: 22px; transform: translateX(-50%);
  text-align: center; white-space: nowrap; }
.mm-invbar.is-drawer .mm-invbar__x { margin-left: auto; }
.mm-invbar__title { font-family: var(--sans); font-size: 13px; font-weight: 400; letter-spacing: .01em; color: var(--ink); }
.mm-invbar__x { display: inline-flex; padding: 4px; margin: -4px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.mm-invbar__x svg { width: 22px; height: 22px; }
.mm-invbar.is-drawer .mm-invbar__actions { display: flex; gap: 8px; flex: 0 0 auto;
  padding: 8px 8px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line, #e6e7e9); }   /* line sits close above the buttons; buttons reach the edges */
/* Reset: greyed/disabled until a filter is active; enabled (darker) once something is selected. */
.mm-invbar__reset { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; height: 45px; padding: 0 18px;
  border: 1px solid var(--line, #e6e7e9); border-radius: 4px; background: none; cursor: default; pointer-events: none;
  font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: .01em; color: #b9bdc1; text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease; }
.mm-invbar:has(.mm-filters2--inv.has-filters) .mm-invbar__reset { color: var(--ink) !important; border-color: #cfd3d7; cursor: pointer; pointer-events: auto; }   /* !important: the base grey .mm-invbar__reset color otherwise wins the cascade over this :has() rule (Chrome :has()+<a> quirk); the darker active state needs the guaranteed win */
.mm-invbar:has(.mm-filters2--inv.has-filters) .mm-invbar__reset:hover { background: var(--bg-soft); }   /* hover = light grey background only; text stays */
.mm-invbar__see { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; height: 45px; padding: 0 18px;
  border: 0; border-radius: 4px; background: var(--ink); color: #fff;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: .02em; cursor: pointer; }

/* Body reflow: vertical, scrollable; Sort first (Dior order), updated line dropped. Rows start
   just under the header's grey hairline (was a 70px "Dior gap" — Heng 11/07/2026: too much air,
   bring the first row up close to the line). */
.mm-invbar.is-drawer .mm-invbar__inner { flex: 1 1 auto; flex-direction: column; flex-wrap: nowrap; align-items: stretch; padding: 14px 0 0; overflow-y: auto; }
/* 🚨 nowrap is critical: the inline-bar rule `.mm-invbar__inner { flex-wrap: wrap }` (in @media
   max-width:900) leaks into the drawer. A fixed-height COLUMN flex + wrap makes overflowing content
   wrap into a 2nd COLUMN to the right — so in mobile LANDSCAPE (short drawer) the filter pills flew
   off-screen (x~829) leaving Sort + an empty body. nowrap keeps one column that scrolls. (Heng 12/07/2026) */
.mm-invbar.is-drawer .mm-invbar__center { flex-wrap: nowrap; }
.mm-invbar.is-drawer .mm-invbar__updated { display: none; }
.mm-invbar.is-drawer .mm-invbar__center { width: 100%; flex-direction: column; align-items: stretch; gap: 0; }   /* was width:auto — in the wider tablet/landscape/desktop drawer that collapsed the filter column to ~180px content-width (the pills squished to the left, Sort stayed full-width). 100% fills the drawer like the Sort row does. (Heng 12/07/2026) */
.mm-invbar.is-drawer .mm-invbar__center > .mm-filters2--inv { width: 100%; flex-direction: column; flex-wrap: nowrap; gap: 0; }
/* Kill the inv bar's glass INSIDE the drawer with enough specificity to beat
   .mm-filters2.mm-filters2--inv (0,2,0): the lighter re-theme rule (0,1,0 — "row of light cards")
   silently LOST backdrop-filter/background/box-shadow/position to the glass rule. The surviving
   backdrop-filter + position:relative made the FORM the containing block for the drilled
   Make/Model + More Filters sub-panel (.mm-fpop is position:absolute, top/bottom in drawer
   coordinates) — inside the appointment picker's Filter drawer the drill panel rendered as a
   ~57px clipped strip (Heng 11/07/2026). Statting + unfiltering re-anchors the sub-panel to the
   drawer so it fills header-to-footer, exactly like the Explore page drawer. */
.mm-invbar.is-drawer .mm-filters2--inv {
  position: static; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.mm-invbar.is-drawer .mm-invbar__sort { order: -1; flex: 0 0 auto; width: 100%; justify-content: stretch; }   /* don't grow in the column */
.mm-invbar.is-drawer .mm-invsort { display: block; width: 100%; }

/* Each pill (+ the sort pill) becomes a full-width accordion row. The divider is an inset hairline on
   the summary (aligned with the row text), not a full-width border. */
.mm-invbar.is-drawer .mm-filters2--inv .mm-fpill,
.mm-invbar.is-drawer .mm-fpill--sort { flex: none; width: 100%; border-bottom: 0; }
.mm-invbar.is-drawer .mm-fpill > summary { position: relative; }
.mm-invbar.is-drawer .mm-fpill > summary::after { content: ""; position: absolute; left: 32px; right: 32px; bottom: 0;
  height: 1px; background: var(--line, #e6e7e9); }
.mm-invbar.is-drawer .mm-fpill > summary,
.mm-invbar.is-drawer .mm-filters2--inv .mm-fpill > summary,
.mm-invbar.is-drawer .mm-fpill--sort > summary {
  justify-content: space-between; gap: 10px; padding: 19px 32px; border-radius: 0; font-size: 14px; font-weight: 500;
}
.mm-invbar.is-drawer .mm-fpill > summary:hover { background: none; }   /* drawer is click, not hover */
/* Chevron points RIGHT when closed, rotates DOWN when open (border-arrow pills). */
.mm-invbar.is-drawer .mm-filters2--inv .mm-fpill > summary b { transform: rotate(-45deg);
  border-right-color: var(--muted); border-bottom-color: var(--muted); }
.mm-invbar.is-drawer .mm-filters2--inv .mm-fpill[open] > summary b { transform: rotate(45deg); }
/* Sort chevron (border-arrow): right when closed, down when open — same as the other inline rows. */
.mm-invbar.is-drawer .mm-fpill--sort > summary b { transform: rotate(-45deg); transition: transform .2s ease; }
.mm-invbar.is-drawer .mm-fpill--sort[open] > summary b { transform: rotate(45deg); }

/* Inline popover content shown below its row (Sort/Price/Year-KMs — NOT the drill pills). */
.mm-invbar.is-drawer .mm-fpop,
.mm-invbar.is-drawer .mm-fpop--grid,
.mm-invbar.is-drawer .mm-fpop--range,
.mm-invbar.is-drawer .mm-fpop--sort {
  position: static; transform: none; left: auto; right: auto; top: auto; bottom: auto;
  width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible;
  margin: 0; padding: 16px 32px 20px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.mm-invbar.is-drawer .mm-filters2--inv .mm-fclear { display: none; }   /* drawer uses the footer "Reset all filters" */

/* Keyword search: same icon-expand feel as the top bar — icon left, expands right on hover/focus, no border. */
.mm-invbar.is-drawer .mm-invsearch { display: flex; align-items: center; width: 100%; padding: 16px 32px; position: relative; }
.mm-invbar.is-drawer .mm-invsearch__btn { justify-content: flex-start; }   /* icon sits at the row's left edge, in line with the labels */
.mm-invbar.is-drawer .mm-invsearch__input { position: absolute; left: 80px; top: 50%; transform: translateY(-50%);
  width: 0; opacity: 0; pointer-events: none; height: auto; padding: 0; background: none; border: 0; box-shadow: none;
  font-size: 16px; }   /* 16px: iOS Safari force-zooms the page when a focused field is < 16px — this stops the zoom-in on tap */
.mm-invbar.is-drawer .mm-invsearch:hover .mm-invsearch__input,
.mm-invbar.is-drawer .mm-invsearch.is-open .mm-invsearch__input,
.mm-invbar.is-drawer .mm-invsearch__input:focus { width: calc(100% - 112px); opacity: 1; pointer-events: auto; border: 0; }

/* ---- Hybrid drill-in: Make/Model + More Filters slide into a sub-panel over the body; the header
   morphs into a back bar. Sort/Price/Year-KMs keep the inline expand above. ---- */
.mm-invbar.is-drawer { --mm-head: 74px; --mm-foot: calc(77px + env(safe-area-inset-bottom)); }
/* Header swaps title -> back arrow + section name while drilled. */
.mm-invbar__back, .mm-invbar__subtitle { display: none; }
.mm-invbar__back { padding: 4px; margin: -4px 6px -4px -4px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.mm-invbar__back svg { width: 22px; height: 22px; }
.mm-invbar.is-drawer.is-subopen .mm-invbar__title { display: none; }
.mm-invbar.is-drawer.is-subopen .mm-invbar__back { display: inline-flex; }
.mm-invbar.is-drawer.is-subopen .mm-invbar__subtitle { display: block; flex: 1 1 auto; font-size: 13px; font-weight: 500; color: var(--ink); }
/* Drill rows keep a right-pointing chevron (they navigate, they don't expand in place). */
.mm-invbar.is-drawer .mm-fpill--drill[open] > summary b { transform: rotate(-45deg); }
/* The pill's own popover becomes the sliding sub-panel — sits between header and footer, scrolls itself.
   The pill is normally position:relative (the popover anchors to it); make it static so the sub-panel
   anchors to the whole drawer instead, so top/bottom span the body rather than the short pill row. */
.mm-invbar.is-drawer .mm-fpill--drill { position: static; }
.mm-invbar.is-drawer .mm-fpill--drill .mm-fpop {
  position: absolute; top: var(--mm-head); bottom: var(--mm-foot); left: 0; right: 0; z-index: 4;
  width: auto; min-width: 0; max-width: none; max-height: none !important; margin: 0; padding: 22px 32px 22px;   /* !important beats the stale inline max-height the desktop-dropdown sizing JS leaves on this shared element (functions.php ~L783), so the drilled panel fills the drawer body top->bottom instead of being chopped short */
  background: #fff; border: 0; border-radius: 0; box-shadow: none; overflow-x: hidden; overflow-y: auto;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.mm-invbar.is-drawer .mm-fpill--drill.is-drilled .mm-fpop { transform: translateX(0); }
.mm-invbar.is-drawer .mm-fpill--drill .mm-fpop { scrollbar-width: none; }   /* hide the scrollbar (still scrolls) */
.mm-invbar.is-drawer .mm-fpill--drill .mm-fpop::-webkit-scrollbar { display: none; }
.mm-invbar.is-drawer .mm-mmrow .mm-mmname { cursor: pointer; }   /* tap a make to reveal its models */
/* In the drawer the sub-panel scrolls, so the make tree shows ALL makes (no nested 366px cap + scrollbar). */
.mm-invbar.is-drawer .mm-mmtree { max-height: none !important; overflow: visible; padding-right: 0; }   /* same stale-inline-max-height fix as the More Filters panel above */

/* Active filters on the row (Dior): a (N) count by the label + the selected value(s) muted on the right. */
.mm-invbar.is-drawer .mm-fpill > summary i,
.mm-invbar.is-drawer .mm-fpill--sort > summary .mm-fpill__val {
  margin-left: auto; padding-left: 12px; max-width: 60%; color: var(--muted); font-style: normal; font-weight: 400;
  font-size: 13px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mm-fcount { display: none; }   /* only surfaced inside the drawer rows */
.mm-invbar.is-drawer .mm-fcount { display: inline; margin-left: 3px; color: #0266b1; font-size: 12px; font-weight: 500; }
/* "Updated" (left) and sort (right) are equal flex:1 sides — that keeps the centre group centred. */
.mm-invbar__inner { padding: 0 10px; display: flex; align-items: center; }   /* a little breathing room at the edges of the inline bar (drawer overrides to 0) */
/* Match the filter pills: same ink colour, weight + size; a green "live" dot leads it. */
.mm-invbar__updated { flex: 1 1 0; min-width: 0; margin: 0; padding-left: 2px; display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 500; letter-spacing: normal; color: var(--ink); white-space: nowrap; overflow: hidden; }
.mm-invbar__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
.mm-invbar__center { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; width: min(860px, 60vw); }
.mm-invbar__center > .mm-filters2--inv { flex: 1 1 auto; width: auto; min-width: 0; }
.mm-invbar__sort { flex: 1 1 0; display: flex; justify-content: flex-end; margin-top: 0; }

/* Re-theme the shared pill bar from "glass capsule over the hero" to "row of light cards". */
.mm-filters2--inv {
  position: static; width: 100%; max-width: none; margin: 0; gap: 12px; flex-wrap: wrap; align-items: stretch;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Pills fill the row evenly when they fit, but once active-filter labels get long the row WRAPS to a
   second line (like the homepage bar) instead of truncating — no min-width:0, so a pill never shrinks
   below its own label. */
.mm-filters2--inv .mm-fpill { flex: 1 1 auto; }
/* Borderless, blended pills — each filter stretches evenly across the row (flex: 1 1 0). */
.mm-filters2--inv .mm-fpill > summary,
.mm-filters2--inv .mm-fpill:first-child > summary {
  justify-content: space-between; gap: 10px; padding: 12px 14px;
  border: 0; border-radius: 8px; background: none;
  color: var(--ink); text-shadow: none; font-size: 13.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.mm-filters2--inv .mm-fpill > summary:hover { background: var(--bg-soft); }
.mm-filters2--inv .mm-fpill > summary i { color: #0266b1; text-shadow: none; max-width: none; }
.mm-filters2--inv .mm-fpill > summary b { border-right-color: var(--muted); border-bottom-color: var(--muted); filter: none; }
.mm-filters2--inv .mm-fpill[open] > summary { background: var(--bg-soft); color: var(--ink); box-shadow: none; }
.mm-filters2--inv .mm-fpill[open] > summary b { border-right-color: #0266b1; border-bottom-color: #0266b1; }

/* old filter-submit magnifier — superseded by the standalone keyword search (filters apply live). */
.mm-filters2--inv .mm-fgo { display: none; }
/* clear -> hidden until a filter is active */
.mm-filters2--inv .mm-fclear {
  display: none; flex: 0 0 auto; align-items: center; padding: 0 8px; border-radius: 0;
  color: var(--muted); text-shadow: none; opacity: 1; font-size: 12px; letter-spacing: .02em;
}
.mm-filters2--inv.has-filters .mm-fclear { display: flex; }
.mm-filters2--inv .mm-fclear:hover { color: var(--ink); opacity: 1; }

/* Active-filter count on the "Filter & Sort" CTA — renders "Filter & Sort (3)", live-updated in JS.
   :empty hides it when nothing's active. */
.mm-invfilter__n { color: var(--muted, #6b7177); font-weight: 600; }
.mm-invfilter__n:empty { display: none; }

/* AJAX live-filter: dim the grid while the new results load */
.mm-inv.is-loading .mm-grid--inv,
.mm-inv.is-loading .mm-invempty { opacity: .4; pointer-events: none; transition: opacity .15s ease; }

/* ---- Sort: a dropdown PILL styled like the other filters (it's a .mm-fpill, but outside
   .mm-filters2--inv, so it gets its own copy of the blended-pill look) ---- */
.mm-invsort { display: flex; align-items: center; }
.mm-fpill--sort > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 12px 4px 12px 10px; border: 0; border-radius: 8px; background: none; text-shadow: none;
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--ink); transition: background .15s ease;
}
.mm-fpill--sort > summary::-webkit-details-marker { display: none; }
.mm-fpill--sort > summary:hover { background: var(--bg-soft); }
.mm-fpill--sort > summary .mm-fpill__lbl { color: var(--muted); }
.mm-fpill--sort > summary .mm-fpill__val { color: var(--ink); }
.mm-fpill--sort > summary b {
  display: inline-block; margin-left: 4px; width: 7px; height: 7px; font-size: 0; filter: none;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg); transition: transform .2s ease;
}
.mm-fpill--sort[open] > summary { background: var(--bg-soft); }
.mm-fpill--sort[open] > summary b { transform: translateY(1px) rotate(-135deg); }
.mm-fpill--sort > .mm-fpop { left: auto; right: 0; }   /* open right-aligned — it sits at the screen edge */
.mm-fpop--sort { min-width: 210px; padding: 6px; }
.mm-sortopt {
  display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 6px;
  background: none; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--ink); transition: background .12s ease;
}
.mm-sortopt:hover { background: var(--bg-soft); }
.mm-sortopt.is-sel { color: #0266b1; font-weight: 600; }

/* ---- Keyword search: a lone icon; the underline input grows to the RIGHT of it (absolute, so the
   icon stays put instead of being shoved left) on hover / click ---- */
.mm-invsearch { flex: 0 0 auto; position: relative; display: inline-flex; align-items: center; }
.mm-invsearch__btn {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0;
  border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 8px; transition: background .15s ease;
}
.mm-invsearch__btn:hover { color: var(--muted); }   /* no background fill on hover — just a subtle colour shift */
.mm-invsearch__btn svg { width: 18px; height: 18px; }
.mm-invsearch__input {
  position: absolute; left: calc(100% - 4px); top: 50%; transform: translateY(-50%);
  width: 0; min-width: 0; padding: 7px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0;
  background: none; font: inherit; font-size: 13.5px; color: var(--ink); outline: none; opacity: 0; pointer-events: none;
  transition: width .28s ease, opacity .22s ease, border-color .28s ease;
}
.mm-invsearch:hover .mm-invsearch__input,
.mm-invsearch.is-open .mm-invsearch__input,
.mm-invsearch__input:focus { width: 170px; opacity: 1; pointer-events: auto; border-bottom-color: var(--ink); }
.mm-invsearch__input::placeholder { color: var(--muted); }

/* ---- LV edge-to-edge catalogue grid: full-bleed, hairline separators, minimal caption ---- */
.mm-grid--inv {
  grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0;
}
/* No separators between tiles — seamless edge-to-edge grid (Heng: remove the grey line between images). */
.mm-grid--inv .mm-card,
.mm-grid--inv .mm-card:hover {
  position: relative; border: 0; border-radius: 0; background: var(--bg); transform: none;
  box-shadow: none;
}
.mm-grid--inv .mm-card__media { aspect-ratio: 4 / 3; background: var(--bg-soft); }
.mm-grid--inv .mm-card:hover .mm-card__media img { transform: none; }   /* no zoom/"brightness" pop on hover — the photo-preview swap is the only hover motion */
/* LV/Dior load-in: every photo fades in once decoded; until then its tile shows a soft pulsing grey
   skeleton. Lazy rows below the fold resolve calmly when you scroll fast, instead of popping in. */
.mm-grid--inv .mm-card__media img, .mm-grid--inv .mm-editorial__img { opacity: 0; transition: opacity .55s ease; }
/* Swipe-through-photos affordance: a LV/Dior hairline progress bar flush on the card's bottom border
   — full-bleed, segments touching (no gaps), the current fifth solid white over a faint track. Built by
   mmInitCardSwipe (narrow widths only) so it renders only where the swipe works. touch-action:pan-y lets
   a vertical drag scroll the page while a horizontal drag scrubs. */
.mm-card__media[data-scrub] { touch-action: pan-y; }
/* LV/Dior sliding filmstrip layered over the hero: a horizontal strip of the frames that slides
   with the drag (see current + next mid-swipe). Frames are cached (warm), so no fade/skeleton. */
.mm-scrubtrack { position: absolute; inset: 0; z-index: 1; display: flex; flex-wrap: nowrap; will-change: transform; }
.mm-scrubtrack img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1 !important; transition: none !important; animation: none !important; }
.mm-card__media[data-scrub] img { -webkit-user-drag: none; user-select: none; }
.mm-scrubbar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 1.5px; background: rgba(255,255,255,.32); pointer-events: none; }
.mm-scrubbar__fill { display: block; height: 100%; width: calc(100% / var(--n, 5)); background: #fff; box-shadow: 0 0 3px rgba(0,0,0,.5); transform: translateX(calc(var(--pos, 0) * 100%)); }
.mm-grid--inv .mm-card__media.is-loaded img, .mm-grid--inv .mm-editorial.is-loaded .mm-editorial__img { opacity: 1; }
.mm-grid--inv .mm-card__media:not(.is-loaded), .mm-grid--inv .mm-editorial:not(.is-loaded) { animation: mm-skel 1.5s ease-in-out infinite; }
@keyframes mm-skel { 0%, 100% { background-color: var(--bg-soft); } 50% { background-color: #efece7; } }
@media (prefers-reduced-motion: reduce) {
  .mm-grid--inv .mm-card__media:not(.is-loaded), .mm-grid--inv .mm-editorial:not(.is-loaded) { animation: none; }
  .mm-grid--inv .mm-card__media img, .mm-grid--inv .mm-editorial__img { transition: none; }
}
/* Full-viewport editorial break: an LV/Dior campaign image spanning the whole grid, flush with the
   cards above and below (no gaps — reads as one continuous grid), ~2-3 viewports into the scroll. */
.mm-grid--inv .mm-editorial { grid-column: 1 / -1; height: 100vh; height: 100svh; position: relative; overflow: hidden; background: var(--bg-soft); }
.mm-grid--inv .mm-editorial__img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Tablet + mobile PORTRAIT: the 3:2 AI campaign breaks were 100vh full-width, so object-fit:cover
   chopped the landscape shot to a narrow vertical strip. Match the band to the image's aspect so
   the WHOLE campaign scene shows, full-bleed width, uncropped. Desktop/landscape keeps 100vh. */
@media (max-width: 1024px) and (orientation: portrait) {
  .mm-grid--inv .mm-editorial { height: auto; aspect-ratio: 3 / 2; }
}
/* LV all-shoes style: name + price OVERLAID on the image, bottom-left, in label-s type. White (with a
   soft bottom scrim) for legibility over photos — LV's dark subtle text only works on white product shots. */
.mm-grid--inv .mm-card__body { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 2px; padding: 46px 16px 14px;
  background: linear-gradient(to top, rgba(20,22,24,.52) 0%, rgba(20,22,24,.14) 58%, rgba(20,22,24,0) 100%); }
.mm-grid--inv .mm-card__title { font-family: var(--sans); font-size: 13px; font-weight: 400; line-height: 1.3; letter-spacing: .01em; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45); margin: 0; }
/* On THIS grid the card body sits over the photograph, so --muted grey is close
   to unreadable and the line needs the title's treatment, not a quieter one.

   🚨 It first shipped at 10px / opacity .82 and was hard to read — three things
   stacked the wrong way: it is the SMALLEST text on the card, at the LOWEST
   opacity, sitting HIGHEST in the body, which is exactly where the scrim is
   thinnest (the gradient fades upward, .52 -> .14 -> 0). Deepening the scrim was
   the obvious fix and is the wrong one: it darkens the lower third of all 49
   photographs to rescue one line on one card, and measured side by side it
   barely helps, because the line sits above where the extra darkness lands.
   Fixing the text costs nothing anywhere else. */
.mm-grid--inv .mm-card__status {
  color: #fff; opacity: 1; font-size: 12px; font-weight: 500; letter-spacing: .02em;
  text-shadow: 0 1px 4px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.5); margin: 0 0 2px; }
.mm-grid--inv .mm-card__price { font-family: var(--sans); font-size: 13px; font-weight: 400; color: rgba(255,255,255,.86); margin: 0; letter-spacing: .01em; text-shadow: 0 1px 3px rgba(0,0,0,.45); }

/* Coming-soon teaser cards (end of grid): a "reveal" tile — the ribbon-covered car floats on a
   soft light-blue panel, a corner "Coming soon" tag + a wishlist heart, dark readable caption
   (no white-on-light). Static (not a link) so no hover-scrub/zoom. */
.mm-card--soon { cursor: default; }
.mm-card--soon .mm-card__media { display: grid; place-items: center; background: #fff; }
/* ---- the robe and the ribbon take the car's paint -------------------------
   A coming-soon card has no photograph, so the placeholder carries the colour
   instead: white behind, the cover and its bow in the car's paint, and the
   ribbon to match. --rc is set per card by mmcarz_render_soon_card().

   The artwork is one pale-blue satin with folds, so a flat fill would throw the
   shading away and leave a silhouette. grayscale() reduces the folds to pure
   luminance (brightness+contrast widen that range, because multiply is a
   product and only preserves the range it is given), then a colour layer over
   it in multiply, masked by the SAME png so the tint stops at the car's edge.
   isolation:isolate keeps the blend off the tile behind it.
   Mirrors the office Cars screen's .robe — keep the two in step. */
.mm-card--soon .mm-card__robe { position: relative; display: block; width: 82%;
  isolation: isolate; filter: drop-shadow(0 10px 18px rgba(40, 70, 120, .12)); }
.mm-card--soon .mm-card__soonimg { width: 100%; height: auto; display: block; }
.mm-card--soon.is-tinted .mm-card__soonimg { filter: grayscale(1) brightness(.92) contrast(1.45); }
.mm-card--soon.is-tinted .mm-card__robe::after { content: ""; position: absolute; inset: 0;
  background: var(--rc); mix-blend-mode: multiply; pointer-events: none;
  /* --robe is whichever cover this body type uses (mmcarz_robe_art). It must track the
     <img>, not be hardcoded, or a ute's paint would be cut to a sedan's outline. The
     fallback keeps a card that somehow ships without the variable rendering correctly. */
  -webkit-mask: var(--robe, url(assets/covered-car.png)) center/contain no-repeat;
          mask: var(--robe, url(assets/covered-car.png)) center/contain no-repeat; }
/* The pill does NOT take the paint. It used to whenever the paint was dark enough
   to carry white type, so a red car got a red pill and a black car a black one —
   the same label reading as several different states down one grid. "Coming soon"
   means the same thing on every car, so it is always the brand blue (Heng). */
.mm-grid--inv .mm-card--soon .mm-card__soonimg { opacity: 1; }   /* static placeholder: skip the JS fade-in reveal (it never observes the appended soon cards) */
.mm-grid--inv .mm-card--soon .mm-card__media:not(.is-loaded) { animation: none; }
.mm-card--soon .mm-card__soontag { position: absolute; top: 14px; left: 14px; z-index: 3; background: var(--brand-blue, #0266b1); color: #fff; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
/* coming-soon card mobile portrait: the centred 82% placeholder reaches under the corner pill on a
   narrow card — shrink the car and tighten the pill so the "Coming soon" tag sits in clear space. */
@media (max-width: 560px) {
  .mm-card--soon .mm-card__robe { width: 60%; }
  .mm-card--soon .mm-card__soontag { top: 9px; left: 9px; padding: 4px 8px; font-size: 8.5px; }
}
/* dark caption over the light panel — override the LV white-on-scrim body */
.mm-grid--inv .mm-card--soon .mm-card__body { background: none; }   /* keep the overlaid position (same tile height as real cards); just drop the dark scrim */
.mm-grid--inv .mm-card--soon .mm-card__title { color: var(--ink); text-shadow: none; }
.mm-card--soon .mm-card__price--soonkm { color: var(--ink); text-shadow: none; font-weight: 500; }
/* heart: dark stroke so it reads on the light-blue panel (the catalogue default is white) */
.mm-card--soon .mm-card__fav:not(.is-active) svg { stroke: rgba(20, 34, 56, .7); filter: none; }
.mm-grid--inv .mm-card__price--tba { color: rgba(255,255,255,.86); }
.mm-grid--inv .mm-card__foot { margin-top: 10px; padding-top: 0; border-top: 0; }
.mm-grid--inv .mm-card__go { display: none; }   /* LV captions are name + price only — no arrow chip */

/* ---- A REAL listing whose photographs have not arrived yet (.is-robed) ------------
   EasyCars lists a car about a week before Autogate sends the pictures, so this is the
   normal opening state of a for-sale car — it used to render as an empty grey tile.
   Same painted robe as the coming-soon teasers and the office Cars screen.

   🚨 REVERSED 02/08/2026 (Heng). This block used to read "this is NOT a teaser: it keeps
   the link, the hover lift ... and no pill". It now behaves exactly like one. A buyer who
   clicked through landed on a detail page whose photo column held nothing but our logo, so
   the tile is no longer a link at all (PHP renders <div>, not <a>, and drops the price and
   the Enquire chip — see mmcarz_render_card). It carries a "Coming soon" pill and shows
   kilometres where the price would sit. The detail page stays reachable by direct URL —
   already-shared and already-wishlisted links must not 404 — it just paints the robe too.
   Recipe mirrors .mm-card--soon exactly — keep the three in step. */
.mm-card.is-robed .mm-card__media,
.mm-slide.is-robed .mm-slide__media { display: grid; place-items: center; background: #fff; }
.mm-card.is-robed .mm-card__robe,
.mm-slide.is-robed .mm-card__robe { position: relative; display: block; width: 82%;
  isolation: isolate; filter: drop-shadow(0 10px 18px rgba(40, 70, 120, .12)); }
.mm-card.is-robed .mm-card__soonimg,
.mm-slide.is-robed .mm-card__soonimg { width: 100%; height: auto; display: block; }
/* The satin is flattened to luminance so a colour laid over it in multiply reads as
   paint rather than a wash, then masked by the SAME artwork so the paint stops at the
   car's edge — a ute's colour must not be cut to a sedan's outline. */
.mm-card.is-robed.is-tinted .mm-card__soonimg,
.mm-slide.is-robed.is-tinted .mm-card__soonimg { filter: grayscale(1) brightness(.92) contrast(1.45); }
.mm-card.is-robed.is-tinted .mm-card__robe::after,
.mm-slide.is-robed.is-tinted .mm-card__robe::after { content: ""; position: absolute; inset: 0;
  background: var(--rc); mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask: var(--robe, url(assets/covered-car.png)) center/contain no-repeat;
          mask: var(--robe, url(assets/covered-car.png)) center/contain no-repeat; }
/* The placeholder is a fixed asset, not a photo of this car: the tile-wide zoom on hover
   and the skeleton's fade-in reveal both read as a loading glitch on it. */
.mm-card.is-robed:hover .mm-card__media img,
.mm-slide.is-robed:hover .mm-slide__media img { transform: none; }
.mm-card.is-robed .mm-card__soonimg,
.mm-slide.is-robed .mm-card__soonimg { opacity: 1; }
.mm-card.is-robed .mm-card__media:not(.is-loaded),
.mm-slide.is-robed .mm-slide__media:not(.is-loaded) { animation: none; }
/* The caption sits on a scrim over WHITE here, not over a photograph: white type on that
   composite measures ~3.7:1, under AA. The coming-soon tiles hit the same wall on the same
   artwork and answered it by dropping the scrim for dark ink, so these match them — which
   also keeps the two kinds of robed tile reading alike in one grid. The heart needs the
   dark outline for the same reason. */
.mm-grid--inv .mm-card.is-robed .mm-card__body { background: none; }
.mm-grid--inv .mm-card.is-robed .mm-card__title { color: var(--ink); text-shadow: none; }
/* --muted measured 3.22:1 on this white panel — under AA at 13px. --ink is what the
   coming-soon tiles put on the same line for the same reason. */
.mm-grid--inv .mm-card.is-robed .mm-card__price,
.mm-grid--inv .mm-card.is-robed .mm-card__price--tba { color: var(--ink); text-shadow: none; }
.mm-card.is-robed .mm-card__fav:not(.is-active) svg { stroke: rgba(20, 34, 56, .7); filter: none; }

/* ---- The /sold/ tile (.mm-card--sold) --------------------------------------------
   Here, not in templates/sold.php's inline <style>, because this card is drawn from TWO
   places: the /sold/ page and the office hover preview (inc/stock-preview.php), whose
   shell loads only what wp_head() enqueues. A rule left in the page's own <style> block
   simply does not exist in the panel, so the "Listed X ago" chip and the mobile "Sold X
   ago" pill rendered there as bare text. Only the deep-link highlight stays page-scoped —
   nothing can be deep-linked inside a one-card preview.
   .mm-grid--inv supplies the LV look (gap 0, hairlines, overlay body + scrim). */
.mm-card--sold { cursor: default; }
.mm-card--sold .mm-card__media img { filter: saturate(.82); }
.mm-sold__age { position: absolute; top: 12px; right: 12px; z-index: 3; background: rgba(20, 22, 24, .55); color: #fff; padding: 5px 11px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; text-transform: none; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Mobile portrait (Heng 11/07): the card copies the explore catalogue — title BELOW the photo
   (the .mm-card__body is a sibling of .mm-card__media, so the shared .mm-grid--inv mobile rule drops
   it under the aspect-locked image). "Sold X ago" becomes a bottom-left pill ON the photo; the
   "Listed X ago" corner chip is hidden. Desktop keeps the "Sold X ago · km" overlay caption. */
.mm-sold__soldago { display: none; }
@media (max-width: 560px) {
  .mm-card--sold .mm-sold__age { display: none; }
  .mm-card--sold .mm-sold__soldago { display: inline-flex; position: absolute; left: 8px; bottom: 7px; z-index: 3;
    color: #fff; padding: 0; font-size: 9px; font-weight: 600; letter-spacing: .01em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
  .mm-card--sold .mm-sold__pago,
  .mm-card--sold .mm-sold__pkm { display: none; }
}

/* ---- A SOLD car that was never photographed (.mm-card--sold.is-robed) --------------
   A car can be bought and sold inside the week EasyCars lists it before Autogate sends
   the pictures, so the sale is real and the photograph never existed. The tile used to
   emit `<img src="">` — which the browser resolves against the DOCUMENT, so it fetched
   /sold/ itself, decoded the HTML as an image and left an empty 4/3 box. Everything the
   robe needs is already in the card above; these three rules only settle what changes
   when the tile behind the caption becomes WHITE instead of a photograph.

   The paint is kept (this is the car's own colour, the same as the catalogue's photoless
   tiles) — the /sold/ page's vocabulary, a "Sold X ago" line and no price, is what says
   the car is gone, so the tint cannot be mistaken for "coming soon" here. */
/* The satin is artwork, not a photograph of this car: the sold grid's global desaturation
   would grey the cover as though it had faded. Deliberately BELOW the .is-tinted rule's
   specificity, so a painted robe still gets its grayscale-then-multiply treatment. */
.mm-card--sold.is-robed .mm-card__soonimg { filter: none; }
/* Mobile: white type with a drop shadow is invisible on the white robe panel. Ink, the
   same answer .is-robed already gives the title and the caption over that panel. */
@media (max-width: 560px) {
  .mm-card--sold.is-robed .mm-sold__soldago { color: var(--ink); text-shadow: none; }
}

/* The single page's own no-photograph state. The media column is a dark full-height panel, so the
   robe sits centred on it with the label beneath — the card's white-panel treatment above would be
   invisible here. Reached only by direct URL now that the grid tile is not a link. */
.mm-lx__nophoto { position: absolute; inset: 0; display: grid; place-content: center;
  justify-items: center; gap: 22px; padding: 8vh 8% 0; }
.mm-lx__nophoto .mm-card__robe { position: relative; display: block; width: min(460px, 68%);
  isolation: isolate; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .35)); }
.mm-lx__nophoto .mm-card__soonimg { width: 100%; height: auto; display: block; }
.mm-lx__nophoto.is-tinted .mm-card__soonimg { filter: grayscale(1) brightness(.92) contrast(1.45); }
.mm-lx__nophoto.is-tinted .mm-card__robe::after { content: ""; position: absolute; inset: 0;
  background: var(--rc); mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask: var(--robe, url(assets/covered-car.png)) center/contain no-repeat;
          mask: var(--robe, url(assets/covered-car.png)) center/contain no-repeat; }
.mm-lx__nophototag { color: rgba(255, 255, 255, .82); font-size: 12px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; }

/* .is-nophoto is a <div>, so it never had a pointer cursor to inherit — but the grid's hover
   lift and hairline are on .mm-card and would still promise a click that cannot happen. The
   heart is the one thing inside that IS still interactive, so it keeps its own cursor. */
.mm-card.is-nophoto { cursor: default; }
.mm-card.is-nophoto:hover { transform: none; box-shadow: none; }
.mm-card.is-nophoto .mm-card__fav { cursor: pointer; }
.mm-card.is-nophoto .mm-card__soontag { position: absolute; top: 14px; left: 14px; z-index: 3;
  background: var(--brand-blue, #0266b1); color: #fff; padding: 5px 11px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
@media (max-width: 700px) {
  .mm-card.is-nophoto .mm-card__soontag { top: 9px; left: 9px; padding: 4px 8px; font-size: 8.5px; }
}
/* Same contrast reason as .mm-card--soon: this caption sits over WHITE, not a photograph. */
.mm-grid--inv .mm-card.is-nophoto .mm-card__price--soonkm { color: var(--ink); text-shadow: none; font-weight: 500; }

/* ---- Empty state ---- */
.mm-invempty { text-align: center; padding: clamp(60px, 9vw, 120px) var(--gutter); }

/* ---- Final incomplete row: pulled out of the edge-to-edge grid and centred with a 50px gap, sitting
   125px clear of the grid above; a Dior back-to-top CTA is centred in the 125px gap before the footer. ---- */
.mm-invlastrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 50px; margin-top: 125px; }
.mm-invlastrow .mm-card { flex: 0 0 auto; }   /* hold the JS-set width; don't shrink in the flex row */
.mm-invlastrow .mm-card, .mm-invlastrow .mm-card:hover { box-shadow: none; }   /* drop the grid hairlines on the centred cards */
.mm-invend { display: flex; align-items: center; justify-content: center; min-height: 125px; }
.mm-backtotop { display: inline-flex; flex-direction: column; align-items: center; gap: 9px; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink);
  padding: 10px 18px; transition: opacity .25s ease; }
.mm-backtotop:hover { opacity: .5; }
.mm-backtotop svg { width: 16px; height: 16px; transition: transform .25s ease; }
.mm-backtotop:hover svg { transform: translateY(-3px); }
.mm-invempty p { margin: 0 0 20px; color: var(--muted); }

/* ---- Responsive ---- */
@media (max-width: 1180px) { .mm-grid.mm-grid--inv { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) {
  /* 🚨 KEEP the compound selector (.mm-grid.mm-grid--inv, specificity 0,2,0). The archive grid element
     is class="mm-grid mm-grid--inv", and the generic ".mm-grid{grid-template-columns:1fr}" in the
     <=560 mobile block sits LATER in this file — with a single-class selector here it wins the tie and
     the inventory grid collapses to 1 column on mobile portrait. The compound selector outranks it so
     the grid stays 2-up down to mobile portrait. Do NOT downgrade to plain .mm-grid--inv. */
  .mm-grid.mm-grid--inv { grid-template-columns: repeat(2, 1fr); }
  /* Centre group goes full-width and stacks above the sort; drop the centring spacer. */
  .mm-invbar { width: calc(100vw - 24px); }
  .mm-invbar__inner { flex-wrap: wrap; }
  .mm-invbar__updated { flex: 1 1 100%; text-align: center; margin-bottom: 6px; }
  .mm-invbar__center { width: 100%; flex-wrap: wrap; }
  .mm-invbar__sort { flex: 1 1 100%; justify-content: center; margin-top: 8px; }
  .mm-filters2--inv { flex-wrap: wrap; gap: 8px; }
  .mm-filters2--inv .mm-fpill { flex: 1 1 calc(50% - 4px); }
  .mm-filters2--inv .mm-fclear { flex: 1 1 100%; justify-content: center; padding: 6px; }
  /* Pills wrap here (vs the shared bar's 760px), so clamp the popovers to match — keeps the
     Make/Model + More-Filters panels inside narrow viewports once the row stacks. */
  .mm-filters2--inv .mm-fpop { min-width: min(300px, 86vw); }
}

/* Laptop (inline bar, but tight): the keyword search takes over the "Stock list updated X ago" slot
   at the LEFT edge — the updated line hides (visibility, so it keeps balancing the centred pills)
   and the search moves out of the centre group, so its expanding input never squeezes the pills.
   Big desktop (>=1500px) keeps updated + in-centre search as before. */
@media (min-width: 901px) and (max-width: 1499px) {
  .mm-invbar:not(.is-drawer) .mm-invbar__inner { position: relative; }
  .mm-invbar:not(.is-drawer) .mm-invbar__updated { visibility: hidden; }
  .mm-invbar:not(.is-drawer) .mm-invbar__center .mm-invsearch { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); }
  /* expanded input sized to the (former) updated slot, tighter on narrow laptops */
  .mm-invbar:not(.is-drawer) .mm-invbar__center .mm-invsearch:hover .mm-invsearch__input,
  .mm-invbar:not(.is-drawer) .mm-invbar__center .mm-invsearch.is-open .mm-invsearch__input,
  .mm-invbar:not(.is-drawer) .mm-invbar__center .mm-invsearch__input:focus { width: clamp(110px, 15vw, 170px); }
}
/* Mobile portrait: the caption drops BELOW the photo — left-aligned dark ink instead of the white
   overlay (which was hard to read on silver/white cars). The heart stays on the photo (it's positioned
   off the whole card, not the body) but shrinks + tucks closer to the top-right corner. */
@media (max-width: 560px) {
  .mm-grid--inv .mm-card__body { position: static; background: none; padding: 10px 6px 14px; gap: 2px; text-align: left; }   /* title/price left-aligned under the photo, hugging the card's left edge (wrapped names stay tidy — LV catalogue style) */
  .mm-grid--inv .mm-card__title { color: var(--ink); text-shadow: none; }
  .mm-grid--inv .mm-card__price,
  .mm-grid--inv .mm-card__price--tba { color: var(--muted); text-shadow: none; }
  .mm-grid--inv .mm-card__fav { top: 6px; right: 6px; width: 22px; height: 22px; }
  .mm-grid--inv .mm-card__fav svg { width: 16px; height: 16px; }
}

/* ==================== Listing (Tesla order-page clone, Dior-reskinned) ==================== */
/* Full-viewport app shell like Tesla's order page: suppress the SITE header + footer so the car
   photo fills the LEFT pane edge-to-edge and top-to-bottom (reclaiming the header space) with the
   MM Carz logo overlaid top-left, and the details column sits flush to the RIGHT edge. The
   off-canvas panels / appointment modal / Michi widget live OUTSIDE <header>/<footer>, so they keep
   working. NOTE: no body padding-bottom — a full-width strip there sits BELOW the two-column shell and
   shows as white under the fixed left photo once you scroll to the bottom. The fixed price bar is
   cleared instead by the scrolling content itself: the right column (.mm-lx__aside) already pads for
   it, and the below-shell sections get the same clearance (see the last-child rule below). This lets
   the left photo reach the very bottom edge-to-edge. */
body.single-listings { padding-top: 0; padding-bottom: 0; }
/* Hide the SITE header + footer for the app-shell look. NOTE: scope the footer to `footer.mm-footer`
   (the site <footer>) — the Michi chat widget's input area is ALSO a `.mm-footer` (a <div> inside
   #mm-chat-panel), and a bare `.mm-footer` here hid the chat input box on this page. */
body.single-listings .mm-site-header,
body.single-listings footer.mm-footer { display: none; }
/* Insights app-shell pages (insights / trending / library) — hide the site footer; the mm-yt sidebar carries its own copyright. */
body.mm-yt-page footer.mm-footer { display: none; }
/* When a car DOES have full-width sections stacked below the shell, the last one must clear the fixed
   price bar (the removed body padding used to do this). Only the last child needs it, and never the
   shell itself (padding there would re-introduce the white strip under the photo). */
body.single-listings .mm-lx > .mm-featurail:last-child,
body.single-listings .mm-lx > .mm-spectables:last-child { padding-bottom: calc(var(--mm-lx-bar) + clamp(24px, 4vw, 48px)); }
/* This page only: move the Michi chat fab to the bottom-LEFT so the right-column price bar owns the bottom-right. */
body.single-listings #mm-chat-fab { left: 22px !important; right: auto !important; }
/* ...and the OPEN chat panel too, but ONLY where it's a floating box (>=641px). Below 640px the widget
   makes the panel fullscreen (inset:0), so we must NOT force left/right there or it breaks. */
@media (min-width: 641px) {
  body.single-listings #mm-chat-panel { left: 22px !important; right: auto !important; }
}

.mm-lx { --mm-lx-bar: 68px; }
/* Details-column width. Single source of truth: `.mm-lx__shell`'s second track AND
   `.mm-stickybar`'s width both read it, so a breakpoint that narrows the column moves the bar
   with it automatically.
   🚨 Declared on the BODY, not on `.mm-lx`: the sticky price bar is rendered OUTSIDE <main>
   (verified in the template — </main> closes before it), so on `.mm-lx` the var did not inherit,
   `calc(var(--mm-lx-col) - 28px)` was invalid, and the bar collapsed to its content width —
   measured 308px where it should have been 382. */
body.single-listings { --mm-lx-col: clamp(400px, 30vw, 430px); }

.mm-lx__shell {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--mm-lx-col);
  /* lvh for the same reason as .mm-lx__media below: on a car with little content the shell's
     own min-height is what holds the two columns to the fold, and an svh floor falls short of
     the grown viewport once the toolbar retracts. lvh (not dvh) so the floor is a constant and
     nothing reflows while the toolbar animates. */
  align-items: start; min-height: 100vh; min-height: 100lvh;
}

/* ---- LEFT: full-height photo; sticks while the details scroll ---- */
/* ---- Plain sticky, deliberately (08/08/2026). Seven attempts to make this column behave on
   iOS Chrome — svh/lvh/dvh, max(), position:fixed, a JS-measured height, a negative-margin
   overshoot, and finally a fully JS-pinned column — each fixed one symptom and introduced
   another, and the last failed verification at two viewports. This is the version that is simple,
   predictable, and correct on desktop and Safari.
   🚨 KNOWN LIMITATION, iOS Chrome only: sticky anchors to the LAYOUT viewport while the reader
   sees a band `visualViewport.offsetTop` (155px, measured) lower, so at the very end of the
   column the photo can release early and show a strip beneath it. Do NOT attack this with
   viewport units or margin tricks — that ground is covered in [[listing-page-tablet-sticky-photo]]
   and none of it holds. It needs a different DESIGN (a photo that is not full-height), not
   another compensation. ---- */
/* Height comes from JS (--mm-lx-photoh): no CSS unit can express `innerHeight + offsetTop`,
   which is what the photo needs on iOS to reach the bottom of the visible band. max() is the
   no-JS fallback. See [[listing-page-tablet-sticky-photo]] before changing any of this. */
.mm-lx__media { position: sticky; top: 0;
  height: 100vh; height: max(100vh, 100lvh); height: var(--mm-lx-photoh, max(100vh, 100lvh));
  overflow: hidden; background: var(--bg-soft); }
.mm-lx__hero, .mm-lx__hero-fade { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; user-select: none; }
/* Crossfade layer: the (preloaded) next photo fades in over the base, then the base swaps under it. */
.mm-lx__hero-fade { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .44s ease; pointer-events: none; }
/* Faint top scrim so the white wordmark reads over a bright sky / white car (it's the only home-nav). */
.mm-lx__media::before { content: ""; position: absolute; inset: 0 0 auto; height: 150px; z-index: 2;
  background: linear-gradient(to bottom, rgba(10,12,15,.34), rgba(10,12,15,0)); pointer-events: none; }

/* ---- Gallery interactions: zoom + pan, swipe, autoplay, expand ---- */
/* Zoom cursor + touch-action: pan-y lets the page scroll over the photo; none while zoomed so drag pans. */
.mm-lx__media { touch-action: pan-y; cursor: zoom-in; }
.mm-lx__media.is-zoom { cursor: grab; touch-action: none; }
.mm-lx__media.is-zoom.is-panning { cursor: grabbing; }
/* Idle (no .is-active): hide the cursor too, alongside the arrows. Any mouse move restores it. */
.mm-lx__media:not(.is-active) { cursor: none; }
.mm-lx__hero { transform-origin: center center; transition: transform .18s ease-out; will-change: transform; }
.mm-lx__media.is-panning .mm-lx__hero { transition: none; }
.mm-lx__media.is-zoom .mm-lx__nav { opacity: 0 !important; pointer-events: none; }

/* Controls: collapsed to one icon; hover (desktop) or .is-open (tap) slides out the row. */
.mm-lx__gctl { position: absolute; right: clamp(14px, 1.8vw, 20px); bottom: clamp(14px, 1.8vw, 20px); z-index: 6;
  display: flex; align-items: center; gap: 8px; flex-direction: row-reverse; }
/* NOTE (07/08/2026): a `bottom: calc(100lvh - 100dvh + ...)` lift lived here, to keep this
   control clear of the browser toolbar while the photo is 100lvh. REMOVED — it was not gated,
   and its premise only holds in the two-column layout: every banded layout (phone, tablet
   portrait/landscape) sets `.mm-lx__media { height: auto }` + an aspect-ratio, and those are
   precisely the devices where lvh != dvh. There the term was pure error and floated the button
   into the middle of the photo — measured ~43% up the frame on an iPhone. The cost of dropping
   it is small and self-correcting: on a TOUCH two-column layout the control sits below the fold
   until the first scroll retracts the toolbar. */
.mm-lx__gtoggle, .mm-lx__gbtn { width: 40px; height: 40px; border: 0; border-radius: 999px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mm-lx__gbtn { background: rgba(15,18,22,.42); backdrop-filter: blur(6px); transition: background .18s; }
.mm-lx__gbtn:hover { background: rgba(15,18,22,.72); }
.mm-lx__gtoggle { background: none; }   /* resting affordance is chromeless — the drop-shadow keeps it readable on any photo */
.mm-lx__gtoggle svg, .mm-lx__gbtn svg { width: 20px; height: 20px; }
.mm-lx__gtoggle svg { filter: drop-shadow(0 1px 5px rgba(15,18,22,.6)); }
.mm-lx__gmenu { display: flex; gap: 8px; overflow: hidden; max-width: 0; opacity: 0; transform: translateX(8px);
  transition: max-width .32s ease, opacity .2s ease, transform .32s ease; }
.mm-lx__gctl:hover .mm-lx__gmenu, .mm-lx__gctl.is-open .mm-lx__gmenu { max-width: 220px; opacity: 1; transform: none; }
.mm-lx__gbtn.is-active { background: #fff; color: var(--ink); }

/* Expand: photo goes full-bleed; the details column + price bar fade away (Esc or the button restores). */
.mm-lx__shell { transition: grid-template-columns .42s cubic-bezier(.4, 0, .2, 1); }
.mm-lx__aside { transition: opacity .3s ease; }
.mm-stickybar { transition: opacity .3s ease, transform .3s ease; }
body.mm-lx-expanded { overflow: hidden; }   /* photo is full-bleed 100svh — no page scroll (or scrollbar gutter) while expanded */
body.mm-lx-expanded .mm-lx__shell { grid-template-columns: minmax(0, 1fr) 0; }
body.mm-lx-expanded .mm-lx__aside { opacity: 0; pointer-events: none; overflow: hidden; min-width: 0; padding-left: 0; padding-right: 0; }
/* ---- Expanded = a LIGHTBOX (Heng 07/08/2026): black surround, the whole car centred on the
   screen, softly rounded. The default column keeps its full-bleed cover crop; this is the view
   that shows the car whole. ---- */
body.mm-lx-expanded .mm-lx__media {
  background: #000;
  /* 🚨 FIXED + inset:0, not a viewport UNIT (Heng 07/08/2026: "still white space below
     image on ipad pro"). 100dvh resolves SHORT of the real screen inside Safari's element
     fullscreen on iPad, leaving a strip along the bottom that no object-fit can reach because
     the frame itself stops there. `position: fixed; inset: 0` is measured against the actual
     viewport, so there is no unit to be wrong: the frame IS the screen.
     Paired with viewport-fit=cover in header.php so the page may paint into the safe areas -
     without that the strip survives as the home-indicator inset.
     🚨 The default column must still use lvh, NOT dvh: a dvh box resizes as the toolbar
     slides and object-fit re-scales the photo, which is the "zooming" Heng rejected. Expanded is
     immune (body overflow:hidden stops the scroll that moves the toolbar) - but it no longer
     relies on that either. */
  position: fixed; inset: 0; z-index: 60;
  width: auto; height: auto; max-width: none; min-height: 0;
  /* 🚨 CANCEL the band ratio. Tablet/phone layouts give this element `aspect-ratio: 20/9`
     (landscape) or 4/3 / 3/2 (portrait) to make it a top band. Left in place it drives the WIDTH
     off the height - measured 2276px on a 1366x1024 iPad - so the frame is wider than the
     screen, the car runs off the right edge and the close button lands at x=2216, off-screen.
     (The X still visible top-left in that state is SAFARI'S own fullscreen exit, not ours.) */
  aspect-ratio: auto;
}
/* FULL-BLEED (Heng 07/08/2026). This began as a contained photo centred on black, but on an
   iPad Pro a 3:2 photo inside a 4:3 frame leaves ~70px bands top and bottom - Heng: "might as
   well just cover it full width as there is bottom white space at bottom". So it fills the
   screen instead.
   The cost is a mild side crop - ~6% off each edge on a 4:3 iPad, against the 35% the COLLAPSED
   column crops - which is the trade he asked for.
   With inset:0 and both dimensions at 100% there is no limiting axis to choose and nothing to
   centre: it simply fills. That retires the width-vs-height sizing and the `aspect-ratio > 3/2`
   split that went with it (they existed only to make the element match the photo so the radius
   could hug it).
   The slight radius stays: it lets the black show at the four corners, which reads as a
   deliberate frame and sits well against the iPad's own rounded display. */
body.mm-lx-expanded .mm-lx__hero,
body.mm-lx-expanded .mm-lx__hero-fade {
  position: absolute; inset: 0; margin: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  object-fit: cover; border-radius: 0;   /* corner to corner (Heng 07/08/2026) */
}

/* The photo controls become the CLOSE affordance up in the top-right, clear of the car.
   bottom:auto cancels both the base offset and the lvh/dvh lift added for the collapsed view. */
/* Expanded splits the cluster (Heng 07/08/2026): play/pause stays BOTTOM-right where it lives
   in the collapsed view, and only the CLOSE is lifted to the top-right. So the control the
   viewer reaches for repeatedly keeps its usual place, and the one that dismisses is out of the
   way of the car. `top: auto` restores the base bottom-right anchoring; the safe-area term
   matters now that the page paints into the insets. */
body.mm-lx-expanded .mm-lx__gctl {
  top: auto;
  bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(14px, 1.8vw, 20px));
}
/* The menu is always open in the lightbox - there is no room for a "reveal the controls" step
   when the only way out is inside that menu. Hiding the toggle also stops it sitting to the
   right of the buttons (the cluster is row-reverse). */
body.mm-lx-expanded .mm-lx__gmenu {
  max-width: none; opacity: 1; transform: none; overflow: visible;
}
body.mm-lx-expanded .mm-lx__gtoggle { display: none; }
/* CLOSE to the top-right. 🚨 position:fixed, not absolute: `.mm-lx__gmenu` is
   `overflow:hidden` with `opacity:0` in its collapsed desktop state, and an OPACITY ancestor
   hides a descendant no matter how it is positioned - so the rule above has to open the menu as
   well, and fixed then keeps this button pinned to the viewport rather than to the cluster. */
/* When the BROWSER is showing its own fullscreen-exit control (iOS/iPadOS Safari draws an X at
   top-left, and it cannot be hidden, moved or restyled — it is chrome outside the page), ours is
   just a second close button. Stand down and let theirs do it (Heng 07/08/2026).
   🚨 The class is set from JS only when native fullscreen is ACTIVE **and** the browser is the
   iOS family — see syncHostClose() in single-listings.php. Android Chrome's fullscreen has no
   persistent exit control, so hiding ours on `fullscreenElement` alone would leave no way out. */
body.mm-lx-expanded.mm-lx-hostclose .mm-lx__gbtn--expand { display: none; }
body.mm-lx-expanded .mm-lx__gbtn--expand {
  /* 🚨 display:flex re-asserts it. The tablet blocks hide `.mm-lx__gbtn--expand` outright (the
     expand affordance is desktop-only there), and that rule would otherwise leave a lightbox
     with NO way out of its own — measured width 0 at 1366×1024. If a device can reach this
     state it must be able to leave it, whatever hid the button on the way in. */
  display: flex;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + clamp(20px, 3.4vh, 38px));
  right: calc(env(safe-area-inset-right, 0px) + clamp(14px, 1.8vw, 20px));
  z-index: 61;
}
/* The scrim exists to keep the wordmark legible over a bright photo — pointless on black, and
   it would just grey the top edge of the lightbox. */
body.mm-lx-expanded .mm-lx__media::before { display: none; }
body.mm-lx-expanded .mm-stickybar { opacity: 0; pointer-events: none; }
/* The chat fab floats over the fullscreen photo — hide it too (!important beats the widget's inline styles). */
body.mm-lx-expanded #mm-chat-fab { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }

/* Michi's page-load teaser bubble: the widget anchors it bottom-RIGHT next to the default fab
   position, but this page moves the fab bottom-LEFT — mirror the bubble (and its tail) to match. */
body.single-listings #mm-launcher-bubble { right: auto; left: 88px; }   /* 22 fab left + 56 fab + 10 gap */
body.single-listings #mm-launcher-bubble::after { right: auto; left: -6px; border-left: none; border-right: 8px solid #fff;
  filter: drop-shadow(-2px 1px 2px rgba(3, 62, 122, .12)); }

/* Logo overlaid top-left where the header used to be (white wordmark + soft shadow so it reads on
   any photo without a heavy scrim). Links home — the only "nav" on this Tesla-style page. */
.mm-lx__brand { position: absolute; top: clamp(11px, 1.4vw, 17px); left: clamp(16px, 2vw, 28px); z-index: 5; }
/* Landscape tablets: wordmark to the BOTTOM-left (Heng 07/08/2026). Top-left is where Safari
   puts its own fullscreen-exit X on iPad, so the two sat on top of each other — the wordmark was
   literally showing through from behind that button. Bottom-left is clear of it, clear of our
   own controls (bottom-RIGHT) and clear of the prev/next chevrons (vertically centred).
   env(safe-area-inset-bottom) matters now that the page paints into the safe areas. */
/* 🚨 Gated on (pointer: coarse), NOT a width range. The obvious gate was the file's
   901–1366px landscape-tablet range, but an iPad reporting a viewport WIDER than 1366 — which
   this one evidently does, since the same 1366 ceiling is what hides the expand button it
   plainly has — then keeps the wordmark top-left, i.e. exactly the device the change is for
   misses out. Asking whether the pointer is coarse covers every tablet at any width and can
   never catch a mouse-driven desktop. Consequence: it does NOT show by resizing a desktop
   browser — emulate touch to see it. */
@media (min-width: 901px) and (orientation: landscape) and (pointer: coarse) {
  .mm-lx__brand { top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(14px, 1.8vw, 22px)); }
}
.mm-lx__brand img { display: block; height: clamp(14px, 1.5vw, 18px); width: auto; filter: drop-shadow(0 1px 6px rgba(15,18,22,.55)); }

.mm-lx__sold {
  position: absolute; top: clamp(18px, 2.4vw, 30px); right: clamp(18px, 2.4vw, 30px); z-index: 5;
  font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--brand-red, #e80012); padding: 7px 14px; border-radius: 999px;
}
/* Arrows: white, chromeless, revealed only on image hover (touch: always shown). */
.mm-lx__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: #fff; cursor: pointer; opacity: 0; transition: opacity .22s;
}
.mm-lx__nav svg { width: 30px; height: 30px; filter: drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
.mm-lx__media.is-active .mm-lx__nav { opacity: 1; }   /* revealed by mouse movement; JS hides after 3s idle */
.mm-lx__nav--prev { left: clamp(10px, 1.6vw, 22px); }
.mm-lx__nav--next { right: clamp(10px, 1.6vw, 22px); }
@media (hover: none) { .mm-lx__nav { opacity: .92; } }
/* ...but on touch they then sat there permanently, because there is no mouseleave to end the
   3s desktop idle. Fold them into the SAME 10s idle the photo control already uses (Heng
   07/08/2026) — one timer, so the chrome fades together instead of in two stages. A tap on the
   photo pokes it and everything comes back. Specificity (0,3,0) beats the hover:none rule
   above, which is (0,1,0), so this wins on touch without !important. */
@media (hover: none) {
  .mm-lx__media.mm-ctl-idle .mm-lx__nav {
    opacity: 0; pointer-events: none; transition: opacity .35s ease;
  }
}
/* 🚨 (hover: none) is load-bearing. Unscoped, this beat
   `.mm-lx__media.is-active .mm-lx__nav { opacity: 1 }` — same (0,3,0) specificity, later in the
   file — so on a MOUSE at any window <=1366px wide and <=3/2 (a snapped half-screen, 1280x1024,
   1366x1024) the arrows faded after 10s and moving the cursor could not bring them back:
   mousemove drives `.is-active`, and only a CLICK calls ctlPoke. Hover owns the arrows on a
   pointer device; the 10s idle owns them on touch. */

/* ---- RIGHT: details, flush to the edge, scroll with the page ---- */
.mm-lx__aside {
  /* 🚨 Pin the details to the LAST column. `.mm-lx__media` is `position: fixed`, so it is
     no longer a grid item — auto-placement then dropped the details into track 1 and the photo
     covered them (measured: aside x=0, w=1003, overlapping at every scroll position).
     `-2 / -1` is the last column whatever the count: two tracks -> track 2; ONE track (every
     stacked phone/tablet layout) -> that single track. So this is inert where the shell is
     single-column and needs no per-breakpoint undo. */
  grid-column: -2 / -1;
  min-height: 100vh; min-height: 100lvh;   /* see .mm-lx__media */
  padding: clamp(12px, 1.6vw, 18px) clamp(18px, 1.8vw, 32px) calc(var(--mm-lx-bar) + 40px);
  display: flex; flex-direction: column;
}
/* crental-style toolbar: back arrow pinned far-left, the tool icons a centred cluster. */
.mm-lx__topbar { position: relative; display: flex; align-items: center; justify-content: center; min-height: 30px; margin-bottom: 4px; }
.mm-lx__back { position: absolute; left: 0; display: inline-flex; align-items: center; justify-content: flex-start; width: 34px; height: 34px; color: var(--muted); }   /* chevron flush-left, in line with the sticky-bar content edge (Heng: push it more left) */
.mm-lx__back svg { width: 20px; height: 20px; }
.mm-lx__back:hover { color: var(--ink); }
.mm-lx__tools { display: flex; align-items: center; gap: 16px; }
.mm-lx__tool { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; font-weight: 500; line-height: 1; cursor: pointer; position: relative; white-space: nowrap; }
.mm-lx__tool svg { width: 18px; height: 18px; }
.mm-lx__tool--views { cursor: default; }
.mm-lx__tool--fav svg, .mm-lx__tool--share svg { fill: none; stroke: currentColor; }
.mm-lx__tool:not(.mm-lx__tool--views):hover { color: var(--ink); }
.mm-lx__tool--fav.is-active { color: var(--brand-red, #e80012); }
.mm-lx__tool--fav.is-active svg { fill: var(--brand-red, #e80012); stroke: var(--brand-red, #e80012); }
.mm-lx__tool--like.is-active { color: var(--brand-blue); }
.mm-lx__tool--like.is-active svg { fill: var(--brand-blue); stroke: var(--brand-blue); }
.mm-lx__tool.is-copied::after { content: "Copied"; position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 6px; white-space: nowrap; z-index: 6; }
/* Compare (⇄) topbar icon — grouped with save/share. It opens the quick-compare sheet (not a toggle),
   so it keeps the same muted colour as the other tools, with no active-state tint. */
/* Transient add/remove/full feedback bubble — same chip as the share tool's "Copied". */
.mm-lx__tool.is-hint::after { content: attr(data-hint); position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 6px; white-space: nowrap; z-index: 6; }
/* A small dot on the Compare nav link while the compare set has cars (mirrors the wishlist header dot). */
.mm-nav a.mm-cmp-dot { position: relative; }
.mm-nav a.mm-cmp-dot::after { content: ""; position: absolute; top: 0; right: -9px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-red, #e80012); }

/* ---- Quick-compare sheet: in-page head-to-head opened by the topbar ⇄ (this car + rivals you pick).
   The deep dive (all specs, AI verdict) stays on /compare/. Bottom sheet, centred + width-capped. ---- */
.mm-qc[hidden] { display: none; }
.mm-qc { position: fixed; inset: 0; z-index: 1100; }   /* below the shared Filter & Sort drawer (1200) so it can open ON TOP of this sheet */
.mm-qc__backdrop { position: absolute; inset: 0; background: rgba(20,22,24,.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .34s ease; }
.mm-qc.is-open .mm-qc__backdrop { opacity: 1; }
/* Centred modal card (Heng: "centre the pop up"), was a bottom sheet. */
.mm-qc__sheet { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -47%) scale(.98); opacity: 0; width: min(760px, calc(100% - 24px)); max-height: 88vh; background: #fff; border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; transition: opacity .26s ease, transform .3s cubic-bezier(.2,.7,.2,1); will-change: transform, opacity; }
.mm-qc.is-open .mm-qc__sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.mm-qc__bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line, #e6e7e9); }
.mm-qc__title { font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
.mm-qc__x { display: inline-flex; padding: 4px; margin: -4px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.mm-qc__x svg { width: 20px; height: 20px; }
.mm-qc__body { flex: 1 1 auto; overflow: auto; padding: 6px 12px 14px; }
.mm-qc__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mm-qc__lblh, .mm-qc__lbl { width: 82px; }
.mm-qc__carh, .mm-qc__addh { padding: 12px 6px 10px; vertical-align: top; text-align: center; position: relative; border-bottom: 1px solid var(--line, #e6e7e9); }   /* top-align so thumbnails share one row regardless of title length */
.mm-qc__rm { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: #f0f1f2; color: var(--muted); font-size: 11px; line-height: 1; cursor: pointer; }
.mm-qc__rm:hover { background: #e6e7e9; color: var(--ink); }
.mm-qc__carlink { display: block; text-decoration: none; color: var(--ink); }
.mm-qc__carimg { display: block; width: 100%; max-width: 118px; margin: 0 auto 7px; aspect-ratio: 3/2; border-radius: 7px; overflow: hidden; background: #f4f4f4; }
.mm-qc__carimg img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }   /* ratio on the img (not the parent) so it self-sizes from width — parent aspect-ratio doesn't resolve reliably inside a <th> on iOS Safari, which was cropping the car to a centre slice */
.mm-qc__carname { display: block; font-family: var(--sans); font-size: 12px; line-height: 1.3; font-weight: 500; min-height: 2.6em; }   /* reserve ~2 lines so 1-line titles don't leave a gap before the spec rows */
.mm-qc__carprice { display: block; font-family: var(--sans); font-size: 12.5px; font-weight: 600; margin-top: 3px; color: var(--ink); }
.mm-qc__add { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-height: 82px; border: 1px dashed #cfd3d7; border-radius: 8px; background: none; color: var(--muted); font-family: var(--sans); font-size: 11.5px; font-weight: 500; cursor: pointer; }
.mm-qc__add span[aria-hidden] { font-size: 19px; line-height: 1; }
.mm-qc__add:hover { color: var(--ink); border-color: var(--ink); }
.mm-qc__lbl { font-family: var(--sans); font-size: 11px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 11px 6px; }
.mm-qc__val { font-family: var(--sans); font-size: 13px; text-align: center; color: var(--ink); padding: 11px 6px; border-top: 1px solid #f1f2f3; }
.mm-qc__val--ph { color: transparent; }
.mm-qc__val.is-best { color: var(--brand-blue); font-weight: 700; }
.mm-qc__empty { text-align: center; color: var(--muted); font-size: 13px; padding: 28px 0 10px; }
.mm-qc__emptyadd { display: flex; justify-content: center; padding-bottom: 20px; }
.mm-qc__emptyadd .mm-qc__add { width: 160px; min-height: 64px; }
.mm-qc__foot { flex: 0 0 auto; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line, #e6e7e9); }
.mm-qc__full { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 46px; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: .02em; text-decoration: none; }
.mm-qc__full svg { width: 17px; height: 17px; }
/* "Add a car" reuses the site's shared compare picker (.mm-cmp__picker) — same panel as the homepage /
   compare tool, WITH its Filter & Sort button (data-mmf-open -> the shared .mm-invbar--pick drawer). It
   sits inside .mm-qc (z 1100) at its native z 200, so it lifts above the sheet; the Filter drawer (1200,
   outside .mm-qc) then opens above both. No bespoke picker CSS needed here. */
html.mm-qc-open { overflow: hidden; }
html.mm-qc-open #mm-chat-fab { display: none !important; }

/* Sentence case, not caps (Heng 08/08/2026). The PHP already returns "Added 3 days ago"
   correctly capitalised — the shouting was purely `text-transform: uppercase` here. The .12em
   tracking went with it: that spacing exists to keep UPPERCASE legible and looks gappy on
   lowercase, so it drops to a hair. Size nudged up a touch because lowercase at 10.5px reads
   smaller than caps at the same size. */
.mm-lx__added { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .01em; color: var(--muted); margin: clamp(4px, 1vw, 10px) 0 16px; }
/* (The single-listing "Deposit received" line was removed 02/08/2026 — on the
   car's own page the sticky bar states it and the missing CTAs show it. It
   lives on the GRID card now: .mm-card__status.) */
.mm-lx__cnum { font-variant-numeric: tabular-nums; }   /* steady width while the count-up shuffles */
.mm-lx__title { font-weight: 300; font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.2; text-align: center; margin: clamp(6px, 1.6vw, 14px) 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mm-lx__subtitle { text-align: center; font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.4; }
/* Status badge (In Workshop / In Showroom / Reserved …) is injected by Michi's widget.js as a sibling
   AFTER the <h1>. Pull it up so it sits centred between "Added X ago" and the title, and let it hug its
   own text instead of stretching the full flex-column width (Heng 12/07/2026). Only the badge is
   source-after the title, so negative orders on the three leading items place it correctly without
   ordering every child of the aside; align-self:center both centres it and shrinks it to fit (its inline
   widget.js styles don't set order/align-self, so no !important needed). */
.mm-lx__aside .mm-lx__topbar { order: -3; }
.mm-lx__aside .mm-lx__added  { order: -2; margin-bottom: clamp(8px, 1.4vw, 12px); }
.mm-lx__aside .mm-listing-status-badge { order: -1; align-self: center; }

/* 3-up headline specs — reuses .mm-stat children (also for the km->miles language switch).
   Borderless: no cell dividers, no top/bottom rules — just three quiet stats under the badge. */
.mm-lx__specs {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin: clamp(16px, 2.4vw, 24px) 0 clamp(18px, 2.4vw, 26px);
}
.mm-stat { background: var(--bg); padding: 20px 10px; text-align: center; }
.mm-stat__num { font-family: var(--serif); font-size: clamp(1.15rem, 2vw, 1.6rem); font-weight: 300; color: var(--ink); line-height: 1.05; }
.mm-stat__label { margin-top: 7px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); }
/* On the listing page this row sits under the badge — keep it compact (scoped: .mm-stat is shared). */
.mm-lx__specs .mm-stat { padding: 10px 8px; }
.mm-lx__specs .mm-stat__num { font-size: clamp(0.85rem, 1.3vw, 1.05rem); white-space: nowrap; font-variant-numeric: tabular-nums; }   /* steady width during the count-up shuffle */
.mm-lx__specs .mm-stat__label { margin-top: 4px; font-size: 9px; }

/* Vehicle summary card — borderless now, so its content spans the full column width. */
.mm-lx__card { border: 0; padding: 0; }
.mm-lx__cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.mm-lx__trim { font-size: 15px; font-weight: 600; color: var(--ink); }
.mm-lx__price { font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; color: var(--ink); white-space: nowrap; }
.mm-lx__sub { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 12px; color: var(--muted); }
.mm-lx__sub span + span::before { content: "·"; margin-right: 8px; color: var(--line); }
.mm-lx__sub--wk { margin-top: 4px; }
.mm-lx__sub--wk sup { font-size: .7em; }

/* Finance / drive-away calculator (Tesla Cash|Loan tabs), integrated into the vehicle card */
.mm-lx__fin { margin-top: 0; }   /* leads the card now (tabs on top), so no top rule/padding */
.mm-lx__fin-tabs { display: flex; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.mm-lx__fin-tabs button { flex: 1; padding: 0 0 10px; border: 0; background: none; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--muted); cursor: pointer; position: relative; }
.mm-lx__fin-tabs button.is-active { color: var(--ink); }
.mm-lx__fin-tabs button.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); }
.mm-lx__fin-big { font-family: var(--serif); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 300; color: var(--ink); line-height: 1; }
.mm-lx__fin-big small { font-size: .42em; font-weight: 500; color: var(--muted); }
.mm-lx__fin-lbl { margin-top: 7px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mm-lx__fin-rows { margin-top: 15px; display: flex; flex-direction: column; gap: 9px; }
.mm-lx__fin-panel > .mm-lx__fin-rows:first-child { margin-top: 0; }   /* cash panel: rows lead the panel now */
.mm-lx__fin-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ink); }
.mm-lx__fin-rows > div span:first-child { color: var(--muted); }
.mm-lx__fin-ctrl { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.mm-lx__fin-field > label { display: block; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.mm-lx__fin-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-lx__fin-chips button { padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: none; font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.mm-lx__fin-chips button:hover { border-color: var(--ink); }
.mm-lx__fin-chips button.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
/* Custom deposit: a chip-shaped free-entry field alongside the presets. */
.mm-lx__fin-custom { width: 86px; padding: 7px 13px; border: 1px solid var(--line); border-radius: 999px; background: none;
  font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink); outline: none; transition: border-color .15s; }
.mm-lx__fin-custom:hover, .mm-lx__fin-custom:focus { border-color: var(--ink); }
.mm-lx__fin-custom::placeholder { color: var(--muted); }
.mm-lx__fin-note { margin: 12px 0 0; font-size: 10.5px; line-height: 1.5; color: var(--muted); }
/* Stratton-branded finance CTA: their purple, their (white-filtered) logo mark. */
.mm-lx__finapply { width: 100%; margin-top: 14px; gap: 10px; padding-top: 12px; padding-bottom: 12px; background: #6f2884; border-color: #6f2884; color: #fff; }
.mm-lx__finapply:hover { background: #82309c; border-color: #82309c; color: #fff; }
.mm-lx__finapply img { height: 26px; width: auto; display: block; filter: brightness(0) invert(1); }   /* the wordmark IS the word "Stratton" */
.mm-lx__fin-more { display: block; margin-top: 10px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: none; }
.mm-lx__fin-more:hover { color: #6f2884; text-decoration: underline; }

/* Finance application popup — live-site parity: the CAR PANEL (photos / specs / price) sits BESIDE
   Stratton's own embedded application (referral iframe, clipped so their site header is hidden),
   so the buyer reads the car's details off the left while filling the form on the right. */
html.mm-finpop-open { overflow: hidden; }
.mm-finpop { position: fixed; inset: 0; z-index: 900; display: none; }
.mm-finpop.is-open { display: block; }
.mm-finpop__backdrop { position: absolute; inset: 0; background: rgba(10, 12, 15, .45); backdrop-filter: blur(3px); }
.mm-finpop__box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1180px, calc(100vw - 28px)); height: min(90svh, 840px); --strat-clip: 210px;
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 70px rgba(10, 12, 15, .35);
  display: flex; }

/* LEFT: car panel — Dior-styled to match the listing column: white ground, hairline rows,
   serif figure on the price, quiet letterspaced labels. */
.mm-finpop__side { width: min(340px, 34%); flex: none; display: flex; flex-direction: column; gap: 14px;
  background: var(--bg); border-right: 1px solid var(--line); padding: 14px 16px 16px; overflow-y: auto; }
/* Thumbs: 2-up, bleeding edge-to-edge over the panel padding; JS drifts them as a slow marquee. */
.mm-finpop__thumbs { position: relative; flex: none; margin: -14px -16px 0; }
.mm-finpop__twrap { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }   /* native horizontal scroller: finger-swipe + JS auto-scroll */
.mm-finpop__twrap::-webkit-scrollbar { width: 0; height: 0; }
.mm-finpop__ttrack { display: flex; gap: 8px; width: max-content; }
.mm-finpop__ttrack img { flex: 0 0 auto; width: 150px; aspect-ratio: 3/2; object-fit: cover; display: block; }   /* 3/2 matches the car photos -> whole car shows (4/3 cropped the front/rear) */
/* Arrows: chromeless white chevrons — hidden until the thumbs are hovered (touch: always shown). */
.mm-finpop__tnav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 34px; height: 34px; border: 0; background: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .22s; }
.mm-finpop__thumbs:hover .mm-finpop__tnav { opacity: 1; }
@media (hover: none) { .mm-finpop__tnav { opacity: .92; } }
.mm-finpop__tnav svg { width: 20px; height: 20px; filter: drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
.mm-finpop__tnav--prev { left: 2px; }
.mm-finpop__tnav--next { right: 2px; }
/* Rows STRETCH to share whatever height the panel has — the main specs always cover the space
   between the thumbs and the price band, with no scroll and no dead gap. */
.mm-finpop__specs { list-style: none; margin: 0; padding: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.mm-finpop__specs li { flex: 1 1 auto; min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 3px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.mm-finpop__specs li:last-child { border-bottom: 0; }
.mm-finpop__spec-l { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); white-space: nowrap; }
.mm-finpop__spec-l .mm-lx__opt-ic { width: 17px; height: 17px; flex: 0 0 17px; color: var(--muted); }
.mm-finpop__spec-l .mm-lx__opt-dot { width: 13px; height: 13px; flex: 0 0 13px; margin: 0 2px; }
.mm-finpop__spec-v { color: var(--ink); font-weight: 500; text-align: right; }
.mm-finpop__pricerow { display: flex; }   /* price is a top spec row on ALL views now (Heng); the blue band below is hidden */
.mm-finpop__price { display: none; }       /* the blue band gives way to the copyable price ROW at the top */
/* Copy-to-clipboard button per spec row — hidden by default, shown on phone portrait so the buyer can
   copy each value straight into Stratton's form. */
.mm-finpop__copy { display: none; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 26px; height: 26px; margin-left: 8px; padding: 0; border: 0; background: none; color: var(--muted);
  cursor: pointer; border-radius: 6px; position: relative; }
.mm-finpop__copy:hover { color: var(--ink); background: rgba(20, 22, 24, .06); }
/* Copy button + right-aligned value ONLY on the three fields the buyer copies into Stratton
   (Make, Model, Price) — on every screen size now (Heng). Other rows have no copy icon. */
.mm-finpop__specs [data-fin-field="make"] .mm-finpop__copy,
.mm-finpop__specs [data-fin-field="model"] .mm-finpop__copy,
.mm-finpop__specs [data-fin-field="price"] .mm-finpop__copy { display: inline-flex; }
.mm-finpop__specs [data-fin-field="make"] .mm-finpop__spec-v,
.mm-finpop__specs [data-fin-field="model"] .mm-finpop__spec-v,
.mm-finpop__specs [data-fin-field="price"] .mm-finpop__spec-v { margin-left: auto; }
.mm-finpop__copy.is-copied { color: #16a34a; }
.mm-finpop__copy.is-copied::after { content: "Copied"; position: absolute; bottom: calc(100% + 4px); right: 0;
  font-size: 10px; font-weight: 600; color: #fff; background: var(--ink); padding: 2px 6px; border-radius: 5px; white-space: nowrap; z-index: 6; }
/* Price: brand-blue band, FLUSH to the panel's bottom + side edges (bleeds over the padding). */
.mm-finpop__price { margin: 0 -16px -16px; flex: none; border-radius: 0; background: #0266b1; text-align: center; padding: 15px 10px 14px; }
.mm-finpop__price strong { display: block; font-family: var(--serif); font-weight: 300; font-size: 1.7rem; line-height: 1; color: #fff; }
.mm-finpop__price span { display: block; margin-top: 7px; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }

/* RIGHT: Stratton bar + embedded application (mirrors templates/finance.php's mm-fin-modal) */
.mm-finpop__main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; }
.mm-finpop__appbar { display: flex; align-items: center; gap: 14px; padding: 11px 14px 11px 18px; border-bottom: 1px solid var(--line); flex: none; }
.mm-finpop__appbar img { height: 30px; width: auto; margin-right: auto; display: block; }
.mm-finpop__appcall { font-size: 13px; font-weight: 600; color: #6f2884; white-space: nowrap; }
.mm-finpop__appcall:hover { text-decoration: underline; }
.mm-finpop__x { flex: none; width: 34px; height: 34px; border: 0; background: none; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.mm-finpop__x:hover { color: var(--ink); }
.mm-finpop__x svg { width: 18px; height: 18px; }
.mm-finpop__framewrap { flex: 1; overflow: hidden; position: relative; }
.mm-finpop__frame { position: absolute; top: calc(-1 * var(--strat-clip)); left: 0; width: 100%; height: calc(100% + var(--strat-clip)); border: 0; display: block; }

/* Small screens: the car panel gives way — Stratton's form needs the room. */
@media (max-width: 860px) {
  .mm-finpop__side { display: none; }
  .mm-finpop__box { width: calc(100vw - 20px); height: min(92svh, 840px); }
}

/* Tablet PORTRAIT: don't hide the car panel and DON'T stack it — keep it SIDE-BY-SIDE (like desktop)
   so the buyer reads ALL the specs off the left WHILE filling Stratton's form on the right (Heng
   12/07/2026 — the whole point is seeing the data while filling; stacked hid it above the form). The
   tall portrait popup fits both columns at full height, so all specs show with no scroll. */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
  .mm-finpop__box { width: calc(100vw - 20px); height: min(92svh, 900px); }
  .mm-finpop__side { display: flex; width: min(340px, 38%); }
}

/* Finance popup on MOBILE (landscape + portrait): only the fields the buyer copies into Stratton —
   Make, Model, Price — are kept; everything else is dropped (Heng 12/07/2026). Copy icons only render
   on visible rows, so they land on exactly those three. */
@media (orientation: landscape) and (max-height: 500px), (orientation: portrait) and (max-width: 767px) {
  .mm-finpop__specs [data-fin-field="body"],
  .mm-finpop__specs [data-fin-field="interior-colour"],
  .mm-finpop__specs [data-fin-field="exterior-colour"],
  .mm-finpop__specs [data-fin-field="fuel-type"],
  .mm-finpop__specs [data-fin-field="drive"],
  .mm-finpop__specs [data-fin-field="transmission"],
  .mm-finpop__specs [data-fin-field="engine"],
  .mm-finpop__specs [data-fin-field="manufacture-year"],
  .mm-finpop__specs [data-fin-field="kilometres"] { display: none; }
}

/* Phone LANDSCAPE (wide but short): still fits two columns — keep the car panel SIDE-BY-SIDE beside the
   form (specs scroll inside it, thumbnail + price pinned) so the buyer can reference the data while
   filling (Heng 12/07/2026). Overrides the ≤860 hide. */
@media (orientation: landscape) and (max-height: 500px) {
  .mm-finpop__box { width: calc(100vw - 16px); height: 94svh; }
  .mm-finpop__side { display: flex; width: min(300px, 40%); overflow: hidden; }
  .mm-finpop__specs { overflow-y: auto; }
  .mm-finpop__specs li { flex: 0 0 auto; }
}

/* Phone PORTRAIT (too narrow for two usable columns): STACK the car panel on top of the form but keep
   it on-screen — the spec list scrolls inside a capped panel with the thumbnail + price pinned, so the
   data stays visible/accessible while filling. It's the best a phone portrait can do (Heng 12/07/2026). */
@media (orientation: portrait) and (max-width: 767px) {
  /* Full-screen popup + a smaller iframe clip (Stratton's mobile header is short) so the TOP of their
     year/date pickers isn't hidden under our bar. */
  .mm-finpop__box { flex-direction: column; left: 0; top: 0; transform: none; width: 100%; height: 100%; max-width: none; border-radius: 0; --strat-clip: 54px; }
  .mm-finpop__side { display: flex; width: auto; flex: 0 0 auto; overflow: visible;
    border-right: 0; border-bottom: 1px solid var(--line); }
  .mm-finpop__ttrack img { width: 104px; }   /* smaller thumbnails -> more of the Stratton form is visible */
  .mm-finpop__tnav { display: none; }         /* no chevron arrows on touch -> swipe the strip (or auto-play) */
  /* Spec rows -> 2 columns x 2 rows, with label + value on the SAME row inside each cell (Heng). */
  .mm-finpop__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; overflow: visible; }
  .mm-finpop__specs li { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex: 0 0 auto; min-height: 0; padding: 0; border-bottom: 0; }
  .mm-finpop__main { flex: 1; min-height: 0; }
  /* Manufacture year shown for REFERENCE (buyer selects it in the form). */
  .mm-finpop__specs [data-fin-field="manufacture-year"] { display: flex; }
}

/* Features + specifications — ONE fixed-height panel with an inner scroll (no "Show all" button).
   A bottom fade signals more content; it hides once scrolled to the end (JS toggles the classes). */
.mm-lx__detail { position: relative; margin-top: 16px; border-top: 1px solid var(--line); }
.mm-lx__detail-scroll { padding: 4px 0 0; }   /* no inner scroll — the full list shows */

/* Features: two even columns, flowing DOWN the left column first (rows count set inline from PHP:
   ceil(n/2) — e.g. 6 features = 3 a side). */
.mm-lx__opts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(18px, 3vw, 44px); grid-auto-flow: column; }
.mm-lx__opt { display: flex; align-items: center; gap: 10px; padding: 11px 0; font-size: 13.5px; color: var(--ink); text-transform: capitalize; border-bottom: 1px solid var(--line); min-width: 0; }
.mm-lx__opt > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The odd one out spans both columns and centres, instead of sitting left-aligned beside an
   empty cell. `grid-column: 1 / -1` while the list is `grid-auto-flow: column` — the explicit
   placement is honoured and the remaining items keep flowing around it. */
.mm-lx__opt--alone { grid-column: 1 / -1; justify-content: center; }
.mm-lx__opt-ic { width: 22px; height: 22px; flex: 0 0 22px; color: var(--ink); }
.mm-lx__opt-dot { width: 16px; height: 16px; flex: 0 0 16px; margin: 0 3px; border-radius: 999px; }

/* Specifications continue below the features inside the same scroll panel — two even columns,
   label … value spread apart. */
.mm-lx__detail .mm-lx__eyebrow { margin: 20px 0 4px; }
.mm-lx__spectable { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(18px, 3vw, 44px); margin: 0; }
/* Long values never cramp beside their label: dd refuses to shrink (flex-shrink 0), so when it
   can't fit inline it wraps onto its OWN second line, right-aligned, using the full cell width. */
.mm-lx__spectable > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; min-width: 0; }
.mm-lx__spectable dt { color: var(--muted); white-space: nowrap; }
.mm-lx__spectable dd { color: var(--ink); text-align: right; margin: 0 0 0 auto; flex-shrink: 0; max-width: 100%; overflow-wrap: break-word; }
/* Stacked rows (JS-detected: the value didn't fit inline): value sits LEFT with a small indent
   under its label instead of pinned right — easier to read as a label/value pair. */
.mm-lx__spectable > div.is-stacked dd { margin-left: 12px; margin-right: auto; text-align: left; max-width: calc(100% - 12px); }
/* VIN: an ordinary HALF-WIDTH grid cell like every other spec — it sits on the same row as the
   spec beside it (e.g. Boot) rather than taking its own full-width line (Heng 04/08/2026). The
   17-char code stays on ONE line beside its "VIN" label via white-space:nowrap + a smaller value
   font (10px). 10px was measured against the fleet's widest VINs (WMW…/WVG…): the widest real VIN
   is ~111px at 10px, and the value cell offers ~117px even at the narrowest laptop aside (400px),
   so every VIN fits on one line with margin. Only the VIN value shrinks; other spec values keep
   12.5px. On the mobile 1-column grid (<900px) this cell is already full-width. */
.mm-lx__spectable > div.is-vin { position: relative; }
.mm-lx__spectable > div.is-vin dd { white-space: nowrap; font-size: 10px; letter-spacing: 0; }
@media (max-width: 900px) { .mm-lx__spectable { grid-template-columns: 1fr; } }

/* About / description */
.mm-lx__about { margin-top: clamp(26px, 3.4vw, 38px); }
.mm-lx__eyebrow { font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.mm-lx__prose { font-size: .96rem; line-height: 1.8; color: var(--text); }
.mm-lx__prose p { margin: 0 0 1.1em; }
.mm-lx__prose p:last-child { margin-bottom: 0; }

/* "Popular features" marquee — 2 animated cards visible, continuously drifting (JS). Cards use the
   feature videos / photos / hairline SVG animations from the featured-features helpers. */
.mm-lx__feat { margin-top: clamp(26px, 3.4vw, 38px); }
.mm-lx__featwrap { overflow: hidden; }
.mm-lx__feattrack { display: flex; gap: 10px; will-change: transform; }
.mm-lx__featcard { flex: none; width: calc((100% - 10px) / 2); }
.mm-lx__featanim { position: relative; background: var(--bg-soft);   /* aspect-ratio is 1/1, set with the other feature tiles near .mm-anim */ border-radius: 10px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; }
/* object-fit + the Ken Burns loop are set once for all three feature surfaces — see the
   "Feature artwork: CONTAIN over a blurred fill" block near .mm-anim. This <img> had NO
   animation of its own, which is why the marquee's photographic cards sat dead still next to
   the moving SVG ones (Heng 08/08/2026: "some animations is not animating and static"). */
.mm-lx__featanim video, .mm-lx__featanim img { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-lx__featanim .mm-anim { position: relative; z-index: 1; width: 68%; height: auto; }
/* Feature label — wraps to TWO lines instead of truncating on one (Heng 16/07/2026: "the animated
   features, make bigger to accommodate translated language").
   nowrap + ellipsis was sized for English: translation blows straight past it. German
   "Adaptive Geschwindigkeitsregelung" needs 191px in the 172px card and rendered clipped as
   "Adaptive Geschwindigkeitsr…". CJK is compact enough to fit on one line, so the space costs those
   languages nothing. min-height reserves both lines so the flex track's cards stay aligned whether a
   label wraps or not; line-clamp keeps the ellipsis as a backstop for anything longer still. */
.mm-lx__featname { margin-top: 7px; font-size: 11.5px; line-height: 1.35; color: var(--ink); text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: 2.7em;   /* 2 lines x 1.35 line-height — reserved so cards stay aligned either way */
  /* Evens the two lines. CJK has no spaces, so a naive wrap breaks wherever the box ends and strands
     a single character on line 2 ("自適應巡航系" / "統"). Balanced, it splits nearer the middle.
     Fallback FIRST, preferred LAST: an engine without `balance` discards that declaration and keeps
     `pretty`; one without either keeps a normal wrap. */
  text-wrap: pretty;
  text-wrap: balance; }

/* Title-case variant of the eyebrow (Heng 03/07/2026): "Popular Features" / "Warranty & Condition"
   read as capitalised words rather than small caps. */
.mm-lx__eyebrow--tc { text-transform: none; font-size: 12px; letter-spacing: .08em; }

/* Warranty & condition — quiet dot points under the features marquee. */
.mm-lx__wc { margin-top: clamp(26px, 3.4vw, 38px); }
.mm-lx__wc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mm-lx__wc-list li { position: relative; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--text); }
.mm-lx__wc-list li::before { content: ""; position: absolute; left: 2px; top: .58em; width: 5px; height: 5px; border-radius: 999px; background: var(--ink); }

/* Free VIN check via Budget Direct — quiet hairline chip (same CTA as the live site), centred. */
.mm-lx__vincheck { position: relative; display: flex; width: max-content; max-width: 100%; align-items: center; gap: 8px; margin: 14px auto 0; padding: 9px 14px;
  border: 1px solid var(--line); border-radius: 10px; font-size: 12px; font-weight: 500; color: var(--muted);
  transition: border-color .18s, color .18s; }
.mm-lx__vincheck:hover { border-color: var(--ink); color: var(--ink); }
.mm-lx__vincheck img { height: 20px; width: auto; display: block; }
.mm-lx__vincheck svg { width: 14px; height: 14px; color: var(--muted); }
.mm-lx__vincheck:hover svg { color: var(--ink); }
.mm-lx__vincheck.is-copied::after { content: "VIN copied"; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 600; letter-spacing: .04em; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 6px; white-space: nowrap; z-index: 6; }
.mm-lx__vincheck-hint { margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); text-align: center; }

/* Copy-VIN affordance — drops down BELOW the VIN row on hover, OVERLAPPING whatever sits under it
   (the row itself stays one line tall). It's a child of the row, so hovering the chip keeps the
   row's :hover alive; top:100% + own padding leaves no dead gap that would drop the hover chain. */
.mm-lx__speccopy { position: relative; margin: 0 0 0 8px; padding: 0; border: 0; background: none;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; align-self: center;
  opacity: 1; pointer-events: auto; transition: opacity .18s, transform .18s, color .18s; }
/* Desktop/laptop (hover-capable): keep the copy icon hidden until the VIN row is hovered. Touch devices keep it always visible (base rule above). */
@media (hover: hover) {
  .mm-lx__speccopy { position: absolute; top: 100%; right: 0; z-index: 5; margin: 3px 0 0; opacity: 0; transform: translateY(-4px); pointer-events: none; }
  .mm-lx__spectable > div.is-vin:hover .mm-lx__speccopy { opacity: 1; transform: translateY(0); pointer-events: auto; }
}
.mm-lx__speccopy svg { width: 13px; height: 13px; }
.mm-lx__speccopy:hover { color: var(--ink); }
.mm-lx__speccopy.is-copied::after { content: "Copied"; position: absolute; bottom: calc(100% + 4px); right: 0;
  font-size: 10px; font-weight: 600; color: #fff; background: var(--ink); padding: 3px 7px; border-radius: 6px; white-space: nowrap; z-index: 6; }

/* CTA stack: one primary (test drive), quiet secondaries; deposit section + delivery/phone foot below. */
.mm-lx__ctas { margin-top: clamp(26px, 3.4vw, 38px); display: grid; gap: 10px; }
.mm-lx__cta { width: 100%; padding-left: 10px; padding-right: 10px; }
.mm-lx__ctafoot { margin-top: 18px; display: grid; gap: 12px; }
/* Listing CTAs: sentence case (no caps). Commit actions — Book a test drive + Make a deposit
   (.btn--deep) — in deep navy; secondaries (offer / trade-in) stay white ghosts;
   remaining solids (sticky Enquire, offer-popup Send) in MM blue. */
.mm-lx__cta, .mm-stickybar .btn, .mm-minipop__submit, .mm-sellpop__submit, .mm-lx__finapply {
  text-transform: none; letter-spacing: .02em; font-size: 13px; }
.mm-lx__cta:not(.btn--ghost):not(.btn--deep), .mm-stickybar .btn, .mm-minipop__submit { background: #0266b1; border-color: #0266b1; color: #fff; }
.mm-lx__cta:not(.btn--ghost):not(.btn--deep):hover, .mm-stickybar .btn:hover, .mm-minipop__submit:hover { background: transparent; border-color: #0266b1; color: #0266b1; }
/* The sticky bar's right-hand slot when there is nothing to press: a car with a
   deposit on it. Sized and spaced like the button it replaces so the bar keeps
   its shape, but grey and unclickable — it is a statement of fact, and the
   section its button used to scroll to is not rendered for this car. */
.mm-stickybar__state { display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; color: var(--muted);
  padding: 12px 22px; white-space: nowrap; }
.btn--deep, .mm-stickybar .btn--deep { background: #033e7a; border-color: #033e7a; color: #fff; }
.btn--deep:hover, .mm-stickybar .btn--deep:hover { background: transparent; border-color: #033e7a; color: #033e7a; }
.mm-lx__delivery { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12px; line-height: 1.55; color: var(--muted); }
.mm-lx__delivery svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; color: var(--ink); }
.mm-lx__call { display: inline-flex; align-items: center; justify-content: center; gap: 8px; justify-self: center; font-size: 13px; font-weight: 600; color: var(--ink); }
.mm-lx__call svg { width: 16px; height: 16px; color: var(--muted); }
.mm-lx__call:hover { color: var(--brand-blue); }

/* Inline holding-deposit section ("Secure This Car") — the sticky bar's Make-a-deposit scrolls here.
   The sticky bar hides while this section is on screen (body.mm-bar-hidden, toggled by an observer). */
.mm-lx__deposit { margin-top: clamp(22px, 3vw, 32px); }   /* borderless — sits flush with the column like the other sections */
.mm-lx__deposit-sub { font-size: 13px; line-height: 1.6; color: var(--text); margin: 0 0 12px; }
.mm-lx__deposit-form { display: flex; flex-direction: column; gap: 8px; }
.mm-lx__deposit-form[hidden] { display: none; }   /* collapsed until "Make a deposit" expands it */
.mm-lx__cardmock { display: flex; flex-direction: column; gap: 8px; opacity: .55; }
.mm-lx__cardmock-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mm-lx__deposit-cb { border: 0; background: none; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.mm-lx__deposit-cb:hover { color: var(--brand-blue); }
.mm-lx__deposit-element:not(:empty) { margin: 12px 0 4px; }
.mm-lx__deposit .btn { width: 100%; margin-top: 8px; }
.mm-lx__deposit .btn:disabled { opacity: .45; cursor: not-allowed; }
.mm-lx__deposit .btn:disabled:hover { background: var(--ink); color: var(--ink-contrast); }
.mm-lx__deposit-note { margin: 10px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
.mm-lx__deposit-status { margin: 8px 0 0; font-size: 12px; }
.mm-lx__deposit-status.is-ok { color: #0a7d2b; }
.mm-lx__deposit-status.is-err { color: var(--brand-red, #e80012); }
body.mm-bar-hidden .mm-stickybar { transform: translateY(115%); opacity: 0; pointer-events: none; }   /* a little past 100% so the shadow clears too */

/* Mini popup (Make an offer / Make a deposit) — compact Dior card over a soft backdrop. */
html.mm-minipop-open { overflow: hidden; }
.mm-minipop { position: fixed; inset: 0; z-index: 910; display: none; }
.mm-minipop.is-open { display: block; }
.mm-minipop__backdrop { position: absolute; inset: 0; background: rgba(10, 12, 15, .45); backdrop-filter: blur(3px); }
.mm-minipop__card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(400px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow-y: auto;
  background: var(--bg); border-radius: 16px; padding: clamp(22px, 3vw, 28px); box-shadow: 0 24px 70px rgba(10, 12, 15, .28); }
.mm-minipop__x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; background: none;
  color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mm-minipop__x:hover { color: var(--ink); }
.mm-minipop__x svg { width: 18px; height: 18px; }
.mm-minipop__title { font-weight: 300; font-size: 1.3rem; margin: 0 24px 6px 0; }
.mm-minipop__sub { font-size: 12.5px; line-height: 1.6; color: var(--muted); margin: 0 0 12px; }
.mm-minipop__car { font-size: 12.5px; font-weight: 600; color: var(--ink); background: var(--bg-soft); border-radius: 10px; padding: 10px 14px; margin: 0 0 8px; }
.mm-minipop__form { display: flex; flex-direction: column; gap: 8px; }
.mm-minipop__submit { width: 100%; margin-top: 8px; }
.mm-minipop__status { margin: 4px 0 0; font-size: 12px; }
.mm-minipop__status.is-ok { color: #0a7d2b; }
.mm-minipop__status.is-err { color: var(--brand-red, #e80012); }

/* Trade-in popup — the sell-your-car page's look (navy #08163a ground, white underline fields;
   .mm-sell-form__field mirrors the field rules from templates/sell-your-car.php Section 4). */
html.mm-sellpop-open { overflow: hidden; }
.mm-sellpop { position: fixed; inset: 0; z-index: 910; display: none; }
.mm-sellpop.is-open { display: block; }
.mm-sellpop__backdrop { position: absolute; inset: 0; background: rgba(10, 12, 15, .45); backdrop-filter: blur(3px); }
.mm-sellpop__card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(580px, calc(100vw - 32px)); max-height: calc(100svh - 32px); overflow: hidden;
  background: #08163a; color: #fff; border-radius: 16px; padding: clamp(22px, 3vw, 30px); box-shadow: 0 24px 70px rgba(10, 12, 15, .38); }
/* Backdrop = the sell page's "Get a quote" section: tilted white-bordered car photos (scrap) under
   the blue->red blended wash (same gradient as .mm-sell-formsec__wash). */
.mm-sellpop__scrap { position: absolute; inset: 0; z-index: 0; overflow: hidden; display: flex; flex-wrap: wrap; gap: 14px;
  justify-content: center; align-content: center; opacity: .6; }
.mm-sellpop__scrap .mm-scrap__p { width: 132px; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px; border: 4px solid #fff;
  box-shadow: 0 16px 34px -12px rgba(0, 0, 0, .55); transform: rotate(-4deg); }
.mm-sellpop__scrap .mm-scrap__p:nth-child(2n) { transform: rotate(5deg); }
.mm-sellpop__scrap .mm-scrap__p:nth-child(3n) { transform: rotate(-8deg); }
.mm-sellpop__scrap .mm-scrap__p:nth-child(4n) { transform: rotate(7deg) translateY(-12px); }
.mm-sellpop__scrap .mm-scrap__p:nth-child(5n) { transform: rotate(-2deg) translateY(14px); }
.mm-sellpop__wash { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, rgba(3, 62, 122, .92) 0%, rgba(2, 102, 177, .84) 34%, rgba(138, 19, 48, .86) 70%, rgba(232, 0, 18, .88) 100%); }
/* The inner wrapper owns the scroll (not the card) so the scrap/wash backdrop always covers
   the visible card on short screens. */
.mm-sellpop__inner { position: relative; z-index: 2; max-height: calc(100svh - 32px - 2 * clamp(22px, 3vw, 30px));
  overflow-y: auto; scrollbar-width: none; }
.mm-sellpop__inner::-webkit-scrollbar { display: none; }
.mm-sellpop__x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 34px; height: 34px; border: 0; background: none;
  color: rgba(255, 255, 255, .7); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mm-sellpop__x:hover { color: #fff; }
.mm-sellpop__x svg { width: 18px; height: 18px; }
.mm-sellpop__title { display: inline-flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: .3em; width: 100%;
  font-family: var(--serif, Georgia, serif); font-weight: 500; font-size: 1.35rem; color: #fff; margin: 0 0 6px; padding: 0 28px; text-align: center; }
.mm-sellpop__logo { height: 1.2em; width: auto; flex: none; align-self: baseline; }
.mm-sellpop__sub { font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .82); margin: 0 0 14px; text-align: center; }
.mm-sellpop__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.mm-sellpop .mm-sell-form__field { width: 100%; padding: 12px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .45); background: none;
  font-family: inherit; font-size: 15px; color: #fff; outline: none; transition: border-color .2s ease; }
.mm-sellpop .mm-sell-form__field::placeholder { color: rgba(255, 255, 255, .72); }
.mm-sellpop .mm-sell-form__field:focus { border-bottom-color: #fff; }
.mm-sellpop .mm-sell-form__field--wide { grid-column: 1 / -1; }
.mm-sellpop textarea.mm-sell-form__field { resize: vertical; min-height: 54px; }
.mm-sellpop__submit { width: 100%; margin-top: 16px; background: #fff; border-color: #fff; color: #08163a; }
.mm-sellpop__submit:hover { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }
.mm-sellpop__status { margin: 10px 0 0; font-size: 12px; }
.mm-sellpop__status.is-ok { color: #9fe1cb; }
.mm-sellpop__status.is-err { color: #ffd23f; }
.mm-sellpop__alt { display: block; margin-top: 14px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .72); text-decoration: underline; text-underline-offset: 2px; }
.mm-sellpop__alt:hover { color: #fff; }
/* AI-first entry: clone of the sell-page quick-start pill (.mm-sell-qs__pill in
   templates/sell-your-car.php) — REGO label + plate field + state + a search-icon Go that reveals
   once a rego is typed — handing off to the Michi widget (mmMichiAsk). Transparent variant for the
   navy card: white borders/text, glassy hovers; the whole block is centred. No overflow:hidden
   (the Dior state panel lives inside the pill), so the Go button rounds its own right corners. */
.mm-sellpop__ai { display: flex; flex-direction: column; align-items: center; text-align: center; }
.mm-sellpop__aipill { display: inline-flex; align-items: stretch; background: transparent; border: 1px solid rgba(255, 255, 255, .55); border-radius: 12px; transition: border-color .2s ease; }
.mm-sellpop__aipill:focus-within { border-color: #fff; }
.mm-sellpop__ailbl { align-self: center; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; color: rgba(255, 255, 255, .65); padding: 0 2px 0 14px; text-transform: uppercase; }
.mm-sellpop__airego { width: 118px; min-width: 0; border: 0; outline: none; background: transparent; font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #fff; padding: 13px 8px; }
.mm-sellpop__airego::placeholder { color: rgba(255, 255, 255, .5); font-weight: 500; }
.mm-sellpop__aidd { flex: 0 0 auto; display: flex; }
.mm-sellpop__aistate { width: auto; height: 100%; display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: #fff; font-family: inherit; font-size: 13.5px; font-weight: 700; padding: 0 12px; cursor: pointer; transition: background .12s; }
.mm-sellpop__aistate:hover { background: rgba(255, 255, 255, .12); }
.mm-sellpop__aistate .mm-dd__chev { width: 10px; height: 10px; color: #fff; }
.mm-sellpop__aidd .mm-dd__panel { left: auto; right: 0; min-width: 108px; text-align: left; }
.mm-sellpop__aigo { border: 0; border-left: 1px solid rgba(255, 255, 255, .35); border-radius: 0 11px 11px 0; background: transparent; color: #fff; cursor: pointer; white-space: nowrap; overflow: hidden; max-width: 0; padding: 0; opacity: 0; transition: background .15s, max-width .28s ease, padding .28s ease, opacity .2s ease; }
.mm-sellpop__aipill.has-rego .mm-sellpop__aigo { max-width: 54px; padding: 0 16px; opacity: 1; }   /* reveals as soon as a rego is typed, hides when cleared */
.mm-sellpop__aigo:hover { background: rgba(255, 255, 255, .12); }
.mm-sellpop__aigo svg { width: 17px; height: 17px; display: block; }
.mm-sellpop__ainote { margin: 9px 2px 0; font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .75); text-align: center; }
.mm-sellpop__ainote a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.mm-sellpop__ainote a:hover { color: rgba(255, 255, 255, .85); }
.mm-sellpop__or { display: flex; align-items: center; gap: 12px; margin: 16px 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); white-space: nowrap; }
.mm-sellpop__or::before, .mm-sellpop__or::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .25); }
/* Portrait phones: the Michi FAB floats over the popup card's lower corner — hide it while the
   trade-in popup is open (html.mm-sellpop-open is set by openSell/closeSell). The chat PANEL is
   unaffected: the AI handoff closes the popup first, which restores the class before the panel
   opens. Same treatment as the sell page's mm-kb-open rule. */
@media (max-width: 760px) and (orientation: portrait) {
  html.mm-sellpop-open #mm-chat-fab { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}

@media (max-width: 900px) {
  /* Stack: the photo becomes a normal 4:3 block on top (logo still overlaid), details below. */
  .mm-lx__shell { grid-template-columns: 1fr; min-height: 0; }
  .mm-lx__media, .mm-lx__aside { min-width: 0; }   /* grid items default to min-width:auto (~620px min-content) and overflow the 1fr column — let them shrink to the viewport so content fits */
  .mm-lx__media { position: relative; height: auto; aspect-ratio: 4/3; }
  /* Expand-to-full-bleed is a desktop-only move (the stacked photo is already full-width). */
  .mm-lx__gbtn--expand { display: none; }
  .mm-lx__aside { min-height: 0; width: 100%; max-width: 620px; margin: 0 auto;
    padding: clamp(26px, 5vw, 40px) var(--gutter) calc(var(--mm-lx-bar) + 32px); }
}

/* Price + CTA bar — confined to the right details column (Tesla's aside-footer sits inside the side
   panel, not full width). Aligns to the aside width; padded to clear the Michi chat fab (bottom-right). */
/* Tesla-style card: attached to the viewport bottom, inset from the sides, squarish rounded top
   corners + soft shadow — like Tesla's order bar. */
.mm-stickybar {
  position: fixed; bottom: var(--mm-vvfix, 0px); right: 8px; left: auto; z-index: 60;   /* 8px: optically centred once the scrollbar track is counted; --mm-vvfix keeps it ON the edge through an iOS toolbar collapse */
  width: calc(var(--mm-lx-col) - 28px); box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px; background: rgba(255,255,255,.97); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-bottom: 0; border-radius: 8px 8px 0 0; box-shadow: 0 -6px 30px rgba(10, 12, 15, .12);
}
.mm-stickybar__price { font-size: 1.05rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.mm-stickybar__price span { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }
.mm-stickybar .btn { padding: 11px 22px; }
@media (max-width: 900px) { .mm-stickybar { left: 0; right: 0; width: auto; padding-left: 88px; } }
/* Portrait tablets ABOVE that 900px reach (iPad Pro is 1024 wide in portrait): the details span
   the screen there, so the bar does too. Landscape is deliberately excluded — it is two-column,
   and the bar belongs inside the details column (the base rule). */
@media (orientation: portrait) and (min-width: 901px) {
  .mm-stickybar { left: 0; right: 0; width: auto; margin: 0; padding-left: 88px; }
} /* phones (both orientations): full-width bar; the Michi orb sits on top at bottom-left, price padded clear of it */

/* iPhone / phone PORTRAIT (single listing): pin the car photo at the top (sticky, whole car in view) so
   the details scroll UP underneath it — the 2-row pattern used on tablet landscape. And lift the Michi
   orb ABOVE the price bar so the price returns to left-aligned (Heng 12/07/2026). Placed after the ≤900
   rules so it wins for phone portrait. */
@media (max-width: 767px) and (orientation: portrait) {
  .mm-lx__shell { grid-template-columns: 1fr; min-height: 0; }
  .mm-lx__media { position: sticky; top: 0; height: auto; aspect-ratio: 3 / 2; z-index: 4; }
  .mm-lx__aside { position: relative; z-index: 1; min-height: 0; }
  .mm-stickybar { padding-left: 20px; }                            /* price left-aligned — the orb no longer sits beside it */
  #mm-chat-fab { transform: scale(.85) !important; }                     /* smaller orb on mobile portrait — EVERY page (consistent size) */
  /* Michi orb sits INSIDE the sticky bar, in the gap between the price (left) and the Make-a-deposit
     button (right) — Heng 13/07/2026. The widget locks bottom:16px / left:22px via inline !important, so
     we shift with transform (never set inline). The gap centre tracks ~50vw-16px (button is right-anchored,
     price left-anchored + short), so this vw transform follows it across phone widths; the +9px drops the
     orb to the bar's vertical centre; margin-bottom removes the earlier above-the-bar lift — it is
     var(--mm-vvfix) rather than a bare 0 so the iOS bottom-anchor correction still reaches the orb
     here (it resolves to 0 everywhere the drift is absent, i.e. the old behaviour), and the orb keeps
     travelling with the price bar it sits inside instead of sliding out of it. */
  body.single-listings #mm-chat-fab { margin-bottom: var(--mm-vvfix, 0px) !important; transform: translate(calc(50vw - 66px), 9px) scale(.85) !important; }
  /* Michi's teaser: the fab moved into the sticky-bar centre, so lift the bubble to sit ABOVE it
     (centred, tail pointing DOWN) instead of the old left-offset side bubble that pointed at bottom-left. */
  body.single-listings #mm-launcher-bubble { left: 50%; right: auto; bottom: 82px; transform: translateX(-50%); }
  body.single-listings #mm-launcher-bubble::after { left: 50%; right: auto; top: 100%; bottom: auto; border: 7px solid transparent; border-top-color: #fff; border-bottom: 0; transform: translateX(-50%); filter: drop-shadow(0 2px 1px rgba(3, 62, 122, .12)); }
  /* Gallery controls: surface JUST the play/pause button (chromeless), like tablet landscape — drop the
     settings toggle + zoom + expand (pinch-zoom works on touch; expand is a desktop-only move). */
  .mm-lx__gtoggle, .mm-lx__gbtn--expand, [data-lx-zoom] { display: none; }
  .mm-lx__nav { display: none; }                                 /* remove the prev/next chevrons on the car pic — swipe navigates on touch */
  .mm-lx__gmenu { max-width: none; opacity: 1; transform: none; overflow: visible; }
  .mm-lx__gbtn, .mm-lx__gbtn:hover, .mm-lx__gbtn.is-active { background: none; backdrop-filter: none; color: #fff; }
  .mm-lx__gbtn svg { filter: drop-shadow(0 1px 5px rgba(15, 18, 22, .6)); }
  /* Auto-hide: after 10s the button fades out + goes non-interactive so a tap in the corner reveals it (JS toggles .mm-ctl-idle). */
  .mm-lx__media.mm-ctl-idle .mm-lx__gmenu { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
  /* A bit more breathing room between "Added X ago" and the title block. */
  .mm-lx__aside .mm-lx__added { margin-bottom: 22px; }
}

/* ---- Tablet LANDSCAPE only: 2 ROWS instead of columns (Heng 12/07/2026).
   The car photo becomes a sticky top band; the details sit below and scroll UP UNDERNEATH it
   (car is opaque + higher z-index, so content slides behind it). Gated by tablet SHAPE
   (max-aspect-ratio:3/2 — iPads are 4:3 / 3:2 in landscape ≈1.33-1.44) so 1366×768 / 1280×800
   (16:9 / 16:10 ≈1.6-1.78) LAPTOPS keep the desktop two-column layout. Shape (not hover:none)
   so it also previews in a responsive viewer, which can't emulate touch. ---- */
/* ---- iPad Pro 13" LANDSCAPE (Heng 07/08/2026: "reduce column width a bit so can see more of
   car, make overall text smaller if needed"). 1366 CSS px wide in BOTH browsers — Safari reports
   1366x1024 and Chrome iOS 1366x972 — so width+landscape+touch pins this device without a
   user-agent sniff, and `pointer: coarse` keeps every laptop out.
   min-width 1280 deliberately excludes the smaller iPads (Pro 11" is 1194, Air 1180), whose
   columns are already a bigger share of a narrower screen.
   The column drops 410 -> 348px, handing 62px straight to the car. The type comes down with it
   because `.mm-lx__title` is `nowrap` + ellipsis: a narrower column at the old size would just
   truncate the car's name sooner. ---- */
@media (min-width: 1280px) and (orientation: landscape) and (pointer: coarse) {
  /* Every px off this column is a px of car, and it is the ONLY lever on the crop: the photo is
     `cover` in a box whose height is fixed by the visible area, so a wider box = a wider slice of
     a 3:2 car. 350 was the floor only because the price bar's contents measured 303px; trimming
     the bar's own padding below drops that, which buys the column ~40px more. */
  body.single-listings { --mm-lx-col: 310px; }
  /* Slimmer bar so it fits the narrower column without the blue CTA poking out. */
  .mm-stickybar { padding-left: 14px; padding-right: 14px; gap: 8px; }
  .mm-stickybar .btn { padding-left: 15px; padding-right: 15px; }
  /* Keep the photo control above the browser chrome. The photo is now taller than the visible
     area by exactly the chrome's height, so without this the play/pause + fullscreen buttons sit
     under it. Scoped HERE, to the two-column touch layout: on the banded phone/tablet layouts the
     media is a short strip and this offset would shove the controls up into the middle of it. */

  /* 🚨 Put the FULLSCREEN button back (Heng: "the full view screen button is missing bottom
     right of car"). My own regression: the touch-tablet block hides
     `.mm-lx__gtoggle, .mm-lx__gbtn--expand, [data-lx-zoom]` because expand used to be
     desktop-only there — and widening that block to `(pointer: coarse)` made it hide the button
     on this iPad. Landscape tablets now use the two-column layout and DO have a lightbox, so the
     button belongs on screen. (The expanded state re-asserts it separately, for leaving.) */
  /* The SPECIFICATIONS list is a separate grid from the stat row above it, and it was the one
     Heng could see doubled up: `.mm-lx__spectable` is `1fr 1fr` by default, which at 300px gives
     each pair ~130px and crams "Compliance / 05/25" onto two lines. One column here too. */
  .mm-lx__spectable { grid-template-columns: 1fr; }
  /* Photo controls clear of the browser chrome — the frame is taller than the visible band. */
  .mm-lx__gctl { bottom: calc(var(--mm-lx-ctlbottom, 0px) + clamp(14px, 1.8vw, 20px)); }
  /* The car keeps a STABLE height inside that taller frame and is panned to the visible region,
     so it never re-scales (panning does not zoom). */
  .mm-lx__hero, .mm-lx__hero-fade {
    position: absolute; left: 0; width: 100%;
    top: var(--mm-lx-imgtop, 0px); height: var(--mm-lx-imgh, 100%);
  }
  /* Bar was clipping at the right edge — hold it further in and never let it exceed the screen. */
  .mm-stickybar { right: 16px;
    width: min(calc(var(--mm-lx-col) - 28px), calc(100vw - 32px)); }
  /* Specs: ONE per row, label left / value right (Heng 07/08/2026: "make specs 1 column so specs
     fit in 1 row"). Across a 320px column the N-across grid gave each stat ~70px, which wrapped
     every label onto two lines and stacked the value above it — four specs became eight lines of
     cramped centred text. One flex row each reads in a glance and halves the height.
     🚨 `!important` is unavoidable: the template writes
     `style="grid-template-columns:repeat(N,minmax(0,1fr))"` INLINE from the spec count
     (single-listings.php), and an inline declaration outranks any stylesheet rule. */
  .mm-lx__specs { grid-template-columns: 1fr !important; }
  .mm-lx__specs .mm-stat { display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; text-align: left; padding: 7px 2px; border-bottom: 1px solid var(--line); }
  .mm-lx__specs .mm-stat:last-child { border-bottom: 0; }
  .mm-lx__specs .mm-stat__label { order: -1; margin-top: 0; flex: 0 0 auto; }
  .mm-lx__specs .mm-stat__num { flex: 0 1 auto; text-align: right; }
  .mm-lx__aside { padding-left: clamp(14px, 1.3vw, 22px); padding-right: clamp(14px, 1.3vw, 22px); }
  .mm-lx__title { font-size: clamp(1rem, 1.55vw, 1.3rem); }
  .mm-lx__price { font-size: clamp(1rem, 1.5vw, 1.28rem); }
  .mm-lx__subtitle { font-size: 12px; }
  .mm-lx__sub { font-size: 11.5px; }
  .mm-lx__added { font-size: 10px; }
}

/* 🚨 Outranks the touch-tablet block's `display:none` by SPECIFICITY (0,2,0 vs 0,1,0) rather
   than by source order — the earlier attempt lived above that block and silently lost, which the
   device reported as `expandBtn: none@0,0 w0`. Landscape tablets have a lightbox, so the
   fullscreen toggle must be on screen (Heng: "missing the toggle icon right corner like desktop"). */
@media (min-width: 1280px) and (orientation: landscape) and (pointer: coarse) {
  body.single-listings .mm-lx__gbtn--expand { display: flex; }
}

/* ---- Tablet LANDSCAPE stack: RETIRED 07/08/2026 (Heng: "make safari same landscape as
   chrome"). It turned the car into a full-width band with the details scrolling underneath
   (his own 12/07/2026 directive), but it was gated on SHAPE — `max-width: 1366px` +
   `max-aspect-ratio: 3/2` — and that put two browsers on ONE iPad into different layouts:
   Safari on a 13" Pro reports 1366x1024 (aspect 1.33) and stacked, while Chrome iOS reports its
   VISUAL viewport (measured 1366x817, aspect 1.67), missed the gate, and used the DESKTOP
   two-column layout. Heng prefers Chrome's, so landscape tablets now always get two columns and
   the two browsers agree.
   🚨 Do NOT re-add a shape-gated tablet layout. If a device-shaped rule is ever needed here,
   gate it on `(pointer: coarse)` — shape is a property of the browser's viewport reporting, not
   of the device. PORTRAIT tablets keep their own stack block further down; two columns in
   portrait would be unusable. ---- */


/* NOTE (Heng 07/08/2026): a `object-fit: contain` rule lived here to un-crop the photo on
   landscape tablets wider than 3/2 (cover shows only ~65% of the car's width on that nearly
   square column). REVERTED — it zoomed out too far and the letterbox bands were worse than the
   crop. The full view is what the expand button is for; do not reinstate it here. */

/* Tablet (both orientations; gated to ≤3/2 aspect so 16:9 / 16:10 laptops keep the desktop 2-column
   bar): the bottom price bar spans FULL WIDTH and the Michi chat orb (bottom-left, z-index 999998)
   just sits ON TOP of it — the bar no longer insets to clear the orb (Heng 12/07/2026). The price is
   padded left to clear the orb. Placed after the ≤900 + landscape rules so it wins on tablets. */
@media (min-width: 768px) and (max-width: 1366px) and (max-aspect-ratio: 3/2),
       (min-width: 768px) and (pointer: coarse) {
  /* 🚨 The full-width price bar that used to live here has moved to a PORTRAIT-only rule
     below (Heng 07/08/2026: "place the right column bottom bar fit within right column like
     chrome, atm still full width"). It belongs to the STACKED layouts, where the details span
     the screen and a column-width bar would float in the middle of nothing. Landscape is always
     two-column now, so there the bar must stay inside the details column — which is what the
     base rule does. This block keeps only the touch CONTROL rules, which are orientation-neutral. */
  /* Touch tablets (BOTH orientations): pinch-zoom works + expand is desktop-only, so the bottom-right
     photo control is JUST a chromeless white play/pause button — settings toggle + zoom + expand hidden. */
  .mm-lx__gtoggle, .mm-lx__gbtn--expand, [data-lx-zoom] { display: none; }
  .mm-lx__gmenu { max-width: none; opacity: 1; transform: none; overflow: visible; }
  .mm-lx__gbtn, .mm-lx__gbtn:hover, .mm-lx__gbtn.is-active { background: none; backdrop-filter: none; color: #fff; }
  .mm-lx__gbtn svg { filter: drop-shadow(0 1px 5px rgba(15, 18, 22, .6)); }
  /* Auto-hide after 10s (JS toggles .mm-ctl-idle), same as phones; a tap in the corner reveals it. */
  .mm-lx__media.mm-ctl-idle .mm-lx__gmenu { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
}

/* ---- Tablet PORTRAIT (768-1024 wide): stack (car full-width on top, details below) but WIDEN the
   details row so it fills the width like the car — the 620px phone cap left it floating narrow with
   big empty side margins (Heng 12/07/2026). Also stacks the 901-1024 range that was still 2-column. ---- */
@media (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
  .mm-lx__shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* Car: full-width 4/3 band, sticky at the top; the details scroll up UNDER it (same as landscape). */
  .mm-lx__media { position: sticky; top: 0; height: auto; aspect-ratio: 4 / 3; z-index: 4; }
  .mm-lx__aside { position: relative; z-index: 1; width: 100%; max-width: 940px; margin: 0 auto;
    padding: clamp(24px, 4vw, 40px) clamp(24px, 4vw, 44px) calc(var(--mm-lx-bar) + 32px); }
}

/* ---- Phone LANDSCAPE (short + wide; max-height:500 catches iPhones ~375-430 tall, excludes tablets
   768+ and laptops): stack and WIDEN the details row so it fills the width like the car, instead of
   the narrow 620px phone cap floating in the middle (Heng 12/07/2026). Also stacks the 901-932 range
   (Pro Max) that was still desktop 2-column. ---- */
@media (orientation: landscape) and (max-height: 500px) {
  /* transition:none — the desktop expand animates grid-template-columns; on a phone that just flashes
     a transient horizontal overflow while the 2-col->1-col change interpolates on rotation. */
  .mm-lx__shell { grid-template-columns: minmax(0, 1fr); min-height: 0; transition: none; }
  .mm-lx__media { position: relative; height: auto; aspect-ratio: 4 / 3; }
  /* Photo control: surface JUST the chromeless white play/pause (like mobile portrait + tablet) — drop
     the settings toggle + zoom + expand. Auto-hides after 10s (JS toggles .mm-ctl-idle); a tap reveals it. */
  .mm-lx__gtoggle, .mm-lx__gbtn--expand, [data-lx-zoom] { display: none; }
  .mm-lx__gmenu { max-width: none; opacity: 1; transform: none; overflow: visible; }
  .mm-lx__gbtn, .mm-lx__gbtn:hover, .mm-lx__gbtn.is-active { background: none; backdrop-filter: none; color: #fff; }
  .mm-lx__gbtn svg { filter: drop-shadow(0 1px 5px rgba(15, 18, 22, .6)); }
  .mm-lx__media.mm-ctl-idle .mm-lx__gmenu { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
  .mm-lx__aside { width: 100%; max-width: 940px; margin: 0 auto;
    padding: clamp(20px, 4vw, 34px) clamp(20px, 4vw, 40px) calc(var(--mm-lx-bar) + 28px); }
  .mm-stickybar { left: 0; right: 0; width: auto; margin: 0; padding-left: 88px; }
}

/* ============================== Footer ============================== */
/* Footer styles live at the END of this file — see the ".mm-footer" block. */

/* ============================== Featured (home) ============================== */
.mm-featured { position: relative; min-height: 100vh; display: flex; flex-direction: column; padding: clamp(56px, 9vw, 90px) 0; } /* full viewport; the carousel grows (flex:1) to fill so there's no leftover slack — full-port AND even gaps */
.mm-featured__head { text-align: center; margin-bottom: clamp(22px, 2.8vw, 36px); }
.mm-featured__head .eyebrow { margin-bottom: 12px; }
.mm-slide__fav { position: absolute; top: clamp(14px, 1.6vw, 22px); right: clamp(14px, 1.6vw, 22px); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-slide__fav svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; filter: drop-shadow(0 1px 5px rgba(20,22,24,.6)); transition: transform .2s ease, fill .2s ease, stroke .2s ease; }
.mm-slide__fav:hover svg { transform: scale(1.1); }
.mm-slide__fav.is-active svg { fill: #e80012; stroke: #e80012; }

/* wishlist off-canvas list */
.mm-wl__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 2.2vh, 28px); }
.mm-wl__title { font-family: var(--sans); font-weight: 500; font-size: clamp(.82rem, .92vw, .9rem); letter-spacing: 0; color: var(--ink); }
.mm-wl__count { font-family: var(--sans); font-size: clamp(.66rem, .74vw, .71rem); color: var(--muted); white-space: nowrap; }
/* Dior-style: cards connected edge-to-edge (no gap) inside one bordered list, hairline dividers between. */
.mm-wl__items { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.mm-wl__item { display: grid; grid-template-columns: clamp(120px, 28%, 200px) 1fr; align-items: stretch; gap: 0; border-bottom: 1px solid var(--line); background: none; padding: 0; min-height: clamp(112px, 15vh, 152px); }
.mm-wl__item:last-child { border-bottom: 0; }
.mm-wl__media { display: block; height: 100%; min-height: clamp(112px, 15vh, 152px); background: var(--bg-soft); overflow: hidden; }   /* big, flush to the card edges (Dior) */
.mm-wl__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-wl__media img.mm-wl__img--soon { object-fit: contain; background: #eef5fd; padding: 8px; }
/* A wishlisted coming-soon car carries its own paint, exactly as its archive card does.
   The tint lives in CSS, never in the image, so the wishlist — which stores only the
   image URL — showed every upcoming car in the same pale blue: three different cars
   reading as one. Recipe mirrors .mm-card__robe: grayscale the satin down to pure
   luminance (brightness+contrast widen that range, because multiply is a product and
   only keeps the range it is given), then a colour layer over it in multiply, masked by
   the SAME png so the paint stops at the car's edge. `inset` matches the img's 8px
   padding so mask and artwork line up; isolation keeps the blend off the panel behind.
   Only ever applied to an upcoming car — the sold and gone treatments below stay grey,
   which is what keeps "no longer available" from reading as "coming soon". */
.mm-wl__media.is-tinted { position: relative; isolation: isolate; }
.mm-wl__media.is-tinted img.mm-wl__img--soon { filter: grayscale(1) brightness(.92) contrast(1.45); }
.mm-wl__media.is-tinted::after { content: ""; position: absolute; inset: 8px; z-index: 1;
  background: var(--rc); mix-blend-mode: multiply; pointer-events: none;
  -webkit-mask: var(--robe, url(assets/covered-car.png)) center/contain no-repeat;
          mask: var(--robe, url(assets/covered-car.png)) center/contain no-repeat; }
.mm-wl__media:hover { opacity: 1; }   /* no white/fade overlay on image hover (overrides global a:hover) */
.mm-wl__main { display: flex; flex-direction: column; justify-content: center; gap: clamp(2px, .4vh, 4px); padding: clamp(16px, 2vh, 22px) clamp(20px, 2.6vw, 34px); min-width: 0; text-align: left; }
.mm-wl__name, .mm-wl__sub { text-align: left; }
.mm-wl__row { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
/* Sold-synced wishlist items: dark overlay + SOLD pill top-right, relative time where the price was. */
.mm-wl__item--sold .mm-wl__media { position: relative; }
.mm-wl__item--sold .mm-wl__media img { filter: grayscale(.65) saturate(.6); }
.mm-wl__item--sold .mm-wl__media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, .5); }   /* white sold-out veil — reads 'gone' on the light panel */
.mm-wl__soldtag { position: absolute; top: 10px; right: 10px; z-index: 2; background: var(--brand-blue, #0266b1); color: #fff; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); }
.mm-wl__price--sold { color: var(--muted); font-size: .78rem; white-space: nowrap; }
/* "Gone" — the listing was removed and it is NOT a recent sale, so we can't claim it sold (cars get
   re-added). Same desaturated/veiled treatment as sold, but a NEUTRAL grey tag: blue = Sold (a real,
   dated event); grey = simply inactive. Pushed further to full grayscale so the two never read alike. */
.mm-wl__item--gone .mm-wl__media { position: relative; }
.mm-wl__item--gone .mm-wl__media img { filter: grayscale(1) saturate(.35); }
.mm-wl__item--gone .mm-wl__media::after { content: ''; position: absolute; inset: 0; z-index: 1; background: rgba(255, 255, 255, .5); }
/* covered-car fallback on a gone card must NOT inherit the coming-soon blue, or "gone" and
   "coming soon" would look identical — same art, opposite meanings. */
.mm-wl__item--gone .mm-wl__media img.mm-wl__img--soon { background: #f1f2f4; }
.mm-wl__gonetag { position: absolute; top: 10px; right: 10px; z-index: 2; background: #6b7280; color: #fff; padding: 4px 9px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .4); }
.mm-wl__price--gone { color: var(--muted); font-size: .78rem; white-space: nowrap; }
.mm-wl__name { font-family: var(--sans); font-size: clamp(.76rem, .82vw, .83rem); font-weight: 300; line-height: 1.2; color: var(--ink); text-decoration: none; flex: 1 1 auto; min-width: 0; }
.mm-wl__name:hover { opacity: 1; }
.mm-wl__sub { font-family: var(--sans); font-size: clamp(.72rem, .8vw, .78rem); font-weight: 300; line-height: 1.3; color: var(--muted); }
.mm-wl__price { font-family: var(--sans); font-size: clamp(.78rem, .85vw, .84rem); font-weight: 500; line-height: 1.2; color: var(--ink); white-space: nowrap; flex: 0 0 auto; }
.mm-wl__remove { align-self: flex-end; font-family: var(--sans); font-size: clamp(.68rem, .75vw, .72rem); color: var(--muted); background: none; border: 0; padding: 0 0 2px; border-bottom: 1px solid var(--line); cursor: pointer; transition: color .2s ease, border-color .2s ease; margin-top: clamp(8px, 1.2vh, 14px); }
.mm-wl__remove:hover { color: var(--ink); border-color: var(--ink); }
.mm-panel[data-panel-content="wishlist"] { max-width: 100%; margin-left: auto; margin-right: auto; }
.mm-icon--dot { position: relative; }
.mm-icon--dot::after { content: ""; position: absolute; top: 1px; right: 1px; width: 6px; height: 6px; border-radius: 50%; background: #f5a623; }
html.mm-oc-open .mm-icon--dot::after { display: none; }
/* Mobile portrait — Dior wishlist card (Heng 10/07/2026): wide thumb; name/sub up top; actions on
   the LEFT (Make a deposit, then Remove) and the PRICE bottom-right on the Remove line — cloned
   from Dior's wishlist rows (Remove left / $price right). display:contents on .mm-wl__row lifts the
   name + price into .mm-wl__main's grid so the price can leave the top line without markup changes.
   Thumb 170px + single-line name/specs (ellipsis) keeps the card ~3:2 so the landscape car photo
   isn't side-chopped by object-fit:cover (130px showed a vertical slice — Heng feedback). */
@media (max-width: 540px) {
  .mm-wl__item { grid-template-columns: 170px 1fr; }
  .mm-wl__row { display: contents; }
  .mm-wl__main { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; align-content: center;
    grid-template-areas: "name name" "sub sub" "dep dep" "rem price"; padding-left: 14px; padding-right: 14px; }
  .mm-wl__name { grid-area: name; }
  .mm-wl__sub { grid-area: sub; }
  .mm-wl__name, .mm-wl__sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }   /* truncate title + specs so the narrower text column never wraps/tallens the card */
  /* Lock the thumb to 4:3 (the Autogate hero ratio) instead of stretching to the row's vh-driven
     min-height — a 170x~150 portrait-ish box was still side-chopping the landscape car photo. */
  .mm-wl__item { min-height: 0; }
  .mm-wl__media { aspect-ratio: 4 / 3; height: auto; min-height: 0; align-self: center; }
  .mm-wl__deposit { grid-area: dep; justify-self: start; }
  .mm-wl__remove { grid-area: rem; justify-self: start; align-self: end; }
  .mm-wl__price { grid-area: price; justify-self: end; align-self: end; }
}

/* SITEWIDE Dior-style scrollbar — thin, NO up/down arrows, subtle grey thumb, transparent track.
   🚨 Windows renders the CLASSIC arrow-buttoned scrollbar for the STANDARD `scrollbar-width`/
   `scrollbar-color` props — even at `thin`. The webkit `::-webkit-scrollbar-button{display:none}`
   is the only thing that removes those arrows, but it's IGNORED the moment standard props are
   present (Chrome then uses the standard scrollbar and drops the ::-webkit-scrollbar pseudos).
   So we deliberately DO NOT set standard scrollbar-width/color for Chrome — Chrome stays in
   webkit-custom mode (arrow-free). Firefox (no ::-webkit-scrollbar support) gets the standard
   props via the @supports block below; Firefox's `thin` has no arrows. */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
/* MM Carz brand blend: dark blue -> light blue -> red tail. 2px transparent border + padding-box
   clip = a ~3px thin thumb; border-radius fully rounds the top & bottom into a pill. */
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #033e7a 0%, #0266b1 50%, #0266b1 70%, #e80012 100%); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #022f5e 0%, #0266b1 48%, #0266b1 66%, #e80012 100%); border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }   /* remove the top/bottom arrows (webkit mode only) */
::-webkit-scrollbar-corner { background: transparent; }
/* Firefox-only: it has no ::-webkit-scrollbar, so give it the standard thin props (no arrows in FF). */
@supports (scrollbar-width: thin) and (not selector(::-webkit-scrollbar)) {
  * { scrollbar-width: thin; scrollbar-color: #0266b1 transparent; }   /* FF: solid brand blue (no gradient support) */
}
.mm-featured__head h2 { margin: 0; font-family: var(--sans); font-size: clamp(.82rem, 1vw, .98rem); font-weight: 600; text-transform: capitalize; letter-spacing: .02em; color: var(--ink); }   /* "Latest Arrivals" — no all-caps (Heng 10/07/2026); letterspacing eased from the .16em caps tracking */
.mm-featured__more { text-align: center; margin-top: clamp(30px, 3.5vw, 46px); }
.mm-featured__link { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; letter-spacing: .04em; color: var(--ink); text-decoration: none; padding-bottom: 7px; border-bottom: 1px solid rgba(20,22,24,.25); transition: gap .25s ease, border-color .25s ease; }
.mm-featured__link svg { width: 17px; height: 17px; }
.mm-featured__link:hover { gap: 14px; border-color: var(--ink); }

/* Latest-arrivals carousel — crental-style center-focus slider (grid stays for the inventory page) */
.mm-carousel { position: relative; overflow: hidden; padding: 16px 0; flex: 1 1 0; min-height: 0; }
/* 🚨 The track is ABSOLUTELY POSITIONED, not `height: 100%` (07/08/2026 — blank carousel on
   iPad). `.mm-carousel` is a flex item (`flex: 1 1 0`), so its height is resolved by flex
   layout and is INDEFINITE as far as a percentage child is concerned. Chrome resolves
   `height: 100%` against it anyway; WebKit is entitled to treat it as `auto` — and then the
   whole chain collapses, because `.mm-slide__media` is `flex: 1 1 0` inside a column slide
   that is stretching to a track that is now content-height, i.e. zero. The section keeps its
   `min-height: 100vh` so the space is still reserved: a blank band, exactly as reported.
   Insets resolve against the positioned ancestor's PADDING BOX, which is definite in both
   engines once flex layout has run, so this is engine-independent. top/bottom mirror
   `.mm-carousel`'s own 16px padding so the geometry is unchanged.
   The ≤900px block below overrides this back to static flow, where the slide media has an
   explicit height / aspect-ratio and needs none of it — which is why phones never broke. */
.mm-carousel__track { --slide-w: 60%; display: flex; gap: 24px; will-change: transform;
  position: absolute; top: 16px; bottom: 16px; left: 0; right: 0; }
.mm-slide { flex: 0 0 var(--slide-w); display: flex; flex-direction: column; text-decoration: none; opacity: .4; transition: opacity .5s ease; }
.mm-slide.is-active { opacity: 1; }
.mm-slide__media { position: relative; flex: 1 1 0; min-height: 0; border-radius: 6px; overflow: hidden; background: var(--bg-soft); box-shadow: 0 22px 48px -32px rgba(20,22,24,.36); }
.mm-slide__media img { width: 100%; height: 100%; object-fit: cover; }
.mm-slide__pill { position: absolute; top: clamp(14px, 1.6vw, 22px); left: clamp(14px, 1.6vw, 22px); z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px; border-radius: 999px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); border: 1px solid rgba(255,255,255,.5); box-shadow: 0 6px 20px -10px rgba(20,22,24,.32); font-family: var(--sans); font-size: 11.5px; font-weight: 500; letter-spacing: .015em; color: var(--ink); white-space: nowrap; }
.mm-slide__pill svg { width: 14px; height: 14px; opacity: .62; }
.mm-slide__pill i { width: 3px; height: 3px; border-radius: 50%; background: rgba(20,22,24,.3); }
.mm-slide__pill-ago { color: var(--muted); }
.mm-slide__bar { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; gap: 18px; padding: 24px 30px; color: #fff; background: linear-gradient(to top, rgba(18,20,22,.76), rgba(18,20,22,.28) 56%, rgba(18,20,22,0)); }
.mm-slide__cta { flex: 0 0 auto; padding: 11px 26px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 500; letter-spacing: .02em; transition: background .25s ease, color .25s ease; }
.mm-slide:hover .mm-slide__cta { background: var(--ink); color: #fff; }
.mm-slide__title { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 500; letter-spacing: .01em; }
.mm-slide__price { margin-left: auto; font-size: clamp(1.05rem, 1.5vw, 1.4rem); font-weight: 600; white-space: nowrap; }
.mm-slide__egc { margin-left: 6px; font-size: .58em; font-weight: 400; letter-spacing: .08em; opacity: .72; vertical-align: 0.5em; }
.mm-slide:not(.is-active) .mm-slide__cta, .mm-slide:not(.is-active) .mm-slide__title { opacity: 0; transition: opacity .3s ease; }
.mm-carousel__dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.mm-carousel__dot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: rgba(20,22,24,.18); cursor: pointer; transition: background .25s ease, transform .25s ease; }
.mm-carousel__dot.is-active { background: var(--ink); transform: scale(1.4); }
/* Marquee mode (Latest arrivals): continuous glide — every card fully lit, its title + CTA always shown. */
.mm-carousel--marquee .mm-slide { opacity: 1; }
.mm-carousel--marquee .mm-slide:not(.is-active) .mm-slide__cta,
.mm-carousel--marquee .mm-slide:not(.is-active) .mm-slide__title { opacity: 1; }
@media (max-width: 900px) {
  .mm-featured { min-height: 0; display: block; }   /* mobile: normal scrolly section, not forced full-viewport */
  .mm-carousel { flex: none; }
  .mm-carousel__track { --slide-w: 76%; height: auto; position: static; }
  .mm-slide { display: block; }
  .mm-slide__media { flex: none; height: clamp(340px, 50vh, 560px); }
}

/* ---- PORTRAIT TABLETS (561px and up — iPad Air 820, iPad Pro 1024): give the card a LANDSCAPE
   media box (Heng 07/08/2026 — "portrait photos are chopped").
   Two different faults produced the same chopped car, which is why this spans both ranges:
     * >=901 fell through to the desktop rule and filled the viewport — a 610x1110 slot on an
       iPad Pro, aspect 0.55, i.e. a PORTRAIT hole for a 3:2 photo: 37% of the car's width shown.
     * 561-900 took the phone rule's fixed `height: clamp(340px, 50vh, 560px)` — 618x560 on an
       iPad Air, aspect 1.10: 74% shown.
   The <=560px block had already fixed exactly this for phones ("the old 50vh media box was
   PORTRAIT, so cover chopped the (landscape) car photos"); tablets simply never inherited it.
   🚨 Must sit AFTER the <=900 block: it overlaps it for 561-900 at equal specificity, so source
   order is what decides. Landscape is deliberately untouched — the full-viewport carousel there
   is the intended look.
   🚨 `.mm-carousel { flex: none }` is required alongside `min-height: 0`: leaving `flex: 1 1 0`
   with no forced height gives it a zero basis and no free space, so it collapses rather than
   shrinking to its content. ---- */
@media (orientation: portrait) and (min-width: 561px) {
  .mm-featured { min-height: 0; display: block; }
  .mm-carousel { flex: none; }
  .mm-carousel__track { position: static; height: auto; }
  /* min-width:0 — a flex item defaults to `min-width: auto`, i.e. it refuses to go below its
     MIN-CONTENT width. Once the media has an auto height + aspect-ratio, that min-content width
     is the photo's own intrinsic width, which overrode the 76% basis and blew the card out to
     840px inside an 813px viewport (measured) — wider than the screen, with no sliver of the
     next car. */
  .mm-slide { display: block; min-width: 0; }
  .mm-slide__media { flex: none; height: auto; aspect-ratio: 3 / 2; }
}
@media (max-width: 560px) {
  .mm-carousel { touch-action: pan-y; }
  .mm-carousel__track { --slide-w: 82%; gap: 14px; }   /* narrower card + tighter gap = a visible sliver of the prev/next car on BOTH sides of the centred card */
  /* Mobile portrait: the old 50vh media box was PORTRAIT, so object-fit:cover chopped the
     (landscape) car photos — use a landscape 3:2 media box so the whole car fits. The caption
     stays IN the card as a compact centred overlay stack (title / price / Discover CTA),
     text sized down to suit the smaller tile. */
  .mm-slide__media { height: auto; aspect-ratio: 3 / 2; }
  /* Caption clones the explore-page inventory card: title over price bottom-LEFT
     (sans 13px/400, soft shadow, gentle scrim), Discover underlined bottom-RIGHT. */
  .mm-slide__bar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "title cta" "price cta"; row-gap: 2px; column-gap: 12px; align-items: end; padding: 46px 16px 14px; text-align: left; background: linear-gradient(to top, rgba(20,22,24,.52) 0%, rgba(20,22,24,.14) 58%, rgba(20,22,24,0) 100%); text-shadow: 0 1px 3px rgba(0,0,0,.45); }
  .mm-slide__title { grid-area: title; font-family: var(--sans); font-size: 12px; font-weight: 400; line-height: 1.34; letter-spacing: .01em; }
  .mm-slide__price { grid-area: price; margin-left: 0; font-size: 12px; font-weight: 400; color: rgba(255,255,255,.86); letter-spacing: .01em; }
  .mm-slide__cta, .mm-slide:hover .mm-slide__cta { grid-area: cta; align-self: end; justify-self: end; padding: 0; background: none; border-radius: 0; color: #fff; font-size: 11.5px; letter-spacing: .04em; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  /* Views pill: bare white text tight in the top-left corner, readable via a top scrim
     (Apple-style) instead of the frosted chip. */
  .mm-slide__pill { top: 10px; left: 10px; padding: 0; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; font-weight: 600; }
  .mm-slide__pill svg { opacity: .92; }
  .mm-slide__pill i { background: rgba(255,255,255,.5); }
  .mm-slide__pill-ago { color: rgba(255,255,255,.85); }
  .mm-slide__fav { top: 4px; right: 10px; width: 26px; height: 26px; }
  .mm-slide__fav svg { width: 17px; height: 17px; }
  .mm-slide__media::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 64px; background: linear-gradient(to bottom, rgba(18,20,22,.52), rgba(18,20,22,0)); z-index: 1; pointer-events: none; }
  /* Apple-TV-style timed dotnav under the gallery (built by the stepped-mode JS). */
  .mm-prognav { display: flex; justify-content: center; align-items: center; gap: 11px; padding: 26px 0 4px; }
  .mm-prognav__dot { position: relative; flex: none; width: 7px; height: 7px; padding: 0; border: 0; -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: 999px; background: rgba(20,22,24,.18); overflow: hidden; transition: width .35s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1); }
  /* Apple dotnav-trunc: dots shrink progressively the farther they sit from the active one. */
  .mm-prognav__dot[data-d="2"] { transform: scale(.82); }
  .mm-prognav__dot[data-d="3"] { transform: scale(.64); }
  .mm-prognav__dot[data-d="4"] { transform: scale(.48); }
  .mm-prognav__dot i { position: absolute; inset: 0; display: block; border-radius: 999px; background: var(--ink); transform: scaleX(0); transform-origin: left; }
  .mm-prognav__dot.is-active { width: 26px; }
}

/* Browse by Make / Browse by Body — full-viewport, Dior-minimal: small labels, full-width spread, large imagery */
.mm-browse { background: #eef2f7; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: clamp(104px, 14vh, 184px) 0 clamp(76px, 9vh, 112px); position: relative; }
.mm-browse::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: clamp(70px, 9vh, 120px); z-index: 1; pointer-events: none; background: radial-gradient(150% 130% at 50% 0%, rgba(15,17,20,.72) 0%, rgba(15,17,20,0) 64%); }   /* curved melt: the Sell block's dark bottom above into Browse. Start colour MUST match .mm-cta__block::after's bottom stop — was #fff back when white Latest-arrivals sat directly above; the Sell block moved in between (20/07/2026). Fades to alpha-0 of the SAME ink (not to #eef2f7) so the midpoint doesn't go muddy, same as .mm-cta__block--left::before. */
.mm-browse > .container { position: relative; z-index: 1; }
.mm-browse .container { width: 100%; max-width: min(1920px, 100%); padding: 0; }   /* full-bleed; space-evenly gives equal whitespace margins (the scrollbar sits in its own lane on the right) */
.mm-browse__cols { display: flex; justify-content: space-evenly; align-items: flex-start; }   /* equal space: left edge | Make | centre | Body | right edge */
.mm-browse__col { flex: 0 0 auto; }
.mm-browse__h { font-family: var(--sans); font-size: clamp(.82rem, 1vw, .98rem); font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--ink); margin: 0 0 clamp(34px, 5vh, 64px); }
.mm-browse__grid { display: grid; row-gap: clamp(34px, 6vh, 72px); }
/* Make grid uses FLEX (not grid) so an incomplete last row CENTRES — same visual outcome as the
   explore page's partial-last-row end-cap. Items are locked to a quarter-width (minus the gaps), so
   a full row of 4 fills the width exactly as the grid did; justify-content:center only bites on a
   short final row. Column count → item basis is set per breakpoint below (4 default, 3 ≤560px). */
.mm-browse__grid--make { display: flex; flex-wrap: wrap; justify-content: center; width: clamp(460px, 31vw, 620px); column-gap: clamp(20px, 2.2vw, 46px); }
.mm-browse__grid--make .mm-browse__item { flex: 0 0 calc((100% - 3 * clamp(20px, 2.2vw, 46px) - 1px) / 4); }
.mm-browse__grid--body { grid-template-columns: repeat(3, 1fr); width: clamp(480px, 33vw, 660px); column-gap: clamp(12px, 1.2vw, 20px); }   /* widened to host the lifestyle photo tiles below */
.mm-browse__col:first-child .mm-browse__h { padding-left: calc(((clamp(460px, 31vw, 620px) - 3 * clamp(20px, 2.2vw, 46px)) / 4 - 58px) / 2); }   /* sit the heading above the first (centred) logo, not the empty cell edge */
.mm-browse__item { display: flex; flex-direction: column; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); }
.mm-browse__logo { display: flex; align-items: center; justify-content: center; height: 56px; }   /* same height as body slot so the rows line up */
.mm-browse__logo:not(.mm-browse__logo--body) img { max-height: 40px; max-width: 58px; width: auto; object-fit: contain; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.mm-browse__item:hover .mm-browse__logo img { transform: scale(1.08); }
.mm-browse__wordmark { font-family: var(--serif); font-size: 15px; letter-spacing: .03em; color: var(--ink); }
.mm-browse__logo--body { height: 56px; }
.mm-browse__logo--body .mm-bodycard__img, .mm-browse__logo--body .mm-bodycard__svg { height: 46px; max-height: 46px; width: auto; max-width: 104px; object-fit: contain; color: var(--ink); }
.mm-browse__name { font-size: 13px; text-align: center; line-height: 1.3; letter-spacing: .01em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: rgba(20,22,24,.24); transition: text-decoration-color .2s ease; }
.mm-browse__item:hover .mm-browse__name { text-decoration-color: var(--ink); }
.mm-browse__h--life { margin: clamp(40px, 5.5vh, 70px) 0 clamp(22px, 3vh, 36px); }
.mm-browse__lifegrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.2vw, 20px); width: clamp(480px, 33vw, 660px); }
.mm-browse__lifetile { display: block; text-decoration: none; }
.mm-browse__lifephoto { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #e3e7eb; }
.mm-browse__lifephoto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .65s cubic-bezier(.2,.7,.2,1); }
.mm-browse__lifetile:hover .mm-browse__lifephoto img { transform: scale(1.05); }
.mm-browse__lifephoto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(15,17,20,.55) 0%, rgba(15,17,20,0) 46%); }
.mm-browse__lifecap { position: absolute; left: 8px; right: 8px; bottom: clamp(10px, 1.2vw, 15px); z-index: 1; text-align: center; font-family: var(--serif); font-size: clamp(.72rem, .78vw, .82rem); letter-spacing: .04em; color: #fff; text-shadow: 0 1px 14px rgba(0,0,0,.4); }
@media (max-width: 560px) { .mm-browse__lifegrid { grid-template-columns: repeat(2, 1fr); } }
/* (footer re-enabled — see the .mm-footer block at the end of this file) */
@media (max-width: 900px) {
  .mm-browse { min-height: 0; display: block; padding: clamp(48px, 9vw, 80px) 0; }
  .mm-browse .container { padding-inline: clamp(20px, 5vw, 40px); }
  .mm-browse__cols { flex-direction: column; align-items: center; gap: clamp(40px, 6vw, 56px); }
  .mm-browse__grid--make, .mm-browse__grid--body { width: auto; }
  /* Lifestyle grid too — its desktop clamp() bottoms out at 480px, wider than a phone; left at
     that width it blew the whole column out and CHOPPED the Body/Lifestyle grids off both edges. */
  .mm-browse__lifegrid { width: auto; max-width: 100%; }
  .mm-browse__col { max-width: 100%; }
  .mm-browse__col:first-child .mm-browse__h { padding-left: 0; }   /* grid goes auto-width on mobile, drop the desktop nudge */
}
@media (max-width: 560px) { .mm-browse__grid { grid-template-columns: repeat(3, 1fr); } }
/* Make grid (flex) drops to 3-up here too — resize the quarter-width items to thirds so a partial last row still centres. */
@media (max-width: 560px) { .mm-browse__grid--make .mm-browse__item { flex-basis: calc((100% - 2 * clamp(20px, 2.2vw, 46px) - 1px) / 3); } }
/* Mobile portrait (Heng 10/07/2026): shrink the make logos + body images a notch — they were
   falling through to the full desktop sizes (the 901–1200 shrink block doesn't reach here). */
@media (max-width: 560px) {
  .mm-browse__logo, .mm-browse__logo--body { height: 44px; }
  .mm-browse__logo:not(.mm-browse__logo--body) img { max-height: 30px; max-width: 46px; }
  .mm-browse__logo--body .mm-bodycard__img,
  .mm-browse__logo--body .mm-bodycard__svg { height: 36px; max-height: 36px; max-width: 82px; }
}

/* Tablet landscape (901–1200px): the Browse Make / Body columns still sit side-by-side but at
   their desktop min widths (460 + 480px ≈ 940px), so at ~1024px they're cramped together
   (~28px between the two columns) with tight cells. Scale the grid widths and the logos /
   body images / lifestyle tiles down toward the low end so the columns separate and each cell
   gets more air. Grids ease back to their desktop size by ~1180px, so nothing over-spreads. */
@media (min-width: 901px) and (max-width: 1200px) {
  .mm-browse__grid--make { width: clamp(360px, 39vw, 460px); }
  .mm-browse__grid--body { width: clamp(380px, 41vw, 480px); }
  .mm-browse__lifegrid   { width: clamp(380px, 41vw, 480px); }
  /* re-centre the "Make" heading over the first (smaller) logo cell */
  .mm-browse__col:first-child .mm-browse__h { padding-left: calc(((clamp(360px, 39vw, 460px) - 3 * clamp(20px, 2.2vw, 46px)) / 4 - 50px) / 2); }
  /* shrink the make logos + body images so they don't crowd the tighter cells */
  .mm-browse__logo, .mm-browse__logo--body { height: 48px; }
  .mm-browse__logo:not(.mm-browse__logo--body) img { max-height: 32px; max-width: 50px; }
  .mm-browse__logo--body .mm-bodycard__img,
  .mm-browse__logo--body .mm-bodycard__svg { height: 38px; max-height: 38px; max-width: 88px; }
}

/* CTA to inventory + sell — two full-viewport editorial blocks (Dior-minimal) */
.mm-cta { display: block; }
.mm-cta__block { position: relative; display: flex; align-items: flex-end; min-height: 100vh; text-decoration: none; color: #fff; }   /* no overflow:hidden — every layer is inset:0 (nothing can overflow) and it would clip the state dropdown's drop-down panel */
.mm-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.mm-cta__slides { position: absolute; inset: 0; z-index: 0; }
.mm-cta__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.mm-cta__slide.is-active { opacity: 1; }
.mm-cta__slide img { width: 100%; height: 100%; object-fit: cover; }
/* The slide images cover-fill the full-viewport blocks, so in a PORTRAIT viewport the landscape
   shots crop to a narrow centre slice (car out of frame). On portrait phones/tablets BOTH blocks
   swap to their 9:16 sets (.mm-cta__slides--v): showroom = Gemini-recomposed gemv* (car centred
   with side margins), sell = Gemini-outpainted real key-handover photos sellp* (Heng 11/07/2026). */
.mm-cta__slides--v { display: none; }
@media (orientation: portrait) and (max-width: 1100px) {
  .mm-cta__block .mm-cta__slides--h { display: none; }
  .mm-cta__block .mm-cta__slides--v { display: block; }
}
.mm-cta__block::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(15,17,20,.72) 0%, rgba(15,17,20,.30) 46%, rgba(15,17,20,.04) 76%); }
.mm-cta__block::before { content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none; }   /* soft top blend so the section edge isn't a hard line */
.mm-cta__block--left::before { height: clamp(80px, 12vh, 150px); background: radial-gradient(150% 130% at 50% 0%, #141618 0%, rgba(20,22,24,0) 64%); }   /* curved melt: dark Featured-car showcase above */
.mm-cta__block--right::before { height: clamp(100px, 15vh, 190px); background: radial-gradient(150% 130% at 50% 0%, rgba(15,17,20,.72) 0%, rgba(15,17,20,0) 64%); }   /* curved melt into block 1's dark bottom */
/* Sell block hoisted out on its own, directly under Latest arrivals (white) instead of under the
   dark left block — so its top melt has to come from WHITE, mirroring how --left melts out of the
   dark Featured-car showcase above it.
   The z-index is defensive, not load-bearing: the state dropdown's drop-DOWN panel overhangs ~60px
   into .mm-browse (position:relative, later in the DOM), and .mm-cta__inner's z-index:8 already
   wins that on its own — this just states the section's intent so a future edit to that inner
   can't silently drop the panel behind the next section. */
.mm-cta--sell { position: relative; z-index: 3; }
.mm-cta--sell .mm-cta__block--right::before { background: radial-gradient(150% 130% at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 64%); }
.mm-cta__inner { position: relative; z-index: 2; display: flex; flex-direction: column; width: 100%; max-width: min(1920px, 100%); margin: 0 auto; padding: 0 clamp(40px, 8vw, 165px) clamp(64px, 11vh, 132px); align-items: flex-start; text-shadow: 0 2px 28px rgba(8, 9, 11, .38); }
.mm-cta__block--right .mm-cta__inner { align-items: flex-end; text-align: right; z-index: 8; }   /* keeps the state dropdown's drop-down panel above whatever section follows (was the reviews z4/z6 overlays; since the sell block moved under Latest arrivals it's .mm-browse) at the section boundary */
.mm-cta__eyebrow { font-family: var(--sans); font-size: clamp(.72rem, .9vw, .84rem); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: rgba(255, 255, 255, .85); margin-bottom: clamp(16px, 2.2vh, 24px); }
.mm-cta__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5vw, 4.6rem); line-height: 1.05; letter-spacing: -.005em; color: #fff; margin: 0 0 clamp(20px, 3vh, 30px); }
.mm-cta__suburbs { font-family: var(--sans); font-size: clamp(.82rem, 1vw, .95rem); letter-spacing: .04em; color: rgba(255, 255, 255, .82); margin: 0 0 clamp(26px, 3.6vh, 40px); }
.mm-cta__suburbs-pre { margin-right: 7px; }
.mm-cta__suburb { font-weight: 500; color: #fff; transition: opacity .4s ease; }
.mm-cta__suburb.is-fading { opacity: 0; }
.mm-cta__verb { transition: opacity .4s ease; }
.mm-cta__verb.is-fading { opacity: 0; }
.mm-cta__block:hover { opacity: 1; }   /* override global a:hover{opacity:.62} so the block doesn't wash white on hover */
.mm-cta__suburb-seo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mm-cta__link { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: clamp(.92rem, 1.05vw, 1.04rem); letter-spacing: .05em; color: #fff; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .6); }
/* Rego valuation hook (Sell block) */
.mm-cta__valform { display: flex; align-items: stretch; width: fit-content; max-width: 100%; border: 1px solid rgba(255,255,255,.55); border-radius: 7px; background: rgba(255,255,255,.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: border-color .25s ease; }   /* shrink-wraps: input sized to just fit its placeholder, state + button content-sized */
.mm-cta__valform > * { border-radius: 0; }
.mm-cta__valform > :first-child { border-radius: 6px 0 0 6px; }
.mm-cta__valform > :last-child { border-radius: 0 6px 6px 0; }
.mm-cta__valform:focus-within { border-color: #fff; }
.mm-cta__valinput { flex: 1 1 auto; min-width: 0; width: calc(7.5em + 34px); background: transparent; border: 0; outline: none; color: #fff; font-family: var(--sans); font-size: clamp(.92rem, 1.05vw, 1.02rem); letter-spacing: .14em; text-transform: uppercase; padding: 13px 16px; }   /* width = "Enter your rego" (~7.35em at .02em spacing) + l/r padding, in the input's own em so it tracks the font clamp */
.mm-cta__valinput::placeholder { color: rgba(255,255,255,.6); letter-spacing: .02em; text-transform: none; }
.mm-cta__valstate { width: auto; height: 100%; border: 0; outline: none; background: transparent; color: #fff; font-family: var(--sans); font-size: clamp(.84rem, .98vw, .94rem); font-weight: 600; letter-spacing: .05em; padding: 0 12px 0 6px; gap: 5px; transition: background .2s ease; }
.mm-cta__valstate:hover { background: rgba(255,255,255,.1); }
.mm-cta__valstate .mm-dd__chev { width: 13px; height: 13px; }
/* Dior dropdown (styled open panel, not the native select list — same pattern as the sell-page
   form; sell-your-car.php carries its own inline copy of these rules) */
.mm-dd { position: relative; }
.mm-dd__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; cursor: pointer; }
.mm-dd__val { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-dd__chev { width: 16px; height: 16px; flex: none; color: #fff; transition: transform .2s ease; }
.mm-dd.is-open .mm-dd__chev { transform: rotate(180deg); }
.mm-dd__panel { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: #fff; border-radius: 9px; box-shadow: 0 26px 60px -18px rgba(8,15,40,.6), 0 2px 10px rgba(0,0,0,.18); list-style: none; margin: 0; padding: 0; max-height: 264px; overflow-y: auto; opacity: 0; transform: translateY(-6px); visibility: hidden; transition: opacity .18s ease, transform .18s ease, visibility .18s; }
.mm-dd.is-open .mm-dd__panel { opacity: 1; transform: none; visibility: visible; }
/* Drop-UP variant. car-combos.js adds .mm-dd--up (and may cap the height inline) when the
   list would not fit below the field inside whatever clips it — chiefly the Book-a-Service
   popup's scroll box, where the long make/year lists used to be sliced off at the bottom
   edge. Higher specificity than the base rule above, so it wins wherever it loads. */
.mm-dd--up .mm-dd__panel { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
.mm-dd--up.is-open .mm-dd__panel { transform: none; }
.mm-dd__opt { padding: 13px 16px; font-size: 14px; color: var(--ink, #141618); cursor: pointer; border-bottom: 1px solid var(--line, #e7e4dd); transition: background .12s, color .12s; letter-spacing: .01em; }
.mm-dd__opt:last-child { border-bottom: 0; }
.mm-dd__opt:hover { background: #f6f4ef; }
.mm-dd__opt.is-sel { color: var(--brand-blue, #0266b1); font-weight: 600; }
/* make/model/year combo (assets/car-combos.js): "Other" option + in-place manual field.
   Theme-agnostic (inherit/currentColor) so it works on the light sell form AND the dark
   trade-in popup. Shared by templates/sell-your-car.php + single-listings.php. */
.mm-dd__opt--other { font-style: italic; color: #6b7280; }
.mm-combo__manualwrap { position: relative; }
.mm-combo__manualwrap[hidden] { display: none; }
.mm-dd__trigger[hidden] { display: none; }
.mm-combo__manual { display: block; width: 100%; padding-right: 34px; }
.mm-combo__back { position: absolute; top: 0; right: 0; height: 100%; width: 34px; display: flex; align-items: center; justify-content: flex-end; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.mm-combo__back .mm-dd__chev { width: 16px; height: 16px; }
/* homepage rego pill: panel styled like the header off-canvas time picker (white padded card,
   borderless rounded options, thin scrollbar). Direction-adaptive — drops DOWN by default; JS adds
   .drop-up when the panel wouldn't fit between the trigger and the clipping CTA block's bottom
   edge (or the viewport, whichever is nearer). */
.mm-cta__valdd { flex: 0 0 auto; display: flex; }
.mm-cta__valdd .mm-dd__panel { left: auto; right: 0; min-width: 130px; border: 1px solid var(--line, #e7e4dd); border-radius: 10px; box-shadow: 0 14px 36px rgba(20,22,24,.14); padding: 10px; max-height: 232px; transform: translateY(-6px); text-shadow: none; text-align: left; }   /* text-align beats the right-block inner's text-align:right */
.mm-cta__valdd.drop-up .mm-dd__panel { top: auto; bottom: calc(100% + 8px); transform: translateY(6px); }
.mm-cta__valdd .mm-dd__panel::-webkit-scrollbar { width: 6px; }
.mm-cta__valdd .mm-dd__panel::-webkit-scrollbar-thumb { background: rgba(0,0,0,.14); border-radius: 3px; }
.mm-cta__valdd .mm-dd__opt { border-bottom: 0; padding: 8px 12px; font-size: 13px; border-radius: 7px; }
.mm-cta__valdd .mm-dd__opt:hover { background: rgba(2,102,177,.10); }
.mm-cta__valdd .mm-dd__opt.is-sel { background: #0266b1; color: #fff; font-weight: 500; }
.mm-cta__valdd.is-open .mm-dd__panel { transform: none; }
.mm-cta__valbtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--ink); border: 0; cursor: pointer; font-family: var(--sans); font-size: clamp(.84rem, .98vw, .94rem); font-weight: 500; letter-spacing: .03em; white-space: nowrap; padding: 0 clamp(16px, 1.6vw, 22px); transition: background .25s ease; }
.mm-cta__valbtn:hover { background: rgba(255,255,255,.85); }
/* arrow slides via transform (not gap) so the shrink-wrapped pill doesn't resize on hover */
.mm-cta__valbtn span { transition: transform .25s ease; }
.mm-cta__valbtn:hover span { transform: translateX(4px); }
.mm-cta__valnote { display: block; font-family: var(--sans); font-size: clamp(.72rem, .82vw, .8rem); color: rgba(255,255,255,.66); margin-top: clamp(12px, 1.6vh, 16px); letter-spacing: .02em; }
.mm-cta__discrow { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); margin-top: clamp(16px, 2.2vh, 22px); }
.mm-cta__block--right .mm-cta__discrow { justify-content: flex-end; }
.mm-cta__discover { display: inline-flex; align-items: center; font-family: var(--sans); font-size: clamp(.74rem, .86vw, .84rem); letter-spacing: .06em; color: #fff; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.6); transition: border-color .3s ease, opacity .3s ease; }
.mm-cta__discover:hover { border-color: #fff; opacity: 1; }
@media (max-width: 760px) { .mm-cta__valform { width: 100%; } }
@media (max-width: 760px) {
  .mm-cta__block { min-height: 80vh; }
  .mm-cta__block--right .mm-cta__inner { align-items: flex-start; text-align: left; }
  .mm-cta__title { font-size: clamp(2rem, 9vw, 2.9rem); }
}

/* ---- Finance — Dior statement, full viewport ---- */
.mm-finance { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #eef2f7; padding: clamp(100px, 14vh, 180px) var(--gutter); box-sizing: border-box; }
.mm-finance::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(140px, 18vh, 240px); z-index: 0; background: linear-gradient(to bottom, #ffffff 0%, rgba(238,242,247,0) 100%); pointer-events: none; }   /* blur the Compare->Finance seam: compare's white melts full-width down into finance, no line */
.mm-finance::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(60px, 9vh, 120px); z-index: 0; background: radial-gradient(150% 130% at 50% 100%, #f8f8f8 0%, rgba(248,248,248,0) 64%); pointer-events: none; }   /* curved fade into the News section below */
.mm-finance__inner { position: relative; z-index: 1; width: 100%; max-width: 1180px; display: grid; grid-template-columns: 1.04fr 1fr; gap: clamp(40px, 5vw, 86px); align-items: center; text-align: left; }
.mm-finance__pitch { min-width: 0; }
.mm-finance__eyebrow { font-family: var(--sans); font-size: clamp(.72rem, .9vw, .84rem); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); margin-bottom: clamp(16px, 2.4vh, 26px); }
.mm-finance__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 3.6vw, 3.5rem); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); margin: 0 0 clamp(18px, 2.6vh, 26px); }
.mm-finance__lead { font-family: var(--sans); font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.6; color: var(--muted); max-width: 480px; margin: 0 0 clamp(24px, 3vh, 32px); }
.mm-finance__lead strong { color: var(--ink); font-weight: 600; }
.mm-finance__partner { margin: 0 0 clamp(16px, 2.2vh, 24px); line-height: 0; }
.mm-finance__partner-logo { height: clamp(38px, 4.4vw, 50px); width: auto; display: inline-block; }
.mm-finance__awards { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: clamp(12px, 1.4vw, 20px); margin: 0 0 clamp(28px, 3.6vh, 40px); }
.mm-finance__award { height: clamp(38px, 3.4vw, 48px); width: auto; display: block; }
.mm-finance__stats { display: flex; justify-content: center; align-items: stretch; margin: 0 auto clamp(42px, 5.6vh, 62px); flex-wrap: wrap; }
.mm-finance__stat { flex: 0 1 230px; padding: clamp(2px, .8vh, 8px) clamp(26px, 3.4vw, 52px); border-left: 1px solid rgba(51,56,60,.15); }
.mm-finance__stat:first-child { border-left: 0; }
.mm-finance__stat-big { font-family: var(--serif); font-size: clamp(1.45rem, 2vw, 1.95rem); color: var(--ink); line-height: 1.12; margin-bottom: 9px; letter-spacing: -.01em; }
.mm-finance__stat-sub { font-family: var(--sans); font-size: clamp(.82rem, .95vw, .9rem); color: var(--muted); line-height: 1.45; }
.mm-finance__cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: clamp(.92rem, 1.05vw, 1.04rem); letter-spacing: .05em; color: var(--ink); padding-bottom: 5px; border-bottom: 1px solid rgba(51,56,60,.42); transition: gap .3s ease, border-color .3s ease; }
.mm-finance__cta:hover { gap: 18px; border-color: var(--ink); opacity: 1; }
.mm-finance__cta svg { width: 19px; height: 11px; flex: 0 0 auto; }
.mm-finance__fine { font-family: var(--sans); font-size: clamp(.68rem, .8vw, .75rem); color: var(--muted); margin-top: clamp(20px, 2.6vh, 28px); letter-spacing: .01em; }
/* Finance calculator teaser (right column) */
.mm-finance__calc { background: #fff; border: 1px solid rgba(51,56,60,.1); border-radius: 16px; padding: clamp(24px, 2.2vw, 34px); box-shadow: 0 20px 54px rgba(20,30,48,.08); }
.mm-finance__calc-tabs { display: inline-flex; gap: 4px; background: #eef2f7; border-radius: 9px; padding: 4px; margin-bottom: clamp(22px, 2.8vh, 30px); }
.mm-finance__calc-tab { border: 0; background: transparent; font-family: var(--sans); font-size: clamp(.84rem, .95vw, .92rem); font-weight: 500; color: var(--muted); padding: 8px 18px; border-radius: 6px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.mm-finance__calc-tab.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 5px rgba(20,30,48,.1); }
.mm-finance__calc-result { display: flex; align-items: baseline; gap: 10px; margin-bottom: clamp(22px, 2.8vh, 30px); }
.mm-finance__calc-num { font-family: var(--serif); font-size: clamp(2.6rem, 4.4vw, 3.6rem); font-weight: 500; color: var(--ink); line-height: 1; letter-spacing: -.02em; }
.mm-finance__calc-unit { font-family: var(--sans); font-size: clamp(.9rem, 1vw, 1rem); color: var(--muted); }
.mm-finance__calc-field { margin-bottom: clamp(18px, 2.2vh, 24px); }
.mm-finance__calc-flabel { display: flex; justify-content: space-between; font-family: var(--sans); font-size: clamp(.84rem, .95vw, .9rem); color: var(--muted); margin-bottom: 11px; }
.mm-finance__calc-flabel span:last-child { color: var(--ink); font-weight: 600; }
.mm-finance__calc-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: rgba(51,56,60,.16); outline: none; }
.mm-finance__calc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); cursor: pointer; box-shadow: 0 1px 5px rgba(0,0,0,.25); }
.mm-finance__calc-range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; }
.mm-finance__calc-terms { display: flex; gap: 8px; margin-bottom: clamp(16px, 2vh, 20px); }
.mm-finance__calc-terms button { flex: 1; border: 1px solid rgba(51,56,60,.16); background: transparent; font-family: var(--sans); font-size: clamp(.82rem, .92vw, .88rem); color: var(--muted); padding: 9px 0; border-radius: 7px; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.mm-finance__calc-terms button.is-active { border-color: var(--ink); color: var(--ink); background: rgba(51,56,60,.04); }
.mm-finance__calc-note { font-family: var(--sans); font-size: clamp(.72rem, .82vw, .76rem); color: var(--muted); margin: 0 0 clamp(20px, 2.4vh, 26px); }
.mm-finance__calc-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: clamp(.9rem, 1vw, .98rem); letter-spacing: .03em; color: var(--ink); border-bottom: 1px solid rgba(51,56,60,.4); padding-bottom: 3px; transition: gap .25s ease, border-color .25s ease; }
.mm-finance__calc-link:hover { gap: 13px; border-color: var(--ink); opacity: 1; }
.mm-finance__disclaimer { position: relative; z-index: 1; width: 100%; max-width: 880px; margin: clamp(34px, 4.6vh, 56px) auto 0; font-family: var(--sans); font-size: clamp(.64rem, .74vw, .7rem); line-height: 1.55; color: var(--muted); text-align: center; opacity: .85; }
@media (max-width: 860px) {
  .mm-finance__inner { grid-template-columns: 1fr; gap: clamp(38px, 6vh, 56px); max-width: 540px; }
  .mm-finance__lead { max-width: none; }
}
@media (max-width: 620px) {
  .mm-finance__stat { border-left: 0; border-top: 1px solid rgba(51,56,60,.12); padding: 15px 0; flex-basis: 100%; }
  .mm-finance__stat:first-child { border-top: 0; }
  .mm-finance__title { font-size: clamp(2rem, 9vw, 2.9rem); }
}

/* ---- Service / BM Garage — full-viewport dark statement ---- */
.mm-service { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background-size: cover; background-position: center; padding: clamp(90px, 13vh, 160px) var(--gutter); box-sizing: border-box; overflow: hidden; }
.mm-service::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 15%), radial-gradient(ellipse 34% 22% at 50% 82%, rgba(11,13,16,.62) 0%, rgba(11,13,16,0) 68%), linear-gradient(rgba(11,13,16,.46) 0%, rgba(11,13,16,.5) 40%, rgba(11,13,16,.72) 74%, rgba(11,13,16,.9) 100%); }   /* bottom 15% of the photo dissolves to white so it melts into the white Compare section below (shorter fade) */
.mm-service::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(110px, 15vh, 190px); z-index: 1; background: linear-gradient(to bottom, #080a12 0%, rgba(8,10,18,0) 100%); pointer-events: none; }   /* fade the photo top to flat black so it meets Michi's faded bottom at a shared near-black — invisible seam */
.mm-service__inner { position: relative; z-index: 2; width: 100%; max-width: 760px; text-shadow: 0 2px 30px rgba(8,9,11,.45); }
.mm-service__logo { display: inline-block; height: clamp(40px, 4.8vw, 52px); width: auto; margin-bottom: clamp(22px, 3vh, 34px); filter: drop-shadow(0 2px 18px rgba(0,0,0,.45)); }
.mm-service__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1.04; letter-spacing: -.01em; color: #fff; margin: 0 0 clamp(22px, 3vh, 32px); }
.mm-service__lead { font-family: var(--sans); font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.65; color: rgba(255,255,255,.86); max-width: 600px; margin: 0 auto clamp(28px, 3.8vh, 40px); }
.mm-service__marques { margin: 0 auto clamp(34px, 4.6vh, 50px); }
.mm-service__marques-label { display: block; font-family: var(--sans); font-size: clamp(.62rem, .74vw, .7rem); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: rgba(255,255,255,.55); margin-bottom: clamp(13px, 1.9vh, 19px); }
.mm-service__marques-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(22px, 3vw, 46px); }
.mm-service__marque { height: clamp(23px, 2.5vw, 30px); width: auto; opacity: .8; transition: opacity .3s ease; }
.mm-service__marque:hover { opacity: 1; }
.mm-service__ctas { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(22px, 3.5vw, 48px); }
.mm-service__cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: clamp(.74rem, .86vw, .84rem); letter-spacing: .06em; color: #fff; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.6); transition: border-color .3s ease, opacity .3s ease; }
.mm-service__cta:hover { gap: 18px; border-color: #fff; opacity: 1; }
.mm-service__cta svg { width: 19px; height: 11px; flex: 0 0 auto; }
@media (max-width: 760px) { .mm-service__title { font-size: clamp(2rem, 9vw, 2.9rem); } }
@media (max-width: 560px) {
  /* Mobile portrait: cover cropped the 3:2 workshop photo to a ~31% sliver — show the FULL
     car instead: contain on a near-black bed (matches the top fade + overlays), band sat low
     under the copy so the bottom white melt still catches it. */
  .mm-service { background-size: contain; background-repeat: no-repeat; background-position: center 72%; background-color: #0b0d10; }
  /* The desktop overlay was tuned for a full-bleed photo; with the small contained band it
     buries the car — lighten it (keep the bottom white melt) so the car reads. */
  .mm-service::before { background: linear-gradient(to top, #ffffff 0%, rgba(255,255,255,0) 15%), linear-gradient(rgba(11,13,16,.28) 0%, rgba(11,13,16,.22) 55%, rgba(11,13,16,.5) 100%); }
}

/* ============================== News & insights — full-width editorial card row ============================== */
.mm-news { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(180deg, #f8f8f8 0%, #f3f2f0 15%, #f3f2f0 72%, #ffffff 100%); padding: clamp(40px, 6vh, 88px) 0; box-sizing: border-box; }   /* fade the bottom to pure white over the last ~28% so it melts into the white Instagram section below — no seam */
.mm-news__head { text-align: center; max-width: 760px; margin: 0 auto clamp(34px, 5vh, 60px); padding: 0 var(--gutter); }
.mm-news__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.08; letter-spacing: .005em; color: var(--ink); margin: 0 0 clamp(9px, 1.3vh, 13px); }
.mm-news__sub { font-family: var(--sans); font-size: clamp(.82rem, .92vw, .9rem); line-height: 1.5; color: var(--muted); margin: 0; }
.mm-news__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1vw, 16px); }
.mm-news__card { display: flex; flex-direction: column; background: #fff; text-decoration: none; color: var(--ink); padding-bottom: clamp(30px, 3.4vh, 44px); }
.mm-news__card:hover { opacity: 1; }
.mm-news__media { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); }   /* matches the native 1920x1080 feature images - cover fills with zero cropping (Heng 11/07) */
.mm-news__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.mm-news__card:hover .mm-news__media img { transform: scale(1.045); }
.mm-news__body { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(22px, 2.6vh, 34px) clamp(20px, 2vw, 40px) 0; }
.mm-news__h { font-family: var(--serif); font-weight: 400; font-size: clamp(1rem, 1.15vw, 1.18rem); line-height: 1.2; letter-spacing: -.005em; color: var(--ink); margin: 0 0 clamp(8px, 1.1vh, 11px); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.mm-news__excerpt { font-family: var(--sans); font-size: clamp(.78rem, .88vw, .85rem); line-height: 1.55; color: var(--muted); margin: 0 0 clamp(12px, 1.6vh, 16px); max-width: 30ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 3.1em; }
.mm-news__meta { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 8px; font-family: var(--sans); font-size: clamp(.68rem, .8vw, .76rem); letter-spacing: .02em; color: var(--muted); margin-bottom: clamp(16px, 2vh, 22px); }
.mm-news__meta i { width: 3px; height: 3px; border-radius: 50%; background: #cfccc5; flex: 0 0 auto; }
.mm-news__more { font-family: var(--sans); font-size: clamp(.82rem, .95vw, .9rem); font-weight: 500; letter-spacing: .03em; color: var(--ink); padding-bottom: 3px; border-bottom: 1px solid var(--ink); transition: opacity .2s ease; }
.mm-news__card:hover .mm-news__more { opacity: .6; }
.mm-news__cta { align-self: center; display: inline-flex; align-items: center; gap: 10px; margin-top: clamp(28px, 4vh, 48px); font-family: var(--sans); font-size: clamp(.86rem, 1vw, .96rem); font-weight: 500; letter-spacing: .04em; color: var(--ink); text-decoration: none; padding-bottom: 5px; border-bottom: 1px solid var(--ink); transition: gap .3s ease, opacity .2s ease; }
.mm-news__cta:hover { gap: 15px; opacity: 1; }
.mm-news__cta svg { width: 19px; height: 11px; }
@media (max-width: 1080px) { .mm-news__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .mm-news__grid { grid-template-columns: 1fr; } .mm-news__excerpt { max-width: 40ch; }
  /* blog feature images are natively 16:9 (1920x1080) - matching the box means cover fills with zero cropping (Heng 11/07) */
  .mm-news__media { aspect-ratio: 16 / 9; } }

/* ---- MM Carz AI — tech differentiator (dark / agentic) ---- */
.mm-ai { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; padding: clamp(104px, 13vh, 176px) var(--gutter) clamp(80px, 9vh, 132px); box-sizing: border-box; }
.mm-ai--dark { background: #080a12; color: #fff; }
.mm-ai::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(110px, 15vh, 190px); z-index: 1; pointer-events: none; background: linear-gradient(to top, #080a12 0%, rgba(8,10,18,0) 100%); }   /* fade the blue/red aura to flat black at the bottom so it meets the dark Service photo at a shared near-black — invisible seam */
.mm-ai__inner { position: relative; z-index: 2; width: 100%; max-width: 1120px; }
.mm-ai__logo { display: block; height: clamp(38px, 4.8vw, 56px); width: auto; margin: 0 auto clamp(18px, 2.6vh, 28px); filter: drop-shadow(0 2px 20px rgba(2,120,208,.32)); }

/* agentic background — drifting aurora + scanning grid */
.mm-ai__aura { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* blur 100px + an animated scale() re-rasterised the whole aurora every frame — the single biggest
   GPU cost across the site (the compositor process was pegged; Heng 11/07/2026). blur(64px) still
   reads as a soft glow; the drift is now a PURE translate (no scale) so it composites on the GPU
   without re-blurring; will-change promotes each blob to its own layer. */
.mm-ai__aura::before, .mm-ai__aura::after { content: ""; position: absolute; width: 62vw; height: 62vw; border-radius: 50%; filter: blur(64px); will-change: transform; }
.mm-ai__aura::before { background: #0a78d0; opacity: .42; top: -18%; left: -4%; animation: mm-ai-drift1 16s ease-in-out infinite alternate; }
.mm-ai__aura::after { background: #e80012; opacity: .26; bottom: -22%; right: -6%; animation: mm-ai-drift2 21s ease-in-out infinite alternate; }
@keyframes mm-ai-drift1 { to { transform: translate(16%, 16%); } }
@keyframes mm-ai-drift2 { to { transform: translate(-18%, -12%); } }
.mm-ai__gridbg { position: absolute; inset: -40% 0; z-index: 1; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 25%, transparent 75%); animation: mm-ai-scan 22s linear infinite; }
@keyframes mm-ai-scan { to { transform: translateY(46px); } }

.mm-ai__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.3rem, 4.6vw, 4rem); line-height: 1.03; letter-spacing: -.01em; color: #fff; margin: 0 0 clamp(14px, 2vh, 22px); }
.mm-ai__lead { font-family: var(--sans); font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.62; color: rgba(255,255,255,.72); max-width: 640px; margin: 0 auto clamp(20px, 2.6vh, 28px); }
.mm-ai__lead strong { color: #fff; font-weight: 600; }

/* live status pill */
.mm-ai__live { display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: clamp(.72rem, .85vw, .82rem); font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.82); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 8px 16px 8px 13px; margin-bottom: clamp(28px, 4vh, 48px); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mm-ai__live-dot { width: 8px; height: 8px; border-radius: 50%; background: #36d07a; box-shadow: 0 0 0 0 rgba(54,208,122,.6); animation: mm-ai-live 2.2s ease-out infinite; }
@keyframes mm-ai-live { 0% { box-shadow: 0 0 0 0 rgba(54,208,122,.55); } 70%,100% { box-shadow: 0 0 0 9px rgba(54,208,122,0); } }

/* 2-col layout: feature rundown | voice + phone */
.mm-ai__grid { display: grid; grid-template-columns: 1.32fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.mm-ai__rundown { display: flex; flex-direction: column; gap: clamp(16px, 2.4vh, 24px); }

/* chat demo (dark glass) */
.mm-ai__chat { width: 100%; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.1); border-radius: 18px; box-shadow: 0 30px 70px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); padding: 16px 16px 18px; text-align: left; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.mm-ai__chat-head { display: flex; align-items: center; gap: 10px; padding-bottom: 13px; border-bottom: 1px solid rgba(255,255,255,.09); margin-bottom: 14px; }
.mm-ai__chat-logo img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
/* Stacked-logo avatar (BM Garage) — mirrors how the real chat WIDGET renders the same file:
   object-fit:contain + a rounded SQUARE + inner padding. The base rule above is cover+50%,
   which is right for MM's square mark but crops a BM/stripes/GARAGE stack — the bottom of
   GARAGE gets sliced off. widget.js: .mm-logo-img { object-fit:contain; border-radius:12px;
   padding:4px } — matched here so the mock chat and the live widget look the same. */
.mm-ai__chat-logo--fit img { border-radius: 12px; object-fit: contain; padding: 4px; box-sizing: border-box; background: rgba(255,255,255,.92); }
.mm-ai__chat-id { display: flex; flex-direction: column; line-height: 1.3; }
.mm-ai__chat-id strong { font-family: var(--sans); font-size: .94rem; color: #fff; }
.mm-ai__chat-id span { font-family: var(--sans); font-size: .73rem; color: rgba(255,255,255,.5); }
.mm-ai__chat-body { display: flex; flex-direction: column; gap: 8px; min-height: 140px; justify-content: flex-start; }
.mm-ai__bubble { font-family: var(--sans); font-size: .9rem; line-height: 1.45; padding: 10px 14px; border-radius: 15px; max-width: 86%; opacity: 0; transform: translateY(7px); transition: opacity .34s ease, transform .34s ease; }
.mm-ai__bubble.is-in { opacity: 1; transform: none; }
.mm-ai__bubble--user { align-self: flex-end; background: rgba(255,255,255,.1); color: #fff; border-bottom-right-radius: 5px; }
.mm-ai__bubble--bot { align-self: flex-start; background: #0266b1; color: #fff; border-bottom-left-radius: 5px; box-shadow: 0 6px 20px -6px rgba(2,102,177,.7); }
.mm-ai__typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px 15px; }
.mm-ai__typing i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.9); animation: mm-ai-typing 1.3s infinite; }
.mm-ai__typing i:nth-child(2) { animation-delay: .18s; }
.mm-ai__typing i:nth-child(3) { animation-delay: .36s; }
@keyframes mm-ai-typing { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

/* feature rundown — passive auto-looping indicator (no clicking) */
.mm-ai__feats { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 24px); }
.mm-ai__feat-break { display: none; }   /* phone-portrait only: forces the feats onto 2 centred rows (3 + Finance/Always on) */
.mm-ai__feat { position: relative; font-family: var(--sans); font-size: clamp(.76rem, .88vw, .84rem); font-weight: 500; letter-spacing: .01em; color: rgba(255,255,255,.42); padding-bottom: 9px; transition: color .35s ease; }
.mm-ai__feat::before { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); }
.mm-ai__feat.is-active { color: #fff; }
.mm-ai__feat-bar { position: absolute; left: 0; bottom: 0; width: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #0a78d0, #60b6f5); box-shadow: 0 0 10px rgba(2,120,208,.75); }

/* channels (voice + phone) */
.mm-ai__channels { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 4vh, 44px); }
.mm-ai__tool { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 1.8vh, 18px); }
.mm-ai__cap { font-family: var(--sans); font-size: clamp(.72rem, .82vw, .8rem); font-weight: 600; text-transform: uppercase; letter-spacing: .18em; color: rgba(255,255,255,.55); }
.mm-ai__tool--orb .mm-ai__orb { width: clamp(150px, 17vw, 196px); aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 70px 10px rgba(2,120,208,.5); animation: mm-ai-pulse 3.4s ease-in-out infinite; }
@keyframes mm-ai-pulse { 0%,100% { box-shadow: 0 0 60px 6px rgba(2,120,208,.42); } 50% { box-shadow: 0 0 100px 20px rgba(2,120,208,.65); } }
.mm-ai__orb-canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }
.mm-ai__phone { width: clamp(108px, 12vw, 138px); aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 18px 50px -20px rgba(0,0,0,.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; color: #51a8ec; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mm-ai__phone-glyph { width: 32px; height: 32px; }
.mm-ai__wave { display: flex; align-items: center; gap: 4px; height: 17px; }
.mm-ai__wave i { width: 3px; border-radius: 3px; background: #ff5a5f; height: 100%; transform-origin: center; animation: mm-ai-wave 1s infinite ease-in-out; }
.mm-ai__wave i:nth-child(2) { animation-delay: .15s; }
.mm-ai__wave i:nth-child(3) { animation-delay: .3s; }
.mm-ai__wave i:nth-child(4) { animation-delay: .45s; }
.mm-ai__wave i:nth-child(5) { animation-delay: .6s; }
@keyframes mm-ai-wave { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.mm-ai__phone-num { display: inline-block; margin-top: 1px; font-family: var(--sans); font-size: clamp(.82rem, .95vw, .94rem); font-weight: 600; letter-spacing: .02em; color: #fff; text-decoration: none; transition: color .2s ease; }
.mm-ai__phone-num:hover { opacity: 1; color: #51a8ec; }

/* "Hear Michi answer" — one greeting sample per phone-squad language (English / Cantonese /
   Mandarin), in the agents' own voices. Sits under the number because it is the proof of what
   that one number does: no menu, no keypad, Michi just answers in the caller's language. */
.mm-ai__langs { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 4px; max-width: 250px; text-align: center; }
.mm-ai__play { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: clamp(.76rem, .88vw, .84rem); font-weight: 600; letter-spacing: .01em; color: #fff; background: linear-gradient(180deg, #0a78d0, #0266b1); border: 0; border-radius: 999px; padding: 8px 17px; cursor: pointer; box-shadow: 0 8px 24px -10px rgba(2,120,208,.75); transition: transform .2s ease, box-shadow .2s ease; }
.mm-ai__play:hover { transform: translateY(-1px); box-shadow: 0 13px 30px -10px rgba(2,120,208,.9); }
/* Glyph is CSS-only so nothing swaps icons in JS (and the i18n text pass never sees it). */
.mm-ai__play-glyph { font-size: .74em; line-height: 1; }
.mm-ai__play-glyph::before { content: "\25B6"; }
.mm-ai__langs.is-playing .mm-ai__play-glyph::before { content: "\275A\275A"; letter-spacing: 1px; }
/* ONE row with two faces, swapped on .is-playing.
   IDLE — the language shuffle. Three fixed pills implied Michi speaks exactly three languages; it
   speaks every language the chat brain does, so one word crossfades through the full list (same
   pattern as .mm-cta__suburb on the MM Carz home) and the sr-only span carries all of them for
   crawlers and screen readers. The three samples are only the phone squad's tuned voices, so they
   live in the hidden [data-ai-voices] block and drive audio.
   PLAYING — those three come back as chips so you can see which voice is talking and jump between
   them; the shuffle is paused for the whole pass, so nothing on screen contradicts the audio.
   Both faces sit in ONE grid cell: the row is then always as tall as the taller of the two and the
   phone card cannot jump on play. The idle face is hidden with visibility, NOT display — display
   would collapse it out of the cell and give the height back — and visibility also takes the chips
   off the pointer and out of the tab order while they are not shown. */
.mm-ai__voicesrc { display: none; }
.mm-ai__langswap { display: grid; }
.mm-ai__langswap > * { grid-area: 1 / 1; align-self: center; }
.mm-ai__langpills { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; visibility: hidden; }
.mm-ai__langs.is-playing .mm-ai__langpills { visibility: visible; }
.mm-ai__langs.is-playing .mm-ai__langcycle-row { visibility: hidden; }
.mm-ai__langpill { font-family: var(--sans); font-size: clamp(.68rem, .8vw, .76rem); font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.62); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16); border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.mm-ai__langpill:hover { color: #fff; border-color: rgba(255,255,255,.34); }
.mm-ai__langpill.is-active { color: #fff; background: #0266b1; border-color: #0a78d0; box-shadow: 0 6px 18px -8px rgba(2,120,208,.9); }
.mm-ai__langcycle-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px; margin: 0; font-family: var(--sans); font-size: clamp(.68rem, .8vw, .76rem); letter-spacing: .02em; color: rgba(255,255,255,.62); }
.mm-ai__langcycle-pre, .mm-ai__langcycle-dash { color: rgba(255,255,255,.5); }
/* min-width keeps the lead-in from twitching sideways as the word's width changes — the row is
   centred, so without it every swap nudges "Speaks" left and right. */
.mm-ai__langcycle { display: inline-block; min-width: 5.2em; text-align: left; }
.mm-ai__langcycle-word { font-weight: 600; color: #fff; }
.mm-ai__langcycle-seo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: no-preference) {
  .mm-ai__langcycle-word { transition: opacity .4s ease; }
  .mm-ai__langcycle-word.is-fading { opacity: 0; }
}
/* min-height reserves the caption's two lines up front — the CJK greetings wrap, and without it
   the whole phone card jumps the first time someone presses play. */
.mm-ai__langline { min-height: 2.6em; margin: 0; font-family: var(--sans); font-size: clamp(.72rem, .84vw, .8rem); font-style: italic; line-height: 1.4; color: rgba(255,255,255,.72); }
.mm-ai__langnote { margin: 0; font-family: var(--sans); font-size: clamp(.64rem, .74vw, .7rem); line-height: 1.45; color: rgba(255,255,255,.42); }
/* Playing state reuses the phone card's OWN bars — never a second waveform. */
@media (prefers-reduced-motion: no-preference) {
  .mm-ai__tool:has(.mm-ai__langs.is-playing) .mm-ai__wave i { animation-duration: .55s; background: #51a8ec; }
}

/* webchat CTA + tappable voice orb (open the live Michi widget) */
.mm-ai__cta { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 2px; font-family: var(--sans); font-size: clamp(.86rem, 1vw, .96rem); font-weight: 600; letter-spacing: .01em; color: #fff; background: linear-gradient(180deg, #0a78d0, #0266b1); border: 0; border-radius: 999px; padding: 11px 22px; cursor: pointer; box-shadow: 0 10px 30px -10px rgba(2,120,208,.75); transition: transform .2s ease, box-shadow .2s ease; }
.mm-ai__cta:hover { transform: translateY(-1px); box-shadow: 0 16px 38px -10px rgba(2,120,208,.9); }
.mm-ai__cta svg { width: 18px; height: 11px; }
.mm-ai__cta-pulse { width: 8px; height: 8px; border-radius: 50%; background: #36d07a; box-shadow: 0 0 0 0 rgba(54,208,122,.6); animation: mm-ai-live 2.2s ease-out infinite; }
.mm-ai__tool--orb { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.mm-ai__tool--orb .mm-ai__orb { transition: transform .25s ease; }
.mm-ai__tool--orb:hover .mm-ai__orb, .mm-ai__tool--orb:focus-visible .mm-ai__orb { transform: scale(1.045); }
.mm-ai__tool--orb:hover .mm-ai__cap, .mm-ai__tool--orb:focus-visible .mm-ai__cap { color: #fff; }

@media (prefers-reduced-motion: reduce) { .mm-ai__typing i, .mm-ai__wave i, .mm-ai__aura::before, .mm-ai__aura::after, .mm-ai__gridbg, .mm-ai__live-dot, .mm-ai__tool--orb .mm-ai__orb { animation: none; } }
@media (max-width: 860px) {
  .mm-ai__grid { grid-template-columns: 1fr; gap: clamp(34px, 6vh, 54px); }
  .mm-ai__channels { flex-direction: row; justify-content: center; gap: clamp(28px, 8vw, 60px); }
}
@media (max-width: 460px) { .mm-ai__channels { flex-direction: column; } }
/* Phone portrait (Heng 11/07/2026): feature labels centred on 2 rows — Instant answers / Any
   language / Live inventory, then Finance / Always on (the break element makes the split
   deterministic instead of wherever ~390px happens to wrap) — and the Chat with Michi CTA centred. */
@media (max-width: 560px) {
  .mm-ai__feats { justify-content: center; }
  .mm-ai__feat-break { display: block; flex-basis: 100%; height: 0; }
  .mm-ai__cta { align-self: center; }
}

/* Instagram feed — full-viewport Dior-light gallery */
.mm-ig { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: #fff; padding: clamp(56px, 8vh, 100px) clamp(20px, 4vw, 64px); }
.mm-ig__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(34px, 5vh, 58px); }
.mm-ig__eyebrow { font-family: var(--sans); font-size: clamp(.72rem, .9vw, .84rem); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); margin-bottom: clamp(12px, 1.8vh, 18px); }
.mm-ig__profile { display: inline-flex; align-items: center; gap: clamp(14px, 1.9vw, 28px); text-decoration: none; margin-bottom: clamp(18px, 2.6vh, 30px); }
.mm-ig__avatar { position: relative; display: grid; place-items: center; width: clamp(56px, 6vw, 76px); aspect-ratio: 1; border-radius: 50%; padding: 3px; flex: 0 0 auto; box-sizing: border-box; }
.mm-ig__ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #fdb24c, #f77737, #fd1d1d, #e1306c, #c13584, #833ab4, #fdb24c); animation: mm-ig-spin 5s linear infinite; }
.mm-ig__avatar-img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-sizing: border-box; background: #fff; }
@keyframes mm-ig-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mm-ig__ring { animation: none; } }
.mm-ig__glyph { display: inline-flex; margin-bottom: clamp(7px, 1.1vh, 13px); }
.mm-ig__glyph svg { width: clamp(28px, 3.2vw, 36px); height: clamp(28px, 3.2vw, 36px); }
.mm-ig__handle { font-family: var(--serif); font-weight: 400; font-size: clamp(1.7rem, 3.2vw, 2.8rem); line-height: 1; letter-spacing: -.01em; color: var(--ink); }
.mm-ig__follow { margin-top: clamp(16px, 2.4vh, 26px); display: inline-flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: clamp(.86rem, 1vw, .96rem); letter-spacing: .04em; color: var(--ink); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid rgba(20,22,24,.28); }
.mm-ig__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, .9vw, 14px); width: 100%; max-width: min(1320px, 96vw); margin: 0 auto; }
.mm-ig__tile { position: relative; aspect-ratio: 1; overflow: hidden; background: #e3e7eb; }
.mm-ig__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) {
  .mm-ig { min-height: 0; padding: clamp(48px, 9vw, 72px) 16px; }
  .mm-ig__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================== Responsive ============================== */
@media (max-width: 1180px) {
  .mm-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .mm-grid { grid-template-columns: repeat(2, 1fr); }
  .mm-filterbar { grid-template-columns: repeat(2, 1fr); margin-bottom: -120px; }
  .mm-filterbar .btn { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .mm-grid { grid-template-columns: 1fr; }
  /* small phones: tighten the bar so burger + centred logo + the 4 action icons never crowd */
  .mm-site-header { gap: 8px; }
  .mm-header-actions { gap: 8px; }
  .mm-icon { padding: 3px; }
}

/* ============================== Compare teaser (home) — full-viewport Dior ============================== */
.mm-compare { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; background: #f8f8f8; padding: clamp(120px, 15vh, 190px) var(--gutter); box-sizing: border-box; border: 0 !important; }
/* The Michi chat widget's widget.css (loaded from chat.mmcarz.com.au AFTER this file) carries a
   rule inside an @media block that collides with .mm-compare and clobbers its padding down to 10px
   (that's the "cramped" look). Win the cascade back with a higher-specificity selector (no !important
   needed — the widget rule wins only on load order) and give it comfortable top/bottom breathing room. */
section.mm-compare.mm-compare { padding: clamp(112px, 15vh, 196px) var(--gutter); }
.mm-compare__inner { position: relative; z-index: 1; width: 100%; max-width: 1080px; }
.mm-compare__eyebrow { font-family: var(--sans); font-size: clamp(.72rem, .9vw, .84rem); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); margin-bottom: clamp(14px, 2.2vh, 24px); }
.mm-compare__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.4rem, 5.2vw, 4.6rem); line-height: 1.04; letter-spacing: -.01em; color: var(--ink); margin: 0 0 clamp(16px, 2.4vh, 26px); }
.mm-compare__lead { font-family: var(--sans); font-size: clamp(1rem, 1.2vw, 1.16rem); line-height: 1.65; color: var(--muted); max-width: 560px; margin: 0 auto clamp(34px, 4.6vh, 50px); }
/* Single column since the delivery/video-call aside was retired — the card owns the full 1080px. */
.mm-compare__grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 2.6vw, 40px); align-items: stretch; text-align: left; }
.mm-compare__card { background: #fff; border-radius: 16px; overflow: hidden; text-align: left; box-shadow: 0 30px 70px -40px rgba(20,22,24,.32); }
.mm-compare__cars { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.mm-compare__car { display: block; width: 100%; padding: clamp(16px, 2.4vw, 26px); color: var(--ink); background: none; border: 0; text-align: left; font: inherit; cursor: pointer; }
.mm-compare__car:hover { opacity: 1; }
.mm-compare__car ~ .mm-compare__car { border-left: 1px solid var(--line); }
.mm-compare__media { position: relative; display: block; aspect-ratio: 3/2; border-radius: 10px; overflow: hidden; background: var(--bg-soft); margin-bottom: 14px; }   /* 3/2 matches the car photos so the whole car shows */
.mm-compare__media img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }
.mm-compare__swap { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--ink); background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 999px; padding: 4px 9px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); transition: border-color .2s ease; }
.mm-compare__swap svg { width: 13px; height: 13px; }
.mm-compare__car:hover .mm-compare__swap { border-color: #cfccc5; }
.mm-compare__name { display: block; font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--ink); min-height: 2.7em; margin-bottom: 6px; }
.mm-compare__price { display: block; font-family: var(--serif); font-size: clamp(1.1rem, 1.5vw, 1.35rem); color: var(--ink); }
.mm-compare__vs { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; border: 3px solid #fff; }
.mm-compare__rows { border-top: 1px solid var(--line); }
.mm-compare__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; padding: 12px clamp(16px, 2.4vw, 26px); }
.mm-compare__row + .mm-compare__row { border-top: 1px solid var(--line); }
.mm-compare__cell { font-size: 14px; color: var(--ink); }
.mm-compare__cell:first-child { text-align: right; }
.mm-compare__lbl { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--muted); white-space: nowrap; text-align: center; }
.mm-compare__cta { display: inline-flex; align-items: center; gap: 12px; margin-top: clamp(30px, 4vh, 46px); font-family: var(--sans); font-size: clamp(.92rem, 1.05vw, 1.04rem); letter-spacing: .05em; color: var(--ink); padding-bottom: 5px; border-bottom: 1px solid rgba(51,56,60,.42); transition: gap .3s ease, border-color .3s ease; }
.mm-compare__cta:hover { gap: 18px; border-color: var(--ink); opacity: 1; }
.mm-compare__cta svg { width: 19px; height: 11px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .mm-compare__title { font-size: clamp(2rem, 9vw, 2.9rem); }
  .mm-compare__name { font-size: 12.5px; }
}

/* ============================== Compare tool (/compare/) ============================== */
/* overflow-x: clip — the full-bleed scroller below reaches for 100vw, which overhangs the page
   scrollbar by ~15px; clip stops that becoming page-level horizontal scroll. */
.mm-cmp { padding-block: clamp(26px, 5vw, 60px) clamp(60px, 10vw, 120px); overflow-x: clip; }
.mm-cmp__head { max-width: 680px; margin: 0 auto clamp(24px, 4vw, 40px); text-align: center; }
.mm-cmp__head .eyebrow { display: block; margin-bottom: 12px; }
.mm-cmp__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.06; letter-spacing: -.02em; color: var(--ink); margin: 0 0 14px; }
.mm-cmp__lead { font-size: clamp(.98rem, 1.1vw, 1.1rem); color: var(--muted); max-width: 560px; margin: 0 auto; }
.mm-cmp__bar { display: flex; align-items: center; justify-content: center; gap: 26px; margin-bottom: 18px; flex-wrap: wrap; }
.mm-cmp__toggle { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); cursor: pointer; user-select: none; }
.mm-cmp__toggle input { width: 16px; height: 16px; accent-color: var(--ink); cursor: pointer; }
.mm-cmp__clear { background: none; border: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); cursor: pointer; transition: color .2s ease; }
.mm-cmp__clear:hover { color: var(--ink); }
/* Full-bleed scroller on the centered container: the table stays on the page's centre axis and
   spreads out evenly in both directions as cars are added, breaking past --maxw when it needs to.
   Wider than the viewport -> the auto margins collapse and it scrolls horizontally as before. */
.mm-cmp__scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; margin-inline: calc(50% - 50vw); padding-inline: var(--gutter); }
/* swipe affordance (portrait phones): edge fades on the clipped side(s) + a one-time animated
   "swipe" hint — all JS-class driven, nothing shows when the table fits. The wrapper stays
   container-width (the scroller full-bleeds out of it as before), so the fades pin to the
   viewport edges with the same 50% - 50vw trick. */
.mm-cmp__scrollwrap { position: relative; }
.mm-cmp__scrollwrap::before, .mm-cmp__scrollwrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 34px; pointer-events: none; opacity: 0; transition: opacity .25s ease; z-index: 1; }
.mm-cmp__scrollwrap::before { left: calc(50% - 50vw); background: linear-gradient(to right, #fbfaf7, rgba(251,250,247,0)); }
.mm-cmp__scrollwrap::after { right: calc(50% - 50vw); background: linear-gradient(to left, #fbfaf7, rgba(251,250,247,0)); }
.mm-cmp__scrollwrap.can-left::before { opacity: 1; }
.mm-cmp__scrollwrap.can-right::after { opacity: 1; }
.mm-cmp__swipe { display: none; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--muted, #6b7177); margin: 12px 0 0; transition: opacity .4s ease; }
.mm-cmp__swipe svg { width: 15px; height: 15px; flex: none; color: var(--brand-blue, #0266b1); animation: mmCmpSwipe 1.6s ease-in-out infinite; }
@keyframes mmCmpSwipe { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.mm-cmp__scrollwrap.has-overflow + .mm-cmp__swipe { display: flex; }
.mm-cmp__swipe.is-done { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mm-cmp__swipe svg { animation: none; } }
/* Sized to content (not 100%) so car columns keep the same 230px rhythm whether 2 or 6 cars are
   in — a stretched 2-car table would balloon the photos and gap the rows. Centered = grows evenly. */
.mm-cmp__table { border-collapse: collapse; width: auto; min-width: 540px; margin-inline: auto; }
.mm-cmp__table.is-empty { min-width: 0; }
/* Empty state — the invisible corner cell would shove the lone "Add a car" tile ~80px right of
   centre, and the header row's underline would hang below it. Drop both so the tile sits dead-centre. */
.mm-cmp__table.is-empty .mm-cmp__corner { display: none; }
.mm-cmp__table.is-empty th { border-bottom: 0; }
.mm-cmp__table th, .mm-cmp__table td { vertical-align: top; border-bottom: 1px solid var(--line); }
.mm-cmp__lbl, .mm-cmp__corner { text-align: left; }
.mm-cmp__corner { width: 160px; min-width: 140px; border-bottom: 0; position: sticky; left: 0; background: var(--bg); z-index: 2; box-shadow: -40px 0 0 0 var(--bg); }   /* fill the scroller's left gutter (margin-inline pulls it full-bleed, so left:0 leaves a ~20px strip the sticky column doesn't cover) — otherwise scrolled values show through on the left */
.mm-cmp__corner span { font-size: 12px; color: var(--muted); font-weight: 500; }
.mm-cmp__carh, .mm-cmp__addh { position: relative; width: 272px; min-width: 236px; padding: 0 14px 18px; vertical-align: top; }
/* Sits fully ON the photo, hugging the top-right corner (the image is inset 14px by the cell padding,
   so right:14px lands it flush to the photo's right edge) — a bare white ✕ with a drop shadow so it
   reads on light and dark photos alike. */
.mm-cmp__remove { position: absolute; top: 2px; right: 14px; z-index: 2; width: 24px; height: 24px; border: 0; background: none; color: #fff; font-size: 14px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; filter: drop-shadow(0 1px 3px rgba(0,0,0,.65)); transition: transform .15s ease, opacity .15s ease; }
.mm-cmp__remove:hover { transform: scale(1.15); }
.mm-cmp__carlink { display: block; color: var(--ink); }
.mm-cmp__carlink:hover { opacity: 1; }
.mm-cmp__carimg { display: block; aspect-ratio: 3/2; border-radius: 10px; overflow: hidden; background: var(--bg-soft); margin-bottom: 12px; }   /* 3/2 matches the car photos so the whole car shows */
.mm-cmp__carimg img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }
.mm-cmp__carname { display: block; font-size: 14.5px; line-height: 1.35; font-weight: 500; min-height: 2.7em; text-align: center; }
.mm-cmp__carprice { display: block; font-family: var(--serif); font-size: 1.2rem; color: var(--ink); margin-top: 6px; }
.mm-cmp__add { width: 100%; aspect-ratio: 3/2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 1px dashed var(--line); border-radius: 12px; background: var(--bg-soft); color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.mm-cmp__add:hover { border-color: var(--ink); color: var(--ink); background: #fff; }
.mm-cmp__add-plus { font-size: 26px; line-height: 1; font-weight: 300; }
.mm-cmp__lbl { width: 160px; min-width: 140px; padding: 14px 16px 14px 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .13em; color: var(--muted); position: sticky; left: 0; background: var(--bg); z-index: 1; box-shadow: -40px 0 0 0 var(--bg); }   /* fill the scroller's left gutter so scrolled values don't peek through beside the sticky labels */
.mm-cmp__val { padding: 14px; font-size: 14px; color: var(--ink); text-align: center; }
.mm-cmp__val--ph { color: var(--line); }
.mm-cmp__table tr.is-same .mm-cmp__val { color: var(--muted); }
.mm-cmp__table tr.is-diff .mm-cmp__val { color: var(--ink); }
/* Divider between the basic rows and the deep performance/spec rows. */
.mm-cmp__table tr.mm-cmp__row--sep th, .mm-cmp__table tr.mm-cmp__row--sep td { border-top: 2px solid var(--line); }
.mm-cmp__val.is-best { font-weight: 600; }
.mm-cmp__bestpill { display: inline-block; margin-left: 8px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; padding: 2px 7px; vertical-align: middle; }
.mm-cmp__hint { margin-top: 18px; font-size: 14px; color: var(--muted); text-align: center; }
.mm-cmp__fineprint { margin: 34px auto 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 720px; text-align: center; }
.mm-cmp__share { background: none; border: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); cursor: pointer; transition: color .2s ease; }
.mm-cmp__share:hover { color: var(--ink); }
/* ---- Michi's verdict — agentic AI read on the current shortlist ---- */
.mm-cmp__ai { margin-top: 40px; border: 1px solid var(--line); border-radius: 14px; padding: clamp(22px, 3.4vw, 34px); background: linear-gradient(180deg, #fbfbfa, #fff); }
.mm-cmp__ai[hidden] { display: none; }
.mm-cmp__ai-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mm-blue, #0266b1); }
.mm-cmp__ai-eyebrow svg { width: 13px; height: 13px; animation: mmCmpSpark 2.6s ease-in-out infinite; }
@keyframes mmCmpSpark { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25) rotate(18deg); opacity: .72; } }
.mm-cmp__ai-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.6vw, 1.8rem); letter-spacing: -.015em; color: var(--ink); margin: 10px 0 7px; }
.mm-cmp__ai-sub { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--muted); max-width: 560px; }
.mm-cmp__ai-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mm-cmp__ai-btn { border: 1px solid var(--ink); background: var(--ink); color: #fff; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 13px 28px; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.mm-cmp__ai-btn:hover { background: #fff; color: var(--ink); }
.mm-cmp__ai-btn[hidden] { display: none; }
.mm-cmp__ai-btn--ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.mm-cmp__ai-btn--ghost:hover { border-color: var(--ink); background: #fff; }
.mm-cmp__ai-rivalnote { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
/* ---- NL compare entry ("compare your two cheapest hybrid SUVs") ---- */
.mm-cmp__nl { display: flex; align-items: center; gap: 10px; max-width: 620px; margin: 0 auto 12px; padding: 6px 6px 6px 16px; border: 1px solid var(--line); border-radius: 999px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.mm-cmp__nl:focus-within { border-color: var(--mm-blue, #0266b1); box-shadow: 0 0 0 3px rgba(2, 102, 177, .1); }
.mm-cmp__nl-spark { width: 15px; height: 15px; flex: 0 0 auto; color: var(--mm-blue, #0266b1); animation: mmCmpSpark 2.6s ease-in-out infinite; }
.mm-cmp__nl-field { flex: 1; min-width: 0; position: relative; display: flex; align-items: center; }
.mm-cmp__nl-in { flex: 1; min-width: 0; width: 100%; border: 0; background: none; font-family: var(--sans); font-size: 14px; color: var(--ink); padding: 9px 0; }
.mm-cmp__nl-in:focus { outline: none; }
.mm-cmp__nl-in::placeholder { color: var(--muted); }
/* Placeholder marquee — desktop/tablet keep the static native placeholder; only mobile portrait (where the
   hint is wider than the field) swaps in a scrolling overlay. Hidden the instant the field is focused or typed in. */
.mm-cmp__nl-ph { display: none; }
@media (max-width: 560px) and (orientation: portrait) {
  .mm-cmp__nl-in::placeholder { color: transparent; }   /* the marquee stands in for the static placeholder */
  .mm-cmp__nl-ph { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; pointer-events: none; }
  .mm-cmp__nl-ph-track { display: inline-block; white-space: nowrap; font-family: var(--sans); font-size: 14px; color: var(--muted); will-change: transform; animation: mmCmpNlPh 14s linear infinite; }
  .mm-cmp__nl-in:focus ~ .mm-cmp__nl-ph,
  .mm-cmp__nl-in:not(:placeholder-shown) ~ .mm-cmp__nl-ph { display: none; }
}
@keyframes mmCmpNlPh { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .mm-cmp__nl-ph-track { animation: none; } }
.mm-cmp__nl-go { flex: 0 0 auto; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.mm-cmp__nl-go:hover { background: var(--mm-blue, #0266b1); }
.mm-cmp__nl-go svg { width: 17px; height: 17px; }
.mm-cmp__nl-note { margin: 0 0 16px; font-size: 13px; color: var(--muted); text-align: center; }
.mm-cmp__nl-note[hidden] { display: none; }
.mm-cmp__ai-out { margin-top: 20px; font-size: 14.5px; line-height: 1.7; color: var(--ink); max-width: 720px; }
.mm-cmp__ai-out[hidden] { display: none; }
.mm-cmp__ai-think { display: inline-flex; gap: 4px; margin-right: 8px; vertical-align: middle; }
.mm-cmp__ai-think b { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: mmCmpDot 1.2s ease-in-out infinite; }
.mm-cmp__ai-think b:nth-child(2) { animation-delay: .15s; }
.mm-cmp__ai-think b:nth-child(3) { animation-delay: .3s; }
@keyframes mmCmpDot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.mm-cmp__picker { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.mm-cmp__picker[hidden] { display: none; }
.mm-cmp__picker-backdrop { position: absolute; inset: 0; background: rgba(20,22,24,.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.mm-cmp__picker-panel { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 82vh; background: #fff; border-radius: 18px 18px 0 0; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 -20px 60px -20px rgba(20,22,24,.4); }
.mm-cmp__picker-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.mm-cmp__search { flex: 1; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; font-size: 15px; color: var(--ink); padding: 8px 0; outline: none; transition: border-color .2s ease; }
.mm-cmp__search:focus { border-bottom-color: var(--ink); }
.mm-cmp__picker-x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--muted); font-size: 13px; cursor: pointer; flex: 0 0 auto; transition: color .2s ease, border-color .2s ease; }
.mm-cmp__picker-x:hover { color: var(--ink); border-color: var(--ink); }
.mm-cmp__picker-list { overflow-y: auto; padding: 8px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.mm-cmp__pick { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: 12px; transition: background .15s ease; }
.mm-cmp__pick:hover { background: none; }   /* no hover highlight in the picker list (Heng directive) */
.mm-cmp__pickimg { width: 140px; flex: 0 0 auto; aspect-ratio: 3/2; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.mm-cmp__pickimg img { width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; display: block; }
.mm-cmp__pickmeta { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mm-cmp__pickname { font-size: 14px; color: var(--ink); line-height: 1.3; }
.mm-cmp__pickprice { font-size: 13px; color: var(--muted); }
.mm-cmp__noresult { padding: 30px; text-align: center; color: var(--muted); font-size: 14px; }

/* --- Car-picker Filter button (in .mm-cmp__picker-head) + the inventory-filter modal it opens --- */
.mm-cmp__picker-head .mm-cmp__search { flex: 1 1 auto; min-width: 0; }
.mm-pickfilter { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--line); border-radius: 10px; background: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.mm-pickfilter:hover { border-color: var(--ink); }
.mm-pickfilter.is-on { border-color: var(--ink); background: var(--soft, #f4f5f6); }
.mm-pickfilter svg { width: 16px; height: 16px; flex: 0 0 auto; }
.mm-pickfilter__n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 700; }
.mm-pickfilter__n[hidden] { display: none; }
/* Sort control in the picker head (next to Filter) — compact native select with a custom chevron. */
.mm-picksort { flex: 0 0 auto; max-width: 116px; padding: 9px 28px 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b9095' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 11px center; font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.mm-picksort:hover, .mm-picksort:focus { border-color: var(--ink); outline: none; }

/* Re-assert theme vars on the modal: the finance page's .mm-fin subtree resets them, which left the
   filter bar's var(--ink)/var(--line) etc. undefined -> the checked-checkbox background went transparent
   (white tick invisible). Defining them here fixes the tick + colours regardless of the host page. */
.mmf-modal { position: fixed; inset: 0; z-index: 400; display: flex; --ink: #33383c; --muted: #8b9095; --bg-soft: #f8f8f8; --soft: #f8f8f8; --line: #e6e4e0; }
.mmf-modal[hidden] { display: none; }
.mmf-modal__backdrop { position: absolute; inset: 0; background: rgba(20,22,24,.28); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transition: opacity .3s ease; }
.mmf-modal.is-open .mmf-modal__backdrop { opacity: 1; }
.mmf-modal__panel { position: relative; margin: auto; z-index: 1; width: min(460px, calc(100vw - 32px)); max-height: min(84vh, 760px); background: #fff; border-radius: 8px; box-shadow: 0 28px 60px -24px rgba(20,22,24,.35); display: flex; flex-direction: column; overflow: hidden; transform: translateY(12px) scale(.98); opacity: 0; transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .3s ease; }
.mmf-modal.is-open .mmf-modal__panel { transform: none; opacity: 1; }
.mmf-modal__head { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.mmf-modal__title { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.mmf-modal__x { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; padding: 4px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.mmf-modal__x svg { width: 22px; height: 22px; }
.mmf-modal__body { flex: 1 1 auto; overflow-y: auto; padding: 4px 0; }
.mmf-modal__foot { flex: 0 0 auto; display: flex; gap: 10px; padding: 12px; border-top: 1px solid var(--line); }
.mmf-modal__reset { flex: 0 0 auto; padding: 0 20px; height: 46px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.mmf-modal__reset:hover { color: var(--ink); border-color: var(--ink); }
.mmf-modal__apply { flex: 1 1 auto; height: 46px; border: 0; border-radius: 8px; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: opacity .15s ease; }
.mmf-modal__apply:hover { opacity: .88; }
/* Reflow the shared filter form into a stacked accordion so its pills + popovers render inline in the scroll body. */
.mmf-modal__body .mm-filters2--inv { width: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; }
.mmf-modal__body .mm-filters2--inv .mm-fpill { flex: none; width: 100%; border-bottom: 0; position: static; }
.mmf-modal__body .mm-filters2--inv .mm-fpill > summary { position: relative; justify-content: space-between; gap: 10px; padding: 17px 22px; border-radius: 0; font-size: 14px; font-weight: 500; }
.mmf-modal__body .mm-filters2--inv .mm-fpill > summary::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 1px; background: var(--line); }
.mmf-modal__body .mm-filters2--inv .mm-fpill > summary:hover { background: none; }
.mmf-modal__body .mm-fpop { position: static; transform: none; inset: auto; width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible; margin: 0; padding: 14px 22px 20px; background: none; border: 0; border-radius: 0; box-shadow: none; animation: none; }
.mmf-modal__body .mm-filters2--inv .mm-fgo, .mmf-modal__body .mm-filters2--inv .mm-fclear { display: none; }
/* Vertically centre the pill chevrons with their labels (the base bar aligns on the baseline). */
.mmf-modal__body .mm-filters2--inv .mm-fpill > summary { align-items: center; }
.mmf-modal__body .mm-filters2--inv .mm-fpill > summary b { transform: translateY(-1px) rotate(45deg); }
.mmf-modal__body .mm-filters2--inv .mm-fpill[open] > summary b { transform: translateY(1px) rotate(-135deg); }
/* No hover effects inside the filter popup (Heng directive). */
.mmf-modal__body .mm-filters2--inv .mm-fpill > summary:hover,
.mmf-modal__body .mm-ftrigger:hover,
.mmf-modal__body .mm-bodycard:hover,
.mmf-modal__body .mm-time__slot:hover { background: transparent; }
.mmf-modal__body .mm-bodycard:hover .mm-bodycard__svg { color: inherit; }
.mmf-modal__body .mm-chip:hover span { border-color: var(--line); }
.mmf-modal__body .mm-swatch:hover .mm-swatch__name { text-decoration: none; }
.mmf-modal__body .mm-fseg__btn:hover:not(.is-active) { color: var(--muted); }
/* Sort pill in the filter modal — inventory .mm-fpill--sort component, stacked like the filter pills, no hover fill. */
.mmf-modal__body .mm-fpill--sort { display: block; width: 100%; position: static; border-bottom: 1px solid var(--line); }
.mmf-modal__body .mm-fpill--sort > summary { display: flex; align-items: center; gap: 10px; padding: 17px 22px; font-size: 14px; font-weight: 500; background: none; cursor: pointer; list-style: none; }
.mmf-modal__body .mm-fpill--sort > summary::-webkit-details-marker { display: none; }
.mmf-modal__body .mm-fpill--sort > summary:hover, .mmf-modal__body .mm-fpill--sort[open] > summary { background: none; }
.mmf-modal__body .mm-fpill--sort > summary .mm-fpill__lbl { color: var(--ink); font-weight: 500; }
.mmf-modal__body .mm-fpill--sort > summary .mm-fpill__val { margin-left: auto; color: var(--muted); font-weight: 400; }
.mmf-modal__body .mm-fpop--sort { position: static; transform: none; inset: auto; width: auto; min-width: 0; max-width: none; box-shadow: none; border: 0; border-radius: 0; background: none; padding: 2px 14px 16px; }
.mmf-modal__body .mm-sortopt:hover { background: none; }
/* ==========================================================================================
   FILTERS ARE HOVER-FREE, EVERYWHERE (Heng directive — "rebuild it, no hover").
   Earlier kills were wrapper-scoped (.mmf-modal__body only), so the SAME hover effects survived
   on any surface that wasn't the pop-up: the homepage hero bar (form.mm-filters2) and the
   inventory drawer (.mm-invbar). These rules are GLOBAL for the filter option components, so no
   surface is missed. Selected / open / active states + primary CTA buttons stay untouched — only
   the :hover highlight is removed. Covers the finance/compare pop-up (.mmf-modal), the car-picker
   list (.mm-cmp__picker), the inventory drawer (.mm-invbar) and the hero bar (.mm-filters2).

   Layer A — kill the sitewide OPACITY dims inside every filter surface. This is the exact
   "sitewide rule overruling it" Heng spotted: a:hover{opacity:.62} (line 51) — e.g. the inventory
   "Reset all filters" <a> — plus .mm-icon:hover / .mm-nav a:hover etc. Background-only kills never
   touched these. Forcing opacity:1 on every hovered descendant of a filter surface kills them all. */
.mm-cmp__picker *:hover, .mmf-modal *:hover, .mm-invbar *:hover, .mm-filters2 *:hover { opacity: 1 !important; }
.mm-cmp__picker a:hover, .mmf-modal a:hover, .mm-invbar a:hover, .mm-filters2 a:hover { text-decoration: none !important; }
/* Layer B — background fills / shadow / transform on every option row, pill, card, slot + reset. */
.mm-cmp__pick:hover,
.mm-fpill > summary:hover, .mm-fpill--sort > summary:hover,
.mm-sortopt:hover, .mm-bodycard:hover, .mm-time__slot:hover,
.mm-mmmake:hover, .mm-mmmodel:hover, .mm-mmrow:hover,
.mmf-modal__body label:hover, .mm-invbar label:hover, .mm-filters2 label:hover,
.mm-invbar__reset:hover, .mm-invbar:has(.mm-filters2--inv.has-filters) .mm-invbar__reset:hover {
  background: none !important; background-color: transparent !important; box-shadow: none !important; transform: none !important;
}
/* Layer C — precise per-control neutralisers (each was the element's only hover change). */
.mm-chip:hover span { border-color: var(--line) !important; }          /* was darkening to --muted */
.mm-swatch:hover .mm-swatch__name { text-decoration: none !important; } /* was underlining */
.mm-fseg__btn:hover:not(.is-active) { color: var(--muted) !important; } /* was darkening to --ink */
.mmf-modal__reset:hover { color: var(--muted) !important; }             /* pop-up reset btn: was --ink */
/* Hide the native search-clear (x) on the car-picker search fields. */
.mm-cmp__search::-webkit-search-cancel-button, .mm-cmp__search::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
@media (min-width: 760px) {
  .mm-cmp__picker { align-items: center; }
  .mm-cmp__picker-panel { border-radius: 16px; max-height: 74vh; }
}
@media (max-width: 560px) {
  .mm-cmp__corner, .mm-cmp__lbl { width: 110px; min-width: 110px; }
  .mm-cmp__carh, .mm-cmp__addh { width: 180px; min-width: 172px; }
}

/* Common Questions — full-viewport Dior-minimal FAQ (native <details> accordion) */
.mm-faq { background: var(--bg); min-height: 100vh; display: flex; align-items: center; }
.mm-faq__inner { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(70px, 12vh, 140px) var(--gutter); }
.mm-faq__head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vh, 72px); }
.mm-faq__eyebrow { display: block; font-family: var(--sans); font-size: clamp(.72rem, .9vw, .84rem); font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); margin-bottom: clamp(14px, 2vh, 20px); }
.mm-faq__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.06; letter-spacing: -.01em; color: var(--text); margin: 0; }
.mm-faq__list { border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 88px); align-items: start; }
.mm-faq__item { border-bottom: 1px solid var(--line); }
.mm-faq__q { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 40px); padding: clamp(20px, 2.6vh, 30px) 0; font-family: var(--sans); font-size: clamp(1rem, 1.25vw, 1.18rem); font-weight: 500; color: var(--text); transition: opacity .2s ease; }
.mm-faq__q::-webkit-details-marker { display: none; }
.mm-faq__q:hover { opacity: .6; }
.mm-faq__icon { position: relative; flex: 0 0 16px; width: 16px; height: 16px; }
.mm-faq__icon::before { content: ""; position: absolute; left: 50%; top: 42%; width: 9px; height: 9px; border-right: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: translate(-50%, -50%) rotate(45deg); transition: transform .3s ease, top .3s ease; }
.mm-faq__item[open] .mm-faq__icon::before { top: 58%; transform: translate(-50%, -50%) rotate(-135deg); }
.mm-faq__a { color: var(--muted); padding: 0 0 clamp(22px, 3vh, 32px); max-width: 62ch; }
.mm-faq__a p { margin: 0; font-size: clamp(.95rem, 1.05vw, 1.05rem); line-height: 1.72; }
@media (max-width: 880px) {
  .mm-faq { min-height: auto; }
  .mm-faq__inner { padding: clamp(56px, 9vh, 90px) var(--gutter); }
  .mm-faq__head { margin-bottom: clamp(28px, 5vh, 44px); }
  .mm-faq__list { grid-template-columns: 1fr; column-gap: 0; }
  .mm-faq__title { font-size: clamp(2rem, 9vw, 2.7rem); }
}

/* ============================== About & Contact — full-viewport Dior split ============================== */
.mm-about { position: relative; background: var(--bg-soft); min-height: 100vh; display: flex; align-items: center; }
.mm-about::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(56px, 7vh, 96px); z-index: 0; pointer-events: none; background: radial-gradient(150% 130% at 50% 0%, #fff 0%, rgba(248,248,248,0) 64%); }   /* curved melt: white FAQ above into about */
.mm-about__inner { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(70px, 12vh, 140px) var(--gutter); display: grid; grid-template-columns: 1fr 1.04fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
/* Left — story */
.mm-about__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 1.06; letter-spacing: -.01em; color: var(--text); margin: 0 0 clamp(20px, 3vh, 30px); }
.mm-about__lead p { font-family: var(--sans); font-size: clamp(1rem, 1.12vw, 1.1rem); line-height: 1.7; color: var(--muted); max-width: 48ch; margin: 0 0 clamp(14px, 1.8vh, 20px); }
.mm-about__lead strong { color: var(--ink); font-weight: 600; }
.mm-about__lead p:last-child { margin-bottom: clamp(26px, 3.6vh, 38px); }
.mm-about__cta { display: inline-flex; align-items: center; gap: 12px; font-family: var(--sans); font-size: clamp(.92rem, 1.05vw, 1.04rem); letter-spacing: .05em; color: var(--ink); padding-bottom: 5px; border-bottom: 1px solid rgba(51,56,60,.42); transition: gap .3s ease, border-color .3s ease; }
.mm-about__cta:hover { gap: 18px; border-color: var(--ink); opacity: 1; }
.mm-about__cta svg { width: 19px; height: 11px; flex: 0 0 auto; }
/* Right — contact + map */
.mm-about__contact { min-width: 0; }
.mm-about__details { list-style: none; padding: 0; margin: 0 0 clamp(22px, 3vh, 30px); border-top: 1px solid var(--line); }
.mm-about__row { display: grid; grid-template-columns: clamp(60px, 7vw, 92px) 1fr; gap: clamp(14px, 2vw, 26px); align-items: baseline; padding: clamp(15px, 2vh, 19px) 0; border-bottom: 1px solid var(--line); }
.mm-about__rlabel { font-family: var(--sans); font-size: clamp(.62rem, .74vw, .7rem); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; color: var(--muted); }
.mm-about__rval { font-family: var(--sans); font-size: clamp(.95rem, 1.06vw, 1.06rem); line-height: 1.5; color: var(--ink); }
.mm-about__rval a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .2s ease, opacity .2s ease; }
.mm-about__rval a:hover { opacity: 1; border-color: var(--ink); }
/* Interactive map — scroll to zoom, drag to pan (directions live on the Visit row above) */
.mm-about__map { position: relative; display: block; overflow: hidden; border-radius: 14px; border: 1px solid var(--line); aspect-ratio: 16 / 10; box-shadow: 0 20px 54px rgba(20,30,48,.08); }
/* Custom-styled Google map (JS API) renders into .mm-about__mapcanvas, recoloured to MM Carz blues; the iframe is the keyless natural-colour fallback when no Maps key is set */
.mm-about__mapcanvas { position: absolute; inset: 0; width: 100%; height: 100%; background: #eef3f9; }
.mm-about__mapframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 900px) {
  .mm-about { min-height: auto; }
  .mm-about__inner { grid-template-columns: 1fr; gap: clamp(34px, 6vh, 52px); padding: clamp(56px, 9vh, 90px) var(--gutter); }
  .mm-about__title { font-size: clamp(2rem, 9vw, 2.7rem); }
  .mm-about__lead p { max-width: none; }
  .mm-about__map { aspect-ratio: 16 / 11; }
}

/* ============================== Featured car of the week (.mm-fcar) — full-viewport showcase ============================== */
.mm-fcar { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: #141618; color: #fff; }
.mm-fcar__slides { position: absolute; inset: 0; z-index: 0; }
.mm-fcar__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.mm-fcar__slide.is-active { opacity: 1; }
.mm-fcar__slide img { width: 100%; height: 100%; object-fit: cover; }
.mm-fcar__scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(20,22,24,.10) 0%, rgba(20,22,24,.34) 48%, rgba(20,22,24,.88) 100%); }
.mm-fcar__inner { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: clamp(28px, 5vh, 56px) var(--gutter) clamp(30px, 5vh, 60px); display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(20px, 2.5vw, 44px); }
@media (max-width: 1200px) { .mm-fcar__inner { flex-wrap: wrap; } .mm-fcar__actions { align-items: flex-start !important; text-align: left !important; } .mm-fcar__disc { text-align: left !important; } }
.mm-fcar__main { flex: 0 0 auto; min-width: 0; }
.mm-fcar__actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; }
.mm-fcar__eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: rgba(255,255,255,.78); margin: 0 0 10px; }
.mm-fcar__title { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 12px; }
.mm-fcar__title a { color: #fff; }
.mm-fcar__title a:hover { opacity: .82; }
.mm-fcar__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; font-family: var(--serif); font-weight: 300; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: #fff; letter-spacing: -.01em; margin-bottom: 4px; }
.mm-fcar__wk { font-family: var(--sans); font-size: .78rem; font-weight: 500; color: #fff; background: rgba(2,102,177,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 5px 13px; border-radius: 24px; letter-spacing: 0; }
.mm-fcar__ex { font-size: 11px; color: rgba(255,255,255,.7); margin: 0 0 12px; }
.mm-fcar__chips { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; }
.mm-fcar__chips span { white-space: nowrap; }
.mm-fcar__chips span { font-size: 12px; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.26); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 24px; }
.mm-fcar__incl { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.92); margin: 0; }
.mm-fcar__cta { display: flex; flex-wrap: nowrap; gap: 26px; }
/* Dior text-link CTAs on the dark hero — uppercase, underline only (no box). */
.mm-fcar__link { background: none; border: 0; border-bottom: 1px solid #fff; border-radius: 0; padding: 0 0 6px; color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 500; letter-spacing: .04em; line-height: 1; cursor: pointer; text-decoration: none; transition: opacity .18s ease; }
.mm-fcar__link:hover { opacity: .68; }
.mm-fcar .btn { border-radius: 6px; }
.mm-fcar .btn--ghost { color: #fff; border-color: rgba(255,255,255,.55); background: transparent; }
.mm-fcar .btn--ghost:hover { background: #fff; color: var(--ink); border-color: #fff; }
.mm-fcar__disc { font-size: 10.5px; color: rgba(255,255,255,.55); line-height: 1.4; max-width: 372px; margin: 2px 0 0; text-align: left; }
.mm-fcar__hlrow { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter) clamp(20px, 3.5vh, 40px); }
.mm-fcar__highlights { flex: 0 0 auto; align-self: flex-end; display: flex; justify-content: center; gap: 10px; padding-bottom: 2px; }
/* Widened for translated labels (Heng 16/07/2026). These were sized for English: flex-shrink pulled
   each tile down to the 86px floor, leaving ~70px of content once the 8px side padding is taken —
   and a 7-character Cantonese label ("自適應巡航系統") needs ~74px, so it wrapped and stranded a
   single character on line 2. The row (.mm-fcar__highlights) is flex:0 0 auto, i.e. content-sized, so
   raising the floor simply lets it grow: 3 tiles 88->104px, row 284->332px, still nowhere near the
   viewport edge. English is unaffected — it never hit the floor. */
.mm-fhl { flex: 0 1 132px; min-width: 104px; max-width: 140px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); border-radius: 10px; overflow: hidden; }
.mm-fhl__anim { position: relative; background: rgba(238,241,244,.92); overflow: hidden; }   /* aspect-ratio: see the feature-artwork block near .mm-anim */
.mm-fhl__svg, .mm-fhl__pic { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-fhl__pic { z-index: 1; }
.mm-fhl__vid, .mm-fcard__vid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
/* Three lines, then ellipsis. Ranking the tiles by ASSET rather than by SVG id surfaced the
   feed's longer names -- across the 47 cars in stock the median chosen label is 23 characters
   but the p90 is 42 ("Collision Mitigation - Forward (Low speed)") and the longest is 48. Three
   lines holds every one of them; the clamp is only a backstop so a longer name can never stretch
   the row. `pretty` (with `balance` preferred) evens the wrap, which matters most for CJK, where
   there are no spaces to break on and a naive wrap strands a single character on the last line. */
.mm-fhl__name { font-size: 10.5px; font-weight: 500; color: #fff; line-height: 1.2; padding: 6px 8px 8px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  text-wrap: pretty; text-wrap: balance; }
@media (max-width: 860px) {
  .mm-fcar__inner { padding-top: 30vh; }
  .mm-fhl { width: 110px; }
}
@media (max-width: 380px) {
  .mm-fhl__name { font-size: 10.5px; }
}

/* Portrait tablets + phones: a full-bleed `cover` on a tall/narrow viewport crops a landscape car
   photo ~50% (chops both ends of the car). Switch to a STACKED layout — the car sits in a landscape
   image block at the top (full width, no crop) and the title/price/CTA flow below on the dark panel.
   Landscape keeps the full-viewport overlay hero (cover works there). */
@media (max-width: 900px) and (orientation: portrait) {
  .mm-fcar { min-height: auto; }
  .mm-fcar__slides { position: relative; aspect-ratio: 3 / 2; }   /* landscape image block, in flow, at the top */
  .mm-fcar__slides::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(20,22,24,0) 0%, #141618 100%); }   /* blend the photo into the dark content panel below */
  .mm-fcar__scrim { display: none; }
  /* Content column layout (2-col on tablet, 1-col on phones) is handled by the width blocks below. */
  .mm-fcar__inner { padding-top: clamp(20px, 5vw, 36px); padding-bottom: clamp(18px, 4vw, 28px); }
}

/* Tablets (600–1200px, both orientations — landscape overlay AND portrait stacked): lay the content
   out as a 2-column GRID. The text/price and CTA + fine print share a narrower LEFT column (1fr,
   auto-reduced), and the feature highlights get their own RIGHT column, flush to the bottom. */
@media (min-width: 600px) and (max-width: 1200px) {
  .mm-fcar__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: clamp(24px, 3vw, 44px); row-gap: 16px; }
  .mm-fcar__main { grid-column: 1; grid-row: 1; }
  .mm-fcar__actions { grid-column: 1; grid-row: 2; }
  .mm-fcar__highlights { grid-column: 2; grid-row: 1 / 3; align-self: end; justify-content: flex-end; padding-bottom: 0; }
}

/* Narrow phones (<600px): a 2-column split is too cramped — stack in one column, feature strip last
   (flush at the bottom). */
@media (max-width: 599px) {
  .mm-fcar__inner { display: flex; flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: clamp(16px, 4vw, 24px); }
  .mm-fcar__actions { order: 1; }
  .mm-fcar__highlights { order: 2; align-self: stretch; justify-content: flex-start; padding-bottom: 0; margin-bottom: clamp(14px, 4vw, 22px); }   /* breathing room BELOW the animated features (was flush on the section edge — Heng 11/07/2026) */
  .mm-fcar__price { align-items: center; }   /* "From $X/week*" pill vertically CENTRED on the price (baseline hung it low) */
}

/* ============================== Popular features rail (.mm-featurail) ============================== */
.mm-featurail { padding: clamp(44px, 7vw, 92px) 0; background: var(--bg); }
.mm-featurail__head { margin-bottom: 20px; }
.mm-featurail__h { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); display: inline-block; border-bottom: 2px solid var(--brand-blue); padding-bottom: 8px; margin: 0; }
.mm-featurail__sub { font-size: 13px; color: var(--muted); margin: 12px 0 0; }
.mm-featurail__tabs { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0 22px; }
.mm-ftab { font-family: var(--sans); font-size: 12.5px; font-weight: 500; border: 1px solid var(--line); background: #fff; color: #5a616a; padding: 9px 16px; border-radius: 24px; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.mm-ftab:hover { border-color: #cdd2d7; opacity: 1; }
.mm-ftab.is-active { background: #0c447c; color: #fff; border-color: #0c447c; }
.mm-ftab span { opacity: .6; font-weight: 400; margin-left: 4px; }
.mm-featurail__strip { display: grid; grid-auto-flow: column; grid-auto-columns: 144px; gap: 12px; overflow-x: auto; padding-bottom: 12px; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.mm-featurail__strip::-webkit-scrollbar { height: 6px; }
.mm-featurail__strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.mm-fcard { scroll-snap-align: start; background: #fff; border: 1px solid #ecedf1; border-radius: 10px; overflow: hidden; }
.mm-fcard.is-hl { border-color: #cfe3f6; }
.mm-fcard__anim { position: relative; background: #eef1f4; }   /* aspect-ratio: see the feature-artwork block near .mm-anim */
.mm-fcard__svg, .mm-fcard__pic { position: absolute; inset: 0; width: 100%; height: 100%; }
.mm-fcard__pic { z-index: 1; background: #eef1f4; }
.mm-fcard__name { font-size: 11.5px; font-weight: 500; color: #3b4148; line-height: 1.3; padding: 8px 10px; }
.mm-featurail__all { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.mm-featurail__all > summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--brand-blue); list-style: none; }
.mm-featurail__all > summary::-webkit-details-marker { display: none; }
.mm-featurail__alllist { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px 28px; margin-top: 18px; }
.mm-featgroup h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin: 0 0 10px; }
.mm-featgroup ul { list-style: none; margin: 0; padding: 0; }
.mm-featgroup li { position: relative; font-size: 12.5px; color: #5a616a; line-height: 1.45; padding: 4px 0 4px 16px; }
.mm-featgroup li::before { content: ""; position: absolute; left: 0; top: 10px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-blue); }
@media (max-width: 560px) { .mm-featurail__strip { grid-auto-columns: 132px; } }

/* ====================== Feature artwork: SQUARE tiles, plain `cover` ======================
   Shared by the three surfaces that show a feature picture or loop — the homepage showcase
   (.mm-fhl__anim), the listing marquee (.mm-lx__featanim) and the features rail
   (.mm-fcard__anim).

   🚨 THE TILE IS 1/1 BECAUSE THE ARTWORK IS. Every still gen_feature_images.py renders is
   1024x1024, and gen_feature_wide.py rebuilds the loops square to match. Match the box to the
   art and `cover` crops NOTHING — which is the whole fix for Heng's "the featured animation is
   chopped" (08/08/2026). The tiles were 16/10, 3/2 and 4/3, so cover threw away 37.5%, 33% and
   25% of the picture's height: the heated seat lost its headrest and its base, the alloy wheel
   became an ellipse, the power tailgate lost its roof and wheels.

   🚨 Do NOT solve this with `contain` over a blurred backdrop instead. That was tried the same
   day and Heng rejected it on sight — "before looked better now looks laggy distorted". A
   blurred COVER copy is a smeared enlargement of the SUBJECT, so it reads as a ghosted double
   image behind the sharp one; and stacking a blur filter plus a transform animation on three
   video layers, inside a .mm-fhl that already carries backdrop-filter, is what made it stutter.
   Squaring the box needs no extra layer, no extra paint and no extra request. */
.mm-fhl__anim, .mm-fcard__anim, .mm-lx__featanim { aspect-ratio: 1 / 1; }
.mm-fhl__pic, .mm-fhl__vid, .mm-fcard__pic, .mm-fcard__vid,
.mm-lx__featanim img, .mm-lx__featanim video { object-fit: cover; }
/* Ken Burns so the still-image tiles visibly move. 🚨 Stills ONLY — a loop animates itself, and
   a transform on a <video> layer is the expensive one. It also stays well under the old
   1.12–1.20: in a square box the zoom is now the ONLY thing that can crop, and the tightest
   object-on-backdrop stills clear their frame by just 4.9%–6.9% (measured across all 20), so
   1.10 max plus a 1.2% drift is the most that never bites. */
.mm-fcard__pic, .mm-fhl__pic, .mm-lx__featanim img { animation: mmkenburns 9s ease-in-out infinite; }
@keyframes mmkenburns {
  0%   { transform: scale(1.05) translate(-1.2%, -0.8%); }
  33%  { transform: scale(1.10) translate(1%, 0.9%); }
  66%  { transform: scale(1.07) translate(0.9%, -0.7%); }
  100% { transform: scale(1.05) translate(-1.2%, -0.8%); }
}
@media (prefers-reduced-motion: reduce) {
  .mm-fcard__pic, .mm-fhl__pic, .mm-lx__featanim img { animation: none; }
}

/* feature-card animations (scoped to .mm-anim; site is light so no dark-mode handling needed) */
.mm-anim { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.mm-anim .an-flow { stroke-dasharray: 7 7; animation: mmflow 1s linear infinite; }
.mm-anim .an-pulse { transform-box: fill-box; transform-origin: center; animation: mmpulse 1.8s ease-out infinite; }
.mm-anim .an-blink { animation: mmblink 1.1s ease-in-out infinite; }
.mm-anim .an-slide { animation: mmslide 2.2s ease-in-out infinite; }
.mm-anim .an-rise { transform-box: fill-box; transform-origin: center; animation: mmrise 1.9s ease-in-out infinite; }
.mm-anim .an-dotmv { animation: mmdot 1.8s ease-in-out infinite; }
.mm-anim .an-swy { transform-box: fill-box; transform-origin: center; animation: mmswy 2.6s ease-in-out infinite; }
.mm-anim .an-draw { stroke-dasharray: 27; animation: mmdraw 2.6s ease-in-out infinite; }   /* 27 ~= the tick path's length */
@keyframes mmflow { to { stroke-dashoffset: -28; } }
@keyframes mmdraw { 0%, 8% { stroke-dashoffset: 27; } 42%, 84% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 27; } }
@keyframes mmpulse { 0% { opacity: .1; transform: scale(.7); } 40% { opacity: .85; } 100% { opacity: 0; transform: scale(1.25); } }
@keyframes mmblink { 0%, 100% { opacity: .18; } 50% { opacity: 1; } }
@keyframes mmslide { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@keyframes mmrise { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes mmdot { 0% { transform: translateX(0); opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(34px); opacity: 0; } }
/* The car swaying between the lane lines. Was translateX(-1.5px)..(1.5px) — 3 user units in a
   120-wide viewBox, which renders as 2.4px in a 96px tile and is not perceptible: the `lane`
   card read as a static car with a dashed line moving past it. 14 units plus a couple of
   degrees reads as steering, and still clears the lane lines (car is 22 wide at x=60, lines at
   26 and 94). */
@keyframes mmswy { 0%, 100% { transform: translateX(-7px) rotate(-2.5deg); } 50% { transform: translateX(7px) rotate(2.5deg); } }
/* The camera cone. It used to share an-pulse with the radar arcs, whose keyframe ends at
   opacity 0 — correct for a wave leaving the car, wrong for a lens's field of view, which
   spent most of its cycle invisible and left the most frequently rendered SVG looking dead.
   It now breathes between two visible states instead of fading out. */
.mm-anim .an-cone { transform-box: fill-box; transform-origin: 50% 100%; animation: mmcone 2.4s ease-in-out infinite; }
@keyframes mmcone { 0%, 100% { opacity: .28; transform: scaleY(.88); } 50% { opacity: .62; transform: scaleY(1.04); } }
@media (prefers-reduced-motion: reduce) { .mm-anim * { animation: none !important; } }

/* ============================== Spec tables (.mm-spectables) ============================== */
.mm-spectables { padding: clamp(40px, 6vw, 84px) 0; background: var(--bg-soft); }
.mm-spectables__head { margin-bottom: 24px; }
.mm-spectables__h { font-family: var(--serif); font-size: clamp(1.4rem, 2.4vw, 2rem); display: inline-block; border-bottom: 2px solid var(--brand-blue); padding-bottom: 8px; margin: 0; }
.mm-spectables__note { font-size: 12px; color: var(--muted); margin: 12px 0 0; }
.mm-spectables__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 38px); }
.mm-spectable h3 { font-family: var(--sans); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin: 0 0 8px; }
.mm-spectable table { width: 100%; border-collapse: collapse; }
.mm-spectable tr { border-bottom: 1px solid var(--line); }
.mm-spectable th { text-align: left; font-weight: 400; color: var(--muted); font-size: 13px; padding: 10px 0; }
.mm-spectable td { text-align: right; color: var(--ink); font-size: 13px; font-weight: 500; padding: 10px 0; }

/* Appointment-type toggle (Test drive / Finance / Just looking) in the Book-an-appointment form */
.mm-appttype { display: none; gap: 4px; padding: 4px; background: rgba(20,22,24,.05); border-radius: 6px; margin-bottom: 4px; }
.mm-apptform.mm-show-type .mm-appttype, .mm-apptform[data-mode="Buy"] .mm-appttype { display: flex; }
.mm-appttype__opt { flex: 1; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--muted); padding: 9px 12px; border-radius: 4px; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.mm-appttype__opt.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20,22,24,.1); }
.mm-appttype__opt:hover:not(.is-active) { color: var(--ink); }
/* Buy / Sell / Service mode — same segmented language as the type toggle, but always visible at the top. */
.mm-apptmode { display: flex; gap: 4px; padding: 4px; background: rgba(20,22,24,.05); border-radius: 6px; margin-bottom: 4px; }
.mm-apptmode__opt { flex: 1; border: 0; background: none; cursor: pointer; font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--muted); padding: 10px 12px; border-radius: 4px; transition: background .18s ease, color .18s ease, box-shadow .18s ease; }
.mm-apptmode__opt.is-active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(20,22,24,.1); }
.mm-apptmode__opt:hover:not(.is-active) { color: var(--ink); }
/* The Test drive / Finance sub-toggle is a Buy thing — Sell and Service replace it with the mode itself. */
.mm-apptform[data-mode="Sell"] .mm-appttype, .mm-apptform[data-mode="Service"] .mm-appttype { display: none; }
/* Buy-mode "browse & filter our stock" — opens the compare-style picker; hidden under Sell / Service. */
.mm-apptbrowse { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 1px dashed var(--line); background: var(--bg-soft, #fafafa); color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 11px 14px; border-radius: 10px; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
.mm-apptbrowse:hover { border-color: var(--ink); color: var(--ink); }
.mm-apptbrowse svg { width: 15px; height: 15px; flex: 0 0 auto; }
.mm-apptform[data-mode="Sell"] .mm-apptbrowse, .mm-apptform[data-mode="Service"] .mm-apptbrowse { display: none; }
/* Service mode's Quote/Service sub-toggle — visible ONLY in Service mode. !important so it stays
   immune to the Buy/Sell visibility matrix above (which shows/hides all .mm-appttype rows). */
.mm-apptform .mm-appttype--svc { display: none !important; }
.mm-apptform[data-mode="Service"] .mm-appttype--svc { display: flex !important; }
/* The appointment picker overlays the off-canvas (z 200) — nudge it above regardless of DOM order. */
.mm-cmp__picker--appt { z-index: 260; }
/* Wishlist "Make a deposit" — same underlined text-link language as Remove (Dior: action links
   stacked bottom-right of the card), just a shade stronger since it's the primary action. */
.mm-wl__deposit { align-self: flex-end; font-family: var(--sans); font-size: clamp(.68rem, .75vw, .72rem); color: var(--ink); background: none; border: 0; padding: 0 0 2px; border-bottom: 1px solid var(--ink); cursor: pointer; transition: color .2s ease, border-color .2s ease; margin-top: clamp(8px, 1.2vh, 14px); }
.mm-wl__deposit:hover { color: var(--muted); border-color: var(--muted); }
.mm-wl__deposit + .mm-wl__remove { margin-top: clamp(4px, .6vh, 7px); }   /* tight stack under the deposit link */
/* Holding-deposit popup — the single listing page's deposit form in a centred Dior card. */
.mm-dpop { position: fixed; inset: 0; z-index: 270; display: flex; align-items: center; justify-content: center; padding: 24px; }
.mm-dpop[hidden] { display: none; }
.mm-dpop__backdrop { position: absolute; inset: 0; background: rgba(8,10,12,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mm-dpop__card { position: relative; z-index: 1; width: min(440px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 14px; padding: clamp(24px, 4vw, 34px); box-shadow: 0 40px 100px -28px rgba(20,22,24,.55); }
.mm-dpop__x { position: absolute; top: 12px; right: 14px; width: 34px; height: 34px; border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.mm-dpop__x:hover { background: var(--soft, #f4f5f6); color: var(--ink); }
.mm-dpop__car { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; color: var(--ink); margin: 0 0 8px; }
.mm-dpop__form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.mm-dpop .mm-lx__deposit-note { margin-top: 12px; }

/* ============================== Footer (.mm-footer) ============================== */
/* Dior carbon-clone: service-links row -> newsletter (left) + link columns (right) in one band
   -> bottom bar (socials left, wordmark centre, language chip right). Card on a grey frame. */
/* `footer.mm-footer` (type+class) outranks the chat widget's unscoped `.mm-footer` (widget.css ~L2481:
   `padding:10px 12px 0; background:var(--mm-bg)`), which otherwise leaks a 12px side gutter + bg. */
/* Near-full-width rounded card on a grey frame (~15px gap all round); radius matches the header off-canvas (6px). */
footer.mm-footer { font-family: var(--sans); margin: 0; max-width: none; color: var(--ink); background: #f0f0f0; padding: clamp(12px, 1.1vw, 16px); }
.mm-footer__wrap { max-width: none; margin: 0; background: #fff; border-radius: 6px; padding: clamp(8px, 1vw, 16px) clamp(26px, 3vw, 52px) clamp(16px, 1.8vw, 24px); }

/* ---- Service rows (Dior: horizontal row of 3, vertical hairline dividers) ---- */
.mm-footer__services { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line); }
.mm-footer__srow { position: relative; display: flex; align-items: center; gap: 18px; padding: 21px 34px; color: var(--ink); }
.mm-footer__srow::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 34px; background: var(--line); }
.mm-footer__srow:first-child { padding-left: 0; }
.mm-footer__srow:first-child::before { display: none; }
.mm-footer__srow:last-child { padding-right: 0; }
.mm-footer__srow:hover { opacity: 1; }
.mm-footer__srow-txt { flex: 1; min-width: 0; }
.mm-footer__srow-t { display: block; font-size: 13px; font-weight: 500; letter-spacing: .005em; margin-bottom: 2px; }
.mm-footer__srow-s { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.mm-footer__srow-chev { flex: 0 0 auto; color: var(--muted); display: inline-flex; transition: transform .25s ease, color .2s ease; }
.mm-footer__srow-chev svg { width: 22px; height: 22px; }
.mm-footer__srow:hover .mm-footer__srow-chev { transform: translateX(4px); color: var(--ink); }

/* ---- Main band: newsletter (left) + link columns (right, flush to the chevron edge) ---- */
.mm-footer__main { display: flex; justify-content: space-between; gap: clamp(40px, 5vw, 90px); align-items: flex-start; padding: clamp(40px, 4.5vw, 58px) 0; }
.mm-footer__sub { display: block; padding: 0; border: 0; flex: 0 1 380px; max-width: 400px; }
.mm-footer__sub-p { font-size: clamp(18px, 1.5vw, 22px); font-weight: 400; letter-spacing: .005em; margin: 0 0 22px; max-width: none; line-height: 1.3; }
.mm-footer__sub-form { display: flex; align-items: stretch; gap: 12px; width: 100%; }
.mm-footer__field { position: relative; flex: 1; min-width: 0; }
.mm-footer__field input { width: 100%; height: 48px; padding: 16px 0 4px; border: 0; border-bottom: 1px solid var(--line); background: none; font-family: var(--sans); font-size: 14px; color: var(--ink); outline: none; transition: border-color .2s ease; border-radius: 0; }
.mm-footer__field input:focus { border-bottom-color: var(--ink); }
.mm-footer__field label { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--muted); pointer-events: none; transition: .18s ease; letter-spacing: .01em; }
.mm-footer__field input:focus + label, .mm-footer__field input:not(:placeholder-shown) + label { top: 0; transform: translateY(0); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
/* Touch devices: >=16px stops iOS Safari auto-zooming on focus (desktop keeps the 14px look). */
@media (pointer: coarse) { .mm-footer__field input { font-size: 16px; } }
/* Kill the browser autofill yellow: mask it with the white card bg + keep ink text (Chrome + Safari). */
.mm-footer__field input:-webkit-autofill,
.mm-footer__field input:-webkit-autofill:hover,
.mm-footer__field input:-webkit-autofill:focus,
.mm-footer__field input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--ink);
  caret-color: var(--ink);
  transition: background-color 100000s ease 0s;
}
.mm-footer__sub-go { flex: 0 0 auto; border: 0; border-radius: 6px; background: var(--ink); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 0 28px; cursor: pointer; transition: opacity .2s ease; }
.mm-footer__sub-go:hover { opacity: .82; }
.mm-footer__sub-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mm-footer__sub-status { flex-basis: 100%; margin: 10px 0 0; font-size: 13px; letter-spacing: .01em; }
.mm-footer__sub-status.is-ok { color: #2e6b4f; }
.mm-footer__sub-status.is-err { color: #a3392f; }

/* ---- Link columns (right side of the band; content-width, flush to the card's right edge) ---- */
.mm-footer__cols { display: flex; gap: clamp(30px, 4vw, 68px); padding: 0; }
.mm-footer__col--nap { max-width: 260px; }
.mm-footer__col-head { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .01em; color: var(--ink); margin: 0 0 20px; display: flex; align-items: center; justify-content: space-between; background: none; border: 0; padding: 0; width: 100%; text-align: left; }
.mm-footer__col-chev { display: none; color: var(--muted); transition: transform .25s ease; }
.mm-footer__col-chev svg { width: 18px; height: 18px; }
.mm-footer__col-body ul { list-style: none; margin: 0; padding: 0; }
.mm-footer__col-body a { display: inline-block; font-size: 14px; color: var(--ink); padding: 7px 0; line-height: 1.4; letter-spacing: .01em; }
.mm-footer__col-body a:hover { opacity: .62; }

/* Visit column — NAP + reach (landline + email) */
.mm-footer__nap-addr { display: flex; gap: 10px; align-items: flex-start; color: var(--ink); font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
.mm-footer__nap-addr:hover { opacity: 1; color: var(--brand-blue); }
.mm-footer__nap-pin { flex: 0 0 auto; color: var(--muted); margin-top: 2px; }
.mm-footer__nap-pin svg { width: 18px; height: 18px; }
.mm-footer__nap-hours { color: var(--muted); font-size: 13px; margin: 0 0 18px; letter-spacing: .02em; }
.mm-footer__reach { display: flex; flex-direction: column; gap: 10px; }
.mm-footer__reach a { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--ink); letter-spacing: .01em; }
.mm-footer__reach a:hover { color: var(--brand-blue); opacity: 1; }
.mm-footer__reach-ic { flex: 0 0 auto; color: var(--muted); display: inline-flex; transition: color .2s ease; }
.mm-footer__reach a:hover .mm-footer__reach-ic { color: var(--brand-blue); }
.mm-footer__reach-ic svg { width: 17px; height: 17px; }

/* ---- Bottom bar (socials left + wordmark centre + language chip right; no divider above) ---- */
.mm-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 8px 0 0; }
.mm-footer__social { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 20px; }
.mm-footer__social-link { display: inline-flex; align-items: center; justify-content: center; transition: transform .2s ease, opacity .2s ease; }
.mm-footer__social-link:hover { opacity: .7; transform: translateY(-2px); }
.mm-footer__social-link svg { width: 18px; height: 18px; display: block; }

/* NARROW PHONES: 9 icons on one row is either clipped or cramped, so wrap to a balanced 5-over-4.
   (Heng 18/07 — Rednote was cut off at 375px, then a shrunken gap fixed the clipping but read as
   too tight.) Nine at 18px + 20px gaps needs 322px, and the grid cell is only ~288px at 375px.

   max-width is what FORCES the split: 5 icons = 5*18 + 4*20 = 170px, a 6th would need 208px, so
   capping at 178px guarantees exactly 5 per row at every width. Plain flex-wrap without this cap
   wraps by whatever happens to fit — 8+1 at 375px, 6+3 at 320px — i.e. a lopsided orphan row.
   justify-content:center then centres the 4 on row two under the 5 on row one.

   Breakpoint: the cell is roughly (viewport - 87px), so a comfortable 20px-gap row of 9 stops
   fitting below ~409px. 480px gives headroom and lands cleanly between phone and tablet. */
@media (max-width: 479px) {
  .mm-footer__social {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 178px;
    margin-inline: auto;
    /* row-gap > column-gap on purpose: with equal (or tighter) vertical spacing the two rows read
       as one dense block. Giving the rows more air than the columns lets each row group visually. */
    gap: 22px 20px;   /* row-gap column-gap */
  }
}
.mm-footer__bspacer { grid-column: 1; }
.mm-footer__wordmark { grid-column: 2; justify-self: center; display: inline-block; }
.mm-footer__wordmark:hover { opacity: .72; }
.mm-footer__wordmark img { height: 40px; width: auto; }
.mm-footer__lang { grid-column: 3; justify-self: end; display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); font-family: var(--sans); }
.mm-footer__lang-ic { color: var(--muted); display: inline-flex; }
.mm-footer__lang-ic svg { width: 17px; height: 17px; }
.mm-footer__lang-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.mm-footer__lang-val { font-size: 13.5px; color: var(--ink); }
.mm-footer__lang-chev { color: var(--muted); display: inline-flex; }
.mm-footer__lang-chev svg { width: 16px; height: 16px; }
.mm-footer__lang:hover .mm-footer__lang-val { opacity: .62; }

/* ---- Responsive: Dior-style mobile accordions ---- */
@media (max-width: 820px) {
  .mm-footer__cols { flex-direction: column; gap: 0; padding: 8px 0 24px; width: 100%; }   /* full-width so each accordion row spans the footer (heading left, chevron far right) instead of hugging a ~150px block on the left, leaving space on the right */
  .mm-footer__col { border-bottom: 1px solid var(--line); }
  .mm-footer__col--nap { border-bottom: 0; max-width: none; }
  .mm-footer__col-head { padding: 20px 0; margin: 0; }
  .mm-footer__col--acc .mm-footer__col-chev { display: inline-flex; }
  .mm-footer__col--acc .mm-footer__col-head { cursor: pointer; }
  .mm-footer__col--acc .mm-footer__col-body { display: none; padding-bottom: 12px; }
  .mm-footer__col--acc.is-open .mm-footer__col-body { display: block; }
  .mm-footer__col--acc.is-open .mm-footer__col-chev { transform: rotate(180deg); }
  .mm-footer__col--nap .mm-footer__col-body { padding: 0 0 24px; }
  .mm-footer__services { grid-template-columns: 1fr; }
  .mm-footer__srow { border-top: 1px solid var(--line); padding: 20px 0; }
  .mm-footer__srow::before { display: none; }
  .mm-footer__srow:first-child { border-top: 0; }
  .mm-footer__main { flex-direction: column; gap: clamp(20px, 3.5vw, 30px); padding: 30px 0; }
  .mm-footer__sub { flex: none; width: 100%; max-width: none; }   /* drop the 380px flex-basis — in the stacked column it became a forced 380px HEIGHT, leaving a huge empty gap above the link columns */
  .mm-footer__bottom { grid-template-columns: 1fr; justify-items: center; gap: 20px; }
  .mm-footer__social, .mm-footer__bspacer, .mm-footer__wordmark, .mm-footer__lang { grid-column: 1; justify-self: center; }
  /* Stack order (Heng directive): language switch on top, then socials, then the wordmark last. */
  .mm-footer__lang { order: 1; }
  .mm-footer__social, .mm-footer__bspacer { order: 2; margin-top: clamp(10px, 2.4vw, 18px); }   /* drop the socials a little further below the language row */
  .mm-footer__wordmark { order: 3; margin-top: clamp(16px, 4vw, 30px); }   /* extra breathing room between the socials and the logo */
}

/* ---- Responsive: tablet (821–1200px) — Dior-style stacked structure ----
   The desktop main band puts the newsletter (380px) BESIDE the four link columns, which crams them
   into ~490px between 821–1200px. Stack the newsletter as its own CTA strip on top, then CENTRE
   both it and the link sections below — MM Carz has fewer links than Dior, so a full single-column
   stack would look sparse/tall; centring the whole main block balances the extra width instead.
   Content is unchanged — structure only. (≤820px already fully stacks + accordions for phones;
   ≥1201px keeps the desktop side-by-side.) */
@media (min-width: 821px) and (max-width: 1200px) {
  .mm-footer__main { flex-direction: column; gap: clamp(34px, 4vw, 52px); align-items: center; }
  .mm-footer__sub { flex: none; width: 100%; max-width: 560px; }
  .mm-footer__cols { justify-content: center; gap: clamp(48px, 6vw, 88px); }
}

/* ============================== FAQ page (/faq/) — Dior faq-couture ============================== */
/* Centred hero, sticky left category rail, hairline-divided <details> accordions, contact band. */
.mm-faqpage { background: var(--bg); }

.mm-faqpage__hero { padding: clamp(56px, 8vw, 96px) 0 clamp(20px, 3.5vw, 40px); text-align: center; }
.mm-faqpage__eyebrow { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--muted); margin-bottom: 16px; }
.mm-faqpage__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.02em; margin: 0 auto .35em; }
.mm-faqpage__lead { max-width: 56ch; margin: 0 auto; color: var(--muted); font-size: 15px; line-height: 1.7; }

.mm-faqpage__body { display: grid; grid-template-columns: 230px 1fr; gap: clamp(40px, 6vw, 110px); padding-block: clamp(44px, 6vw, 84px); align-items: start; }

/* Sticky category rail */
.mm-faqpage__nav { position: sticky; top: 88px; }
.mm-faqpage__nav-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--muted); margin: 0 0 12px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
.mm-faqpage__nav ul { list-style: none; margin: 0 0 34px; padding: 0 0 13px; border-bottom: 1px solid var(--line); }
.mm-faqpage__navlink { display: block; padding: 7px 0; font-size: 13.5px; color: var(--muted); transition: color .2s ease, padding .2s ease; }
.mm-faqpage__navlink:hover { color: var(--ink); opacity: 1; padding-left: 4px; }
.mm-faqpage__navlink.is-active { color: var(--ink); font-weight: 600; }
.mm-faqpage__navcta p { font-size: 13px; color: var(--muted); margin: 0 0 7px; }
.mm-faqpage__navcta-link { font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; }
.mm-faqpage__navcta-link:hover { color: var(--brand-blue); border-color: var(--brand-blue); opacity: 1; }

/* Q&A groups */
.mm-faqpage__group { margin-bottom: clamp(40px, 5vw, 64px); scroll-margin-top: 84px; }
.mm-faqpage__group:last-child { margin-bottom: 0; }
/* Dior FAQ scale — small uppercase-bold section headers + questions, compact sentence-case answers. */
.mm-faqpage__grouptitle { font-family: var(--sans); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); margin: 0; padding-bottom: 13px; border-bottom: 1px solid var(--line); }
/* Laid-out (non-accordion) Q&A: question heading + always-visible answer, no dividers between items. */
.mm-faqpage__q { margin: 0; padding: 16px 0 7px; font-family: var(--sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink); }
.mm-faqpage__a { padding: 0 0 18px; max-width: 72ch; }
.mm-faqpage__a p { margin: 0; color: #5b6066; font-size: 13px; line-height: 1.7; }

/* Contact band */
.mm-faqpage__contact { background: var(--bg-soft); border-top: 1px solid var(--line); text-align: center; padding-block: clamp(52px, 8vw, 96px); }
.mm-faqpage__contact-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 0 0 .3em; }
.mm-faqpage__contact-lead { color: var(--muted); margin: 0 0 28px; }
.mm-faqpage__contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mm-faqpage__contact-actions .btn { border-radius: 6px; }

/* Responsive: rail becomes a pill row above the questions */
@media (max-width: 860px) {
  .mm-faqpage__body { grid-template-columns: 1fr; gap: 0; }
  .mm-faqpage__nav { position: static; margin-bottom: 36px; }
  .mm-faqpage__nav-head { display: none; }
  .mm-faqpage__nav ul { display: flex; flex-wrap: wrap; gap: 9px 10px; margin-bottom: 22px; }
  .mm-faqpage__navlink { border: 1px solid var(--line); border-radius: 999px; padding: 8px 17px; font-size: 13px; }
  .mm-faqpage__navlink:hover { padding-left: 17px; }
  .mm-faqpage__navlink.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
}

/* ============================== Legal / Privacy page ============================== */
/* Dior personal-data treatment: small bold uppercase section labels + compact prose, sticky rail.
   Sibling of the FAQ page (templates/privacy.php, routed via mmcarz-core/route-privacy.php). */
.mm-legal { padding-bottom: clamp(48px, 8vw, 96px); }

.mm-legal__hero { padding-block: clamp(34px, 5vw, 64px) clamp(22px, 3vw, 36px); }
.mm-legal__eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--muted); margin: 0 0 16px; }
.mm-legal__title { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; line-height: 1.08; font-size: clamp(1.9rem, 3.4vw, 2.4rem); margin: 0; color: var(--ink); }
.mm-legal__lead { color: var(--muted); font-size: 14px; line-height: 1.7; max-width: 58ch; margin: 18px 0 0; }

/* Body — sticky section rail + prose column */
.mm-legal__body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.mm-legal__nav { position: sticky; top: 92px; }
.mm-legal__nav-head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--muted); margin: 0 0 16px; }
.mm-legal__nav ul { list-style: none; margin: 0; padding: 0; }
.mm-legal__navlink { display: flex; align-items: baseline; gap: 11px; padding: 8px 0; font-size: 13px; color: var(--muted); opacity: 1; transition: color .2s ease; }
.mm-legal__navlink:hover { color: var(--ink); opacity: 1; }
.mm-legal__navlink.is-active { color: var(--ink); }
.mm-legal__navnum { font-size: 11px; letter-spacing: .04em; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

.mm-legal__main { min-width: 0; max-width: 680px; }
.mm-legal__sec { padding-block: clamp(28px, 3.2vw, 44px); border-top: 1px solid var(--line); scroll-margin-top: 88px; }
.mm-legal__sec:first-child { border-top: 0; padding-top: 0; }
.mm-legal__sec h2 { font-family: var(--sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.085em; font-size: 13px; line-height: 1.4; margin: 0 0 16px; color: var(--ink); }
.mm-legal__sec p { margin: 0 0 15px; line-height: 1.7; font-size: 14px; color: var(--text); }
.mm-legal__sec p:last-child { margin-bottom: 0; }
.mm-legal__sec a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.mm-legal__sec a:hover { opacity: .62; }

.mm-legal__list { list-style: none; margin: 0 0 16px; padding: 0; }
.mm-legal__list li { position: relative; padding-left: 24px; margin: 0 0 9px; line-height: 1.6; font-size: 14px; }
.mm-legal__list li::before { content: ""; position: absolute; left: 0; top: .8em; width: 12px; height: 1px; background: var(--muted); }

.mm-legal__contact { font-size: 14px; line-height: 1.85; color: var(--text); margin: 2px 0 0; }
.mm-legal__role { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.085em; color: var(--ink); margin: 0 0 12px; }
.mm-legal__contact a { text-decoration: underline; text-underline-offset: 3px; }

.mm-legal__note { margin-top: clamp(30px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); line-height: 1.7; }

@media (max-width: 860px) {
  .mm-legal__body { grid-template-columns: 1fr; gap: 0; }
  .mm-legal__nav { position: static; margin-bottom: 30px; }
  .mm-legal__nav-head { display: none; }
  .mm-legal__nav ul { display: flex; flex-wrap: wrap; gap: 8px 9px; }
  .mm-legal__navlink { border: 1px solid var(--line); border-radius: 999px; padding: 8px 15px; font-size: 13px; }
  .mm-legal__navlink .mm-legal__navnum { display: none; }
  .mm-legal__navlink.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
}

/* ============================================================================
   Insights hub (/insights/) — Hanamaru home LAYOUT cloned in Dior: top-left
   category filter pills, a left sidebar (Trending widget + subscribe + socials
   + copyright), and a 3-col feed grid (4-col when the sidebar is collapsed via
   the insights-only header hamburger). Single-article view = .mm-article below.
   ============================================================================ */
.mm-yt {
  --mm-yt-h: 58px;          /* fixed site header height (body:not(.home) padding-top) */
  --mm-yt-side: 248px;      /* expanded sidebar */
  --mm-yt-rail: 76px;       /* collapsed icon rail */
  display: grid;
  grid-template-columns: var(--mm-yt-side) minmax(0, 1fr);
  align-items: start;
}
.mm-yt.is-rail { grid-template-columns: var(--mm-yt-rail) minmax(0, 1fr); }   /* collapsed -> icon rail + 4-col grid */

/* --- Header hamburger (insights only, left of the logo, aligned with the Trending icon) --- */
.mm-logo-group { display: flex; align-items: center; gap: 12px; justify-self: start; }
.mm-site-header--insights { padding-left: 19px; }   /* match the sticky bar: hamburger centre on the rail icon (38px) */
.mm-ins-burger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; border-radius: 50%; transition: background .2s ease; }
.mm-ins-burger:hover { background: rgba(255,255,255,.16); opacity: 1; }
.mm-ins-burger svg { width: 22px; height: 22px; }

/* --- Sidebar --- */
.mm-yt__side {
  position: sticky; top: var(--mm-yt-h); align-self: start;
  height: calc(100vh - var(--mm-yt-h));
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  scrollbar-width: thin;                      /* Hanamaru clone (C:\Hanamaru-Website components.css .sidebar): */
  scrollbar-color: transparent transparent;   /* standard props -> Chrome uses the NATIVE thin bar (composited, */
}                                             /* no custom-paint lag); `thin` has no arrow buttons on Windows.  */
.mm-yt__side:hover { scrollbar-color: rgba(20, 22, 24, .25) transparent; }   /* hover anywhere in the sidebar reveals it */
/* webkit-pseudo fallback for engines that ignore the standard props (older Chrome/Safari) */
.mm-yt__side::-webkit-scrollbar { width: 4px; }
.mm-yt__side::-webkit-scrollbar-track { background: transparent; }
.mm-yt__side::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; }
.mm-yt__side:hover::-webkit-scrollbar-thumb { background: rgba(20, 22, 24, .25); }
.mm-yt__side-inner { flex: 1; padding: clamp(14px, 1.8vw, 22px) 14px 14px; display: flex; flex-direction: column; gap: 22px; }   /* top pad matches the content's, so the Your-Library bar sits on the same row as the pills */
.mm-yt__fineprint { margin-top: auto; padding-top: 16px; font-size: 11px; color: var(--muted); line-height: 1.5; }   /* flush to the very bottom */

/* Collapsed icon rail (Trending + Library) — shown only in .is-rail */
.mm-yt__rail { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px; }
.mm-yt.is-rail .mm-yt__rail { display: flex; }
.mm-yt.is-rail .mm-yt__side-inner { display: none; }
.mm-yt__railitem { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 62px; padding: 11px 2px; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 12px; font-family: var(--sans); font-size: 10px; font-weight: 500; text-decoration: none; transition: background .18s ease; }
.mm-yt__railitem:hover { background: var(--bg-soft); opacity: 1; }
.mm-yt__railitem svg { width: 22px; height: 22px; }

/* Trending widget — vertical mini-cards (bigger thumb, title + views below) with a chart-style
   rank number in a left gutter, centred against the thumbnail. CSS counters follow DOM order, so
   the ranks renumber themselves when the Daily/Weekly/Monthly tabs re-sort the list. */
.mm-yt-trend__head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); margin: 0 0 12px; }
.mm-yt-trend__flame { display: inline-flex; color: #e2683b; }
.mm-yt-trend__flame svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.mm-yt-trend__tabs { display: flex; gap: 16px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.mm-yt-trend__tab { background: none; border: 0; padding: 0 0 9px; margin-bottom: -1px; font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.mm-yt-trend__tab:hover { color: var(--ink); opacity: 1; }
.mm-yt-trend__tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.mm-yt-trend__list { display: flex; flex-direction: column; gap: 16px; counter-reset: mmtrend; }
.mm-yt-trend__item { display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 9px; color: var(--ink); counter-increment: mmtrend; }
.mm-yt-trend__item::before { content: counter(mmtrend); grid-column: 1; grid-row: 1; align-self: center; justify-self: center;
  font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-yt-trend__item > * { grid-column: 2; }
.mm-yt-trend__item:hover { opacity: 1; }
.mm-yt-trend__item:hover .mm-yt-trend__title { color: var(--brand-blue); }
.mm-yt-trend__thumb { position: relative; grid-row: 1; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: var(--bg-soft); }
.mm-yt-trend__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mm-yt-trend__item:hover .mm-yt-trend__thumb img { transform: scale(1.04); }
.mm-yt-trend__badge { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 5px; background: rgba(20,22,24,.82); color: #fff; font-size: 10px; font-weight: 600; }
.mm-yt-trend__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13px; line-height: 1.34; font-weight: 600; margin-top: 8px; }
.mm-yt-trend__views { display: block; font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* Subscribe block */
.mm-yt-sub { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; }
.mm-yt-sub__title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.mm-yt-sub__sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
.mm-yt-sub__field { margin-bottom: 10px; }
.mm-yt-sub__input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 8px 2px; font-family: var(--sans); font-size: 13.5px; color: var(--ink); }
.mm-yt-sub__input:focus { outline: none; border-bottom-color: var(--ink); }
.mm-yt-sub__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mm-yt-sub__btn { align-self: flex-start; font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: #fff; background: var(--brand-blue); border: 0; border-radius: 8px; padding: 11px 22px; cursor: pointer; transition: opacity .2s ease; }
.mm-yt-sub__btn:hover { opacity: .88; }
.mm-yt-sub__ok { font-size: 12.5px; color: #2f7d6b; margin: 12px 0 0; }
.mm-yt-sub__ok[hidden] { display: none; }
/* Error state for every insights capture note. These elements hard-coded the success green, so
   before 06/08/2026 a failure ("Something went wrong") was drawn in the colour that means it
   worked. The shared handler (mmcarz_subscribe_js) toggles .is-err / .is-ok on all of them. */
.mm-yt-sub__ok.is-err,
.mm-insdrawer__sub-ok.is-err,
.mm-article__sub .mm-yt-sub__ok.is-err { color: #a3392f; }

/* Socials — small, muted, 2 even rows of 4 (icons single-sourced from the footer) */
.mm-yt-soc { border-top: 1px solid var(--line); padding-top: 18px; }
.mm-yt-soc__head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--muted); margin: 0 0 12px; text-align: center; }
.mm-yt-soc__row { display: grid; grid-template-columns: repeat(4, max-content); gap: 18px 26px; justify-content: center; }
/* An icon left ALONE on the final row sits in column 1, because justify-content centres the whole
   grid, not an orphan within its own row — so with 9 socials Rednote hung off to the left (measured:
   its centre 59px vs the row's 119px). Span it across all four columns and centre it there.
   :nth-child(4n+1):last-child is deliberately narrow — it means "starts a row AND is the last icon",
   i.e. alone. Add a 10th social and this stops applying by itself, which is the point: a blunt
   :last-child rule would then yank a normally-placed icon into the middle. */
.mm-yt-soc__row a:nth-child(4n+1):last-child { grid-column: 1 / -1; justify-self: center; }
.mm-yt-soc__row a { display: inline-flex; }   /* colour comes from the inline brand colour (same as footer) */
.mm-yt-soc__row a:hover { opacity: .7; }
.mm-yt-soc__row svg { width: 14px; height: 14px; display: block; }

/* --- Content --- */
.mm-yt__content { min-width: 0; padding: clamp(14px, 1.8vw, 22px) clamp(12px, 1.4vw, 22px) clamp(60px, 8vw, 110px); }
/* Phone portrait: the clamp bottoms out at 14px, leaving the topic pills tighter to the header
   (14px) than to the feed below them (20px). Match the pills' 20px bottom gap for an even rhythm. */
@media (orientation: portrait) and (max-width: 599px) { .mm-yt__content { padding-top: 20px; } }

/* Top-left category filter pills (small) */
.mm-yt__pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.mm-yt__pill { font-family: var(--sans); font-size: 12px; font-weight: 500; color: var(--ink); background: var(--bg-soft); border: 1px solid transparent; border-radius: 999px; padding: 7px 14px; cursor: pointer; transition: background .18s ease, color .18s ease; white-space: nowrap; }
.mm-yt__pill:hover { background: var(--cream); opacity: 1; }
.mm-yt__pill.is-active { background: var(--ink); color: #fff; }

.mm-yt__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px 16px; }
.mm-yt.is-rail .mm-yt__grid { grid-template-columns: repeat(4, 1fr); }
.mm-yt__grid[hidden] { display: none; }

/* --- YouTube-style card (Hanamaru hover = soft category-colour wash + glow) --- */
.mm-yt-card { display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: 16px; transition: background-color .2s ease, box-shadow .2s ease, padding .2s ease, margin .2s ease; }
.mm-yt-card[hidden] { display: none; }
/* Hover aura grows into the gap (Hanamaru technique) so it almost touches the neighbouring card. */
.mm-yt-card:hover { position: relative; z-index: 1; padding: 14px; margin: -6px; background-color: color-mix(in srgb, var(--cat, var(--ink)) 13%, #fff); box-shadow: 0 18px 42px -18px color-mix(in srgb, var(--cat, var(--ink)) 66%, transparent); }
.mm-yt-card__thumb { position: relative; display: block; overflow: hidden; border-radius: 12px; aspect-ratio: 16 / 9; background: var(--bg-soft); }
/* Whole-photo tiles. object-fit:cover chopped every hero that isn't 16:9 — the blog mixes 1920x1080
   with 4:3, square and even portrait art (a 1080x1272 hero lost 52% of itself). So: CONTAIN the photo
   and fill the leftover with a blurred, scaled copy of itself (--thumb, set inline per card). The 16:9
   heroes are unaffected — at matching aspect contain == cover, and the backdrop is fully covered. */
.mm-yt-card__thumb::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--thumb); background-size: cover; background-position: center;
  filter: blur(22px) saturate(1.25); transform: scale(1.18); }
.mm-yt-card__thumb img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
/* Landscape + square heroes COVER the 16:9 tile instead of sitting in blurred bars (JS adds .is-fill
   from the photo's real dimensions). Only genuinely PORTRAIT art keeps the contain + blurred fill,
   where a cover crop would gut it (the 1080x1272 hero loses 52%). */
.mm-yt-card__thumb.is-fill img { object-fit: cover; }
.mm-yt-card__thumb.is-fill::before { display: none; }
.mm-yt-card:hover .mm-yt-card__thumb img { transform: scale(1.05); }
.mm-yt-card__badge { position: absolute; right: 8px; bottom: 8px; z-index: 3; padding: 3px 7px; border-radius: 6px; background: rgba(20,22,24,.82); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .02em; transition: opacity .3s ease; }
/* Hide the "N min read" badge while the excerpt veil/preview is showing (hover on desktop, is-previewing
   on the feed) so the badge doesn't clash with the overlay text. */
.mm-yt-card__thumb:hover .mm-yt-card__badge,
.mm-yt--feed .mm-yt-card.is-previewing .mm-yt-card__badge { opacity: 0; }
/* Hover preview veil (excerpt) */
.mm-yt-card__veil { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; padding: 14px; background: linear-gradient(to top, rgba(20,22,24,.86), rgba(20,22,24,.18) 62%, transparent); opacity: 0; transition: opacity .28s ease; }
.mm-yt-card__thumb:hover .mm-yt-card__veil { opacity: 1; }
.mm-yt-card__veil-text { color: #fff; font-size: 12.5px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.mm-yt-card__foot { position: relative; display: flex; gap: 12px; padding: 12px 2px 2px; }
.mm-yt-card__av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--cat, var(--ink)); color: #fff; }
.mm-yt-card__av svg { width: 19px; height: 19px; stroke-width: 1.7; }
.mm-yt-card__info { min-width: 0; flex: 1; }
.mm-yt-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.34; margin: 0 0 5px; }
.mm-yt-card__title a { color: var(--ink); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.mm-yt-card__title a:hover { opacity: 1; color: var(--brand-blue); }
.mm-yt-card__meta { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.mm-yt-card__meta span[aria-hidden] { opacity: .55; margin: 0 5px; }
/* Kebab (always visible) */
.mm-yt-card__kebab { flex: 0 0 auto; width: 30px; height: 30px; margin: -3px -4px 0 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease; }
.mm-yt-card__kebab:hover { background: var(--bg-soft); color: var(--ink); }
.mm-yt-card__kebab svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
/* Open the menu just below the kebab (kebab bottom sits ~39px from the foot top), not down at the
   foot's bottom edge — the old calc(100% - 2px) left a large gap between the kebab and its dropdown. */
.mm-yt-card__menu { position: absolute; right: 0; top: 40px; z-index: 200; min-width: 168px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(20,22,24,.28); }   /* z above the site header (100) + reading bar (130) — the JS opens this position:fixed, and at z:20 any menu near the top of the screen was painted OVER by the bars (read as "chopped") */
.mm-yt-card__menu[hidden] { display: none; }
.mm-yt-card__menu-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 11px; border-radius: 7px; font-family: var(--sans); font-size: 13px; text-align: left; color: var(--ink); cursor: pointer; }
.mm-yt-card__menu-item:hover { background: var(--bg-soft); opacity: 1; }
.mm-yt-card__menu-item svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }

.mm-yt__empty, .mm-yt__none { text-align: center; padding: clamp(50px, 9vw, 120px) 0; color: var(--muted); }
.mm-yt__empty h2 { font-weight: 400; margin-bottom: .4em; color: var(--ink); }
.mm-yt__none[hidden] { display: none; }

/* --- Responsive --- */
@media (max-width: 1200px) {
  .mm-yt__grid { grid-template-columns: repeat(2, 1fr); }
  .mm-yt.is-rail .mm-yt__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .mm-yt, .mm-yt.is-rail { grid-template-columns: 1fr; }
  .mm-yt__side { display: none; }
  .mm-ins-burger { display: none; }
  .mm-yt__pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mm-yt__pills::-webkit-scrollbar { display: none; }
  .mm-yt__grid, .mm-yt.is-rail .mm-yt__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Insights bottom tab bar — Hanamaru clone (fixed, frosted glass, icon + tiny label per tab).
   Tablet LANDSCAPE only (the shape gate used across the theme): the sidebar/rail is hidden there,
   so Home / Trending / Library move to this bar instead. */
.mm-yt-bottnav { position: fixed; left: 0; right: 0; bottom: var(--mm-vvfix, 0px); z-index: 1000; display: none; align-items: stretch;
  height: calc(56px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(20, 22, 24, .07); }
.mm-yt-bottnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .02em; text-decoration: none; }
.mm-yt-bottnav a svg { width: 22px; height: 22px; }
.mm-yt-bottnav a.is-active { color: var(--blue, #0266b1); }
/* Scroll-aware variant (single post): slides off-screen on scroll down, back on scroll up (JS toggles
   .is-hidden). translateY includes the safe-area so no sliver stays visible on notched phones. */
.mm-yt-bottnav--auto { transition: transform .32s cubic-bezier(.2, .7, .2, 1); }
.mm-yt-bottnav--auto.is-hidden { transform: translateY(calc(100% + env(safe-area-inset-bottom, 0px))); }
/* Shown on every touch form factor. Desktop/laptop keep the sidebar.
   🚨 `(any-pointer: coarse) and (max-width: 1440px)` — ONE clause, no shape and no orientation — is
   what makes every touch device agree with itself and with every other browser on it. Heng
   08/08/2026: "safari is missing bottom bar, chrome has no side bar so safari should follow as
   well, so the scroll issue won't be an issue." Three separate ways the old gate split devices, all
   fixed by this clause:
     1. SHAPE flips mid-scroll. The Safari toolbar changes the viewport HEIGHT, so it changes the
        aspect ratio: an iPad mini landscape is 1133x744 = 1.523 (misses 3/2 -> sidebar) and
        1133x804 = 1.409 the moment the toolbar retracts (hits it -> sidebar display:none).
        Measured: the sidebar's rect went 0x0 and back as you scroll. That is the "broken, not
        consistent".
     2. SHAPE splits the two browsers ON ONE iPad. Safari reports the layout viewport, Chrome iOS
        reports its VISUAL viewport (shorter, so a higher aspect), so the same device lands either
        side of a 3/2 gate depending on which browser is open — already recorded against the
        retired tablet-landscape stack near line 3040. That is "safari missing the bottom bar
        while chrome has no sidebar".
     3. `pointer: coarse` is FALSE on an iPad with a trackpad keyboard — iPadOS then reports a fine
        primary pointer — so the coarse twin added on 07/08 could still miss the very device it was
        written for. `any-pointer: coarse` asks "is there a touchscreen at all", which is the actual
        question and cannot be changed by an accessory or by browser chrome.
   The width ceiling is 1440, not 1366: an iPad Pro 13" (M4) is 1376 CSS px in landscape and 1032 in
   portrait, so BOTH of its orientations fell through the old 1366/1024 ceilings and it showed the
   sidebar in every browser.
   The old shape clause stays: it costs nothing and keeps the tablet layout previewable in a
   responsive viewer, which cannot emulate touch. */
@media (any-pointer: coarse) and (max-width: 1440px),
       (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio: 3/2),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: landscape) and (max-height: 500px) {
  .mm-yt-bottnav { display: flex; }
  .mm-yt__side { display: none; }                                   /* larger tablet-landscape widths (1025-1366) still show the sidebar otherwise */
  .mm-yt, .mm-yt.is-rail { grid-template-columns: 1fr; }
  .mm-yt { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }   /* keep the feed clear of the fixed bar */
  .mm-article { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }   /* single post: comments end clears the (scroll-aware) bar */
  /* Lift the Michi orb above the fixed bottom bar on any insights page that shows it, so it can't cover
     the bar (the widget locks bottom:16px inline, so we shift with transform). Heng. */
  body:has(.mm-yt-bottnav) #mm-chat-fab { transform: translateY(calc(-56px - env(safe-area-inset-bottom, 0px))) !important; }
}
@media (max-width: 560px) {
  .mm-yt__grid, .mm-yt.is-rail .mm-yt__grid { grid-template-columns: 1fr; gap: 26px; }

  /* Hanamaru full-bleed feed — hub + Trending only (.mm-yt--feed): immersive edge-to-edge cards with a
     big thumbnail; the excerpt "veil" preview is revealed by SCROLL (no hover on touch) — the card whose
     thumbnail sits in the vertical centre of the viewport gets .is-previewing (mmcarz_insight_cards_js).
     Library / List keep the standard single-column cards above. */
  .mm-yt--feed .mm-yt__content { padding-left: 0; padding-right: 0; }
  .mm-yt--feed .mm-yt__pills, .mm-yt--feed .mm-trend-tabbar { margin-left: 16px; margin-right: 16px; }
  .mm-yt--feed .mm-yt__grid { gap: 14px; }
  .mm-yt--feed .mm-yt-card { padding: 0; border-radius: 0; }
  .mm-yt--feed .mm-yt-card:hover { padding: 0; margin: 0; background: none; box-shadow: none; }   /* no desktop hover aura on touch */
  .mm-yt--feed .mm-yt-card__thumb { border-radius: 0; aspect-ratio: auto; }               /* natural aspect — the 4/3 crop chopped the 16:9 feature images (Heng) */
  .mm-yt--feed .mm-yt-card__thumb img { height: auto; object-fit: unset; }                 /* full photo, uncropped */
  .mm-yt--feed .mm-yt-card__veil { transition: opacity .4s ease; }
  .mm-yt--feed .mm-yt-card.is-previewing .mm-yt-card__veil { opacity: 1; }
  .mm-yt--feed .mm-yt-card__foot { padding: 13px 16px 6px; }
}

/* iPhone portrait — Library sections become a horizontal swipe rail showing 2 cards at a time
   (like Hanamaru's library), instead of the 1-up stack. Each section's previews scroll across with
   scroll-snap; the 3rd+ cards sit off-screen to the right. Scoped to .mm-lib__grid so the hub feed
   keeps its own single-column layout. */
@media (max-width: 560px) and (orientation: portrait) {
  .mm-lib__grid {
    display: grid; grid-auto-flow: column;
    grid-auto-columns: calc((100% - 16px) / 2); grid-template-columns: none;
    gap: 16px; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    padding-bottom: 8px; scrollbar-width: none;
  }
  .mm-lib__grid::-webkit-scrollbar { display: none; }
  .mm-lib__grid .mm-yt-card { scroll-snap-align: start; min-width: 0; }
}

/* ============================================================================
   Single insight article (/insights/{slug}/) — Dior reading view (Hanamaru post).
   ============================================================================ */
.mm-article { --article-maxw: 2100px; --pad: clamp(24px, 4vw, 75px); padding-bottom: clamp(60px, 9vw, 120px); }
/* Wide content cap + ~75px side padding on desktop so the hero image, body and comments sit inset
   from the viewport edges. The RIGHT padding subtracts the scrollbar width (100vw - 100%) so the
   gap from the scrollbar to the comments matches the left gap, not ~95px. */
.mm-article__wrap { width: 100%; max-width: var(--article-maxw); margin: 0 auto; padding-left: var(--pad); padding-right: max(20px, calc(var(--pad) - (100vw - 100%) + 30px)); }
/* Mobile portrait: the body column extends wider, Hanamaru-style (20px gutters) — the base right-pad
   formula compensates desktop scrollbars and leaves ~54px dead space on phones. Text stays left-aligned. */
@media (orientation: portrait) and (max-width: 767px) {
  .mm-article__wrap { padding-left: 20px; padding-right: 20px; }
}

/* Hero band: a tint radial (--pillar, sampled from the feature image by JS) that fades to white. The
   tint is now clearly visible — a stronger colour-mix and a lighter white wash than before. */
.mm-article__hero { margin-top: 0; padding: clamp(24px, 3vw, 44px) 0 clamp(20px, 2.4vw, 32px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 74%, var(--bg) 100%),
    radial-gradient(130% 160% at 12% -10%,
      color-mix(in srgb, var(--pillar, var(--brand-blue)) 42%, #fff) 0%,
      color-mix(in srgb, var(--pillar, var(--brand-blue)) 20%, #fff) 52%,
      color-mix(in srgb, var(--pillar, var(--brand-blue)) 7%, #fff) 100%); }
.mm-article__hero-inner { display: grid; grid-template-columns: minmax(0, 1024px) minmax(320px, 1fr); gap: clamp(40px, 4.5vw, 88px); align-items: center; }
@media (max-width: 900px) { .mm-article__hero-inner { grid-template-columns: 1fr; gap: 22px; } }
.mm-article__cat { display: inline-block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--brand-blue); margin-bottom: 16px; }
.mm-article__cat:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.mm-article__title { font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 500; line-height: 1.24; letter-spacing: -0.015em; margin: 0 0 16px; }
.mm-article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); }
.mm-article__meta span[aria-hidden] { opacity: .5; }
.mm-article__cover { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: var(--bg-soft); aspect-ratio: 1.9 / 1; box-shadow: 0 24px 60px -30px rgba(20,22,24,.44); }
/* Shape-aware: a LANDSCAPE photo just fills the tile (.is-fill, set by JS from naturalWidth/Height) —
   the crop is shallow and it reads cleaner than bars. Only square/portrait art gets the whole-photo
   treatment (contain over a blurred copy of itself), because a cover crop would gut it — the portrait
   1080x1272 hero lost 55% to the 1.9:1 box. */
.mm-article__cover::before { content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--thumb); background-size: cover; background-position: center;
  filter: blur(26px) saturate(1.25); transform: scale(1.18); }
.mm-article__cover img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; }
.mm-article__cover.is-fill img { object-fit: cover; }
.mm-article__cover.is-fill::before { display: none; }
.mm-article__cover.is-empty { background: color-mix(in srgb, var(--pillar, var(--brand-blue)) 12%, var(--bg-soft)); }
/* Phone portrait: the hero image runs FULL-BLEED edge-to-edge (escapes the 20px wrap gutters) at its
   natural aspect — same treatment as the related cards + hub feed thumbs. */
@media (orientation: portrait) and (max-width: 599px) {
  .mm-article__cover { margin-left: -20px; margin-right: -20px; border-radius: 0; aspect-ratio: auto; box-shadow: none; }
  .mm-article__cover.is-empty { aspect-ratio: 1.9 / 1; }               /* imageless placeholder keeps its band */
  .mm-article__cover img { height: auto; object-fit: unset; }
}

/* Action bar: centered pill toolbar between the hero and the article body (no divider line). Each
   button shows its icon, with the count inline to its right when > 0. */
.mm-article__actionbar-wrap { }
.mm-article__actionbar { max-width: var(--article-maxw); margin: 0 auto; padding: 6px clamp(16px, 1.8vw, 36px) 14px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.mm-article__act { position: relative; height: 40px; min-width: 40px; padding: 0 11px; border: 0; background: none; border-radius: 20px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .18s ease, color .18s ease; }
.mm-article__act:hover { background: var(--bg-soft); color: var(--ink); }
.mm-article__act svg { width: 20px; height: 20px; }
.mm-article__act.is-on { color: var(--brand-red); }
.mm-article__act.is-on svg { fill: currentColor; stroke: currentColor; }
.mm-article__act[data-act="bookmark"].is-on { color: var(--brand-blue); }
.mm-article__act--text { font-family: var(--sans); font-weight: 600; font-size: 15px; }
.mm-article__act--text small { font-size: 11px; }
.mm-article__act-count { font-size: 12.5px; font-weight: 600; color: inherit; font-variant-numeric: tabular-nums; }
.mm-article__act-count[hidden] { display: none; }
.mm-article__act.is-copied::after { content: "Link copied"; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 6px; white-space: nowrap; z-index: 6; }

/* Body + right rail — WIDE two-column read (article main + comments rail). */
.mm-article__columns { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: clamp(48px, 8vw, 145px); align-items: start; padding-top: clamp(34px, 4vw, 56px); }
/* Phone portrait: even out the action bar's breathing room — the bar sat 26px under the meta line
   but 48px above the body (14px bar padding + the 34px columns padding). 12px here makes it
   26px/26px, pulling the body up to match. */
@media (orientation: portrait) and (max-width: 599px) { .mm-article__columns { padding-top: 12px; } }
@media (max-width: 1180px) { .mm-article__columns { grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(40px, 5vw, 80px); } }
@media (max-width: 1024px) { .mm-article__columns { grid-template-columns: 1fr; gap: clamp(44px, 6vw, 64px); } }
/* Tablet landscape (shape gate): keep the laptop 2-column article format (Hanamaru single-post) —
   body left, comments rail right — instead of the ≤1024 single-column stack. Placed after the stack
   rule so it wins at 901-1024 landscape. */
@media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio: 3/2),
       (min-width: 901px) and (max-width: 1440px) and (orientation: landscape) and (any-pointer: coarse) {
  .mm-article__columns { grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 4vw, 64px); }
}
.mm-article__main { min-width: 0; max-width: 1100px; }
@media (min-width: 1600px) { .mm-article__main { max-width: none; } }   /* fill the column so the body<->comments gap stays the 145px grid gap, not padded out by a cap */
.mm-article__body { font-size: 15.5px; line-height: 1.74; color: var(--ink); }
.mm-article__body.is-lg { font-size: 17px; line-height: 1.76; }
.mm-article__body.is-xl { font-size: 19px; line-height: 1.8; }
.mm-article__body > p { margin: 0 0 1.3em; }
.mm-article__body h2 { font-family: var(--serif); font-size: clamp(1.2rem, 1.9vw, 1.5rem); font-weight: 400; letter-spacing: -0.01em; line-height: 1.28; margin: 1.7em 0 .55em; }
.mm-article__body h3 { font-family: var(--serif); font-size: clamp(1.05rem, 1.5vw, 1.22rem); font-weight: 500; margin: 1.5em 0 .5em; }
.mm-article__body h4 { font-size: .98rem; font-weight: 700; margin: 1.4em 0 .4em; }
.mm-article__body ul, .mm-article__body ol { margin: 0 0 1.35em; padding-left: 1.3em; }
.mm-article__body li { margin: 0 0 .5em; }
.mm-article__body a { color: var(--brand-blue); text-decoration: underline; text-underline-offset: 2px; }
.mm-article__body a:hover { opacity: .7; }
.mm-article__body blockquote { margin: 1.6em 0; padding: 4px 0 4px 24px; border-left: 2px solid var(--ink); font-family: var(--serif); font-size: 1.25em; font-weight: 400; line-height: 1.45; color: var(--ink); }
.mm-article__body strong, .mm-article__body b { font-weight: 700; }
/* Inline photo galleries within an article (e.g. the "Behind the Stripes" story). Responsive grid,
   rounded thumbs; a lone image spans full width. */
.mm-article__gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: clamp(20px, 3vw, 34px) 0; align-items: start; }   /* start, not stretch: a tall portrait must not stretch its 4:3 landscape row-mates and over-crop them */
/* Each photo is wrapped at render time in .mm-galitem (insight-single.php); JS tags it .is-fill once
   the image reports its real dimensions. No bars and no blurred fill anywhere in the grid:
   LANDSCAPE covers a 4:3 tile (loses only a sliver), PORTRAIT/SQUARE drops the tile and fills the
   column at its own height — so there is never any empty space beside a photo. */
.mm-galitem { position: relative; display: block; overflow: hidden; border-radius: 6px; }
.mm-article__gallery img { display: block; width: 100%; border-radius: 0; background: none; }
/* LANDSCAPE — cover the 4:3 tile, edge to edge */
.mm-galitem.is-fill { aspect-ratio: 4 / 3; }
.mm-galitem.is-fill:only-child { aspect-ratio: 16 / 10; }
.mm-galitem.is-fill img { height: 100%; object-fit: cover; }
/* PORTRAIT / SQUARE — no tile, no crop, nothing beside it (also the pre-JS default, so no flash) */
.mm-galitem:not(.is-fill) img { height: auto; object-fit: unset; }
@media (max-width: 680px) { .mm-article__gallery { grid-template-columns: repeat(2, 1fr); gap: 8px; } }
/* Phone portrait: one full-width photo per row at its NATURAL aspect — the 2-up 4:3 cover crop was
   chopping the portrait-orientation story shots (key handovers etc.). Same whole-photo treatment
   as the feed cards + related thumbs on phone portrait (Heng). */
@media (orientation: portrait) and (max-width: 599px) {
  .mm-article__gallery { grid-template-columns: 1fr; gap: 12px; }
  .mm-galitem, .mm-galitem.is-fill, .mm-galitem.is-fill:only-child { aspect-ratio: auto; }
  .mm-galitem img, .mm-galitem.is-fill img { height: auto; object-fit: unset; }   /* every photo at natural aspect, one per row */
}
.mm-article__disclaimer { margin-top: 2.2em; padding-top: 1.4em; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.65; color: var(--muted); }

.mm-article__foot { display: none; }   /* "All insights" back-link hidden on every device (Heng 15/07/2026) */
.mm-article__back { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--ink); }
.mm-article__back:hover { opacity: 1; color: var(--brand-blue); }
.mm-article__back svg { width: 22px; height: 13px; }

/* Reading bar — revealed on scroll-down (when the main header hides): hamburger + logo left, title
   centred, share buttons right, reading-progress line along the bottom. */
.mm-article__readbar { position: fixed; top: 0; left: 0; right: 0; z-index: 130; background: var(--bg); border-bottom: 1px solid var(--line); transform: translateY(-100%); transition: transform .3s ease; will-change: transform; }
.mm-article__readbar.is-shown { transform: none; }
.mm-article__readbar-inner { max-width: var(--article-maxw); margin: 0 auto; height: 58px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 0 clamp(16px, 1.8vw, 36px) 0 12px; }
.mm-article__readbar-lead { display: flex; align-items: center; gap: 10px; justify-self: start; }
.mm-article__readbar .mm-ins-burger { color: var(--ink); }   /* was margin-top:3px — that matched the pre-lift saggy logo; both now ride 3px higher together */
.mm-article__readbar .mm-ins-burger:hover { background: var(--bg-soft); }
.mm-article__readbar-logo { display: flex; align-items: center; }
.mm-article__readbar-logo:hover { opacity: 1; }
.mm-article__readbar-logo img { width: 66px; height: auto; display: block; transform: translateY(-3px); }   /* optical: the wordmark PNG carries 13px top / 9px bottom padding, so its ink sits low — lift it onto the title row */
.mm-article__readbar-title { justify-self: center; max-width: min(52ch, 42vw); font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mm-article__readbar-share { justify-self: end; display: flex; align-items: center; gap: 2px; }
.mm-article__readbar-sbtn { position: relative; width: 34px; height: 34px; border: 0; background: none; border-radius: 50%; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease; }
.mm-article__readbar-sbtn:hover { background: var(--bg-soft); color: var(--ink); }
.mm-article__readbar-sbtn svg { width: 15px; height: 15px; display: block; }
.mm-article__readbar-sbtn.is-copied::after { content: "Copied"; position: absolute; top: calc(100% + 4px); right: 0; font-size: 10px; font-weight: 600; color: #fff; background: var(--ink); padding: 3px 8px; border-radius: 6px; white-space: nowrap; z-index: 6; }
.mm-article__readbar-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--brand-blue); transition: width .1s linear; }
@media (max-width: 680px) { .mm-article__readbar-inner { grid-template-columns: auto 1fr auto; }
  .mm-article__readbar-title { display: none; } }
/* Phone portrait (Heng 15/07/2026): the reading bar goes burger-less — logo hugs the left, a
   truncated article title takes the centre, share icons sit tighter to the right edge. The
   matching .mm-ins-burger display:none override lives after the ≤1024px show-burger rule below
   (same specificity — order decides). Tablet + landscape keep the burger + drawer. */
@media (max-width: 680px) and (orientation: portrait) {
  .mm-article__readbar-inner { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 0 6px 0 10px; }
  .mm-article__readbar-title { display: block; justify-self: center; max-width: 100%; font-size: 12.5px; }
  .mm-article__readbar-logo img { width: 56px; }
}

/* Insights left drawer — slides in from the left (ported from the reference site menu). */
html.mm-insdrawer-open { overflow: hidden; }
.mm-insdrawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.mm-insdrawer.is-open { visibility: visible; }
.mm-insdrawer__scrim { position: absolute; inset: 0; background: rgba(10,12,15,.4); backdrop-filter: blur(2px); opacity: 0; transition: opacity .3s ease; }
.mm-insdrawer.is-open .mm-insdrawer__scrim { opacity: 1; }
/* Head padding (13px top / 12px left) + 10px gap put the close hamburger and logo in the exact same
   spot as the reading-bar hamburger + logo, so opening the drawer looks seamless (no jump). */
.mm-insdrawer__panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(310px, 85vw); display: flex; flex-direction: column; gap: 20px; padding: 13px 16px 16px 12px; background: var(--bg); box-shadow: 0 0 60px rgba(10,12,15,.28); overflow-y: auto; transform: translateX(-100%); transition: transform .32s cubic-bezier(.4,0,.2,1); }
.mm-insdrawer.is-open .mm-insdrawer__panel { transform: none; }
.mm-insdrawer__head { display: flex; align-items: center; gap: 10px; }
.mm-insdrawer__close { color: var(--ink); }
.mm-insdrawer__close:hover { background: var(--bg-soft); }
.mm-insdrawer__logo { display: flex; align-items: center; }
.mm-insdrawer__logo:hover { opacity: 1; }
.mm-insdrawer__logo img { width: 66px; height: auto; display: block; }
.mm-insdrawer__nav { display: flex; flex-direction: column; }
.mm-insdrawer__nav a { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); transition: background .15s ease; }
.mm-insdrawer__nav a:hover { background: var(--bg-soft); opacity: 1; }
.mm-insdrawer__nav a > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--muted); }
.mm-insdrawer__catdot { display: inline-flex; flex: 0 0 auto; color: var(--pillar, var(--brand-blue)); }
.mm-insdrawer__catdot svg { width: 18px; height: 18px; }
.mm-insdrawer__divider { margin: 8px 0; border: 0; border-top: 1px solid var(--line); }
.mm-insdrawer__sub { border-top: 1px solid var(--line); padding-top: 18px; }
.mm-insdrawer__sub-title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.mm-insdrawer__sub-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
.mm-insdrawer__sub-input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 8px 2px; font-family: var(--sans); font-size: 13.5px; color: var(--ink); }
.mm-insdrawer__sub-input:focus { outline: none; border-bottom-color: var(--ink); }
.mm-insdrawer__sub-btn { margin-top: 14px; width: 100%; font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: #fff; background: var(--brand-blue); border: 0; border-radius: 8px; padding: 11px 22px; cursor: pointer; transition: opacity .2s ease; }
.mm-insdrawer__sub-btn:hover { opacity: .88; }
.mm-insdrawer__sub-ok { font-size: 12.5px; color: #2f7d6b; margin: 12px 0 0; }
.mm-insdrawer__sub-ok[hidden] { display: none; }
.mm-insdrawer__socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; padding-top: 4px; }
.mm-insdrawer__socials a { display: inline-flex; }
.mm-insdrawer__socials a:hover { opacity: .7; }
.mm-insdrawer__socials svg { width: 15px; height: 15px; display: block; }
.mm-insdrawer__copy { margin-top: auto; font-size: 11px; color: var(--muted); }

/* Hub + Trending (html.mm-ins-yt, set by mmcarz_insights_drawer): on TABLET LANDSCAPE the inline
   sidebar is hidden, so the header hamburger (left of the logo) opens this same .mm-insdrawer. Lift
   it over the fixed bottom bar (z 1000) and hide the Michi orb (z 999998) while it's open. Scoped to
   .mm-ins-yt so the single-article page's own drawer is untouched. */
html.mm-ins-yt .mm-insdrawer { z-index: 1100; }
html.mm-insdrawer-open #mm-chat-fab { display: none !important; }   /* hide the Michi orb while ANY insights drawer is open (hub/Trending + single-post) */
/* Insights folder hamburger on the WHITE scroll-down bar only, left of the logo — the hub/Trending
   sticky bar (#mm-ins-stickbar) AND the single-post reading bar (.mm-article__readbar) — across every
   non-desktop size: tablet portrait + landscape and iPhone portrait + landscape (<=1024px in any
   orientation, plus the 1025-1366 tablet-landscape shape gate). Never on the blue main header, which
   keeps its single site-nav burger (Heng directive). */
@media (max-width: 1024px),
       (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio: 3/2),
       (min-width: 901px) and (max-width: 1440px) and (orientation: landscape) and (any-pointer: coarse) {
  html.mm-ins-yt .mm-ins-stickbar .mm-ins-burger,
  .mm-article__readbar .mm-ins-burger { display: inline-flex; }
}
/* Phone-portrait exception to the rule above (Heng 15/07/2026): the single-post reading bar drops
   the hamburger — logo left, truncated title centre, shares right (layout in the ≤680px portrait
   block by .mm-article__readbar-title). Same specificity as the show rule; later in file wins. */
@media (max-width: 680px) and (orientation: portrait) {
  .mm-article__readbar .mm-ins-burger { display: none; }
}

/* Right rail: comments section (primary) + subscribe card + compact "More reads" feed. Not sticky —
   comments can run long, so the rail flows with the article (matches the reference). On <=1024px it
   drops below the article and the feed becomes a 2-up grid so it doesn't run as one tall stack. */
.mm-article__rail { display: flex; flex-direction: column; gap: clamp(30px, 3vw, 44px); min-width: 0; }

/* --- Comments --- */
.mm-article__comments-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.mm-article__comments-title { display: inline-flex; align-items: center; gap: 9px; font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; margin: 0; color: var(--ink); }
.mm-article__comments-title svg { width: 19px; height: 19px; color: var(--muted); }
.mm-article__comments-n { font-size: 13px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.mm-article__comments-n[hidden] { display: none; }
/* Sort-by dropdown */
.mm-article__csort { position: relative; }
.mm-article__csort-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 4px; font-family: var(--sans); font-size: 12.5px; color: var(--muted); cursor: pointer; }
.mm-article__csort-btn:hover { color: var(--ink); }
.mm-article__csort-btn svg { width: 15px; height: 15px; }
.mm-article__csort-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 150px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(20,22,24,.28); }
.mm-article__csort-menu[hidden] { display: none; }
.mm-article__csort-menu button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 8px 11px; border-radius: 7px; font-family: var(--sans); font-size: 13px; color: var(--ink); cursor: pointer; }
.mm-article__csort-menu button:hover { background: var(--bg-soft); }
.mm-article__csort-menu button.is-active { color: var(--brand-blue); font-weight: 600; }
/* Composer: avatar (letter) + field. The name/email row + Post button stay hidden until the reader
   clicks the comment box (form gets .is-active), then drop down — progressive, like the reference. */
.mm-article__cform { margin-bottom: 26px; }
.mm-article__composer { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; }
.mm-article__cavatar-wrap { position: relative; width: 40px; height: 40px; }
.mm-article__cavatar { position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; cursor: pointer; }
.mm-article__cavatar-circle { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--pillar, var(--brand-blue)) 22%, #fff); color: color-mix(in srgb, var(--pillar, var(--brand-blue)) 80%, #000); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; }
.mm-article__cavatar-edit { position: absolute; right: -3px; bottom: -3px; width: 17px; height: 17px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
.mm-article__cavatar-edit svg { width: 9px; height: 9px; }
/* Avatar chooser popup: pick an avatar (initials or emoji) + a background colour. */
.mm-article__avpop { position: absolute; top: calc(100% + 8px); left: 0; z-index: 30; width: 236px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 38px -12px rgba(20,22,24,.32); }
.mm-article__avpop[hidden] { display: none; }
.mm-article__avpop-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--muted); margin: 0 0 8px; }
.mm-article__avpop-label + .mm-article__avpop-row { margin-bottom: 12px; }
.mm-article__avpop-row { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-article__avpick { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg-soft); font-size: 16px; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: transform .12s ease; }
.mm-article__avpick:hover { transform: scale(1.08); }
.mm-article__avpick.is-active { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.mm-article__avpick [data-avpick-letter] { font-size: 14px; font-weight: 700; color: var(--muted); }
.mm-article__avcolor { width: 26px; height: 26px; border: 0; border-radius: 50%; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); transition: transform .12s ease; }
.mm-article__avcolor:hover { transform: scale(1.12); }
.mm-article__avcolor.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ink); }
.mm-article__cfield { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.mm-article__cinput { position: relative; }
/* Comment box: a single bottom border-line only (no box), taller once active. */
.mm-article__cbody { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; padding: 8px 34px 8px 2px; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink); resize: none; min-height: 24px; overflow: hidden; }
.mm-article__cform.is-active .mm-article__cbody { padding: 10px 34px 10px 2px; resize: vertical; min-height: 48px; }
.mm-article__cbody:focus { outline: none; border-bottom-color: var(--ink); }
.mm-article__cemoji { position: absolute; right: 2px; bottom: 4px; width: 26px; height: 26px; border: 0; background: none; border-radius: 50%; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mm-article__cemoji:hover { background: var(--bg-soft); color: var(--ink); }
.mm-article__cemoji svg { width: 18px; height: 18px; }
.mm-article__emojipop { position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 20; display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px -10px rgba(20,22,24,.28); }
.mm-article__emojipop[hidden] { display: none; }
.mm-article__emojiitem { width: 30px; height: 30px; border: 0; background: none; border-radius: 8px; font-size: 17px; line-height: 1; cursor: pointer; }
.mm-article__emojiitem:hover { background: var(--bg-soft); }
/* Name + email drop down once the composer is active. */
.mm-article__cextra { display: none; gap: 10px; }
.mm-article__cform.is-active .mm-article__cextra { display: flex; }
.mm-article__cextra input { flex: 1; min-width: 0; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 7px 2px; font-family: var(--sans); font-size: 13px; color: var(--ink); }
.mm-article__cextra input:focus { outline: none; border-bottom-color: var(--ink); }
/* Footer: Cancel + Comment together on the right; status text (when shown) sits to their left. */
.mm-article__cform-foot { display: none; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.mm-article__cform.is-active .mm-article__cform-foot { display: flex; }
.mm-article__cstatus { margin-right: auto; }
.mm-article__ccancel { font-family: var(--sans); font-size: 12.5px; font-weight: 600; color: var(--muted); background: none; border: 0; padding: 10px 12px; cursor: pointer; }
.mm-article__ccancel:hover { color: var(--ink); }
.mm-article__cbtn { font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: #fff; background: var(--brand-blue); border: 0; border-radius: 8px; padding: 10px 20px; cursor: pointer; transition: opacity .2s ease; }
.mm-article__cbtn:hover { opacity: .88; }
.mm-article__cbtn:disabled { opacity: .5; cursor: default; }
.mm-article__cstatus { font-size: 12px; }
.mm-article__cstatus.is-ok { color: #2f7d6b; }
.mm-article__cstatus.is-err { color: var(--brand-red); }
.mm-article__cstatus[hidden] { display: none; }
.mm-article__cempty { font-size: 13.5px; color: var(--muted); font-style: italic; margin: 0; }
.mm-article__clist { display: flex; flex-direction: column; gap: 20px; }
.mm-article__citem { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
.mm-article__cav { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; }
.mm-article__cmain { min-width: 0; }
.mm-article__cmeta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.mm-article__cauthor { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.mm-article__ctime { font-size: 11.5px; color: var(--muted); }
.mm-article__ctext { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 0; overflow-wrap: break-word; }

.mm-article__sub { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: clamp(24px, 3vw, 32px) 0 0; }
.mm-article__sub .mm-yt-sub__title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.mm-article__sub .mm-yt-sub__sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; }
.mm-article__sub .mm-yt-sub__input { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 8px 2px; font-family: var(--sans); font-size: 13.5px; color: var(--ink); }
.mm-article__sub .mm-yt-sub__input:focus { outline: none; border-bottom-color: var(--ink); }
.mm-article__sub .mm-yt-sub__btn { margin-top: 14px; width: 100%; font-family: var(--sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: #fff; background: var(--brand-blue); border: 0; border-radius: 8px; padding: 11px 22px; cursor: pointer; transition: opacity .2s ease; }
.mm-article__sub .mm-yt-sub__btn:hover { opacity: .88; }
.mm-article__sub .mm-yt-sub__ok { font-size: 12.5px; color: #2f7d6b; margin: 12px 0 0; }
.mm-article__sub .mm-yt-sub__ok[hidden] { display: none; }

/* "More from MM Carz": thumb + [category pill, title, views . time] + right-aligned kebab menu. */
.mm-article__rfeed { display: block; }
.mm-article__rfeed-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--muted); margin: 0 0 14px; }
/* Horizontal category filter bar: pills scroll across; the chevron appears when the row overflows. */
.mm-article__rcats { position: relative; margin: 0 0 16px; }
.mm-article__rcats-track { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; }
.mm-article__rcats-track::-webkit-scrollbar { display: none; }
.mm-article__rcats-track .mm-yt__pill { flex: 0 0 auto; }
/* Scroll chevrons: back on the left, forward on the right — each shown only when there's more to
   scroll that way. */
.mm-article__rcats-nav { position: absolute; top: 0; height: 100%; width: 40px; border: 0; cursor: pointer; display: inline-flex; align-items: center; color: var(--ink); z-index: 2; }
.mm-article__rcats-nav[hidden] { display: none; }
.mm-article__rcats-nav svg { width: 18px; height: 18px; }
.mm-article__rcats-prev { left: 0; justify-content: flex-start; padding-left: 2px; background: linear-gradient(90deg, var(--bg) 42%, transparent); }
.mm-article__rcats-next { right: 0; justify-content: flex-end; padding-right: 2px; background: linear-gradient(90deg, transparent, var(--bg) 42%); }
.mm-article__rlist { display: flex; flex-direction: column; gap: 18px; }
.mm-article__ritem { position: relative; display: grid; grid-template-columns: 148px minmax(0, 1fr) 30px; gap: 14px; align-items: start; }
.mm-article__ritem[hidden] { display: none; }
.mm-article__rthumb { display: block; overflow: hidden; border-radius: 9px; aspect-ratio: 16 / 10; background: var(--bg-soft); }
.mm-article__rthumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mm-article__ritem:hover .mm-article__rthumb img { transform: scale(1.05); }
.mm-article__rtext { min-width: 0; color: var(--ink); }
.mm-article__rtext:hover { opacity: 1; }
.mm-article__rtitle { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 13.5px; font-weight: 600; line-height: 1.32; }
.mm-article__rtext:hover .mm-article__rtitle { color: var(--brand-blue); }
.mm-article__rmeta { display: block; margin-top: 5px; font-size: 11.5px; color: var(--muted); }
.mm-article__rkebab { align-self: start; width: 28px; height: 28px; margin: -2px -4px 0 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .18s ease, color .18s ease; }
.mm-article__rkebab:hover { background: var(--bg-soft); color: var(--ink); }
.mm-article__rkebab svg { width: 17px; height: 17px; }
.mm-article__rmenu { position: absolute; right: -4px; top: 30px; z-index: 200; min-width: 156px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(20,22,24,.28); }   /* z above the site header (100) + reading bar (130), same reason as .mm-yt-card__menu */
.mm-article__rmenu[hidden] { display: none; }
.mm-article__rmenu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 9px 11px; border-radius: 7px; font-family: var(--sans); font-size: 13px; text-align: left; color: var(--ink); cursor: pointer; }
.mm-article__rmenu button:hover { background: var(--bg-soft); }
.mm-article__rmenu button svg { width: 16px; height: 16px; flex: 0 0 auto; color: var(--muted); }
@media (max-width: 1024px) { .mm-article__rlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(24px, 3vw, 40px); } }
@media (max-width: 520px) { .mm-article__rlist { grid-template-columns: 1fr; } }
/* Tablet landscape: the article is back to 2 columns there (rail on the right), so the related list
   reverts to the rail's ONE-post-per-row stack — the ≤1024 two-up grid above is for the stacked page. */
@media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio: 3/2),
       (min-width: 901px) and (max-width: 1440px) and (orientation: landscape) and (any-pointer: coarse) {
  .mm-article__rlist { display: flex; flex-direction: column; gap: 18px; }
}
/* ---- Hanamaru-style after-comments feed on tablet portrait + phone (both orientations) ----
   The "More from MM Carz" feed becomes a grid of VERTICAL cards (thumb on top, then a title/meta +
   kebab footer). Like Hanamaru's post grid we also drop the "More from MM Carz" heading, the category
   pills and the MM Carz Club subscribe block, so it reads as a clean card grid. Columns: 3-up on
   tablet portrait + phone landscape; 1-up full-width on phone portrait. Tablet LANDSCAPE is excluded
   (it keeps the 2-column article + rail rows handled above). */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait),
       (orientation: landscape) and (max-height: 500px),
       (max-width: 520px) {
  .mm-article__sub,
  .mm-article__rfeed-title,
  .mm-article__rcats { display: none; }
  .mm-article__ritem { grid-template-columns: minmax(0, 1fr) 28px; grid-template-areas: "thumb thumb" "text kebab"; gap: 10px 8px; align-items: start; }
  .mm-article__rthumb { grid-area: thumb; aspect-ratio: 16 / 9; border-radius: 12px; }
  .mm-article__rtext { grid-area: text; }
  .mm-article__rtitle { font-size: 14px; }
  .mm-article__rkebab { grid-area: kebab; margin: 0; }
  .mm-article__rmenu { top: auto; bottom: 34px; right: 0; }   /* kebab sits in the footer now — open the menu upward, not over the thumb */
}
/* 3-up grid: tablet portrait + phone landscape */
@media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait),
       (orientation: landscape) and (max-height: 500px) {
  .mm-article__rlist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 20px; }
}
/* phone portrait: one full-width card per row (references Hanamaru's mobile grid) */
@media (max-width: 520px) {
  .mm-article__rlist { display: grid; grid-template-columns: 1fr; gap: 22px; }
}
/* Phone portrait: the full-width card thumbnails show the WHOLE photo (no 16/9 crop) — natural
   aspect, like the homepage feed cards (Heng). Placed after the 16/9 card rule above so it wins. */
@media (orientation: portrait) and (max-width: 599px) {
  .mm-article__rthumb { aspect-ratio: auto; }
  .mm-article__rthumb.is-empty { aspect-ratio: 16 / 9; }              /* imageless placeholder keeps its block */
  .mm-article__rthumb img { height: auto; object-fit: unset; }        /* natural height = uncropped */
}
/* Phone portrait: FULL-BLEED related cards, cloning the insights hub's mobile feed — the section
   escapes the wrap's 20px gutters so thumbnails run edge-to-edge (radius 0); the title/views row and
   kebab stay inset like the hub's card meta. */
@media (orientation: portrait) and (max-width: 520px) {
  .mm-article__rfeed { margin-left: -20px; margin-right: -20px; }
  .mm-article__rthumb { border-radius: 0; }
  .mm-article__rtext { padding-left: 16px; }
  .mm-article__rkebab { margin-right: 12px; }
  .mm-article__rmenu { right: 12px; }
}

.mm-article--missing { text-align: center; padding: clamp(70px, 12vw, 160px) 0; }
.mm-article--missing .mm-article__eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--muted); margin-bottom: 14px; }
.mm-article--missing .mm-article__title { margin-bottom: .4em; }
.mm-article--missing .mm-article__lead { color: var(--muted); max-width: 460px; margin: 0 auto 28px; }

/* ============================================================================
   Trending page (/trending/) + Library page (/library/) — cloned from Hanamaru.
   Reuse the .mm-yt-card grid; add rank badges, period tabs, library sections.
   ============================================================================ */
.mm-lib { padding-top: clamp(20px, 3vw, 40px); padding-bottom: clamp(60px, 8vw, 110px); }

/* ----------------------------------------------------------------------------
   Trending (/trending/) — carbon-clone of Hanamaru's /trending, on the shared
   .mm-yt insights shell: underline Daily / Weekly / Monthly period tabs over
   THREE pre-sorted panels of ranked cards. Tab-first (no visible page title,
   matching Hanamaru + the /insights/ hub); an sr-only <h1> carries the heading.
   ---------------------------------------------------------------------------- */
.mm-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Trending grid runs one column denser than the hub (Hanamaru's trending is a 4-up ranked grid). */
.mm-yt--trend .mm-yt__grid, .mm-yt--trend.is-rail .mm-yt__grid { grid-template-columns: repeat(4, 1fr); }

/* Underline period tabs (Hanamaru .tab-bar / .tab) rendered in MM Carz tokens. */
.mm-trend-tabbar { display: flex; align-items: flex-end; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 clamp(18px, 2.4vw, 28px); }
.mm-trend-tab { margin-bottom: -1px; padding: 9px 14px; border: 0; border-bottom: 2px solid transparent; background: none; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; transition: color .18s ease, border-color .18s ease; }
.mm-trend-tab:hover { color: var(--ink); }
.mm-trend-tab.is-active { color: var(--ink); font-weight: 700; border-bottom-color: #e2683b; }
.mm-trend-tab:focus-visible { outline: 2px solid #e2683b; outline-offset: 2px; border-radius: 4px; }

/* Sticky-bar variant: compact + horizontally scrollable, no bottom hairline (the bar carries it). */
.mm-trend-tabbar--stick { flex: 1 1 auto; min-width: 0; margin: 0; border-bottom: 0; overflow-x: auto; scrollbar-width: none; }
.mm-trend-tabbar--stick::-webkit-scrollbar { display: none; }
.mm-trend-tabbar--stick .mm-trend-tab { flex: 0 0 auto; padding: 8px 12px; }

/* Panels toggle [hidden]; the rank counter resets per panel so numbering is always 1..N in view. */
.mm-trend-panel[hidden] { display: none; }
.mm-trend-panel .mm-yt__grid { counter-reset: mmrank; }
.mm-trend-panel .mm-yt-card { counter-increment: mmrank; }

/* Rank badge — small circle top-left of the thumbnail (Hanamaru ranked-card__rank), filled by the
   CSS counter so it always reads 1..N within the visible panel (no JS renumbering). */
.mm-yt-card__rank { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; align-items: center; justify-content: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 800; line-height: 1; box-shadow: 0 2px 8px rgba(10,12,15,.20); }
.mm-yt-card__rank::before { content: counter(mmrank); }

/* Rail active item (current section). */
.mm-yt__railitem.is-active { color: var(--ink); }
.mm-yt__railitem.is-active svg { color: #e2683b; }

/* Trending grid responsive — steps 4 -> 3 -> 2 -> 1 like Hanamaru's trending. The compound
   .mm-yt--trend.is-rail selector (0,3,0) + later source order beats the hub's .mm-yt.is-rail rule,
   so a viewport narrowed while still in rail state still steps down correctly. */
@media (max-width: 1200px) { .mm-yt--trend .mm-yt__grid, .mm-yt--trend.is-rail .mm-yt__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .mm-yt--trend .mm-yt__grid, .mm-yt--trend.is-rail .mm-yt__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mm-yt--trend .mm-yt__grid, .mm-yt--trend.is-rail .mm-yt__grid { grid-template-columns: 1fr; } }
/* Tablet landscape: 3-up trending grid like Hanamaru (the sidebar is hidden + bottom bar shown there,
   so the full width fits 3 cards) — placed after the ≤1024 two-up rule so it wins at 901-1024. */
@media (min-width: 901px) and (max-width: 1366px) and (orientation: landscape) and (max-aspect-ratio: 3/2),
       (min-width: 901px) and (max-width: 1440px) and (orientation: landscape) and (any-pointer: coarse) {
  .mm-yt--trend .mm-yt__grid, .mm-yt--trend.is-rail .mm-yt__grid { grid-template-columns: repeat(3, 1fr); }
  .mm-yt .mm-lib__grid, .mm-yt.is-rail .mm-lib__grid { grid-template-columns: repeat(3, 1fr); }   /* Library page: 2-up -> 3-up, matching Trending (scoped to .mm-lib__grid so the Home feed keeps its own layout) */
}

/* Insights scroll-triggered sticky pill-header — white (matches the sidebar), no shadow, swap synced with the main header. */
.mm-ins-stickbar { position: fixed; top: 0; left: 0; right: 0; z-index: 110; background: var(--bg); transform: translateY(-100%); transition: transform .35s ease; will-change: transform; }
.mm-ins-stickbar.is-shown { transform: none; }
/* Lead (burger + logo) mirrors the main header's geometry exactly — 12px left pad, 38px button,
   12px gap, 18px logo — so the toggle and logo hold identical positions when the headers swap. */
/* padding-left 19px puts the 38px-wide hamburger's centre on the collapsed rail icon centre (38px),
   so the sticky-bar toggle sits inline above the rail on every insights page (hub + trending). */
.mm-ins-stickbar__inner { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); height: 58px; padding: 0 clamp(14px, 2.5vw, 24px) 0 19px; }
.mm-ins-stickbar__lead { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
.mm-ins-stickbar .mm-ins-burger { color: var(--ink); }
.mm-ins-stickbar .mm-ins-burger:hover { background: var(--bg-soft); }
.mm-ins-stickbar__logo { flex: 0 0 auto; display: flex; align-items: center; }
.mm-ins-stickbar__logo:hover { opacity: 1; }
/* Match the main header logo's footprint: it renders ~67px wide (18px tall on a wider crop). This
   wordmark is a tighter crop, so match by WIDTH so "MM CARZ" reads the same size in both headers. */
.mm-ins-stickbar__logo img { width: 66px; height: auto; display: block; }
.mm-ins-stickbar__pills { display: flex; gap: 8px; overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mm-ins-stickbar__pills::-webkit-scrollbar { display: none; }
.mm-ins-stickbar__pills .mm-yt__pill { flex: 0 0 auto; }
/* Trending scroll-down header: centre the Daily/Weekly/Monthly tabs in the bar (grid 1fr auto 1fr —
   lead left, tabs dead-centre, empty right column balances it), and nudge the hamburger right to 19px
   so its 38px-wide centre lands on the collapsed rail icon centre (38px), staying inline when the
   sidebar is collapsed. */
.mm-ins-stickbar--trend .mm-ins-stickbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
.mm-ins-stickbar--trend .mm-ins-stickbar__lead { justify-self: start; }
.mm-ins-stickbar--trend .mm-trend-tabbar--stick { justify-self: center; }
/* Library / List (pill-less "plain" stickbar): centre the wordmark on the bar at EVERY width — the
   burger stays left, matching the blue main header's centred logo when the header swaps to white on
   scroll (previously only centred on phone ≤600px, left-aligned on tablet/desktop). */
.mm-ins-stickbar--plain .mm-ins-stickbar__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
@media (max-width: 600px) { .mm-ins-stickbar__logo { display: none; } }
/* Pill-less stickbar (Library / List): on phone portrait, CENTRE the logo like the blue main header
   (burger stays left) instead of hiding it — same 18px height + centred position as .mm-logo, so it
   reads consistently when the header swaps blue -> white on scroll. */
@media (max-width: 600px) {
  /* Centre the logo at its natural stickbar width (66px — the same size the drawer + reading-bar
     wordmark use, ~matching the blue header's ~67px logo). Do NOT force height:18px: the wordmark's
     aspect (2.64) is narrower than the white logo's (3.72), so a forced 18px height rendered it
     visibly smaller. Burger stays left. */
  .mm-ins-stickbar--plain .mm-ins-stickbar__logo { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

/* Card menu Bookmarked / Liked active state */
.mm-yt-card__menu-item.is-on { color: var(--brand-blue); }
.mm-yt-card__menu-item.is-on svg { color: var(--brand-blue); }

/* Sidebar: Trending head link + Your-Library link */
.mm-yt-trend__head a { color: inherit; }
.mm-yt-trend__head a:hover { color: var(--brand-blue); opacity: 1; }
/* Library widget (Luna-style): "LIBRARY" header + History/Bookmarks/Liked rows with count badges. */
.mm-yt-lib { border-top: 1px solid var(--line); padding-top: 16px; }
.mm-yt-lib__head { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--label-ls); color: var(--muted); margin: 0 0 6px; }
.mm-yt-lib__row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; margin: 0 -8px; border-radius: 9px; font-size: 13.5px; font-weight: 500; color: var(--ink); transition: background .15s ease; }
.mm-yt-lib__row:hover { background: var(--bg-soft); opacity: 1; }
.mm-yt-lib__ic { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.mm-yt-lib__ic svg { width: 17px; height: 17px; }
.mm-yt-lib__label { flex: 1; min-width: 0; }
.mm-yt-lib__badge { flex: 0 0 auto; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 10px; background: var(--bg-soft); color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.6; font-variant-numeric: tabular-nums; }
.mm-yt-lib__badge.is-zero { opacity: .55; }

/* Library page */
.mm-lib__head { margin-bottom: clamp(22px, 3vw, 38px); }
.mm-lib__title { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; letter-spacing: -.02em; margin: 0 0 .3em; }
.mm-lib__lead { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; max-width: 620px; }
.mm-lib__sec { margin-bottom: clamp(34px, 5vw, 60px); }
.mm-lib__sechead { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.mm-lib__icon { display: inline-flex; color: var(--muted); }
.mm-lib__icon svg { width: 20px; height: 20px; }
.mm-lib__sectitle { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 500; margin: 0; }
.mm-lib__count { font-size: 13px; color: var(--muted); margin-right: auto; }
.mm-lib__viewall { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: var(--brand-blue); white-space: nowrap; }
.mm-lib__viewall:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.mm-lib__clear { margin-left: 14px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); background: none; border: 0; cursor: pointer; }
.mm-lib__clear:hover { color: #9c4a2c; opacity: 1; }
.mm-lib__clear svg { width: 15px; height: 15px; }
.mm-lib__emptytext { color: var(--muted); font-size: 14px; padding: 6px 0 4px; margin: 0; }
/* Library cards now match the feed card (mm-yt-card) exactly — avatar + "x min ago" + right kebab
   (Bookmark / Like / Copy / Remove). Styled by the shared .mm-yt-card__* rules; no bespoke × needed. */
/* Library list pages (/history/ /bookmarks/ /liked/) — Hanamaru /history clone: a centred
   list-layout (main column + right mini-rail), back-link, big title + "N articles" count, a Clear
   pill, and date-grouped card grids. Cards are the shared .mm-yt-card (window.mmLibCard). */
.mm-liblist__back { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--muted); margin: 0 0 clamp(14px, 2vw, 24px); transition: color .18s ease; }
.mm-liblist__back:hover { color: var(--ink); opacity: 1; }
.mm-liblist { display: grid; grid-template-columns: minmax(0, 860px) 200px; gap: clamp(28px, 4vw, 56px); justify-content: center; align-items: start; }
.mm-liblist__main { min-width: 0; }
.mm-liblist__head { margin-bottom: clamp(24px, 3.5vw, 40px); }
.mm-liblist__titlerow { display: flex; align-items: center; gap: 10px; }
.mm-liblist__ic { display: inline-flex; color: var(--muted); }
.mm-liblist__ic svg { width: 22px; height: 22px; }
.mm-liblist__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem, 2.6vw, 2rem); letter-spacing: -.02em; margin: 0; }
.mm-liblist__count { font-size: 13px; color: var(--muted); margin: 7px 0 0; }
.mm-liblist__group { margin-bottom: clamp(30px, 4.5vw, 50px); }
.mm-liblist__group:last-child { margin-bottom: 0; }
.mm-liblist__grouplabel { font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 0 0 clamp(14px, 2vw, 18px); }
.mm-liblist__emptytext { color: var(--muted); font-size: 14px; }

/* Library LIST pages (History / Bookmarks / Liked): luna3.ai horizontal list rows — thumbnail left,
   title + meta right, kebab far right — instead of the vertical card grid. Scoped to .mm-liblist so the
   hub feed + library overview keep their card grids. Reuses the shared .mm-lib-card markup + kebab. */
.mm-liblist .mm-yt__grid { display: flex; flex-direction: column; gap: 0; }
.mm-liblist .mm-lib-card { flex-direction: row; align-items: flex-start; gap: 16px; padding: 16px 0; margin: 0; border-radius: 0; }
.mm-liblist .mm-lib-card:hover { padding: 16px 0; margin: 0; background: none; box-shadow: none; }   /* no grid hover-aura in a list */
.mm-liblist .mm-lib-card + .mm-lib-card { border-top: 1px solid var(--line); }
.mm-liblist .mm-lib-card .mm-yt-card__thumb { flex: 0 0 200px; width: 200px; aspect-ratio: 16 / 9; border-radius: 12px; }
.mm-liblist .mm-lib-card .mm-yt-card__foot { flex: 1 1 auto; min-width: 0; padding: 2px 0 0; }
.mm-liblist .mm-lib-card .mm-yt-card__av { display: none; }   /* the thumbnail is the visual; drop the extra category avatar in a row */
.mm-liblist .mm-lib-card .mm-yt-card__title { font-size: 15.5px; margin-bottom: 6px; }
@media (max-width: 560px) {
  .mm-liblist .mm-lib-card { gap: 12px; }
  .mm-liblist .mm-lib-card .mm-yt-card__thumb { flex-basis: 130px; width: 130px; }
  .mm-liblist .mm-lib-card .mm-yt-card__title { font-size: 14px; }
}
.mm-liblist__rail { position: sticky; top: 76px; align-self: start; display: flex; flex-direction: column; gap: 18px; padding-top: 46px; }
.mm-liblist__raillink { display: inline-flex; align-items: center; gap: 9px; border: 0; background: none; padding: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.mm-liblist__raillink:hover { color: var(--brand-blue); opacity: 1; }
.mm-liblist__raillink svg { width: 17px; height: 17px; color: var(--muted); }
.mm-liblist__raillink[hidden] { display: none; }   /* the Clear button toggles via [hidden]; keep it hiding (the author display:inline-flex above would otherwise beat the UA [hidden] rule) */
/* Clear-button action pill in the main column (luna3.ai layout): shown on narrow (<=1024px) where the
   right rail is hidden — right-aligned under the head. Hidden by DEFAULT so the wide layout (rail Clear)
   never shows both — and a fractional width in the open (1024,1025) interval (browser zoom / DPR
   scaling) can't expose the pill either. The <=1024 block reveals it. Both buttons are [data-clear] so
   one JS toggles them together. */
.mm-liblist__actions { display: none; justify-content: flex-end; margin-bottom: clamp(20px, 3vw, 32px); }
.mm-liblist.is-empty .mm-liblist__actions { display: none; }
.mm-liblist__clearpill { font-family: var(--sans); font-size: 12.5px; font-weight: 500; color: var(--ink); background: var(--bg-soft); border: 1px solid transparent; border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: background .18s ease, color .18s ease; }
.mm-liblist__clearpill:hover { background: var(--cream); opacity: 1; }
.mm-liblist__clearpill[hidden] { display: none; }
@media (max-width: 1024px) {
  .mm-liblist { grid-template-columns: 1fr; }   /* collapse: rail hidden, the Clear lives in the in-flow pill above */
  .mm-liblist__rail { display: none; }
  .mm-liblist__actions { display: flex; }        /* reveal the in-flow Clear pill */
}
@media (min-width: 1025px) {
  .mm-liblist.is-empty { grid-template-columns: minmax(0, 860px); }   /* empty: drop the 200px rail track... */
  .mm-liblist.is-empty .mm-liblist__rail { display: none; }           /* ...and remove the rail element so it can't reflow below the main column */
}

/* ============================================================================================
   Contact — /contact/ (templates/contact.php). Dior contact-couture, carbon-cloned: a centred hero,
   then hairline-divided columns of ways-to-reach-us / self-service / a write-us form, then the
   showroom map. Manrope, light weights, generous whitespace — matches the FAQ couture page.
   ============================================================================================ */
.mm-contact { background: var(--bg, #faf9f7); }
.mm-contact__hero { position: relative; overflow: hidden; text-align: center; padding: clamp(76px, 13vh, 156px) 0 clamp(30px, 5vh, 56px); }
/* Faded showroom backdrop (Bobby with customers) behind ONLY the hero — inset:0 + overflow:hidden keep it
   from bleeding into the sections below. A radial mask feathers all four edges to nothing (soft/blurred
   edges) and a slight blur + low opacity keep the heading + copy fully readable over it. */
.mm-contact__hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  left: 50%; top: 0; bottom: 0; transform: translateX(-50%);   /* centred block, not full width */
  width: min(1000px, 94%);
  background: url('assets/contact-hero.jpg') 50% 34% / cover no-repeat;
  opacity: .46; filter: blur(1.5px);
  /* soft oval fade on ALL sides so the centred photo blends into the page */
  -webkit-mask-image: radial-gradient(ellipse 66% 74% at 50% 48%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 66% 74% at 50% 48%, #000 10%, transparent 70%);
}
.mm-contact__hero > .container { position: relative; z-index: 1; }
.mm-contact__eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 clamp(16px, 2.4vh, 26px); }
.mm-contact__title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.55rem, 2.5vw, 2.05rem); letter-spacing: -.01em; line-height: 1.06; color: var(--ink); margin: 0 0 40px; }
.mm-contact__lead { max-width: 780px; margin: 0 auto; color: var(--muted); font-size: clamp(.8rem, .9vw, .875rem); line-height: 1.6; }
.mm-contact__lead + .mm-contact__lead { margin-top: 25px; }
.mm-contact__body { padding-bottom: clamp(60px, 10vh, 120px); }

/* Column rows — 3 across, hairline top rule, generous vertical rhythm; collapse to 1 on mobile. */
.mm-contact__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 72px); padding: clamp(40px, 6vh, 70px) 0; }
.mm-contact__cols--split { grid-template-columns: 1fr 1.35fr; }
.mm-contact__cols--form { grid-template-columns: minmax(0, 620px); justify-content: center; }
.mm-contact__cols--form .mm-contact__colh { text-align: center; }
.mm-contact__cols--form .mm-contact__form { margin-top: 26px; }   /* breathing room between "Write to us" + the fields */
.mm-contact__cols--form .mm-contact__formfoot { flex-direction: column; align-items: center; gap: 12px; }
.mm-contact__cols--form .mm-contact__note { text-align: center; }
.mm-contact__col { min-width: 0; }
.mm-contact__colh { font-family: var(--sans); font-size: 13.5px; font-weight: 600; letter-spacing: .01em; color: var(--ink); margin: 0 0 14px; }
.mm-contact__col p { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0 0 13px; }
.mm-contact__col a:not(.mm-contact__btn):not(.mm-contact__link) { color: var(--ink); text-decoration: none; }   /* exclude buttons + the underlined "See all questions" link (let its own underline win) */
.mm-contact__col p a:not(.mm-contact__btn) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }   /* underline in-copy links (phone, Privacy Statement) — beats the a:not colour rule */
.mm-contact__lines { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.mm-contact__lines a { font-size: 17px; color: var(--ink); text-decoration: none; letter-spacing: .01em; }
.mm-contact__lines a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mm-contact__fine { font-size: 12.5px; color: var(--muted); letter-spacing: .01em; }
.mm-contact__link { display: inline-block; margin-top: 6px; font-size: 13.5px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* Showroom details — labelled address / hours / email / phone. */
.mm-contact__det { margin: 0 0 15px; }
.mm-contact__detlabel { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 3px; }
.mm-contact__detval { display: block; font-size: 13px; color: var(--ink); line-height: 1.5; }
.mm-contact__detval a { color: var(--ink); text-decoration: none; }
.mm-contact__detval a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Buttons — ghost (outline) + dark (filled). */
.mm-contact__btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; margin-top: 8px; height: 45px; padding: 0 26px; font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: .02em; line-height: 1; color: var(--ink); background: none; border: 1px solid var(--ink); border-radius: 8px; cursor: pointer; text-decoration: none; transition: opacity .18s ease; }
.mm-contact__btn:hover { opacity: .78; }
.mm-contact__btnic { width: 17px; height: 17px; flex: 0 0 auto; }   /* Facebook Messenger glyph on the CTA */
.mm-contact__btn--dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.mm-contact__btn[disabled] { opacity: .5; cursor: default; }

/* FAQ teaser rows — linked, hairline-divided, chevron right (Dior). */
.mm-contact__faq { margin: 2px 0 14px; }
.mm-contact__faqrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; color: var(--ink); text-decoration: none; font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; }
.mm-contact__chev { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; transition: transform .2s ease, color .2s ease; }
.mm-contact__faqrow:hover .mm-contact__chev { transform: translateX(3px); color: var(--ink); }

/* Underline form fields (Dior). */
.mm-contact__form { display: flex; flex-direction: column; gap: 20px; }   /* uniform spacing between every row */
.mm-contact__field { display: flex; flex-direction: column; gap: 6px; }
.mm-contact__flabel { font-size: 12px; letter-spacing: .01em; color: var(--muted); }
.mm-contact__field input, .mm-contact__field textarea { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; padding: 6px 0; font: inherit; font-size: 15px; color: var(--ink); border-radius: 0; resize: none; }
.mm-contact__field input:focus, .mm-contact__field textarea:focus { outline: none; border-bottom-color: var(--ink); }
.mm-contact__field input::placeholder, .mm-contact__field textarea::placeholder { color: var(--muted); opacity: 1; }   /* on-line placeholders sit right on the underline (all but the message keep no label above) */
.mm-contact__field textarea { line-height: 1.55; }
.mm-contact__frow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 30px); }
.mm-contact__mini { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.mm-contact__mini .mm-contact__field { margin-bottom: 0; flex: 1 1 150px; }
.mm-contact__mini .mm-contact__btn { margin-top: 0; }
.mm-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.mm-contact__formfoot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.mm-contact__note { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0; }
/* 🚨 A SUCCESS COLOUR, because without one this line keeps var(--muted) --
   the hint grey it uses at rest -- and the confirmation renders at 3.22:1 on
   white, lighter than the fine print beside it. Measured. #2e6b4f is the same
   green the footer's confirmation already uses (6.30:1). */
.mm-contact__note.is-ok { color: #2e6b4f; }
.mm-contact__note.is-err { color: #c0392b; }
.mm-contact__note a { color: var(--ink); text-decoration: underline; }
.mm-contact__thanks { font-size: 15px; color: var(--ink); line-height: 1.6; margin: 8px 0 0; }

/* Visit — showroom + live map. */
.mm-contact__visit { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(40px, 6vh, 70px) 0 0; }
.mm-contact__addr { color: var(--ink) !important; font-size: 16px !important; line-height: 1.5 !important; margin-bottom: 8px !important; }
.mm-contact__map { border-radius: 6px; overflow: hidden; box-shadow: 0 24px 50px -34px rgba(20,22,24,.4); }
.mm-contact__map iframe { display: block; width: 100%; height: clamp(280px, 34vw, 420px); border: 0; filter: grayscale(.15) contrast(1.02); }

@media (max-width: 860px) {
  .mm-contact__cols, .mm-contact__cols--split, .mm-contact__visit { grid-template-columns: 1fr; gap: 34px; }
  .mm-contact__frow { grid-template-columns: 1fr; }
}

/* ---- Contact page: Dior-style accordion + Write-to-us popup (portrait tablets & phones) ----
   The accordion body wrapper (.mm-contact__colbody > __colbody-inner) is built by JS on every viewport;
   desktop renders it open (a plain column). The trigger row + modal close only appear in the gate. */
.mm-contact__colbody { min-width: 0; }
.mm-contact__colbody-inner { min-width: 0; }
.mm-contact__writerow { display: none; }
.mm-contact__writex { display: none; }

@media (max-width: 1024px) and (orientation: portrait) {
  /* Rows 1 & 2 flow into one continuous accordion list (hairline-divided, +/- toggle). */
  .mm-contact__cols:not(.mm-contact__cols--form) { display: block; padding: 0; }
  .mm-contact__visit { grid-template-columns: 1fr; }
  .mm-contact__acc { border-top: 1px solid var(--line); }
  .mm-contact__acc .mm-contact__colh { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; margin: 0; padding: 19px 2px; font-size: 15px; }
  .mm-contact__acc .mm-contact__colh::after { content: ''; flex: 0 0 auto; width: 15px; height: 15px; color: var(--muted); background: linear-gradient(currentColor, currentColor) center / 15px 1.4px no-repeat, linear-gradient(currentColor, currentColor) center / 1.4px 15px no-repeat; }
  .mm-contact__acc.is-open .mm-contact__colh::after { background: linear-gradient(currentColor, currentColor) center / 15px 1.4px no-repeat; }   /* + -> - */
  .mm-contact__colbody { overflow: hidden; max-height: 0; transition: max-height .45s ease; }
  .mm-contact__acc.is-open .mm-contact__colbody { max-height: 640px; }
  .mm-contact__acc.is-open .mm-contact__colbody-inner { padding-bottom: 20px; }

  /* Write to us -> a trigger row that opens the form as a centred modal. */
  .mm-contact__cols--form { display: block; padding: 0; }
  .mm-contact__cols--form .mm-contact__colh { text-align: left; margin: 0 0 6px; }
  .mm-contact__cols--form .mm-contact__form { margin-top: 26px; }   /* breathing room under the "Write to us" heading */
  .mm-contact__writerow { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin: 0; padding: 19px 2px; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: none; cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 600; letter-spacing: .01em; color: var(--ink); }
  .mm-contact__writeus { position: fixed; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(18, 20, 22, .5); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
  .mm-contact__writeus.is-open { opacity: 1; visibility: visible; }
  .mm-contact__writecard { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--bg); border-radius: 10px; padding: clamp(28px, 5vw, 40px); box-shadow: 0 30px 70px -30px rgba(20, 22, 24, .55); transform: translateY(14px); transition: transform .3s ease; }
  .mm-contact__writeus.is-open .mm-contact__writecard { transform: none; }
  .mm-contact__writex { display: inline-flex; position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
  .mm-contact__writex svg { width: 20px; height: 20px; }
  html.mm-contact-modal { overflow: hidden; }
  html.mm-contact-modal #mm-chat-fab { display: none !important; }
}


/* --- Compare tease, mobile portrait (Heng 11/07): bigger uncropped thumbs; the
   "Change" control loses its pill and becomes small white text tight in the top-right
   corner over a scrim so it reads on any photo. Desktop untouched. --- */
@media (max-width: 760px) {
  /* full-bleed thumbs: the photo owns the entire half-card width; text gets its own
     padding below, both tiles expand equally (Heng 11/07) */
  .mm-compare__car { padding: 0 0 12px; }
  .mm-compare__name, .mm-compare__price { padding-left: 10px; padding-right: 10px; }
  /* photos are natively 3:2 (1050x700 etc.) - a 3:2 box + cover = fills edge-to-edge
     with ZERO cropping and zero letterbox, so the scrim sits on the actual photo */
  .mm-compare__media { aspect-ratio: 3 / 2; margin-bottom: 10px; border-radius: 0; }
  .mm-compare__media img { object-fit: cover; }
  .mm-compare__media::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 42%;
    background: linear-gradient(to bottom, rgba(20,22,24,.45), rgba(20,22,24,0)); pointer-events: none; z-index: 1; }
  .mm-compare__swap { top: 5px; right: 6px; z-index: 2; background: none; border: none; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none; color: #fff; font-size: 9.5px; gap: 4px; }
  .mm-compare__swap svg { width: 11px; height: 11px; }
  .mm-compare__vs { width: 36px; height: 36px; font-size: 10.5px; }
}
/* VS badge paints above the tile content on every viewport (the white name/price
   area was overlapping its lower half) */
.mm-compare__vs { z-index: 3; }

/* ---- Rendering perf (Heng 11/07/2026): SKIP offscreen sections entirely. The Michi aura (two
   60vw circles with blur(100px) drifting on 16/21s infinite loops), the Ken Burns zooms, the
   marquee and the CTA/featured-car slideshows kept rastering even when far offscreen — every open
   tab burned a CPU/GPU core, and on busy machines/phones the archive's Filter & Sort click sat
   frozen for seconds behind that work (read as "blurred background covering the off-canvas").
   content-visibility:auto skips style/layout/paint — and therefore the animations' rastering —
   until a section approaches the viewport; contain-intrinsic-size keeps the scrollbar stable
   (auto = remembers the real height once first rendered). .mm-compare is deliberately NOT gated:
   its car-swap picker overlay lives inside the section and paint containment would clip it. */
.mm-browse, .mm-fcar, .mm-cta__block, .mm-ai, .mm-finance, .mm-service,
.mm-reviews, .mm-ig, .mm-news, .mm-about, .mm-faq, .mm-featurail, .mm-srev {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}
/* Lift the gate while the Sell block's state dropdown is open — content-visibility's paint
   containment would clip the drop-down panel at the block edge AND trap the inner's z-index in a
   stacking context beneath the reviews section (same clipping caveat as .mm-compare above). The
   section is on-screen at that moment anyway, so nothing is lost perf-wise. */
.mm-cta__block:has(.mm-dd.is-open) { content-visibility: visible; }

/* Preferred contact-method toggle on the lead forms (contact / off-canvas / sell).
   Pure-CSS segmented radio pills; the submit handler reads input[name="method"]:checked.
   Drives the branded MM Carz confirmation SMS (Text/Call -> text them; Email -> no text).
   Theme-adaptive: unselected pills inherit the form's text colour (works on the light
   contact/off-canvas forms AND the dark sell form); selected = MM brand blue. */
.mm-cmethod { border: 0; margin: 2px 0 4px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mm-cmethod__lg { width: 100%; font-size: 13px; color: inherit; opacity: .7; margin: 0 0 2px; padding: 0; }
.mm-cmethod__i { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.mm-cmethod__b { cursor: pointer; border: 1px solid currentColor; border-radius: 999px; padding: 7px 16px; font-size: 14px; line-height: 1; color: inherit; background: transparent; opacity: .7; transition: opacity .15s, background .15s, color .15s, border-color .15s; }
.mm-cmethod__b:hover { opacity: 1; }
.mm-cmethod__i:checked + .mm-cmethod__b { opacity: 1; background: #0266b1; color: #fff; border-color: #0266b1; }
.mm-cmethod__i:focus-visible + .mm-cmethod__b { outline: 2px solid #0266b1; outline-offset: 2px; opacity: 1; }

/* Sell page sits on a dark hero, so the contact-method pills inherit a dark colour and
   vanish. Force white text + translucent-white border there (selected stays brand blue). */
.mm-sell-form .mm-cmethod__lg { color: #fff; opacity: .82; }
.mm-sell-form .mm-cmethod__b { color: #fff; border-color: rgba(255, 255, 255, .55); opacity: 1; }
.mm-sell-form .mm-cmethod__b:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.mm-sell-form .mm-cmethod__i:checked + .mm-cmethod__b { background: #0266b1; color: #fff; border-color: #0266b1; }

/* Contact page only: centre the "How should we reach you?" legend + pill row within the form column.
   The shared .mm-cmethod stays left-aligned everywhere else (header off-canvas + sell form). */
.mm-contact__form .mm-cmethod { justify-content: center; }
.mm-contact__form .mm-cmethod__lg { text-align: center; }

/* ==========================================================================
   Filter panel: give the hover highlight back (Heng, 01/08/2026).
   The blanket rule above (".mm-fpill > summary:hover, .mm-sortopt:hover,
   .mm-time__slot:hover, .mm-mmmake:hover, .mm-mmmodel:hover, .mm-bodycard:hover,
   label:hover { background: none !important }") strips EVERY hover background in
   the panel, so nothing followed the cursor through a dropdown. These restore it
   with the specificity + !important needed to win.
   Hover stays LIGHTER than the selected state so you can still see what is
   actually ticked while moving over it.
   ========================================================================== */
.mm-invbar .mm-time__slot:hover { background: #eef5fb !important; color: #0266b1 !important; }
.mm-invbar .mm-time__slot.is-sel { background: #0266b1 !important; color: #fff !important; }
.mm-invbar .mm-sortopt:hover { background: #eef5fb !important; color: #0266b1 !important; }
.mm-invbar .mm-bodycard:hover { background: rgba(2,102,177,.05) !important; }
.mm-invbar .mm-chip:hover span { background: #f3f7fb !important; border-color: #0266b1 !important; }
.mm-invbar .mm-swatch:hover .mm-swatch__name { color: #0266b1 !important; }
/* Heng: no count badge on the island. */
.mm-invfilter__n { display: none !important; }