/* ==========================================================================
   Japanese Car Club — v2 theme  ·  Dark + Amber
   --------------------------------------------------------------------------
   Self-contained: loads no Bootstrap, no jQuery UI, no animate.css.
   Written with logical properties (margin-inline, inset-inline) so the same
   file serves LTR and RTL — there is no theme-rtl.css.

   COLOUR RULE, do not break it:
     --accent      is a FILL only (buttons, badges, bars).
     --accent-ink  is what you use when amber has to be TEXT, an icon or a
                   focus ring. Raw #f59e0b on the page background measures
                   2.06:1, which fails WCAG AA badly.
   ========================================================================== */

:root {
  /* chrome */
  --chrome:        #1c1917;
  --chrome-2:      #292524;
  --chrome-line:   rgba(255,255,255,.10);
  --chrome-text:   #e7e5e4;
  --chrome-muted:  #a8a29e;

  /* accent */
  --accent:        #f59e0b;   /* fills only */
  --accent-ink:    #b45309;   /* text / icons / focus rings — 4.81:1 on --bg */
  --accent-hover:  #d97706;
  --accent-soft:   #fffbeb;
  --accent-line:   #fde68a;
  --on-accent:     #1c1917;

  /* surfaces */
  --bg:            #fafaf9;
  --surface:       #ffffff;
  --surface-2:     #f5f5f4;
  --border:        #e7e5e4;
  --border-strong: #d6d3d1;

  /* text — --text-3 is deliberately darker than a typical "muted" token
     because it carries real content (stock numbers, price labels) */
  --text:          #1c1917;
  --text-2:        #57534e;
  --text-3:        #78716c;

  /* status */
  --alert:         #dc2626;
  --alert-soft:    #fef2f2;
  --success:       #15803d;
  --success-soft:  #f0fdf4;

  --shadow-sm: 0 1px 2px rgba(28,25,23,.06);
  --shadow:    0 1px 3px rgba(28,25,23,.08), 0 8px 24px -12px rgba(28,25,23,.16);
  --shadow-lg: 0 2px 6px rgba(28,25,23,.08), 0 18px 40px -16px rgba(28,25,23,.24);

  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 6px;

  --wrap: 1440px;

  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }
.tnum { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.utility {
  background: var(--chrome-2);
  color: var(--chrome-muted);
  font-size: 12.5px;
  border-bottom: 1px solid var(--chrome-line);
}
.utility .wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-height: 40px; }
.utility .stat { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.utility .stat b { color: var(--chrome-text); font-weight: 600; }
.utility .sep { inline-size: 1px; block-size: 15px; background: var(--chrome-line); }
.utility .right { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }

.pill {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--chrome-line);
  color: var(--chrome-text);
  padding: 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.pill:hover { background: rgba(255,255,255,.13); }
.pill img, .pill .flag { inline-size: 17px; block-size: 12px; border-radius: 2px; object-fit: cover; }
.pill .caret { opacity: .55; font-size: 9px; }

/* dropdown — CSS only, no Bootstrap JS */
.drop { position: relative; }
.drop > .menu {
  position: absolute; inset-block-start: calc(100% + 6px); inset-inline-end: 0;
  min-inline-size: 190px; max-block-size: 320px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: 5px; z-index: 60; display: none;
}
.drop.open > .menu { display: block; }
.drop > .menu a {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: var(--radius-xs);
  font-size: 13px; color: var(--text);
}
.drop > .menu a:hover { background: var(--surface-2); }
.drop > .menu img { inline-size: 18px; block-size: 13px; border-radius: 2px; object-fit: cover; }

.masthead { background: var(--chrome); position: sticky; inset-block-start: 0; z-index: 50; }
.masthead .wrap { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand .mark {
  inline-size: 38px; block-size: 38px; border-radius: 10px;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: -.02em;
}
.brand .mark img { inline-size: 100%; block-size: 100%; object-fit: contain; border-radius: inherit; }
.brand .name { font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #fff; letter-spacing: -.01em; line-height: 1.1; }
.brand .tag { font-size: 10.5px; color: var(--chrome-muted); letter-spacing: .05em; text-transform: uppercase; }

.mainnav { display: flex; gap: 2px; flex-wrap: wrap; }
.mainnav > li { position: relative; }
.mainnav > li > a {
  display: block; padding: 9px 13px; border-radius: var(--radius-xs);
  font-size: 14px; font-weight: 500; color: var(--chrome-muted); white-space: nowrap;
  transition: background .15s, color .15s;
}
.mainnav > li > a:hover { background: rgba(255,255,255,.07); color: #fff; }
.mainnav > li.on > a { color: #fff; background: rgba(255,255,255,.10); font-weight: 600; }
.mainnav ul {
  position: absolute; inset-block-start: calc(100% + 4px); inset-inline-start: 0;
  min-inline-size: 210px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 5px; z-index: 60;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.mainnav > li:hover ul, .mainnav > li:focus-within ul { opacity: 1; visibility: visible; transform: translateY(0); }
.mainnav ul a { display: block; padding: 7px 10px; border-radius: var(--radius-xs); font-size: 13px; color: var(--text); }
.mainnav ul a:hover { background: var(--surface-2); }

.masthead .actions { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  inline-size: 38px; block-size: 38px; border-radius: var(--radius-sm);
  border: 1px solid var(--chrome-line); background: rgba(255,255,255,.05);
  color: var(--chrome-text); display: grid; place-items: center; cursor: pointer;
}
.icon-btn:hover { background: rgba(255,255,255,.11); }
.navtoggle { display: none; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 10px 17px; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background .15s, border-color .15s, color .15s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--text-3); }
.btn-sm { padding: 7px 13px; font-size: 13px; }
.btn-block { inline-size: 100%; }

/* ==========================================================================
   ANNOUNCEMENT STRIP
   ========================================================================== */
.announce {
  background: var(--alert-soft);
  border-bottom: 1px solid rgba(220,38,38,.22);
  color: #991b1b;
  font-size: 13.5px;
}
.announce .wrap { display: flex; align-items: center; gap: 12px; padding-block: 9px; }
.announce .badge {
  background: var(--alert); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 5px; flex-shrink: 0;
}
.announce .track { overflow: hidden; flex: 1; }
.announce .track li { display: none; }
.announce .track li.on { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   PAGE SHELL
   ========================================================================== */
.shell { max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; padding-block-end: 64px; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); padding-block: 18px 14px; flex-wrap: wrap; }
.crumbs a:hover { color: var(--accent-ink); }
.crumbs .sl { opacity: .5; }
.crumbs .cur { color: var(--text-2); font-weight: 500; }

.page-head { display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap; padding-block-end: 20px; }
.page-head h1 { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; display: flex; align-items: center; gap: 10px; }
.page-head h1 img { block-size: 32px; inline-size: auto; }
.page-head .count { font-size: 14.5px; color: var(--text-2); padding-block-end: 4px; }
.page-head .count b { color: var(--text); font-weight: 700; }

.layout { display: grid; grid-template-columns: 272px minmax(0,1fr); gap: 26px; align-items: start; }
.layout > * { min-inline-size: 0; }

/* ==========================================================================
   FILTER SIDEBAR
   ========================================================================== */
/* Sticky column that never outgrows the viewport. Only the filter groups
   scroll: the heading and the Search/Reset buttons stay put, so the primary
   action is always one click away. overflow:hidden clips the scrolling child
   to the rounded corners — it must not be paired with an overflow-y on the
   same element, which is what previously put a scrollbar around the whole
   panel and pushed the buttons out of reach. */
.filters {
  position: sticky; inset-block-start: 84px;
  display: flex; flex-direction: column;
  max-block-size: calc(100vh - 104px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.filters > form { display: flex; flex-direction: column; min-block-size: 0; flex: 1; }
.filters header, .filters .foot { flex-shrink: 0; }

.fscroll {
  flex: 1; min-block-size: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.fscroll::-webkit-scrollbar { inline-size: 8px; }
.fscroll::-webkit-scrollbar-track { background: transparent; }
.fscroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.fscroll::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
.filters header { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.filters header h2 { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.filters header .clear { margin-inline-start: auto; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); cursor: pointer; background: none; border: 0; }
.fgroup { border-bottom: 1px solid var(--border); }
.fgroup:last-of-type { border-bottom: 0; }
.fgroup > summary {
  display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  padding: 12px 16px; font-size: 13px; font-weight: 600; color: var(--text);
}
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary::after {
  content: ''; margin-inline-start: auto;
  inline-size: 7px; block-size: 7px;
  border-inline-end: 2px solid var(--text-3); border-block-end: 2px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s;
}
.fgroup[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.fgroup > summary:hover { background: var(--surface-2); }
.fbody { padding: 2px 16px 16px; display: grid; gap: 11px; }

.field { display: grid; gap: 5px; }
.field > label { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.control {
  inline-size: 100%; appearance: none;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xs); padding: 8px 30px 8px 11px;
  font-size: 13px; color: var(--text); cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-3) 50%),
    linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.control:focus { outline: 2px solid var(--accent-ink); outline-offset: -1px; border-color: var(--accent-ink); }
input.control, textarea.control { background-image: none; padding-inline-end: 11px; cursor: text; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filters .foot { padding: 14px 16px; background: var(--surface-2); border-top: 1px solid var(--border); display: grid; gap: 8px; }

/* ==========================================================================
   ACTIVE FILTER CHIPS
   ========================================================================== */
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-block-end: 16px; }
.chips .lead { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-ink);
  padding: 5px 8px 5px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.chip .x {
  inline-size: 16px; block-size: 16px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; line-height: 1;
  color: inherit; opacity: .65;
}
.chip .x:hover { opacity: 1; background: rgba(0,0,0,.09); }
.chips .clear-all { font-size: 12.5px; font-weight: 600; color: var(--text-2); text-decoration: underline; }

/* ==========================================================================
   TOOLBAR
   ========================================================================== */
.toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-block-end: 18px;
  box-shadow: var(--shadow-sm);
}
.toolbar .grp { display: flex; align-items: center; gap: 7px; }
.toolbar .grp > span { font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.toolbar .control { inline-size: auto; padding-block: 6px; font-size: 12.5px; }
.toolbar .right { margin-inline-start: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.viewtoggle { display: flex; background: var(--surface-2); border-radius: var(--radius-xs); padding: 3px; gap: 2px; }
.viewtoggle button {
  border: 0; background: transparent; cursor: pointer;
  inline-size: 34px; block-size: 30px; border-radius: 5px;
  display: grid; place-items: center; color: var(--text-3);
}
.viewtoggle button:hover { color: var(--text-2); }
.viewtoggle button[aria-pressed="true"] { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-sm); }

/* ==========================================================================
   VEHICLE CARD
   ========================================================================== */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 18px; }
.grid.compact { grid-template-columns: repeat(auto-fill, minmax(182px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--border-strong); }

.card .shot { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: hidden; }
.card .shot img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .shot img { transform: scale(1.035); }

.tagrow { position: absolute; inset: 9px 9px auto 9px; display: flex; align-items: flex-start; gap: 6px; }
.tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 4px 8px; border-radius: 5px; }
.tag-year { background: rgba(28,25,23,.78); color: #fff; }
.tag-label { background: var(--accent); color: var(--on-accent); margin-inline-start: auto; }

.card .body { padding: 13px 14px 0; flex: 1; }
.card .stockno { font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--text-3); font-variant-numeric: tabular-nums; margin-block-end: 5px; }
.card h3 {
  font-family: var(--font-display); font-size: 15.5px; font-weight: 700;
  letter-spacing: -.015em; line-height: 1.3; margin-block-end: 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-block-size: 2.6em;
  /* Model codes such as "2017/G/SHUTTLE/GK9" are a single unbreakable token — CSS
     does not wrap at "/" — so the line ran past the card and `overflow: hidden`
     clipped it mid-character. `anywhere` breaks only when a line cannot otherwise
     fit, leaving ordinary titles wrapping at spaces as before. */
  overflow-wrap: anywhere;
}
.card h3 a:hover { color: var(--accent-ink); }

.specs { display: flex; flex-wrap: wrap; gap: 5px; margin-block-end: 13px; }
.spec {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-2); font-size: 11.5px; font-weight: 500;
  padding: 3px 8px; border-radius: 5px; font-variant-numeric: tabular-nums;
}
.spec svg { opacity: .55; flex-shrink: 0; }

.priceblock { border-top: 1px dashed var(--border); padding: 11px 14px; display: flex; align-items: flex-end; gap: 10px; }
.priceblock .k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.priceblock .fob .v { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.priceblock .total { margin-inline-start: auto; text-align: end; }
.priceblock .total .k { letter-spacing: 0; text-transform: none; font-weight: 600; }
.priceblock .total .v { font-size: 13.5px; font-weight: 700; color: var(--text-2); font-variant-numeric: tabular-nums; }

.card .foot { padding: 0 14px 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px; }
/* Compact cards are ~209px wide while the two buttons need 216px side by side,
   so they spilled past the card edge. The existing single-column rule only fires
   on a narrow viewport, which never triggers here: it is the card that is small,
   not the window. Compact stacks them whatever the viewport. */
.grid.compact .card .foot { grid-template-columns: 1fr; }
.grid.compact .card .foot .btn { inline-size: 100%; }

/* ==========================================================================
   LIST VIEW
   ========================================================================== */
.listview { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.tablescroll { overflow-x: auto; }
table.rows { inline-size: 100%; border-collapse: collapse; font-size: 13.5px; min-inline-size: 940px; }
table.rows th {
  text-align: start; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); padding: 11px 14px; background: var(--surface-2);
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
table.rows td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text-2); }
table.rows tr:last-child td { border-bottom: 0; }
table.rows tbody tr { transition: background .12s; }
table.rows tbody tr:hover { background: var(--surface-2); }
/* The Photo column needs a hard floor. `inline-size` on a cell is only a hint
   to the auto table algorithm, which shrank this column to 71px to give the
   other columns room; the global `img { max-width: 100% }` reset then clamped
   the thumbnail to the 43px that was left and object-fit cropped it to a sliver.
   The cell is sized to hold the image plus its own padding, and the image opts
   out of the reset. */
table.rows .thumb { inline-size: 116px; min-inline-size: 116px; }
table.rows .thumb img {
  inline-size: 88px; min-inline-size: 88px; max-inline-size: none;
  block-size: 66px; border-radius: var(--radius-xs); object-fit: cover;
  background: var(--surface-2);
}
table.rows .veh { color: var(--text); font-weight: 600; min-inline-size: 210px; }
table.rows .veh small { display: block; font-weight: 400; color: var(--text-3); font-size: 12px; margin-block-start: 1px; }
table.rows .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rows .price { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.rows .price.fob { color: var(--accent-ink); }

/* The search list, and only the search list — table.rows is also the portal's
   purchases, invoices and messages tables.

   It used to scroll sideways at every normal width: the 940px floor, plus
   nowrap uppercase headers ("STEERING WHEEL" alone took 135px for "Right Hand
   Drive"), made it 1,228px in a 917px column at 1280px.

   The layout is fixed rather than auto. An auto table is as wide as its longest
   unbreakable value, and this data has some — "CNY COMING SOON" as a price,
   "TOYOTA TECHNOLOGY" as an engine — so no width would reliably hold. Fixed
   columns always equal the container: each is sized to its header's longest
   word or a typical value, the vehicle column takes what is left (153px at
   1280, more above), and a rare long value wraps inside its own cell.

   Below 900px there is not room for ten columns, so each row restacks into a
   grid of labelled values beside the photo; the labels come from data-label. */
.listview { container-type: inline-size; }
.listview table.rows { min-inline-size: 0; table-layout: fixed; }
.listview table.rows th { white-space: normal; padding-inline: 9px; letter-spacing: .04em; }
.listview table.rows td { padding-inline: 9px; white-space: normal; overflow-wrap: anywhere; }
.listview col.c-photo { width: 98px; }
.listview col.c-stock { width: 76px; }
.listview col.c-year { width: 56px; }
.listview col.c-mileage { width: 98px; }
.listview col.c-cc { width: 76px; }
.listview col.c-steering { width: 90px; }
.listview col.c-transmission { width: 110px; }  /* "TRANSMISSION" is one word */
.listview col.c-price { width: 80px; }
.listview table.rows .thumb { inline-size: auto; min-inline-size: 0; }
.listview table.rows .thumb img { inline-size: 80px; min-inline-size: 80px; block-size: 60px; }

@container (max-width: 899px) {
  .listview table.rows,
  .listview table.rows tbody { display: block; }
  .listview table.rows thead { display: none; }
  .listview table.rows tr {
    display: grid; grid-template-columns: 104px repeat(4, minmax(0, 1fr));
    gap: 10px 14px; padding: 14px; border-block-end: 1px solid var(--border);
  }
  .listview table.rows tr:last-child { border-block-end: 0; }
  .listview table.rows td { display: block; padding: 0; border: 0; min-inline-size: 0; white-space: normal; }
  .listview table.rows td[data-label]::before {
    content: attr(data-label); display: block; margin-block-end: 1px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
  }
  /* Photo and vehicle are pinned — the vehicle to row 1, since Stock No comes
     before it in the markup and would otherwise take that row. Auto-placement
     fills the rest in markup order, prices last: here beside the photo, which
     spans the vehicle row plus two rows of four values. */
  .listview table.rows .thumb { grid-column: 1; grid-row: 1 / span 3; inline-size: auto; min-inline-size: 0; }
  .listview table.rows .thumb img { inline-size: 104px; min-inline-size: 104px; block-size: 78px; }
  .listview table.rows .veh { grid-column: 2 / -1; grid-row: 1; min-inline-size: 0; }
}

/* Narrower, a photo column would leave a tall empty strip beneath the
   thumbnail, so the values run full width under the photo and vehicle. */
@container (max-width: 640px) {
  .listview table.rows tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .listview table.rows .thumb { grid-row: 1; }
  .listview table.rows .thumb img { inline-size: 96px; min-inline-size: 96px; block-size: 72px; }
}

@container (max-width: 440px) {
  .listview table.rows tr { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px 12px; padding: 12px; }
  .listview table.rows .thumb img { inline-size: 88px; min-inline-size: 88px; block-size: 66px; }
}

/* Offer to show the unpriced vehicles a search is hiding. */
.asknote {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  margin: 0 0 12px; padding: 9px 14px; font-size: 13px; color: var(--text-2);
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
}
.asknote b { color: var(--text); }
.asknote a { color: var(--accent-ink); font-weight: 700; white-space: nowrap; }
.asknote a:hover { text-decoration: underline; }

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */
.empty {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 56px 24px; text-align: center; box-shadow: var(--shadow-sm);
}
.empty .ic { inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--surface-2); color: var(--text-3); display: grid; place-items: center; margin: 0 auto 14px; }
.empty h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-block-end: 6px; }
.empty p { color: var(--text-2); font-size: 14px; margin-block-end: 18px; }

/* ==========================================================================
   PAGINATION
   ========================================================================== */
.pager { display: flex; align-items: center; justify-content: center; gap: 6px; margin-block-start: 26px; flex-wrap: wrap; }
.pager a, .pager span {
  min-inline-size: 38px; block-size: 38px; padding-inline: 12px;
  display: grid; place-items: center; border-radius: var(--radius-xs);
  background: var(--surface); border: 1px solid var(--border);
  font-size: 13.5px; font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.pager a:hover { border-color: var(--text-3); color: var(--text); }
.pager .on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager .gap { border: 0; background: transparent; color: var(--text-3); min-inline-size: 22px; padding: 0; }

/* ==========================================================================
   SHIPPING CALCULATOR
   ========================================================================== */
.calc { margin-block-start: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.calc > summary { display: flex; align-items: center; gap: 13px; cursor: pointer; list-style: none; padding: 16px 18px; }
.calc > summary::-webkit-details-marker { display: none; }
.calc .ic { inline-size: 38px; block-size: 38px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; }
.calc h2 { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; letter-spacing: -.015em; }
.calc p { font-size: 13px; color: var(--text-2); }
.calc > summary::after {
  content: ''; margin-inline-start: auto; flex-shrink: 0;
  inline-size: 8px; block-size: 8px;
  border-inline-end: 2px solid var(--text-3); border-block-end: 2px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s;
}
.calc[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.calcbody { padding: 4px 18px 18px; border-top: 1px solid var(--border); }
.calcgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 13px; padding-block-start: 15px; }
.radiorow { display: flex; align-items: center; gap: 16px; padding-block-start: 4px; }
.radiorow label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); cursor: pointer; }
#total_of_price_calulator:not(:empty) {
  margin-block-start: 15px; padding: 14px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); font-size: 13.5px;
}
#total_of_price_calulator table { inline-size: 100%; border-collapse: collapse; }
#total_of_price_calulator td { padding: 5px 8px; border-bottom: 1px solid var(--border); }

/* ==========================================================================
   PROMO STRIP (above the footer, on every page)
   ========================================================================== */
.promos { margin-block-start: 40px; }
.promos .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding-block: 0 8px; }
.promo {
  display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); background: var(--surface);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.promo:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--border-strong); }
.promo img { inline-size: 100%; block-size: auto; }

/* ==========================================================================
   CMS PAGE BODY — the description column is arbitrary editor HTML, so every
   element it can emit needs a sane default here.
   ========================================================================== */
/* flow-root establishes a block formatting context, so a float:left the editor
   left in the content (the legacy site's terms page has one) is contained instead of
   spilling past the panel and overlapping whatever follows. */
.prose { font-size: 15px; line-height: 1.75; color: var(--text-2); overflow-wrap: break-word; display: flow-root; }
.prose > *:first-child { margin-block-start: 0; }
.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-family: var(--font-display); color: var(--text);
  letter-spacing: -.02em; line-height: 1.25;
  margin-block: 1.6em .55em; font-weight: 700;
}
.prose h1 { font-size: 25px; }
.prose h2 { font-size: 21px; }
.prose h3 { font-size: 18px; }
.prose h4, .prose h5, .prose h6 { font-size: 15.5px; }
.prose p { margin-block: 0 1.1em; }
.prose a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--accent-hover); }
.prose strong, .prose b { color: var(--text); font-weight: 700; }
.prose ul, .prose ol { margin-block: 0 1.1em; padding-inline-start: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-block: .3em; }
.prose li::marker { color: var(--text-3); }
.prose img {
  max-inline-size: 100%; block-size: auto; border-radius: var(--radius-sm);
  margin-block: 1em; border: 1px solid var(--border);
}
.prose iframe, .prose video { max-inline-size: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); }
.prose blockquote {
  margin-block: 1.2em; padding: 2px 0 2px 16px;
  border-inline-start: 3px solid var(--accent); color: var(--text-2); font-style: italic;
}
.prose hr { border: 0; border-block-start: 1px solid var(--border); margin-block: 1.8em; }
.prose code {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 4px; padding: 1px 5px; font-size: .9em;
}
.prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px; overflow-x: auto; }
/* Legacy editor tables carry width/border attributes; neutralise them. */
.prose table {
  inline-size: 100% !important; border-collapse: collapse; margin-block: 1.2em;
  font-size: 14px; display: block; overflow-x: auto;
}
.prose th, .prose td { border: 1px solid var(--border); padding: 9px 12px; text-align: start; vertical-align: top; }
.prose th { background: var(--surface-2); color: var(--text); font-weight: 700; }
.prose tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
/* Inline styles in old content often force tiny fixed widths and stray colours. */
.prose [style*="width"] { max-inline-size: 100%; }
.prose font { font-size: inherit !important; color: inherit !important; }

/* ---------- contact ---------- */
.pagebanner { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); margin-block-end: 20px; }
.pagebanner img { inline-size: 100%; block-size: auto; }

.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; align-items: start; }
.contact-grid > * { min-inline-size: 0; }

.contactlist { display: grid; gap: 3px; }
.contactlist h3 {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
  margin-block: 16px 6px;
}
.contactlist h3:first-child { margin-block-start: 0; }
.contactlist address { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--text-2); margin-block-end: 6px; }
.contactrow { display: flex; align-items: center; gap: 11px; padding-block: 7px; border-bottom: 1px solid var(--border); }
.contactrow:last-child { border-bottom: 0; }
.contactrow .ic {
  inline-size: 30px; block-size: 30px; border-radius: var(--radius-xs); flex-shrink: 0;
  background: var(--surface-2); color: var(--text-2); display: grid; place-items: center;
}
.contactrow .lbl { font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.contactrow .val { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-word; }
.contactrow a.val { color: var(--accent-ink); }
.contactrow a.val:hover { text-decoration: underline; }
.contactrow.wa .ic { background: #dcfce7; color: #15803d; }

.mapframe {
  margin-block-start: 20px; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border); box-shadow: var(--shadow-sm); line-height: 0;
}
.mapframe iframe { inline-size: 100%; block-size: 420px; border: 0; display: block; }

/* ---------- about: sub-page teaser cards ---------- */
/* 400px floor keeps the text column readable beside the 132px thumbnail —
   a 320px floor packed four across and left only ~197px for the copy.
   min(400px, 100%) stops that floor from overflowing a narrower container:
   a bare minmax(400px, 1fr) forces a 400px track inside a 347px column. */
.infogrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)); gap: 18px; }
.infocard {
  display: grid; grid-template-columns: minmax(0,1fr) 132px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.infocard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--border-strong); }
.infocard .body { padding: 17px 18px; display: flex; flex-direction: column; min-inline-size: 0; }
.infocard h3 { font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: -.015em; line-height: 1.3; }
.infocard p {
  font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-block: 7px 14px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.infocard .cta { margin-block-start: auto; align-self: flex-start; }
.infocard .shot { background: var(--surface-2); }
.infocard .shot img { inline-size: 100%; block-size: 100%; object-fit: cover; }

@media (max-width: 520px) {
  .infocard { grid-template-columns: 1fr; }
  .infocard .shot { order: -1; aspect-ratio: 16 / 9; }
}

.pagehead { padding-block: 4px 20px; }
.pagehead h1 { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.rate-callout {
  display: inline-flex; align-items: baseline; gap: 10px; margin-block-start: 6px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm); padding: 10px 15px;
}
.rate-callout .k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.rate-callout .v { font-family: var(--font-display); font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }

@media (max-width: 640px) {
  .promos .wrap { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pagehead h1 { font-size: 22px; }
  .prose { font-size: 14.5px; }
  .prose h1 { font-size: 21px; }
  .prose h2 { font-size: 18px; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.foot-wrap { background: var(--chrome); color: var(--chrome-muted); margin-block-start: 40px; }
.foot-wrap .wrap { padding-block: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 32px; }
.foot-wrap h4 { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; margin-block-end: 13px; }
.foot-wrap p, .foot-wrap li { font-size: 13.5px; line-height: 1.75; }
/* Signed-in greeting in the masthead. Hidden on narrow screens, where the
   actions row has only enough space for the buttons themselves. */
.masthead .greeting { font-size: 13px; color: var(--chrome-muted); white-space: nowrap; margin-inline-end: 4px; }
.masthead .greeting b { color: var(--chrome-text); font-weight: 600; }
@media (max-width: 900px) { .masthead .greeting { display: none; } }

.foot-wrap a:hover { color: #fff; }
/* CMS-driven footer links, each with its own glyph. */
.foot-wrap .foot-icons a { display: inline-flex; align-items: center; gap: 8px; }
.foot-wrap .foot-icons svg { flex: none; opacity: .7; }
.foot-wrap .foot-icons a:hover svg { opacity: 1; }
.foot-wrap .social { display: flex; gap: 8px; margin-block-start: 12px; }
.foot-wrap .social a {
  inline-size: 34px; block-size: 34px; border-radius: var(--radius-sm);
  border: 1px solid var(--chrome-line); background: rgba(255,255,255,.05);
  display: grid; place-items: center; color: var(--chrome-text);
}
.foot-wrap .social a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.foot-bottom { border-top: 1px solid var(--chrome-line); }
.foot-bottom .wrap { padding-block: 16px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .filters { position: static; max-block-size: none; }
  .navtoggle { display: grid; }
  .mainnav {
    display: none; position: absolute; inset-block-start: 100%; inset-inline: 0;
    background: var(--chrome-2); border-top: 1px solid var(--chrome-line);
    padding: 8px; flex-direction: column; gap: 0;
  }
  .mainnav.open { display: flex; }
  .mainnav ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; background: transparent; border: 0; padding-inline-start: 14px; }
  .mainnav ul a { color: var(--chrome-muted); }
  .mainnav ul a:hover { background: rgba(255,255,255,.07); color: #fff; }
}
@media (max-width: 640px) {
  .shell, .wrap { padding-inline: 14px; }
  .utility .wrap { padding-block: 8px; gap: 7px 12px; }
  .utility .sep { display: none; }
  /* `margin-inline-start: auto` pushes the pickers right, which reads as a stray
     centred row once the bar wraps. On their own row they line up under the stats
     instead, and the tighter row-gap gives the strip back ~20px of a 812px screen. */
  .utility .right { inline-size: 100%; margin-inline-start: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .card h3 { font-size: 14px; }
  .priceblock { flex-direction: column; align-items: flex-start; gap: 2px; }
  .priceblock .total { margin-inline-start: 0; text-align: start; }
  .priceblock .fob .v { font-size: 18px; }
  .page-head h1 { font-size: 23px; }
  .card .foot { grid-template-columns: 1fr; }
}

/* ==========================================================================
   VEHICLE DETAIL PAGE
   ========================================================================== */
.detail-head { display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding-block: 4px 20px; }
.detail-head .titles { min-inline-size: 260px; }
.detail-head .stock { font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--text-3); font-variant-numeric: tabular-nums; }
.detail-head h1 { font-family: var(--font-display); font-size: 28px; font-weight: 800; letter-spacing: -.025em; line-height: 1.2; margin-block-start: 3px; }
.detail-head .askprice { margin-inline-start: auto; text-align: end; }
.detail-head .askprice .k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.detail-head .askprice .v { font-family: var(--font-display); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sold {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--alert); color: #fff; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; padding: 4px 10px; border-radius: 5px;
}

.detail-grid { display: grid; grid-template-columns: minmax(0,1fr) 356px; gap: 26px; align-items: start; }
/* Grid items default to min-width:auto, so a wide child (the thumbnail strip)
   can force the track past the viewport. Pin both to zero. */
.detail-grid > * { min-inline-size: 0; }

/* ---------- gallery (replaces MagicZoom + Cropper.js + PhotoSwipe) ---------- */
.gallery { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery .stage { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.gallery .stage img { inline-size: 100%; block-size: 100%; object-fit: cover; cursor: zoom-in; }
.gallery .nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 40px; block-size: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(28,25,23,.62); color: #fff; display: grid; place-items: center;
  opacity: 1; transition: opacity .18s, background .15s;
}
/* Reveal-on-hover only where there is a real pointer. On touch there is no
   hover state, so the arrows must stay visible. */
@media (hover: hover) {
  .gallery .nav { opacity: 0; }
  .gallery:hover .nav, .gallery .nav:focus-visible { opacity: 1; }
}
.gallery .nav:hover { background: rgba(28,25,23,.85); }
.gallery .nav.prev { inset-inline-start: 12px; }
.gallery .nav.next { inset-inline-end: 12px; }
.gallery .counter {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px;
  background: rgba(28,25,23,.72); color: #fff; font-size: 11.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 5px; font-variant-numeric: tabular-nums;
}
.gallery .strip { display: flex; gap: 8px; padding: 10px; overflow-x: auto; scrollbar-width: thin; }
.gallery .strip button {
  flex: 0 0 auto; inline-size: 84px; block-size: 63px; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius-xs); overflow: hidden; background: var(--surface-2);
}
.gallery .strip button img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.gallery .strip button[aria-current="true"] { border-color: var(--accent); }

.lightbox {
  position: fixed; inset: 0; z-index: 200; background: rgba(28,25,23,.94);
  display: none; align-items: center; justify-content: center; padding: 32px;
}
.lightbox.open { display: flex; }
.lightbox img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border-radius: var(--radius-sm); }
.lightbox .close, .lightbox .nav {
  position: absolute; inline-size: 44px; block-size: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
}
.lightbox .close:hover, .lightbox .nav:hover { background: rgba(255,255,255,.25); }
.lightbox .close { inset-block-start: 20px; inset-inline-end: 20px; }
.lightbox .nav { inset-block-start: 50%; transform: translateY(-50%); }
.lightbox .nav.prev { inset-inline-start: 20px; }
.lightbox .nav.next { inset-inline-end: 20px; }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-block-start: 20px; overflow: hidden; }
.panel > h2 {
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  padding: 14px 18px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.panel .pbody { padding: 18px; }

/* spec grid — replaces the four-column label/value <table> */
.specgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 26px; }
.specgrid > div {
  display: flex; align-items: baseline; gap: 12px;
  padding-block: 9px; border-bottom: 1px solid var(--border);
}
.specgrid dt { font-size: 12.5px; color: var(--text-2); flex: 0 0 42%; }
.specgrid dd { font-size: 13.5px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 7px 14px; }
.features li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.features li svg { color: var(--success); flex-shrink: 0; }

.optionstext { font-size: 14px; color: var(--text-2); line-height: 1.7; white-space: pre-line; }
.sheet img { inline-size: 100%; border-radius: var(--radius-sm); border: 1px solid var(--border); }

/* ---------- purchase sidebar ---------- */
.buybox { position: sticky; inset-block-start: 84px; display: grid; gap: 16px; }
.buybox .panel { margin-block-start: 0; }
.pricerow { display: flex; align-items: baseline; gap: 10px; padding-block: 4px; }
.pricerow .k { font-size: 13px; color: var(--text-2); }
.pricerow .v { margin-inline-start: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.pricerow.big .v { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
.buybox .cta { display: grid; gap: 8px; margin-block-start: 14px; }

.actionrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.actionrow button, .actionrow a {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 6px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 11.5px; font-weight: 600; color: var(--text-2); cursor: pointer; text-align: center;
}
.actionrow button:hover, .actionrow a:hover { background: var(--surface-2); color: var(--text); border-color: var(--text-3); }
.actionrow svg { color: var(--text-3); }

.sharerow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sharerow .lead { font-size: 12px; font-weight: 600; color: var(--text-3); }
.sharerow a {
  inline-size: 32px; block-size: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); display: grid; place-items: center; color: var(--text-2);
}
.sharerow a:hover { background: var(--surface-2); color: var(--text); }

.calcpanel .calcgrid { grid-template-columns: 1fr; gap: 11px; padding-block-start: 0; }

/* ---------- alerts ---------- */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: var(--radius-sm);
  font-size: 13.5px; margin-block-end: 16px; border: 1px solid;
}
.alert-success { background: var(--success-soft); border-color: rgba(21,128,61,.28); color: #14532d; }
.alert-danger  { background: var(--alert-soft);  border-color: rgba(220,38,38,.28);  color: #991b1b; }
.alert-info    { background: var(--accent-soft); border-color: var(--accent-line);   color: var(--accent-ink); }

/* ---------- inline dialogs (native <dialog>, no Bootstrap modal) ---------- */
/* margin:auto is what centres a modal <dialog>, and the reset at the top of this
   file — `* { margin: 0 }` — overrides the UA rule that sets it, which pins the
   dialog to the top-left corner of the viewport. Restoring it here is the whole
   fix; everything below just keeps a tall dialog usable. */
dialog.sheetbox {
  margin: auto;
  border: 0; border-radius: var(--radius); padding: 0;
  max-inline-size: 440px; inline-size: calc(100% - 32px);
  max-block-size: calc(100dvh - 48px);
  box-shadow: var(--shadow-lg); color: var(--text); background: var(--surface);
}
/* Scoped to [open] so a closed dialog keeps the UA's display:none. */
dialog.sheetbox[open] { display: flex; flex-direction: column; opacity: 1; transform: none; }
dialog.sheetbox > form { display: flex; flex-direction: column; min-block-size: 0; flex: 1; }
dialog.sheetbox header, dialog.sheetbox footer { flex-shrink: 0; }

/* ---------- open / close animation ----------------------------------------
   Closing is the awkward half: .close() applies display:none immediately, so a
   plain transition never gets to run. Listing display and overlay with
   allow-discrete defers that flip until the fade finishes, and @starting-style
   supplies the from-state on open — no JS, and the dialog still closes on Esc.

   Each transition is declared twice on purpose. A browser that does not know
   allow-discrete treats that whole declaration as invalid and drops it, falling
   back to the plain one above: the open still fades, the close is instant.
   That is the graceful degradation, not an accident. */
dialog.sheetbox {
  opacity: 0;
  transform: translateY(10px) scale(.985);
  transition: opacity .18s ease, transform .18s ease;
  transition: opacity .18s ease, transform .18s ease,
              overlay .18s ease allow-discrete, display .18s ease allow-discrete;
}
@starting-style {
  dialog.sheetbox[open] { opacity: 0; transform: translateY(10px) scale(.985); }
}

dialog.sheetbox::backdrop {
  background: rgba(28,25,23,.55);
  opacity: 0;
  transition: opacity .18s ease;
  transition: opacity .18s ease, overlay .18s ease allow-discrete, display .18s ease allow-discrete;
}
dialog.sheetbox[open]::backdrop { opacity: 1; }
@starting-style {
  dialog.sheetbox[open]::backdrop { opacity: 0; }
}

/* Motion is decoration here; the dialog must still appear and dismiss. */
@media (prefers-reduced-motion: reduce) {
  dialog.sheetbox { transform: none; transition-duration: 1ms; }
  dialog.sheetbox::backdrop { transition-duration: 1ms; }
  @starting-style {
    dialog.sheetbox[open] { transform: none; }
  }
}
dialog.sheetbox header { display: flex; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--border); }
dialog.sheetbox header h2 { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; }
dialog.sheetbox header .x { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; font-size: 20px; line-height: 1; color: var(--text-3); }
dialog.sheetbox .dbody { padding: 18px; display: grid; gap: 12px; min-block-size: 0; overflow-y: auto; }
dialog.sheetbox footer { display: flex; gap: 8px; justify-content: flex-end; padding: 14px 18px; background: var(--surface-2); border-top: 1px solid var(--border); }
dialog.sheetbox textarea.control { min-block-size: 120px; resize: vertical; line-height: 1.6; }

/* ---------- horizontal vehicle rails ---------- */
.rail { margin-block-start: 34px; }
.rail > header { display: flex; align-items: center; gap: 12px; margin-block-end: 14px; }
.rail > header h2 { font-family: var(--font-display); font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.rail > header .more { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.rail .track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(212px, 1fr);
  gap: 14px; overflow-x: auto; padding-block-end: 6px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.rail .track > * { scroll-snap-align: start; }
.minicard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .18s, transform .18s; }
.minicard:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.minicard .shot { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); }
.minicard .shot img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.minicard .tagrow { position: absolute; inset: 8px 8px auto 8px; display: flex; gap: 5px; }
.minicard .body { padding: 11px 12px 13px; }
.minicard h3 { font-size: 13.5px; font-weight: 700; line-height: 1.35; margin-block-end: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-block-size: 2.7em; }
.minicard .p { font-family: var(--font-display); font-size: 16px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

@media (max-width: 1080px) {
  .detail-grid { grid-template-columns: minmax(0, 1fr); }
  .buybox { position: static; }
}
@media (max-width: 640px) {
  .detail-head h1 { font-size: 21px; }
  .detail-head .askprice { margin-inline-start: 0; text-align: start; }
  .detail-head .askprice .v { font-size: 24px; }
  .specgrid { grid-template-columns: 1fr; }
  .gallery .nav { inline-size: 34px; block-size: 34px; }
  .actionrow { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   HOME PAGE
   ========================================================================== */
.hero { position: relative; background: var(--chrome-2); overflow: hidden; }
/* No min-block-size here: on narrow screens it would win over aspect-ratio,
   which then inflates the width and crops the banner horizontally. Let the
   ratio govern and change the ratio itself at the breakpoint instead. */
.hero .slides { position: relative; aspect-ratio: 24 / 7; }
.hero .slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease;
  pointer-events: none;
}
.hero .slide.on { opacity: 1; pointer-events: auto; }
.hero .slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.hero .cap {
  position: absolute; inset-block-end: 0; inset-inline: 0;
  padding: 60px 24px 26px; color: #fff;
  background: linear-gradient(to top, rgba(28,25,23,.82), transparent);
}
.hero .cap .inner { max-width: var(--wrap); margin-inline: auto; }
.hero .cap h2 { font-family: var(--font-display); font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.hero .cap p { font-size: 14.5px; opacity: .9; margin-block-start: 4px; }
.hero .dots { position: absolute; inset-block-end: 14px; inset-inline: 0; display: flex; justify-content: center; gap: 7px; z-index: 2; }
.hero .dots button {
  inline-size: 8px; block-size: 8px; border-radius: 999px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.45); transition: inline-size .2s, background .2s;
}
.hero .dots button[aria-current="true"] { inline-size: 22px; background: var(--accent); }
.hero .nav {
  position: absolute; inset-block-start: 50%; transform: translateY(-50%); z-index: 2;
  inline-size: 40px; block-size: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(28,25,23,.5); color: #fff; display: grid; place-items: center;
}
.hero .nav:hover { background: rgba(28,25,23,.8); }
.hero .nav.prev { inset-inline-start: 16px; }
.hero .nav.next { inset-inline-end: 16px; }

/* quick search card, pulled up over the hero */
.quickbar {
  max-width: var(--wrap); margin-inline: auto; padding-inline: 24px;
  margin-block-start: -34px; position: relative; z-index: 3;
}
.quickbar .inner {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 16px;
}
.quickbar form { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)) auto auto; gap: 10px; align-items: end; }
.quickbar .field > label { font-size: 11.5px; font-weight: 600; color: var(--text-2); }

.statstrip { max-width: var(--wrap); margin-inline: auto; padding: 22px 24px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 14px; }
.stat-tile {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 17px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 13px;
}
.stat-tile .ic { inline-size: 38px; block-size: 38px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; flex-shrink: 0; }
.stat-tile .k { font-size: 11.5px; font-weight: 600; color: var(--text-2); }
.stat-tile .v { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }

/* section heading + see-more */
.section { margin-block-start: 34px; }
.section > header { display: flex; align-items: baseline; gap: 12px; margin-block-end: 14px; }
.section > header h2 { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.025em; }
.section > header .more { margin-inline-start: auto; font-size: 13.5px; font-weight: 600; color: var(--accent-ink); white-space: nowrap; }
.section > header .more:hover { text-decoration: underline; }

.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(202px, 1fr)); gap: 16px; }

/* logo / icon tiles: makers, body types, countries */
.tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.tile {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--text-2);
  transition: border-color .15s, box-shadow .15s, color .15s;
}
.tile:hover { border-color: var(--accent); color: var(--text); box-shadow: var(--shadow-sm); }
.tile img { inline-size: 26px; block-size: 20px; object-fit: contain; flex-shrink: 0; }
.tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* quick query form */
.queryform { display: grid; gap: 10px; }
.queryform textarea.control { min-block-size: 96px; resize: vertical; }

dialog.sheetbox.wide { max-inline-size: 820px; }
dialog.sheetbox.wide .dbody { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

@media (max-width: 900px) {
  .quickbar form { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .quickbar form > .actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero .slides { aspect-ratio: 16 / 9; }
  .hero .cap h2 { font-size: 20px; }
}
@media (max-width: 640px) {
  .quickbar { margin-block-start: -18px; padding-inline: 14px; }
  .statstrip { padding-inline: 14px; grid-template-columns: 1fr; }
  .cardgrid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
  .tilegrid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
  .hero .nav { display: none; }
  .section > header { flex-wrap: wrap; }
}

/* ==========================================================================
   AUTH  ·  sign in, create account, 4-step registration wizard
   ========================================================================== */
.auth { max-inline-size: 1080px; margin-inline: auto; padding: 44px 24px 76px; }
.auth-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 44px; align-items: center; }
.auth-grid > * { min-inline-size: 0; }

.auth-pitch h1 {
  font-family: var(--font-display); font-size: 34px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.12;
}
.auth-pitch .lead { color: var(--text-2); font-size: 15.5px; margin-block-start: 12px; max-inline-size: 46ch; }
.auth-pitch ul { display: grid; gap: 12px; margin-block-start: 26px; }
.auth-pitch li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--text-2); }
.auth-pitch li svg { flex-shrink: 0; color: var(--accent-ink); margin-block-start: 2px; }
.auth-pitch li b { color: var(--text); font-weight: 600; }

.auth-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px;
}
.auth-card h2 { font-family: var(--font-display); font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.auth-card .sub { color: var(--text-3); font-size: 13.5px; margin-block-start: 5px; }
.auth-card .auth-form { margin-block-start: 20px; }

.auth-form { display: grid; gap: 15px; }
.auth-form input.control, .auth-form select.control { padding-block: 10px; font-size: 14px; }

.check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.check input {
  inline-size: 15px; block-size: 15px; flex-shrink: 0; margin-block-start: 2px;
  accent-color: var(--accent-ink); cursor: pointer;
}
.check a { color: var(--accent-ink); font-weight: 600; }
.check a:hover { text-decoration: underline; }

.auth-alt {
  margin-block-start: 20px; padding-block-start: 17px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--text-2); text-align: center;
}
.auth-alt a { color: var(--accent-ink); font-weight: 600; }
.auth-alt a:hover { text-decoration: underline; }

/* ---------- wizard progress ---------- */
.stepbar { display: flex; align-items: center; margin-block-end: 30px; }
.stepbar li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.stepbar li:not(:last-child) { flex: 1; }
.stepbar li:not(:last-child)::after {
  content: ""; block-size: 1px; background: var(--border-strong); flex: 1; margin-inline: 12px;
}
.stepbar .n {
  inline-size: 26px; block-size: 26px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
}
.stepbar li.on { color: var(--text); }
.stepbar li.on .n { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.stepbar li.done .n { background: var(--success); border-color: var(--success); color: #fff; }
.stepbar li.done:not(:last-child)::after { background: var(--success); }

/* ---------- wizard shell ---------- */
.wizard { max-inline-size: 860px; margin-inline: auto; padding: 40px 24px 76px; }
.wizard > .auth-card { padding: 28px; }
.regrid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.regrid .full { grid-column: 1 / -1; }

/* ---------- terminal states (step 1 sent, step 4 welcome) ---------- */
.auth-state { text-align: center; padding: 34px 26px; }
.auth-state .glyph {
  inline-size: 58px; block-size: 58px; border-radius: 50%; margin-inline: auto;
  display: grid; place-items: center; background: var(--accent-soft);
  border: 1px solid var(--accent-line); color: var(--accent-ink);
}
.auth-state.ok .glyph { background: var(--success-soft); border-color: rgba(21,128,61,.28); color: var(--success); }
.auth-state h1 {
  font-family: var(--font-display); font-size: 24px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.2; margin-block-start: 18px;
}
.auth-state p { color: var(--text-2); font-size: 14.5px; margin-block-start: 10px; margin-inline: auto; max-inline-size: 52ch; }
.auth-state .mailto { color: var(--text); font-weight: 600; word-break: break-all; }
.auth-state .cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-block-start: 24px; }

@media (max-width: 860px) {
  .auth { padding-block: 30px 56px; }
  .auth-grid { grid-template-columns: 1fr; gap: 28px; }
  .auth-pitch h1 { font-size: 26px; }
  .regrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .auth-pitch ul { display: none; }
  .auth-card { padding: 20px; }
  .stepbar .lbl { display: none; }
  .stepbar li:not(:last-child)::after { margin-inline: 8px; }
}

/* ==========================================================================
   QUICK CONTACT DOCK
   --------------------------------------------------------------------------
   Replaces v1's floating left sidebar. Anchored to the inline-end corner so it
   flips sides under dir="rtl" without a second rule.
   ========================================================================== */
.quickdock { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 60; }

.quickdock .qtoggle {
  inline-size: 50px; block-size: 50px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-lg);
  transition: background .15s, transform .15s;
}
.quickdock .qtoggle:hover { background: var(--accent-hover); transform: translateY(-1px); }
.quickdock .qtoggle:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }
.quickdock .qtoggle .i-close { display: none; }
.quickdock.open .qtoggle .i-open { display: none; }
.quickdock.open .qtoggle .i-close { display: block; }

.quickdock .qmenu {
  position: absolute; inset-block-end: calc(100% + 10px); inset-inline-end: 0;
  inline-size: 226px; padding: 7px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s, transform .15s, visibility .15s;
}
.quickdock.open .qmenu { opacity: 1; visibility: visible; transform: translateY(0); }

.quickdock .qhead {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); padding: 8px 10px 6px;
}
.quickdock .qmenu a,
.quickdock .qmenu button {
  display: flex; align-items: center; gap: 10px; inline-size: 100%;
  padding: 9px 10px; border: 0; border-radius: var(--radius-xs);
  background: transparent; text-align: start; cursor: pointer;
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  transition: background .12s, color .12s;
}
.quickdock .qmenu a:hover,
.quickdock .qmenu button:hover { background: var(--surface-2); color: var(--text); }
.quickdock .qmenu svg { flex-shrink: 0; opacity: .65; }
.quickdock .qnote {
  font-size: 11.5px; color: var(--text-3); line-height: 1.5;
  padding: 8px 10px 4px; margin-block-start: 4px; border-top: 1px solid var(--border);
}

@media (max-width: 640px) {
  .quickdock { inset-block-end: 14px; inset-inline-end: 14px; }
  .quickdock .qtoggle { inline-size: 46px; block-size: 46px; }
  .quickdock .qmenu { inline-size: min(232px, calc(100vw - 28px)); }
}
@media print { .quickdock { display: none; } }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faqwrap { display: grid; gap: 10px; max-inline-size: 900px; }
.faq {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.faq[open] { border-color: var(--border-strong); }
.faq > summary {
  display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 15px 18px; font-size: 15px; font-weight: 600; color: var(--text);
  list-style: none; transition: background .12s;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary:hover { background: var(--surface-2); }
.faq > summary:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: -2px; }
.faq > summary .chev { margin-inline-start: auto; flex-shrink: 0; color: var(--text-3); transition: transform .18s; }
.faq[open] > summary .chev { transform: rotate(180deg); }
.faqbody { padding: 0 18px 18px; border-top: 1px solid var(--border); padding-block-start: 15px; }

/* ==========================================================================
   STAFF
   ========================================================================== */
.staffgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 18px; }
.staffcard {
  display: flex; gap: 16px; min-inline-size: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px;
}
.staffcard .shot { flex-shrink: 0; }
.staffcard .shot img {
  inline-size: 96px; block-size: 96px; border-radius: var(--radius-sm);
  object-fit: cover; background: var(--surface-2); border: 1px solid var(--border);
}
.staffcard .body { min-inline-size: 0; }
.staffcard h2 { font-family: var(--font-display); font-size: 16.5px; font-weight: 700; letter-spacing: -.015em; }
.staffcard .role {
  font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent-ink); margin-block-start: 3px;
}
.staffcard .bio { font-size: 13px; color: var(--text-2); line-height: 1.6; margin-block-start: 9px; }
.staffcard .contacts { display: grid; gap: 6px; margin-block-start: 11px; }
.staffcard .contacts li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); min-inline-size: 0; }
.staffcard .contacts svg { flex-shrink: 0; color: var(--text-3); }
.staffcard .contacts a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.staffcard .contacts a:hover { color: var(--accent-ink); text-decoration: underline; }

/* long-form legal copy */
.prose.policy h3 {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: -.015em; margin-block: 28px 10px;
}
.prose.policy h3:first-child { margin-block-start: 0; }
.prose.policy p { margin-block-end: 12px; }
.prose.policy hr { border: 0; border-top: 1px solid var(--border); margin-block: 22px; }

/* ==========================================================================
   CUSTOMER PORTAL  ·  sidebar shell + dashboard
   ========================================================================== */
.portal { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; align-items: start; padding-block: 22px 12px; }

.psidebar {
  position: sticky; inset-block-start: 16px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.psidebar .who { display: flex; align-items: center; gap: 11px; padding: 15px; border-bottom: 1px solid var(--border); }
.psidebar .who .av {
  inline-size: 38px; block-size: 38px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 700; font-size: 15px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-ink);
  text-transform: uppercase;
}
.psidebar .who .id { min-inline-size: 0; }
.psidebar .who b { display: block; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.psidebar .who span { display: block; font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.psidebar nav { padding: 8px; }
.psidebar h4 {
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); padding: 13px 10px 5px;
}
.psidebar a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-xs);
  font-size: 13.5px; font-weight: 500; color: var(--text-2);
  transition: background .12s, color .12s;
}
.psidebar a svg { flex-shrink: 0; opacity: .65; }
.psidebar a:hover { background: var(--surface-2); color: var(--text); }
.psidebar a.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.psidebar a.on svg { opacity: 1; }
.psidebar a.out { color: var(--alert); }
.psidebar a.out:hover { background: var(--alert-soft); color: var(--alert); }
.psidebar .sep { block-size: 1px; background: var(--border); margin: 8px 10px 0; }

/* narrow tables — the table.rows floor suits a wide table */
table.rows.compact { min-inline-size: 620px; }
table.rows .when { font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
table.rows .when b { display: block; color: var(--text-2); font-weight: 500; }
.rowbtn {
  display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xs);
  background: var(--surface); color: var(--text-3); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.rowbtn:hover { background: var(--alert-soft); border-color: rgba(220,38,38,.35); color: var(--alert); }

/* saved-vehicle cell: thumb + name + one line of description */
.favcell { display: flex; align-items: center; gap: 12px; }
.favcell > a { flex-shrink: 0; }
.favcell img { inline-size: 88px; block-size: 66px; border-radius: var(--radius-xs); object-fit: cover; }
.favcell .meta { min-inline-size: 0; }
.favcell .meta > a:hover { color: var(--accent-ink); }
.favcell small { display: block; font-weight: 400; color: var(--text-3); font-size: 12px; margin-block-start: 2px;
                 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* unread negotiation / support panels */
.unread { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.unread > * { min-inline-size: 0; }
.unread .panel > h2 { display: flex; align-items: center; gap: 9px; }
.unread .count {
  min-inline-size: 22px; padding-inline: 6px; block-size: 20px; border-radius: 999px;
  display: inline-grid; place-items: center; font-size: 11.5px; font-weight: 700;
  background: var(--surface-2); color: var(--text-2); font-variant-numeric: tabular-nums;
}
.unread .count.hot { background: var(--alert); color: #fff; }
.unread .panel > h2 .more { margin-inline-start: auto; font-size: 12.5px; font-weight: 600; color: var(--accent-ink); }
.unread .panel > h2 .more:hover { text-decoration: underline; }
.unread ul { display: grid; }
.unread li + li { border-top: 1px solid var(--border); }
.unread li a { display: block; padding: 11px 18px; font-size: 13.5px; color: var(--text-2); transition: background .12s, color .12s; }
.unread li a:hover { background: var(--surface-2); color: var(--accent-ink); }
.unread li.none { padding: 16px 18px; font-size: 13.5px; color: var(--text-3); }

.pmain { min-inline-size: 0; }

/* ---------- filter bar above a portal table ---------- */
.pfilters {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 12px; align-items: end;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 16px;
}
.pfilters .go { display: flex; gap: 8px; align-items: center; }
.pfilters .go .btn { flex: 1; }

/* ---------- currency tabs (purchases) ---------- */
.tabs { display: flex; gap: 4px; margin-inline-start: auto; background: var(--surface-2);
        border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px; }
.tabs a { padding: 6px 14px; border-radius: var(--radius-xs); font-size: 13px; font-weight: 600; color: var(--text-2); }
.tabs a:hover { color: var(--text); }
.tabs a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- status chips + new flags ---------- */
.statuspill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; text-transform: capitalize;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-2);
}
.statuspill.ok   { background: var(--success-soft); border-color: rgba(21,128,61,.3);  color: #14532d; }
.statuspill.warn { background: var(--accent-soft);  border-color: var(--accent-line);  color: var(--accent-ink); }
.statuspill.bad  { background: var(--alert-soft);   border-color: rgba(220,38,38,.3);  color: #991b1b; }
.newflag {
  display: inline-block; margin-inline-start: 8px; padding: 1px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent); color: var(--on-accent);
}

/* ---------- read-only detail pairs ---------- */
dl.readonly { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
dl.readonly dt { font-size: 11.5px; font-weight: 600; color: var(--text-3); margin-block-end: 3px; }
dl.readonly dd { font-size: 14px; color: var(--text); font-weight: 500; word-break: break-word; }
.hint { font-size: 12.5px; color: var(--text-3); margin-block-start: 14px; }
.auth-form .hint { margin-block-start: 0; }

/* ---------- documents ---------- */
.doclist { display: grid; }
.doclist .panel > h2 { display: flex; align-items: center; gap: 10px; }

/* ---------- message thread ---------- */
.thread { display: grid; gap: 16px; }
.bubble { display: flex; gap: 11px; align-items: flex-start; }
.bubble.mine { flex-direction: row-reverse; }
.bubble .av {
  inline-size: 32px; block-size: 32px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 700; text-transform: uppercase;
  background: var(--surface-2); border: 1px solid var(--border-strong); color: var(--text-2);
}
.bubble.mine .av { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.bubble .body {
  max-inline-size: min(560px, 82%);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 14px;
}
.bubble.mine .body { background: var(--accent-soft); border-color: var(--accent-line); }
.bubble .meta { display: flex; align-items: baseline; gap: 9px; margin-block-end: 5px; flex-wrap: wrap; }
.bubble .meta b { font-size: 13px; font-weight: 700; }
.bubble .meta span { font-size: 11.5px; color: var(--text-3); }
.bubble .text { font-size: 13.5px; color: var(--text-2); line-height: 1.6; overflow-wrap: anywhere; }
.bubble .attach {
  display: inline-flex; align-items: center; gap: 6px; margin-block-start: 10px;
  padding: 5px 10px; border-radius: var(--radius-xs);
  background: var(--surface); border: 1px solid var(--border-strong);
  font-size: 12.5px; font-weight: 600; color: var(--text-2);
}
.bubble .attach:hover { border-color: var(--accent-ink); color: var(--accent-ink); }

.backlink { display: inline-flex; align-items: center; gap: 5px; margin-inline-start: auto;
            font-size: 13.5px; font-weight: 600; color: var(--accent-ink); }
.backlink:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .portal { grid-template-columns: 1fr; }
  .psidebar { position: static; }
  .psidebar nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 10px; }
  .psidebar h4 { grid-column: 1 / -1; }
  .psidebar .sep { grid-column: 1 / -1; }
  .bubble .body { max-inline-size: 88%; }
}
@media (max-width: 620px) {
  .pfilters { grid-template-columns: 1fr; }
  .tabs { inline-size: 100%; margin-inline-start: 0; }
  .tabs a { flex: 1; text-align: center; }
  dl.readonly { grid-template-columns: 1fr; }
}

@media print {
  .utility, .masthead, .announce, .filters, .toolbar, .calc, .pager, .foot-wrap,
  .hero, .quickbar, .tilegrid,
  .buybox, .rail, .gallery .strip, .gallery .nav, .sharerow { display: none !important; }
  .layout, .detail-grid { grid-template-columns: 1fr; }
  .panel { break-inside: avoid; box-shadow: none; }
}

/* ==========================================================================
   MOBILE HEADER FIX — 2026-09-03
   --------------------------------------------------------------------------
   Reported by client as "issues with mobile browsers". Two symptoms, one cause.

   .masthead .wrap is a nowrap flex row holding .brand, .navtoggle, .mainnav
   and .actions. .brand already sets flex-shrink:0, but .icon-btn did not, and
   .actions cannot shrink because its .btn children are white-space:nowrap.
   So .actions took the whole row:

     - .navtoggle was squeezed to 2px x 38px (its SVG to 0px). The menu
       itself worked; nobody could hit a 2px target, so the entire nav was
       unreachable on a phone.
     - .actions still overflowed, ending 102px past the viewport at 375px
       and 157px at 320px. Every page scrolled sideways.

   Measured after this block: overflow 0px at both 320px and 375px, toggle
   back to 38x38, header 96px tall. Do NOT "fix" this with
   html,body{overflow-x:hidden} — that hides the scroll, leaves the toggle
   untappable, and breaks .masthead's position:sticky.

   NOTE: layout.blade.php loads this file as theme.css?v=1 — bump that to ?v=2
   when deploying or browsers will keep serving the cached copy.
   ========================================================================== */

/* The actual bug: an icon button is a flex child and must never shrink. */
.icon-btn { flex: 0 0 auto; }

@media (max-width: 1080px) {
  /* 24px gaps are desktop spacing; too generous once the row gets tight. */
  .masthead .wrap { gap: 12px; }
  .masthead .actions { min-inline-size: 0; }
  /* Hamburger to the far left, where a thumb expects it. */
  .navtoggle { order: -1; }
}

@media (max-width: 560px) {
  /* .actions is CMS-driven ($right_pages), so its width is not fixed and a
     third button could appear later. Give it its own row instead of trying
     to squeeze N buttons beside the brand — no overflow at any count. */
  .masthead .wrap { flex-wrap: wrap; row-gap: 0; min-height: 0; padding-block: 8px; }
  .masthead .actions { flex-basis: 100%; margin-inline-start: 0; padding-block-end: 6px; justify-content: flex-end; }
  .masthead .actions .btn { flex: 1 1 0; min-inline-size: 0; }

  /* Splitting the row evenly is right for the signed-out pair (Sign in / Create
     Account) but not for a lone button: signed in there is only "My Account", and
     flex:1 stretched it edge to edge as a full-width orange bar. :only-of-type
     rather than :only-child because the greeting <span> is a sibling — hidden at
     this width, but still in the DOM. */
  .masthead .actions a.btn:only-of-type { flex: 0 0 auto; }
}

/* Sort + recency bar above the results grid. Sits between the active-filter
   chips and the count/per-page toolbar. */
.sortbar {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 12px 14px; margin-block-end: 12px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.sortbar .grp { display: flex; align-items: center; gap: 8px; }
.sortbar label { font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.sortbar .control { inline-size: auto; min-inline-size: 170px; padding-block: 7px; font-size: 13px; }
@media (max-width: 560px) {
  .sortbar { gap: 10px; }
  .sortbar .grp { inline-size: 100%; }
  .sortbar .control { flex: 1; min-inline-size: 0; }
}

/* Quick filter chips (drive / fuel / gearbox), under the sort bar. */
.chipbar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-block-end: 12px; }
.chipgrp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chiplbl { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); margin-inline-end: 2px; }
.chipbar .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--surface);
  text-decoration: none; white-space: nowrap;
}
.chipbar .chip:hover { border-color: var(--accent-line); color: var(--text); background: var(--accent-soft); }
.chipbar .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.chipbar .chip .x { font-size: 14px; line-height: 1; opacity: .75; }

/* Pagination rendered above and below the grid. The footer row pairs it with a
   second per-page control so neither end of a long list is a dead end. */
.pagerfoot {
  display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: center; justify-content: space-between;
  margin-block-start: 18px;
}
.pagerfoot .pager { margin-block: 0; }
/* The base .pager margin (26px above, none below) suits a pager that closes a
   list. Above the grid that leaves it sitting flush against the first row of
   cards, so the top copy sets its own spacing on both sides. */
.pager--top { margin-block: 14px 20px; }
.pagerfoot .grp { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); }
.pagerfoot .grp .control { inline-size: auto; min-inline-size: 78px; padding-block: 6px; }
/* `.pager a, .pager span` styles every child as a 38px page button. The count is
   a span but is not a button, so it opts out of that box entirely. */
.pager .pagecount {
  display: inline; min-inline-size: 0; block-size: auto; padding: 0;
  background: none; border: 0; border-radius: 0;
  font-size: 12.5px; font-weight: 400; color: var(--text-3);
  margin-inline-end: 6px; white-space: nowrap;
}
.pager .pagecount b { color: var(--text-2); font-weight: 700; }