/* ==========================================================================
   AUTOBLOCK AUCTIONS — "THE BOARD"
   --------------------------------------------------------------------------
   A car auction is a room full of clocks. The site is that room: a thin black
   masthead carrying the live count and the time, then the board itself — cars
   in a grid, each one a photograph, a name, a price and a clock. Nothing sits
   between the visitor and the cars.

   Red is the only colour on the board and it means one thing: this is live, or
   this is closing. Everything else is ink on paper.
   ========================================================================== */

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface-alt);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern' 1;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 2px solid var(--hot); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.ico { width: 1.15em; height: 1.15em; flex: none; }

/* --- Tokens --------------------------------------------------------------- */
:root {
  --wrap: 1264px;
  --top-h: 58px;
}

/* Numbers are set in mono everywhere, and always line up in a column. */
.mono, .num, .tnum { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--s6); }
.wrap-narrow { max-width: 880px; }
.wrap-tight { max-width: 540px; }

.section { padding-block: var(--s10); }
.section-sm { padding-block: var(--s8); }
.section-alt { background: var(--accent-soft); }
.section-white, .section-tint { background: var(--surface); }
.section-dark { background: var(--ink); color: #fff; }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .muted { color: rgba(255,255,255,.62); }

/* A hairline between sections of the same colour, so the page reads as a
   sequence of registers rather than one long scroll. */
.section-ruled { border-top: 1px solid var(--line); }

.grid { display: grid; gap: var(--s4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1080px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.stack > * + * { margin-top: var(--stack-gap, var(--s3)); }
.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }

/* --- Type -----------------------------------------------------------------
   Headings are set in the condensed cut at 600. Going heavier makes a
   condensed face close up; the weight is carried by size and tracking.      */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  text-wrap: balance;
  color: var(--ink);
}
h1, .h1 { font-size: var(--t-h1); letter-spacing: var(--tr-h1); line-height: 1.06; }
.h-display { font-size: var(--t-display); letter-spacing: var(--tr-display); line-height: 1.02; font-weight: 600; }
h2, .h2 { font-size: var(--t-h2); letter-spacing: var(--tr-h2); line-height: 1.1; }
h3, .h3 { font-size: var(--t-h3); letter-spacing: var(--tr-h3); line-height: 1.2; }
h4, .h4 { font-size: var(--t-h4); font-weight: 600; letter-spacing: -.008em; line-height: 1.3; }

/* The one place uppercase is allowed: a short standing label, set in mono,
   tracked open enough to read. Never a sentence. */
.eyebrow, .label {
  display: inline-block;
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted);
}
.section-dark .eyebrow, .section-dark .label { color: rgba(255,255,255,.55); }
.grad-text { color: var(--ink); }

/* Running text stops at a readable measure whatever the container does. */
.lede { font-size: 1.06rem; color: var(--muted); line-height: 1.6; max-width: 62ch; }
.measure { max-width: 68ch; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.xsmall { font-size: var(--t-xs); }
.center { text-align: center; }
.italic { font-style: italic; }

/* A section head: label, title, and an optional line of standfirst, spaced
   once here so no page has to guess the rhythm again. */
.sec-head { margin-bottom: var(--s7); }
.sec-head .eyebrow { margin-bottom: var(--s3); }
.sec-head h2 + p, .sec-head h3 + p { margin-top: var(--s3); }
.sec-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s6); flex-wrap: wrap; }

/* --- Buttons ---------------------------------------------------------------
   Condensed at small sizes needs a touch of positive tracking to stay legible;
   that is the only reason the tracking here is not negative like the headings. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 10px 18px;
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  letter-spacing: .01em;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary, .btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-primary:hover, .btn-dark:hover { background: #000; border-color: #000; }
.btn-hot { background: var(--hot); color: #fff; border-color: var(--hot); }
.btn-hot:hover { background: #B32419; border-color: #B32419; }
.btn-ghost { background: var(--surface); border-color: var(--line-strong); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-outline-light:hover { background: rgba(255,255,255,.1); border-color: #fff; }
.btn-danger { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-success { background: var(--success); color: #fff; border-color: var(--success); }
.btn-sm { padding: 7px 13px; font-size: .875rem; }
.btn-lg { padding: 13px 24px; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* A text link that behaves like a button in the layout: the arrow moves, not
   the text, so nothing reflows on hover. */
.btn-link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--ink); border-bottom: 1px solid var(--line-strong); padding-bottom: 2px;
  transition: border-color .15s ease;
}
.btn-link:hover { border-bottom-color: var(--ink); }
.btn-link .arr { transition: transform .18s ease; }
.btn-link:hover .arr { transform: translateX(3px); }

/* --- Cards -----------------------------------------------------------------
   Bordered, not floated. A drop shadow on a flat catalogue page reads as
   decoration; a hairline reads as a rule. */
.card, .panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.card-pad, .panel-pad { padding: var(--s6); }
.card-hover { transition: border-color .15s ease; }
.card-hover:hover { border-color: var(--ink); }

/* --- Tags ----------------------------------------------------------------- */
.tag, .badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-soft);
}
.tag-live, .badge-live { background: var(--hot); color: #fff; border-color: var(--hot); font-weight: 600; }
.tag-ink, .badge-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.tag-glass, .badge-accent, .badge-info { background: var(--accent-soft); color: var(--ink); border-color: #DEDCD6; }
.badge-success { background: var(--success); color: #fff; border-color: var(--success); }
.tag-warn, .badge-warn { background: var(--warn); color: #fff; border-color: var(--warn); }
.badge-muted { background: var(--accent-soft); color: var(--muted); }

.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.dot-pulse { animation: pulse 1.4s steps(2, end) infinite; }
@keyframes pulse { 0%,60% { opacity: 1; } 61%,100% { opacity: .25; } }

/* ==========================================================================
   THE MASTHEAD — thin, black, always carrying the live count and the clock
   ========================================================================== */

.header, .top {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); color: #fff;
}
.header-inner {
  display: flex; align-items: center; gap: 20px;
  height: var(--top-h);
}

.logo { display: flex; align-items: center; gap: 9px; flex: none; }
.logo-mark {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  background: var(--hot); color: #fff; border-radius: var(--radius-sm);
}
.logo-mark .ico { width: 17px; height: 17px; }
.logo-text { display: flex; flex-direction: column; line-height: 1; }
.logo-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.22rem;
  letter-spacing: .005em; text-transform: uppercase; color: #fff;
}
.logo-sub {
  font-family: var(--font-mono); font-size: .54rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 3px;
}

.nav { display: flex; gap: 22px; margin-left: var(--s3); }
.nav a {
  font-family: var(--font-body); font-size: .875rem; font-weight: 400;
  letter-spacing: .002em; color: rgba(255,255,255,.68);
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav a:hover { color: #fff; }
.nav a.is-active { color: #fff; font-weight: 500; border-bottom-color: var(--hot); }

.header-actions {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono); font-size: .72rem; color: rgba(255,255,255,.72);
}
.header-phone { display: flex; flex-direction: column; line-height: 1.2; }
.header-phone .k { font-size: .54rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.header-phone .v { font-family: var(--font-mono); font-size: .82rem; color: #fff; }
.pill-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--radius-sm);
  background: var(--hot); color: #fff;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500; letter-spacing: .06em;
}
.top-clock { font-family: var(--font-mono); font-size: .72rem; color: rgba(255,255,255,.72); }

.nav-toggle { display: none; background: none; border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius-sm); padding: 5px; color: #fff; }
.nav-toggle .ico { width: 20px; height: 20px; }

.usermenu { position: relative; }
.usermenu-btn {
  display: flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; color: #fff;
}
.usermenu-btn:hover { background: rgba(255,255,255,.16); }
.avatar {
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--hot); color: #fff;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
}
.usermenu-panel {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 242px; padding: 5px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(16,16,20,.18); z-index: 60;
}
.usermenu-panel a, .usermenu-panel button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 11px; border: 0; background: none; font-size: .89rem; text-align: left;
  border-radius: var(--radius-sm); color: var(--ink);
}
.usermenu-panel a:hover, .usermenu-panel button:hover { background: var(--accent-soft); }
.usermenu-head { padding: 9px 11px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.usermenu-divider { height: 1px; background: var(--line); margin: 4px 0; }

/* ==========================================================================
   THE BOARD
   ========================================================================== */
.board { padding-block: var(--s6) var(--s9); }
.board-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.board-head h2 { font-size: var(--t-h3); font-weight: 600; letter-spacing: var(--tr-h3); }
.board-head .sort { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }

.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); }

.cell, .lot-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .14s;
}
.cell:hover, .lot-card:hover { border-color: var(--ink); }
.cell.lead { grid-column: span 2; grid-row: span 2; }

.cell figure, .lot-media { position: relative; margin: 0; background: var(--accent-soft); }
.cell figure img, .lot-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.cell.lead { }
.cell.lead figure { flex: 1; min-height: 0; display: flex; }
.cell.lead figure > a { display: flex; width: 100%; }
.cell.lead figure img { aspect-ratio: auto; height: 100%; min-height: 340px; }
.lot-media-empty {
  display: grid; place-items: center; aspect-ratio: 4/3; color: var(--muted);
  background: repeating-linear-gradient(135deg, var(--accent-soft) 0 10px, var(--surface) 10px 20px);
}
.lot-media-empty .ico { width: 40px; height: 40px; opacity: .45; }

.clock, .lot-timer {
  position: absolute; left: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-sm);
  background: rgba(16,16,20,.86); color: #fff;
  font-family: var(--font-mono); font-size: .74rem; font-weight: 500;
}
.clock.hot, .lot-timer.is-urgent { background: var(--hot); }
.clock.is-cold, .lot-timer.is-ended { background: rgba(16,16,20,.55); }
.cell.lead .clock { font-size: 1.02rem; padding: 7px 14px; }
.lot-timer .ico { width: 13px; height: 13px; }

.lot-flags, .cell-flags { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; flex-wrap: wrap; }
.lot-watch {
  position: absolute; top: 10px; right: 10px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: 0; border-radius: 50%; color: var(--ink);
}
.lot-watch:hover { background: #fff; color: var(--hot); }

.cbody, .lot-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.cell.lead .cbody { padding: var(--s5) var(--s6) var(--s6); flex: 0 0 auto; }
.ctag, .lot-meta {
  font-family: var(--font-mono); font-size: .63rem; font-weight: 400; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cname, .lot-title {
  font-family: var(--font-display); font-weight: 600; font-size: 1.04rem;
  letter-spacing: -.012em; line-height: 1.2; margin: var(--s2) 0 var(--s3);
}
.cell.lead .cname { font-size: 1.65rem; font-weight: 600; letter-spacing: -.022em; }
.cname a:hover, .lot-title a:hover { color: var(--hot); }
.cspec, .lot-specs {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: .66rem; color: var(--muted);
}
.lot-specs span { display: inline-flex; align-items: center; gap: 5px; }
.lot-specs .ico { width: 12px; height: 12px; }

.cfoot, .lot-price {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 10px;
  margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--line);
}
.cfoot .k, .lot-price .k {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.cfoot .v, .lot-price .v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.06rem; font-weight: 500; letter-spacing: -.02em; margin-top: 3px;
}
.cell.lead .cfoot .v { font-size: 1.6rem; font-weight: 500; }
.lot-price .v-sub { font-family: var(--font-mono); font-size: .62rem; color: var(--muted); margin-top: 2px; }
.lot-actions { display: flex; gap: 7px; margin-top: 12px; }
.lot-actions .btn { flex: 1; }

/* Filter bar sitting directly under the masthead */
.boardbar { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: 11px; }
.boardbar-inner { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.boardbar .fld {
  display: flex; align-items: center; height: 36px; padding: 0 12px; margin: 0;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .85rem; color: var(--ink-soft);
}
.boardbar .fld-grow { flex: 1; min-width: 200px; }
.boardbar .fld-grow input { width: 100%; border: 0; background: none; outline: none; }
.boardbar select.fld {
  appearance: none; padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236A6A72' d='M1.2 0 5 3.8 8.8 0 10 1.2 5 6.2 0 1.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.boardbar .count { margin-left: auto; font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }

/* Featured strip used on a few pages */
.lot-feature { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lot-feature img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/11; }
.lot-feature-body { padding: clamp(18px,2.4vw,28px); display: flex; flex-direction: column; justify-content: center; }

/* ==========================================================================
   Page head, breadcrumbs, toolbar, pagination
   ========================================================================== */
.pagehead { padding: 22px 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); }
.crumbs { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-bottom: 10px; }
.crumbs a:hover { color: var(--ink); }
.crumbs .sep { opacity: .5; }
.crumbs .current { color: var(--ink); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: .76rem; color: var(--muted);
}
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px;
  font-family: var(--font-mono); font-size: .7rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft);
}
.chip:hover { border-color: var(--ink); }
.chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

.pagination { display: flex; gap: 5px; justify-content: center; align-items: center; margin-top: 28px; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; padding: 0 12px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: .84rem;
}
.pagination a:hover { border-color: var(--ink); }
.pagination .is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.pagination .is-disabled { opacity: .35; pointer-events: none; }

.empty { text-align: center; padding: clamp(40px,6vw,66px) 22px; }
.empty .ico { width: 48px; height: 48px; color: var(--muted); margin: 0 auto 14px; opacity: .4; }

/* Inventory rail */
.inv-layout { display: grid; gap: 20px; grid-template-columns: 226px minmax(0,1fr); align-items: start; }
.filters { position: sticky; top: calc(var(--top-h) + 14px); }
.filters-inner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.filters-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.filters-head a { color: var(--hot); }
.filter-group { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.filter-group:last-of-type { border-bottom: 0; }
.filter-title { font-family: var(--font-display); font-weight: 700; font-size: .8rem; margin-bottom: 9px; }
.filter-list a { display: flex; justify-content: space-between; align-items: center; gap: 9px; padding: 6px 10px; margin: 0 -10px; font-size: .86rem; border-radius: var(--radius-sm); }
.filter-list a:hover { background: var(--accent-soft); }
.filter-list a.is-active { background: var(--ink); color: #fff; font-weight: 600; }
.filter-list .n { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); }
.filter-list a.is-active .n { color: rgba(255,255,255,.7); }

.searchbar {
  display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 46px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.searchbar .input { border: 0; padding: 0; background: none; }
.searchbar .input:focus { box-shadow: none; }
.searchbar .ico { color: var(--muted); }

/* ==========================================================================
   Lot detail
   ========================================================================== */
.lot-layout { display: grid; gap: 24px; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); align-items: start; }

.gallery-main { position: relative; aspect-ratio: 4/3; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(255,255,255,.92); border: 0; border-radius: 50%; color: var(--ink);
  opacity: 0; transition: opacity .16s ease, background .16s ease;
}
.gallery-main:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; }
@media (hover: none) { .gallery-nav { opacity: 1; } }
.gallery-nav:hover { background: #fff; }
.gallery-prev { left: 11px; } .gallery-next { right: 11px; }
.gallery-count {
  position: absolute; right: 11px; bottom: 11px; padding: 3px 10px;
  background: rgba(16,16,20,.86); color: #fff; border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: .72rem;
}
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px,1fr)); gap: 6px; margin-top: 6px; }
.thumb { aspect-ratio: 4/3; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--accent-soft); padding: 0; transition: border-color .14s ease; }
.thumb:hover { border-color: var(--line-strong); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb.is-active { border-color: var(--hot); box-shadow: inset 0 0 0 1px var(--hot); }

.bidbox { position: sticky; top: calc(var(--top-h) + 14px); }
.bidbox-head { padding: 16px 18px; background: var(--ink); color: #fff; border-radius: var(--radius) var(--radius) 0 0; }
.bidbox-body { padding: 18px; background: var(--surface); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.bid-amount { font-family: var(--font-display); font-size: clamp(1.9rem,3.4vw,2.4rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.bid-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.58); }

.countdown { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: 13px; }
.countdown-unit { text-align: center; padding: 8px 3px; background: rgba(255,255,255,.08); border-radius: var(--radius-sm); }
.countdown-unit .n { font-family: var(--font-mono); font-size: 1.14rem; font-weight: 600; line-height: 1; }
.countdown-unit .l { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .12em; text-transform: uppercase; opacity: .55; margin-top: 4px; }
.countdown.is-urgent .countdown-unit { background: rgba(229,52,42,.35); }

.buynow-strip {
  display: flex; justify-content: space-between; align-items: center; gap: 11px;
  padding: 13px 15px; margin-top: 14px;
  background: var(--accent-soft); border-radius: var(--radius);
}

.spec-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.spec-table tr { border-bottom: 1px solid var(--line); }
.spec-table tr:last-child { border-bottom: 0; }
.spec-table th, .spec-table td { padding: 10px 14px; text-align: left; font-size: .88rem; vertical-align: top; }
.spec-table th { width: 40%; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spec-table td { font-weight: 500; }

.trust-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
/* Seven assurances in a three-wide bed leaves the last one stranded beside two
   empty cells. When the final item starts a row on its own, let it take the
   whole row instead of sitting in a hole. */
.trust-grid > :last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid > :last-child:nth-child(3n + 1) { grid-column: auto; }
  .trust-grid > :last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
.trust-item { padding: 13px 11px; text-align: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust-item .ico { width: 18px; height: 18px; color: var(--hot); margin: 0 auto 6px; }
.trust-item .l { font-family: var(--font-mono); font-size: .66rem; line-height: 1.35; }

.bid-history { max-height: 320px; overflow-y: auto; }
.bid-row { display: flex; justify-content: space-between; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--accent-soft); font-size: .86rem; }
.bid-row:last-child { border-bottom: 0; }
.bid-row.is-you { background: var(--accent-soft); margin-inline: -12px; padding-inline: 12px; border-radius: var(--radius-sm); }
.bid-row .amt { font-family: var(--font-display); font-weight: 700; }

/* ==========================================================================
   Steps, values, reviews, FAQ
   ========================================================================== */
.steps { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.step { display: grid; grid-template-columns: 62px minmax(0,1fr); gap: 16px; padding: 20px; background: var(--surface); }
.step-n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 900; letter-spacing: -.04em; color: var(--hot); line-height: 1; }

.value-card { padding: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.value-card::before { content: ""; display: block; width: 26px; height: 3px; background: var(--hot); margin-bottom: 13px; }

.stars { display: inline-flex; gap: 1px; color: var(--hot); }
.stars .ico { width: 14px; height: 14px; }

.review-card { padding: var(--s6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; }
.review-body { margin: 12px 0 16px; line-height: 1.6; flex: 1; }
.review-item { display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 6px; padding: 4px 8px; margin-bottom: var(--s4); background: var(--accent-soft); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--muted); }
.review-who .avatar { background: var(--ink); }
.review-who { display: flex; align-items: center; gap: 10px; padding-top: 13px; border-top: 1px solid var(--line); }

/* --- Terms table -----------------------------------------------------------
   A ruled list, not a card grid. Three columns — what it is, what it costs,
   what that means — so a buyer can run down the middle column and compare
   figures without reading a word of prose. On a phone the third column drops
   under the first two rather than squeezing into a fourth of the width.      */
.terms { border-top: 1px solid var(--ink); }
.term {
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(120px, 190px) 1fr;
  gap: var(--s3) var(--s6);
  align-items: baseline;
  padding-block: var(--s5);
  border-bottom: 1px solid var(--line);
}
.term dt {
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: -.008em; color: var(--ink);
}
.term-v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: .95rem; font-weight: 500; letter-spacing: -.01em; color: var(--ink);
}
.term-d { font-size: .92rem; line-height: 1.6; color: var(--muted); max-width: 62ch; }

@media (max-width: 860px) {
  .term {
    grid-template-columns: 1fr auto;
    gap: var(--s2) var(--s4);
    padding-block: var(--s4);
  }
  .term-d { grid-column: 1 / -1; }
  .term-v { text-align: right; }
}

.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  width: 100%; padding: 17px 0; background: none; border: 0; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; letter-spacing: -.02em;
}
.faq-q:hover { color: var(--hot); }
.faq-q .icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; background: var(--accent-soft); border-radius: 50%; transition: transform .2s; }
.faq-q .icon .ico { width: 13px; height: 13px; }
.faq-item[open] .faq-q .icon { transform: rotate(45deg); background: var(--hot); color: #fff; }
.faq-a { padding: 0 0 19px; max-width: 76ch; color: var(--muted); line-height: 1.66; }

.cat-tile .ico { width: 24px; height: 24px; }
.feature-mark .ico { width: 22px; height: 22px; }

/* ==========================================================================
   Forms and alerts
   ========================================================================== */
.field { margin-bottom: 16px; }
.label { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: 700; font-size: .8rem; letter-spacing: -.01em; }
.label .req { color: var(--hot); }
.hint { margin-top: 5px; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.input, .select, .textarea {
  width: 100%; padding: 10px 13px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .14s, box-shadow .14s;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(16,16,20,.08);
}
.textarea { min-height: 120px; resize: vertical; }
.select {
  appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236A6A72' d='M1.2 0 5 3.8 8.8 0 10 1.2 5 6.2 0 1.2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}
.input-error { border-color: var(--danger); }
.error-text { margin-top: 5px; font-size: .8rem; color: var(--danger); font-weight: 500; }
.input-money { position: relative; }
.input-money .input { padding-left: 28px; font-family: var(--font-mono); }
.input-money::before { content: "$"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); color: var(--muted); pointer-events: none; z-index: 1; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--hot); }
.check span { font-size: .9rem; line-height: 1.5; }
.field-row { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.alert {
  display: flex; gap: 11px; align-items: flex-start; padding: 13px 15px;
  border: 1px solid var(--line); border-left: 4px solid; border-radius: var(--radius);
  background: var(--surface); font-size: .9rem; line-height: 1.5;
}
.alert-success { border-left-color: var(--success); background: #F0F8F4; }
.alert-error   { border-left-color: var(--danger);  background: #FCF1F0; }
.alert-warning { border-left-color: var(--warn);    background: #FDF8EC; }
.alert-info    { border-left-color: var(--ink);     background: var(--accent-soft); }
.flashes { position: sticky; top: calc(var(--top-h) + 6px); z-index: 40; }
.flashes .alert { box-shadow: 0 4px 16px rgba(16,16,20,.12); }
.flashes .alert + .alert { margin-top: 7px; }

/* ==========================================================================
   Account & admin
   ========================================================================== */
.acct-layout { display: grid; gap: 22px; grid-template-columns: 212px minmax(0,1fr); align-items: start; }
.acct-nav { position: sticky; top: calc(var(--top-h) + 14px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.acct-nav a { display: flex; align-items: center; gap: 10px; padding: 11px 13px; font-size: .88rem; border-bottom: 1px solid var(--line); }
.acct-nav a:last-child { border-bottom: 0; }
.acct-nav a:hover { background: var(--accent-soft); }
.acct-nav a.is-active { background: var(--ink); color: #fff; font-weight: 600; }
.acct-nav .ico { width: 16px; height: 16px; }
.acct-nav .count { margin-left: auto; font-family: var(--font-mono); font-size: .68rem; padding: 1px 7px; border-radius: 999px; background: var(--hot); color: #fff; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.stat { padding: 16px; border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; }
.stat .n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat .l { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

.progress-steps { display: flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); margin-bottom: 20px; }
.pstep { flex: 1; min-width: 145px; padding: 13px 15px; border-right: 1px solid var(--line); }
.pstep:last-child { border-right: 0; }
.pstep .n { width: 22px; height: 22px; display: grid; place-items: center; background: var(--accent-soft); border-radius: 50%; font-family: var(--font-mono); font-size: .7rem; font-weight: 600; margin-bottom: 8px; }
.pstep.is-done { background: #F0F8F4; }
.pstep.is-done .n { background: var(--success); color: #fff; }
.pstep.is-current { background: var(--accent-soft); }
.pstep.is-current .n { background: var(--ink); color: #fff; }
.pstep .t { font-size: .86rem; font-weight: 600; }
.pstep .d { font-size: .76rem; color: var(--muted); margin-top: 2px; }

.data-table { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.data-table th {
  padding: 10px 13px; text-align: left; background: var(--accent-soft);
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.data-table td { padding: 11px 13px; border-bottom: 1px solid var(--line); font-size: .87rem; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-alt); }
.data-table a { font-weight: 600; }
.data-table a:hover { color: var(--hot); }
.table-scroll { overflow-x: auto; }
.thumb-sm { width: 54px; height: 40px; object-fit: cover; border-radius: var(--radius-sm); flex: none; }

.upload-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px,1fr)); gap: 13px; }
.upload-tile { position: relative; padding: 20px 16px; text-align: center; background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius); }
.upload-tile:hover { border-color: var(--ink); background: var(--accent-soft); }
.upload-tile.is-done { border-style: solid; border-color: var(--success); background: #F0F8F4; }
.upload-tile input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { display: block; width: 38px; height: 38px; margin: 0 auto 10px; color: var(--muted); }
.upload-icon .ico { width: 100%; height: 100%; }
.upload-tile.is-done .upload-icon { color: var(--success); }
.upload-preview { width: 100%; aspect-ratio: 3/2; object-fit: cover; margin-bottom: 10px; border-radius: var(--radius-sm); background: var(--accent-soft); }
.upload-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
.upload-hint { font-size: .76rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* ==========================================================================
   Signing
   ========================================================================== */
.sign-shell { min-height: 100vh; background: var(--surface-alt); }
.sign-bar { position: sticky; top: 0; z-index: 30; background: var(--ink); color: #fff; padding: 11px 0; }
.sign-doc { max-width: 840px; margin: 24px auto; padding: clamp(24px,4vw,50px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.sign-doc h2 { font-size: 1rem; padding-bottom: 6px; margin: 30px 0 13px; border-bottom: 2px solid var(--ink); }
.sign-doc h2:first-of-type { margin-top: 0; }
.sign-doc p { margin-bottom: 12px; line-height: 1.68; font-size: .92rem; }
.sign-doc .doc-head { text-align: center; padding-bottom: 22px; border-bottom: 1px solid var(--ink); margin-bottom: 26px; }
.doc-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; }
.doc-table tr { border-bottom: 1px solid var(--line); }
.doc-table tr:last-child { border-bottom: 0; }
.doc-table th, .doc-table td { padding: 9px 13px; text-align: left; font-size: .86rem; }
.doc-table th { width: 40%; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.doc-total { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 15px 18px; margin: 18px 0; background: var(--accent-soft); border-left: 3px solid var(--hot); border-radius: var(--radius); }
.doc-total .v { font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; }
.sig-panel { max-width: 840px; margin: 0 auto 36px; }
.sig-tabs { display: flex; gap: 6px; margin-bottom: 14px; }
.sig-tab { padding: 9px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: .86rem; }
.sig-tab.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.sig-pad-wrap { position: relative; background: var(--surface); border: 2px dashed var(--line); border-radius: var(--radius); overflow: hidden; }
.sig-pad { display: block; width: 100%; height: 180px; touch-action: none; cursor: crosshair; }
.sig-pad-line { position: absolute; left: 30px; right: 30px; bottom: 42px; border-bottom: 1px solid var(--line); pointer-events: none; }
.sig-pad-hint { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font-family: var(--font-mono); font-size: .74rem; color: var(--muted); pointer-events: none; }
.sig-typed { width: 100%; padding: 24px 16px; text-align: center; font-family: 'Brush Script MT','Segoe Script',cursive; font-size: 2rem; border: 2px dashed var(--line); border-radius: var(--radius); background: var(--surface); }

/* ==========================================================================
   Footer
   ========================================================================== */
.cta-band { background: var(--ink); color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .wrap { padding-block: clamp(28px,3.6vw,44px); display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap; }
.cta-band .lede { color: rgba(255,255,255,.75); }

.footer { background: var(--ink); color: rgba(255,255,255,.62); padding-block: 40px 20px; border-top: 1px solid rgba(255,255,255,.1); }
.footer h4 { font-family: var(--font-mono); font-weight: 500; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
.footer a { color: rgba(255,255,255,.62); font-size: .87rem; }
.footer a:hover { color: #fff; }
.footer-grid { display: grid; gap: 28px; grid-template-columns: 1.7fr repeat(3,1fr); }
.footer-links li + li { margin-top: 7px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); font-family: var(--font-mono); font-size: .72rem; }

/* --- Utilities ------------------------------------------------------------ */
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}.mt-5{margin-top:42px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}.mb-5{margin-bottom:42px}
.hide { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1200px) {
  .board-grid { grid-template-columns: repeat(3, 1fr); }
  .cell.lead { grid-column: span 2; grid-row: span 2; }
}
@media (max-width: 1080px) {
  .lot-layout { grid-template-columns: 1fr; }
  .bidbox { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .lot-feature { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .board-grid { grid-template-columns: repeat(2, 1fr); }
  .cell.lead { grid-column: span 2; grid-row: span 1; }
  .inv-layout { grid-template-columns: 1fr; }
  .filters { position: static; }
  .acct-layout { grid-template-columns: 1fr; }
  .acct-nav { position: static; display: flex; overflow-x: auto; }
  .acct-nav a { white-space: nowrap; border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .nav-toggle { display: block; margin-left: auto; }
  .nav {
    display: none; position: absolute; top: var(--top-h); left: 0; right: 0;
    flex-direction: column; gap: 0; padding: 0; background: var(--ink);
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 24px; border-bottom: 1px solid rgba(255,255,255,.08); border-left: 3px solid transparent; }
  .nav a.is-active { border-bottom-color: rgba(255,255,255,.08); border-left-color: var(--hot); }
  .header-actions { margin-left: 0; }
  .header-phone, .top-clock { display: none; }
  .hide-sm { display: none; }
}
@media (max-width: 620px) {
  :root { --top-h: 52px; }
  .board-grid { grid-template-columns: 1fr; }
  .cell.lead { grid-column: span 1; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .btn-inline, .row .btn, .lot-actions .btn,
  .bidbar .btn, .sheet-foot .btn { width: auto; }
  .lot-actions .btn { flex: 1; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .stat-grid, .progress-steps { flex-direction: column; }
  .stat, .pstep { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child, .pstep:last-child { border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .header, .top, .boardbar, .footer, .cta-band, .sign-bar, .sig-panel, .btn, .flashes { display: none !important; }
  .sign-doc { border: 0; margin: 0; max-width: none; padding: 0; }
}

/* ==========================================================================
   HOME — utility strip, hero, trust row, search console, process, FAQ, alerts
   ========================================================================== */

/* A thin line above the masthead: how to reach the room, and its rating. */
.util {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  min-height: 32px; padding-block: 6px;
  background: #000; color: rgba(255,255,255,.6);
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .03em;
}
.util a { color: rgba(255,255,255,.6); }
.util a:hover { color: #fff; }
.util b { color: #fff; font-weight: 500; }
.util .r { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }
.util .rating { color: var(--hot); }

.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero-inner {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--s9); align-items: center; padding-block: var(--s10);
}
.hero h1 {
  font-size: var(--t-display); font-weight: 600; letter-spacing: var(--tr-display);
  line-height: 1.02; color: #fff; max-width: 14ch;
}
.hero h1 .hl { color: var(--hot); }
.hero .lede { color: rgba(255,255,255,.7); margin-top: var(--s4); max-width: 48ch; }
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s6); }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; aspect-ratio: 16/11; object-fit: cover; border-radius: var(--radius); }
.hero-float {
  position: absolute; left: 14px; bottom: 14px; right: 14px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 14px;
  padding: var(--s3) var(--s4); border-radius: var(--radius);
  background: rgba(21,23,27,.92);
}
.hero-float .k { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hero-float .v { font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; margin-top: 3px; line-height: 1.15; }
.hero-float .t { font-family: var(--font-mono); font-size: .84rem; color: var(--hot); font-weight: 500; }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5);
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.16);
}
.hero-stat + .hero-stat { padding-left: var(--s5); border-left: 1px solid rgba(255,255,255,.12); }
.hero-stat .n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; line-height: 1; color: #fff;
}
.hero-stat .l {
  font-family: var(--font-body); font-size: .78rem; font-weight: 400;
  letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.55); margin-top: var(--s2);
}

.trustrow { background: var(--surface); border-bottom: 1px solid var(--line); }
.trustrow-inner { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7); padding-block: var(--s3); justify-content: space-between; }
.trustrow span { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-body); font-size: .82rem; color: var(--ink-soft); }
.trustrow .ico { width: 15px; height: 15px; color: var(--hot); }

/* Search console */
.console { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.console-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.console-grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; align-items: end; }
.console-grid .field { margin: 0; }
.console-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; align-items: center; }

/* Numbered process cards */
.process {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s6); border-top: 1px solid var(--ink); padding-top: var(--s5);
}
.pcard { padding-right: var(--s5); }
.pcard + .pcard { border-left: 1px solid var(--line); padding-left: var(--s6); }
.pcard .n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: .72rem; font-weight: 500; letter-spacing: .1em;
  color: var(--hot); line-height: 1;
}
.pcard h3 { font-size: 1.08rem; margin: var(--s3) 0 var(--s2); }
.pcard p { font-size: .88rem; color: var(--muted); line-height: 1.6; }
@media (max-width: 1080px) {
  .process { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6) var(--s7); }
  .pcard:nth-child(odd) { border-left: 0; padding-left: 0; }
  .pcard:nth-child(n+3) { padding-top: var(--s5); border-top: 1px solid var(--line); }
}
@media (max-width: 620px) {
  .process { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pcard { padding: var(--s5) 0 0; border-left: 0 !important; padding-left: 0 !important; }
  .pcard + .pcard { border-top: 1px solid var(--line); }
}

/* Split block */
.split { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.split img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.split-body { padding: clamp(22px, 3vw, 38px); display: flex; flex-direction: column; justify-content: center; }
.ticks { display: grid; gap: 11px; margin: 20px 0 24px; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; font-size: .93rem; }
.ticks .box { width: 22px; height: 22px; display: grid; place-items: center; background: var(--hot); color: #fff; border-radius: 50%; font-size: .72rem; font-weight: 700; }

.rating-sum { display: flex; align-items: center; gap: 12px; }
.rating-sum .score { font-family: var(--font-display); font-size: 2.1rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; }

.alerts { background: var(--ink); color: #fff; }
.alerts .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-block: 24px; }
.alerts h3 { color: #fff; font-size: 1.3rem; }
.alerts p { color: rgba(255,255,255,.7); font-size: .88rem; margin-top: 4px; }
.alerts form { display: flex; gap: 8px; flex-wrap: wrap; }
.alerts .input { min-width: 240px; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; }
.alerts .input::placeholder { color: rgba(255,255,255,.55); }

/* Board cells carry the same figures the reference cards do */
.cspec-row { display: grid; grid-template-columns: 1.2fr 1fr .7fr; gap: var(--s2); margin-bottom: var(--s3); }
.cspec-row div { min-width: 0; }
.cspec-row .k { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.cspec-row .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .78rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cnext { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-top: var(--s2); }
.cactions { display: flex; gap: var(--s2); margin-top: var(--s3); }
.cactions .btn { flex: 1; }
.cviews {
  position: absolute; right: 10px; bottom: 10px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--radius-sm);
  background: rgba(16,16,20,.72); color: rgba(255,255,255,.9);
  font-family: var(--font-mono); font-size: .64rem;
}
.cviews .ico { width: 11px; height: 11px; }

/* Chips on related cards */
.mini-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 4px; }
.mini-chips span {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface-alt);
}

/* Lot page promises strip and the walkthrough-video dialog */
.promise-strip { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--ink); border-radius: var(--radius); overflow: hidden; }
.promise-strip > div { padding: 13px 12px; text-align: center; border-right: 1px solid rgba(255,255,255,.12); }
.promise-strip > div:last-child { border-right: 0; }
.promise-strip .n { font-family: var(--font-display); font-size: 1.2rem; font-weight: 800; letter-spacing: -.03em; color: var(--hot); line-height: 1; }
.promise-strip .l { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .11em; text-transform: uppercase; color: rgba(255,255,255,.62); margin-top: 5px; }

dialog.modal { width: min(560px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--line); border-top: 3px solid var(--hot); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
dialog.modal::backdrop { background: rgba(16,16,20,.62); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-body { padding: 22px 18px; }
.modal-close { background: var(--ink); color: #fff; border: 0; border-radius: 50%; width: 26px; height: 26px; line-height: 1; }

@media (max-width: 1080px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .console-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .split { grid-template-columns: 1fr; }
  .split img { min-height: 230px; }
}
@media (max-width: 700px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s5) 0; }
  .hero-stat { padding-left: 0; border-left: 0; }
  .hero-stat:nth-child(even) { padding-left: var(--s5); border-left: 1px solid rgba(255,255,255,.12); }
  .console-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .promise-strip { grid-template-columns: repeat(2, 1fr); }
  .promise-strip > div { border-bottom: 1px solid rgba(255,255,255,.12); }
  .util .hide-sm { display: none; }
}

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */

/* A photographed banner rather than a flat page head — this is the one page
   that exists to be persuasive. */
.t-hero {
  position: relative; overflow: hidden;
  background: var(--ink) center/cover no-repeat;
  color: #fff;
}
.t-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,16,20,.92) 0%, rgba(16,16,20,.78) 42%, rgba(16,16,20,.25) 100%);
}
.t-hero .wrap { position: relative; z-index: 2; padding-block: clamp(40px, 6vw, 76px); }
.t-hero h1 { color: #fff; max-width: 16ch; }
.t-hero .lede { color: rgba(255,255,255,.78); margin-top: 14px; }
.t-hero .crumbs { color: rgba(255,255,255,.6); }
.t-hero .crumbs a { color: rgba(255,255,255,.6); }
.t-hero .crumbs a:hover { color: #fff; }
.t-hero .crumbs .current { color: #fff; }

.t-score { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.t-score .n { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; }
.t-score .stars .ico { width: 17px; height: 17px; }
.t-score .l { font-family: var(--font-mono); font-size: .74rem; color: rgba(255,255,255,.66); margin-top: 5px; }

/* The lead testimonial gets the room a hand-picked quote deserves. */
.t-lead {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 26px; align-items: center;
  padding: clamp(24px, 3.4vw, 40px);
  background: var(--ink); color: #fff;
}
.t-lead .quote { font-size: clamp(1.05rem, 1.7vw, 1.32rem); line-height: 1.6; }
.t-lead .stars { margin-bottom: 14px; }
.t-badge {
  display: grid; place-items: center; gap: 2px;
  padding: 18px 26px; text-align: center;
  background: var(--hot); color: #fff;
}
.t-badge .n { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; line-height: 1; }
.t-badge .l { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; }

.t-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; }
.t-card {
  position: relative; display: flex; flex-direction: column;
  padding: 22px 20px; background: var(--surface);
  border: 1px solid var(--line, var(--rule)); border-top: 3px solid var(--hot);
}
.t-card .mark {
  position: absolute; top: 14px; right: 16px;
  font-family: Georgia, serif; font-size: 2.6rem; line-height: 1;
  color: var(--line, var(--rule));
}
.t-card .quote { margin: 12px 0 16px; line-height: 1.65; flex: 1; font-size: .92rem; }
.t-item {
  display: flex; align-items: center; gap: 8px; padding: 8px 11px; margin-bottom: 14px;
  border: 1px solid var(--line, var(--rule));
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.t-item .ico { width: 14px; height: 14px; flex: none; }
.t-who { display: flex; align-items: center; gap: 11px; }
.t-who .avatar { width: 38px; height: 38px; font-size: .8rem; }
.t-who .name { font-weight: 700; font-size: .92rem; }
.t-who .where { font-family: var(--font-mono); font-size: .7rem; color: var(--muted); margin-top: 2px; }

@media (max-width: 980px) { .t-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) {
  .t-grid { grid-template-columns: 1fr; }
  .t-lead { grid-template-columns: 1fr; }
}

/* A reviewer avatar carries a photograph when one is on file. */
.avatar.has-photo { padding: 0; overflow: hidden; background: var(--surface-alt); }
.avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   Hero slider
   --------------------------------------------------------------------------
   The lots closing soonest, one after another. Auto-advance is a convenience,
   never the only way through: the arrows, the dots and the keyboard all work,
   and it stops the moment a pointer or the keyboard focus is on it.
   ========================================================================== */
.slider { position: relative; aspect-ratio: 16/11; border-radius: var(--radius); overflow: hidden; }
.slide {
  position: absolute; inset: 0; display: block;
  opacity: 0; visibility: hidden;
  transition: opacity .55s ease, visibility .55s;
}
.slide.is-on { opacity: 1; visibility: visible; }
.slide img { width: 100%; height: 100%; object-fit: cover; }

.slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(255,255,255,.9); color: #17191B;
  border: 0; border-radius: var(--radius); font-size: 1.1rem; line-height: 1;
}
.slider-nav:hover { background: #fff; }
.slider-prev { left: 10px; }
.slider-next { right: 10px; }

.slider-dots {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 10px;
  display: flex; gap: 6px; justify-content: center;
}
.slider-dots button {
  width: 26px; height: 4px; padding: 0; border: 0; border-radius: 2px;
  background: rgba(255,255,255,.45); cursor: pointer;
}
.slider-dots button[aria-current="true"] { background: var(--hot); }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}

/* ==========================================================================
   Phone layout
   --------------------------------------------------------------------------
   The masthead cannot hold a logo, a live count, a phone number and two
   buttons in 390px, and trying makes the whole document scroll sideways. On a
   phone the auth buttons move into the collapsed menu and the extras go away.
   ========================================================================== */
.nav-auth { display: none; }

@media (max-width: 860px) {
  .header-actions .btn,
  .header-actions .header-phone { display: none; }

  .nav-auth { display: flex; flex-direction: column; }
  .nav-auth a {
    padding: 13px 24px;
    font-family: var(--font-display); font-weight: 700;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .nav-auth a:last-child { color: var(--hot); }
}

@media (max-width: 620px) {
  /* Nothing should ever be able to push the page wider than the screen. */
  html, body { overflow-x: hidden; }
  .wrap { padding-inline: 16px; }

  .header-inner { gap: 10px; }
  .logo-mark { width: 26px; height: 26px; }
  .logo-name { font-size: 1.1rem; }
  .logo-sub { display: none; }
  .pill-live { font-size: .6rem; padding: 3px 8px; }

  /* Forms that were laid out for a desktop row */
  .alerts .wrap { align-items: stretch; }
  .alerts form { flex-direction: column; align-items: stretch; }
  .alerts .input { min-width: 0; width: 100%; }
  .alerts form .btn { width: 100%; }
  .console-actions { flex-direction: column; align-items: stretch; }
  .console-actions .btn,
  .console-actions .input { width: 100%; max-width: none; margin-left: 0; }
  .searchbar { flex-wrap: wrap; height: auto; padding: 10px 12px; gap: 8px; }
  .searchbar .ico { flex: 0 0 auto; }
  .searchbar .input { flex: 1 1 0; min-width: 0; }
  .searchbar .btn { flex: 1 1 100%; width: 100%; }

  /* Anything with a hard minimum has to give way */
  .strip-inner .field-grow,
  .boardbar .fld-grow { min-width: 0; flex: 1 1 100%; }
  input, select, textarea { max-width: 100%; }

  /* Wide content scrolls inside itself rather than stretching the page */
  .table-scroll, .spec-table, .data-table, .doc-table { max-width: 100%; }

  .row-between { gap: 12px; }
  .toolbar { font-size: .72rem; }
}

@media (max-width: 620px) {
  /* Two 190px columns cannot share a phone screen; stack them. */
  .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  /* The strip wrapped to two lines to repeat what the footer already says. */
  .util { display: none; }

  /* Menu button last, where a thumb reaches it. */
  .nav-toggle { order: 3; margin-left: 0; }
  .header-actions { order: 2; margin-left: auto; }
  .nav { top: var(--header-h, 56px); }

  /* Caption: name first, then the money and the clock on one line under it. */
  .hero-float {
    flex-direction: column; align-items: stretch; gap: 8px;
    left: 8px; right: 8px; bottom: 8px; padding: 11px 13px;
  }
  .hero-float > div:last-child {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 10px; text-align: left !important;
  }
  .hero-float .v { font-size: 1.05rem; }
  .hero-float .t { margin-top: 0; }

  /* Smaller arrows, lifted clear of the caption. */
  .slider-nav { width: 28px; height: 28px; top: 34%; }
  .slider-dots { bottom: auto; top: 10px; justify-content: flex-end; padding-right: 10px; }
  .slider-dots button { width: 18px; }
}

@media (max-width: 620px) {
  /* Two calls to action of different widths look accidental; stack them. */
  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }
}

/* The serial/VIN box trails the buttons on a wide console, and takes the full
   width on a phone where it sits on its own line. */
.console-find { max-width: 270px; margin-left: auto; }
@media (max-width: 620px) { .console-find { max-width: none; margin-left: 0; } }

/* The filter rail folds away on a phone so the stock is the first thing on
   the page. On a desktop the summary is hidden and the panel is always open,
   so nothing about that layout changes. */
.filters-toggle { display: none; }
.filters-collapse > summary::-webkit-details-marker { display: none; }

@media (max-width: 900px) {
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px; margin-bottom: 12px; cursor: pointer; list-style: none;
    background: var(--surface); border: 1px solid var(--line, var(--rule));
    border-radius: var(--radius, var(--r));
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
  }
  .filters-collapse[open] .filters-toggle { margin-bottom: 14px; }
  .filters-collapse[open] .filters-toggle .chev { transform: rotate(45deg); }
  .filters-toggle .chev { transition: transform .18s; color: var(--hot); font-size: 1.2rem; line-height: 1; }
}

@media (max-width: 860px) {
  /* Signing in lives in the menu on a phone; the masthead has no room. */
  .header-signin { display: none; }
}

/* ==========================================================================
   TOUCH TARGETS
   --------------------------------------------------------------------------
   Below the tablet breakpoint every control a finger has to find is brought up
   to a 44px target. Where the visible element is deliberately small — the
   slider's dots are a 4px bar by design — the target is grown with padding and
   the paint is held to the content box, so the control gets bigger to touch
   without getting bigger to look at.
   ========================================================================== */
@media (max-width: 820px) {
  .nav-toggle { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; }

  .btn-sm { min-height: 44px; padding-block: 10px; }
  .btn { min-height: 44px; }

  .input, .select, .textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="tel"], input[type="date"] {
    min-height: 44px;
  }
  .textarea { min-height: 96px; }

  /* Checkboxes and radios keep their size but gain a reachable label. */
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; flex: none; }
  label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { min-height: 44px; display: flex; align-items: center; gap: var(--s3); }

  .slider-nav { width: 40px; height: 40px; }
  .slider-dots { gap: 0; }
  .slider-dots button {
    height: 44px; padding-block: 20px; background-clip: content-box;
    margin-inline: 3px;
  }
  .slider-dots { align-items: center; }

  /* The filter bar's inline fields sit on one line on a phone, so they need the
     height as much as the standalone inputs do. */
  .boardbar .fld { min-height: 44px; }
  .boardbar .fld-grow input { min-height: 42px; }
}

/* --- Page header -----------------------------------------------------------
   Spacing lives here rather than on each page's h1. Pages whose body is set to
   the narrow measure get a header on the same left edge, so the eye follows a
   single margin down the page instead of two. */
.pagehead .eyebrow { margin-bottom: var(--s2); }
.pagehead h1 { margin-top: var(--s2); }
.pagehead .lede { margin-top: var(--s3); }
.pagehead-narrow .wrap { max-width: 880px; }

/* ==========================================================================
   SPECIFICATIONS — grouped
   --------------------------------------------------------------------------
   A vehicle sheet is four short lists, not one long table. Grouping lets a
   buyer jump to the part they care about; twenty rows in a single column makes
   them read all twenty. Definition lists, so the label/value relationship
   survives with styles off and in a screen reader.
   ========================================================================== */
.specs {
  column-count: 2;
  column-gap: var(--s8);
  margin-top: var(--s5);
}
.spec-group { break-inside: avoid; margin-bottom: var(--s7); }
.spec-group-title {
  font-family: var(--font-mono); font-size: var(--t-label); font-weight: 500;
  letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--muted);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--ink);
}
.spec-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s5);
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
}
.spec-row dt { color: var(--muted); font-size: var(--t-sm); flex: none; }
.spec-row dd {
  text-align: right; font-size: var(--t-sm); font-weight: 500;
  min-width: 0; overflow-wrap: anywhere;
}
.spec-row dd .badge { margin-left: var(--s2); vertical-align: middle; }

/* A full VIN or a long engine name must not force the label column open. */
@media (max-width: 760px) {
  .specs { column-count: 1; }
  .spec-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .spec-row dd { text-align: left; }
}

/* ==========================================================================
   MOBILE BID BAR
   --------------------------------------------------------------------------
   On a phone the bidding panel sits below the gallery and the spec sheet, so
   the one action the page exists for scrolls away. This docks the standing
   price and the primary action to the bottom of the viewport once the real
   panel has left the screen. It carries no information the page does not
   already show, and it is never rendered for a lot that has closed.
   ========================================================================== */
.bidbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: var(--ink); color: #fff;
  border-top: 1px solid rgba(255,255,255,.14);
  transform: translateY(110%);
  transition: transform .22s ease;
}
.bidbar.is-up { transform: translateY(0); }
.bidbar-k {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.6);
}
.bidbar-v {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 1.15rem; font-weight: 500; line-height: 1.15;
}
.bidbar-t { font-family: var(--font-mono); font-size: .72rem; color: #FF7A6E; }
.bidbar > div:first-child { flex: 1 1 auto; min-width: 0; }
.bidbar-v, .bidbar-t, .bidbar-k { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bidbar .btn { flex: none; }
@media (max-width: 900px) { .bidbar { display: flex; } }

/* ==========================================================================
   UI STATES
   --------------------------------------------------------------------------
   The states a marketplace actually spends its life in: nothing matched, the
   clock ran out, the lot is gone.
   ========================================================================== */
.empty-state {
  display: grid; justify-items: center; gap: var(--s4);
  padding: var(--s10) var(--s6);
  text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: var(--surface);
}
.empty-state .ico { width: 34px; height: 34px; color: var(--muted); opacity: .5; }
.empty-state h3 { font-size: var(--t-h3); letter-spacing: var(--tr-h3); }
.empty-state p { color: var(--muted); max-width: 46ch; }

/* A closed lot keeps its photograph readable but stops looking available. */
.cell.is-ended figure img, .lot-card.is-ended figure img { filter: saturate(.4); opacity: .82; }
.cell.is-ended:hover, .lot-card.is-ended:hover { border-color: var(--line); }

/* Long vehicle names wrap to two lines and then clip, so every card in a row
   keeps the same height and the price stays on the same baseline. */
.cname, .lot-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ==========================================================================
   FILTERS ON A PHONE — a sheet, not a squeezed sidebar
   --------------------------------------------------------------------------
   The desktop sidebar is a column the eye scans while results sit beside it.
   On a phone there is nothing beside it, so folding the same column into an
   accordion pushes the results off the screen and makes the visitor scroll
   past every control to reach what they came for.

   The sheet behaviour is opt-in: script adds .is-sheet below the breakpoint
   and closes the panel, so the open sheet is always something the visitor
   asked for. With scripting off the element stays the plain <details> it has
   always been and the page behaves exactly as before.
   ========================================================================== */
.sheet-head, .sheet-foot { display: none; }

@media (max-width: 900px) {
  .filters-toggle { position: relative; min-height: 48px; }
  .filters-toggle .fcount {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding-inline: 6px; margin-left: 8px;
    background: var(--hot); color: #fff; border-radius: 999px;
    font-family: var(--font-mono); font-size: .68rem; font-weight: 500;
  }

  .filters-collapse.is-sheet[open] .filters-inner {
    position: fixed; inset: 0; z-index: 80;
    display: flex; flex-direction: column;
    background: var(--surface-alt);
    overflow: hidden;
  }

  .filters-collapse.is-sheet[open] .sheet-head,
  .filters-collapse.is-sheet[open] .sheet-foot { display: flex; }

  .sheet-head {
    align-items: center; justify-content: space-between; gap: var(--s4);
    padding: var(--s4) var(--s5);
    background: var(--surface);
    border-bottom: 1px solid var(--rule, var(--line));
    flex: none;
  }
  .sheet-head h2 { font-size: var(--t-h3); letter-spacing: var(--tr-h3); }
  .sheet-close {
    width: 44px; height: 44px; display: grid; place-items: center;
    background: none; border: 1px solid var(--rule, var(--line));
    border-radius: var(--radius-sm, 3px);
    font-size: 1.3rem; line-height: 1; color: var(--ink);
  }

  .filters-collapse.is-sheet[open] .filters-scroll {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: var(--s5) var(--s5) var(--s6);
    -webkit-overflow-scrolling: touch;
  }

  .sheet-foot {
    gap: var(--s3); flex: none;
    padding: var(--s3) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--rule, var(--line));
  }
  .sheet-foot .btn { flex: 1; }

  /* The page behind the sheet must not scroll with it. */
  body.sheet-open { overflow: hidden; }

  /* Inside the sheet the column's own trailing buttons are redundant — the
     docked bar carries both actions. */
  .filters-collapse.is-sheet[open] .apply-inline { display: none; }
}