/* ============================================================================
   CarMania Used Cars — the BachatShop theme, re-skinned for cars.

   base.css is BachatShop's stylesheet, unchanged. This file sits on top of it and does
   three things, in this order:
     1. redefines the palette tokens, so every inherited rule re-colours itself;
     2. retunes the few shop components whose shape is wrong for a classifieds site;
     3. adds the components a classifieds site needs and a shop does not.

   The palette is CarMania's own green rather than the toy-shop teal, with a warm amber
   for prices and a cool slate for the chrome. Rounded corners come down from 20px to
   14px throughout: a car ad is a document, not a toy, and the softer radius read as
   childish once the content changed.
   ========================================================================== */

:root{
  --teal:#0E7C66; --teal-dk:#0A5F4E; --teal-lt:#ECF6F3;
  --yellow:#F5A524; --yellow-dk:#D98B0E; --cream:#FFF8EC; --coral:#E8604C;

  --charcoal:#16212B; --ink:#121A22; --soft:#5C6B78; --paper:#FFFFFF; --line:#E3E9ED;

  /* aliases the inherited rules still reference */
  --purple:#0E7C66; --purple-dk:#0A5F4E; --deep:#16212B;
  --lav:#ECF6F3; --lav2:#DCEDE8; --green:#0E7C66; --sky:#2E7FA8;

  --shadow:0 4px 10px rgba(16,33,43,.05), 0 22px 44px -22px rgba(16,33,43,.26);
  --shadow-sm:0 10px 26px -16px rgba(16,33,43,.34);
  --r:14px;
}

body{font-family:'Manrope',"Segoe UI",system-ui,-apple-system,Roboto,sans-serif}
h1,h2,h3,h4{font-family:'Manrope',"Segoe UI",sans-serif;letter-spacing:-.015em}
body::before{background:
  radial-gradient(60% 46% at 86% 0%, rgba(14,124,102,.07), transparent 62%),
  radial-gradient(50% 40% at 0% 100%, rgba(245,165,36,.07), transparent 60%), #FFFFFF}

.wrap{max-width:1240px}
.btn{border-radius:12px;padding:12px 24px}
.btn:hover{box-shadow:0 14px 26px -12px rgba(14,124,102,.55)}
.btn.amber{background:var(--yellow);color:#241803}
.btn.amber:hover{box-shadow:0 14px 26px -12px rgba(245,165,36,.6)}
.card{border-radius:var(--r)}

/* ---------------------------------------------------------------- announce + header */
/* The announce bar is the first child of <header>, so header and bar move as one block and the
   fixed header can never land on top of it. It keeps its own dark background so it stays
   readable while the header itself is transparent over the hero. */
.announce{background:var(--charcoal);color:#fff;font-weight:600;letter-spacing:.01em;
  text-align:center;font-size:13px;padding:8px 14px;line-height:1.45}
.announce a{color:#9FE6D2;text-decoration:underline;text-underline-offset:2px}
.announce a:hover{color:#fff}
.announce .tight{display:none}
@media(max-width:760px){
  /* The long sentence wraps to three lines on a phone and pushes the whole page down for no
     benefit, so a short version is swapped in. Same links, same meaning, one line. */
  .announce{font-size:12px;padding:7px 12px}
  .announce .full{display:none}
  .announce .tight{display:inline}
}
/* header is a two-row block now (announce + bar), so the hero must clear both */
header .bar{position:relative}

.logo{gap:11px;font-size:21px}
.cm-mark{flex:none;line-height:0;display:block}
.cm-word{font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.cm-word b{font-weight:800;color:var(--yellow)}
.cm-word i{font-style:normal;font-weight:600;font-size:.62em;opacity:.75;display:block;
  letter-spacing:.06em;text-transform:uppercase;margin-top:-2px}
header.solid .cm-word b, body.inner .cm-word b{color:var(--teal)}

.mainnav{gap:24px;font-size:14.5px}
.hsearch input{width:170px}
.sell-pill{background:var(--yellow);color:#241803;border-radius:999px;padding:10px 18px;
  font-weight:800;font-size:14px;white-space:nowrap;transition:transform .12s,box-shadow .12s}
.sell-pill:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(245,165,36,.8)}

.mm-cats.wide{grid-template-columns:1fr 1fr}
.mm-cat .ct{margin-left:auto;font-size:12px;font-weight:700;color:var(--soft);
  background:var(--lav);border-radius:999px;padding:2px 8px}

/* ---------------------------------------------------------------- flash */
.uc-flash{position:fixed;left:50%;transform:translateX(-50%);bottom:22px;z-index:200;
  padding:13px 22px;border-radius:12px;font-weight:700;font-size:14.5px;color:#fff;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.uc-flash.ok{background:#0E7C66}
.uc-flash.err{background:#C0392B}

/* ---------------------------------------------------------------- hero (no slider) */
/* A classifieds homepage opens with the search, not with a carousel. A slider on a site
   like this pushes the only control anybody came for below the fold, and nothing in it is
   ever as relevant as what the visitor was about to type. */
.uc-hero{position:relative;padding:132px 0 44px;color:#fff;
  background:linear-gradient(150deg,#0B5D4E 0%,#0E7C66 46%,#12937A 100%)}
.uc-hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(70% 90% at 92% 10%, rgba(245,165,36,.26), transparent 60%)}
.uc-hero > .wrap{position:relative;z-index:2}
body.inner .uc-hero{padding-top:54px}
.uc-hero h1{font-size:clamp(28px,4.4vw,46px);line-height:1.1;margin:0 0 10px;max-width:16ch}
.uc-hero .sub{color:rgba(255,255,255,.88);font-size:17px;max-width:56ch;margin:0 0 28px}
.uc-hero .sub a{color:#FFE09A;text-decoration:underline;text-underline-offset:3px}

.searchpanel{background:#fff;border-radius:18px;padding:16px;box-shadow:0 30px 60px -28px rgba(0,0,0,.55)}
.sp-tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.sp-tab{border:none;background:var(--lav);color:var(--ink);font:inherit;font-weight:700;font-size:13.5px;
  padding:9px 16px;border-radius:999px;cursor:pointer}
.sp-tab.on{background:var(--teal);color:#fff}
.sp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end}
.sp-f{display:flex;flex-direction:column;gap:5px;min-width:0}
.sp-f label{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--soft)}
.sp-f select,.sp-f input{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 12px;
  font:inherit;font-size:14.5px;background:#fff;color:var(--ink);outline:none;min-width:0}
.sp-f select:focus,.sp-f input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,102,.14)}
.sp-go{border:none;background:var(--teal);color:#fff;font:inherit;font-weight:800;font-size:15px;
  padding:13px 18px;border-radius:10px;cursor:pointer;white-space:nowrap}
.sp-go:hover{background:var(--teal-dk)}
.sp-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;align-items:center}
.sp-quick span{font-size:12.5px;font-weight:700;color:var(--soft)}
.sp-quick a{font-size:13px;font-weight:700;color:var(--teal);background:var(--lav);
  border-radius:999px;padding:6px 13px}
.sp-quick a:hover{background:var(--lav2)}

.hero-stats{display:flex;gap:30px;margin-top:26px;flex-wrap:wrap}
.hero-stats b{display:block;font-size:26px;line-height:1.1}
.hero-stats small{color:rgba(255,255,255,.8);font-size:13px;font-weight:600}

/* ---------------------------------------------------------------- section furniture */
.uc-sec{padding:46px 0}
.uc-sec.tint{background:var(--lav)}
.uc-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:20px}
.uc-head h2{font-size:clamp(20px,2.7vw,27px)}
.uc-head p{color:var(--soft);font-size:14.5px;margin:4px 0 0}
.uc-head a.more{font-weight:700;color:var(--teal);font-size:14px;white-space:nowrap}

/* ---------------------------------------------------------------- the ad card */
.carlist{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.carlist.rail{grid-template-columns:repeat(4,1fr)}

.carcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .14s,box-shadow .14s;position:relative}
.carcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.carcard .ph{position:relative;aspect-ratio:4/3;background:#EEF2F4;overflow:hidden}
.carcard .ph img{width:100%;height:100%;object-fit:cover}
.carcard .ph .none{display:flex;align-items:center;justify-content:center;height:100%;
  color:#9AA8B2;font-size:13px;font-weight:700}
.carcard .flags{position:absolute;top:9px;left:9px;display:flex;gap:6px;flex-wrap:wrap}
.flag{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;background:rgba(18,26,34,.84);color:#fff;backdrop-filter:blur(4px)}
.flag.feat{background:var(--yellow);color:#241803}
.flag.sample{background:#2E7FA8}
.flag.sold{background:#C0392B}
.carcard .shots{position:absolute;right:9px;bottom:9px;font-size:11px;font-weight:700;
  background:rgba(18,26,34,.78);color:#fff;border-radius:999px;padding:3px 9px}

.carcard .bd{padding:13px 14px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.carcard .price{font-size:19px;font-weight:800;color:var(--ink);line-height:1.15}
.carcard .price small{display:block;font-size:11.5px;font-weight:600;color:var(--soft);margin-top:2px}
.carcard h3{font-size:14.5px;font-weight:700;line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.carcard .specs{display:flex;flex-wrap:wrap;gap:6px}
.carcard .specs i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--soft);
  background:var(--lav);border-radius:7px;padding:4px 8px;white-space:nowrap}
.carcard .foot{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:auto;padding-top:9px;border-top:1px solid var(--line);
  font-size:12px;font-weight:600;color:var(--soft)}
.carcard .foot .loc{display:inline-flex;align-items:center;gap:4px;min-width:0}
.carcard .foot .loc span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* a wider card for the list layout on the search page */
.carlist.rows{grid-template-columns:1fr;gap:12px}
.carlist.rows .carcard{flex-direction:row}
.carlist.rows .carcard .ph{width:270px;flex:none;aspect-ratio:4/3}
.carlist.rows .carcard .bd{padding:15px 18px}
.carlist.rows .carcard h3{font-size:17px;min-height:0;-webkit-line-clamp:1}
.carlist.rows .carcard .price{font-size:22px}
.carlist.rows .carcard .blurb{font-size:13.5px;color:var(--soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------------------------------------------------------------- tile grids */
.tilegrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 13px;
  text-align:center;transition:border-color .14s,transform .14s,box-shadow .14s}
.tile:hover{border-color:var(--teal);transform:translateY(-3px);box-shadow:var(--shadow-sm)}
.tile b{display:block;font-size:14.5px;font-weight:800}
.tile small{display:block;color:var(--soft);font-size:12px;font-weight:600;margin-top:3px}
.tile .ic{font-size:22px;display:block;margin-bottom:6px}

.bandgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.band{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 14px;
  transition:border-color .14s,transform .14s}
.band:hover{border-color:var(--yellow);transform:translateY(-3px)}
.band.empty{opacity:.52;background:#FAFBFC}
.band.empty small{font-style:italic}
.band b{display:block;font-size:15px;font-weight:800}
.band small{display:block;color:var(--soft);font-size:12px;font-weight:600;margin-top:4px}

/* ---------------------------------------------------------------- sell CTA band */
.sellband{background:linear-gradient(130deg,#16212B 0%,#1E3340 100%);color:#fff;border-radius:18px;
  padding:34px 36px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.sellband h2{font-size:clamp(21px,3vw,30px);margin-bottom:8px}
.sellband p{color:rgba(255,255,255,.82);max-width:58ch;font-size:15px;margin:0}
.sellband .acts{display:flex;gap:10px;flex-wrap:wrap}

/* ---------------------------------------------------------------- the carmania cross-link band */
.crossband{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.crossband a{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;
  display:flex;gap:13px;align-items:flex-start;transition:border-color .14s,transform .14s}
.crossband a:hover{border-color:var(--teal);transform:translateY(-3px)}
.crossband .ic{font-size:24px;line-height:1}
.crossband b{display:block;font-size:15px;font-weight:800;margin-bottom:3px}
.crossband small{color:var(--soft);font-size:12.8px;font-weight:600;line-height:1.5;display:block}

/* ---------------------------------------------------------------- search page */
.srch{display:grid;grid-template-columns:276px 1fr;gap:26px;align-items:start;padding-top:28px;padding-bottom:56px}
.filters{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:4px 16px 16px;
  position:sticky;top:76px}
.fgroup{border-bottom:1px solid var(--line);padding:14px 0}
.fgroup:last-child{border-bottom:none}
.fgroup > h4{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--soft);margin-bottom:9px}
.fgroup select,.fgroup input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 10px;
  font:inherit;font-size:14px;outline:none;background:#fff;color:var(--ink)}
.fgroup select:focus,.fgroup input:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,102,.13)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fchecks{display:flex;flex-wrap:wrap;gap:7px}
.fchk{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--soft);
  background:var(--lav);border:1px solid transparent;border-radius:999px;padding:6px 12px;cursor:pointer}
.fchk input{display:none}
.fchk.on{background:var(--teal);border-color:var(--teal);color:#fff}
.fapply{width:100%;border:none;background:var(--teal);color:#fff;font:inherit;font-weight:800;
  border-radius:10px;padding:12px;cursor:pointer;margin-top:14px}
.fapply:hover{background:var(--teal-dk)}
.fclear{display:block;text-align:center;font-size:13px;font-weight:700;color:var(--soft);margin-top:9px}

.srch-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:16px}
.srch-top h1{font-size:clamp(20px,2.6vw,26px)}
.srch-top .count{color:var(--soft);font-size:14px;font-weight:600;margin-top:3px}
.srch-tools{display:flex;gap:8px;align-items:center}
.srch-tools select{border:1px solid var(--line);border-radius:9px;padding:9px 11px;font:inherit;
  font-size:14px;background:#fff;color:var(--ink);outline:none}
.viewtog{display:flex;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.viewtog a{padding:9px 12px;font-size:14px;font-weight:700;color:var(--soft);background:#fff}
.viewtog a.on{background:var(--teal);color:#fff}

.chipsrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.achip{display:inline-flex;align-items:center;gap:7px;background:var(--lav);border-radius:999px;
  padding:6px 12px;font-size:13px;font-weight:700;color:var(--ink)}
.achip a{color:var(--soft);font-weight:800}
.achip a:hover{color:var(--coral)}

.pager{display:flex;gap:7px;justify-content:center;margin-top:30px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;text-align:center;padding:10px 12px;border-radius:9px;
  border:1px solid var(--line);font-weight:700;font-size:14px;background:#fff;color:var(--ink)}
.pager .on{background:var(--teal);border-color:var(--teal);color:#fff}
.pager a:hover{border-color:var(--teal);color:var(--teal)}

.emptybox{background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:48px 28px;
  text-align:center;color:var(--soft)}
.emptybox b{display:block;font-size:18px;color:var(--ink);margin-bottom:7px}

/* ---------------------------------------------------------------- the ad page */
.detail{display:grid;grid-template-columns:1fr 348px;gap:28px;align-items:start;padding-top:26px;padding-bottom:60px}
.crumbs{font-size:13px;color:var(--soft);font-weight:600;padding:16px 0 0}
.crumbs a{color:var(--soft)}
.crumbs a:hover{color:var(--teal)}

.gal{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gal .big{aspect-ratio:16/10;background:#0E1216;position:relative}
.gal .big img{width:100%;height:100%;object-fit:cover}
.gal .big .none{display:flex;align-items:center;justify-content:center;height:100%;color:#7E8C96;
  font-weight:700}
/* The .swipe wrapper is shared with the phone layout, where it becomes a scroll-snap
   carousel. On desktop it shows exactly one figure and the thumbnails switch which. */
.gal .swipe{display:block;height:100%}
.gal .swipe > figure{display:none;margin:0;height:100%}
.gal .swipe > figure.on{display:block}
.gal .swipe img{width:100%;height:100%;object-fit:cover}
.gal .count{display:none}
.gal .cap{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 10px;color:#fff;font-size:12.5px;
  background:linear-gradient(to top,rgba(0,0,0,.72),transparent)}
.gal .strip{display:flex;gap:8px;padding:10px;overflow-x:auto;scrollbar-width:thin}
.gal .strip button{flex:0 0 92px;height:68px;border:2px solid transparent;border-radius:9px;
  overflow:hidden;padding:0;cursor:pointer;background:#EEF2F4}
.gal .strip button.on{border-color:var(--teal)}
.gal .strip img{width:100%;height:100%;object-fit:cover}

.detail-head{margin:20px 0 4px}
.detail-head h1{font-size:clamp(22px,3.1vw,31px);line-height:1.2}
.detail-head .where{color:var(--soft);font-size:14px;font-weight:600;margin-top:7px}
.detail-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:14px 0 18px}
.detail-price b{font-size:clamp(26px,4vw,36px);font-weight:800;color:var(--teal);line-height:1}
.detail-price .exact{font-size:14px;font-weight:700;color:var(--soft)}
.detail-price .neg{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:var(--cream);color:#8A5A00;border-radius:999px;padding:5px 11px}

.keyfacts{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:24px}
.kf{background:#fff;border:1px solid var(--line);border-radius:11px;padding:13px;text-align:center}
.kf .ic{font-size:19px;display:block;margin-bottom:5px}
.kf b{display:block;font-size:15px;font-weight:800}
.kf small{display:block;color:var(--soft);font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;margin-top:3px}

.detail-block{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:18px}
.detail-block > h2{font-size:18px;margin-bottom:14px}
.spectable{width:100%;border-collapse:collapse;font-size:14.5px}
.spectable tr{border-bottom:1px solid var(--line)}
.spectable tr:last-child{border-bottom:none}
.spectable th{text-align:left;font-weight:600;color:var(--soft);padding:10px 0;width:46%}
.spectable td{text-align:right;font-weight:700;padding:10px 0}
.featgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.featgrid span{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;gap:7px;align-items:center}
.featgrid span::before{content:"✓";color:var(--teal);font-weight:800}
.detail-desc{font-size:15px;line-height:1.75;color:#28333D;white-space:pre-line}

/* the sidebar: seller, enquiry, and the link into the rest of the site */
.sideblock{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px}
.sideblock h3{font-size:16px;margin-bottom:13px}
.seller{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.seller .av{width:46px;height:46px;border-radius:50%;background:var(--lav);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;flex:none}
.seller b{display:block;font-size:15.5px}
.seller small{color:var(--soft);font-size:12.5px;font-weight:700}
.phonebtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;border:none;
  background:var(--teal);color:#fff;font:inherit;font-weight:800;font-size:15.5px;border-radius:11px;
  padding:14px;cursor:pointer;letter-spacing:.01em}
.phonebtn:hover{background:var(--teal-dk)}
.phonebtn.wa{background:#25D366;margin-top:9px}
.phonebtn.wa:hover{background:#1EBE5A}
.phonenote{font-size:12px;color:var(--soft);text-align:center;margin-top:10px;line-height:1.5}

.inqform{display:flex;flex-direction:column;gap:9px}
.inqform input,.inqform textarea{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;font:inherit;font-size:14.5px;outline:none;color:var(--ink);background:#fff}
.inqform textarea{min-height:88px;resize:vertical}
.inqform input:focus,.inqform textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,124,102,.13)}
.inqform button{border:none;background:var(--charcoal);color:#fff;font:inherit;font-weight:800;
  border-radius:11px;padding:13px;cursor:pointer}
.inqform button:hover{background:#000}

.fuelcard{background:linear-gradient(140deg,#0B5D4E,#12937A);color:#fff;border-radius:var(--r);padding:20px}
.fuelcard h3{font-size:16px;margin-bottom:6px}
.fuelcard p{font-size:13.5px;color:rgba(255,255,255,.86);margin:0 0 14px;line-height:1.55}
.fuelcard .fig{display:flex;gap:18px;margin-bottom:14px}
.fuelcard .fig b{display:block;font-size:22px;line-height:1.1}
.fuelcard .fig small{font-size:11.5px;color:rgba(255,255,255,.8);font-weight:700}
.fuelcard a.go{display:block;text-align:center;background:#fff;color:var(--teal);font-weight:800;
  border-radius:10px;padding:11px;font-size:14.5px}

.safety{background:var(--cream);border:1px solid #F3E2C0;border-radius:var(--r);padding:18px 20px}
.safety h3{font-size:14.5px;margin-bottom:9px;color:#7A5200}
.safety ul{margin:0;padding-left:18px;color:#6B4B10;font-size:13px;line-height:1.75;font-weight:600}

/* ---------------------------------------------------------------- post an ad */
.postwrap{max-width:860px;margin:0 auto;padding-top:28px;padding-bottom:60px}
.postwrap > h1{font-size:clamp(23px,3.2vw,32px);margin-bottom:8px}
.postwrap > .lede{color:var(--soft);font-size:15.5px;margin-bottom:24px;max-width:62ch}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;margin-bottom:18px}
.formcard > h2{font-size:17px;margin-bottom:4px}
.formcard > .hint{color:var(--soft);font-size:13.5px;margin:0 0 18px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fgrid.three{grid-template-columns:1fr 1fr 1fr}
.fld{display:flex;flex-direction:column;gap:5px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font-size:12.5px;font-weight:800;color:var(--ink)}
.fld label .req{color:var(--coral)}
.fld input,.fld select,.fld textarea{width:100%;border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;font:inherit;font-size:14.5px;outline:none;background:#fff;color:var(--ink)}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--teal);
  box-shadow:0 0 0 3px rgba(14,124,102,.13)}
.fld .note{font-size:12px;color:var(--soft)}
.chkline{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:var(--ink)}
.errbox{background:#FDECEA;border:1px solid #F5C6C0;color:#9B2C20;border-radius:11px;padding:14px 16px;
  margin-bottom:18px;font-size:14px;font-weight:600}
.errbox ul{margin:6px 0 0;padding-left:18px}
.okbox{background:#E8F6F1;border:1px solid #BFE3D7;color:#0A5F4E;border-radius:var(--r);padding:28px;
  text-align:center}
.okbox b{display:block;font-size:20px;margin-bottom:8px}
.okbox .ref{display:inline-block;background:#fff;border:1px dashed var(--teal);border-radius:9px;
  padding:7px 14px;font-weight:800;letter-spacing:.06em;margin:10px 0}

/* ---------------------------------------------------------------- sample-data notice */
.samplenote{background:#EAF3F8;border:1px solid #C6DEEC;color:#1C4E6B;border-radius:12px;
  padding:13px 17px;font-size:13.5px;font-weight:600;margin-bottom:18px;line-height:1.6}
.samplenote b{font-weight:800}

/* ---------------------------------------------------------------- trust band + footer tweaks */
.trustband{background:var(--lav);border-top:1px solid var(--line)}
.site-foot .disc{font-size:12.3px;color:rgba(255,255,255,.55);line-height:1.6;margin-top:10px}
.site-foot .cm-word b{color:var(--yellow)}

/* ---------------------------------------------------------------- responsive */
@media(max-width:1100px){
  .sp-grid{grid-template-columns:repeat(3,1fr)}
  .carlist,.carlist.rail{grid-template-columns:repeat(3,1fr)}
  .tilegrid,.bandgrid{grid-template-columns:repeat(4,1fr)}
  .crossband{grid-template-columns:repeat(2,1fr)}
  .detail{grid-template-columns:1fr}
  .srch{grid-template-columns:1fr}
  .filters{position:static}
}
@media(max-width:860px){
  .sell-pill{padding:9px 14px;font-size:13px}
  .uc-hero{padding:112px 0 30px}
  .keyfacts{grid-template-columns:repeat(2,1fr)}
  .featgrid{grid-template-columns:repeat(2,1fr)}
  .fgrid,.fgrid.three{grid-template-columns:1fr}
  .carlist.rows .carcard{flex-direction:column}
  .carlist.rows .carcard .ph{width:100%}
}
@media(max-width:680px){
  .sp-grid{grid-template-columns:1fr 1fr}
  .sp-f.go{grid-column:1/-1}
  .carlist,.carlist.rail{grid-template-columns:repeat(2,1fr)}
  .tilegrid,.bandgrid{grid-template-columns:repeat(2,1fr)}
  .carcard .price{font-size:17px}
  .carcard h3{font-size:13.5px}
  .sellband{padding:26px 22px}
  .detail-block,.sideblock{padding:18px}
  .uc-sec{padding:34px 0}
  .hero-stats{gap:20px}
  .hero-stats b{font-size:21px}
}
@media(max-width:420px){
  /* Two cards abreast, not one. One card per row shows a lovely big photograph and about
     one and a half cars per screen, which is a miserable way to scan a classifieds list.
     Two-up shows four to six. Anyone who wants the big photograph has the list view. */
  .carlist,.carlist.rail{grid-template-columns:repeat(2,1fr);gap:12px}
  .carcard .bd{padding:10px 11px 11px;gap:5px}
  .carcard .price{font-size:15.5px}
  .carcard .price small{font-size:10.5px}
  .carcard h3{font-size:12.8px;min-height:2.6em}
  .carcard .specs i{font-size:10.5px;padding:3px 6px}
  .carcard .foot{font-size:10.5px;padding-top:7px}
  .flag{font-size:9.5px;padding:3px 7px}
  .sp-grid{grid-template-columns:1fr}
}

/* ============================================================================
   MOBILE
   Written after auditing every page at 375px. Three real bugs came out of that
   audit and are fixed here rather than papered over:

   1. OVERFLOW. Every grid item defaults to min-width:auto, so the gallery's
      thumbnail strip (5 x 92px = 512px, scrollable) forced the ad page's "1fr"
      column to 513px and the whole page rendered wider than the phone. A grid
      child containing anything scrollable needs min-width:0 — that is the real
      fix, not a narrower strip.
   2. FILTERS BEFORE RESULTS. The search sidebar stacked above the list, so a
      phone user scrolled past ten filter groups before seeing a single car.
      It is now a drawer opened from a sticky toolbar.
   3. NO WAY TO CALL. The contact buttons sat at the bottom of a very long page.
      On a classifieds site, on a phone, ringing the seller is the whole point;
      it now rides at the bottom of the screen.
   ========================================================================== */

/* ---- 1. nothing may ever exceed the viewport ---- */
.detail > *, .srch > *, .carlist > *, .crossband > *, .keyfacts > *,
.featgrid > *, .fgrid > *, .tilegrid > *, .bandgrid > *, .sp-grid > *{min-width:0}
.gal, .gal .strip, .gal .big{min-width:0}
.spectable{table-layout:fixed}
.spectable th, .spectable td{overflow-wrap:anywhere}
.detail-desc, .detail-head h1, .carcard h3{overflow-wrap:break-word}

/* ---- 2. the search page on a phone ---- */
/* Toolbar and drawer exist only once JS has run: without it the filter panel stays
   stacked and perfectly usable, exactly as before. Progressive enhancement, because
   a filter form that needs JavaScript to appear is one that sometimes does not. */
.srch-mobbar{display:none}
.filters-scrim{display:none}

@media(max-width:1000px){
  /* sticks BELOW the sticky header; --hdr is measured and published by cars.js */
  html.js .srch-mobbar{
    display:flex;gap:8px;align-items:center;position:sticky;top:var(--hdr,60px);z-index:40;
    margin:0 0 14px;padding:10px 0;background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line)}
  html.js .srch-mobbar .fbtn{
    display:inline-flex;align-items:center;gap:8px;border:1px solid var(--teal);
    background:var(--teal);color:#fff;font:inherit;font-weight:800;font-size:15px;
    padding:12px 18px;border-radius:11px;cursor:pointer;min-height:46px}
  html.js .srch-mobbar .fbtn .n{
    background:var(--yellow);color:#241803;border-radius:999px;padding:1px 8px;font-size:12px}
  html.js .srch-mobbar select{
    flex:1;min-width:0;border:1px solid var(--line);border-radius:11px;padding:12px;
    font:inherit;font-size:16px;background:#fff;color:var(--ink);min-height:46px}

  html.js .filters{
    position:fixed;inset:0;z-index:120;margin:0;border:none;border-radius:0;
    max-width:none;width:100%;height:100%;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:0 20px 104px;background:#fff;
    transform:translateX(100%);transition:transform .22s ease;visibility:hidden}
  html.js body.filters-open .filters{transform:none;visibility:visible}
  html.js body.filters-open{overflow:hidden}

  html.js .filters .fhead{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:sticky;top:0;z-index:2;margin:0 -20px 4px;padding:14px 20px;
    background:#fff;border-bottom:1px solid var(--line)}
  html.js .filters .fhead b{font-size:18px;font-weight:800}
  html.js .filters .fhead .x{
    border:none;background:var(--lav);color:var(--ink);font:inherit;font-size:20px;
    line-height:1;width:44px;height:44px;border-radius:12px;cursor:pointer}

  html.js .filters .ffoot{
    position:fixed;left:0;right:0;bottom:0;z-index:3;display:flex;gap:10px;
    padding:12px 20px calc(12px + env(safe-area-inset-bottom));
    background:#fff;border-top:1px solid var(--line);
    box-shadow:0 -10px 28px -20px rgba(16,33,43,.5)}
  html.js .filters .ffoot .clr{
    flex:0 0 auto;border:1px solid var(--line);background:#fff;color:var(--ink);
    font:inherit;font-weight:700;font-size:15px;padding:13px 18px;border-radius:12px;
    min-height:50px;display:inline-flex;align-items:center}
  html.js .filters .ffoot .go{
    flex:1;border:none;background:var(--teal);color:#fff;font:inherit;font-weight:800;
    font-size:16px;border-radius:12px;min-height:50px;cursor:pointer}
  html.js .filters .fapply, html.js .filters .fclear{display:none}

  html.js .filters-scrim{
    display:block;position:fixed;inset:0;z-index:110;background:rgba(10,20,26,.45);
    opacity:0;pointer-events:none;transition:opacity .22s}
  html.js body.filters-open .filters-scrim{opacity:1;pointer-events:auto}

  .fgroup{padding:16px 0}
  .fgroup select,.fgroup input{font-size:16px;padding:13px 12px;min-height:50px}
  .fchk{padding:10px 15px;font-size:14.5px;min-height:42px}
  .srch{padding-top:14px}
}

/* ---- 3. the ad page on a phone ---- */
.detail-callbar{display:none}
@media(max-width:1000px){
  .detail-callbar{
    display:flex;gap:9px;position:fixed;left:0;right:0;bottom:0;z-index:90;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);box-shadow:0 -10px 28px -20px rgba(16,33,43,.55)}
  .detail-callbar .price{
    flex:0 0 auto;display:flex;flex-direction:column;justify-content:center;line-height:1.15}
  .detail-callbar .price b{font-size:16px;font-weight:800;white-space:nowrap}
  .detail-callbar .price small{font-size:11px;color:var(--soft);font-weight:700}
  .detail-callbar a,.detail-callbar button{
    flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;
    border:none;font:inherit;font-weight:800;font-size:15px;border-radius:12px;
    min-height:50px;cursor:pointer;padding:0 10px}
  .detail-callbar .call{background:var(--teal);color:#fff}
  .detail-callbar .wa{background:#25D366;color:#fff}
  .detail-callbar .msg{background:var(--charcoal);color:#fff}
  .detail-callbar .off{background:#E7ECEF;color:var(--soft);cursor:not-allowed}
  body.has-callbar main{padding-bottom:84px}

  /* gallery: swipe the big image, not only the thumbnails */
  .gal .big{aspect-ratio:4/3}
  .gal .swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;height:100%}
  .gal .swipe::-webkit-scrollbar{display:none}
  .gal .swipe > figure{flex:0 0 100%;scroll-snap-align:center;margin:0;height:100%;position:relative}
  .gal .swipe img{width:100%;height:100%;object-fit:cover}
  .gal .count{display:inline-block;position:absolute;right:10px;top:10px;z-index:2;background:rgba(18,26,34,.8);
    color:#fff;font-size:12px;font-weight:700;border-radius:999px;padding:4px 11px}
  .gal .strip{padding:8px 10px}
  .gal .strip button{flex:0 0 72px;height:54px}

  .detail{padding-bottom:20px}
  .crumbs{font-size:12px}
  .detail-price b{font-size:28px}
}

/* ---- 4. forms: 16px on a phone, or iOS zooms the whole page on focus ---- */
@media(max-width:760px){
  .fld input,.fld select,.fld textarea,
  .inqform input,.inqform textarea,
  .sp-f select,.sp-f input,
  .hsearch input,.mm-search input,
  .srch-tools select{font-size:16px}
  .fld input,.fld select,.inqform input{min-height:50px}
  .sp-f select,.sp-f input{min-height:50px}
  .sp-go{min-height:52px;font-size:16px}
  .btn{min-height:48px}
  .formcard{padding:18px 16px}
  .postwrap{padding-bottom:40px}
  .formcard .fchecks .fchk{font-size:13.5px;padding:9px 13px;min-height:40px}
}

/* ---- 5. the share button must never sit on top of a form field ---- */
@media(max-width:1000px){
  .share-fab{top:auto;right:12px;bottom:78px;transform:none;flex-direction:row;
    width:auto;height:auto;border-radius:999px;padding:9px 13px;writing-mode:horizontal-tb}
  .share-fab .share-txt{display:none}
  body.has-callbar .share-fab{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* ---- 6. odds and ends the audit turned up ---- */
@media(max-width:680px){
  .sp-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 0 14px;padding:0}
  .sp-tabs::-webkit-scrollbar{display:none}
  .sp-tab{flex:0 0 auto}
  .searchpanel{padding:14px}
  .hero-stats{gap:16px 26px}
  .srch-top{gap:10px}
  .srch-top h1{font-size:20px}
  .uc-head{flex-direction:column;align-items:flex-start;gap:6px}
  .uc-head a.more{font-size:13.5px}
  .sellband{flex-direction:column;align-items:flex-start}
  .sellband .acts{width:100%}
  .sellband .acts .btn{flex:1}
  .pager a,.pager span{min-width:44px;min-height:44px;display:inline-flex;
    align-items:center;justify-content:center}
  .seller .av{width:42px;height:42px}
  .trustband .trust{gap:18px}
}

/* The phone toolbar already carries Sort, so the one in the results header is a duplicate
   sitting two centimetres below it. Hide the duplicate and keep the grid/list toggle, which
   the toolbar does not have room for. */
@media(max-width:1000px){
  .srch-tools select{display:none}
  .srch-top{align-items:flex-start}
}

/* A last line of defence against horizontal scroll — and a trap I fell into once already.

   The first attempt was html{overflow-x:hidden;overflow-x:clip}. That BROKE the sticky header.
   base.css sets body{overflow-x:hidden}; while the root is visible, that declaration propagates
   to the viewport and body itself computes to visible, so the page scrolls on the viewport and
   position:sticky works. Put any overflow on the ROOT and the propagation comes from there
   instead, so body keeps its own hidden, overflow-y resolves to auto, and body becomes a scroll
   container. The page still scrolls on the viewport, so the header was sticking to a box that
   never moves - it simply scrolled away.

   So body must be cleared too, and with clip rather than hidden: clip establishes a clipping
   context WITHOUT a scroll container, which is exactly what is wanted here.

   There is deliberately no hidden fallback. A browser without overflow:clip (Safari before 16)
   drops both declarations, which leaves base.css body{overflow-x:hidden} propagating to the
   viewport - the behaviour that shipped before today, and one where the header sticks. A
   hidden fallback on the root would hand those browsers the broken state instead. */
html{overflow-x:clip}
body{overflow-x:clip;overflow-y:visible}

/* The "Popular:" chips under the hero search were 33px tall — under the 44px that a thumb
   reliably hits. They are buttons in everything but name, so they get button height. */
@media(max-width:760px){
  .sp-quick a{min-height:40px;display:inline-flex;align-items:center;padding:8px 14px}
  .achip{min-height:38px}
  .achip a{padding:4px 6px;margin:-4px -6px}
  .viewtog a{min-height:44px;display:inline-flex;align-items:center}
}

/* The cross-link band and the trust band both squeeze a sentence into a two-column grid on a
   phone. At 375px that leaves each column about 150px wide, and prose breaks to one word per
   line — "Measured / city and / highway / figures / for the / model..." Below 760px they are a
   single column: a paragraph needs a measure, and two columns of this width is not one. */
@media(max-width:760px){
  .crossband{grid-template-columns:1fr;gap:10px}
  .crossband a{padding:15px 16px;align-items:center}
  .crossband small{font-size:13.2px}
}

/* Homepage rails: one car per row on a phone.
   The search page stays two-up — there you are scanning a list and want to see four to six at
   once — but the homepage rails are a showcase, and two 150px columns made the titles wrap
   mid-name ("2013 Toyota Prius / (Hybrid) 1.8 S") and squeezed the city against the date.
   body.is-home is the only thing that distinguishes the two, and it is already on the page.
   The declarations below also undo the compact type the two-up rules apply, because at full
   width there is no reason for small text. */
@media(max-width:680px){
  body.is-home .carlist,
  body.is-home .carlist.rail{grid-template-columns:1fr;gap:14px}
  body.is-home .carcard .bd{padding:14px 16px 15px;gap:7px}
  body.is-home .carcard .price{font-size:20px}
  body.is-home .carcard .price small{font-size:12px}
  body.is-home .carcard h3{font-size:15.5px;min-height:0;-webkit-line-clamp:2}
  body.is-home .carcard .specs i{font-size:12px;padding:4px 9px}
  body.is-home .carcard .foot{font-size:12.5px;padding-top:10px}
  body.is-home .carcard .flag{font-size:10.5px;padding:4px 9px}
  body.is-home .carcard .ph{aspect-ratio:16/10}
}