*{box-sizing:border-box}
:root{
  --maroon-1:#5d0f1d; --maroon-2:#8d1730; --maroon-3:#a5162a;
  --red:#a4162a; --red-dark:#8b1223;
  --ink:#16191f; --muted:#697485; --line:#dfe4ea; --panel:#fff; --bg:#f4f6f8;
  --label:#2f5fbf; --chipbg:#eaf0f8; --good:#0d8a5f; --gold:#b6892b;
  --radius:12px; --shadow:0 10px 34px rgba(12,16,24,.13);
}
html,body{margin:0;padding:0;overflow-x:hidden}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:rgba(164,22,42,.14);
}
body.locked{overflow:hidden}          /* while a drawer or modal is open */
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* ---------- hero ---------- */
.hero{
  background:radial-gradient(120% 150% at 15% 0%,var(--maroon-3) 0%,var(--maroon-2) 42%,var(--maroon-1) 100%);
  padding:22px 20px 74px; position:relative;
}
.hero-inner{
  max-width:1220px;margin:0 auto;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;
}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brand:hover{text-decoration:none}
.logo{
  width:44px;height:44px;border-radius:10px;background:#fff;padding:5px;
  object-fit:contain;display:block;box-shadow:0 2px 10px rgba(0,0,0,.18);
}
.brand b{display:block;font-size:17px;letter-spacing:.16em}
.brand small{display:block;font-size:11.5px;opacity:.72;letter-spacing:.02em}
.hero-nav{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  font-size:11.5px;color:#fff;background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2); padding:5px 11px;border-radius:99px;
  letter-spacing:.02em;white-space:nowrap;
}

/* ---------- search card ---------- */
.searchcard{
  max-width:1180px;margin:34px auto -46px;background:var(--panel);
  border-radius:20px;box-shadow:var(--shadow);padding:20px 22px;
}
/* minmax(0,1fr), not 1fr: a track defaults to minmax(auto,1fr) and will
   grow to fit an unbreakable label. Selecting every make made the button
   read "German + French + Italian + ..." and that one string stretched the
   first column until the Search button was pushed off the row. */
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.field{position:relative;min-width:0}

/* paired from–to control that still occupies one grid cell */
.range{
  display:flex;align-items:center;gap:2px;border:1px solid var(--line);
  border-radius:10px;background:var(--panel);overflow:hidden;
}
.range select{border:0;border-radius:0;padding-left:11px;padding-right:26px;
  background-position:right 8px center;min-width:0;flex:1}
.range select:focus{box-shadow:none;outline:2px solid rgba(47,95,191,.18);outline-offset:-2px}
.range i{font-style:normal;color:var(--muted);font-size:13px;flex:0 0 auto}
.range:hover{border-color:#c3ccd8}
select{
  width:100%;appearance:none;background:var(--panel);border:1px solid var(--line);
  color:var(--label);border-radius:10px;padding:11px 34px 11px 14px;font-size:14px;
  font-family:inherit;cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%232f5fbf' stroke-width='1.7' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;
}
select:hover{border-color:#c3ccd8}
select:focus{outline:none;border-color:var(--label);box-shadow:0 0 0 3px rgba(47,95,191,.13)}
select option{color:var(--ink)}

/* ---------- manufacturer picker (multi-select by country) ---------- */
.multi{position:relative;min-width:0}
/* Matches the plain <select> it replaced, so the row still reads as one bar. */
.mbtn{
  width:100%;display:flex;align-items:center;gap:8px;text-align:left;
  background:var(--panel);border:1px solid var(--line);color:var(--label);
  border-radius:10px;padding:11px 14px;font-size:14px;font-family:inherit;
  cursor:pointer;
}
.mbtn:hover{border-color:#c3ccd8}
.mbtn .mlbl{
  flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;
}
.mbtn .mlbl.on{color:var(--ink);font-weight:600}
.mbtn .mcar{flex:0 0 auto;color:#2f5fbf;font-size:11px}
.drawer-body label .multi{margin-top:6px;font-weight:400}

.mpanel{
  position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;
  min-width:280px;background:var(--panel);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 12px 34px rgba(16,24,40,.16);
  display:flex;flex-direction:column;max-height:min(60vh,420px);
}
.mpanel[hidden]{display:none}
.mtools{
  display:flex;gap:8px;padding:10px;border-bottom:1px solid var(--line);
  flex:0 0 auto;
}
.msearch{
  flex:1 1 auto;min-width:0;border:1px solid var(--line);border-radius:8px;
  padding:8px 10px;font-size:13px;font-family:inherit;background:#fff;
  color:var(--ink);
}
.msearch:focus{outline:none;border-color:var(--label)}
.mclear,.mall{
  flex:0 0 auto;border:0;background:var(--chipbg);color:#2c4a76;
  border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:600;
  cursor:pointer;font-family:inherit;
}
.mall:hover,.mclear:hover{filter:brightness(.95)}
/* flex:1 1 auto with min-height:0, or the list refuses to scroll inside the
   panel and simply overflows it. */
.mlist{flex:1 1 auto;min-height:0;overflow-y:auto;padding:6px}
.mgroup{padding:4px 0 8px;border-bottom:1px solid var(--line)}
.mgroup:last-child{border-bottom:0}
.mlist label{
  display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:7px;
  cursor:pointer;font-size:13px;color:var(--ink);margin:0;font-weight:400;
}
.mlist label:hover{background:var(--chipbg)}
.mlist input[type=checkbox]{
  width:15px;height:15px;accent-color:var(--red);cursor:pointer;flex:0 0 auto;
}
.mlist .grow{font-size:12.5px;color:var(--label)}
/* the select-all row stays visible above the list it governs */
.mlist .grow.any{position:sticky;top:0;background:var(--panel);z-index:1;
  border-bottom:1px solid var(--line);margin-bottom:3px;padding-bottom:6px}
.mlist .grow b{font-weight:700}
.mlist .brow span{flex:1 1 auto;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
/* a generation sits under the model it belongs to */
.mlist .brow.sub{padding-left:26px;font-size:12.5px;color:#4a5566}
/* the arrow that opens a model's generations */
.mlist .mexp{border:0;background:none;cursor:pointer;color:var(--muted);
  font-size:10px;padding:2px 6px;border-radius:5px;line-height:1;
  flex:0 0 auto}
.mlist .mexp:hover{background:#e6edf7;color:var(--label)}
.mlist .brow.sub span{opacity:.9}
.mlist em{
  margin-left:auto;font-style:normal;color:var(--muted);font-size:11.5px;
  flex:0 0 auto;
}
.mempty{padding:16px;text-align:center;color:var(--muted);font-size:13px}

.mdone{display:none}

@media (max-width:640px){
  /* A bottom sheet. It was fixed with top:auto, which left it hanging over
     whatever was below — the Search button among it — with no way to scroll
     past. Anchored to the bottom it covers a known area, and Done closes it. */
  .mpanel{
    position:fixed;left:0;right:0;bottom:0;top:auto;min-width:0;
    max-height:72vh;border-radius:16px 16px 0 0;border-bottom:0;
    box-shadow:0 -10px 40px rgba(16,24,40,.28);
  }
  .mtools{padding:12px;position:sticky;top:0;background:var(--panel);
    border-radius:16px 16px 0 0}
  .mlist label{padding:11px 9px;font-size:14px}
  .mlist{padding-bottom:14px}
  .mdone{display:inline-block;flex:0 0 auto;border:0;background:var(--red);
    color:#fff;border-radius:8px;padding:8px 16px;font-size:13px;
    font-weight:600;cursor:pointer;font-family:inherit}
}

/* ---------- dual-thumb mileage slider ---------- */
.slider{
  border:1px solid var(--line);border-radius:10px;background:var(--panel);
  padding:7px 13px 11px;display:flex;flex-direction:column;justify-content:center;
}
.slider > label{font-size:11.5px;color:var(--muted);display:block;margin-bottom:9px}
.slider > label b{color:var(--label);font-weight:700}
.slider .track{position:relative;height:16px}
.slider .track:before{
  content:"";position:absolute;top:6px;left:0;right:0;height:4px;
  background:var(--line);border-radius:2px;
}
.slider .fill{position:absolute;top:6px;height:4px;background:var(--red);border-radius:2px}
.slider input[type=range]{
  position:absolute;top:0;left:0;width:100%;margin:0;height:16px;
  -webkit-appearance:none;appearance:none;background:none;pointer-events:none;
}
.slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;width:17px;height:17px;border-radius:50%;
  background:#fff;border:2px solid var(--red);cursor:grab;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.slider input[type=range]::-webkit-slider-thumb:active{cursor:grabbing}
.slider input[type=range]::-moz-range-thumb{
  pointer-events:auto;width:17px;height:17px;border-radius:50%;
  background:#fff;border:2px solid var(--red);cursor:grab;
}

/* ---------- condition checkboxes ---------- */
.cond-note{
  margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--muted);line-height:1.5;
}
.conditions{
  display:flex;flex-wrap:wrap;gap:10px 22px;align-items:flex-start;
  margin-top:12px;
}
.cond{display:flex;align-items:flex-start;gap:8px;font-size:13px;cursor:pointer}
.cond input[type=checkbox]{
  margin-top:1px;width:16px;height:16px;accent-color:var(--red);cursor:pointer;flex:0 0 auto;
}
.cond span{line-height:1.35}
.cond small{display:block;color:var(--muted);font-size:11px}
.cond.unavailable{opacity:.45;cursor:not-allowed}
.cond.unavailable input{cursor:not-allowed}
.cond.unavailable small{font-style:italic}
.cond.tolerance{
  display:none;flex-direction:column;gap:6px;cursor:default;
  background:var(--chipbg);border-radius:9px;padding:9px 13px;min-width:260px;
}
.cond.tolerance.on{display:flex}
.cond.tolerance label{font-size:12px;color:#2c4a76;cursor:default}
.cond.tolerance b{color:var(--red)}
.cond.tolerance input[type=range]{width:100%;accent-color:var(--red);cursor:pointer}

.btn-search .count{
  background:rgba(255,255,255,.22);border-radius:99px;padding:1px 8px;
  font-size:11.5px;font-weight:700;
}
.btn-search .count:empty{display:none}

.btn-advanced,.btn-search{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:10px;font-size:14px;font-weight:600;font-family:inherit;
  cursor:pointer;padding:11px 14px;transition:filter .15s,transform .05s;
}
.btn-advanced{background:var(--chipbg);color:#2c4a76}
.btn-advanced:hover{filter:brightness(.96)}
.btn-search{background:var(--red);color:#fff}
.btn-search:hover{background:var(--red-dark)}
.btn-search:active,.btn-advanced:active{transform:translateY(1px)}
.btn-search.wide{flex:1}
/* the optional tie-break sits beside the sort it refines. It was hidden below
   700px to save a row, which simply removed the feature on a phone; it now
   takes its own full-width row there instead. */
.sortwrap.then{color:var(--muted)}
.sortwrap.then select{max-width:190px}
@media (max-width:700px){
  .sortwrap.then{width:100%}
  .sortwrap.then select{max-width:none;flex:1}
}

/* Clear filters sits under the conditions rather than in the grid: an
   eleventh cell in a five-column layout stranded the Search button alone on
   a row of its own. */
.cardfoot{
  display:flex;justify-content:flex-end;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);
}
.btn-clear{
  display:inline-flex;align-items:center;gap:7px;background:none;border:0;
  color:var(--muted);font-size:12.5px;font-weight:600;font-family:inherit;
  cursor:pointer;padding:6px 8px;border-radius:8px;transition:color .15s,background .15s;
}
.btn-clear:hover{color:var(--red);background:var(--chipbg)}
.btn-clear:active{transform:translateY(1px)}
@media (max-width:700px){
  .cardfoot{justify-content:center}
  .btn-clear{padding:10px 14px;font-size:13.5px;min-height:44px}
}

.alsonote{
  margin:0 0 12px;padding:9px 12px;background:var(--chipbg);border-radius:9px;
  font-size:12.5px;line-height:1.5;color:#2c4a76;
}
.alsonote a{color:inherit;font-weight:600}

/* the arrow/clock glyph leading a movement badge */
.sig .arw{font-size:10px;line-height:1;margin-right:1px}
.sig.new{background:#eaf3ff;color:#1c4e9c}

/* ---------- drawer ---------- */
.scrim{
  position:fixed;inset:0;background:rgba(10,12,16,.44);opacity:0;visibility:hidden;
  transition:.22s;z-index:40;
}
.scrim.on{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:420px;max-width:92vw;background:var(--panel);
  z-index:50;transform:translateX(100%);transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(0,0,0,.16);
}
.drawer.on{transform:none}
.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 22px 14px;border-bottom:1px solid var(--line);
}
.drawer-head h2{margin:0;font-size:18px}
.x{background:none;border:0;font-size:26px;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.x:hover{color:var(--ink)}
.drawer-body{padding:18px 22px;overflow-y:auto;flex:1}
.drawer-body label{display:block;margin-bottom:14px;font-size:12.5px;color:var(--label);font-weight:600}
.drawer-body label select{margin-top:6px;font-weight:400}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.drawer-foot{
  padding:16px 22px;border-top:1px solid var(--line);display:flex;gap:10px;
}
.btn-reset{
  background:var(--chipbg);color:#2c4a76;border:0;border-radius:10px;
  padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;
}

/* ---------- results ---------- */
.wrap{max-width:1220px;margin:0 auto;padding:70px 20px 40px}
.resbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.summary{font-size:14px;color:var(--muted)}
.summary b{color:var(--ink)}
.sortwrap{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.sortwrap select{width:auto;min-width:180px;padding:9px 32px 9px 12px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.chip{
  background:var(--chipbg);color:#2c4a76;border-radius:99px;padding:5px 12px;
  font-size:12.5px;display:inline-flex;align-items:center;gap:7px;
}
.chip button{background:none;border:0;color:#6b86ad;cursor:pointer;font-size:15px;line-height:1;padding:0}
.chip button:hover{color:var(--red)}

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .18s,transform .18s;
}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.thumb{position:relative;aspect-ratio:4/3;background:#eceff3;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
/* Badge sits inline wherever it is used (legend, modal). Only the one pinned
   on a card photo is absolutely positioned. */
.tier{
  display:inline-block;font-size:10px;font-weight:800;letter-spacing:.07em;
  padding:4px 9px;border-radius:99px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.16);
  white-space:nowrap;vertical-align:middle;
}
.thumb .tier{position:absolute;top:10px;left:10px}
.tier.PLATINUM{color:#6b46d6}
.tier.GOLD{color:var(--gold)}
.tier.VERIFIED{color:var(--good)}
.shots{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.6);color:#fff;
  font-size:11px;padding:3px 8px;border-radius:99px}
.body{padding:14px 15px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.title{font-size:15px;font-weight:700;line-height:1.3}
.title small{display:block;font-weight:400;color:var(--muted);font-size:12px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.specs{display:flex;flex-wrap:wrap;gap:6px}
.spec{background:#f2f5f8;border-radius:6px;padding:3px 8px;font-size:11.5px;color:#4a5769}
.price{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-top:auto;
  padding-top:10px;border-top:1px solid var(--line)}
.price b{font-size:20px;letter-spacing:-.02em;display:block;color:var(--red)}
.plabel{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.pright{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.pright span{font-size:11px;color:var(--muted);white-space:nowrap}

/* buying signals on a card */
.signals{display:flex;flex-wrap:wrap;gap:5px}
.sig{
  font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;
  background:#f2f5f8;color:#4a5769;white-space:nowrap;
}
.sig.good{background:#e7f6ef;color:var(--good)}
.sig.warn{background:#fdf3e3;color:#a1701c}
.sig.bad{background:#fdeeee;color:#a33}

.resbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.resbar-right .mini{flex:0 0 auto;padding:9px 14px}

.warn{background:#fdf0f0;border:1px solid #f3cfcf;color:#9b2226;border-radius:8px;
  padding:7px 10px;font-size:11.5px;line-height:1.4}
.card.blocked .thumb img{filter:grayscale(.75)}

.actions{display:flex;gap:6px;flex-wrap:wrap}
.mini{flex:1;text-align:center;border:1px solid var(--line);background:var(--red);color:#fff;
  border-radius:8px;padding:8px 6px;font-size:12px;font-weight:600;cursor:pointer;
  font-family:inherit;white-space:nowrap;border-color:var(--red)}
.mini:hover{background:var(--red-dark)}
.mini.ghost{background:var(--panel);color:#2c4a76;border-color:var(--line)}
.mini.ghost:hover{background:var(--chipbg);border-color:var(--label)}

/* ---------- quote modal ---------- */
.modal{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-48%) scale(.98);
  width:760px;max-width:95vw;max-height:92vh;background:var(--panel);border-radius:16px;
  z-index:60;display:flex;flex-direction:column;opacity:0;visibility:hidden;
  transition:.2s;box-shadow:0 28px 70px rgba(0,0,0,.3);
}
.modal.on{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}
/* flex:0 0 auto on everything except the body. Without it a tall pane — the
   inspection diagram is ~540px — makes flexbox shrink the head, tabs and
   footer instead of scrolling the body, and the tab strip has the least
   natural height so it collapses to nothing. */
.modal-head{flex:0 0 auto;display:flex;justify-content:space-between;
  align-items:flex-start;gap:12px;
  padding:20px 22px 14px;border-bottom:1px solid var(--line)}
.modal-head h2{margin:0;font-size:19px}
.modal-head p{margin:4px 0 0;font-size:12.5px;color:var(--muted)}
.modal-body{padding:16px 22px 22px;overflow-y:auto;flex:1 1 auto;min-height:0}
.modal-foot{flex:0 0 auto;border-top:1px solid var(--line);padding:12px 22px;
  display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.modal-foot .mini{flex:0 0 auto}
.footprice{margin-left:auto;font-weight:800;color:var(--red);font-size:16px}

/* tabs */
/* The strip scrolls; the buttons do not shrink. overflow-x alone was not
   enough — a flex item shrinks below its content by default, so five tabs
   squeezed themselves narrower than their own labels and clipped the text
   rather than letting the row scroll. */
.tabs{flex:0 0 auto;display:flex;gap:2px;padding:0 16px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
  -webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{height:3px}
.tabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.tab{flex:0 0 auto;background:none;border:0;border-bottom:2px solid transparent;
  padding:11px 14px;font-size:13.5px;font-weight:600;color:var(--muted);
  cursor:pointer;font-family:inherit;white-space:nowrap}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--red);border-bottom-color:var(--red)}
.pane{display:none}
.pane.on{display:block}

/* gallery */
.gallery{display:flex;flex-direction:column;gap:10px}
.stage{position:relative;background:#0d0f12;border-radius:10px;overflow:hidden;
  aspect-ratio:4/3;display:grid;place-items:center}
.stage img{width:100%;height:100%;object-fit:contain;display:block}
.stage .nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);
  color:#fff;border:0;width:38px;height:52px;cursor:pointer;font-size:18px;line-height:1}
.stage .nav:hover{background:rgba(0,0,0,.74)}
.stage .prev{left:0;border-radius:0 8px 8px 0}
.stage .next{right:0;border-radius:8px 0 0 8px}
.counter{position:absolute;bottom:10px;right:12px;background:rgba(0,0,0,.62);color:#fff;
  font-size:11.5px;padding:4px 10px;border-radius:99px}
.thumbs{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px}
.thumbs img{width:78px;height:58px;object-fit:cover;border-radius:6px;cursor:pointer;
  flex:0 0 auto;border:2px solid transparent;opacity:.62}
.thumbs img:hover{opacity:1}
.thumbs img.on{border-color:var(--red);opacity:1}

/* details */
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 22px}
.drow{display:flex;justify-content:space-between;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.drow span{color:var(--muted)}
.drow b{text-align:right;font-weight:600}
.dh{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  margin:20px 0 8px}
.notes{margin:0;padding-left:18px;font-size:13px;color:#3d4756}
.notes li{margin-bottom:4px}
.ubody{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.ubody img{width:100%;border-radius:7px;display:block}

/* verification */
.tierbox{display:flex;gap:12px;align-items:flex-start;background:var(--chipbg);
  border-radius:10px;padding:13px 15px;margin-bottom:6px}
.tierbox b{font-size:14px;display:block;margin-bottom:3px}
.tierbox p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}
.checklist{list-style:none;margin:0;padding:0;font-size:13.5px}
.checklist li{padding:7px 0 7px 24px;position:relative;border-bottom:1px solid var(--line)}
.checklist li:before{position:absolute;left:0;top:7px;font-weight:700}
.checklist .yes:before{content:"✓";color:var(--good)}
.checklist .nope:before{content:"!";color:var(--warn, #b7791f)}
.checklist .nope{color:#7a6534}

/* tier legend on the results page */
.legend{background:var(--panel);border:1px solid var(--line);border-radius:10px;
  margin-bottom:18px;overflow:hidden}
.legend summary{padding:12px 16px;cursor:pointer;font-size:13.5px;font-weight:600;
  color:var(--label);list-style:none}
.legend summary::-webkit-details-marker{display:none}
.legend summary:before{content:"?";display:inline-grid;place-items:center;width:17px;height:17px;
  border-radius:50%;background:var(--label);color:#fff;font-size:11px;margin-right:9px;
  vertical-align:-3px}
.legend[open] summary{border-bottom:1px solid var(--line)}
.legend-body{padding:14px 16px 18px}
.legend-base{margin:0 0 14px;font-size:13px;color:var(--muted)}
.legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.legend-item b{display:block;font-size:13px;margin:7px 0 3px}
.legend-item p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.5}

button.thumb{border:0;padding:0;width:100%;display:block;cursor:pointer;font:inherit}
.qbanner{border-radius:9px;padding:10px 13px;font-size:13px;margin-bottom:14px}
.qbanner.ok{background:#eaf7f0;color:#0d6b4b;border:1px solid #bfe6d3}
.qbanner.bad{background:#fdf0f0;color:#9b2226;border:1px solid #f3cfcf}
.qtable{width:100%;border-collapse:collapse;font-size:13.5px}
.qtable td{padding:7px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.qtable td small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.qtable .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.qtable .ghead td{background:var(--chipbg);color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:700;padding:7px 8px;border:0}
.qtable .sub td{font-weight:600;background:#fafbfc}
.qtable .total td{font-weight:800;font-size:16px;border-top:2px solid var(--ink);border-bottom:0;
  padding-top:11px;color:var(--red)}
.qfoot{font-size:11.5px;color:var(--muted);margin:14px 0 0;line-height:1.5}

.check{display:flex!important;align-items:flex-start;gap:9px;cursor:pointer;font-weight:600}
.check input{margin-top:2px;accent-color:var(--red);width:16px;height:16px;cursor:pointer}
.check small{display:block;font-weight:400;color:var(--muted);font-size:11.5px;margin-top:1px}
.checks{display:flex;flex-direction:column;gap:3px;font-size:11.5px;color:var(--good)}
.checks i{font-style:normal;color:var(--muted)}
.gone{opacity:.55}

.pager{display:flex;justify-content:center;gap:10px;margin-top:32px}
.pager button{
  background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:10px 18px;
  font-size:14px;cursor:pointer;font-family:inherit;color:var(--ink);
}
.pager button:hover:not(:disabled){border-color:var(--label);color:var(--label)}
.pager button:disabled{opacity:.42;cursor:default}

.state{padding:60px 20px;text-align:center;color:var(--muted)}
.state h3{margin:0 0 8px;color:var(--ink);font-size:17px}
.state p{margin:0 auto;max-width:460px;font-size:13.5px;line-height:1.6}
.idle-icon{font-size:34px;line-height:1;margin-bottom:12px;opacity:.55}
.spinner{
  width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--red);
  border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 14px;
}
@keyframes spin{to{transform:rotate(360deg)}}

.foot{max-width:1220px;margin:0 auto;padding:28px 20px 60px;color:var(--muted);font-size:13px}
.foot b{color:var(--ink)}
.foot .small{font-size:12px;opacity:.85;margin-bottom:0}

/* ==================================================================
   Responsive
   ================================================================== */

/* tablets */
@media (max-width:1000px){
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .range{grid-column:span 1}
}

/* phones ---------------------------------------------------------- */
@media (max-width:700px){
  .hero{padding:16px 14px 60px}
  .hero-inner{gap:12px}
  .brand b{font-size:15px;letter-spacing:.12em}
  .brand small{font-size:11px}
  .logo{width:38px;height:38px}
  .hero-nav{gap:6px}
  .pill{font-size:10.5px;padding:4px 9px}

  .searchcard{margin:20px auto -34px;padding:14px;border-radius:16px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* Type, and every from–to range, take the full row so both ends stay usable */
  .field:nth-child(5),.range{grid-column:1/-1}

  /* 16px stops iOS Safari zooming in when a select gets focus */
  select{font-size:16px;padding:13px 34px 13px 13px}
  .range select{font-size:15px;padding:13px 26px 13px 12px}
  .btn-advanced,.btn-search{font-size:15px;padding:14px 12px;min-height:48px}

  .wrap{padding:58px 14px 32px}
  .resbar{gap:10px}
  .sortwrap{width:100%}
  .sortwrap select{flex:1;min-width:0;width:100%;font-size:16px}
  .summary{font-size:13px}

  .cards{grid-template-columns:1fr;gap:16px}
  .card:hover{transform:none;box-shadow:none}
  .actions .mini{padding:11px 8px;font-size:12.5px;min-height:44px}

  .legend summary{padding:14px}
  .legend-grid{grid-template-columns:1fr;gap:16px}

  .foot{padding:22px 14px 48px}
  .pager button{padding:12px 18px;min-height:46px}
}

/* full-screen sheets on phones ------------------------------------ */
@media (max-width:640px){
  .drawer{width:100%;max-width:100%}
  .drawer-body{padding:16px 16px 24px}
  .drawer-body label{font-size:12px}
  .drawer-body select{font-size:16px;padding:13px 34px 13px 13px}
  .drawer-foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
  .btn-reset{padding:14px 18px;min-height:48px}

  /* the detail modal becomes a full-height sheet that slides up */
  .modal{
    width:100%;max-width:100%;height:100%;max-height:100%;
    top:0;left:0;border-radius:0;
    transform:translateY(100%);
  }
  .modal.on{transform:translateY(0)}
  .modal-head{padding:16px 16px 12px}
  .modal-head h2{font-size:17px}
  .modal-head p{font-size:11.5px}
  .modal-body{padding:14px 16px 24px}
  .modal-foot{
    padding:12px 16px calc(12px + env(safe-area-inset-bottom));
    gap:8px;
  }
  .modal-foot .mini{flex:1 1 auto;min-height:46px}
  .footprice{width:100%;margin-left:0;text-align:center;order:-1;
    padding-bottom:4px;border-bottom:1px solid var(--line)}

  /* Narrow screens: tighten the padding but never the label, and keep the
     row scrollable so the last tab is always reachable. */
  .tabs{padding:0 8px}
  .tab{padding:13px 10px;font-size:12.5px}

  .stage .nav{width:46px;height:64px;font-size:20px}
  .thumbs img{width:64px;height:48px}
  .dgrid{grid-template-columns:1fr;gap:0}
  .drow{font-size:13px}
  .ubody{grid-template-columns:repeat(2,1fr)}
  .qtable{font-size:13px}
  .qtable td{padding:8px 2px}
  .qtable .total td{font-size:15px}
  .tierbox{flex-direction:column;gap:8px}
}

/* very narrow ------------------------------------------------------ */
@media (max-width:400px){
  .grid{grid-template-columns:1fr}
  .field,.range{grid-column:1/-1}
  .btn-advanced,.btn-search{grid-column:1/-1}
  .hero-nav{display:none}          /* claims already repeat in the footer */
  .specs .spec{font-size:11px}
  .price b{font-size:18px}
  .pright span{font-size:10.5px}
}

/* coarse pointers: give every control a real touch target ---------- */
@media (hover:none) and (pointer:coarse){
  select,.mini,.tab,.pager button,.btn-search,.btn-advanced{min-height:44px}
  /* a chip is small by design; widen its close target without stretching it */
  .chip{padding:8px 6px 8px 13px}
  .chip button{min-width:30px;min-height:30px;font-size:17px}
  .thumbs{-webkit-overflow-scrolling:touch}
  .card:hover{transform:none}
  .thumbs img{opacity:1}
}

/* ---------------------------------------------------------------- enquiry
   The only place a visitor can reach a human. Kept deliberately short: name
   and phone are required, everything else is optional, because each extra
   required field costs leads. 16px inputs so iOS does not zoom on focus. */
#pane-ask{max-width:560px}
.askcar{display:flex;flex-direction:column;gap:2px;padding:12px 14px;
  background:var(--chipbg);border:1px solid var(--line);border-radius:var(--radius)}
.askcar b{font-size:15.5px}
.askcar span{font-size:13px;color:var(--muted)}
.askcar .askprice{color:var(--good);font-weight:700;font-size:14px}
.askcar .askfresh{color:var(--label);font-size:12.5px}
.askblurb{color:var(--muted);font-size:13.5px;margin:12px 2px 16px}

#askForm{display:flex;flex-direction:column;gap:13px}
#askForm label{display:flex;flex-direction:column;gap:5px;
  font-size:12.5px;font-weight:600;color:var(--label);letter-spacing:.01em}
#askForm .req{color:var(--red)}
#askForm .opt{color:var(--muted);font-weight:400}
#askForm input,#askForm textarea{
  font:16px/1.45 inherit;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;
  box-sizing:border-box;-webkit-appearance:none}
#askForm input:focus,#askForm textarea:focus{
  outline:none;border-color:var(--label);box-shadow:0 0 0 3px rgba(47,95,191,.13)}
#askForm textarea{resize:vertical;min-height:74px}

.askbtn{background:var(--red);color:#fff;border:0;border-radius:10px;
  padding:14px 18px;font-size:15px;font-weight:700;cursor:pointer;min-height:48px}
.askbtn:hover:not(:disabled){background:var(--red-dark)}
.askbtn:disabled{opacity:.62;cursor:default}

.askNote{margin:2px;font-size:13px;color:var(--muted);min-height:1em}
.askNote.bad{color:var(--red)}

.askok{padding:20px 16px;text-align:center;background:var(--chipbg);
  border:1px solid var(--line);border-radius:var(--radius)}
.askok b{display:block;font-size:17px;color:var(--good);margin-bottom:6px}
.askok p{margin:4px 0;color:var(--muted);font-size:14px}
.askok .small{font-size:12px;opacity:.8}

.mini.go{background:var(--good);border-color:var(--good);color:#fff}
.mini.go:hover{background:#0a7350;border-color:#0a7350}

@media(max-width:600px){
  #pane-ask{max-width:none}
  .askbtn{min-height:50px}
}

/* ------------------------------------------------------- claim history */
.qtable.claims td small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.qtable.claims tr.mine td:first-child{border-left:3px solid var(--red)}
.qtable.claims tr.other td:first-child{border-left:3px solid var(--gold)}
.qfoot.yes{color:var(--good)}
.qfoot.bad{color:var(--red)}
.state.small{padding:14px;font-size:13px;color:var(--muted)}
.state.small .spinner{width:18px;height:18px;margin:0 auto 8px}
#claimBox{margin-top:4px}
@media(max-width:600px){
  .qtable.claims td small{font-size:11px}
}

/* A car that earns no verified badge carries its worst finding instead, so an
   unbadged card is never mistaken for an unremarkable one. */
.tier.flag-black,.tier.flag-red,.tier.flag-amber,.tier.flag-grey{
  letter-spacing:.02em;font-size:10.5px}

/* ------------------------------------------------------------- sold cars
   A gone listing is kept for 30 days and shown greyed with a SOLD ticket,
   rather than vanishing — a customer following an old link should be told
   what happened, not handed a 404. */

.card.gone{opacity:.72}
.card.gone .thumb img{filter:grayscale(1)}
.card.gone .go,.card.gone [data-quote]{cursor:default}
.goneBanner{background:#16191f;color:#fff;padding:.7rem 1rem;font-size:13.5px}
.goneBanner b{letter-spacing:.04em}

/* ------------------------------------------------------- bodywork on record
   The panel table answers "what was actually done to this car", which the
   insurance record cannot: a payout figure says money moved, a replaced wing
   says the car was hit. Heavy work is marked because replacing a bolt-on panel
   and cutting the shell are not the same thing. */
.qtable.panels th{font-size:11px;text-transform:uppercase;letter-spacing:.03em}
.qtable.panels tr.heavy td:last-child{color:#a4162a;font-weight:600}
.qtable.panels td small{display:block;color:var(--muted);font-size:11px;margin-top:1px}

/* --------------------------------------------------- external inspection
   A table of panel names is accurate but unread; a diagram with both front
   wings lit red is understood at a glance. Positions are approximate because
   Encar reports which panel was worked on, never where on it. */
.legend{display:flex;flex-wrap:wrap;gap:.55rem 1rem;padding:.7rem .8rem;
  background:#f4f7fb;border:1px solid var(--line);border-radius:var(--radius);
  margin:.2rem 0 .8rem;font-size:12.5px}
.legend .lg{display:flex;align-items:center;gap:.35rem;color:var(--ink)}
.legend i{display:inline-flex;align-items:center;justify-content:center;
  width:19px;height:19px;border-radius:50%;color:#fff;font-size:10.5px;
  font-weight:700;font-style:normal;flex:0 0 auto}
.cardiag{display:flex;justify-content:center;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:.7rem}
.cardiag{overflow-x:auto}
/* Capped so the blueprint does not fill the whole modal: at full 716px width
   its 624x470 ratio is 540px tall, taller than the pane it sits in. */
.cardiag svg{width:100%;max-width:520px;height:auto}
.cardiag .mark{cursor:help}

/* --------------------------------------------------------- badge tones
   A car that fails a check says which check, coloured by how much it should
   worry a buyer: black is gone, red cannot be exported cleanly, amber is
   damage on record, grey is a record question rather than a defect. */
.tier.flag-black{background:#16191f;color:#fff;border-color:#16191f}
.tier.flag-red{background:#a4162a;color:#fff;border-color:#a4162a}
.tier.flag-amber{background:#b6892b;color:#fff;border-color:#b6892b}
.tier.flag-grey{background:#5b6472;color:#fff;border-color:#5b6472}
.legend-split{grid-column:1/-1;margin:.9rem 0 .1rem;padding-top:.9rem;
  border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}


/* The German comparison. Deliberately the loudest signal on the card: it is
   the one that decides whether a car is worth importing at all. */
.sig.de{background:#0f2d5c;color:#fff;font-weight:700}
/* The reverse trade, and deliberately the same dark blue: both badges answer
   "what is this car worth somewhere else". The figure is green rather than
   amber because this one is money earned, not money saved, and it only ever
   renders when it is positive. */
.sig.deex{background:#0f2d5c;color:#fff;font-weight:700}
.sig.deex b{color:#7ee2a8}
.sig.deex .deword{font-style:normal;font-weight:600;opacity:.85}
a.sig.deex,button.sig.deex{text-decoration:none;cursor:pointer;max-width:100%}
a.sig.deex:hover,button.sig.deex:hover{background:#16407e}
.sig.de b{color:#ffd447}
/* .sig is nowrap, so this one has to earn its width. The words go first on a
   narrow screen; the percentage and the landed price are what matter and they
   survive to the smallest card. */
.sig.de .deword{font-style:normal;font-weight:600;opacity:.85}
a.sig.de,button.sig.de{
  text-decoration:none;cursor:pointer;max-width:100%;overflow:hidden;
  text-overflow:ellipsis;border:0;font-family:inherit;
}
a.sig.de:hover,button.sig.de:hover{background:#16407e}
@media (max-width:560px){
  .sig.de .deword{display:none}
  .sig.deex .deword{display:none}
  .sig.deex::after{content:" 92 DE";font-weight:600;opacity:.85}
  .sig.de::after{content:" DE";font-weight:600;opacity:.85}
}


/* Sold. Grey rather than red: it is a fact about the car, not a warning. */
.sig.sold{background:#5b6472;color:#fff;font-weight:700}
.card.isgone{opacity:.72}
.card.isgone img{filter:grayscale(.55)}


/* The way out to AutoScout24. Sized like an action rather than a footnote:
   it is the one place a buyer can check the German figure for themselves,
   and it was previously the smallest text on the panel. */
.delink{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:16px 0 10px;padding:14px 18px;border-radius:10px;
  background:#0f2d5c;color:#fff;text-decoration:none;
  font-size:15px;font-weight:700;line-height:1.3;
}
.delink span{font-size:20px;color:#ffd447;flex:0 0 auto}
.delink:hover{background:#16407e}
@media (max-width:560px){.delink{font-size:14px;padding:13px 15px}}


/* Badges past the fourth stay folded until asked for. A card showing ten at
   once is not telling you more, it is telling you nothing in particular. */
.sigrest{display:none}
.signals.open .sigrest{display:contents}
.sig.more{
  background:#e3e8ef;color:#43506b;border:0;font-family:inherit;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px;
  cursor:pointer;
}
.sig.more:hover{background:#d6dde8}


/* When a listing appeared, how long it has sat, and who has looked. Quieter
   than the specs above it -- this is context for a decision, not a headline. */
.listing{
  display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;
  font-size:11.5px;color:#7a8698;
}
.listing span{white-space:nowrap}
.listing .age.old{color:#a1701c;font-weight:600}
.listing .age.fresh{color:#1c7a45;font-weight:600}