/* ════════════════════════════════════════════════════
   MAPO — Mobile-first stylesheet
   Used by mobile.html. Reuses tokens from theme.css.
   Layout: single column, hamburger drawer, 44px+ targets.
   ════════════════════════════════════════════════════ */

/* ── Reset & base ── */
html, body { height: 100%; }
body {
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-family: 'Barlow', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }

a { color: inherit; }
button { font-family: inherit; }

/* ── Screen container ── */
.m-screen {
  display: none;
  min-height: 100vh;
  flex-direction: column;
}
.m-screen.active { display: flex; }

/* ════════════════════════════════════════════════════
   LOGIN SCREEN
   ════════════════════════════════════════════════════ */
/* ── Login screen ──
   Shared with the desktop entry point via assets/css/login.css.
   The rules below only PATCH the shared layout for portrait phones:
     • condensed topbar (drop the "Software Solutions" divider)
     • .login-card sizing so it fills the viewport width nicely
     • .m-btn-primary spinner keyframe kept here since the rest of
       the mobile app depends on the m-spin keyframe.
     • Full-screen recovery modal (see next block) instead of the
       desktop's slide-out drawer.
*/
.m-login { background: var(--bg); }
.m-login .login-shell { min-height: 100vh; }

/* Ensure the login-body has enough room around the card on tall
   phones — desktop centers it fine, but iOS Safari's URL bar can
   crop the card if the body isn't padded generously. */
.m-login .login-body {
  padding: 24px 14px calc(24px + env(safe-area-inset-bottom));
}

/* On narrow screens the card should feel edge-to-edge, not a
   floating dialog. */
@media (max-width: 480px) {
  .m-login .login-card { border-radius: 10px; }
  /* Push the login topbar below the status bar too (same safe-area
     fix as the app topbar). Height grows by the inset; content pads
     down by it. */
  .m-login .login-topbar {
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 14px 0;
    gap: 10px;
  }
  .m-login .login-topbar .brand-wide { height: 34px; }
  .m-login .login-topbar .brand-sub { display: none; }  /* saves horizontal real-estate */
  .m-login .login-topbar .right { font-size: 10px; letter-spacing: 0.6px; }
}

/* Keep the mobile spinner keyframe alive — other buttons across
   the app reference m-spin (VIN scan, search etc.). */
@keyframes m-spin { to { transform: rotate(360deg); } }

/* ── Shared primary button ──
   Used by every mobile-side CTA (VIN scan, checkout, search, etc.),
   NOT just the login screen. Kept OUTSIDE any login media-query so
   it's always available. */
.m-btn-primary {
  width: 100%;
  height: 50px;
  background: var(--red);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 6px;
  transition: background 0.15s, transform 0.05s;
}
.m-btn-primary:hover  { background: var(--red-hover); }
.m-btn-primary:active { transform: scale(0.98); }
.m-btn-primary .spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: m-spin 0.7s linear infinite;
}
.m-btn-primary.loading .spinner  { display: inline-block; }
.m-btn-primary.loading .btn-text { opacity: 0.7; }

/* ── FORGOT? tab — vertical, right edge of the login card ──
   Keep the desktop look (rotated red pill sticking out from the
   right of the card). To make it fit inside a phone viewport we
   constrain the wrap so the 22-px tab has real-estate to protrude
   into, rather than falling off the right edge. */
@media (max-width: 720px) {
  .m-login .login-recovery-wrap {
    /* Leave a 30-px gutter on the right so the tab (which sits at
       the wrap's inner right edge) has somewhere to live. Keeps
       the card visually centered. */
    max-width: calc(100vw - 60px);
    margin: 0 auto;
    padding-right: 30px;
    box-sizing: border-box;
  }
  /* Same visual as desktop — vertical text, right edge, red pill. */
  .m-login .recovery-tab {
    position: absolute;
    top: 50%;
    left: auto;
    right: 0;                     /* aligned with the wrap's inner right edge */
    bottom: auto;
    transform: translateY(-50%);
    width: 22px;
    min-height: 160px;
    padding: 14px 2px;
    border-radius: 0 5px 5px 0;
    flex-direction: column;
    gap: 10px;
    font-size: 10px;
    letter-spacing: 1.5px;
    box-shadow: 3px 3px 8px rgba(0,0,0,0.08);
    z-index: 1;
  }
}

/* ── FORGOT? panel → full-screen modal on mobile ──
   Desktop slides it out from the right edge of the card. On a
   phone we take over the whole viewport instead so the two-tab
   layout has real breathing room and the email field is easy to
   tap. Uses the same open/close class (.open on the wrap) as
   desktop so auth.js needs zero changes. */
@media (max-width: 720px) {
  .m-login .recovery-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    transform: translateY(100%);   /* off-screen at rest */
    transition: transform 0.28s cubic-bezier(.2,.9,.3,1);
    box-shadow: none;
    z-index: 70;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .m-login .login-recovery-wrap.open .recovery-panel {
    transform: translateY(0);
  }
  /* When the modal is open, hide the FORGOT? pill so it doesn't
     float over the close button. */
  .m-login .login-recovery-wrap.open .recovery-tab { display: none; }
  /* Backdrop dim. Purely visual — pointer-events:none makes sure
     the pseudo-element never intercepts clicks meant for the
     panel form beneath it (the user relies on the X close button
     or the "Back to Sign In" button to exit). */
  .m-login .login-recovery-wrap.open::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 65;
    pointer-events: none;
  }

  /* ── Beefed-up close X ──
     Desktop uses 2-4px padding on the X — an ~18px tap target on
     a phone, impossible to hit reliably. Bump it to a 44×44 chip
     in the top-right corner of the modal header. */
  .m-login .recovery-close {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
  }
  .m-login .recovery-close i { font-size: 22px; }
  .m-login .recovery-close:active { background: rgba(255,255,255,0.18); }

  /* ── Persistent "Back to Sign In" button ──
     Belt-and-braces exit alongside the X in the header. Some
     users don't realise the tiny X is tappable; a full-width
     button below the recovery form is unmissable. Injected into
     the panel by mobile.js on first render. */
  .m-login .recovery-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: calc(100% - 40px);
    margin: 16px 20px 4px;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
  }
  .m-login .recovery-back-btn:active {
    background: var(--bg-panel, #f2f2f2);
  }
  .m-login .recovery-back-btn i { font-size: 18px; }
}
/* Desktop hides the mobile-only back button — the slide-out
   drawer there has plenty of visible close affordances. */
@media (min-width: 721px) {
  .recovery-back-btn { display: none; }
}

/* ════════════════════════════════════════════════════
   APP SHELL — topbar, drawer, content
   ════════════════════════════════════════════════════ */
.m-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Grow the bar by the device's top safe-area inset (status-bar /
     notch height) and pad the top by the same amount, so the logo +
     icons sit BELOW the phone's clock / Wi-Fi / battery instead of
     underneath them. The background fills the inset area too, so the
     status bar sits on a solid bar. On devices with no notch the
     inset is 0 and nothing changes. viewport-fit=cover (set in the
     <head>) is what exposes these env() values. */
  height: calc(56px + env(safe-area-inset-top, 0px));
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: env(safe-area-inset-top, 0px) calc(8px + env(safe-area-inset-right, 0px)) 0 calc(4px + env(safe-area-inset-left, 0px));
  flex-shrink: 0;
}

/* Dark MAPO topbar (Vehicle Running Cost home) */
.m-topbar-dark {
  background: #111;
  background-image:
    linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
  border-bottom: 2px solid var(--red);
  position: relative;
}
.m-topbar-dark::after {
  /* subtle hex texture for depth — purely decorative */
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
}
/* White-label: when a corporate theme is active, paint the dark
   topbar with the client's header colour instead of the MAPO black.
   Only applies for body.mapo-themed in corporate mode — standard
   MAPO users are unaffected. Text/icons stay white (corporate
   headers in this system are dark brand colours). */
body.mapo-themed[data-theme-mode="corporate"] .m-topbar-dark {
  background: var(--theme-header, #111);
  background-image: none;
}
.m-topbar-dark .m-topbar-title { color: var(--white); }
.m-topbar-dark .m-topbar-title.light { color: var(--white); }

.m-topbar-logo-center {
  flex: 1;
  /* min-width:0 lets this flex item shrink below its content width. Without
     it a wide white-label logo forces the bar wider than the screen and the
     icon buttons either shrink or get pushed out of view. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.m-topbar-logo-center .brand-wide {
  height: 36px;
  max-width: 100%;
}
.m-topbar-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 2px;
  flex-shrink: 0;
}

.m-icon-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--text-primary);
  cursor: pointer;
  border-radius: 8px;
  position: relative;
  z-index: 1;
}
.m-icon-btn:active { background: var(--bg-panel); }
.m-icon-btn.dark {
  color: var(--white);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  width: 38px;
  height: 38px;
  font-size: 18px;
  margin: 0 2px;
}
.m-icon-btn.dark:active { background: rgba(255,255,255,0.18); }
.m-topbar-actions .m-icon-btn.dark { margin: 0 1px; }

.m-topbar-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: left;
  padding-left: 4px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-topbar-brand {
  height: 32px;
  margin-right: 4px;
}
.m-topbar-brand .brand-wide { height: 32px; }

/* Drawer */
.m-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s;
  z-index: 90;
}
.m-drawer-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.m-drawer {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 84%;
  max-width: 320px;
  background: var(--white);
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(.22,.61,.36,1);
  display: flex;
  flex-direction: column;
  box-shadow: 4px 0 20px rgba(0,0,0,0.18);
}
.m-drawer.open { transform: translateX(0); }

.m-drawer-head {
  background: var(--red);
  color: var(--white);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-drawer-head .brand-wide {
  height: 36px;
}
.m-drawer-user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.m-drawer-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  overflow: hidden;
}
/* When the flag SVG is present, drop the translucent white tile so
   the flag itself shows edge-to-edge in the circle. */
.m-drawer-avatar.has-flag { background: transparent; }
.m-drawer-user-info { line-height: 1.2; }
.m-drawer-user-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}
.m-drawer-user-name {
  font-size: 13px;
  font-weight: 600;
  word-break: break-all;
}

.m-drawer-nav { flex: 1; overflow-y: auto; padding: 8px 0; }
.m-drawer-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
}
.m-drawer-item:active { background: var(--bg-panel); }
.m-drawer-item.active {
  background: var(--red-light);
  color: var(--red);
  font-weight: 600;
}
.m-drawer-item i { font-size: 20px; width: 24px; text-align: center; }

.m-drawer-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  padding: 14px 18px 6px;
}

.m-drawer-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}

/* ── Content ── */
.m-content {
  flex: 1;
  padding: 16px 14px 80px;
  overflow-y: auto;
}

/* Hero / stats */
.m-hero {
  background: linear-gradient(135deg, var(--red) 0%, var(--red-hover) 100%);
  color: var(--white);
  padding: 18px 16px;
  border-radius: 14px;
  margin-bottom: 16px;
}
.m-hero-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
  margin-bottom: 4px;
}
.m-hero-title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 4px;
}
.m-hero-sub {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 14px;
  line-height: 1.45;
}
.m-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.m-stat {
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 10px 12px;
}
.m-stat-val {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.m-stat-key {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.85;
  margin-top: 2px;
}

/* Section header */
.m-section {
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.m-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}
.m-section-title i { font-size: 14px; margin-right: 4px; vertical-align: middle; }
.m-section-count {
  margin-left: auto;
  background: var(--bg-panel);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  border: 1px solid var(--border);
}

/* Solution cards */
.m-sol-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-sol-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 44px 14px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  text-decoration: none;
  color: inherit;
  min-height: 72px;
  transition: border-color 0.15s, transform 0.05s;
}
.m-sol-card:active { transform: scale(0.99); }
.m-sol-card.clickable { border-color: var(--red-border); }
.m-sol-card.inactive { opacity: 0.72; }
.m-sol-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--red);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.m-sol-card.inactive .m-sol-icon {
  background: var(--bg-panel);
  color: var(--text-muted);
}
.m-sol-text { flex: 1; min-width: 0; }
.m-sol-name {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  line-height: 1.2;
}
.m-sol-tag {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.m-sol-meta-row {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.m-sol-info-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  border: 0;
  background: var(--bg-panel);
  color: var(--text-secondary);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
}

/* Info cards (org + account) */
/* ────────────────────────────────────────────────────
   MY ACCOUNT — lightweight profile screen (replaced
   the removed legacy dashboard). Card / row layout
   matches the rest of the app.
   ──────────────────────────────────────────────────── */
.m-acct-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.m-acct-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-primary);
}
.m-acct-card-head i { font-size: 18px; color: var(--red); }

/* My Account accordions use the shared .m-acc pattern (same visual
   language as LIFESPAN / TCO / CUSTOMIZE DRIVING CONDITIONS). The
   only overrides needed are a small margin between accordions and
   a border-radius match, since the rest of the .m-acc styles
   already handle padding, chevron rotation, and body toggling. */
.m-acct-acc {
  margin-bottom: 8px;
}
.m-acct-acc .m-acct-rows {
  gap: 8px;
}

/* ────────────────────────────────────────────────────
   SUBSCRIPTION — three-tier selector inside the
   SUBSCRIPTION accordion on My Account. Compact
   3-column grid (Vodacom "Buy" style): each card
   shows a coloured ribbon, tier name, price, and a
   feature count. Full comparison list collapses below.
   ──────────────────────────────────────────────────── */
/* Billing-cycle toggle — segmented control above the 3 tier cards. */
.m-sub-cycle-toggle {
  display: inline-flex;
  align-items: stretch;
  background: var(--bg-panel, #f4f4f4);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  margin-bottom: 10px;
  overflow: hidden;
}
.m-sub-cycle-btn {
  padding: 6px 16px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary, #555);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.m-sub-cycle-btn.is-active {
  background: var(--red, #ab161b);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(171,22,27,0.25);
}

/* Number-of-months slider — shown when the MONTHLY cycle is active. */
.m-sub-months {
  margin-bottom: 10px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.m-sub-months-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, #555);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.m-sub-months-head strong {
  font-size: 20px;
  color: var(--red, #ab161b);
  font-weight: 800;
}
.m-sub-months-slider {
  width: 100%;
  margin: 4px 0 2px;
  accent-color: var(--red, #ab161b);
}
.m-sub-months-ticks {
  display: flex;
  justify-content: space-between;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  color: var(--text-muted, #999);
  font-variant-numeric: tabular-nums;
}

.m-sub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;   /* all 3 cards fill the row's height */
  gap: 8px;
  margin-bottom: 8px;
}

.m-sub-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  /* top-padding gives the (now taller) ribbon room to breathe
     without overlapping the price line below it. */
  padding: 34px 6px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  min-height: 130px;
}
.m-sub-card:hover  { border-color: var(--red-mid, rgba(171,22,27,0.45)); }
.m-sub-card:active { transform: scale(0.98); }

/* All three tiles are the SAME size + inline — no lift, no
   heavier border, no drop-shadow difference. The coloured ribbon
   alone tells the user which tier is "featured". Keeps the row
   perfectly aligned across the top and bottom edges. */
.m-sub-card-popular {
  /* Intentionally left with no size / lift overrides so it stays
     identical to the outer two cards. */
}

/* Selected state — thick red border + inset shadow so the choice
   is unmistakable even without reading the ribbon. Works whether
   the browser supports :has() or falls back to the .is-selected
   class set by JS. */
.m-sub-card:has(input[type="radio"]:checked),
.m-sub-card.is-selected {
  border-color: var(--red);
  box-shadow: 0 0 0 2px var(--red) inset, 0 4px 10px rgba(171,22,27,0.15);
}

/* Native radio hidden — the whole card is the tap target. */
.m-sub-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Ribbon strip across the top of each card. Coloured per tier so
   the eye can jump straight to the plan the user wants. */
.m-sub-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 6px 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--white);
  border-radius: 9px 9px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-sub-ribbon-starter { background: #6b7280; }               /* neutral grey */
.m-sub-ribbon-popular { background: var(--red, #ab161b); }   /* MAPO red */
.m-sub-ribbon-full    { background: var(--green, #2e7d32); } /* upgrade green */

.m-sub-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: 'Barlow Condensed', sans-serif;
  color: var(--text-primary);
}
.m-sub-price-currency {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary, #555);
}
.m-sub-price strong {
  font-size: 24px;
  font-weight: 800;
  color: var(--red, #ab161b);
  line-height: 1;
}
.m-sub-price small {
  font-size: 10px;
  color: var(--text-muted, #999);
  font-weight: 500;
  white-space: nowrap;
}

.m-sub-feat-count {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-secondary, #555);
  margin-top: 2px;
}

/* "You get with X" panel — populated by JS with the features of
   the tier the user just picked. Only ONE tier is shown at a time
   so the user knows exactly what they're buying at the displayed
   price (no cross-references to "everything in Basic, plus…"). */
.m-sub-selected {
  position: relative;               /* anchor for .m-sub-stamp */
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--red-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(171,22,27,0.08);
}
/* The feature list needs enough right-padding for the round stamp
   so checkmark text never runs under it. Stamp itself is a fixed
   150×150 circle (see below). */
.m-sub-selected-list { padding-right: 165px; }

/* ── UNLIMITED ★ ALL VARIANTS ★ SEARCHES stamp ──
   Round postmark-style ink-stamp:
     • outer 3px solid + 2px outline (double ring)
     • inner thin ring drawn as an SVG <circle>
     • "★ ALL VARIANTS ★" arced across the top (SVG textPath)
     • giant UNLIMITED word dead center
     • "✦ SEARCHES ✦" straight-set below the centerpiece
   Purely decorative (aria-hidden) — mirrors info already in the
   feature list, but visually reassures the buyer they're not being
   nickel-and-dimed. */
.m-sub-stamp {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%) rotate(-8deg);
  width: 150px;
  height: 150px;
  border: 3px solid var(--red, #ab161b);
  outline: 2px solid var(--red, #ab161b);
  outline-offset: 4px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 40% 35%,
      rgba(255,255,255,0.92),
      rgba(255,255,255,0.75) 70%);
  color: var(--red, #ab161b);
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(171,22,27,0.20);
  /* Very slight red tint texture — a couple of low-opacity radial
     gradients fake the uneven ink density of a real rubber stamp. */
}
.m-sub-stamp::before,
.m-sub-stamp::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.m-sub-stamp::before {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.55), transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(171,22,27,0.10),  transparent 60%);
}
.m-sub-stamp::after {
  background: radial-gradient(circle at 55% 60%, transparent 65%, rgba(171,22,27,0.08) 100%);
}

/* SVG that carries the curved top text + the thin inner ring.
   Fills the whole stamp so the coordinates match the outer disc. */
.m-sub-stamp-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--red, #ab161b);
}
.m-sub-stamp-arc {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  fill: currentColor;
  text-transform: uppercase;
}

/* Center content — UNLIMITED headline + small "SEARCHES" line. */
.m-sub-stamp-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;
  text-align: center;
  line-height: 1;
  /* Nudge down a touch so it sits between the top arc and the
     bottom empty space rather than dead-center. */
  padding-top: 14px;
}
.m-sub-stamp-main {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1px;
  line-height: 0.95;
  /* Chunky double-underline strokes framing UNLIMITED for that
     official-postmark feel. */
  padding: 4px 0 3px;
  border-top: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  width: 100%;
}
.m-sub-stamp-sub {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-top: 3px;
}

/* On very narrow screens the round stamp fights the checklist for
   room. Below ~360 CSS pixels drop the right-padding and let the
   stamp sit centered under the list. */
@media (max-width: 360px) {
  .m-sub-selected-list { padding-right: 0; }
  .m-sub-stamp {
    position: static;
    transform: rotate(-4deg);
    margin: 10px auto 0;
  }
}
.m-sub-selected-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  font-family: 'Barlow Condensed', sans-serif;
}
.m-sub-selected-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #555);
}
.m-sub-selected-name {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-primary);
  margin-right: auto;   /* pushes price to the right edge */
}
.m-sub-selected-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--red, #ab161b);
  white-space: nowrap;
}
.m-sub-selected-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.55;
}
.m-sub-selected-list li {
  position: relative;
  padding-left: 20px;
}
.m-sub-selected-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green, #2e7d32);
  font-weight: 700;
  font-size: 14px;
}
/* Colour-band the checkmark to the tier that first unlocks each
   feature — this mirrors the ribbon colours on the three cards:
     • items 1-6  → FREE tier         (grey  ribbon)
     • items 7-9  → BASIC tier        (red   ribbon)
     • items 10-12 → PROFESSIONAL tier (green ribbon)
   JS attaches one of these classes to every <li> in
   _paintSelectedTierFeatures based on the item's 1-indexed
   position in tier.features. */
.m-sub-selected-list li.tier-band-free::before  { color: #6b7280; }               /* grey  */
.m-sub-selected-list li.tier-band-basic::before { color: var(--red,   #ab161b); } /* red   */
.m-sub-selected-list li.tier-band-pro::before   { color: var(--green, #2e7d32); } /* green */

/* Empty-state hint — shown before the user picks any tile so the
   space below the grid isn't just an awkward blank area. Small
   arrow pointing at the tiles + a nudge sentence. */
/* ── Persistent "Your current plan" status pill ──
   Sits between the tier features and the checkout button. Shows
   the user's highest active MAPO Mobile tier + days-to-expiry.
   Layout: [ icon | label + tier name | days + "days left" ]
   Accent colour keys off data-tier (free/basic/pro) so the pill
   visually matches the ribbons on the three cards. Urgency
   (data-state="urgent"|"expired") overrides the accent with an
   attention-grabbing orange / grey. */
.m-sub-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 4px solid #6b7280;   /* accent bar — overridden per tier below */
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  font-family: 'Barlow Condensed', sans-serif;
}
.m-sub-status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(107,114,128,0.12);
  color: #6b7280;
  flex-shrink: 0;
}
.m-sub-status-icon i { font-size: 20px; }
.m-sub-status-body {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  flex: 1;
  min-width: 0;
}
.m-sub-status-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary, #555);
}
.m-sub-status-name {
  font-size: 17px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-primary);
  margin-top: 2px;
}
.m-sub-status-expiry {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  flex-shrink: 0;
  text-align: right;
}
.m-sub-status-days {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.m-sub-status-until {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary, #555);
  margin-top: 1px;
}
/* Tier-matched accent — the icon chip is a solid colour so the
   plan the user's on reads instantly (no ambiguity between a
   grey chip and the current-plan chip). The chip colour matches
   the card ribbon: grey for FREE, red for BASIC, green for PRO. */
.m-sub-status[data-tier="free"]  { border-left-color: #6b7280; }
.m-sub-status[data-tier="free"] .m-sub-status-icon {
  background: #6b7280;
  color: var(--white);
  box-shadow: 0 1px 3px rgba(107,114,128,0.4);
}
.m-sub-status[data-tier="basic"] { border-left-color: var(--red, #ab161b); }
.m-sub-status[data-tier="basic"] .m-sub-status-icon {
  background: var(--red, #ab161b);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(171,22,27,0.4);
}
.m-sub-status[data-tier="pro"]   { border-left-color: var(--green, #2e7d32); }
.m-sub-status[data-tier="pro"] .m-sub-status-icon {
  background: var(--green, #2e7d32);
  color: var(--white);
  box-shadow: 0 1px 3px rgba(46,125,50,0.4);
}
/* Urgency states — override the accent when time is running out
   or the plan has already lapsed. */
.m-sub-status[data-state="urgent"]  .m-sub-status-days { color: #d97706; } /* amber-600 */
.m-sub-status[data-state="expired"] {
  border-left-color: #b91c1c;                /* red-700 */
  background: rgba(185,28,28,0.05);
}
.m-sub-status[data-state="expired"] .m-sub-status-days,
.m-sub-status[data-state="expired"] .m-sub-status-until { color: #b91c1c; }
.m-sub-status[data-state="forever"] .m-sub-status-days {
  font-size: 24px;
  line-height: 1;
}

.m-sub-foot-note {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  color: var(--text-muted, #999);
  text-align: center;
  margin-top: 8px;
}
.m-sub-foot-note strong { color: var(--text-primary); }

.m-sub-checkout {
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
}
.m-sub-checkout:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
/* FREE tier is included with the account — nothing to check-out.
   The button becomes a passive grey status pill reading "ACTIVATED"
   so the user doesn't try to send R 0 through PayFast. Applied by
   _updateSubscriptionFootNote() when the selected tier's amount is
   zero, removed automatically for any priced tier. */
.m-sub-checkout.is-free,
.m-sub-checkout.is-free:disabled {
  background: #6b7280;             /* neutral grey — matches the FREE ribbon */
  color: var(--white);
  opacity: 1;                       /* override :disabled dim so text stays readable */
  cursor: default;
  box-shadow: none;
}
.m-sub-checkout.is-free:hover { background: #6b7280; } /* no hover shift */
.m-sub-checkout i:first-child { font-size: 18px; }

/* Secondary "auto-renew" checkout — only rendered when MONTHLY
   cycle is active. Ghost/outline style so it reads as the "other"
   option next to the red primary button above it. */
.m-sub-checkout-alt {
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  padding: 10px 16px;
  background: transparent;
  border: 1.5px solid var(--red, #ab161b);
  border-radius: 10px;
  color: var(--red, #ab161b);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.m-sub-checkout-alt:hover  { background: rgba(171,22,27,0.06); }
.m-sub-checkout-alt:active { background: rgba(171,22,27,0.12); }
.m-sub-checkout-alt[hidden] { display: none; }
.m-sub-err {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--red-light);
  border: 1px solid var(--red-border);
  color: var(--red);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  line-height: 1.4;
}
.m-acct-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
}
.m-acct-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  overflow: hidden;
}
/* Flag variant — drop the red tile so the flag SVG occupies the
   whole circle. Same treatment as the drawer avatar. */
.m-acct-avatar.has-flag { background: transparent; }

/* Shared flag <img> styling — fills the circular avatar container
   edge to edge; used inside both .m-drawer-avatar.has-flag and
   .m-acct-avatar.has-flag. */
.m-avatar-flag {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.m-acct-profile-info { flex: 1; min-width: 0; }
.m-acct-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-acct-email {
  font-size: 12px;
  color: var(--text-secondary, #666);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.m-acct-rows { display: flex; flex-direction: column; gap: 6px; }
.m-acct-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
}
.m-acct-row:last-child { border-bottom: 0; }
.m-acct-row-k {
  color: var(--text-secondary, #666);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-size: 11px;
  font-weight: 600;
}
.m-acct-row-v {
  color: var(--text-primary);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}
/* Clickable link inside an account row (e.g. tel:/mailto:/https).
   Inherits the row weight but tinted red so the affordance reads. */
.m-acct-link {
  color: var(--red);
  text-decoration: none;
  border-bottom: 1px dotted var(--red-mid, rgba(171,22,27,0.45));
}
.m-acct-link:hover  { border-bottom-color: var(--red); }
.m-acct-link:active { opacity: 0.7; }

/* ADD THE SALES SOLUTION accordion (My Account).
   The form fields themselves reuse .form-field / .form-label /
   .input-wrap / .error-msg from login.css — they are unscoped and this
   is the same "confirm your password" interaction, so a second set of
   input styles would only be a way for the two to drift apart. Only the
   surrounding prose and the submit button needed anything new. */
/* Explicit, not left to the UA [hidden] rule. .m-acc sets no `display` today,
   so `hidden` happens to work — but the day someone adds one to .m-acc, every
   user who already owns Sales would start being offered it. */
.m-acct-acc[hidden] { display: none; }
.m-addsol-lead {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 12px;
}
.m-addsol-lead strong { color: var(--text-primary); font-weight: 600; }
.m-addsol-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  margin: 0;
}
.m-addsol-hint i { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.m-addsol-btn { margin-top: 12px; }
.m-addsol-done { text-align: center; padding: 4px 0; }
.m-addsol-done-icon { font-size: 34px; line-height: 1; color: var(--green); }
.m-addsol-done-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-primary);
  margin: 6px 0 8px;
}
.m-addsol-done .m-addsol-hint { justify-content: center; }
.m-acct-level {
  display: flex;
  align-items: center;
  gap: 12px;
}
.m-acct-level-badge {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--white);
  background: #b6b6b6;
  flex-shrink: 0;
}
.m-acct-level.is-l1 .m-acct-level-badge { background: #b6b6b6; }
.m-acct-level.is-l2 .m-acct-level-badge { background: #ffd400; color: #1a1a1a; }
.m-acct-level.is-l3 .m-acct-level-badge { background: var(--green, #2e7d32); }
.m-acct-level-info { flex: 1; min-width: 0; }
.m-acct-level-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.m-acct-level-desc {
  font-size: 12px;
  color: var(--text-secondary, #666);
  line-height: 1.4;
}
.m-acct-signout {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
  color: var(--red);
}
.m-acct-signout i { font-size: 18px; }
.m-acct-foot {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-muted, #999);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.m-info-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}
.m-info-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.m-info-card-head i {
  font-size: 18px;
  color: var(--red);
}
.m-info-card-head-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.m-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  gap: 10px;
}
.m-info-row:last-child { border-bottom: 0; }
.m-info-row .k {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.m-info-row .v {
  text-align: right;
  color: var(--text-primary);
  word-break: break-word;
}
.m-info-row .v a { color: var(--red); text-decoration: none; }

/* OEM filter + chips */
.m-oem-wrap {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
}
.m-search {
  display: flex;
  align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0 12px;
  height: 44px;
  margin-bottom: 10px;
}
.m-search i { color: var(--text-muted); margin-right: 8px; }
.m-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  height: 100%;
}
.m-filter-row {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.m-filter-chip {
  min-height: 32px;
  padding: 0 14px;
  border-radius: 16px;
  background: var(--bg-panel);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.m-filter-chip.active {
  background: var(--red-light);
  color: var(--red);
  border-color: var(--red-border);
}
.m-filter-count {
  font-size: 11px;
  color: var(--text-muted);
  padding: 4px 0 8px;
}
.m-filter-count strong { color: var(--text-primary); }

.m-oem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.m-oem-chip {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  word-break: break-word;
}
.m-oem-chip.system {
  background: var(--bg-panel);
  color: var(--text-muted);
  font-weight: 500;
}
.m-oem-chip .id {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 500;
}
.m-oem-chip.hidden { display: none; }
.m-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 30px 10px;
  color: var(--text-muted);
  font-size: 13px;
}
.m-empty i { display: block; font-size: 28px; margin-bottom: 8px; }

/* ════════════════════════════════════════════════════
   SALES SCREEN (mobile)
   ════════════════════════════════════════════════════ */
.m-sales-hero {
  background: var(--red);
  color: var(--white);
  padding: 22px 18px;
  border-radius: 0 0 18px 18px;
  margin: 0 -14px 16px;
}
.m-sales-hero-eyebrow {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.85;
}
.m-sales-hero-title {
  font-size: 22px;
  font-weight: 700;
  margin-top: 2px;
}
.m-sales-hero-sub {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 4px;
  line-height: 1.45;
}

.m-sales-action-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
}
.m-sales-action-card h3 {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-sales-action-card h3 i { color: var(--red); font-size: 18px; }
.m-sales-action-card p {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 12px;
}
.m-sales-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 0 18px;
  background: var(--red);
  color: var(--white);
  border: 0;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.3px;
  cursor: pointer;
}
.m-sales-open-btn:active { background: var(--red-hover); }

/* ════════════════════════════════════════════════════
   Modal (solution details)
   ════════════════════════════════════════════════════ */
.m-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 200;
}
.m-modal-overlay.open { display: flex; }
.m-modal {
  width: 100%;
  max-height: 92vh;
  background: var(--white);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  animation: m-slideup 0.22s ease-out;
}
@keyframes m-slideup {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.m-modal-grip {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 4px;
  border-radius: 4px;
  background: var(--border-strong);
}
.m-modal-head {
  display: flex;
  align-items: flex-start;
  padding: 18px 14px 10px;
  border-bottom: 1px solid var(--border);
}
.m-modal-title {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  padding-left: 4px;
  line-height: 1.2;
}
.m-modal-eyebrow {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.m-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.m-modal-field {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.m-modal-field:last-child { border-bottom: 0; }
.m-modal-field .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  flex-shrink: 0;
  font-weight: 600;
}
.m-modal-field .value {
  text-align: right;
  word-break: break-word;
}
.m-modal-overview {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-subtle);
  border-radius: 10px;
}
.m-modal-overview .label {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--red);
  margin-bottom: 6px;
}
.m-modal-overview .text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.m-modal-actions {
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-modal-btn {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  border: 0;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
}
.m-modal-btn-primary { background: var(--red); color: var(--white); }
.m-modal-btn-secondary {
  background: var(--bg-panel);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

/* ════════════════════════════════════════════════════
   MODEL SEARCH HOME (Vehicle Running Cost app)
   ════════════════════════════════════════════════════ */
.m-content-tight { padding: 16px 18px 32px; }

/* Split-scroll layout — frozen header block + scrollable body.
   Used on the Overview screen so the topbar + vehicle hero stay pinned
   while the 9 analysis cards scroll underneath. */
.m-content-split {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-panel);
}
.m-ov-frozen {
  flex-shrink: 0;
  padding: 4px 8px 4px;
  background: var(--bg-panel);
  z-index: 5;
}
/* When the page-head sits inside the frozen band of a detail screen,
   collapse its bottom margin so the variant tile snaps right under
   the back-button row (no matter whether the page-head uses the regular
   or .m-page-head-tight modifier). */
.m-ov-frozen .m-page-head { margin-bottom: 2px; }
.m-ov-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px 24px;
  min-height: 0;
}
.m-ov-frozen .m-ov-hero { margin-bottom: 0; }

/* ════════════════════════════════════════════════════
   MY VIRTUAL GARAGE — split layout
   ----------------------------------------------------
   Top 2/3  → user's saved garage (scrollable)
   Bottom 1/3 → VISITORS PARKING panel with a dark band
                header, mirroring the Sales Solution's
                garage drawer.
   ════════════════════════════════════════════════════ */
.m-garage-split { min-height: 0; }
.m-garage-split .m-garage-top {
  flex: 2 1 0;            /* 2 shares → ~ top 2/3 of the screen */
  min-height: 0;
}
.m-garage-visitors {
  flex: 1 1 0;            /* 1 share → ~ bottom 1/3 of the screen */
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-top: 1px solid var(--border);
  background: var(--bg-panel);
}
/* MY VIRTUAL GARAGE header — solid MAPO-green band that mirrors the
   VISITORS PARKING band structure below. Matches the Sales Solution's
   green-then-hazard-tape pairing so the two sections read as siblings. */
.m-garage-mine-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #1a7a4a;         /* same green used by the stamp of approval */
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(0,0,0,0.20);
  flex-shrink: 0;              /* never squeezed by the scroll area below */
}
.m-garage-mine-head i { font-size: 16px; color: var(--white); }
.m-garage-mine-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.35);
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}

/* VISITORS PARKING header — classic yellow-and-black road-sign
   chevron stripes (45° repeating-linear-gradient) overlaid with a
   semi-transparent black wash so the yellow label stays legible
   against the busy background. Copy-aligned with the Sales Solution. */
.m-garage-visitors-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background:
    linear-gradient(rgba(0,0,0,0.78), rgba(0,0,0,0.78)),
    repeating-linear-gradient(
      45deg,
      #ffd400 0,
      #ffd400 14px,
      #1a1a1a 14px,
      #1a1a1a 28px
    );
  color: #ffd400;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid rgba(0,0,0,0.35);
}
.m-garage-visitors-head i { font-size: 16px; color: #ffd400; }
.m-garage-visitors-count {
  margin-left: auto;
  font-size: 11px;
  color: #ffd400;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: 0.5px;
}
.m-garage-visitors-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px 24px;
  min-height: 0;
}

/* Constrain split-scroll screens to viewport height so the nested
   .m-ov-scroll has a bounded parent and its overflow-y can engage. */
#screenOverview.active,
#screenDetailedSpecs.active,
#screenFinance.active,
#screenCompetitor.active,
#screenService.active,
#screenMaintenance.active,
#screenPartsBasket.active,
#screenTradeRetail.active,
#screenTCO.active,
#screenGarage.active {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Tighter page-head row (saves ~6px of vertical space on dense screens) */
.m-page-head-tight { margin-bottom: 2px; }

/* Finance Calculator — pinned footer with monthly payment card.
   The scroll region above takes all remaining height; the footer
   stays visible regardless of scroll position. */
.m-content-fin .m-ov-scroll { padding: 6px 8px 12px; }
.m-fin-foot {
  flex-shrink: 0;
  padding: 8px 14px calc(8px + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}
.m-fin-foot .m-fin-monthly {
  padding: 10px 14px;
  margin: 0;
  box-shadow: none;
}
.m-fin-foot .m-fin-monthly-label {
  font-size: 11px;
  margin-bottom: 2px;
  letter-spacing: 0.8px;
}
.m-fin-foot .m-fin-monthly-value { font-size: 26px; }
.m-fin-foot .m-fin-monthly-value.muted { font-size: 18px; }

/* Balloon / residual note in the footer — an amber callout beneath
   the monthly figure, only shown when a residual % is set. */
.m-fin-balloon {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 14px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: #fef3e2;                 /* soft amber tint */
  border: 1px solid #f4c37a;
  color: #7a4a00;
  font-size: 12px;
  line-height: 1.35;
}
.m-fin-balloon[hidden] { display: none; }
.m-fin-balloon i {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #c07a00;
}
.m-fin-balloon strong { font-weight: 700; color: #5c3800; }

/* Tighten the scrolled body of Finance Calculator to maximise screen space */
.m-content-fin .m-acc { margin-bottom: 8px; }
.m-content-fin .m-acc-head { padding: 7px 12px; font-size: 12px; }
.m-content-fin .m-acc-body { padding: 4px 12px; }
.m-content-fin .m-field-row { padding: 2px 0; font-size: 12px; }
.m-content-fin .m-input-num { height: 28px; min-width: 90px; }
/* Stacked input pair (used for Deposit R + %) — keeps the R input
   directly above the % stepper so the ± buttons line up with the
   single-input rows beneath (Interest rate, Term, Residual / balloon). */
.m-input-stack {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: stretch;
}
.m-input-stack .m-input-num { width: 134px; min-width: 134px; }

/* ── R value + % stepper pair (Discount / Deposit) ──
   Two separate fields side by side: the R value in its own box on
   the LEFT, then the % ± stepper on the RIGHT. The stepper keeps the
   shared 134px width so its − / + buttons line up in a column with
   the Interest rate / Term / Residual steppers below. The value box
   is narrower and hangs to the left only on these two rows. */
.m-input-pair {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.m-content-fin .m-input-pair .m-input-val {
  width: 134px;
  min-width: 134px;
}
.m-content-fin .m-input-pair .m-input-val input { width: 100%; }
/* The value + % pair is wide (two 134px fields). If it doesn't fit
   beside the label, let it wrap to its own line — right-aligned —
   so the label never gets squashed. */
.m-content-fin .m-field-row:has(.m-input-pair) { flex-wrap: wrap; row-gap: 8px; }
.m-content-fin .m-field-row .m-input-pair { margin-left: auto; }

/* Every Finance row input wrapper uses the same fixed width so the −/+
   stepper buttons stack in clean vertical columns across rows. */
.m-content-fin .m-input-num { width: 134px; min-width: 134px; }
.m-input-stepper {
  padding: 0 2px;
  width: 134px;
  min-width: 134px;
}
.m-input-stepper input {
  width: 100%;
  flex: 1;
  min-width: 0;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.m-step {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-primary);
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s, transform 0.05s;
}
.m-step:hover { background: var(--bg-subtle); border-color: var(--red-border, var(--border-strong)); }
.m-step:active { transform: scale(0.92); background: var(--red); color: #fff; border-color: var(--red); }

/* ════════════ Lifespan Settings (Service Costs screen) ════════════ */
.m-ls-block {
  padding: 6px 0 4px;
  border-bottom: 1px solid var(--border);
}
.m-ls-block:last-of-type { border-bottom: 0; }
/* Read-only variant — no slider, just the value + a small source line. */
.m-ls-block-readonly { padding-bottom: 8px; }
.m-ls-source {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 2px;
}
.m-ls-source i { font-size: 12px; font-style: normal; }
.m-ls-source em { font-style: italic; }
.m-ls-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.m-ls-head strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--red);
  letter-spacing: 0.5px;
}
/* Small contextual chip after a slider label — e.g. "PETROL" / "DIESEL"
   next to FUEL PRICE. Muted so the slider value stays the headline. */
.m-ls-head .m-ls-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-subtle, #f0f0f0);
  color: var(--text-muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  vertical-align: 1px;
}
.m-ls-head .m-ls-tag:empty { display: none; }
.m-ls-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--red) 0%, rgba(171,22,27,0.15) 100%);
  border-radius: 2px;
  outline: none;
  margin: 4px 0 2px;
  cursor: pointer;
}
.m-ls-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
  transition: transform 0.1s;
}
.m-ls-slider::-webkit-slider-thumb:active { transform: scale(1.15); }
.m-ls-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  cursor: pointer;
}
.m-ls-ticks {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  padding: 0 2px;
}

/* Dual-range Lifespan slider — two overlapping <input type="range"> with
   transparent tracks. The thin grey track sits underneath; a red fill
   div between the thumbs shows the active range. Each thumb captures
   pointer events even though the inputs themselves are transparent. */
.m-ls-dual {
  position: relative;
  height: 22px;
  margin: 4px 0 2px;
}
.m-ls-dual::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 4px;
  background: rgba(171, 22, 27, 0.15);
  border-radius: 2px;
  pointer-events: none;
}
.m-ls-dual-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  background: var(--red);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}
.m-ls-slider-dual {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  pointer-events: none;     /* track ignores clicks; thumbs override */
  z-index: 2;
}
.m-ls-slider-dual::-webkit-slider-runnable-track { background: transparent; height: 4px; }
.m-ls-slider-dual::-moz-range-track            { background: transparent; height: 4px; }
.m-ls-slider-dual::-webkit-slider-thumb { pointer-events: auto; margin-top: -9px; }
.m-ls-slider-dual::-moz-range-thumb     { pointer-events: auto; }
.m-ls-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0 2px;
  font-size: 13px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.m-ls-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--red);
  cursor: pointer;
}

/* Row container so the "Include" checkbox and the "Extend Plan"
   button sit side-by-side in the Lifespan Settings accordion on
   both Service Cost and Maintenance Cost. Checkbox stays on the
   left, button hugs the right edge. */
.m-ls-check-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
}
.m-ls-check-row .m-ls-check { padding: 0; flex: 0 1 auto; }

/* "Extend Plan" button — opens a sheet where the user can add
   additional costs to the plan (wired in a follow-up turn). */
.m-ls-extend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--red-border);
  border-radius: 8px;
  background: var(--white);
  color: var(--red);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  flex: 0 0 auto;
}
.m-ls-extend:active { background: var(--red-light); transform: scale(0.98); }
.m-ls-extend i { font-size: 16px; line-height: 1; }
/* Block-level variant used at the bottom of the SERVICE, MAINTENANCE &
   WARRANTY group on Detailed Specs — sits full-width below the rows. */
.m-ls-extend.m-ls-extend-block {
  display: flex;
  width: 100%;
  justify-content: center;
  margin: 10px 0 2px;
  padding: 10px 14px;
}

/* ════════════════════════════════════════════════════
   CUSTOMIZE DRIVING CONDITIONS — five-rule picker on Maintenance Cost.
   Each rule renders as one row with a numbered badge, a title, and 11
   selectable cells (100/0 → 0/100 in 10-percent steps). The selected
   cell goes green. Compact-sized for mobile.
   ════════════════════════════════════════════════════ */
.m-dc-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-dc-row {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-areas:
    "num title"
    "num cells";
  column-gap: 6px;
  row-gap: 2px;
  align-items: stretch;
}
.m-dc-num {
  grid-area: num;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
}
/* Title bar — leftLabel · centered TITLE · rightLabel, all on one row,
   pulled out of the end cells so the picker stays compact and the cells
   underneath can all be the same width. */
.m-dc-title-bar {
  grid-area: title;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 8px;
  background: #ececec;
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  padding: 3px 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}
.m-dc-edge {
  font-size: 9px;
  font-weight: 700;
  color: var(--red);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-dc-edge-left  { text-align: left; }
.m-dc-edge-right { text-align: right; }
.m-dc-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  color: var(--text-primary);
  text-transform: uppercase;
}
.m-dc-cells {
  grid-area: cells;
  display: grid;
  /* All 11 cells share the same width — the picked one is no wider/no
     narrower than its neighbours. */
  grid-template-columns: repeat(11, 1fr);
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  background: var(--white);
}
.m-dc-cell {
  appearance: none;
  -webkit-appearance: none;
  background: var(--white);
  border: 0;
  border-right: 1px solid var(--border);
  padding: 4px 1px;
  font: inherit;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 28px;
  line-height: 1.05;
  transition: background 0.12s, color 0.12s;
}
.m-dc-cell:last-child { border-right: 0; }
.m-dc-cell:active { background: #f5f5f5; }
.m-dc-cell-end { background: #f5f5f5; font-weight: 700; }
.m-dc-cell-ratio {
  font-size: 8px;
  color: var(--text-muted);
  display: block;
  font-variant-numeric: tabular-nums;
}
.m-dc-cell-end .m-dc-cell-ratio { color: #444; }
.m-dc-cell-sel,
.m-dc-cell-sel:active {
  background: #b7e1a3;
  color: #1a3f12;
}
.m-dc-cell-sel .m-dc-cell-ratio { color: #1a3f12; font-weight: 700; }

/* RESET button — sits in the accordion head next to the title. */
.m-dc-reset {
  margin-left: auto;          /* push to the right edge of the flex head */
  flex: 0 0 auto;             /* never grow, never shrink — keeps right-anchored */
  padding: 3px 8px;
  border: 1px solid var(--red);
  border-radius: 4px;
  background: var(--white);
  color: var(--red);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  cursor: pointer;
}
.m-dc-reset:active { background: var(--red-light); }
/* Hide the chevron click-through behaviour for the RESET button */
.m-acc-head .m-dc-reset { z-index: 1; }
/* Driving-conditions head — let the title take all available space
   so RESET is anchored hard to the right edge of the same row. */
.m-acc-head-dc { flex-wrap: nowrap; }
.m-acc-head-dc .m-acc-title { flex: 1 1 auto; min-width: 0; }

/* ════════════════════════════════════════════════════
   EXTEND PLAN overlay — opens when the user taps EXTEND PLAN
   on either Service Cost or Maintenance Cost. Carries both plans
   in one sheet so the user can bump km / mth limits and add an
   Extra Cost (R) charged by the dealer for the extension.
   ════════════════════════════════════════════════════ */
.m-plan-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 22, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease;
}
.m-plan-overlay.open { opacity: 1; visibility: visible; }
.m-plan-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  background: var(--white);
  border-radius: 14px;
  padding: 22px 18px 0;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  max-height: 92vh;
  overflow: auto;
  transform: scale(0.94);
  transition: transform 0.22s cubic-bezier(0.2, 0.84, 0.32, 1.06);
}
.m-plan-overlay.open .m-plan-card { transform: scale(1); }
.m-plan-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}
.m-plan-close:active { background: rgba(0,0,0,0.06); }
.m-plan-logo {
  width: 64px;
  height: 64px;
  margin: 4px auto 8px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  overflow: hidden;
}
.m-plan-logo img { max-width: 76%; max-height: 76%; object-fit: contain; }
.m-plan-logo-fallback {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  text-align: center;
  padding: 0 4px;
}
.m-plan-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 0; /* hide the text but keep it for screen readers */
  margin: 0 0 6px;
  text-align: center;
}

.m-plan-section {
  margin: 14px 0 4px;
}
.m-plan-section-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.m-plan-current {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--red);
  text-align: right;
  margin-bottom: 10px;
}
.m-plan-field {
  display: block;
  margin: 0 0 12px;
}
.m-plan-field span {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.m-plan-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  background: var(--white);
  outline: none;
  -moz-appearance: textfield;
}
.m-plan-input:focus { border-color: var(--red); }
.m-plan-input::-webkit-outer-spin-button,
.m-plan-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.m-plan-foot {
  position: sticky;
  bottom: 0;
  margin: 18px -18px 0;
  padding: 12px 18px;
  background: var(--red-light);
  border-top: 1px solid var(--red-border);
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  text-align: center;
}
.m-plan-foot-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.m-plan-foot-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--red);
  letter-spacing: 0.5px;
}

/* ════════════════════════════════════════════════════
   TRADE & RETAIL — Lifespan Settings header toggle
   The accordion head doubles as a mode switcher. The label flips between
   "RETAIL" (green track) and "TRADE" (grey track) — sits on the right of
   the head row without interfering with the expand/collapse tap.
   ════════════════════════════════════════════════════ */
.m-acc-head .m-tr-mode {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-primary);
  cursor: pointer;
  user-select: none;
}
.m-tr-mode-label { min-width: 44px; text-align: right; }
.m-tr-mode-switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 20px;
}
.m-tr-mode-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.m-tr-mode-track {
  position: absolute;
  inset: 0;
  background: #b8b8b8;
  border-radius: 999px;
  transition: background 0.18s;
}
.m-tr-mode-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: left 0.18s;
}
.m-tr-mode-switch input:checked + .m-tr-mode-track {
  background: var(--green, #2e7d32);
}
.m-tr-mode-switch input:checked + .m-tr-mode-track .m-tr-mode-thumb {
  left: 20px;
}

/* CASH deal — dim the Finance Settings form rows so the user knows the
   inputs aren't active. Pointer events stay on so the user can still
   read or adjust the values; only the visual state changes. */
/* TCO Finance Settings has no separate cash-only fees, so the whole
   body just dims. */
.m-tco-fin-cash {
  opacity: 0.45;
}
/* Finance Calculator cash mode — dim ONLY the finance-specific rows
   (deposit, interest rate, term, residual). Discount + contract / license /
   additional rows stay fully editable since cash buyers still get a
   discount and still pay the fees. pointer-events: none on the dimmed
   rows blocks edits to inputs that have no effect anyway. */
.m-fin-cash .m-field-row:nth-child(n+2):nth-child(-n+5) {
  opacity: 0.45;
  pointer-events: none;
}

/* Three-column summary: DEPRECIATION ON MILEAGE · AVERAGE · DEPRECIATION ON AGE */
.m-tr-summary {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
  margin: 14px 0 18px;
  font-family: 'Barlow Condensed', sans-serif;
}
.m-tr-sum-col { display: flex; flex-direction: column; gap: 4px; }
.m-tr-sum-side { font-size: 11px; }
.m-tr-sum-right { text-align: right; }
.m-tr-sum-label {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--text-primary);
  line-height: 1.15;
}
.m-tr-sum-label-center {
  color: var(--red, #ab161b);
  font-size: 13px;
  text-align: center;
}
.m-tr-sum-pct {
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.m-tr-sum-right .m-tr-sum-pct { text-align: right; }
.m-tr-sum-center { text-align: center; }
.m-tr-sum-avg {
  font-family: 'Barlow', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--red, #ab161b);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  line-height: 1;
}

/* ESTIMATED CURRENT [RETAIL|TRADE] VALUE  +  ESTIMATED DEPRECIATION IN SET
   LIFESPAN — two stacked grouped value-lists. Header row in condensed-bold
   uppercase, four/three dashed-divided rows underneath with a label, a
   right-aligned tabular rand value, and an optional small suffix. */
.m-tr-value {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin: 0 0 14px;
}
.m-tr-value-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.m-tr-value-row {
  display: grid;
  grid-template-columns: 1fr auto 56px;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  border-bottom: 1px dashed var(--border);
}
.m-tr-value-row:last-child { border-bottom: 0; }
.m-tr-value-label {
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  font-weight: 600;
}
.m-tr-value-label strong {
  font-weight: 700;
  color: var(--text-primary);
}
/* Inline lifespan sublabel — e.g. "80 000 km · 32 mnt" right of the
   row label. Used on the DEPRECIATION row to remind the user which
   point on the curve is driving the figure. */
.m-tr-value-sublabel {
  display: inline-block;
  margin-left: 12px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  font-variant-numeric: tabular-nums;
}
.m-tr-value-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  white-space: nowrap;
}
.m-tr-value-num.m-tr-value-neg { color: var(--red, #ab161b); }
.m-tr-value-suffix {
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-align: left;
  white-space: nowrap;
}

/* ════════════════════════════════════════════════════
   TOTAL COST OF OWNERSHIP — breakdown table
   Four columns: category label, total cost, /km cost, include toggle.
   Last <tfoot> row shows the running total of included lines.
   ════════════════════════════════════════════════════ */
.m-tco-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.m-tco-table thead th {
  background: #fff;
  color: var(--text-primary);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 8px 8px 6px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.m-tco-table thead th:first-child { text-align: left; }
.m-tco-table tbody td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.m-tco-table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
.m-tco-label {
  text-align: right;
  font-weight: 700;
  color: var(--text-primary);
  padding-right: 8px !important;
}
.m-tco-total { text-align: right; color: var(--text-primary); white-space: nowrap; }
.m-tco-perkm { text-align: right; color: var(--text-primary); white-space: nowrap; }
/* Excluded rows fade so the user knows they're not contributing to the total. */
.m-tco-row.is-excl td { opacity: 0.4; }

/* Include / exclude toggle switch — same visual language as the
   LIFESPAN ACTIVATED / FINANCE FINANCED toggles in the accordion heads.
   Green track + thumb-right = included, grey track + thumb-left = excluded. */
.m-tco-tog { width: 44px; padding: 6px 6px !important; text-align: center; }
.m-tco-pill {
  appearance: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 32px;
  height: 16px;
  border-radius: 999px;
  background: #b8b8b8;
  transition: background 0.18s, transform 0.1s;
  vertical-align: middle;
}
.m-tco-pill:active { transform: scale(0.94); }
.m-tco-pill::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: left 0.18s;
}
.m-tco-pill.is-on { background: var(--green, #2e7d32); }
.m-tco-pill.is-on::after { left: 18px; }

/* Expandable Finance Cost / Interest Cost rows. The label cell gets a
   small chevron that rotates 90° clockwise when the description row
   beneath is open. */
.m-tco-row-exp { cursor: pointer; }
.m-tco-row-exp:hover  td { background: var(--bg-subtle, #f6f6f6); }
.m-tco-row-exp:active td { background: rgba(0, 0, 0, 0.04); }
.m-tco-exp-chev {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 6px;
  vertical-align: -1px;
  transition: transform 0.18s;
  display: inline-block;
}
.m-tco-row-exp.is-open .m-tco-exp-chev { transform: rotate(90deg); }

/* Description row — spans all 4 columns, indented, muted, with small
   pill + key-value lines describing the finance settings. */
.m-tco-desc-row td {
  background: #fafafa !important;
  border-top: 0 !important;
  padding: 0 !important;
}
.m-tco-desc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 8px 12px 10px;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.45;
  border-left: 3px solid var(--red, #ab161b);
}
.m-tco-desc strong { color: var(--text-primary); font-weight: 700; }
.m-tco-desc-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
}
.m-tco-desc-pill-green { background: var(--green, #2e7d32); }
.m-tco-desc-pill-grey  { background: #6b6b6b; }
.m-tco-desc-line {
  display: block;
  flex-basis: 100%;
  font-size: 11px;
  color: var(--text-primary);
}
.m-tco-desc-line-sub {
  font-style: italic;
  color: var(--text-muted);
  font-size: 10px;
}
/* Story mode — flowing paragraph of finance settings. Justified so the
   prose fills the row edge-to-edge. Bold values only on the key
   numbers (rate, term, monthly, etc.). */
.m-tco-desc-story {
  display: block;
  flex-basis: 100%;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-primary);
  font-weight: 400;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.m-tco-desc-story strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* ── SALES-style factor detail (sectioned key/value breakdown) ──
   Matches the SALES .tco-tyre-* look so each TCO factor's explanation
   reads identically across products. Full-width inside .m-tco-desc
   and stacks its sections vertically. */
.m-tco-tyre-detail {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 11px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.m-tco-tyre-section {
  background: var(--white);
  border: 1px solid var(--red-border);
  border-radius: 6px;
  padding: 7px 9px;
}
.m-tco-tyre-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 5px;
}
.m-tco-tyre-meta {
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
  font-size: 10px;
}
.m-tco-tyre-line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 1px 0;
  line-height: 1.4;
}
.m-tco-tyre-line .k {
  color: var(--text-secondary, #666);
  flex: 1;
  min-width: 0;
  font-weight: 500;
}
.m-tco-tyre-line .v {
  color: var(--text-primary);
  font-weight: 600;
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
/* Sub-total / combined line — dashed rule above, bolder. */
.m-tco-tyre-combined {
  margin-top: 3px;
  padding-top: 4px;
  border-top: 1px dashed var(--red-border);
}
.m-tco-tyre-combined .k,
.m-tco-tyre-combined .v { font-weight: 700; }
/* Emphasised totals block at the bottom. */
.m-tco-tyre-totals {
  background: var(--red-light);
  border-color: var(--red);
}
.m-tco-tyre-grand .k,
.m-tco-tyre-grand .v {
  font-size: 12.5px;
  color: var(--red);
  font-weight: 800;
}
.m-tco-tyre-state {
  flex-basis: 100%;
  color: var(--text-muted);
  font-style: italic;
  padding: 4px 0;
}
/* Cash-deal note under the Interest Cost detail. */
.m-tco-tyre-warn {
  padding: 6px 9px;
  border-radius: 6px;
  background: #fef3e2;
  border: 1px solid #f4c37a;
  color: #7a4a00;
  font-size: 10.5px;
  line-height: 1.4;
}

/* Grand-total footer row */
.m-tco-table tfoot .m-tco-grand td {
  background: #f6f6f6;
  border-top: 2px solid var(--border);
  border-bottom: 0;
  padding-top: 8px;
  padding-bottom: 8px;
}
.m-tco-grand-num {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}


/* Per-interval depreciation table */
.m-tr-table-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
.m-tr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.m-tr-table thead tr.m-tr-tbl-title th {
  background: #a8a8a8;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.6px;
  text-align: center;
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
}
.m-tr-table thead tr.m-tr-tbl-cols th {
  background: #fff;
  color: var(--text-muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.m-tr-table tbody td {
  padding: 5px 10px;
  border-bottom: 1px solid var(--border);
  text-align: center;
  background: #fff;
  color: var(--text-primary);
}
.m-tr-table tbody tr:last-child td { border-bottom: 0; }
.m-tr-table .m-tr-tbl-int { font-weight: 600; }
.m-tr-table .m-tr-tbl-mn  {
  color: var(--text-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  width: 56px;     /* narrow — just enough for 3-digit month counts */
}
.m-tr-table .m-tr-tbl-dep { color: var(--text-primary); }
.m-tr-table .m-tr-tbl-val { font-weight: 700; }
/* N/A cell — used on rows where the API returned no depreciation
   data (see the isNoData branch in the row renderer). Rendered as
   a soft muted pill so it's obviously not a real R value. */
.m-tr-table .m-tr-tbl-na {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  background: var(--bg-panel, #f2f2f2);
  color: var(--text-muted, #888);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
}
/* Highlight the row at the user's current mileage with a full red box —
   marks the interval whose % drives the AVERAGE-mileage figure above and
   feeds the pinned ESTIMATED TRADE / RETAIL footer below. */
.m-tr-table tbody tr.m-tr-tbl-current td {
  border-top:    2px solid var(--red, #ab161b);
  border-bottom: 2px solid var(--red, #ab161b);
  background: rgba(171, 22, 27, 0.04);
}
.m-tr-table tbody tr.m-tr-tbl-current td:first-child {
  border-left: 2px solid var(--red, #ab161b);
}
.m-tr-table tbody tr.m-tr-tbl-current td:last-child {
  border-right: 2px solid var(--red, #ab161b);
}

/* Pinned footer: ESTIMATED TRADE / RETAIL */
.m-tr-foot {
  flex-direction: column;
  align-items: stretch;
  padding: 10px 14px 12px;
  text-align: center;
}
.m-tr-foot-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 4px;
}
/* Lifespan chip in the heading — e.g. "· 80 000 km · 32 mnt". Muted so
   the main "ESTIMATED TRADE / RETAIL" title still leads the eye. */
.m-tr-foot-title-lifespan {
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  color: var(--text-muted);
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}
.m-tr-foot-title-lifespan:empty { display: none; }
.m-tr-foot-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.m-tr-foot-row small {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
}
.m-tr-foot-trade {
  color: var(--red, #ab161b);
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 2px;
}
.m-tr-foot-trade small { color: var(--text-muted); }
.m-tr-foot-retail {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.m-tr-foot-retail small {
  font-size: 11px;
  color: var(--text-muted);
}
.m-tr-foot-retail .m-tr-foot-lifespan {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-muted);
  margin-right: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.m-tr-foot-retail .m-tr-foot-lifespan:empty { display: none; }

/* ════════════ Service Cost table ════════════ */
.m-sc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.m-sc-table thead th {
  background: #1a1a1a;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 6px 6px;
  text-align: right;
}
.m-sc-table thead th:first-child { text-align: left; padding-left: 10px; }
.m-sc-table tbody td {
  padding: 5px 6px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  text-align: right;
  color: var(--text-primary);
}
.m-sc-table tbody tr:last-child td { border-bottom: 0; }
.m-sc-table tbody tr:nth-child(even) { background: var(--bg-subtle); }
.m-sc-table .sc-int { text-align: left; padding-left: 10px; min-width: 86px; }
.m-sc-table .sc-km {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}
.m-sc-table .sc-mn {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}
.m-sc-table .sc-total { font-weight: 700; }
.m-sc-table .sc-lab   { font-variant-numeric: tabular-nums; }
.m-sc-table .sc-plan-tag {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
}
/* Plan-covered rows render in a softer grey so the user can see at a
   glance which intervals fall under the OEM service plan. */
.m-sc-table .sc-row-plan td { color: var(--text-muted); }
.m-sc-table .sc-row-plan .sc-km { color: var(--text-muted); }
/* Maintenance Cost row that's covered by the OEM maintenance plan — same
   muted treatment as Service Cost's plan-absorbed rows. */
.m-mt-table tr.mt-row-plan td { color: var(--text-muted); }
.m-mt-table tr.mt-row-plan .mt-km { color: var(--text-muted); }

/* Tappable affordance — every row in the service-cost table reveals a
   parts / fluids / labour breakdown on tap. */
.m-sc-table tbody tr.sc-row { cursor: pointer; transition: background 0.12s; }
.m-sc-table tbody tr.sc-row:hover { background: var(--bg-subtle, #f6f6f6); }
.m-sc-table tbody tr.sc-row:active { background: rgba(0, 0, 0, 0.05); }

/* ════════════════════════════════════════════════════
   SERVICE INTERVAL BREAKDOWN — in-page swap (replaces the service-cost
   list when a row is tapped). 4-column table: INTERVAL | PRICE | QTY | TOTAL.
   PARTS / FLUIDS / LABOUR section bands separate the line items.
   ════════════════════════════════════════════════════ */
.m-scbd-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.m-scbd-plan-note {
  background: rgba(46, 125, 50, 0.08);
  color: var(--green, #2e7d32);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}
.m-scbd-plan-note .ti { font-size: 14px; }
.m-scbd-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
}
.m-scbd-table thead th {
  background: var(--dkgray, #1a1a1a);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-align: right;
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
}
.m-scbd-table thead th.m-scbd-th-interval { text-align: left; padding-left: 10px; }
.m-scbd-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Back-arrow + km row at the top of the breakdown body */
.m-scbd-head-row td {
  background: #fff;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}
.m-scbd-back {
  appearance: none;
  border: 0;
  background: var(--dkgray, #1a1a1a);
  color: #fff;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  vertical-align: middle;
  margin-right: 10px;
}
.m-scbd-back:active { transform: scale(0.96); }
.m-scbd-back .ti { font-size: 16px; }
.m-scbd-head-km {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  vertical-align: middle;
  color: var(--text-primary);
  letter-spacing: 0.5px;
}
.m-scbd-head-mn {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 8px;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

/* PARTS / FLUIDS / LABOUR section banner */
.m-scbd-section td {
  background: #d9d9d9;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Individual line-item rows */
.m-scbd-item td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.m-scbd-item td.m-scbd-name-cell { padding-left: 10px; text-align: left; }
.m-scbd-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  /* Anchor point for the PNA tooltip — keeps its absolute position
     relative to the name label, not the whole row / cell. */
  position: relative;
}
/* PNA-backfilled part row — red bold label with a trailing red asterisk
   flagging that MAPO calculated this line (OEM didn't publish a price).
   Row keeps the SAME line height as its neighbours so the list stays
   visually aligned; only the colour and weight change. */
.m-scbd-name-pna {
  color: var(--red);
  font-weight: 800;
  cursor: help;
}
.m-scbd-name-pna-star {
  color: var(--red);
  font-weight: 900;
  margin-left: 1px;
}
.m-scbd-name-pna:active { opacity: 0.85; }

/* Custom PNA tooltip — dark-grey panel with an amber accent bar, an
   alert-triangle icon, and light body copy. Anchored below the tapped
   red label, high z-index so it escapes any ancestor overflow. */
.m-pna-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 34px 10px 10px;
  background: #3a3f45;
  color: #f2f2f2;
  border-left: 4px solid #f5a623;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  cursor: default;
  /* Clamp width so a portrait phone can't be pushed off-screen. */
  width: max-content;
  max-width: min(360px, calc(100vw - 24px));
}
/* Right-edge collision flip — anchor to the right of the label instead
   of the left. Applied by the JS module after a getBoundingClientRect
   check when the default left-anchor would clip off-screen. */
.m-pna-tooltip-flip {
  left: auto;
  right: 0;
}
.m-pna-tooltip-icon {
  color: #f5a623;
  font-size: 16px;
  flex: 0 0 auto;
  margin-top: 1px;
}
.m-pna-tooltip-body {
  flex: 1 1 auto;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.m-pna-tooltip-close {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: #f2f2f2;
  opacity: 0.65;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-pna-tooltip-close:hover  { opacity: 1; }
.m-pna-tooltip-close .ti    { font-size: 14px; }
.m-scbd-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}
.m-scbd-num {
  font-size: 12px;
  color: var(--text-primary);
  white-space: nowrap;
}
.m-scbd-total { font-weight: 700; }

/* Grand TOTAL COST row at the bottom of the interval breakdown — a clear
   bold pair (Exc VAT then Inc VAT) so the user always knows the all-in
   number for this specific interval. */
.m-scbd-grand td {
  background: #1a1a1a;
  color: #fff;
  padding: 10px 10px;
  border-top: 2px solid var(--border);
  border-bottom: 0;
}
.m-scbd-grand .m-scbd-grand-label {
  text-align: left;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}
.m-scbd-grand .m-scbd-grand-label small {
  font-size: 10px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 4px;
  letter-spacing: 0.3px;
  text-transform: none;
}
.m-scbd-grand .m-scbd-grand-value {
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.m-scbd-grand-incl td {
  background: var(--red, #ab161b);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}
.m-scbd-grand-incl .m-scbd-grand-value {
  font-size: 18px;
}

/* ════════════ Maintenance Cost table (basket → replacement schedule) ════════════ */
/* Each row is one replacement event (one part at one km milestone). Rows
   that mark the *first* event at a new km milestone get a darker top
   border so the schedule reads as clear bands. */
.m-mt-table { table-layout: fixed; }
.m-mt-table thead th { font-size: 9.5px; }
.m-mt-table tbody td {
  vertical-align: top;
  padding: 8px 4px;
  font-size: 11px;
  border-bottom: 1px solid var(--border);
}
.m-mt-table tbody tr:nth-child(even) { background: transparent; }

/* Flat interval row — tappable, drills into the breakdown view. */
.m-mt-table tbody tr.mt-row { cursor: pointer; transition: background 0.12s; }
.m-mt-table tbody tr.mt-row td {
  background: var(--bg-subtle);
  border-top: 2px solid var(--border);
  padding-top: 10px;
  padding-bottom: 10px;
}
.m-mt-table tbody tr.mt-row:first-child td { border-top: 0; }
.m-mt-table tbody tr.mt-row:hover td { background: var(--bg-subtle-strong, #ececec); }
.m-mt-table tbody tr.mt-row:active td { background: rgba(0, 0, 0, 0.05); }

/* Right-pointing chevron — Tabler icon, no rotation transition. Signals
   "tap to drill in" rather than "expand inline". */
.m-mt-table .mt-chev-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  color: var(--text-muted);
  vertical-align: middle;
  width: 16px;
  height: 16px;
}
.m-mt-table .mt-chev-right .ti { font-size: 14px; }

/* Interval header — clickable, toggles the part rows underneath. */
.m-mt-table tbody tr.mt-head { cursor: pointer; }
.m-mt-table tbody tr.mt-head td {
  background: var(--bg-subtle);
  border-top: 2px solid var(--border);
  padding-top: 9px;
  padding-bottom: 9px;
}
.m-mt-table tbody tr.mt-head.open td { background: var(--bg-subtle-strong, var(--bg-subtle)); }
.m-mt-table tbody tr.mt-head:first-child td { border-top: 0; }
.m-mt-table .mt-summary {
  text-align: left;
  color: var(--text-muted);
  font-size: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  font-weight: 600;
  padding-left: 6px;
  position: relative;
}
.m-mt-table .mt-count { display: inline-block; }
.m-mt-table .mt-chev {
  display: inline-block;
  margin-left: 8px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-muted);
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
  vertical-align: middle;
}
.m-mt-table .mt-head.open .mt-chev { transform: rotate(0deg); }
.m-mt-table .mt-grp-total { font-weight: 700; color: var(--text-strong); }
/* Child rows hidden when the parent header is collapsed. */
.m-mt-table tbody tr.mt-child.is-hidden { display: none; }
.m-mt-table tbody tr.mt-child td {
  background: transparent;
  border-top: 0;
}
/* Synthetic LABOUR row — shown at the bottom of each expanded interval,
   carrying summed-hours × rate so the math is explicit. */
.m-mt-table tbody tr.mt-lab td {
  border-top: 1px dashed var(--border);
  background: rgba(0, 0, 0, 0.015);
}
.m-mt-table tbody tr.mt-lab .mt-name {
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.4px;
  font-size: 10px;
  text-transform: uppercase;
}
.m-mt-table tbody tr.mt-lab .mt-sub {
  color: var(--text-muted);
  font-style: italic;
}
.m-mt-table tbody tr.mt-lab .mt-hrs {
  font-weight: 600;
  color: var(--text-strong);
  font-size: 11px;
}
.m-mt-table .mt-int {
  text-align: left;
  padding-left: 10px;
  white-space: nowrap;
  width: 84px;
  font-variant-numeric: tabular-nums;
}
.m-mt-table .mt-km {
  font-weight: 700;
  color: var(--text-strong);
  font-size: 11px;
  line-height: 1.1;
}
.m-mt-table .mt-mn {
  color: var(--text-muted);
  font-size: 9.5px;
  margin-top: 2px;
}
.m-mt-table .mt-item {
  text-align: left;
  padding-left: 6px;
}
.m-mt-table .mt-name {
  font-weight: 700;
  color: var(--text-strong);
  line-height: 1.15;
  font-size: 11px;
}
.m-mt-table .mt-sub {
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.m-mt-table .mt-na { color: var(--text-muted); font-style: italic; }
.m-mt-table .mt-qty {
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  width: 52px;
}
.m-mt-table .mt-qty .mt-hrs {
  display: block;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 9.5px;
  margin-top: 2px;
}
.m-mt-table .mt-cost {
  text-align: right;
  padding-right: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 82px;
}
.m-mt-table .mt-price { font-weight: 700; }
.m-mt-table .mt-times { color: var(--text-muted); font-size: 9.5px; margin-top: 2px; }

/* ════════════ Service Cost charts ════════════ */
.m-sc-charts {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.m-sc-chart {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 10px 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.m-sc-chart-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--text-primary);
  text-transform: uppercase;
  gap: 8px;
  flex-wrap: wrap;
}
.m-sc-legend {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Barlow', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2px;
  color: var(--text-muted);
  text-transform: none;
}
.m-sc-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.m-sc-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 2px;
}
.m-sc-chart svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Dual-value (Exc / Inc VAT) footer total — used by the Service Cost
   pinned footer. Reuses the .m-fin-monthly card styling, but replaces the
   single monthly value with a stacked Exc-on-top / Inc-on-bottom block. */
.m-fin-monthly-dual { padding: 8px 14px 10px; }
.m-sc-dual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.m-sc-dual-excl {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--red);
  letter-spacing: 0.4px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m-sc-dual-excl small {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 10px;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: 0.5px;
}
.m-sc-dual-incl {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.6px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.m-sc-dual-incl strong { font-weight: 700; }
.m-sc-dual-incl small {
  font-family: 'Barlow', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
  letter-spacing: 0.5px;
}
.m-sc-dual-excl.muted,
.m-sc-dual-incl.muted { color: var(--text-muted); }
.m-content-fin .m-fin-rows { margin-bottom: 8px; }
.m-content-fin .m-fin-row { padding: 7px 12px; font-size: 12px; }
.m-content-fin .m-fin-disclaimer { margin-bottom: 0; font-size: 9px; padding: 0 2px; }

/* ════════════ Detailed Specs ════════════ */
.m-spec-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-spec-group {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.m-spec-group-head {
  background: var(--bg-subtle, #f5f5f5);
  color: var(--text-primary);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
}
.m-spec-group-body {
  padding: 0;
}
.m-spec-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  font-size: 12px;
  line-height: 1.3;
}
.m-spec-row:last-child { border-bottom: 0; }
.m-spec-k {
  color: var(--text-muted);
  flex: 0 0 45%;
  max-width: 45%;
  font-weight: 500;
}
.m-spec-v {
  color: var(--text-primary);
  flex: 1 1 auto;
  text-align: right;
  font-weight: 600;
  word-break: break-word;
}
.m-spec-empty {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.m-spec-empty i { font-size: 18px; vertical-align: middle; margin-right: 6px; }
.m-spec-error { color: var(--red); }

/* Swipe-position dot indicator above the spec list on Detailed Specs.
   1 dot per variant (selected + competitors). The active dot is filled red. */
.m-spec-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 3px 0 0;
}
.m-spec-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,0.18);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s, background 0.15s;
}
.m-spec-dot:hover { background: rgba(0,0,0,0.3); }
.m-spec-dot.active {
  background: var(--red);
  transform: scale(1.25);
}
.m-spin { display: inline-block; animation: m-spin 0.9s linear infinite; }

/* ════════════ Competitor Analysis ════════════ */
.m-comp-count {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 2px 8px;
}
.m-comp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.m-comp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.m-comp-card-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
/* "Closest Match" green pill — mirrors sales.css .winner-badge / .badge-green */
.winner-badge { display: inline-flex; }
.winner-badge .badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/* .badge-green is already defined in theme.css; this is just a fallback in
   case theme.css ships without it. */
.badge-green {
  background: var(--green-bg, rgba(26,122,74,0.08));
  color: var(--green, #1a7a4a);
  border: 1px solid var(--green-border, rgba(26,122,74,0.25));
}
/* Match-Score pill — chart-bar icon + percentage + "Match Score" label.
   Same shape across green / amber / red bands. Mirrors sales.css. */
.match-score {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 7px;
  border-radius: 20px;
  width: fit-content;
}
.match-score small {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.match-score i { font-size: 12px; }
.match-red   { background: rgba(171, 22, 27, 0.08); color: var(--red);   border: 1px solid rgba(171, 22, 27, 0.20); }
.match-green { background: rgba(26, 122, 74, 0.08); color: var(--green); border: 1px solid rgba(26, 122, 74, 0.20); }
.match-amber { background: rgba(176, 96,  0, 0.08); color: var(--amber); border: 1px solid rgba(176, 96,  0, 0.20); }
/* Embedded hero tile inside the competitor card — kill the outer border
   so it visually fuses with the metric strip beneath. */
.m-comp-hero {
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  display: block;
  transition: transform 0.05s;
}
.m-comp-hero:active { transform: scale(0.995); }
.m-comp-hero .m-ov-hero { border: 1px solid var(--border); }

/* 3-button chart-mode toggle inside each competitor card.
   Mirrors sales.css .view-toggle / .view-btn styling. */
.m-comp-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 10px 0 4px;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: var(--white);
}
.m-comp-mode-btn {
  background: var(--white);
  border: 0;
  border-right: 1px solid var(--border);
  color: var(--text-muted);
  width: 36px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
}
.m-comp-mode-btn:last-child { border-right: 0; }
.m-comp-mode-btn:hover  { background: var(--bg-subtle); color: var(--text-primary); }
.m-comp-mode-btn.active { background: var(--red); color: #fff; }
.m-comp-mode-btn i { font-size: 16px; }

/* SVG chart container shared by Bars / Radar modes. */
.m-comp-chart-svg {
  width: 100%;
  margin-top: 6px;
}
.m-comp-chart-svg svg { width: 100%; height: auto; display: block; }
.m-comp-chart-radar  svg { max-height: 280px; margin: 0 auto; }

/* Per-metric breakdown — 8 small horizontal bars (Price / Power / Torque /
   Displacement / Trans / Fuel / Year / Class), one row each. */
.m-comp-metrics {
  margin-top: 4px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 4px;
}
.m-comp-metric {
  display: grid;
  grid-template-columns: 56px 1fr 36px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.m-comp-metric-k {
  color: var(--text-muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.m-comp-metric-bar {
  background: rgba(0,0,0,0.06);
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
}
.m-comp-metric-bar > span {
  display: block;
  height: 100%;
  border-radius: 3px;
}
.m-comp-metric-v {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}

/* ════════════ My Virtual Garage ════════════ */
.m-garage-count {
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 2px 10px;
}
.m-garage-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Each garage entry is a button.m-ov-hero — reset native button styling
   so the hero tile renders cleanly, then add a tiny press feedback. */
.m-garage-tile {
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  transition: transform 0.05s, border-color 0.15s, box-shadow 0.15s;
}
.m-garage-tile:active { transform: scale(0.995); }
.m-garage-tile:hover  { border-color: var(--red-border); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Status side-glow — coloured strips on the left + right edges of each
   garage tile so the user can see at a glance whether the variant is
   current or discontinued. Stacked box-shadows: solid coloured strip
   tight against the edge + a softer outer halo + the base tile shadow. */
.m-garage-tile-current {
  box-shadow:
    -4px 0 0 0 var(--green, #2e7d32),
     4px 0 0 0 var(--green, #2e7d32),
    -8px 0 14px -4px rgba(46, 125, 50, 0.45),
     8px 0 14px -4px rgba(46, 125, 50, 0.45),
     0 2px 6px rgba(0, 0, 0, 0.08),
     0 1px 2px rgba(0, 0, 0, 0.06);
}
.m-garage-tile-current:hover {
  box-shadow:
    -4px 0 0 0 var(--green, #2e7d32),
     4px 0 0 0 var(--green, #2e7d32),
    -10px 0 18px -4px rgba(46, 125, 50, 0.55),
     10px 0 18px -4px rgba(46, 125, 50, 0.55),
     0 2px 6px rgba(0, 0, 0, 0.08),
     0 1px 2px rgba(0, 0, 0, 0.06);
}
.m-garage-tile-discon {
  box-shadow:
    -4px 0 0 0 #b71c1c,
     4px 0 0 0 #b71c1c,
    -8px 0 14px -4px rgba(183, 28, 28, 0.45),
     8px 0 14px -4px rgba(183, 28, 28, 0.45),
     0 2px 6px rgba(0, 0, 0, 0.08),
     0 1px 2px rgba(0, 0, 0, 0.06);
}
.m-garage-tile-discon:hover {
  box-shadow:
    -4px 0 0 0 #b71c1c,
     4px 0 0 0 #b71c1c,
    -10px 0 18px -4px rgba(183, 28, 28, 0.55),
     10px 0 18px -4px rgba(183, 28, 28, 0.55),
     0 2px 6px rgba(0, 0, 0, 0.08),
     0 1px 2px rgba(0, 0, 0, 0.06);
}
.m-garage-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 28px 8px 8px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s, transform 0.05s;
}
.m-garage-card:active { transform: scale(0.99); }
.m-garage-card:hover  { border-color: var(--red-border); }
.m-garage-card-img-wrap {
  width: 90px;
  height: 64px;
  flex-shrink: 0;
  background: var(--bg-subtle);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-garage-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.m-garage-card-img-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 22px;
}
.m-garage-card-info { flex: 1; min-width: 0; line-height: 1.2; }
.m-garage-card-mfr {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}
.m-garage-card-model {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--text-primary);
}
.m-garage-card-variant {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-garage-card-code {
  font-family: 'Courier New', monospace;
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 3px;
}
.m-garage-card-chev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 18px;
}

.m-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.m-page-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  text-transform: uppercase;
  line-height: 1;
}

.m-page-intro {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 22px;
  /* Justify the intro copy so both edges align with the pathway
     cards below — the ragged right edge looked out of place next
     to the neat card grid. hyphens: auto avoids awkwardly-large
     inter-word spacing on narrow phones. */
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.m-pathways {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.m-pathway {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  background: var(--white);
  border: 2px solid var(--red);
  border-radius: 8px;
  padding: 16px 16px 16px 14px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.05s, box-shadow 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.m-pathway:active { transform: scale(0.99); }
.m-pathway-icon {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: var(--red);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  flex-shrink: 0;
}
/* PNG variant — matches the "no tile, just the image" pattern used
   on the Overview / Parts Basket / Filtered Search vehicle-type
   strip. The :has() selector strips the red background and border-
   radius when a .m-pathway-icon-img is inside; the mix-blend-mode
   knocks out the white background baked into the source PNGs. */
.m-pathway-icon:has(.m-pathway-icon-img) {
  background: transparent;
  border-radius: 0;
}
.m-pathway-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  display: block;
  mix-blend-mode: multiply;
}
.m-pathway-text { flex: 1; min-width: 0; }
.m-pathway-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  margin-bottom: 4px;
  text-transform: uppercase;
  line-height: 1.1;
}
.m-pathway-text p {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--text-secondary);
  /* Justify each card's description so the paragraph edges align
     with the card border. hyphens: auto keeps the inter-word gaps
     from ballooning on narrow phones. */
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}
.m-pathway-text p strong { font-weight: 700; color: var(--text-primary); }

/* ════════════════════════════════════════════════════
   OVERVIEW HUB
   ════════════════════════════════════════════════════ */
.m-back-title {
  font-family: 'Barlow', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  padding: 4px 6px 4px 0;
  margin-left: 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s, transform 0.05s;
  -webkit-tap-highlight-color: transparent;
}
.m-back-title:hover { background: rgba(0,0,0,0.04); }
.m-back-title:active { transform: scale(0.98); }
.m-back-title:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* "OF THE" sub-label that sits beneath every page heading. flex-basis: 100%
   forces it to wrap to its own row below the icon + title pair. The left
   margin (44px) lines it up with the title text — past the arrow chip. */
.m-back-title::after {
  content: 'OF THE';
  flex-basis: 100%;
  font-family: 'Barlow', sans-serif;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0;
  line-height: 1;
  text-align: left;
  text-indent: 0;
  /* Negative top margin pulls "OF THE" up so its top edge kisses the
     bottom of the heading letter forms — no visible gap between them.
     Margin-left lines it up flush with the leading edge of the title text
     (past the arrow chip [34px] + its right-margin [10px] = 44px). */
  margin: -7px 0 0 44px;
  padding: 0;
  pointer-events: none;
}
/* Suppress the "OF THE" sub-label on screens where the heading
   reads fine on its own and the stray placeholder looked
   unfinished. Scoped per-screen so it stays on any screen that
   genuinely uses it. */
#screenVinScan        .m-back-title::after,
#screenFilteredSearch .m-back-title::after,
#screenGarage         .m-back-title::after,
#screenAccount        .m-back-title::after { content: none; }
/* Back chip — dark rounded-square button with a white arrow inside.
   Matches the .m-icon-btn.dark style used in the topbar so back-navigation
   looks consistent across the app. */
.m-back-title i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 8px;
  font-size: 20px;
  margin-right: 10px;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.05s;
}
.m-back-title:hover i  { background: #000; }
.m-back-title:active i { transform: scale(0.95); }

/* Vehicle hero */
.m-ov-hero {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px 4px 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08),
              0 1px 2px rgba(0, 0, 0, 0.06);
  position: relative;     /* anchor for the garage toggle button */
}

/* Garage-membership toggle — sits in the top-right of every selected
   variant hero. Grey when the GMV is not in My Virtual Garage, green
   when it is. Tap to flip. Uses span+role=button instead of <button>
   so it can be nested inside button-wrapped hero tiles (Garage list).  */
.m-ov-garage-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #b8b8b8;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s, box-shadow 0.18s;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  user-select: none;
}
.m-ov-garage-btn .ti { font-size: 17px; }
.m-ov-garage-btn:hover  { background: #a0a0a0; }
.m-ov-garage-btn:active { transform: scale(0.94); }
.m-ov-garage-btn.is-in  { background: var(--green, #2e7d32); }
.m-ov-garage-btn.is-in:hover { background: #267028; }
/* Yellow state — variant is in VISITORS PARKING but NOT yet saved to
   MY VIRTUAL GARAGE. Mirrors the Sales Solution's three-state convention
   (green = saved, yellow = visitor, grey = neither). Uses a dark icon
   tint against the yellow background so the car-garage glyph stays
   readable. */
.m-ov-garage-btn.is-visitor       { background: #ffd400; color: #1a1a1a; }
.m-ov-garage-btn.is-visitor .ti   { color: #1a1a1a; }
.m-ov-garage-btn.is-visitor:hover { background: #f0c800; }
.m-ov-garage-btn:focus-visible {
  outline: 2px solid var(--red, #ab161b);
  outline-offset: 2px;
}
/* Competitor variant tile (shown after a left-swipe on Detailed Specs)
   gets an amber drop shadow that matches the "Competitor" role pill. */
.is-competitor .m-ov-hero,
.m-ov-hero.is-competitor {
  box-shadow: 0 2px 8px rgba(176, 96, 0, 0.30),
              0 1px 2px rgba(176, 96, 0, 0.20);
  border-color: rgba(176, 96, 0, 0.30);
}
.m-ov-hero-top {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
/* Photo wrapper — replaces .m-ov-hero-img as the FLEX item so the MAPO
   VERIFIED rubber stamp can be absolutely positioned over the photo
   (and poke slightly outside it for the rotated rubber-stamp feel). The
   image inside fills the wrapper at the wrapper's aspect ratio. */
.m-ov-hero-photo {
  position: relative;
  flex: 0 0 33.33%;
  width: 33.33%;
  align-self: flex-start;
}
.m-ov-hero-img {
  /* Sizing now comes from the wrapper. */
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  object-fit: contain;
  background: var(--white);
  display: block;
}
.m-ov-hero-info {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.m-ov-hero-mfr {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m-ov-hero-mfr-logo {
  width: 26px;
  height: 18px;
  object-fit: contain;
  background: var(--white);
  flex-shrink: 0;
}

/* "Your Vehicle" / "Competitor" role badge — top-left of the hero tile.
   Mirrors the SALES Solution .match-score pill (green for selected, amber
   for a competitor). Margins keep it from overlapping the variant image. */
.m-ov-hero-role {
  margin: 0;
  line-height: 1;
}
.m-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.4px;
  padding: 4px 11px 4px 8px;
  border-radius: 16px;
}
.m-role-badge i { font-size: 14px; }
.m-role-yours {
  background: rgba(26, 122, 74, 0.08);
  color: var(--green);
  border: 1px solid rgba(26, 122, 74, 0.25);
}
.m-role-competitor {
  background: rgba(176, 96, 0, 0.08);
  color: var(--amber);
  border: 1px solid rgba(176, 96, 0, 0.25);
}
.m-ov-hero-model {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-primary);
}
.m-ov-hero-variant {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-top: 1px;
}
.m-ov-hero-code {
  font-family: 'Courier New', monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.3;
}
/* Bottom strip of the hero — INTRO / DISC / status pills on the left,
   prices anchored to the bottom-right corner of the card. */
.m-ov-hero-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
.m-ov-hero-tags {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.m-ov-hero-tags > * { white-space: nowrap; flex-shrink: 0; }
.m-ov-hero-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.2;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
  text-align: right;
}
.m-ov-hero-price strong {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Empty state inside hero */
.m-ov-hero-empty {
  text-align: center;
  width: 100%;
  padding: 14px 6px;
}
.m-ov-hero-empty i {
  font-size: 38px;
  color: var(--text-muted);
  display: block;
  margin-bottom: 8px;
}
.m-ov-hero-empty h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.m-ov-hero-empty p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.m-ov-hero-empty .m-btn-primary {
  width: auto;
  display: inline-flex;
  padding: 0 22px;
  height: 44px;
}

/* Analysis cards */
.m-ov-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-ov-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* Grey metallic frame */
  background: linear-gradient(180deg, #fbfbfb 0%, #ececec 100%);
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  padding: 8px 28px 8px 8px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* Red shadow bars on the left + right edges */
  box-shadow:
    inset 3px 0 0 var(--red),
    inset -3px 0 0 var(--red),
    0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.05s, box-shadow 0.15s;
}
.m-ov-card:active { transform: scale(0.99); }
.m-ov-card:hover {
  box-shadow:
    inset 3px 0 0 var(--red),
    inset -3px 0 0 var(--red),
    0 2px 8px rgba(171,22,27,0.18);
}
/* ────────────────────────────────────────────────────
   LOCKED overview card — access-level gated.
   Painted by _paintOverviewAccess() when the current user
   level is below the screen's SCREEN_MIN_LEVEL. The whole
   card dims, colours drain, and a lock badge (with the
   required level "L2" / "L3") floats top-right. Taps still
   bubble to the router — showScreen() itself rejects the
   navigation and toasts the user, so there's a single
   source of truth for the gate.
   ──────────────────────────────────────────────────── */
.m-ov-card.locked {
  /* Wash out the metallic frame + drop the red shadow bars so it
     clearly looks disabled. Still touch-friendly so users can tap
     it and see the "requires Level N" toast. */
  background: linear-gradient(180deg, #f5f5f5 0%, #e6e6e6 100%);
  border-color: #d8d8d8;
  box-shadow:
    inset 3px 0 0 #c9c9c9,
    inset -3px 0 0 #c9c9c9,
    0 1px 2px rgba(0,0,0,0.04);
  color: #9a9a9a;
  cursor: not-allowed;
}
.m-ov-card.locked:hover {
  box-shadow:
    inset 3px 0 0 #c9c9c9,
    inset -3px 0 0 #c9c9c9,
    0 1px 2px rgba(0,0,0,0.04);
}
.m-ov-card.locked .m-ov-icon {
  background: #b6b6b6;
  color: #f2f2f2;
}
.m-ov-card.locked .m-ov-title,
.m-ov-card.locked .m-ov-text p {
  color: #8f8f8f;
}
.m-ov-card.locked .m-ov-chev { color: #b6b6b6; }
.m-ov-card.locked .m-ov-dot  { background: #c9c9c9; }
/* Lock badge — appended by JS. Small dark pill in the top-right
   corner with a lock icon and the required level tag. */
.m-ov-lock {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 10px;
  background: #2a2a2a;
  color: #ffd400;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  z-index: 2;
}
.m-ov-lock i { font-size: 11px; }

/* Big centre lock watermark — a proper metallic MAPO-red padlock
   inline-SVG that sits over the card's description text as a
   "not subscribed" cue. pointer-events:none so it can never
   swallow the card's click (the tap still fires _showUpgradeModal). */
.m-ov-lock-overlay {
  position: absolute;
  top: 50%;
  left: 65%;                       /* nudged right so it clears the
                                       big coloured icon on the left */
  transform: translate(-50%, -50%) rotate(-8deg);
  width: 72px;
  height: 82px;
  pointer-events: none;
  z-index: 2;
  /* Subtle drop-shadow on the whole padlock so it lifts off the
     card background without needing a white ring behind it. */
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  /* Micro sway animation on hover — the whole locked card
     :hover activates. */
  transition: transform 0.25s ease;
}
.m-ov-card.locked:active .m-ov-lock-overlay {
  transform: translate(-50%, -50%) rotate(-14deg) scale(1.04);
}
.m-ov-lock-overlay svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;               /* let the ground-shadow ellipse
                                        breathe past the viewbox */
}
.m-ov-icon {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--red);
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
/* Bitmap icon variant — used inside .m-ov-icon on the Overview cards
   when a custom PNG has been supplied instead of a Tabler icon.
   The image is drawn edge-to-edge inside the 44×44 slot with NO red
   tile behind it (the artwork itself carries its own colour). Other
   Overview cards that still use Tabler icons keep their red tile. */
.m-ov-icon:has(.m-ov-icon-img) {
  background: transparent;
  border-radius: 0;
}
.m-ov-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  display: block;
  /* Same white-background workaround as .m-pb-cat-img — see comment
     there. Blends the PNG's white pixels transparently with the
     card behind it. */
  mix-blend-mode: multiply;
}
.m-ov-text { flex: 1; min-width: 0; }
.m-ov-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.m-ov-text p {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-secondary);
  margin: 0;
}
.m-ov-chev {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 18px;
}
.m-ov-dot {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* Vehicle hero — INTRO / DISC date pills + status badge row */
.m-ov-date-pill {
  display: inline-flex;
  align-items: center;
  background: #333;
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.m-ov-date-pill b { font-weight: 700; }
.m-ov-date-pill-disc { background: #b71c1c; }
.m-status-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
.m-status-current { background: var(--green); color: #fff; }
.m-status-discon  { background: #b71c1c;     color: #fff; }
.m-status-intro   { background: #f57c00;     color: #fff; }

/* ════════════════════════════════════════════════════
   Disclaimer footer — printed at the bottom of every detail screen.

   Lives inside the scrollable area so it sits below the screen's content
   but above any pinned footer (TOTAL SERVICE COST, TOTAL COST OF
   OWNERSHIP, etc.). Two-line layout: source attribution (dynamic) on
   top, third-party + trade-secret notice below. Both lines are muted
   italic small text — clearly secondary to the data above, but legible.
   ════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   Disclaimer footer — collapsible DATA SOURCE accordion. Reuses the
   shared .m-acc structure with a neutral skin (no red tint) so the user
   reads it as "informational" rather than "editable". Lives at the
   bottom of every detail screen.
   ════════════════════════════════════════════════════ */
.m-disclaimer {
  margin: 16px 0 4px;
}
.m-disclaimer:empty { display: none; }

/* Neutral skin for the disclaimer accordion (override the global red
   .m-acc background / border / press state). */
.m-acc-disclaimer {
  background: var(--bg-subtle, #f4f4f4);
  border-color: var(--border);
}
.m-acc-disclaimer .m-acc-head:active {
  background: var(--bg-panel, #ececec);
}
.m-acc-disclaimer .m-acc-chev { color: var(--text-muted); }
.m-acc-disclaimer .m-acc-body {
  position: relative;
  font-size: 10px;
  line-height: 1.5;
  color: var(--text-muted);
  font-style: italic;
  border-top: 1px dashed var(--border);
  overflow: hidden;       /* clip the seal if it would otherwise poke out */
}
/* Round MAPO seal as a watermark behind the disclaimer copy. Sits on
   the right edge so the legal paragraphs still read cleanly on the left,
   gets a faint opacity boost so it reads as "stamped on" rather than
   "decorative", and slips behind the text via z-index. The seal's own
   transform + tint colour come from .m-stamp / .m-stamp-fresh etc. so
   the freshness palette still applies here. */
.m-disclaimer-stamp {
  position: absolute;
  right:  -8px;
  top:    50%;
  width:  120px;
  height: 120px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
.m-disclaimer-stamp .m-stamp {
  /* The default .m-stamp positions itself absolutely to the bottom-right
     of its parent — inside this watermark wrapper we want it to fill
     the wrapper instead. */
  position: static;
  width:  100%;
  height: 100%;
  opacity: 0.28;          /* faint enough to read text through it */
  right: auto; bottom: auto;
  transform: rotate(-12deg);
  transform-origin: 50% 50%;
}
/* Text sits ABOVE the seal watermark so the paragraphs stay legible. */
.m-disclaimer-text {
  position: relative;
  z-index: 1;
}
.m-acc-disclaimer .m-acc-body p { margin: 0 0 8px; }
.m-acc-disclaimer .m-acc-body p:last-child { margin-bottom: 0; }
/* Attribution sits centred + slightly stronger so it leads the body. */
.m-acc-disclaimer .m-disclaimer-src {
  color: var(--text-primary);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.2px;
  text-align: center;
  margin-bottom: 10px;
}
/* Long-form legal paragraphs justify-aligned so they read like proper
   terms-of-use copy rather than a string of orphaned centre-justified
   sentences. */
.m-acc-disclaimer .m-disclaimer-legal {
  font-size: 9.5px;
  letter-spacing: 0.1px;
  text-align: justify;
  hyphens: auto;
}

/* Compact hero reused across detail screens */
.m-ov-hero-compact { padding: 10px; gap: 10px; }
.m-ov-hero-compact .m-ov-hero-photo { flex: 0 0 96px; width: 96px; }
.m-ov-hero-compact .m-ov-hero-img { width: 96px; height: 64px; aspect-ratio: auto; }

/* ════════════════════════════════════════════════════
   MAPO VERIFIED — round rubber-stamp seal anchored to the vehicle photo.

   Built as an SVG so we can curve text along the top and bottom arcs
   the way a real round seal does. Two concentric rings, source name
   centred, "DATA SOURCED FROM" on the top arc, "N DAYS AGO" on the
   bottom arc, decorative stars on the equator. The whole graphic is
   tinted via `color` and `currentColor` so the freshness palette
   (fresh / aging / stale / old) flips a single class on the element.
   ════════════════════════════════════════════════════ */
.m-stamp {
  position: absolute;
  right:  -10px;
  bottom: -10px;
  z-index: 2;
  width:  88px;
  height: 88px;
  /* 25 % opaque / 75 % transparent — reads as a subtle watermark on
     the vehicle photo rather than a solid seal, so the hero photo
     stays the primary visual focus. */
  opacity: 0.25;
  transform: rotate(-8deg);
  transform-origin: 100% 100%;
  pointer-events: none;
  /* Subtle drop shadow so the stamp lifts off the photo. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
}
.m-stamp text { font-family: 'Barlow Condensed', sans-serif; }
/* Knock out the white background baked into the OEM logo PNGs served by
   /api/image/getlogo. mix-blend-mode: multiply makes pure-white pixels
   transparent to whatever sits behind (the vehicle photo on the hero,
   the disclaimer paper elsewhere) while every coloured pixel keeps its
   value — so brand colours stay intact and the rectangular white
   backdrop vanishes. */
.m-stamp image {
  mix-blend-mode: multiply;
  /* Safari on iOS 15 doesn't isolate mix-blend-mode inside SVG cleanly
     without a rendering hint — this pushes the image onto its own layer
     so the blend applies to the image alone, not the whole stamp. */
  will-change: mix-blend-mode;
}

/* Legacy freshness-palette classes — the new SALES-aligned stamp uses
   hard-coded fills inside the SVG (dark green #1a7a4a) so the freshness
   bands don't change what the user sees. Kept as no-ops so any callers
   still emitting the old class names don't error. */
.m-stamp-fresh,
.m-stamp-aging,
.m-stamp-stale,
.m-stamp-old   { /* no colour override — SVG paints its own green */ }

/* Compact hero variant — smaller seal so it doesn't overpower the
   96 × 64 thumbnail used on Service / Maintenance / TCO / Trade & Retail
   / Parts Basket. */
.m-ov-hero-compact .m-stamp {
  width:  68px;
  height: 68px;
  right:  -8px;
  bottom: -8px;
}
.m-ov-hero-compact .m-ov-hero-mfr { font-size: 16px; }
.m-ov-hero-compact .m-ov-hero-model { font-size: 14px; }
.m-ov-hero-compact .m-ov-hero-variant { font-size: 12px; }

/* ════════════════════════════════════════════════════
   ACCORDION (Finance Settings, Lifespan, TCO)
   ════════════════════════════════════════════════════ */
.m-acc {
  /* Neutral grey wash on the whole tile so the user can see at a glance
     that this is an editable settings panel (Lifespan / TCO / Finance,
     etc.). #565656 at 85% transparency (alpha 0.15) — a subtle grey
     tint that replaces the previous red wash. Border shifted to a
     matching neutral grey so it doesn't clash. */
  background: rgba(86, 86, 86, 0.15);
  border: 1px solid rgba(86, 86, 86, 0.25);
  border-radius: 10px;
  margin-bottom: 6px;
  overflow: hidden;
}
.m-acc-head {
  width: 100%;
  /* Inherit the tinted background from the parent so the head and the
     opened body share the same red wash. */
  background: transparent;
  border: 0;
  padding: 12px 14px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  text-align: left;
}
/* Slightly stronger tint while the user is pressing the head. */
.m-acc-head:active { background: var(--red-mid); }
.m-acc-chev {
  font-size: 18px;
  color: var(--red);
  transition: transform 0.18s;
}
.m-acc[aria-expanded="true"] .m-acc-chev,
.m-acc.open .m-acc-chev { transform: rotate(90deg); }
.m-acc-body {
  display: none;
  padding: 12px 14px;
  /* Match the head/body divider to the red border so the open accordion
     looks like one cohesive red-tinted card instead of a tinted head with
     a neutral body. */
  border-top: 1px solid var(--red-border);
}
.m-acc.open .m-acc-body { display: block; }

/* Field rows inside accordion */
.m-field-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.m-field-row:last-child { border-bottom: 0; }
.m-field-row label {
  color: var(--text-secondary);
  font-weight: 500;
  flex: 1;
}
.m-input-num {
  display: inline-flex;
  align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 8px;
  height: 36px;
  min-width: 110px;
  transition: border-color 0.15s, background 0.15s;
}
.m-input-num:focus-within {
  border-color: var(--red);
  background: var(--white);
}
.m-input-num input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  text-align: right;
  width: 60px;
  font-family: inherit;
  -moz-appearance: textfield;
}
.m-input-num input::-webkit-outer-spin-button,
.m-input-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.m-prefix, .m-suffix {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 600;
  padding: 0 4px;
}
.m-prefix { padding-right: 6px; }
.m-suffix { padding-left: 6px; }

/* ── Additional-cost line items (Finance Calculator) ── */
.m-fin-addl {
  padding: 8px 0 2px;
  border-top: 1px solid var(--border);
}
.m-fin-addl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 4px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
/* Section heading — matched to the FINANCE SETTINGS accordion title
   (same colour + size + weight) so it reads as a peer heading. */
.m-fin-addl-head label {
  color: var(--text-primary);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* Add-item button — full-width, at the BOTTOM of the group. */
.m-fin-addl-add {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px dashed var(--red, #ab161b);
  border-radius: 8px;
  background: transparent;
  color: var(--red, #ab161b);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  cursor: pointer;
}
.m-fin-addl-add i { font-size: 16px; }
.m-fin-addl-add:active { background: rgba(171,22,27,0.08); }

/* User-added items list — sits between the fixed fees and the add
   button. Empty by default (no placeholder text — the group already
   shows Contract fee + License & reg). */
.m-fin-addl-list { display: flex; flex-direction: column; gap: 6px; }
.m-fin-addl-list:empty { display: none; }
.m-fin-addl-list .m-fin-addl-item:first-child { margin-top: 6px; }
.m-fin-addl-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Description field — flexes to fill; the amount + remove stay fixed. */
.m-fin-addl-desc {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-primary);
  outline: 0;
  transition: border-color 0.15s, background 0.15s;
}
.m-fin-addl-desc:focus { border-color: var(--red); background: var(--white); }
.m-fin-addl-amt { min-width: 96px; flex-shrink: 0; }
.m-fin-addl-amt input { width: 56px; }
.m-fin-addl-del {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.m-fin-addl-del:hover  { color: var(--red); border-color: var(--red); }
.m-fin-addl-del:active { background: var(--bg-panel, #f2f2f2); }
.m-fin-addl-del i { font-size: 16px; }

/* ════════════════════════════════════════════════════
   FINANCE CALCULATOR
   ════════════════════════════════════════════════════ */
.m-fin-rows {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 12px;
  overflow: hidden;
}
.m-fin-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.m-fin-row:last-child { border-bottom: 0; }
.m-fin-row .k {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-primary);
  font-size: 12px;
}
.m-fin-row .v {
  font-family: 'Barlow', sans-serif;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.m-fin-row.muted .k,
.m-fin-row.muted .v { color: var(--text-muted); font-weight: 500; }
.m-fin-row.total {
  background: var(--bg-subtle);
  border-top: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
}
.m-fin-row.total .k,
.m-fin-row.total .v {
  font-size: 14px;
  font-weight: 700;
}
.m-fin-row.grand .v {
  color: var(--red);
  font-size: 15px;
}

.m-fin-disclaimer {
  font-size: 10px;
  line-height: 1.45;
  color: var(--text-muted);
  margin-bottom: 14px;
  padding: 0 4px;
}

.m-fin-monthly {
  background: var(--white);
  border: 2px solid var(--red);
  border-radius: 12px;
  padding: 18px 14px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(171,22,27,0.08);
}
.m-fin-monthly-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.m-fin-monthly-value {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 32px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 1px;
  line-height: 1;
}
.m-fin-monthly-value.muted { color: var(--text-muted); font-size: 22px; }

/* ════════════════════════════════════════════════════
   PICKER (Filtered Search)
   ════════════════════════════════════════════════════ */

/* Category card */
/* Vehicle category strip on Filtered Search. 11 categories don't fit
   in a 4-column grid on a phone, so the strip is a horizontally
   scrollable flex row. Each cell is fixed-width so the buttons
   remain tap-friendly at 72 px wide. */
.m-cat-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  /* Tighter vertical padding — the icons don't need much breathing
     room above and below them; the outer margin below the strip
     already separates it from the picker form. */
  padding: 4px 6px;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.m-cat-card::-webkit-scrollbar { display: none; }
.m-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  background: transparent;
  border: 0;
  /* Trim vertical padding on each tile too — the tap target is
     still comfortable at ~60px min-height (48 icon + label + gap). */
  padding: 3px 4px;
  cursor: pointer;
  font-family: inherit;
  flex: 0 0 72px;
  min-height: 68px;
}
/* No tile behind the PNG — just the icon itself. The PNG carries
   its own colour and outline; sitting it on a bare background
   matches the "whole button = icon" treatment used on the Overview
   and Parts Basket screens. */
.m-cat-icon {
  width: 48px;
  height: 48px;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}
.m-cat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  display: block;
  /* White-background workaround — multiplies the PNG's white pixels
     against whatever is behind them so the "background" of the icon
     effectively disappears. Same trick used on all other PNG icons
     in the app. */
  mix-blend-mode: multiply;
}
/* No background on the active icon either — the whole "active"
   tell now sits on the label (which flips to red below). Keeping
   the icon itself completely unadorned matches "just the image
   that is loaded". */
.m-cat[aria-pressed="true"] .m-cat-icon {
  background: transparent;
  border-radius: 0;
}
.m-cat-label {
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.15;
  max-width: 70px;
  /* Break only on whitespace, never mid-word — avoids
     "MOTORCYCLE / S" or "CONSTRUCTIO / N" on narrow tiles. Long
     single-word labels overflow harmlessly (they're always short
     enough that this isn't a problem in practice). */
  word-break: normal;
  overflow-wrap: normal;
}
.m-cat[aria-pressed="true"] .m-cat-label { color: var(--red); }
.m-cat.disabled { opacity: 0.45; cursor: not-allowed; }
.m-cat.disabled .m-cat-icon { background: transparent; }
.m-cat.disabled .m-cat-label { color: var(--text-muted); }

/* "Coming soon" state — softer than disabled. Icon is still tinted
   down to signal "not yet clickable for data", but a small SOON
   ribbon top-right + tappable cursor + a caption below the strip
   tell the user it's in development, not off-limits to them. */
.m-cat.is-soon {
  position: relative;
  cursor: pointer;
  opacity: 0.7;
}
.m-cat.is-soon .m-cat-icon img { filter: grayscale(0.6); }
.m-cat.is-soon .m-cat-label   { color: var(--text-muted); }
.m-cat.is-soon:hover { opacity: 0.9; }
.m-cat.is-soon:active { transform: scale(0.97); }

/* Ribbon badge floating above the icon — reads "COMING SOON" so
   it's unambiguous. Sized down to fit inside the 72 px tile width
   without overflowing (letter-spacing zeroed, tight padding). */
.m-cat-badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 5px;
  background: var(--red, #ab161b);
  color: var(--white);
  border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.15;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 2;
}
/* Explanatory note below the strip. Small, muted, with a tools
   icon so the message reads as "under construction" instead of
   an error. */
.m-cat-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -10px 2px 14px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff7ea;
  border: 1px solid #f0d894;
  color: #7a5b12;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  line-height: 1.35;
}
.m-cat-note i {
  font-size: 14px;
  flex-shrink: 0;
  color: #b47d10;
}
.m-cat-note strong { color: var(--red, #ab161b); }

/* ════════════════════════════════════════════════════
   FILTER SEARCH — MAPO look
   ----------------------------------------------------
   Same red-tinted tile treatment used by the LIFESPAN /
   TCO SETTINGS accordions elsewhere in the app. Each
   filter reads as a MAPO tile: red-light background,
   red border, Barlow Condensed uppercase label pinned
   left, big bold red chevron on the right, and the
   selected value painted in bold red so a filled field
   pops at a glance.
   ════════════════════════════════════════════════════ */

/* Counter prompt — now a red-tinted callout tile with the counter
   digit rendered as a big bold red numeral, matching the SETTINGS
   accordion visual language. */
/* The visible "Please select 3 options" prompt row is hidden — the
   rule itself is still enforced by updateCounter() (which disables
   the SHOW MATCHED button until ≥3 filters are chosen AND at least
   one row matches), but the header row was noise on both screens.
   Kept the DOM node so #pickCounter can still receive updates
   silently without JS changes. */
.m-pick-prompt {
  display: none;
}
/* Retained for reference — original styling of the prompt row. */
.m-pick-prompt-legacy {
  background: var(--red-light);
  border: 1px solid var(--red-border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.m-pick-prompt strong {
  display: block;
  flex: 1 1 auto;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.2;
  margin-bottom: 0;
}
.m-pick-counter {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.m-pick-counter span {
  font-size: 22px;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}

/* Filter list — tight vertical stack of MAPO tiles. */
.m-pick-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.m-pick-select {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--red-light);
  border: 1px solid var(--red-border);
  border-radius: 10px;
  padding: 0 40px 0 14px;
  height: 46px;
  transition: border-color 0.15s, background 0.15s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  cursor: pointer;
}
.m-pick-select:focus-within,
.m-pick-select.has-value {
  border-color: var(--red);
}
/* Slightly stronger tint once a value is set so a filled field reads
   as "committed", not just "hovered". */
.m-pick-select.has-value { background: var(--red-mid); }
.m-pick-select.disabled {
  opacity: 0.55;
  background: var(--bg-subtle);
  border-color: var(--border);
  cursor: not-allowed;
  box-shadow: none;
}
.m-pick-select.disabled select { color: var(--text-muted); }

/* Label — Barlow Condensed uppercase, pinned left. No float anymore;
   the label always sits in the same spot so the tile reads like a
   proper MAPO settings row, not a form input. Scope: exclude the
   custom-trigger value span (that has its own right-aligned styling). */
.m-pick-select > span:not(.m-pick-trigger-value) {
  position: static;
  top: auto; left: auto;
  transform: none;
  padding: 0;
  background: transparent;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  pointer-events: none;
  flex: 0 0 auto;
  line-height: 1;
}
.m-pick-select.disabled > span:not(.m-pick-trigger-value) {
  color: var(--text-muted);
  font-weight: 600;
}

/* Native <select> — right-aligned inside the tile. Sits alongside the
   label with the selected value visible on the right so the user can
   scan the filter list top-to-bottom and see all their choices without
   having to open each dropdown. */
.m-pick-select select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: right;
  text-align-last: right;      /* Firefox */
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
}
/* Bold red once a real value is selected — the highlight signals
   "committed" at a glance across the whole filter list. */
.m-pick-select.has-value select {
  color: var(--red);
  font-weight: 800;
}

/* Custom-trigger buttons (GROUP / MODEL / VARIANT tile pickers). Same
   visual chrome as the native-select tiles, but the value slot has to
   accept both a text label and an OEM logo image. */
.m-pick-trigger {
  font-family: inherit;
  text-align: left;
}
.m-pick-trigger:disabled { cursor: not-allowed; }
.m-pick-trigger-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-primary);
  flex: 0 0 auto;
  line-height: 1;
}
.m-pick-trigger:disabled .m-pick-trigger-label {
  color: var(--text-muted);
  font-weight: 600;
}
.m-pick-trigger-value {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 800;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-pick-trigger-value img {
  max-height: 22px;
  max-width: 60px;
  object-fit: contain;
  flex: 0 0 auto;
  /* OEM logos ship as PNGs with a solid white background baked in.
     Multiply blends the white pixels against whatever's behind
     them so the logo sits cleanly on the tinted trigger tile. */
  mix-blend-mode: multiply;
}

/* The actual native select — styled flat */
.m-pick-select select {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
}
.m-pick-select select:focus { outline: 0; }
.m-pick-select:not(.has-value) select { color: transparent; }
/* Always render the dropdown's <option> rows in solid text — the transparent
   colour trick above is only meant to hide the closed-state placeholder. */
.m-pick-select select option {
  color: var(--text-primary);
  background: var(--white);
  font-weight: 500;
}
.m-pick-select select option:disabled {
  color: var(--text-muted);
}

/* Custom trigger (Group dropdown) — looks like a select, opens a sheet */
.m-pick-trigger {
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  position: relative;
}
.m-pick-trigger:disabled,
.m-pick-trigger.disabled { cursor: not-allowed; }
.m-pick-trigger-label {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  background: var(--white);
  padding: 0 4px;
  pointer-events: none;
  transition: top 0.15s, font-size 0.15s, color 0.15s;
}
.m-pick-trigger.has-value .m-pick-trigger-label {
  top: -8px;
  transform: none;
  font-size: 9px;
  color: var(--text-muted);
}
/* The value display is the only flex-flow child, so it carries the centering */
.m-pick-trigger-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* Pad-left only when no value so the centred placeholder label has room.
     When a value is present, the floating label moved up so we don't need it. */
}
.m-pick-trigger:not(.has-value) .m-pick-trigger-value { visibility: hidden; }
.m-pick-trigger-value img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  /* Same white-background workaround as the other .m-pick-trigger
     img rule above — this selector is the newer / more specific
     one; both stay in place to catch every path through the CSS
     cascade. */
  mix-blend-mode: multiply;
}

/* Group picker sheet — grid of OEM cards */
.m-group-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
}
.m-group-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 2px 4px;
  cursor: pointer;
  font-family: inherit;
  min-height: 96px;
  text-align: center;
  transition: border-color 0.15s, transform 0.05s;
}
.m-group-cell:active { transform: scale(0.97); }
.m-group-cell:hover,
.m-group-cell.selected { border-color: var(--red); }
.m-group-cell.selected { background: var(--red-light); }
.m-group-logo {
  width: 100%;
  max-width: 110px;
  height: 70px;
  object-fit: contain;
  background: transparent;
  border-radius: 4px;
  /* OEM PNGs have white backgrounds baked in — blend them away so
     the logo reads on the group-picker card without a bordered
     white box. */
  mix-blend-mode: multiply;
}
.m-group-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-muted);
  line-height: 1.15;
  word-break: break-word;
}
.m-group-cell.disabled { opacity: 0.45; cursor: not-allowed; }
.m-group-cell.disabled:hover { border-color: var(--border); }

/* ════════════════════════════════════════════════════
   GENERIC LIST PICKER — Model Class / Fuel Type /
   Transmission / Drive Type / Status share this look
   ----------------------------------------------------
   Replaces the native iOS <select> picker (which was
   truncating labels into an unusable wheel). Each row
   is a large, tap-friendly button with the full label
   left-aligned and a check icon on the right for the
   currently-selected value.
   ════════════════════════════════════════════════════ */
.m-list-picker-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom));
}
.m-pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
  -webkit-tap-highlight-color: transparent;
}
.m-pick-row:hover,
.m-pick-row.selected { border-color: var(--red); }
.m-pick-row.selected { background: var(--red-light); color: var(--red); }
.m-pick-row:active   { transform: scale(0.98); }
.m-pick-row-label {
  flex: 1;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  display: flex;
  align-items: center;
  gap: 8px;
}
.m-pick-row-check {
  font-size: 20px;
  color: var(--red);
  flex-shrink: 0;
}
/* "Clear selection" row sits at the top when a value is already picked —
   softer look so it doesn't compete with the actual choices. */
.m-pick-row-clear {
  background: var(--bg-panel);
  color: var(--text-muted);
  font-weight: 500;
}
.m-pick-row-clear:hover { border-color: var(--red-mid); color: var(--red); }

/* ════════════════════════════════════════════════════
   MODEL picker — Sales-style tile grid
   ----------------------------------------------------
   Each tile shows the model name in bold uppercase up top,
   the position number on the right, then a "<icon> N variants"
   footer line styled in the brand red. Mirrors the layout shown
   on the SALES Solution screenshot.
   ════════════════════════════════════════════════════ */
.m-model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
}
.m-model-cell {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px 8px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  min-height: 76px;
  transition: border-color 0.15s, transform 0.05s, background 0.15s;
}
.m-model-cell:active { transform: scale(0.98); }
.m-model-cell:hover,
.m-model-cell.selected { border-color: var(--red); }
.m-model-cell.selected { background: var(--red-light); }
.m-model-cell-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.m-model-cell-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.1;
  word-break: break-word;
  flex: 1 1 auto;
}
.m-model-cell-idx {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.m-model-cell-foot {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-muted);
}
.m-model-cell-foot .ti {
  font-size: 14px;
  color: var(--text-muted);
}
.m-model-cell-count {
  font-weight: 700;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.m-model-cell-label { color: var(--text-muted); }

/* ════════════════════════════════════════════════════
   VARIANT picker — Sales-style tile grid grouped by year
   ----------------------------------------------------
   Each tile carries the per-variant photo, name, CURRENT /
   DISCONTINUED badge, MAPO code + intro month, a row of spec
   chips, and a Select button. Tiles sit inside year-anchored
   sections with a red underline header.
   ════════════════════════════════════════════════════ */
.m-variant-body {
  padding: 0;
}
.m-variant-year-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 14px 6px;
  border-bottom: 2px solid var(--red);
  margin: 0 14px 8px;
}
.m-variant-year-head:not(:first-child) { margin-top: 14px; }
.m-variant-year-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.4px;
  line-height: 1;
}
.m-variant-year-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.m-variant-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 0 14px 14px;
}
/* Wider modals on larger screens give us two columns. */
@media (min-width: 560px) {
  .m-variant-grid { grid-template-columns: repeat(2, 1fr); }
}
/* The variant modal is a touch wider than the OEM/Model modals so
   the photo + chips have room to breathe. */
.m-modal.m-modal-wide { max-width: 720px; }

.m-variant-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px 10px;
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.05s, background 0.15s;
}
.m-variant-cell:active { transform: scale(0.99); }
.m-variant-cell:hover,
.m-variant-cell.selected { border-color: var(--red); }
.m-variant-cell.selected { background: var(--red-light); }

.m-variant-photo-wrap {
  width: 100%;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f5;
  border-radius: 6px;
  overflow: hidden;
}
.m-variant-photo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.m-variant-photo-fallback::before {
  content: '\ea53';                  /* ti-car (Tabler) */
  font-family: 'tabler-icons';
  font-size: 36px;
  color: var(--text-muted);
}
.m-variant-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.m-variant-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-primary);
  line-height: 1.1;
  flex: 1 1 auto;
  word-break: break-word;
}
.m-variant-badge {
  flex: 0 0 auto;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.m-variant-badge-current { background: #e7f5ea; color: #1e6e2a; border-color: #b6e0bd; }
.m-variant-badge-discon  { background: #f1f1f3; color: #4a4a52; border-color: #d8d8de; }
.m-variant-badge-other   { background: #f7f7f9; color: var(--text-muted); border-color: var(--border); }
.m-variant-code {
  font-size: 10px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.m-variant-code-dot { color: var(--text-muted); opacity: 0.6; padding: 0 2px; }
.m-variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.m-variant-chip {
  display: inline-block;
  padding: 3px 8px;
  background: #f4f4f5;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.m-variant-chip-blue {
  background: #eaf3ff;
  border-color: #c7dcf7;
  color: #1d4f97;
  font-weight: 600;
}
.m-variant-select-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.m-variant-select-btn {
  display: inline-block;
  padding: 4px 14px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-primary);
  pointer-events: none;             /* the whole tile is clickable */
}
.m-variant-cell.selected .m-variant-select-btn {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.m-pick-select > .ti {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--red);            /* MAPO red chevron */
  font-size: 20px;
  pointer-events: none;
}
.m-pick-select.disabled > .ti { color: var(--text-muted); }

/* Reset + Show Matched action row */
.m-pick-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.m-pick-reset-sm {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 12px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m-pick-show {
  flex: 1;
  min-height: 44px;
  height: 44px;
  padding: 0 16px;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  letter-spacing: 1px;
}
.m-pick-show:disabled {
  background: var(--bg-panel);
  color: var(--text-muted);
  cursor: not-allowed;
}
.m-pick-show:disabled:hover { background: var(--bg-panel); }
.m-pick-show i { font-size: 16px; }

/* Applied-filter chips on the Search Results screen */
.m-results-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.m-results-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--red-light);
  color: var(--red);
  border: 1px solid var(--red-border);
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.m-results-chip-k {
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 0.5px;
}
.m-results-chip img {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.m-search-lg { height: 48px; margin-bottom: 12px; }
.m-search-lg input { font-size: 16px; }
.m-search-lg .m-pw-toggle { width: 36px; height: 36px; }

.m-picker-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0 10px;
  min-height: 22px;
}
.m-btn-link {
  background: transparent;
  border: 0;
  color: var(--red);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.m-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.m-picker-row {
  width: 100%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-height: 64px;
  transition: border-color 0.15s, transform 0.05s;
}
.m-picker-row:active { transform: scale(0.99); }
.m-picker-row:hover { border-color: var(--red-border); }
.m-picker-img {
  width: 56px;
  height: 40px;
  object-fit: contain;
  background: var(--bg-subtle);
  border-radius: 4px;
  flex-shrink: 0;
}
.m-picker-row-text { flex: 1; min-width: 0; line-height: 1.25; }
.m-picker-row-mfr {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.m-picker-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.m-picker-row-variant {
  font-size: 11.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-picker-row-meta {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.m-picker-row-price {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--red);
  flex-shrink: 0;
  margin-left: 6px;
}

.m-picker-more {
  text-align: center;
  margin-top: 12px;
}
.m-btn-secondary {
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 0 18px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.m-btn-secondary:active { background: var(--bg-panel); }

.m-picker-error {
  background: var(--red-light);
  border: 1px solid var(--red-border);
  border-radius: 8px;
  padding: 12px;
  color: var(--red);
  font-size: 13px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.m-picker-error i { font-size: 18px; flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   SEARCH RESULTS — 2-column grid cards (matches the mockup)
   ════════════════════════════════════════════════════ */

/* Big year heading above the grid */
.m-results-year {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  margin: 4px 0 12px;
  letter-spacing: 1px;
}

.m-picker-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Per-year divider rendered between groups of variant cards. Spans the
   full width of the 2-column grid via grid-column: 1 / -1. */
.m-picker-year-divider {
  grid-column: 1 / -1;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-primary);
  text-transform: uppercase;
  padding: 8px 2px 4px;
  border-bottom: 2px solid var(--red);
  margin-top: 4px;
}
.m-picker-year-divider:first-child { margin-top: 0; }
.m-picker-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: border-color 0.15s, transform 0.05s, box-shadow 0.15s;
}
.m-picker-card:active { transform: scale(0.99); }
.m-picker-card:hover  { border-color: var(--red-border); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }

/* Image area — top of the card, white, padded so the vehicle has breathing room */
.m-picker-card-img-wrap {
  background: var(--white);
  padding: 10px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 92px;
}
.m-picker-card-img {
  width: 100%;
  max-height: 88px;
  object-fit: contain;
  display: block;
  background: transparent;
}
.m-picker-card-img-fallback {
  background: var(--white);
}

/* Info section — grey panel with the metadata */
.m-picker-card-info {
  background: var(--bg-subtle);
  padding: 10px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.m-picker-card-title {
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.2px;
  line-height: 1.15;
}
.m-picker-card-variant {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-primary);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.m-picker-card-code {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

/* Tag row: INTRO date + status pill */
.m-picker-card-tags {
  display: flex;
  gap: 4px;
  margin: 4px 0 2px;
  flex-wrap: wrap;
}
.m-picker-card-tag {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 2px;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1.35;
}
.m-picker-card-tag.tag-intro    { background: var(--dkgray); }
.m-picker-card-tag.tag-current  { background: var(--green); }
.m-picker-card-tag.tag-discon   { background: var(--red); }

/* Price block */
.m-picker-card-prices {
  margin-top: 4px;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.m-picker-card-price-excl,
.m-picker-card-price-incl {
  font-family: 'Barlow', sans-serif;
  font-variant-numeric: tabular-nums;
}
.m-picker-card-price-excl {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}
.m-picker-card-price-excl small,
.m-picker-card-price-incl small {
  font-size: 9px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.3px;
  margin-left: 4px;
}
.m-picker-card-price-incl {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Action bar at the bottom of the card */
.m-picker-card-actions {
  display: flex;
  align-items: stretch;
  gap: 0;
  border-top: 1px solid var(--border);
}
.m-picker-card-actions button {
  border: 0;
  font-family: 'Barlow', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.m-picker-card-action-view {
  background: var(--dkgray);
  color: var(--white);
  width: 44px;
  flex-shrink: 0;
}
.m-picker-card-action-view i { font-size: 16px; }
.m-picker-card-action-view:active { background: #1a1a1a; }
.m-picker-card-action-garage {
  background: var(--red);
  color: var(--white);
  flex: 1;
}
.m-picker-card-action-garage:active { background: var(--red-hover); }
.m-picker-card-action-garage i { font-size: 14px; }
.m-picker-card-action-garage.is-added {
  background: var(--green);
}
.m-picker-card-action-garage.is-added i.ti-car-garage { display: none; }

/* ────────────────────────────────────────────────────
   Three-state garage/visitor decoration on Search Result cards
   ----------------------------------------------------
   Mirrors the Overview hero convention:
     • GREEN  — variant is in MY VIRTUAL GARAGE (is-in-garage)
     • YELLOW — variant is in VISITORS PARKING (is-in-visitors)
     • RED    — default "Add to Garage" call-to-action
   Card gets a coloured left border AND a matching ribbon over
   the photo so state is legible even before the user notices
   the action button colour.
   ──────────────────────────────────────────────────── */
.m-picker-card.is-in-garage {
  border-left: 4px solid var(--green, #2e7d32);
}
.m-picker-card.is-in-visitors {
  border-left: 4px solid #ffd400;
}
.m-picker-card-ribbon {
  position: absolute;
  top: 6px;
  left: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 2;
  pointer-events: none;
}
.m-picker-card-ribbon i { font-size: 12px; }
.m-picker-card-ribbon-garage  { background: var(--green, #2e7d32); }
.m-picker-card-ribbon-visitor { background: #ffd400; color: #1a1a1a; }
.m-picker-card-ribbon-visitor i { color: #1a1a1a; }
/* Ribbon lives inside the image wrap — make sure it can position. */
.m-picker-card-img-wrap { position: relative; }
/* Action-button state mirrors the ribbon so all three visual
   surfaces (card border, ribbon, button) tell the same story. */
.m-picker-card-action-garage.is-in-garage {
  background: var(--green, #2e7d32);
  color: var(--white);
}
.m-picker-card-action-garage.is-in-garage:active {
  background: #267028;
}
.m-picker-card-action-garage.is-in-visitors {
  background: #ffd400;
  color: #1a1a1a;
}
.m-picker-card-action-garage.is-in-visitors:active {
  background: #f0c800;
}

/* Narrow phones — keep two columns but tighten everything */
@media (max-width: 360px) {
  .m-picker-list { gap: 8px; }
  .m-picker-card-info { padding: 8px 8px 6px; }
  .m-picker-card-action-garage { font-size: 10px; }
}

/* Tablet+ — three columns once there's room */
@media (min-width: 700px) {
  .m-picker-list { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════════════════════════════════════════════
   TOAST — single-line, bottom-centred, auto-dismiss
   ════════════════════════════════════════════════════ */
.m-toast {
  position: fixed;
  left: 50%;
  bottom: calc(20px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,20,20,0.94);
  color: var(--white);
  padding: 10px 18px;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.22s;
  white-space: nowrap;
  max-width: 88vw;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}
.m-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════
   STUB SCREENS (VIN, Filtered, Garage)
   ════════════════════════════════════════════════════ */
.m-stub {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.m-stub-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--red-light);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin-bottom: 6px;
}

/* ════════════════════════════════════════════════════
   VIN SCAN — license-disc PDF417 scanner
   ═══════════════════════════════════════════════════ */
.m-vin-content {
  padding: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* White background across the whole VIN SCAN screen — overrides the
     app's default subtle-grey body so the idle card + camera frame
     sit on a clean sheet. Uses !important + direct hex to beat any
     later cascade that lands on the body/screen surface. */
  background: #ffffff !important;
}
/* Force the entire VIN SCAN surface — screen container, page-head,
   and every state panel (idle / error / manual / result) — onto a
   pure-white background so the app's default subtle-grey never
   bleeds through around the CTA cards. */
#screenVinScan,
#screenVinScan .m-page-head,
#screenVinScan .m-vin-idle,
#screenVinScan .m-vin-error,
#screenVinScan .m-vin-result { background: #ffffff !important; }
/* CRITICAL — every state panel has `display: flex` (or column) so the
   default browser `[hidden] { display: none }` rule gets overridden and
   every panel ends up visible at once. Force the hidden attribute to
   actually hide each state panel. */
.m-vin-idle[hidden],
.m-vin-error[hidden],
.m-vin-scanner[hidden],
.m-vin-result[hidden] { display: none !important; }
/* Idle + error card — reuse the .m-stub-icon vibe but centre-fit the
   screen so the CTA button feels tappable one-handed. */
.m-vin-idle,
.m-vin-error {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  /* Anchor content to the TOP of the flex container instead of
     vertically centering it — the CTA card should feel "above the
     fold" rather than floating dead-center on a tall viewport. */
  justify-content: flex-start;
  padding: 40px 24px 20px;
  background: var(--bg-panel);
}
.m-vin-idle-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  max-width: 340px;
}
.m-vin-idle-icon {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--red-light);
  color: var(--red);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin-bottom: 6px;
}
.m-vin-idle-icon-warn {
  background: #fdecc8;
  color: #c07a00;
}
.m-vin-idle h2,
.m-vin-error h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin: 0;
}
.m-vin-idle p,
.m-vin-error p {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
  margin: 0 0 6px;
}
.m-vin-idle .m-btn-primary,
.m-vin-error .m-btn-primary { min-height: 48px; padding: 0 22px; }
/* Upload button — sits below "Open Camera" as a secondary action.
   Same footprint so the two CTAs stack cleanly. */
.m-vin-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--border);
  border-radius: 6px;
  /* Light-grey fill so the secondary action reads clearly against
     the now-white VIN SCAN backdrop (a plain white button was
     invisible on a white page). */
  background: var(--bg-panel, #f2f2f2);
  color: var(--text-primary);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.m-vin-upload-btn:hover  { border-color: var(--red); color: var(--red); }
.m-vin-upload-btn:active { background: var(--border, #e0e0e0); }
.m-vin-upload-btn i      { font-size: 16px; }

/* ────────────────────────────────────────────────────
   Manual VIN entry — shown inside the error panel when
   Scandit + BarcodeDetector + html5-qrcode all fail to
   decode a barcode. Gives the user a bulletproof way
   forward: type the VIN, we run the SAME VinId lookup
   pipeline as a real scan.
   ──────────────────────────────────────────────────── */
.m-vin-manual {
  width: 100%;
  max-width: 420px;
  margin: 4px 0 12px;
  padding: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  text-align: left;
}
.m-vin-manual-reasons {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  color: var(--text-secondary, #555);
  line-height: 1.4;
  margin-bottom: 12px;
}
.m-vin-manual-reasons strong {
  display: block;
  color: var(--text-primary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 12px;
  margin-bottom: 6px;
}
.m-vin-manual-reasons ul {
  margin: 0 0 8px;
  padding-left: 18px;
}
.m-vin-manual-reasons li { margin-bottom: 2px; }
.m-vin-manual-reasons p { margin: 8px 0 0; color: var(--text-primary); }
.m-vin-manual-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.m-vin-manual-field span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary, #666);
}
.m-vin-manual-field input,
.m-vin-manual-field select {
  min-height: 44px;
  padding: 0 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}
.m-vin-manual-field input:focus,
.m-vin-manual-field select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-light);
}
.m-vin-manual .m-btn-primary {
  width: 100%;
  margin-top: 4px;
}
.m-vin-manual-err {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--red-light);
  border: 1px solid var(--red-border);
  color: var(--red);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  line-height: 1.4;
}

/* ────────────────────────────────────────────────────
   Embedded Filtered Search picker inside the VIN Scan
   manual-entry section. The picker itself (portalled
   in from #pickerPortal) carries its own styling; this
   just gives it a section header and a bit of spacing.
   ──────────────────────────────────────────────────── */
.m-vin-manual-picker {
  width: 100%;
  max-width: 420px;
  margin: 12px 0 8px;
  text-align: left;
}
.m-vin-manual-picker-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 0 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-primary);
}
.m-vin-manual-picker-head i {
  font-size: 16px;
  color: var(--red);
}

/* On-screen diagnostic box on the error panel. Collapsed by default;
   tap the summary to expand and read the full log — useful when the
   user reports "camera doesn't open" and we can't see their DevTools. */
.m-vin-debug {
  margin-top: 12px;
  width: 100%;
  max-width: 340px;
  font-size: 11px;
  text-align: left;
  color: var(--text-secondary);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.m-vin-debug summary {
  cursor: pointer;
  padding: 6px 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  outline: none;
}
.m-vin-debug-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px 0;
  border-top: 1px solid var(--border);
}
.m-vin-debug-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
}
.m-vin-debug-copy:active { background: var(--bg-panel); }
.m-vin-debug-copy.is-copied {
  background: #e7f5ea;
  border-color: #b6e0bd;
  color: #1e6e2a;
}
.m-vin-debug-copy i { font-size: 14px; }
.m-vin-debug pre {
  margin: 0;
  padding: 8px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--text-secondary);
  max-height: 260px;
  overflow-y: auto;
  /* iOS Safari and Android WebView both suppress text selection by
     default on containers with a summary/details ancestor or with any
     click affordance. Force selection so the user can long-press to
     copy the log lines. */
  -webkit-user-select: text !important;
  -moz-user-select:    text !important;
  -ms-user-select:     text !important;
  user-select:         text !important;
  -webkit-touch-callout: default !important;
  cursor: text;
}
.m-vin-idle-note {
  font-size: 11px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.m-vin-idle-note i { font-size: 14px; color: var(--text-muted); }

/* Scanner — fullscreen video with a red framing target overlaid. */
.m-vin-scanner {
  position: relative;
  flex: 1 1 auto;
  background: #000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.m-vin-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* html5-qrcode injects its own <video> — make sure it fills the frame
   and covers (not letterboxes) so the barcode looks big enough. */
.m-vin-video video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  background: #000;
}
/* Four-corner viewfinder — sits over the middle 70 %-ish of the video
   so the user knows where to line up the disc. */
.m-vin-frame {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(78vw, 320px);
  aspect-ratio: 4 / 3;
  pointer-events: none;
}
.m-vin-frame-c {
  position: absolute;
  width: 28px;
  height: 28px;
  border: 3px solid var(--red);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.6));
}
.m-vin-frame-tl { top: 0;    left: 0;    border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.m-vin-frame-tr { top: 0;    right: 0;   border-left: 0;  border-bottom: 0; border-top-right-radius: 6px; }
.m-vin-frame-bl { bottom: 0; left: 0;    border-right: 0; border-top: 0;    border-bottom-left-radius: 6px; }
.m-vin-frame-br { bottom: 0; right: 0;   border-left: 0;  border-top: 0;    border-bottom-right-radius: 6px; }
/* Status pill floating below the frame — dark background, small font. */
.m-vin-status {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.72);
  color: var(--white);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(4px);
  max-width: calc(100% - 32px);
  text-align: center;
}
.m-vin-status i { font-size: 14px; }
.m-vin-status.m-vin-status-error {
  background: rgba(171, 22, 27, 0.92);
}
.m-vin-actions {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  padding: 0 16px;
}
.m-vin-actions .m-btn-secondary {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.1);
  min-height: 42px;
  padding: 0 22px;
  font-weight: 700;
  letter-spacing: 0.6px;
}

/* Result panel — scrollable list of extracted fields with a big match
   card at the bottom when we found the vehicle in ISCO. */
.m-vin-result {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}
.m-vin-result-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--green, #2e7d32);
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  flex-shrink: 0;
}
.m-vin-result-head i { font-size: 20px; }
.m-vin-result-body {
  flex: 0 1 auto;
  padding: 4px 16px 8px;
  background: var(--white);
}
.m-vin-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.m-vin-row:last-child { border-bottom: 0; }
.m-vin-row-k {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  flex: 0 0 auto;
  min-width: 130px;
}
.m-vin-row-v {
  font-weight: 700;
  color: var(--text-primary);
  text-align: right;
  word-break: break-all;
  flex: 1 1 auto;
  font-variant-numeric: tabular-nums;
}
.m-vin-result-match {
  margin: 12px 16px 20px;
  padding: 14px;
  border-radius: 10px;
  background: var(--red-light);
  border: 1px solid var(--red-border);
}
/* When VinId returned a full variant we render the same hero tile
   the rest of the app uses. Strip the red-tinted card frame so the
   hero's own frame isn't nested inside a second one — the header
   pill above and the hint line below carry the "identified" context. */
.m-vin-result-match.has-hero {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 12px 16px 16px;
}
.m-vin-result-match.has-hero .m-vin-hero-embed {
  margin: 0;
}
/* Small green success header above the embedded hero tile. */
.m-vin-hero-head {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  background: #e7f5ea;
  color: #1e6e2a;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 8px;
}
.m-vin-hero-head i { font-size: 13px; }
/* Amber "not identified" variant of the header — used when the
   VinId lookup couldn't match this VIN to a MAPO catalogue variant.
   Same shape as the success pill so it doesn't jar visually, just a
   different colour so it's obvious at a glance which state we're in. */
.m-vin-hero-head-unknown {
  background: #fff3cd;
  color: #856404;
}
/* Small hint line below the hero tile — points at the OPEN VEHICLE
   button in the fixed action row so users don't miss the next step. */
.m-vin-hero-hint {
  margin-top: 8px;
  padding: 0 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  color: var(--text-secondary, #666);
  text-align: center;
}
.m-vin-result-match-empty {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
  padding: 12px;
}
.m-vin-result-match-head {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--red);
  margin-bottom: 6px;
}
.m-vin-result-match-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.15;
  margin-bottom: 2px;
}
.m-vin-result-match-sub {
  font-size: 12px;
  color: var(--text-secondary);
}
.m-vin-result-actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--white);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.m-vin-result-actions button { flex: 1 1 0; min-height: 46px; }
.m-vin-result-actions .m-btn-secondary { flex: 0 0 auto; padding: 0 18px; }
.m-stub h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}
.m-stub p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  max-width: 420px;
  margin-bottom: 12px;
}
.m-stub .m-btn-primary { width: auto; padding: 0 22px; }

/* ════════════════════════════════════════════════════
   PARTS BASKET screen
   Top: horizontal-scroll icon strip (one tile per Main category)
   List: grey banner per Sub section, then a part row with
         checkbox · name · price · qty-stepper · line total.
   Footer: pinned TOTAL BASKET COST (reuses .m-fin-foot styling).
   ════════════════════════════════════════════════════ */
.m-pb-cats {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 4px 4px;
  margin: 6px 0 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-pb-cats::-webkit-scrollbar { display: none; }
.m-pb-cat {
  appearance: none;
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 8px;
  width: 46px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
  color: var(--text-primary);
}
.m-pb-cat .ti { font-size: 22px; }
/* Bitmap icon variant — used when PB_CATEGORY_ICONS ships a PNG path
   instead of a Tabler class. Strip the white tile so the artwork
   fills the whole 46×46 button edge-to-edge — the PNG carries its
   own colour and outline. Other category buttons that still use
   Tabler icons keep their white tile untouched. */
.m-pb-cat:has(.m-pb-cat-img) {
  background: transparent;
  border-color: transparent;
  border-radius: 0;
}
.m-pb-cat:has(.m-pb-cat-img):hover {
  border-color: transparent;
}
.m-pb-cat:has(.m-pb-cat-img).is-active {
  /* Active state — no red tint. Darker border + drop shadow so
     the selected basket lifts off the strip. Border stays visible
     even without the tile so the button still reads as tappable. */
  background: transparent;
  border: 2px solid var(--dkgray, #1a1a1a);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.m-pb-cat-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0;
  display: block;
  /* PNG icons ship with a solid white background baked in (they're
     exported without an alpha channel). mix-blend-mode: multiply
     tells the browser to blend the image with whatever is behind
     it — pure white pixels multiply to nothing, so the background
     effectively becomes transparent, while the darker artwork
     retains its colour. */
  mix-blend-mode: multiply;
}
.m-pb-cat:active { transform: scale(0.96); }
.m-pb-cat:hover  { border-color: var(--red-border); }
.m-pb-cat.is-active {
  /* Consistent with the PNG variant above — no coloured tile,
     just a darker border and a soft drop-shadow to lift the
     selected basket. */
  border: 2px solid var(--dkgray, #1a1a1a);
  background: transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.m-pb-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
}
.m-pb-table thead th {
  background: transparent;
  color: var(--text-muted);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-align: right;
  padding: 8px 6px 6px;
  border-bottom: 1px solid var(--border);
}
.m-pb-table thead th.m-pb-th-name { text-align: left; }
.m-pb-th-num { text-align: right; }

/* Sub-section banner (grey band spanning all columns) */
.m-pb-table tbody tr.m-pb-sub td {
  background: #d9d9d9;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-primary);
  padding: 6px 10px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Part row */
.m-pb-table tbody tr.m-pb-row td {
  padding: 6px 4px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  background: #fff;
}
.m-pb-table tbody tr.m-pb-row.is-checked td { background: rgba(46, 125, 50, 0.04); }
.m-pb-chk-cell { width: 32px; text-align: center; }

/* Checkbox — square, MAPO red when ticked */
.m-pb-chk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  cursor: pointer;
  position: relative;
}
.m-pb-chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.m-pb-chk span {
  width: 18px;
  height: 18px;
  border: 2px solid var(--text-muted);
  border-radius: 3px;
  background: #fff;
  display: inline-block;
  position: relative;
  transition: background 0.12s, border-color 0.12s;
}
.m-pb-chk input:checked + span {
  background: var(--red, #ab161b);
  border-color: var(--red, #ab161b);
}
.m-pb-chk input:checked + span::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.m-pb-name-cell { padding-left: 0 !important; }
.m-pb-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.2px;
}
.m-pb-price,
.m-pb-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  white-space: nowrap;
}
.m-pb-total { font-weight: 700; }

/* Qty stepper — minus / number / plus, compact for the table cell */
.m-pb-qty-cell { padding: 0 4px !important; text-align: center; }
.m-pb-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.m-pb-step {
  appearance: none;
  border: 0;
  background: #f0f0f0;
  width: 22px;
  height: 22px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.m-pb-step:active { background: #d8d8d8; }
.m-pb-qty {
  display: inline-block;
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
  background: #fff;
}

/* ── Tablet+: keep mobile layout but center & widen ── */
@media (min-width: 768px) {
  .m-oem-grid { grid-template-columns: repeat(3, 1fr); }
  .m-stats-grid { grid-template-columns: repeat(4, 1fr); }
  .m-content { padding: 22px 22px 60px; max-width: 720px; margin: 0 auto; width: 100%; }
  .m-content-tight { max-width: 640px; margin: 0 auto; padding: 22px 22px 40px; }
  .m-sales-hero { margin: 0 -22px 16px; }
  .m-pathway-icon { width: 72px; height: 72px; font-size: 36px; }
}

/* ════════════════════════════════════════════════════
   UPDATE BANNER — shown when a newer app version is detected
   Non-blocking, slides down from the top, has its own dismiss.
   ════════════════════════════════════════════════════ */
.m-update-banner {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(-140%);
  width: calc(100% - 20px);
  max-width: 520px;
  background: var(--red, #ab161b);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  padding: 10px 10px 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 400;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  pointer-events: none;
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
}
.m-update-banner.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.m-update-banner-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}
.m-update-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.m-update-banner-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.m-update-banner-sub {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.m-update-banner-btn {
  appearance: none;
  border: 0;
  background: #fff;
  color: var(--red, #ab161b);
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, background 0.15s;
}
.m-update-banner-btn:active { transform: scale(0.96); }
.m-update-banner-btn[disabled] {
  opacity: 0.7;
  cursor: default;
  background: rgba(255, 255, 255, 0.7);
}
.m-update-banner-x {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
}
.m-update-banner-x:active { background: rgba(255, 255, 255, 0.15); }

/* ════════════════════════════════════════════════════
   INSTALL BANNER — shown when the PWA isn't installed yet
   Slides up from the bottom. White card, MAPO red Install button.
   ════════════════════════════════════════════════════ */
.m-install-banner {
  position: fixed;
  left: 50%;
  bottom: calc(8px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(140%);
  width: calc(100% - 20px);
  max-width: 520px;
  background: #fff;
  color: var(--text-primary);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  padding: 10px 10px 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 400;
  opacity: 0;
  transition: opacity 0.22s ease, transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  pointer-events: none;
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  border: 1px solid var(--border);
}
.m-install-banner.is-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.m-install-banner-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: #fff;
  flex-shrink: 0;
  object-fit: contain;
  padding: 2px;
}
.m-install-banner-text {
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.m-install-banner-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}
.m-install-banner-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.m-install-banner-btn {
  appearance: none;
  border: 0;
  background: var(--red, #ab161b);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.1s, background 0.15s;
}
.m-install-banner-btn:active { transform: scale(0.96); background: var(--red-hover, #8d1217); }
.m-install-banner-x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
}
.m-install-banner-x:active { background: rgba(0, 0, 0, 0.06); }

/* ════════════════════════════════════════════════════
   iOS INSTALL SHEET — Safari can't fire beforeinstallprompt, so we walk
   the user through the Share → Add to Home Screen flow manually.
   Modal-style backdrop + bottom card. Tap-outside-to-close.
   ════════════════════════════════════════════════════ */
.m-ios-install-sheet {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 500;
  padding: 12px;
  animation: m-ios-install-fade 0.2s ease;
}
@keyframes m-ios-install-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.m-ios-install-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  padding: 18px 18px 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  font-family: 'Barlow', system-ui, -apple-system, sans-serif;
  animation: m-ios-install-rise 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes m-ios-install-rise {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.m-ios-install-close {
  position: absolute;
  top: 8px;
  right: 8px;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 16px;
}
.m-ios-install-close:active { background: rgba(0, 0, 0, 0.06); }
.m-ios-install-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.m-ios-install-head img {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: contain;
}
.m-ios-install-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text-primary);
}
.m-ios-install-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.m-ios-install-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.m-ios-install-steps li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-primary);
}
.m-ios-step-num {
  background: var(--red, #ab161b);
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
}
.m-ios-step-text strong { font-weight: 700; }
.m-ios-step-text .ti {
  font-size: 15px;
  vertical-align: -2px;
  color: var(--red, #ab161b);
  margin: 0 1px;
}

/* Drawer-footer version chip — make it tappable-looking but understated */
.m-drawer-foot #appVersion {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}

/* ════════════════════════════════════════════════════
   APP THEME picker (My Account) — Corporate vs MAPO tiles
   ══════════════════════════════════════════════════════ */
.m-theme-picker { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.m-theme-hint {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.4;
}
.m-theme-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.m-theme-tile {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.m-theme-tile:active { transform: scale(0.99); }
.m-theme-tile-selected {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(171,22,27,0.15);
}
.m-theme-tile-unavailable { cursor: not-allowed; opacity: 0.55; }
.m-theme-preview {
  position: relative;
  height: 44px;
  border-radius: 5px;
  overflow: hidden;
}
.m-theme-preview-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 8px;
}
.m-theme-preview-pill {
  position: absolute;
  bottom: 6px;
  left: 6px;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
}
.m-theme-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-primary);
  text-align: center;
}
.m-theme-status {
  font-size: 10px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}
.m-theme-status i { font-size: 12px; }
.m-theme-tile-selected .m-theme-status { color: var(--red); font-weight: 700; }

/* ════════════════════════════════════════════════════
   UPGRADE PROMPT MODAL — locked-feature CTA
   ────────────────────────────────────────────────────
   Shown by _showUpgradeModal() when the user taps a card whose
   SCREEN_MIN_LEVEL is higher than their current MAPO Mobile access
   level. Replaces the old lock-toast so the upgrade CTA is
   prominent and tappable. Follows the same .m-modal-overlay .open
   pattern as the group/model/list pickers, so it shares their
   backdrop dim + slide-up animation.
   ══════════════════════════════════════════════════════ */
.m-upgrade-modal {
  border-radius: 18px 18px 0 0;
  max-height: 92vh;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.m-upgrade-body {
  padding: 4px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.m-upgrade-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
}
.m-upgrade-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe4a3 0%, #ffb84d 100%);
  color: #7a4a00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 6px;
  box-shadow: 0 4px 12px rgba(255,163,50,0.35);
}
.m-upgrade-icon i { font-size: 32px; }
.m-upgrade-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--red, #ab161b);
}
.m-upgrade-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.m-upgrade-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary, #555);
  margin: 0 0 4px;
  max-width: 320px;
}
/* Current → Required tier pill row */
.m-upgrade-tier-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 6px 0 10px;
}
.m-upgrade-tier {
  flex: 1;
  max-width: 130px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-panel, #f4f4f4);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.m-upgrade-tier-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-secondary, #555);
  margin-bottom: 2px;
}
.m-upgrade-tier-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-primary);
}
.m-upgrade-tier-next {
  border-color: var(--red, #ab161b);
  background: rgba(171,22,27,0.06);
}
.m-upgrade-tier-next .m-upgrade-tier-name { color: var(--red, #ab161b); }
.m-upgrade-arrow {
  color: var(--text-muted, #999);
  font-size: 20px;
  flex-shrink: 0;
}
/* Full-width upgrade CTA — reuses .m-btn-primary but adds a small
   arrow-up-circle icon and horizontal padding tweaks. */
.m-upgrade-cta {
  width: 100%;
  margin-top: 4px;
  gap: 8px;
}
.m-upgrade-cta i { font-size: 20px; }
.m-upgrade-later {
  background: transparent;
  border: 0;
  color: var(--text-secondary, #555);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 10px 12px;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 8px;
}
.m-upgrade-later:active { background: var(--bg-panel, #f4f4f4); }

/* ── PayFast payment-result modal ──
   Shown on boot when the app returns from PayFast via
   ?payment=success / ?payment=cancelled. Same bottom-sheet pattern
   as the other modals. */
.m-payres-modal {
  border-radius: 18px 18px 0 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
.m-payres-body {
  padding: 8px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.m-payres-icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0;
}
.m-payres-icon i { font-size: 40px; }
.m-payres-icon.is-success {
  background: rgba(46,125,50,0.12);
  color: var(--green, #2e7d32);
}
.m-payres-icon.is-cancel {
  background: rgba(171,22,27,0.10);
  color: var(--red, #ab161b);
}
.m-payres-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  margin: 0;
}
.m-payres-sub {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary, #555);
  margin: 0 0 6px;
  max-width: 320px;
}
.m-payres-cta { width: 100%; }

/* ── PayFast SANDBOX badge ──
   Shows next to the SUBSCRIPTION accordion header while PayFast is
   running against its test merchant, so the user knows real money
   isn't moving. Hidden the moment PAYFAST_MODE flips to 'live'. */
.m-pf-mode-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f59e0b;              /* amber-500 */
  color: #1a1200;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(245,158,11,0.35);
  vertical-align: middle;
}