/*
Theme Name: BM Garage
Theme URI: https://bmgarage.com.au
Author: MM Carz
Description: Lean custom theme for BM Garage — BMW & prestige servicing, Nunawading. Single landing page plus /faq/ and /privacy/. Cloned from the MM Carz rebuild theme.
Version: 0.1.0
License: GPL-2.0-or-later
Text Domain: bmgarage
*/

/* ============================== 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;   /* BM Garage header blue. 🚨 DO NOT change the hex without a sweep of
                              front-page.php — its 1,182-line inline <style> repeats this literal
                              (and rgba(2,102,177,…)) ~30x as a hardcoded var() fallback. */

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

/* ============================== 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 ============================== */
.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); }
/* Dark wordmark variant — hidden by default. The BM header only ships the white mark over the
   brand-blue bar, but the markup keeps the .mm-logo__ink <img> slot, so hold the base state here. */
.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 */

/* The left cell now holds TWO icons in most states (burger + spanner at <=1200; hero phone + spanner
   on the desktop hero), so it needs a real layout. It had NONE - no rule anywhere set its display, so
   it computed `block`, which meant (a) the only thing separating its children was the collapsed HTML
   whitespace between the tags (measured exactly 3.00px - load-bearing on header.php's source
   formatting, so reformatting the file would have jammed the icons together with no CSS change) and
   (b) the icons baseline-aligned against the 40px burger and sat 3px ABOVE the bar centre (measured
   cy 22 vs 25 in the 50px bar). Flex fixes both and matches .mm-header-actions' 14px rhythm.
   .mm-logo is position:absolute at <=1200 against the FIXED .mm-site-header, so it is neither a flex
   item nor re-parented - its centring is unchanged. Its justify-self was already inert. */
.mm-logo-group { display: flex; align-items: center; gap: 14px; }
.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; }

.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. */
/* 🚨 margin-inline-start, NOT margin-left. This -8px is an optical nudge toward the page GUTTER. The
   theme ships <html dir="rtl"> for ar + fa (mu-plugins/bmgarage-core/i18n.php) and style.css has zero
   RTL rules, so in RTL the flex row reverses, the burger becomes the rightmost item, and a PHYSICAL
   margin-left points at the NEXT SIBLING instead of the gutter - it ate the burger->spanner gap
   (measured 0px at <=560, 6px at 768, vs 8px/14px in LTR) and dropped the gutter overhang. The
   logical property gives the intended result in both directions. Do NOT add a matching
   margin-inline-end to "tighten" the ink gap: it collapses the BOX gap to 0px at <=560, putting a
   40x40 and a 24x24 tap target edge to edge. */
.mm-menu-burger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; margin-inline-start: -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 */
  .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-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-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 (BM brain: bg.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); }
/* The 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.
   NOTE (28/07): these are byte-identical to the MM Carz rebuild's rules (mmcarz/style.css) and
   .mm-dior is applied by functions.php on EVERY page, so the chips render the same in the header
   off-canvas and on the service page. Keep the two files in step — if you change sizing here,
   change it there too, or the two sites drift apart. */
#mm-chat-panel.mm-dior .mm-quickactions-row { gap: 4px; max-width: 100%; align-items: center; }

/* ---- HEADER OFF-CANVAS ONLY (Heng 28/07) -----------------------------------------------------
   Everything below is scoped with .mm-chat-fullcanvas, which header.php adds ONLY when "Chat online"
   opens the chat inside the drawer, and functions.php strips again the moment that panel closes. So
   the floating FAB widget on the page keeps the widget's own behaviour untouched — these tweaks are
   deliberately drawer-only. Do NOT lift them onto plain .mm-dior: that class is applied by
   functions.php on EVERY page and would hit the FAB too. */

/* ONE ROW, never wrapped. --bm3 sets flex-wrap:wrap !important, so beating it needs !important too
   (this selector already outranks it on specificity). If the drawer is too narrow for every chip the
   row scrolls sideways rather than stacking; the scrollbar is hidden so it reads as a clean strip. */
#mm-chat-panel.mm-dior.mm-chat-fullcanvas .mm-quickactions-row {
  display: flex; flex-wrap: nowrap !important; grid-template-columns: none;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none;
}
#mm-chat-panel.mm-dior.mm-chat-fullcanvas .mm-quickactions-row::-webkit-scrollbar { display: none; }
/* Pills hug their label instead of stretching to a grid cell. */
#mm-chat-panel.mm-dior.mm-chat-fullcanvas .mm-quickactions-row .mm-quickaction-btn { flex: 0 0 auto; width: auto; min-width: 0; white-space: nowrap; }
/* The widget gives two long chips ("What's wrong with my car?", "Current customer") their own
   full-width row, and injects .mm-chip-break spacers to force wraps. Both fight a single row. */
#mm-chat-panel.mm-dior.mm-chat-fullcanvas .mm-quickactions-row .mm-quickaction-btn--wide { flex: 0 0 auto !important; width: auto !important; grid-column: auto !important; }
#mm-chat-panel.mm-dior.mm-chat-fullcanvas .mm-quickactions-row .mm-chip-break { display: none !important; }

/* Drop the time stamp above Michi's opening greeting. render() writes stamps straight into .mm-body
   before each message, so the greeting's stamp is the body's FIRST child — :first-child removes only
   that one and keeps the later day/time separators between real messages. Drawer only; the FAB
   widget still shows its opening stamp. */
#mm-chat-panel.mm-dior.mm-chat-fullcanvas .mm-body > .mm-stamp:first-child { display: none; }
#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; }
/* 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; }
}


/* ============================== Wishlist drawer (header heart tab) ============================== */
/* 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; }
.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; }
/* BM Garage brand blend: deep blue -> brand blue -> light blue tail (the MM version ended on the
   MM Carz red #e80012 — rebranded here). 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%, #38bdf8 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%, #38bdf8 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) */
}

/* ============================== Progress dot-nav (shared) ==============================
   🚨 SALVAGED from the MM theme's Latest-Arrivals carousel block (style.css:2862-2870), where these
   rules were physically NESTED inside its @media (max-width:560px) — a block this theme drops whole.
   The landing page's mobile Google-reviews slider builds the SAME .mm-prognav markup, so the rules
   are lifted here into their own media query. Do not fold them back into another block. */
@media (max-width: 560px) {
  /* 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; }
}

/* Small phones: tighten the bar so the burger + centred logo + action icons never crowd.
   (Salvaged from the MM theme's grid-responsive @media (max-width:560px) block, style.css:3302-3305.) */
@media (max-width: 560px) {
  .mm-site-header { gap: 8px; }
  .mm-logo-group { gap: 8px; }      /* keep the new left cluster in step with the right one */
  .mm-header-actions { gap: 8px; }
  .mm-icon { padding: 3px; }
}

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

/* ============================== 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 (MM Carz logo left + BM Garage logo 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 Carz sister-brand logo — occupies the slot the social icon row used to hold (Heng 28/07).
   Height 28px keeps it clearly secondary to the 40px BM logo in the centre; the artwork is
   182x69, so width:auto preserves its aspect. .mm-footer__social rules below are retained
   for whenever the icon row returns — nothing renders them today. */
.mm-footer__mmcarz { grid-column: 1; justify-self: start; display: inline-block; transition: opacity .2s ease; }
.mm-footer__mmcarz:hover { opacity: .72; }
.mm-footer__mmcarz img { height: 28px; width: auto; display: block; }

.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: the whole social row on one line is either clipped or cramped, so wrap it.
   BM ships 8 icons (MM had 9 — the Rednote link is dropped), so this now splits 5-over-3.
   Eight at 18px + 20px gaps needs 284px, and the grid cell is only ~288px at 375px — no margin.

   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 — a lopsided orphan row. justify-content:center then centres
   the short second row under the 5 on row one. Keep the 178px cap even if the icon count changes;
   it degrades gracefully either way (9 -> 5+4, 8 -> 5+3, 7 -> 5+2).

   Breakpoint: the cell is roughly (viewport - 87px), so a comfortable 20px-gap row 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__mmcarz, .mm-footer__wordmark, .mm-footer__lang { grid-column: 1; justify-self: center; }
  /* Stack order (Heng directive): language switch on top, then the MM Carz logo (which replaced
     the socials in that slot), then the BM Garage logo last. */
  .mm-footer__lang { order: 1; }
  .mm-footer__social, .mm-footer__bspacer, .mm-footer__mmcarz { 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 — this footer 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); }
}

/* The legal line (entity + ABN) that used to sit under the centre logo was removed from the
   footer on 28/07 (Heng), so its .mm-footer__legal / .mm-footer__lmct rules were dropped with
   it — nothing in the theme carries either class now. /privacy/ still states the entity in
   prose (templates/privacy.php); that page is unaffected. */

/* ============================== 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 bmgarage-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.
   ============================================================================ */

/* ============================== Perf: off-screen section gate ==============================
   The landing page stacks several tall animated sections. Their compositor work used to run even
   while off-screen, which froze the main thread for seconds behind an opening off-canvas drawer.
   content-visibility:auto skips style/layout/paint — and therefore that rastering — until a
   section approaches the viewport; contain-intrinsic-size keeps the scrollbar stable (auto =
   remembers the real height once first rendered).
   🚨 Selector list re-pointed for BM: the MM homepage sections this used to name do not exist here.
   Do NOT gate any section that owns an overlay/dropdown escaping its own bounds — paint
   containment clips it (that is why the quote block and the date picker's host are absent). */
.mm-svsh, .mm-svgx, .mm-svap {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* Preferred contact-method toggle on the lead forms (off-canvas appointment / landing-page quote).
   Pure-CSS segmented radio pills; the submit handler reads input[name="method"]:checked.
   Drives the branded BM Garage confirmation SMS (Text/Call -> text them; Email -> no text).
   Theme-adaptive: unselected pills inherit the form's text colour (works on the light off-canvas
   form AND on a dark-hero form); selected = 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; }



/* ---- Michi showcase (dark / agentic) — ported from the MM Carz theme 29/07/2026.
       Keep in sync with the MM copy of these rules; markup is identical. ---- */
.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 action icons never crowd.
     🚨 Byte-near-duplicate of the block at style.css:916 - this later copy WINS, so keep both in
     step or an edit to the other one silently does nothing. */
  .mm-site-header { gap: 8px; }
  .mm-logo-group { 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); }