/* ==========================================================================
   Mega Cars — design tokens
   Sampled from the reference site. Swap the two font families here if the
   licensed originals differ; everything else keys off these variables.
   ========================================================================== */
:root{
  --ink:#14181d;            /* headings, near-black */
  --ink-soft:#3d444d;
  --muted:#6b7280;
  --navy:#17264b;           /* primary buttons */
  --navy-dark:#101c39;
  --red:#ce0e2d;            /* eyebrows, prices */
  --red-bright:#e01933;
  --red-wash:#fdf2f3;
  --bg:#f1f1ef;             /* page */
  --surface:#ffffff;
  --surface-dark:#171717;
  --line:#e3e3df;
  --line-strong:#cfcfc9;
  --ok:#0f7b48;
  --warn:#b7791f;

  --r-sm:4px; --r:6px; --r-lg:10px;
  --shadow:0 1px 2px rgba(20,24,29,.05);
  --shadow-lg:0 12px 32px rgba(20,24,29,.10);

  --wrap:1400px;

  /* Global interface scale. The design was drawn a little large; 0.85 makes
     100% browser zoom read like the old 85%. Adjust this one number to taste.
     Desktop only — phones are already the right size. */
  --ui-scale:0.85;
  --gap:24px;

  --font-display:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* `zoom` (not transform) so everything reflows normally and text stays
   selectable; breakpoints below still see the true viewport width. */
@media (min-width:1000px){
  body{ zoom:var(--ui-scale); }
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:-.02em;line-height:1.05}
h1{font-size:clamp(38px,6vw,66px);font-weight:800}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:700}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding-top:64px;padding-bottom:64px;border-top:1px solid var(--line)}
.section--flush{border-top:0}
.eyebrow{
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:0 0 12px;font-family:var(--font-body);
}
.lede{color:var(--ink-soft);max-width:62ch;font-size:16px}
.muted{color:var(--muted)}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;
  gap:24px;margin-bottom:28px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:11px 20px;border-radius:var(--r);border:1px solid transparent;
  font-weight:600;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s;
}
.btn--primary{background:var(--navy);color:#fff}
.btn--primary:hover{background:var(--navy-dark)}
.btn--red{background:var(--red);color:#fff}
.btn--red:hover{background:var(--red-bright)}
.btn--ghost{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.btn--dark{background:var(--surface-dark);color:#fff}
.btn--block{width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn--lg{padding:14px 26px;font-size:15px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.link-red{color:var(--red);font-weight:700;font-size:13px;letter-spacing:.02em;
  text-transform:uppercase;border-bottom:2px solid var(--red);padding-bottom:2px}

/* ---------- top bar + header ---------- */
.topbar{background:var(--surface-dark);color:#d8d8d5;font-size:12px}
.topbar .wrap{display:flex;gap:20px;align-items:center;height:34px;flex-wrap:wrap}
.topbar a{color:#fff;font-weight:600}
.topbar .topbar__hours{margin-left:auto;color:#9a9a96}

.nav-toggle{display:none;background:none;border:1px solid var(--line-strong);
  border-radius:var(--r);padding:8px 10px}
.dropdown{position:relative}
.dropdown__menu{position:absolute;top:100%;left:0;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);
  min-width:210px;padding:8px;display:none;z-index:70}
.dropdown:hover .dropdown__menu,.dropdown__menu:hover,.dropdown.is-open .dropdown__menu{display:block}
.dropdown__menu a{display:block;padding:9px 12px;border-radius:var(--r-sm);
  text-transform:none;letter-spacing:0;font-size:14px;font-weight:500}
.dropdown__menu a:hover{background:var(--bg)}

/* ---------- hero ---------- */
.hero{padding:56px 0 0}
.hero__grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.hero h1{margin:0 0 18px;text-transform:uppercase}
.hero__cta{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:26px}
.hero__card{display:grid;grid-template-columns:1.45fr 1fr;background:var(--surface-dark);
  border-radius:2px;overflow:hidden;min-height:400px}
.hero__photo{position:relative;background:#000}
.hero__photo img{width:100%;height:100%;object-fit:cover}
.hero__panel{padding:26px;color:#fff;display:flex;flex-direction:column}
.hero__panel h2{font-size:26px;color:#fff;margin-bottom:20px}
.price-block{background:rgba(206,14,45,.16);border:1px solid rgba(206,14,45,.35);
  padding:14px 16px;border-radius:2px}
.price-block__label{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:#f4b8c1;margin-bottom:4px}
.price-block__value{font-family:var(--font-display);font-size:28px;font-weight:800;
  color:var(--red-bright)}
.hero__timing{margin-top:auto;border-top:1px solid rgba(255,255,255,.16);padding-top:14px}
.hero__timing .k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:#8c8c88}
.hero__timing .v{font-size:13px;font-weight:700;color:#fff;margin-top:6px}

.lot-tag{position:absolute;top:14px;right:14px;background:rgba(20,24,29,.86);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;padding:5px 9px;border-radius:3px}
.state-chip{position:absolute;left:14px;bottom:14px;background:var(--surface);
  color:var(--ink);font-size:10.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;padding:6px 11px;border-radius:3px}
.state-chip--live{background:var(--red);color:#fff}
.state-chip--soon{background:var(--navy);color:#fff}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);
  border:1px solid var(--line);margin-top:44px}
.stats > div{padding:22px 24px;border-right:1px solid var(--line)}
.stats > div:last-child{border-right:0}
.stats .k{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  font-weight:800;color:var(--ink-soft)}
.stats .v{font-family:var(--font-display);font-size:34px;font-weight:800;
  color:var(--red);line-height:1.1;margin-top:6px}

/* ---------- lot cards ---------- */
.lot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.lot-grid--4{grid-template-columns:repeat(4,1fr)}
.lot-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  overflow:hidden;display:flex;flex-direction:column}
.lot-card__media{position:relative;aspect-ratio:4/3;background:#e9e9e5}
.lot-card__media img{width:100%;height:100%;object-fit:cover}
.lot-card__body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.lot-card__title{font-family:var(--font-display);font-size:18px;font-weight:700;
  letter-spacing:-.01em;line-height:1.2;margin-bottom:12px}
.spec-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.spec{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;font-size:12px;color:var(--ink-soft)}
.lot-card__foot{margin-top:auto;border-top:1px solid var(--line);padding-top:14px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.lot-card__price .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--ink-soft)}
.lot-card__price .v{font-family:var(--font-display);font-size:26px;font-weight:800;
  color:var(--red)}
.lot-card__timing{text-align:right;font-size:11px;color:var(--ink-soft)}
.lot-card__timing .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800}
.lot-card__timing .v{font-weight:700;color:var(--ink)}
.lot-card .btn{margin-top:14px}
.sold-line{text-align:center;padding-top:4px}
.sold-line .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--ink-soft)}
.sold-line .v{font-family:var(--font-display);font-size:26px;font-weight:800;color:var(--red)}

/* ---------- desk panels ---------- */
.desk-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);padding:32px}
.panel h2{margin-bottom:12px}
.steps{margin-top:26px}
.step{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:18px 0;
  border-top:1px solid var(--line)}
.step__n{font-family:var(--font-display);font-size:20px;font-weight:800;color:var(--red)}
.step h3{margin-bottom:4px}
.step p{margin:0;color:var(--ink-soft);font-size:14px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}
.tile{border:1px solid var(--line);padding:14px}
.tile strong{display:block;font-size:14px}
.tile span{font-size:12.5px;color:var(--muted)}

/* ---------- reviews ---------- */
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.review{background:var(--surface);border:1px solid var(--line);padding:22px;
  display:flex;flex-direction:column}
.review__top{display:flex;justify-content:space-between;margin-bottom:14px}
.stars{color:var(--red);letter-spacing:2px;font-size:14px}
.stars .off{color:var(--line-strong)}
.review p{font-size:14px;color:var(--ink-soft)}
.review__by{margin-top:auto;padding-top:16px}
.review__by strong{display:block;font-size:14px}
.review__by span{font-size:12px;color:var(--muted)}
.rating-line{display:flex;align-items:center;gap:10px;margin-top:14px}
.badge-google{background:var(--red);color:#fff;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:3px}

/* ---------- lot detail (see Lot detail block further down) ---------- */
.sidecard{background:var(--surface);border:1px solid var(--line);padding:22px;margin-bottom:16px;border-radius:10px}
.kv{display:flex;justify-content:space-between;gap:16px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;font-weight:700}
.specialist{background:#fdf7ee;border:1px solid #f0e2cd;padding:18px}
.flags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.flag{background:var(--bg);border:1px solid var(--line);font-size:12px;
  padding:5px 10px;border-radius:999px}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;
  color:var(--navy)}
.field .req{color:var(--red)}
.field input,.field select,.field textarea{
  width:100%;padding:11px 12px;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);background:#fbfbfa;font-size:14px;
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--navy);background:#fff;outline:none}
.field textarea{min-height:120px;resize:vertical}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.check{display:flex;align-items:center;gap:9px;font-size:14px;margin-bottom:16px;
       text-align:left;justify-content:flex-start}
.check input{width:16px;height:16px;flex:0 0 16px;margin:0}
.form-card{background:var(--surface);border:1px solid var(--line);padding:28px;
  border-radius:var(--r-sm)}
.hint{font-size:12px;color:var(--muted);margin-top:5px}

/* registration split layout */
.reg-layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);
  gap:36px;align-items:start;padding:48px 0}
.reg-aside{background:var(--surface-dark);color:#fff;padding:30px}
.reg-aside h1{font-size:32px;text-transform:uppercase;margin-bottom:14px}
.reg-aside p{color:#b9b9b4;font-size:14px}
.reg-steps{list-style:none;padding:0;margin:26px 0}
.reg-steps li{display:flex;gap:12px;align-items:center;margin-bottom:14px;
  font-weight:700;font-size:14px}
.reg-steps .n{width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ink);
  display:grid;place-items:center;font-size:12px;font-weight:800}
.reg-steps li.is-active .n{background:var(--navy);color:#fff}
.stepbar{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.stepbar span{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;
  color:var(--muted)}
.stepbar .n{width:24px;height:24px;border-radius:50%;background:var(--line);
  display:grid;place-items:center;font-size:12px}
.stepbar .is-current{color:var(--ink)}
.stepbar .is-current .n{background:var(--navy);color:#fff}
.stepbar i{width:22px;height:1px;background:var(--line-strong)}
.code-input{letter-spacing:.5em;text-align:center;font-size:26px;font-weight:800;
  font-family:var(--font-display)}

/* ---------- filters ---------- */
.filters{background:var(--surface);border:1px solid var(--line);padding:18px;
  display:grid;grid-template-columns:repeat(6,1fr);gap:12px;align-items:end;
  margin-bottom:26px}
.filters .field{margin:0}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.chip{border:1px solid var(--line-strong);background:var(--surface);padding:7px 14px;
  border-radius:999px;font-size:13px;font-weight:600}
.chip.is-active{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- flash + footer ---------- */
.flashes{max-width:var(--wrap);margin:16px auto 0;padding:0 24px}
.flash{padding:12px 16px;border-radius:var(--r-sm);margin-bottom:8px;font-size:14px;
  border:1px solid}
.flash--success{background:#eefbf3;border-color:#bde5cd;color:#0f5132}
.flash--error{background:var(--red-wash);border-color:#f3c6cd;color:#8b1225}
.flash--info{background:#eef4fb;border-color:#c8dcf1;color:#12395e}

.cta-band{background:var(--surface);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:56px 0;text-align:center}
.footer{background:var(--surface-dark);color:#a9a9a4;padding:52px 0 26px;font-size:13.5px}
.footer h4{font-family:var(--font-body);font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:#fff;margin:0 0 14px;font-weight:800}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:32px}
.footer a{color:#d5d5d1;display:block;padding:4px 0}
.footer a:hover{color:#fff}
.footer__legal{border-top:1px solid #2b2b2b;margin-top:34px;padding-top:18px;
  font-size:12px;color:#7d7d79}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .hero__grid,.desk-grid,.lot-layout,.reg-layout{grid-template-columns:1fr}
  .lot-grid,.review-grid{grid-template-columns:repeat(2,1fr)}
  .filters{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--surface);
    border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;
    padding:16px 24px;gap:14px;margin:0}
  .nav.is-open{display:flex}
  .nav-toggle{display:block}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > div:nth-child(2){border-right:0}
  .lot-grid,.review-grid,.tiles,.filters,.field--row{grid-template-columns:1fr}
  .hero__card{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .section{padding-top:44px;padding-bottom:44px}
}

/* ==========================================================================
   Header — sized to the reference: 84px bar, 52px logo, 11px caps nav
   ========================================================================== */
.header { background:#fff; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:60; }
/* The bar is as tall as the logo plus breathing room, with 84px as the
   floor so a text wordmark still gets a full-height header. */
.header > .wrap { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
                  height:max(84px, calc(var(--logo-h, 62px) + 22px));
                  max-width:none; padding:0 22px; }
.header .header__actions { justify-self:end; white-space:nowrap; }

.brandmark { display:flex; align-items:center; text-decoration:none; flex:0 0 auto; }
/* Both dimensions are maxima, not fixed sizes, so the image scales to fit
   while keeping its aspect ratio and the element box always equals the
   image. The previous rule fixed the height and capped the width, which made
   object-fit letterbox wide logos — and because that cap changed at a
   breakpoint, the logo appeared to resize between pages whenever a scrollbar
   nudged the viewport across it. Neither maximum varies by breakpoint now,
   so the rendered size is identical on every page. */
.brandmark img {
  display:block; width:auto; height:auto;
  max-height:var(--logo-h); max-width:var(--logo-max, 320px);
}

/* Text fallback shaped like the reference logo — only when no image is set. */
.wordmark { display:inline-flex; flex-direction:column; line-height:.86; }
.wordmark__one {
  font-family:'Archivo',sans-serif; font-weight:800; font-size:38px;
  letter-spacing:-.03em; color:var(--navy); font-style:italic;
}
.wordmark__two {
  font-family:'Archivo',sans-serif; font-weight:700; font-size:12px;
  letter-spacing:.5em; color:var(--red); padding-left:3px; margin-top:2px;
}

.nav { display:flex; align-items:center; gap:0; margin:0 auto; min-width:0; }
.nav > a, .dropdown__trigger {
  display:inline-flex; align-items:center; gap:6px; padding:8px 9px;
  font-family:'Archivo',sans-serif; font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
  text-decoration:none; white-space:nowrap; border-radius:6px;
  background:none; border:0; cursor:pointer; line-height:1;
}
.nav > a:hover, .dropdown__trigger:hover { color:var(--red); }
.nav > a.is-active, .dropdown.is-open .dropdown__trigger {
  background:var(--ink); color:#fff;
}
.nav > a.is-live { color:var(--red); }
.nav > a.is-live.is-active { color:#fff; }
.nav__sep { width:1px; height:14px; background:var(--line); margin:0 5px; }

/* Exactly one dot on LIVE, driven by the element in the markup. */
.nav > a.is-live .dot {
  width:7px; height:7px; border-radius:50%; background:var(--red); flex:0 0 auto;
  animation:livepulse 1.8s infinite;
}
@keyframes livepulse { 50% { opacity:.35; } }
@media (prefers-reduced-motion:reduce) { .nav > a.is-live .dot { animation:none; } }

/* Nav glyphs as CSS masks — no icon font, no sprite. */
.ico { width:10px; height:10px; flex:0 0 auto; opacity:.5;
       background:currentColor; -webkit-mask-size:contain; mask-size:contain;
       -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
       -webkit-mask-position:center; mask-position:center; }
.is-active .ico, .dropdown.is-open .ico { opacity:.8; }
.ico--grid  { -webkit-mask-image:var(--m-grid);  mask-image:var(--m-grid); }
.ico--cal   { -webkit-mask-image:var(--m-cal);   mask-image:var(--m-cal); }
.ico--swap  { -webkit-mask-image:var(--m-swap);  mask-image:var(--m-swap); }
.ico--doc   { -webkit-mask-image:var(--m-doc);   mask-image:var(--m-doc); }
.ico--star  { -webkit-mask-image:var(--m-star);  mask-image:var(--m-star); }
.ico--truck { -webkit-mask-image:var(--m-truck); mask-image:var(--m-truck); }
.ico--phone { -webkit-mask-image:var(--m-phone); mask-image:var(--m-phone); opacity:1; width:12px; height:12px; }

:root {
  --m-grid:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 3h5v10H2zM9 3h5v4H9zM9 9h5v4H9z'/%3E%3C/svg%3E");
  --m-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3h10v11H3z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M3 6h10M6 1v3M10 1v3' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E");
  --m-swap:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 5h9l-3-3M14 11H5l3 3' fill='none' stroke='%23000' stroke-width='1.7'/%3E%3C/svg%3E");
  --m-doc:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 2h6l3 3v9H4z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M6 8h5M6 11h5' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  --m-star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.6l1.9 4 4.4.6-3.2 3.1.8 4.4L8 11.6 4.1 13.7l.8-4.4L1.7 6.2l4.4-.6z'/%3E%3C/svg%3E");
  --m-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 4h8v7H1zM9 6h3l2 2v3H9z' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='4' cy='12.5' r='1.4'/%3E%3Ccircle cx='11.5' cy='12.5' r='1.4'/%3E%3C/svg%3E");
  --m-phone:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 2l2.5.5 1 3-1.7 1.4a9 9 0 004.3 4.3L10.5 9.5l3 1L14 13c0 1-1 1.6-2 1.4C6.6 13.6 2.4 9.4 1.6 4 1.4 3 2 2 3 2z'/%3E%3C/svg%3E");
}

.dropdown { position:relative; }
.caret { width:0; height:0; border-left:3.5px solid transparent;
         border-right:3.5px solid transparent; border-top:4px solid currentColor; }
.dropdown__menu {
  display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:190px;
  background:#fff; border:1px solid var(--line); border-radius:8px; padding:6px;
  box-shadow:0 14px 34px rgba(20,24,29,.14); z-index:70;
}
/* Invisible bridge across the 6px gap so the pointer never leaves the menu
   while travelling from the trigger to the first item. */
.dropdown__menu::before { content:""; position:absolute; left:0; right:0; top:-12px; height:12px; }
.dropdown.is-open .dropdown__menu { display:block; }
.dropdown.is-open .dropdown__trigger { color:var(--red); background:none; }
.dropdown__menu a {
  display:block; padding:9px 12px; font-size:14px; color:var(--ink);
  text-decoration:none; font-weight:500; border-radius:5px;
}
.dropdown__menu a:hover { background:var(--bg); }

.header__actions { display:flex; align-items:center; gap:14px; flex:0 0 auto; }
.header__signin { font-size:14px; font-weight:700; color:var(--ink); text-decoration:none; white-space:nowrap; }
.header__signin:hover { color:var(--red); }
.btn--call {
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line-strong, var(--line)); border-radius:999px; background:#fff;
  padding:11px 20px; font-size:14px; font-weight:700; color:var(--ink);
  text-decoration:none; font-family:inherit;
}
.btn--call:hover { border-color:var(--navy); }
.header .btn--primary {
  border-radius:999px; padding:13px 24px; font-size:14px; font-weight:700;
}
.header .btn--ghost { border-radius:999px; padding:11px 20px; font-size:14px; }

.nav__mobile-actions { display:none; }
.nav-toggle{display:none;background:none;border:1px solid var(--line);
  border-radius:6px;padding:8px 10px;cursor:pointer}

@media (max-width:1280px) {
  .nav > a, .dropdown__trigger { padding:8px 7px; letter-spacing:.04em; }
  .header > .wrap { gap:14px; }
}
@media (max-width:1080px) {
  .nav-toggle { display:block; order:3; margin-left:auto; }
  .header__actions { order:4; }
  .header > .wrap { display:flex; flex-wrap:wrap; height:auto; min-height:72px; padding-top:10px; padding-bottom:10px; }
  .nav {
    display:none; order:5; flex-basis:100%; flex-direction:column;
    align-items:flex-start; gap:2px; padding:10px 0 14px;
  }
  .nav.is-open { display:flex; }
  .nav > a, .dropdown, .dropdown__trigger { width:100%; padding:12px 8px; font-size:12px; }
  .nav__sep { display:none; }
  .dropdown__menu { position:static; border:0; box-shadow:none; padding:0 0 0 14px; }
  .header__signin, .header .btn--call { display:none; }
  .nav__mobile-actions { display:flex; gap:14px; padding:12px 8px 0; }
  .nav__mobile-actions a { font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; }
}

/* Delivery estimator ------------------------------------------------------ */
.ship-form { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.ship-form__field { display:flex; flex-direction:column; gap:6px; }
.ship-form__field span {
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.ship-form__field input {
  border:1px solid var(--line); border-radius:6px; padding:11px 14px;
  font-size:15px; font-family:inherit; background:#fff; width:170px;
}
.ship-form__field input:focus { outline:2px solid var(--navy); outline-offset:-1px; }

.ship-result {
  margin-top:18px; border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:8px; padding:16px 18px; background:#fff;
}
.ship-result__figure { display:flex; align-items:baseline; gap:12px; }
.ship-result__label {
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.ship-result__figure strong {
  font-family:'Archivo',sans-serif; font-size:32px; color:var(--red); line-height:1;
}
.ship-result__note { margin:8px 0 0; font-size:13px; color:var(--ink-soft); }
.ship-error {
  margin-top:14px; font-size:14px; color:var(--red); background:#fff6f7;
  border:1px solid #f3d3d8; border-radius:6px; padding:11px 14px;
}

/* Editorial: field log and static pages ----------------------------------- */
.display {
  font-family:'Archivo',sans-serif; font-weight:800; font-stretch:87%; text-transform:uppercase;
  font-size:clamp(30px,4.4vw,52px); line-height:1.02; letter-spacing:-.015em;
  margin:6px 0 14px;
}
.tag {
  display:inline-block; background:#fdeaee; color:var(--red); border-radius:5px;
  padding:5px 11px; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
}

.post-feature {
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:30px 34px;
}
.post-feature h2 {
  font-size:clamp(22px,2.4vw,30px); margin:14px 0 10px; letter-spacing:-.01em;
}
.post-feature h2 a, .post-card h3 a { color:var(--ink); text-decoration:none; }
.post-feature h2 a:hover, .post-card h3 a:hover { color:var(--red); }
.post-feature p { color:var(--ink-soft); max-width:74ch; margin:0 0 16px; }

.post-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px;
}
.post-card {
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:22px 24px; display:flex; flex-direction:column; gap:10px;
}
.post-card h3 { font-size:18px; line-height:1.28; margin:4px 0 0; }
.post-card p { color:var(--ink-soft); font-size:14px; margin:0; flex:1; }

.post { max-width:840px; }
.post h1 { font-size:clamp(26px,3.4vw,40px); margin:14px 0 8px; letter-spacing:-.015em; }
.post__meta { font-size:13px; margin:0 0 22px; }
.post__card {
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:34px 38px;
}
.post__standfirst {
  border-left:3px solid var(--ink); padding-left:18px; margin:0 0 26px;
  font-size:17px; line-height:1.6; color:var(--ink);
}

/* Long-form body copy, shared by posts and static pages */
.prose { max-width:74ch; color:var(--ink-soft); font-size:15.5px; line-height:1.72; }
.prose--page { max-width:78ch; }
.prose h2 {
  font-family:'Archivo',sans-serif; font-size:21px; color:var(--ink);
  margin:34px 0 10px; letter-spacing:-.01em;
}
.prose h3 { font-size:16px; color:var(--ink); margin:24px 0 6px; }
.prose p { margin:0 0 15px; }
.prose ul { margin:0 0 16px; padding-left:20px; }
.prose li { margin-bottom:7px; }
.prose a { color:var(--red); }
.prose strong { color:var(--ink); }
.prose > p:first-child { margin-top:0; }

/* Shipping page ----------------------------------------------------------- */
.split { display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:start; }
@media (max-width:900px) { .split { grid-template-columns:1fr; gap:28px; } }

.stack { display:flex; flex-direction:column; gap:14px; }
.stack select, .stack input {
  border:1px solid var(--line); border-radius:6px; padding:11px 13px;
  font-size:15px; font-family:inherit; background:#fff;
}

.tile-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; }
.tile-card {
  background:#fff; border:1px solid var(--line); border-radius:9px;
  padding:20px 22px; display:flex; flex-direction:column; gap:5px;
}
.tile-card strong { font-size:15.5px; }
.tile-card span { color:var(--ink-soft); font-size:13px; }

.carrier {
  display:grid; grid-template-columns:1fr 1.15fr; gap:30px; align-items:start;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:26px 28px; margin-top:20px;
}
@media (max-width:860px) { .carrier { grid-template-columns:1fr; gap:20px; } }
.carrier h3 { font-size:19px; margin:0 0 8px; }
.carrier__body p { margin:0 0 9px; font-size:14px; }

.rate-table { width:100%; border-collapse:collapse; font-size:14px; }
.rate-table th {
  text-align:left; background:var(--bg); padding:11px 14px; font-size:12px;
  font-weight:700; letter-spacing:.04em; border-bottom:1px solid var(--line);
}
.rate-table td { padding:11px 14px; border-bottom:1px solid var(--line); }
.rate-table tr:last-child td { border-bottom:0; }

.notice {
  margin-top:24px; border-radius:9px; padding:18px 22px;
  border:1px solid var(--line); background:#fff;
}
.notice--warn { background:#fffaf0; border-color:#f2e3c0; }
.notice strong { display:block; margin-bottom:5px; }
.notice p { margin:0; color:var(--ink-soft); font-size:14px; }

/* ==========================================================================
   Guide / info page components — shared by How it works, Register, Pay,
   About and Contact. Sized against the reference screenshots.
   ========================================================================== */
.svg-icon { flex:0 0 auto; vertical-align:middle; }

/* Page hero: text left, side card right */
.guide-hero { display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; padding:56px 0 48px; }
.guide-hero .display { margin:8px 0 18px; }
.guide-hero .lede { font-size:17px; line-height:1.6; max-width:60ch; margin:0 0 26px; }
.guide-hero .hero__cta { display:flex; gap:10px; flex-wrap:wrap; }
.guide-hero .hero__cta .btn { padding:13px 20px; font-size:14.5px; }
@media (max-width:900px) { .guide-hero { grid-template-columns:1fr; gap:26px; padding:36px 0; } }

/* Sentence-case bold display used by About / How to pay / Contact heroes */
.display--sentence {
  font-family:'Archivo',sans-serif; font-weight:800; font-stretch:100%; text-transform:none;
  font-size:clamp(30px,3.6vw,46px); line-height:1.08; letter-spacing:-.02em;
}

/* Cream side card */
.side-card {
  background:#fbfbf7; border:1px solid var(--line); border-radius:10px;
  padding:26px 28px; box-shadow:0 10px 30px rgba(20,24,29,.05);
}
.side-card h3 { font-size:17px; margin:0 0 14px; }
.side-card .side-card__icon { margin-bottom:12px; color:var(--ink); }

/* Icon tile — pale blue square holding an icon */
.icon-tile {
  width:38px; height:38px; border-radius:8px; background:#eef0f6; color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}

/* Check list with circled ticks */
.check-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.check-list li { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink); }
.check-list li .svg-icon { color:var(--ink); margin-top:1px; }
.check-list--bold li { font-weight:600; font-size:13.5px; }
.check-list--soft li { color:var(--ink-soft); }

/* Boxes */
.box { border-radius:8px; padding:16px 18px 16px 44px; position:relative; font-size:14px; }
.box .svg-icon { position:absolute; left:15px; top:17px; }
.box strong { display:block; font-weight:600; color:var(--ink); margin-bottom:4px; }
.box p { margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.55; }
.box--info { background:#eaf3ff; border:1px solid #cfe1fb; }
.box--info .svg-icon { color:#1a73e8; }
.box--warn { background:#fffbea; border:1px solid #f3e3a0; }
.box--warn .svg-icon { color:#e0a800; }
.box--danger { background:#fff; border:1px solid var(--line); }
.box--danger .svg-icon, .box--danger strong { color:var(--red); }

/* Card grids */
.card-grid { display:grid; gap:18px; }
.card-grid--2 { grid-template-columns:repeat(2,1fr); }
.card-grid--3 { grid-template-columns:repeat(3,1fr); }
.card-grid--4 { grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px) { .card-grid--4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:760px)  { .card-grid--2, .card-grid--3, .card-grid--4 { grid-template-columns:1fr; } }

.info-card {
  background:#fbfbf7; border:1px solid var(--line); border-radius:10px;
  padding:24px 26px; box-shadow:0 10px 30px rgba(20,24,29,.05);
  display:flex; flex-direction:column; gap:10px;
}
.info-card--white { background:#fff; }
.info-card h3 { font-size:17px; margin:2px 0 0; }
.info-card h3.lg { font-size:22px; line-height:1.25; }
.info-card > p { margin:0; color:var(--ink-soft); font-size:14px; line-height:1.6; }
.info-card .eyebrow { margin:0 0 2px; }
.info-card__top { display:flex; justify-content:space-between; align-items:flex-start; }
.info-card ul.bullets { margin:6px 0 0; padding-left:18px; color:var(--ink-soft); font-size:14px; line-height:1.55; }
.info-card ul.bullets li { margin-bottom:8px; }

/* Numbered step cards — big pale numeral, icon top-right */
.step-card .step-card__num {
  font-family:'Archivo',sans-serif; font-size:36px; font-weight:800;
  color:#cfcfca; line-height:1; letter-spacing:-.02em;
}
.step-card .info-card__top .icon-tile { width:34px; height:34px; }

/* Pill badge (FASTEST / US BANKS…) */
.pill-badge {
  background:#fdeaee; color:var(--red); border-radius:999px; padding:5px 11px;
  font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
}

/* Key/value rows inside a card */
.kv-rows { display:flex; flex-direction:column; }
.kv-rows > div {
  display:flex; justify-content:space-between; gap:16px; padding:11px 0;
  border-bottom:1px solid var(--line); font-size:14px;
}
.kv-rows > div:last-child { border-bottom:0; }
.kv-rows > div span { color:var(--ink-soft); }
.kv-rows > div strong { font-weight:700; text-align:right; }

/* Stat tiles (About) */
.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.stat-tile {
  background:#fbfbf7; border:1px solid var(--line); border-radius:10px;
  padding:22px 22px 20px; box-shadow:0 10px 30px rgba(20,24,29,.05);
}
.stat-tile strong {
  display:block; font-family:'Archivo',sans-serif; font-size:30px; font-weight:800;
  letter-spacing:-.02em; line-height:1; margin-bottom:8px;
}
.stat-tile span { color:var(--ink-soft); font-size:13px; }

/* Two-column section: heading left, content right */
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.two-col h2 { font-size:clamp(22px,2.6vw,30px); margin:6px 0 10px; letter-spacing:-.015em; }
.two-col .lede { font-size:15px; margin:0; }
@media (max-width:860px) { .two-col { grid-template-columns:1fr; gap:24px; } }

/* Timeline 2x2 (How to pay) */
.timeline-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.timeline-grid .info-card { padding:18px 20px; gap:4px; }
.timeline-grid .info-card small { font-weight:700; font-size:12px; }
.timeline-grid .info-card h4 { margin:2px 0; font-size:15px; }
.timeline-grid .info-card p { margin:0; color:var(--ink-soft); font-size:13px; }
@media (max-width:600px) { .timeline-grid { grid-template-columns:1fr; } }

/* Inline chips (Not accepted) */
.chip-row { display:flex; flex-wrap:wrap; gap:6px 22px; margin-top:6px; }
.chip-row span { display:inline-flex; align-items:center; gap:6px; color:var(--red); font-size:13.5px; }

/* Wide CTA card with buttons on the right */
.cta-card {
  background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:30px 34px; display:flex; justify-content:space-between;
  align-items:center; gap:24px; flex-wrap:wrap;
}
.cta-card h3 { font-size:22px; margin:0 0 6px; }
.cta-card p { margin:0; color:var(--ink-soft); font-size:14px; }
.cta-card .actions { display:flex; gap:10px; flex-wrap:wrap; }

/* Dark band */
.band-dark { background:#141414; color:#fff; padding:60px 0; }
.band-dark .wrap { display:flex; justify-content:space-between; align-items:center; gap:40px; flex-wrap:wrap; }
.band-dark .eyebrow { color:var(--red); }
.band-dark h2 { color:#fff; font-size:clamp(22px,2.6vw,30px); margin:6px 0 10px; letter-spacing:-.015em; }
.band-dark p { color:#c9c9c4; margin:0; max-width:70ch; font-size:14.5px; line-height:1.6; }
.band-dark .btn--white { background:#fff; color:var(--ink); border-radius:6px; padding:12px 20px; font-weight:700; }
.band-dark .actions { display:flex; gap:10px; }

/* Centred CTA */
.cta-centered { text-align:center; padding:56px 0; }
.cta-centered h2 { font-size:clamp(24px,2.8vw,32px); margin:0 0 8px; }
.cta-centered p { color:var(--ink-soft); margin:0 0 20px; }

/* Contact page */
.contact-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:start; }
@media (max-width:900px) { .contact-grid { grid-template-columns:1fr; } }
.contact-rows { display:flex; flex-direction:column; gap:18px; }
.contact-rows > div { display:flex; gap:12px; align-items:flex-start; }
.contact-rows .svg-icon { color:var(--ink-soft); margin-top:2px; }
.contact-rows strong { display:block; font-size:14px; margin-bottom:2px; }
.contact-rows span, .contact-rows a { font-size:14px; color:var(--ink); }
.form-card { background:#fbfbf7; border:1px solid var(--line); border-radius:10px; padding:26px 28px; }
.form-card h3 { font-size:22px; margin:0 0 18px; }
.form-card .field label .req { color:var(--red); margin-right:4px; }
/* Exclude checkboxes and radios: a full-width tick box pushes its label onto
   a second line, which is what broke the sign-in and register forms. */
.form-card input:not([type=checkbox]):not([type=radio]),
.form-card select, .form-card textarea {
  background:#fff; border:1px solid var(--line); border-radius:6px; padding:12px 14px;
  font-family:inherit; font-size:15px; width:100%;
}
.form-card textarea { min-height:130px; }
.qa dt { font-weight:700; font-size:14px; margin-top:14px; }
.qa dd { margin:4px 0 0; color:var(--ink-soft); font-size:13.5px; line-height:1.55; }
.qa dt:first-child { margin-top:0; }

/* Simple form/content grids for public pages */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px 18px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:16px 18px; }
@media (max-width:680px) { .grid-2, .grid-3 { grid-template-columns:1fr; } }

/* ==========================================================================
   Inventory
   ========================================================================== */
.inv-title {
  font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(44px,6vw,76px);
  line-height:1; letter-spacing:-.03em; margin:6px 0 0;
}
.rule { border:0; border-top:1px solid var(--line); margin:0; }

.inv-bar {
  display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px;
  box-shadow:0 8px 24px rgba(20,24,29,.05);
}
.inv-search {
  display:flex; align-items:center; gap:8px; border:1px solid var(--line);
  border-radius:8px; padding:0 4px 0 12px; background:#fbfbf7; color:var(--ink-soft);
}
.inv-search input { flex:1; border:0; background:none; padding:12px 6px; font-size:14px; font-family:inherit; }
.inv-search input:focus { outline:none; }
.inv-search__go {
  border:1px solid var(--line); background:#fff; border-radius:6px; width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.inv-toggle { display:flex; gap:6px; }
.inv-toggle label {
  border:1px solid var(--line); border-radius:8px; padding:10px 16px; font-size:13.5px;
  font-weight:700; color:var(--ink); cursor:pointer; background:#fff;
}
.inv-toggle label.is-on { background:var(--ink); color:#fff; border-color:var(--ink); }
.inv-sort {
  border:1px solid var(--line); border-radius:8px; padding:11px 36px 11px 14px; font-size:14px;
  font-family:inherit; background:#fff; min-width:220px;
}
.inv-reset {
  font-size:13.5px; font-weight:700; color:var(--ink); text-decoration:none; padding:0 8px;
  white-space:nowrap;
}

.inv-layout { display:grid; grid-template-columns:272px 1fr; gap:22px; margin-top:22px; align-items:start; }
@media (max-width:900px) { .inv-layout { grid-template-columns:1fr; } .inv-bar { grid-template-columns:1fr 1fr; } .inv-search { grid-column:1/-1; } }

.inv-filters {
  background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:0 8px 24px rgba(20,24,29,.05); padding-bottom:16px;
}
.inv-filters__head {
  background:var(--ink); color:#fff; display:flex; justify-content:space-between;
  align-items:center; padding:15px 18px; font-weight:700; font-size:15px;
}
.inv-filters__head span { display:inline-flex; align-items:center; gap:8px; }
.inv-filters__head a { color:#fff; font-size:13px; text-decoration:none; font-weight:700; }
.inv-filters select {
  width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--ink);
}
.inv-filters .radio { display:flex; align-items:center; gap:9px; font-size:14px; padding:5px 0; cursor:pointer; }
.inv-filters .radio input { accent-color:var(--navy); width:15px; height:15px; margin:0; }
.inv-filters .btn { margin:10px 18px 0; width:calc(100% - 36px); }

/* Dual-thumb range slider */
.range { --lo:0%; --hi:100%; }
.range__track { position:relative; height:26px; margin:2px 0 6px; }
.range__track::before {
  content:""; position:absolute; left:0; right:0; top:11px; height:3px; border-radius:3px;
  background:linear-gradient(to right, var(--line) var(--lo), var(--navy) var(--lo),
                             var(--navy) var(--hi), var(--line) var(--hi));
}
.range__track input[type=range] {
  position:absolute; left:0; right:0; top:0; width:100%; height:26px; margin:0;
  background:none; -webkit-appearance:none; appearance:none; pointer-events:none;
}
.range__track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff;
  border:2.5px solid var(--navy); pointer-events:auto; cursor:pointer;
}
.range__track input[type=range]::-moz-range-thumb {
  width:16px; height:16px; border-radius:50%; background:#fff; border:2.5px solid var(--navy);
  pointer-events:auto; cursor:pointer;
}
.range legend span { font-weight:700; color:var(--ink); letter-spacing:0; text-transform:none; }

.inv-results { min-width:0; }
.inv-count {
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px;
  color:var(--ink-soft); font-size:14px; margin-bottom:18px;
  box-shadow:0 8px 24px rgba(20,24,29,.05);
}
.inv-empty { text-align:center; padding:60px 20px; }

.cat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
@media (max-width:1100px) { .cat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px)  { .cat-grid { grid-template-columns:1fr; } }

.cat-card {
  background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:0 8px 24px rgba(20,24,29,.05); display:flex; flex-direction:column;
}
.cat-card__media { position:relative; display:block; aspect-ratio:4/2.9; background:#e9e9e5; }
.cat-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.cat-card__state {
  position:absolute; top:10px; left:10px; background:var(--navy); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 9px; border-radius:4px;
}
.cat-card__state--live { background:var(--red); }
.cat-card__state--ended, .cat-card__state--sold { background:#5c5c58; }
.cat-card__timer {
  position:absolute; top:10px; right:10px; background:rgba(20,24,29,.82); color:#fff;
  font-size:10.5px; padding:5px 8px; border-radius:4px; backdrop-filter:blur(2px);
  max-width:calc(100% - 122px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cat-card__state { z-index:1; }
.cat-card__timer b { color:#ff5a6e; font-weight:700; }
.cat-card__lot {
  position:absolute; bottom:10px; right:10px; background:rgba(20,24,29,.85); color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.04em; padding:5px 9px; border-radius:4px;
}
.cat-card__body { padding:16px 16px 14px; background:#fbfbf7; flex:1; display:flex; flex-direction:column; }
.cat-card__body h3 { font-size:15.5px; margin:0 0 4px; line-height:1.3; }
.cat-card__body h3 a { color:var(--ink); text-decoration:none; }
.cat-card__body h3 a:hover { color:var(--red); }
.cat-card__specs { color:var(--ink-soft); font-size:12.5px; margin:0 0 12px; }
.cat-card__row { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; }
.cat-card__row small { display:block; font-size:11px; color:var(--ink-soft); margin-bottom:2px; }
.cat-card__row strong { font-family:'Archivo',sans-serif; font-size:21px; font-weight:800; letter-spacing:-.01em; }
.cat-card__row strong.red { color:var(--red); }
.cat-card__row .right { text-align:right; }
.cat-card__row .right span { font-size:13.5px; font-weight:600; }
.cat-card__cta {
  margin-top:12px; font-size:13px; font-weight:600; color:#1a5fd1; text-decoration:none;
}
.cat-card__cta:hover { text-decoration:underline; }

/* ==========================================================================
   Lot detail
   ========================================================================== */
.lot-hero { background:#1c1c1a; color:#fff; padding:36px 0 120px; margin-bottom:-90px; }
.lot-hero__crumbs { font-size:13px; color:#c9c9c4; margin:0 0 16px; }
.lot-hero__crumbs a { color:#fff; text-decoration:none; }
.lot-hero__crumbs span { margin:0 8px; color:#8a8a86; }
.lot-hero .eyebrow { color:var(--red); }
.lot-hero__row { display:flex; justify-content:space-between; align-items:center; gap:30px; flex-wrap:wrap; }
.lot-hero__title {
  font-family:'Archivo',sans-serif; font-weight:800; font-stretch:87%;
  font-size:clamp(34px,4.6vw,66px); line-height:1.02; letter-spacing:-.02em; margin:6px 0 0;
  max-width:20ch; color:#fff;
}
.lot-hero__actions { display:flex; align-items:center; gap:10px; }
.lot-iconbtn {
  width:42px; height:42px; border-radius:6px; background:#fff; border:0; color:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:17px; text-decoration:none;
}
.lot-iconbtn--wide { width:78px; }
.lot-iconbtn.is-on { color:var(--red); }
.lot-hero__call {
  height:42px; display:inline-flex; align-items:center; gap:8px; padding:0 20px;
  font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-radius:6px;
}

.lot-layout { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start; position:relative; }
@media (max-width:980px) { .lot-layout { grid-template-columns:1fr; } }

/* Gallery with the thumb strip overlaid on the image, like the reference */
.gallery__main {
  position:relative; border-radius:10px; overflow:hidden; background:#111;
  aspect-ratio:16/10.4; box-shadow:0 14px 34px rgba(0,0,0,.25);
}
.gallery__main > img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery__state {
  position:absolute; top:14px; left:14px; background:var(--red); color:#fff; font-size:12px;
  font-weight:700; padding:7px 12px; border-radius:4px;
}
.gallery__strip {
  position:absolute; left:0; right:0; bottom:0; padding:12px 14px;
  background:linear-gradient(to top, rgba(0,0,0,.6), rgba(0,0,0,0));
  display:flex; align-items:flex-end; gap:12px;
}
.thumbs { display:flex; gap:8px; overflow-x:auto; flex:1; scrollbar-width:none; }
.thumbs::-webkit-scrollbar { display:none; }
.thumbs button {
  flex:0 0 92px; height:62px; border:2px solid transparent; border-radius:5px; overflow:hidden;
  padding:0; background:#222; cursor:pointer;
}
.thumbs button img { width:100%; height:100%; object-fit:cover; display:block; }
.thumbs button.is-active { border-color:#fff; }
.gallery__count {
  background:rgba(0,0,0,.75); color:#fff; font-size:11px; font-weight:700; padding:5px 9px;
  border-radius:4px; flex:0 0 auto;
}

.lot-panel {
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 26px;
  margin-top:18px; box-shadow:0 8px 24px rgba(20,24,29,.05);
}
.lot-panel__head { display:flex; justify-content:space-between; align-items:flex-end; }
.lot-panel__title {
  font-family:'Archivo',sans-serif; font-weight:800; font-stretch:87%; text-transform:uppercase;
  font-size:22px; letter-spacing:-.01em; margin:2px 0 16px;
}
.link-strong { font-weight:700; color:var(--ink); text-decoration:none; font-size:14px; }
.link-blue { color:#1a5fd1; }

.basics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:760px) { .basics { grid-template-columns:repeat(2,1fr); } }
.basic {
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px;
  padding:14px; background:#fbfbf7;
}
.basic__icon {
  width:30px; height:30px; border-radius:50%; background:#fdeaee; color:var(--red);
  display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.basic small { display:block; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.basic strong { font-size:14px; }

.chips-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip-pill {
  display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px;
  padding:7px 14px; font-size:12.5px; font-weight:700; background:#fff;
}
.specs-dl { display:grid; grid-template-columns:1fr 1fr; gap:6px 24px; margin:18px 0 0; }
.specs-dl > div { display:flex; justify-content:space-between; border-bottom:1px solid var(--line); padding:8px 0; font-size:13.5px; }
.specs-dl dt { color:var(--ink-soft); } .specs-dl dd { margin:0; font-weight:600; }
.lot-desc { margin:18px 0 0; color:var(--ink-soft); white-space:pre-line; line-height:1.65; }

.report-tiles { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:640px) { .report-tiles { grid-template-columns:1fr; } }
.report-tile {
  display:flex; align-items:center; gap:14px; background:#f3f3f0; border:1px solid var(--line);
  border-radius:8px; padding:16px 18px;
}
.report-tile strong { display:block; font-size:14.5px; }
.report-tile__link { background:none; border:0; padding:0; color:#1a5fd1; font-size:12.5px; cursor:pointer; font-family:inherit; }
.report-tile__badge {
  background:#111; color:#fff; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 8px; border-radius:3px; flex:0 0 auto;
}
.report-tile__badge--icon { background:#fff; color:var(--navy); padding:6px; border:1px solid var(--line); }

.mini-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:760px) { .mini-grid { grid-template-columns:1fr 1fr; } }
.mini-card { border:1px solid var(--line); border-radius:8px; overflow:hidden; text-decoration:none; color:var(--ink); background:#fff; display:flex; flex-direction:column; }
.mini-card__media { position:relative; aspect-ratio:4/2.6; background:#e9e9e5; }
.mini-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
.mini-card__state { position:absolute; top:8px; left:8px; background:#e6efff; color:#1a5fd1; font-size:11px; font-weight:700; padding:4px 10px; border-radius:4px; }
.mini-card__state.is-live { background:#e6efff; }
.mini-card strong { font-size:13.5px; padding:12px 12px 0; }
.mini-card__btn {
  margin:10px 12px 12px; background:var(--navy); color:#fff; text-align:center; font-size:11.5px;
  font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:10px; border-radius:4px;
}
.mini-card__btn--muted { background:#5c5c58; }

/* Sidebar */
.lot-side { display:flex; flex-direction:column; gap:16px; position:sticky; top:100px; }
.side-panel {
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px;
  box-shadow:0 8px 24px rgba(20,24,29,.06);
}
.side-panel--cream { background:#fbf8ee; }
.buy-now-btn {
  width:100%; border:0; border-radius:6px; padding:15px; color:#fff; font-weight:800; font-size:16px;
  font-family:inherit; cursor:pointer;
  background:linear-gradient(90deg,#e0243f,#b40e2a); box-shadow:0 8px 18px rgba(206,14,45,.28);
}
.est-line { font-size:12.5px; color:var(--ink-soft); margin:10px 0 0; display:flex; align-items:center; gap:8px; }
.est-line strong { color:var(--ink); }
.est-pill { background:#e8f6ea; color:#1b7f3a; font-size:11px; font-weight:700; padding:3px 8px; border-radius:999px; }

.side-box { border:1px solid var(--line); border-radius:8px; padding:14px; margin-top:14px; background:#fff; }
.side-box .eyebrow { margin:0 0 4px; }
.side-box__title { display:block; font-size:15px; }
.side-box--auction { background:#f2faf3; border-color:#d7ecd9; }
.offer-form { margin-top:12px; }
.auction-when { margin:4px 0 6px; }
.auction-when span { display:block; font-size:13.5px; }
.auction-when strong { font-family:'Archivo',sans-serif; font-size:24px; font-weight:800; letter-spacing:-.01em; }
.auction-when em { font-style:normal; font-size:11px; font-weight:700; margin-left:4px; }
.auction-len { font-weight:700; font-size:13.5px; margin:0 0 2px; }

.countdown { display:flex !important; gap:8px; margin:6px 0 12px; }
.countdown > div { background:var(--navy); color:#fff; border-radius:6px; padding:8px 0; width:52px; text-align:center; }
.countdown .n { font-family:'Archivo',sans-serif; font-size:20px; font-weight:800; line-height:1; }
.countdown .l { font-size:9px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; opacity:.8; margin-top:3px; }

.btn--dark { background:#111; color:#fff; }
.stat-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:12px; }
.stat-trio > div { border:1px solid var(--line); border-radius:6px; padding:12px 6px; text-align:center; }
.stat-trio strong { display:block; font-family:'Archivo',sans-serif; font-size:20px; font-weight:800; }
.stat-trio span { font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }

.specialist__name { font-size:18px; margin:2px 0 2px; }
.specialist__hours { font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 12px; }

.est-rows { margin-top:10px; background:#f7f7f4; border:1px solid var(--line); border-radius:6px; padding:4px 12px; }
.est-rows > div { display:flex; justify-content:space-between; align-items:center; font-size:13px; padding:8px 0; border-bottom:1px solid var(--line); }
.est-rows > div:last-child { border-bottom:0; }
.est-rows span { color:var(--ink); display:inline-flex; align-items:center; gap:5px; }
.est-rows span small { display:block; font-size:10px; color:var(--ink-soft); }
.est-rows b { font-weight:600; }
.est-rows b input { width:96px; border:1px solid var(--line); border-radius:5px; padding:5px 8px; font-size:12px; text-align:right; font-family:inherit; }
.est-rows__total { font-weight:800; }
.est-rows__total b { font-family:'Archivo',sans-serif; font-size:18px; }

/* ==========================================================================
   Schedule
   ========================================================================== */
.sched-selected__label { font-size:13px; font-weight:600; display:block; margin-bottom:12px; }
.sched-selected__row { display:flex; justify-content:space-between; }
.sched-selected__row small { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:4px; }
.sched-selected__row strong { font-family:'Archivo',sans-serif; font-size:20px; font-weight:800; }

.sched {
  display:grid; grid-template-columns:190px 190px 1fr; background:#fff;
  border:1px solid var(--line); border-radius:8px; overflow:hidden; min-height:520px;
  box-shadow:0 8px 24px rgba(20,24,29,.05);
}
@media (max-width:860px) { .sched { grid-template-columns:1fr; } }
.sched__col { border-right:1px solid var(--line); }
.sched__col:last-child { border-right:0; }
.sched__col--wide { min-width:0; }
.sched__head {
  padding:16px 16px 14px; font-size:11px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--red); border-bottom:1px solid var(--line);
}
.sched__head--wide { display:flex; justify-content:space-between; align-items:center; }
.sched__head--wide b { background:#eef0f4; color:var(--ink); font-size:11px; padding:4px 9px; border-radius:4px; letter-spacing:0; text-transform:none; }
.sched__item {
  width:100%; display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:13px 16px; background:#fff; border:0; border-bottom:1px solid var(--line);
  cursor:pointer; font-family:inherit; text-align:left; color:var(--ink); font-size:13.5px; font-weight:700;
}
.sched__item small { display:block; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:2px; }
.sched__item b { background:#eef0f4; color:var(--ink); font-size:11px; min-width:28px; text-align:center; padding:4px 7px; border-radius:4px; }
.sched__item.is-on { background:#141414; color:#fff; }
.sched__item.is-on small { color:#c9c9c4; }
.sched__item.is-on b { background:#fff; color:var(--ink); }

.sched__list { max-height:520px; overflow-y:auto; }
.sched__row {
  display:block; padding:14px 18px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink);
}
.sched__row:hover { background:#fbfbf7; }
.sched__row-title { font-size:14px; }
.sched__row-mid { display:flex; align-items:center; gap:12px; margin:8px 0; }
.sched__thumb { width:52px; height:36px; border-radius:4px; background:#e9e9e5; overflow:hidden; flex:0 0 auto; }
.sched__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sched__clock { font-size:12px; font-weight:700; flex:1; }
.sched__lotno { background:#eef0f4; font-size:11px; font-weight:700; padding:4px 9px; border-radius:4px; }
.sched__row-foot { display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--ink-soft); }
.sched__row-foot span:first-child { color:#1a5fd1; }
.sched__chev { font-size:18px; color:var(--ink-soft); }

/* Shipping estimate card (reference layout) */
.ship-card { padding:22px 24px; }
.ship-card__title { display:block; font-size:15px; margin-bottom:12px; }
.ship-card__row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ship-card select, .ship-card input { width:100%; }
.tile-card .svg-icon { color:var(--ink); margin-bottom:6px; }
.sched { grid-template-columns:180px 200px 1fr; }
.sched__item { font-size:13px; }

/* Shipping polish to match reference tones */
.ship-card { background:#fbfbf7; }
.carrier { background:#fbfbf7; }
.rate-table th { background:#eef0f6; }
.notice--warn { display:grid; grid-template-columns:auto 1fr; gap:4px 12px; align-items:start; }
.notice--warn .svg-icon { color:#e0a800; grid-row:span 2; margin-top:2px; }
.notice--warn strong, .notice--warn p { grid-column:2; }

/* ==========================================================================
   Homepage — tuned to the reference
   ========================================================================== */
.hero { padding:44px 0 0; }
.hero__grid { grid-template-columns:.92fr 1.08fr; gap:40px; }
.hero__card { grid-template-columns:1.8fr 1fr; box-shadow:0 18px 40px rgba(20,24,29,.16); }
.hero__photo { aspect-ratio:1.15/1; }
.hero__panel { padding:22px 20px 18px; }
.hero__panel h2 { font-size:22px; line-height:1.15; margin-bottom:auto; letter-spacing:-.01em; }
.price-block { margin:18px 0 26px; padding:14px 16px; border-radius:2px; }
.price-block__label { font-size:9.5px; letter-spacing:.12em; }
.price-block__value { font-size:24px; }
.hero__timing { padding-top:10px; border-top:0; }
.hero__timing .k { font-size:9.5px; letter-spacing:.12em; margin-bottom:22px; }
.hero__timing .v { font-size:11.5px; border-bottom:1px solid rgba(255,255,255,.16); padding-bottom:12px; }
.hero__timing .v em { font-style:normal; color:#b9b9b4; }
.state-chip { font-size:10px; font-weight:800; letter-spacing:.08em; padding:7px 11px; border-radius:2px; }

.stats { margin-top:14px; }
.stats > div { padding:18px 20px; }
.stats .k { font-size:9.5px; }
.stats .v { font-size:26px; line-height:1.1; }

/* Home lot cards */
.lot-card { box-shadow:0 8px 24px rgba(20,24,29,.05); }
.lot-card__media { aspect-ratio:4/2.85; }
.lot-card__title { font-size:19px; }
.lot-card__price .v { font-size:24px; }
.lot-card__timing .v { font-size:10.5px; line-height:1.15; }
.lot-card__timing small { font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.lot-card .btn--primary {
  font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:13px; border-radius:3px;
}
.sold-line .v { font-size:28px; }
.spec { font-size:11.5px; font-weight:600; }

/* Queued lane sits on a cool grey band */
.section--lane { background:#e9ecef; border-top:1px solid #dfe3e7; }

/* Payment desk tiles: icon stacked above the title */
.tile { display:flex; flex-direction:column; gap:6px; }
.tile .svg-icon { color:var(--red); }
.tile strong { font-size:13.5px; }
.tile span { font-size:11.5px; }

.section-head--center { align-items:center; }

/* Reviews inset like the reference */
.section--reviews { background:#f5f5f3; }
.reviews-inset { max-width:1000px; }
.reviews-signin { display:flex; flex-direction:column; align-items:center; gap:6px; }
.reviews-signin span { font-size:11px; color:var(--ink-soft); }
.btn--google { border-radius:6px; font-weight:500; font-size:13px; padding:9px 14px; }

/* Dark CTA band */
.cta-band { background:#141414; color:#fff; text-align:center; padding:72px 0; border-top:0; }
.cta-band h2 { color:#fff; font-size:clamp(28px,3.4vw,42px); line-height:1.12; margin:0 0 16px; letter-spacing:-.015em; }
.cta-band p { color:#c9c9c4; max-width:58ch; margin:0 auto 24px; font-size:15px; line-height:1.6; }
.cta-band .btn--lg { padding:14px 22px; font-size:15px; border-radius:4px; }

/* Footer with the vertical grid lines */
.footer {
  background-color:#161616;
  background-image:repeating-linear-gradient(to right, rgba(255,255,255,.045) 0 1px, transparent 1px 60px);
}
.footer__grid { grid-template-columns:1.6fr 1fr 1fr 1.3fr; gap:40px; }
.footer h4 { font-size:12px; letter-spacing:.1em; }
.footer__grid > div:first-child h4 { font-size:15px; letter-spacing:0; margin-bottom:10px; }
.footer a, .footer p { font-size:13px; }
.footer a .svg-icon { margin-right:6px; vertical-align:-2px; opacity:.8; }
.footer p .svg-icon { margin-right:6px; vertical-align:-2px; opacity:.8; }

/* Filter groups: "— LABEL ———" rule with the control below it */
.inv-filters { padding-bottom:6px; }
.flt { padding:16px 18px 6px; }
.flt--action { padding:14px 18px 12px; }
.flt__label {
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
  white-space:nowrap;
}
.flt__label::before { content:""; width:10px; height:1px; background:var(--line); flex:0 0 auto; }
.flt__label::after  { content:""; flex:1; height:1px; background:var(--line); }
.flt__label span { text-transform:none; letter-spacing:0; }
.inv-filters .radio { padding:4px 0; }
.inv-filters .btn { margin:0; width:100%; }
.range__track { margin:6px 2px 4px; }
.hero__grid { grid-template-columns:.8fr 1.2fr; gap:36px; }
.hero h1 { font-size:clamp(34px,4.2vw,56px); line-height:1.02; }
.hero .lede { font-size:15px; }
.hero__cta .btn { padding:12px 18px; font-size:14px; }

.reviews-head { max-width:520px; }
.section--reviews h2 { font-size:clamp(24px,2.4vw,30px); line-height:1.2; }

/* Shipment tracking ------------------------------------------------------- */
.track-card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:26px 28px; box-shadow:0 8px 24px rgba(20,24,29,.05); }
.track-card__head { display:flex; justify-content:space-between; gap:24px; align-items:flex-start; flex-wrap:wrap; }
.track-status { background:#f2faf3; border:1px solid #d7ecd9; border-radius:8px; padding:12px 16px; min-width:220px; }
.track-status small { display:block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.track-status strong { display:block; font-size:17px; margin:2px 0; }
.track-status span { font-size:12.5px; color:var(--ink-soft); }
.track-status--on_hold { background:#fffbea; border-color:#f3e3a0; }
.track-status--delivered { background:#e8f6ea; }

.stages { list-style:none; display:grid; grid-template-columns:repeat(5,1fr); gap:0; margin:26px 0 0; padding:0; position:relative; }
.stages::before { content:""; position:absolute; left:10%; right:10%; top:15px; height:3px; background:var(--line); }
.stages li { position:relative; text-align:center; }
.stages__dot { position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--line); font-size:12px; font-weight:700; color:var(--ink-soft); }
.stages__label { display:block; margin-top:8px; font-size:12px; font-weight:600; color:var(--ink-soft); }
.stages li.is-done .stages__dot { background:var(--navy); border-color:var(--navy); color:#fff; }
.stages li.is-now .stages__dot { background:var(--red); border-color:var(--red); color:#fff; box-shadow:0 0 0 5px rgba(206,14,45,.15); }
.stages li.is-now .stages__label, .stages li.is-done .stages__label { color:var(--ink); }
@media (max-width:640px) { .stages { grid-template-columns:repeat(5,1fr); } .stages__label { font-size:10px; } }

.track-grid { display:grid; grid-template-columns:1.3fr .9fr; gap:26px; margin-top:26px; }
@media (max-width:820px) { .track-grid { grid-template-columns:1fr; } }
.timeline { list-style:none; margin:0; padding:0 0 0 18px; border-left:2px solid var(--line); }
.timeline li { position:relative; padding:0 0 18px 16px; font-size:14px; }
.timeline li::before { content:""; position:absolute; left:-24px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--navy); }
.timeline li:first-child::before { background:var(--red); }
.timeline__when { display:block; font-size:11.5px; color:var(--ink-soft); margin-bottom:2px; }
.timeline p { margin:4px 0 0; color:var(--ink-soft); }

/* Customer dashboard ------------------------------------------------------ */
.dash-head { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
.dash-head__actions { display:flex; gap:10px; }
.dash-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin-top:22px; }
.dash-stat { background:#fff; border:1px solid var(--line); border-radius:10px; padding:18px 20px; box-shadow:0 8px 24px rgba(20,24,29,.05); }
.dash-stat small { display:block; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); }
.dash-stat strong { display:block; font-family:'Archivo',sans-serif; font-size:26px; font-weight:800; margin:6px 0 2px; }
.dash-stat span, .dash-stat a { font-size:12.5px; color:var(--ink-soft); }
.dash-stat a { color:var(--red); font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:5px; }
.dash-stat--ok { background:#f2faf3; border-color:#d7ecd9; }
.dash-stat--warn { background:#fffbea; border-color:#f3e3a0; }
.dash-stat--agent { background:#fbf8ee; }
.dash-stat--agent strong { font-size:19px; }

.orders { display:flex; flex-direction:column; gap:12px; }
.order { display:grid; grid-template-columns:150px 1fr; gap:16px; border:1px solid var(--line); border-radius:8px; background:#fbfbf7; overflow:hidden; }
@media (max-width:640px) { .order { grid-template-columns:1fr; } }
.order__media { display:block; aspect-ratio:4/3; background:#e9e9e5; }
.order__media img { width:100%; height:100%; object-fit:cover; display:block; }
.order__body { padding:14px 16px 14px 0; display:flex; flex-direction:column; gap:10px; }
@media (max-width:640px) { .order__body { padding:0 16px 14px; } }
.order__top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.order__title { font-weight:700; font-size:15px; color:var(--ink); text-decoration:none; }
.order__row { display:flex; gap:26px; flex-wrap:wrap; }
.order__row small { display:block; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.order__row strong { font-family:'Archivo',sans-serif; font-size:20px; font-weight:800; }
.order__note { margin:0; font-size:13px; color:var(--ink); background:#fff; border-left:3px solid var(--navy); padding:8px 12px; border-radius:0 6px 6px 0; }
.order__actions { display:flex; gap:8px; flex-wrap:wrap; }
.order__actions .btn { padding:8px 14px; font-size:13px; }

.status-pill { display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:6px 10px; border-radius:4px; white-space:nowrap; }
.status-pill--live { background:var(--red); color:#fff; }
.status-pill--ok { background:#e8f6ea; color:#1b7f3a; }
.status-pill--warn { background:#fff4d6; color:#8a5b00; }
.status-pill--info { background:#e6efff; color:#1a5fd1; }
.status-pill--muted { background:#ececea; color:#5c5c58; }

/* Gallery navigation ------------------------------------------------------ */
.gallery__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:0; cursor:pointer;
  background:rgba(20,24,29,.62); color:#fff; font-size:26px; line-height:1;
  display:flex; align-items:center; justify-content:center; backdrop-filter:blur(3px);
  transition:background .15s, opacity .15s;
}
.gallery__nav:hover { background:rgba(20,24,29,.88); }
.gallery__nav:disabled { opacity:.25; cursor:default; }
.gallery__nav--prev { left:14px; }
.gallery__nav--next { right:14px; }
@media (max-width:600px) { .gallery__nav { width:36px; height:36px; font-size:21px; } }

/* Transparent layer over the photo: blocks drag-to-save and long-press save */
.gallery__shield { position:absolute; inset:0; z-index:2; }
.gallery__main > img, .thumbs img, .inspect img {
  -webkit-user-drag:none; user-select:none; -webkit-touch-callout:none; pointer-events:none;
}
.gallery__strip { z-index:3; }

.thumbs__scroll {
  flex:0 0 auto; width:28px; height:56px; border:0; border-radius:4px; cursor:pointer;
  background:rgba(0,0,0,.55); color:#fff; font-size:19px; line-height:1;
}
.thumbs__scroll:hover { background:rgba(0,0,0,.8); }
.thumbs__scroll:disabled { opacity:.2; cursor:default; }
.thumbs { scroll-behavior:smooth; }

/* Inspection media -------------------------------------------------------- */
.inspect__grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px) { .inspect__grid { grid-template-columns:1fr; } }
.inspect__col { border:1px solid var(--line); border-radius:9px; padding:16px 18px; background:#fff; }
.inspect__head {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:12px;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
}
.inspect__head span { display:inline-flex; align-items:center; gap:7px; }
.inspect__head em {
  font-style:normal; background:#eef0f6; color:var(--ink-soft); border-radius:999px;
  padding:4px 10px; font-size:10px; letter-spacing:.06em;
}
.inspect__head em.is-pass { background:#e8f6ea; color:#1b7f3a; }
.inspect__shot { position:relative; margin:0; border-radius:7px; overflow:hidden; background:#111; }
.inspect__shot img { width:100%; display:block; }
.inspect__tag {
  position:absolute; top:10px; left:10px; background:rgba(20,24,29,.85); color:#fff;
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 9px; border-radius:4px;
}
.inspect__more { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.inspect__more img { width:76px; height:56px; object-fit:cover; border-radius:5px; }
.inspect__note {
  margin:12px 0 0; background:#fbfbf7; border:1px solid var(--line); border-radius:6px;
  padding:10px 12px; font-size:12.5px; color:var(--ink-soft);
  display:flex; align-items:flex-start; gap:8px;
}
.inspect__note .svg-icon { color:var(--red); margin-top:2px; }
.inspect__col audio, .inspect__col video { width:100%; margin-top:12px; border-radius:6px; }

/* CARFAX bar -------------------------------------------------------------- */
.carfax-bar {
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:9px; padding:16px 20px; margin-top:18px; background:#fff;
}
.carfax-bar__logo {
  background:#0a3d91; color:#fff; font-weight:800; font-size:15px; letter-spacing:.02em;
  padding:8px 12px; border-radius:4px; font-family:'Archivo',sans-serif;
}
.carfax-bar div { flex:1; min-width:220px; }
.carfax-bar strong { display:flex; align-items:center; gap:7px; font-size:13px; }
.carfax-bar strong .svg-icon { color:#1b7f3a; }
.carfax-bar span { display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
.carfax-bar .btn { display:inline-flex; align-items:center; gap:8px; }
.report-tile--ready { text-decoration:none; color:inherit; }
.report-tile--ready .report-tile__link { color:#1a5fd1; font-size:12.5px; }

/* ==========================================================================
   Live auction room
   ========================================================================== */
.room { background:#12151a; color:#e9e9e6; padding-bottom:50px; min-height:70vh; }
.room__bar { background:#0c0e12; border-bottom:1px solid #22262d; }
.room__bar-inner { display:flex; align-items:center; gap:20px; height:52px; flex-wrap:wrap; }
.room__live {
  display:inline-flex; align-items:center; gap:8px; font-size:11.5px; font-weight:800;
  letter-spacing:.1em; text-transform:uppercase; color:#ff5a6e;
}
.room__live .dot { width:8px; height:8px; border-radius:50%; background:#ff5a6e; animation:livepulse 1.8s infinite; }
.room__count, .room__clock { font-size:12.5px; color:#9a9fa8; }
.room__clock b { color:#fff; font-weight:700; }

.room__grid { display:grid; grid-template-columns:1fr 372px; gap:24px; padding-top:24px; align-items:start; }
@media (max-width:1000px) { .room__grid { grid-template-columns:1fr; } }

.room__photo { position:relative; background:#000; border-radius:10px; overflow:hidden; aspect-ratio:16/10; }
.room__photo > img { width:100%; height:100%; object-fit:cover; display:block; }
.room__lotno {
  position:absolute; top:12px; right:12px; z-index:3; background:rgba(0,0,0,.75); color:#fff;
  font-size:11px; font-weight:700; letter-spacing:.05em; padding:6px 10px; border-radius:4px;
}
.room__thumbs {
  position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; gap:6px; padding:10px;
  overflow-x:auto; background:linear-gradient(to top, rgba(0,0,0,.72), transparent);
  scrollbar-width:none;
}
.room__thumbs::-webkit-scrollbar { display:none; }
.room__thumbs button {
  flex:0 0 78px; height:54px; padding:0; border:2px solid transparent; border-radius:5px;
  overflow:hidden; background:#222; cursor:pointer;
}
.room__thumbs button.is-active { border-color:#fff; }
.room__thumbs img { width:100%; height:100%; object-fit:cover; display:block; }

.room__facts { padding-top:16px; }
.room__facts h1 {
  font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(22px,2.6vw,32px);
  color:#fff; margin:0 0 10px; letter-spacing:-.015em;
}
.room__chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.room__chips span {
  display:inline-flex; align-items:center; gap:6px; background:#1c2028; border:1px solid #272c35;
  color:#c4c9d1; border-radius:999px; padding:6px 13px; font-size:12.5px;
}
.room__facts .link-strong { color:#ff5a6e; }

.console-card { background:#191d24; border:1px solid #262b34; border-radius:10px; padding:16px; margin-bottom:14px; }
.console-card__top { display:flex; justify-content:space-between; gap:14px; align-items:flex-start; }
.console-card__top small, .console-card__timer small {
  display:block; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#858b95;
}
.console-card__top strong {
  display:block; font-family:'Archivo',sans-serif; font-size:34px; font-weight:800;
  color:#fff; line-height:1.05; margin:4px 0 2px;
}
.console-card__top .muted { color:#858b95; font-size:12px; }
.console-card__timer { text-align:right; }
.console-card__timer b { display:flex; gap:5px; margin-top:5px; }
.console-card__timer .n {
  background:#262b34; color:#fff; border-radius:5px; padding:7px 0; width:42px; text-align:center;
  font-family:'Archivo',sans-serif; font-size:17px; font-weight:800;
}
.console-card__timer.is-ending .n { background:var(--red); animation:pulseBox .9s infinite; }
@keyframes pulseBox { 50% { opacity:.55; } }

.console-card__reserve { margin:12px 0 4px; font-size:12.5px; }
.console-card__reserve .tone-ok { color:#4ade80; display:inline-flex; align-items:center; gap:6px; }
.console-card__reserve .tone-warn { color:#fbbf24; display:inline-flex; align-items:center; gap:6px; }

.console-bid { margin-top:12px; }
.console-bid__row { display:flex; gap:8px; }
.console-bid__step {
  width:46px; border:1px solid #333945; background:#21262f; color:#fff; border-radius:7px;
  font-size:22px; cursor:pointer; line-height:1;
}
.console-bid__step:hover { background:#2b313c; }
.console-bid__row input {
  flex:1; background:#0f1216; border:1px solid #333945; border-radius:7px; color:#fff;
  font-family:'Archivo',sans-serif; font-size:24px; font-weight:800; text-align:center; padding:11px;
}
.console-bid__quick { display:flex; gap:6px; margin-top:8px; }
.console-bid__quick button {
  flex:1; background:#21262f; border:1px solid #333945; color:#c4c9d1; border-radius:6px;
  padding:8px 0; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
}
.console-bid__quick button:hover { color:#fff; border-color:#4a515e; }
.console-bid__go {
  width:100%; margin-top:10px; border:0; border-radius:8px; padding:15px;
  background:linear-gradient(90deg,#e0243f,#b40e2a); color:#fff;
  font-family:inherit; font-size:16px; font-weight:800; cursor:pointer;
  box-shadow:0 8px 20px rgba(206,14,45,.3);
}
.console-bid__go:hover { filter:brightness(1.08); }
.console-bid__proxy { margin-top:10px; }
.console-bid__proxy summary { font-size:12.5px; color:#9a9fa8; cursor:pointer; }
.console-bid__proxy input {
  width:100%; margin-top:8px; background:#0f1216; border:1px solid #333945; border-radius:6px;
  color:#fff; padding:10px; font-family:inherit; font-size:14px;
}
.console-bid__proxy .muted { color:#858b95; font-size:11.5px; margin:6px 0 0; }

.console-feed__head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:10px; }
.console-feed__head strong { color:#fff; font-size:14px; }
.console-feed__head .muted { color:#7c828c; font-size:11px; }
.console-feed { list-style:none; margin:0; padding:0; max-height:260px; overflow-y:auto; }
.console-feed li {
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 0; border-bottom:1px solid #23272f; font-size:13.5px;
}
.console-feed li:last-child { border-bottom:0; }
.console-feed__who { display:inline-flex; align-items:center; gap:9px; color:#c4c9d1; }
.console-feed__who i {
  font-style:normal; width:26px; height:26px; border-radius:50%; background:#2a303a; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800;
}
.console-feed__who em { font-style:normal; color:#4ade80; font-size:11px; font-weight:700; }
.console-feed__amt { font-family:'Archivo',sans-serif; font-weight:800; color:#fff; }
.console-feed li.is-top .console-feed__amt { color:#4ade80; }
.console-feed li.is-top .console-feed__who i { background:#1b7f3a; }
.console-feed li.is-new { animation:feedIn .5s ease-out; }
@keyframes feedIn { from { background:rgba(206,14,45,.22); } to { background:transparent; } }

.console-card--agent small { display:block; font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#858b95; }
.console-card--agent strong { display:block; color:#fff; font-size:16px; margin:4px 0 10px; }

.room__runlist { padding-top:26px; }
.room__runhead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.room__runhead strong { color:#fff; font-size:15px; }
.room__runhead .muted { color:#7c828c; font-size:12.5px; }
.room-queue { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px; }
.room-queue--wide { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.qcard {
  display:block; background:#191d24; border:1px solid #262b34; border-radius:9px;
  overflow:hidden; text-decoration:none;
}
.qcard.is-current { border-color:var(--red); box-shadow:0 0 0 2px rgba(206,14,45,.28); }
.qcard__media { position:relative; display:block; aspect-ratio:4/2.6; background:#0c0e12; }
.qcard__media img { width:100%; height:100%; object-fit:cover; display:block; }
.qcard__media em {
  position:absolute; bottom:8px; left:8px; font-style:normal; background:var(--red); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:4px 8px; border-radius:3px;
}
.qcard__body { display:block; padding:11px 12px; }
.qcard__body strong { display:block; color:#fff; font-size:13.5px; line-height:1.3; }
.qcard__body em { font-style:normal; display:block; color:#9a9fa8; font-size:12px; margin-top:4px; }
.qcard__body em b { color:#ff5a6e; }
/* The live room is dark, so the page chrome around it stays light */
.room + * { background:var(--bg); }

/* Account menu in the header. The generic .dropdown__trigger rules strip the
   background, so the navy pill is restored explicitly here. */
.account-menu__trigger {
  text-transform:none; letter-spacing:0; font-size:14px; gap:8px;
  background:var(--navy); color:#fff; border-radius:999px; padding:13px 22px; font-weight:700;
}
.account-menu__trigger:hover { background:var(--navy-dark); color:#fff; }
.dropdown.is-open .account-menu__trigger { background:var(--navy-dark); color:#fff; }
.account-menu__trigger .caret { border-top-color:#fff; }
.account-menu .dropdown__menu--right { left:auto; right:0; min-width:220px; }
.account-menu__who { display:block; padding:9px 12px 11px; border-bottom:1px solid var(--line); margin-bottom:5px; }
.account-menu__who strong { display:block; font-size:13.5px; }
.account-menu__who em { font-style:normal; font-size:12px; color:var(--ink-soft); }
.account-menu__out { color:var(--red) !important; font-weight:700; }

/* ==========================================================================
   Media boxes — one uniform rectangle regardless of photo shape
   --------------------------------------------------------------------------
   `aspect-ratio` on the box plus `height:100%` on the image is circular: the
   box wants its height from the ratio, the image wants its height from the
   box, and the browser resolves it by falling back to the photo's intrinsic
   height. A portrait photo then stretched its card far taller than the rest
   of the grid.

   Taking the image out of flow with absolute positioning breaks the cycle —
   it can no longer influence the box, so the ratio always wins and every card
   is the same rectangle. `flex:0 0 auto` stops the box being stretched when
   its card is pulled taller by a neighbour in the same grid row.
   ========================================================================== */
.lot-card__media,
.cat-card__media,
.mini-card__media,
.order__media,
.qcard__media,
.media-tile figure {
  position:relative;
  overflow:hidden;
  flex:0 0 auto;
}
.lot-card__media > img,
.cat-card__media > img,
.mini-card__media > img,
.order__media > img,
.qcard__media > img,
.media-tile figure > img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* Overlays sit above the photo now that it is positioned. */
.cat-card__state, .cat-card__timer, .cat-card__lot,
.lot-card__media .state-chip, .lot-card__media .lot-tag,
.mini-card__state, .qcard__media em, .media-tile__pick { z-index:2; }

/* Equal-height cards across a grid row, so the text blocks line up too. */
.cat-grid > .cat-card, .lot-grid > .lot-card { height:100%; }
.cat-card, .lot-card { display:flex; flex-direction:column; }
.cat-card__body, .lot-card__body { flex:1; display:flex; flex-direction:column; }
.cat-card__cta { margin-top:auto; }
/* Reserve two lines for the title so a wrapped name does not make one row
   taller than the next. Longer names are clamped with an ellipsis. */
.cat-card__body h3 {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.6em;
}
.cat-card__specs { min-height:1.2em; }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pager {
  display:flex; justify-content:center; align-items:center; gap:6px;
  flex-wrap:wrap; margin:32px 0 8px;
}
.pager a, .pager__gap {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 14px; border-radius:8px;
  font-size:14.5px; font-weight:700; text-decoration:none; line-height:1;
}
.pager a {
  background:#fff; color:var(--ink); border:1px solid var(--line);
  transition:background .12s, border-color .12s, color .12s;
}
.pager a:hover { border-color:var(--navy); color:var(--navy); background:#fbfbf7; }
.pager a.is-current {
  background:var(--navy); border-color:var(--navy); color:#fff; cursor:default;
  pointer-events:none;
}
.pager__gap { color:var(--ink-soft); font-weight:500; min-width:24px; padding:0; border:0; background:none; }

/* Prev / Next carry a label as well as a chevron, so the target is big and
   obvious rather than a stray character next to the numbers. */
.pager__step { gap:7px; padding:0 18px; }
.pager__step--prev { margin-right:6px; }
.pager__step--next { margin-left:6px; }
.pager__count {
  flex-basis:100%; text-align:center; margin:12px 0 0;
  font-size:12.5px; color:var(--ink-soft);
}
@media (max-width:620px) {
  .pager a, .pager__gap { min-width:38px; height:38px; padding:0 10px; font-size:13.5px; }
  .pager__step span { display:none; }      /* chevrons only on narrow screens */
  .pager__step { padding:0 12px; }
}
.login-row { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:16px; }
.login-row .link-red { font-size:13.5px; font-weight:600; white-space:nowrap; }

/* Report request form ----------------------------------------------------- */
button.report-tile { width:100%; text-align:left; cursor:pointer; font-family:inherit; }
button.report-tile:hover { border-color:var(--navy); }
.report-form {
  margin-top:14px; border:1px solid var(--line); border-radius:9px; padding:18px 20px;
  background:#fbfbf7;
}
.report-form__title { font-weight:700; margin:0 0 12px; font-size:15px; }
.report-form__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:700px) { .report-form__grid { grid-template-columns:1fr; } }
.report-form label { display:block; font-size:12px; font-weight:700; color:var(--ink-soft); }
.report-form input, .report-form textarea {
  width:100%; margin-top:5px; border:1px solid var(--line); border-radius:6px;
  padding:10px 12px; font-family:inherit; font-size:14.5px; color:var(--ink); background:#fff;
  font-weight:400;
}
.report-form__msg { display:block; margin-top:12px; }
.report-form__actions { display:flex; gap:10px; margin-top:14px; }

/* Offer state ------------------------------------------------------------- */
.offer-state {
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.07em;
  text-transform:uppercase; padding:5px 10px; border-radius:4px; margin:6px 0 10px;
}
.offer-state--new { background:#fff4d6; color:#8a5b00; }
.offer-state--countered { background:#e6efff; color:#1a5fd1; }
.offer-state--accepted { background:#e8f6ea; color:#1b7f3a; }
.offer-state--declined { background:#ececea; color:#5c5c58; }

/* ==========================================================================
   Photo viewer (lot page) — click / tap a gallery photo to open it full
   screen; tap again to zoom, drag to pan, swipe or arrow keys to move on.
   ========================================================================== */
button.gallery__shield { background:none; border:0; padding:0; cursor:zoom-in; width:100%; height:100%; }
button.gallery__shield:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
.gallery__zoom {
  position:absolute; top:14px; right:14px; z-index:3; pointer-events:none;
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(20,24,29,.72); color:#fff; font-size:11px; font-weight:700;
  letter-spacing:.04em; padding:6px 10px; border-radius:4px; backdrop-filter:blur(2px);
}
.gallery__zoom .svg-icon { color:#fff; }

.lightbox {
  position:fixed; inset:0; z-index:200; background:rgba(8,9,11,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  -webkit-user-select:none; user-select:none; touch-action:none;
}
.lightbox[hidden] { display:none; }
body.has-lightbox { overflow:hidden; }
.lightbox__stage {
  position:relative; width:100%; height:100%; display:flex; align-items:center;
  justify-content:center; overflow:hidden; cursor:zoom-in;
}
.lightbox.is-zoomed .lightbox__stage { cursor:grab; }
.lightbox.is-zoomed .lightbox__stage:active { cursor:grabbing; }
.lightbox__stage img {
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  display:block; transform-origin:center center; transition:transform .18s ease-out;
  -webkit-user-drag:none; -webkit-touch-callout:none;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.lightbox.is-zoomed .lightbox__stage img { transition:none; }
.lightbox__close, .lightbox__nav {
  position:absolute; z-index:2; border:0; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); transition:background .15s;
}
.lightbox__close:hover, .lightbox__nav:hover { background:rgba(255,255,255,.26); }
.lightbox__close { top:16px; right:16px; width:44px; height:44px; border-radius:50%; font-size:30px; line-height:1; }
.lightbox__nav { top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; font-size:34px; line-height:1; }
.lightbox__nav--prev { left:16px; } .lightbox__nav--next { right:16px; }
.lightbox__count {
  position:absolute; top:26px; left:50%; transform:translateX(-50%); z-index:2;
  color:#fff; font-size:13px; font-weight:700; letter-spacing:.06em;
  background:rgba(255,255,255,.12); padding:6px 12px; border-radius:999px;
}
.lightbox__hint {
  position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:2; margin:0;
  color:#c9c9c4; font-size:12px; text-align:center; pointer-events:none; padding:0 16px;
}
.lightbox__hint[hidden] { display:none; }
@media (max-width:600px) {
  .lightbox__nav { width:42px; height:42px; font-size:28px; }
  .lightbox__nav--prev { left:8px; } .lightbox__nav--next { right:8px; }
  .lightbox__close { top:10px; right:10px; }
  .lightbox__count { top:20px; }
}

/* ==========================================================================
   Mobile pass — one place for every phone-width correction, loaded last so
   it wins over the desktop rules above.
   ========================================================================== */

/* Header: the earlier ≤760px block left the menu absolutely positioned at
   top:70px, so on phones it floated over the page instead of dropping the
   header open. The menu now flows inside the header bar. */
@media (max-width:1080px) {
  .nav, .nav.is-open { position:static; top:auto; left:auto; right:auto; border-bottom:0; margin:0; }
  .header > .wrap { gap:10px; padding:0 16px; }
  .header__actions { gap:8px; }
  .header .btn--primary { padding:10px 16px; font-size:13px; }
  .header .btn--ghost { padding:9px 14px; font-size:13px; }
  /* The logo may be set as wide as 320px in Settings; on a phone that leaves
     no room for the buttons, so it is capped to a share of the screen. */
  .brandmark img { max-width:min(var(--logo-max, 320px), 44vw); }
  /* Keep a Call button in the bar — it is the most-used action on a phone.
     Icon only, so it fits beside Register and the menu toggle. */
  .header .btn--call { display:inline-flex; width:40px; height:40px; padding:0; border-radius:50%; justify-content:center; }
  .header .btn--call .ico--phone { width:15px; height:15px; }
  .header .btn--call { font-size:0; gap:0; }
  .nav-toggle { padding:7px 10px; font-size:18px; line-height:1; }
  .nav > a.is-active, .dropdown.is-open .dropdown__trigger { background:var(--bg); color:var(--ink); }
  .dropdown.is-open .dropdown__trigger { color:var(--red); }
}

@media (max-width:760px) {
  .wrap, .flashes { padding-left:16px; padding-right:16px; }
  h1 { font-size:clamp(30px,8.5vw,40px); }
  h2 { font-size:clamp(24px,6.5vw,30px); }
  .section { padding-top:36px; padding-bottom:36px; }
  .section-head { margin-bottom:20px; }
  .section-head .btn { width:100%; }
  .btn--lg { padding:13px 18px; font-size:14px; }
  .lede { font-size:15px; }

  /* Home hero */
  .hero { padding-top:32px; }
  .hero__grid { gap:28px; }
  .hero__cta { gap:10px; }
  .hero__cta .btn { flex:1 1 auto; }
  .hero__card { min-height:0; }
  .hero__photo { aspect-ratio:16/10; }
  .hero__panel { padding:20px; }
  .hero__panel h2 { font-size:22px; margin-bottom:14px; }
  .hero__timing { margin-top:18px; }
  .stats { margin-top:28px; }
  .stats > div { padding:16px 14px; }
  .stats .v { font-size:28px; }
  .stats > div:nth-child(-n+2) { border-bottom:1px solid var(--line); }
  .btn-row { width:100%; }
  .btn-row .btn { flex:1 1 auto; }

  /* Panels, cards, forms */
  .panel, .form-card { padding:20px 18px; }
  .post-feature, .post__card, .track-card { padding:22px 18px; }
  .info-card, .side-card, .tile-card { padding:18px 16px; }
  .carrier { padding:20px 18px; }
  .review { padding:18px; }
  .tiles { grid-template-columns:1fr 1fr; }
  .rate-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .reg-layout { padding:24px 0 36px; gap:20px; }
  .reg-aside { padding:22px 20px; }
  .reg-aside h1 { font-size:26px; }
  .cta-band { padding:40px 0; }
  .footer { padding:40px 0 22px; }
  .footer__grid { gap:24px; }

  /* Inventory */
  .inv-title { font-size:clamp(36px,11vw,52px); }
  .inv-bar { grid-template-columns:1fr 1fr; padding:10px; gap:8px; }
  .inv-search { grid-column:1/-1; }
  .inv-toggle { grid-column:1/-1; }
  .inv-toggle label { flex:1; text-align:center; padding:10px 8px; }
  .inv-sort { min-width:0; width:100%; grid-column:1; }
  .inv-reset { grid-column:2; text-align:right; }
  .inv-layout { gap:14px; margin-top:14px; }
  .inv-count { padding:14px 16px; }
  /* Filters collapse to their header; tapping it opens the panel. */
  .inv-filters__head { cursor:pointer; }
  .inv-filters__head::after {
    content:""; width:8px; height:8px; border-right:2px solid #fff; border-bottom:2px solid #fff;
    transform:rotate(45deg); margin-left:12px; margin-right:2px; order:3; transition:transform .15s;
  }
  .inv-filters__head a { margin-left:auto; order:2; }
  .inv-filters:not(.is-open) > :not(.inv-filters__head) { display:none; }
  .inv-filters:not(.is-open) { padding-bottom:0; }
  .inv-filters.is-open .inv-filters__head::after { transform:rotate(-135deg); }
  .cat-card__body h3 { font-size:16px; }

  /* Lot detail */
  .lot-hero { padding:24px 0 96px; margin-bottom:-78px; }
  .lot-hero__title { font-size:clamp(28px,8vw,40px); max-width:none; }
  .lot-hero__row { gap:16px; }
  .lot-hero__actions { width:100%; }
  .lot-hero__call { flex:1; justify-content:center; }
  .gallery__main { aspect-ratio:4/3; border-radius:8px; }
  .gallery__strip { padding:8px 8px; gap:6px; }
  .thumbs button { flex:0 0 64px; height:44px; }
  .thumbs__scroll { display:none; }
  .gallery__count { font-size:10px; padding:4px 7px; }
  .gallery__zoom { top:auto; bottom:64px; right:10px; font-size:10px; padding:5px 8px; }
  .gallery__state { top:10px; left:10px; font-size:11px; padding:6px 10px; }
  .lot-panel { padding:18px 16px; margin-top:14px; border-radius:8px; }
  .lot-panel__title { font-size:19px; }
  .lot-panel__head { flex-wrap:wrap; gap:8px; }
  .basics { gap:8px; }
  .basic { padding:12px; gap:8px; }
  .specs-dl { grid-template-columns:1fr; gap:0; }
  .report-tile { padding:14px; }
  .mini-grid { gap:10px; }
  .mini-card strong { padding:10px 10px 0; }
  .mini-card__btn { margin:8px 10px 10px; }
  .lot-side { position:static; top:auto; }
  .side-panel { padding:16px; }
  .countdown { justify-content:space-between; }
  .countdown > div { flex:1; width:auto; }
  .stat-trio { padding:10px; gap:6px; }
  .est-rows b input { width:84px; }
  .ship-form__field { flex:1 1 100%; }
  .ship-form__field input { width:100%; }
  .ship-form .btn { width:100%; }
  .carfax-bar { padding:14px 16px; }
  .carfax-bar .btn { width:100%; }
  .inspect__col { padding:14px; }
  .report-form { padding:14px; }
  .report-form__actions { flex-wrap:wrap; }
  .report-form__actions .btn { flex:1 1 auto; }

  /* Live room */
  .room__bar-inner { height:auto; padding:10px 0; gap:10px 16px; }
  .room__grid { gap:16px; padding-top:16px; }

  /* Schedule / tracking / dashboard */
  .sched { min-height:0; }
  .track-card__head { gap:14px; }
  .track-status { min-width:0; width:100%; }
  .stages::before { left:8%; right:8%; }
  .stages__dot { width:26px; height:26px; font-size:11px; }
  .dash-head__actions { width:100%; flex-wrap:wrap; }
  .dash-head__actions .btn { flex:1 1 auto; }
  .order__actions .btn { flex:1 1 auto; }
  .login-row { flex-wrap:wrap; }
}

@media (max-width:420px) {
  .header > .wrap { padding:0 12px; }
  .brandmark img { max-width:min(var(--logo-max, 320px), 40vw); }
  .wrap, .flashes { padding-left:14px; padding-right:14px; }
  .basics { grid-template-columns:1fr 1fr; }
  .mini-grid { grid-template-columns:1fr; }
  .tiles { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .inv-sort, .inv-reset { grid-column:1/-1; text-align:center; }
  .lot-iconbtn--wide { width:60px; }
}

/* Lot page on phones: the things a buyer acts on come first. `.lot-main`
   dissolves into the grid so the gallery stays on top, the action sidebar
   (Buy Now, auction time + Notify me, offer, specialist) follows it, and the
   long spec/report/delivery panels drop below. Desktop layout is untouched. */
@media (max-width:980px) {
  .lot-main { display:contents; }
  .lot-layout > .gallery, .lot-main > .gallery { order:0; }
  .lot-side { order:1; gap:12px; }
  .lot-main > .lot-panel { order:2; }
  .lot-main > .lot-panel:first-of-type { margin-top:8px; }

  /* Inside the sidebar: buy now → time/countdown/notify → specialist → the
     rest. Vanity counters and the estimator go last. */
  .lot-side > .side-panel:first-child { order:0; display:flex; flex-direction:column; }
  .lot-side > .side-panel:first-child > * { order:0; }
  .lot-side > .side-panel:first-child > .side-box--auction { order:1; margin-top:12px; }
  .lot-side > .side-panel:first-child > #offer { order:2; }
  .lot-side > .side-panel:first-child > .btn { order:3; }
  .lot-side > .side-panel:first-child > .btn + .btn { margin-top:8px; }
  .lot-side > .side-panel:first-child > p.muted:last-child { order:4; }
  .lot-side > .side-panel--cream { order:1; }
  .lot-side > .side-panel[data-estimator] { order:2; }
  .lot-side > .stat-trio { order:3; }
}

/* ---- Sold band on a closed lot ------------------------------------- */
.sold-band{display:flex;align-items:center;gap:18px;margin:22px 0 6px;padding:16px 20px;
  background:#fff5f6;border:1px solid #f3c7cd;border-left:6px solid var(--red,#ce0e2d);border-radius:10px}
.sold-band__stamp{font-family:Archivo,Inter,sans-serif;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;font-size:20px;color:#fff;background:var(--red,#ce0e2d);padding:8px 14px;border-radius:6px}
.sold-band__body{display:flex;flex-direction:column;flex:1;min-width:0}
.sold-band__body strong{font-size:26px;line-height:1.1}
.sold-band__body span{font-size:13px;color:var(--ink-soft,#5a5f66)}
.gallery__state.is-sold{background:var(--red,#ce0e2d);color:#fff}
@media (max-width:640px){.sold-band{flex-wrap:wrap}.sold-band .btn{width:100%}}

/* ---- Price estimator delivery row ---------------------------------- */
.est-rows__delivery b{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.est-rows__delivery input{width:96px;padding:6px 8px;font-size:13px}
.est-rows__delivery em{font-style:normal;min-width:64px;text-align:right}
.est-rows__note{font-size:11.5px;color:var(--ink-soft);padding:2px 0 6px;line-height:1.4}
.est-rows__note.is-error{color:var(--red)}

/* ---- Ring timer ----------------------------------------------------- */
.ring{position:relative;width:var(--size,104px);height:var(--size,104px);flex:0 0 auto}
.ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ring__bg{fill:none;stroke:rgba(128,134,146,.28);stroke-width:8}
.ring__fg{fill:none;stroke:#4ade80;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .25s linear,stroke .3s}
.ring.is-urgent .ring__fg{stroke:var(--red);animation:ringPulse .9s infinite}
.ring.is-done .ring__fg{stroke:#6b7280}
.ring__label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.ring__label b{font-family:'Archivo',sans-serif;font-weight:800;font-size:calc(var(--size,104px) * .2);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.ring__label small{font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;margin-top:4px}
.console-card .ring__label{color:#fff}
.ring.is-urgent .ring__label b{color:var(--red)}
@keyframes ringPulse{0%,100%{opacity:1}50%{opacity:.55}}

.live-clock{display:flex;align-items:center;gap:16px;margin:4px 0 14px}
.live-clock__side{display:flex;flex-direction:column;gap:6px;min-width:0}
.countdown--compact{margin:0}
.countdown--compact > div{width:44px;padding:6px 0}
.countdown--compact .n{font-size:16px}

/* ---- Position pill + bid notice ------------------------------------ */
.position-pill{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px;margin-top:6px;width:max-content}
.position-pill.is-leading{background:rgba(74,222,128,.16);color:#15803d;border:1px solid rgba(74,222,128,.5)}
.position-pill.is-outbid{background:rgba(206,14,45,.1);color:var(--red);border:1px solid rgba(206,14,45,.4)}
.console-card .position-pill.is-leading{color:#4ade80}
.console-card .position-pill.is-outbid{color:#ff6b7f}
.bid-notice{font-size:13px;line-height:1.45;padding:9px 12px;border-radius:6px;margin:10px 0 0}
.bid-notice.is-ok{background:rgba(74,222,128,.14);color:#15803d;border:1px solid rgba(74,222,128,.45)}
.bid-notice.is-error{background:rgba(206,14,45,.1);color:var(--red);border:1px solid rgba(206,14,45,.35)}
.console-card .bid-notice.is-ok{color:#4ade80}
.console-card .bid-notice.is-error{color:#ff8a9a}

/* ---- Bid history: cleaner rows, quiet scrollbar --------------------- */
.console-feed{max-height:300px;padding-right:6px;scrollbar-width:thin;scrollbar-color:#3a404b transparent}
.console-feed::-webkit-scrollbar{width:6px}
.console-feed::-webkit-scrollbar-thumb{background:#3a404b;border-radius:6px}
.console-feed::-webkit-scrollbar-track{background:transparent}
.console-feed li{padding:10px 0}
.console-feed__who{gap:10px}
.console-feed__who > span{display:flex;flex-direction:column;line-height:1.15}
.console-feed__who > span small{font-size:11px;color:#7c828c;margin-top:2px;font-variant-numeric:tabular-nums}
.console-feed li.is-mine .console-feed__who i{background:#1f5133}
.console-feed li.is-new{animation:feedIn .6s ease-out}
@keyframes feedIn{from{background:rgba(74,222,128,.18)}to{background:transparent}}
.console-card__timer{display:flex;justify-content:flex-end}

/* lot page: same list on a light card */
.lot-feed{list-style:none;margin:14px 0 0;padding:0;max-height:220px;overflow-y:auto;scrollbar-width:thin}
.lot-feed:empty{display:none}
.lot-feed li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13px}
.lot-feed li:last-child{border-bottom:0}
.lot-feed .console-feed__who{color:var(--ink)}
.lot-feed .console-feed__who i{background:var(--navy);width:22px;height:22px;font-size:10px}
.lot-feed .console-feed__who > span small{color:var(--ink-soft)}
.lot-feed .console-feed__who em{color:#15803d}
.lot-feed .console-feed__amt{color:var(--ink)}
.lot-feed li.is-top .console-feed__amt{color:var(--red)}
.lot-feed li.is-mine .console-feed__who i{background:#15803d}
@media (max-width:640px){.live-clock{gap:12px}.ring{--size:92px !important}}
.console-card__timer .ring__label b{display:block;margin:0;gap:0}

/* ---- Live room gallery arrows + counter ----------------------------- */
.room__photo .gallery__nav{top:calc(50% - 40px)}
.room__counter{position:absolute;right:12px;bottom:78px;z-index:3;background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-weight:700;padding:4px 8px;border-radius:4px}
.room__photo:not(:has(.room__thumbs)) .room__counter{bottom:12px}

/* ---- Keep the auction boxes tidy: nothing hangs outside them -------- */
.console-card__top{align-items:center}
.console-card__top > div:first-child{min-width:0;flex:1}
.console-card__top strong{overflow-wrap:anywhere}
.console-card .ring{--size:84px !important}
.position-pill{display:block;width:auto;max-width:100%;white-space:normal;line-height:1.3;text-align:center;margin-top:8px;font-size:10.5px}
.bid-notice{overflow-wrap:anywhere}
.live-clock{flex-wrap:wrap;gap:12px 16px}
.live-clock .ring{--size:96px !important}
.live-clock__side{flex:1;min-width:150px}
.countdown--compact{flex-wrap:wrap}
.countdown--compact > div{width:42px;padding:6px 0}
.countdown--compact .n{font-size:15px}
.live-clock__side .position-pill{margin-top:4px}
.side-box--auction .kv{gap:10px}
.side-box--auction .kv dd{overflow-wrap:anywhere}
.side-box--auction input{max-width:100%;box-sizing:border-box}
.side-box{overflow:hidden}
@media (max-width:1000px){.console-card .ring{--size:76px !important}}

/* ---- Live console bid row: the input must never push the + out ----- */
.console-bid__row input{min-width:0;width:0;box-sizing:border-box}
.console-bid__step{flex:0 0 46px}
/* Ring: just the time in the middle */
.ring__label small{display:none}
.ring__label b{font-size:calc(var(--size,104px) * .22)}

/* ---- A lot that is the signed-in customer's ------------------------- */
.sold-band--yours{background:#f0fbf4;border-color:#bfe8cc;border-left-color:#15803d}
.sold-band--yours .sold-band__stamp{background:#15803d}
.state-chip--yours{background:#15803d;color:#fff}
.lot-card--yours .lot-card__media img{filter:none}
.cat-card__state--yours{background:#15803d;color:#fff}