/* ==========================================================================
   CamperBay.nl — results (LRP) restyle: pine/amber palette + modern listing
   cards with grid & list layouts + view toggle. Loaded only on cat/ pages.
   Filters are NOT restructured — only recoloured via the token override below.
   ========================================================================== */

/* palette override (recolours the shared header + filters on cat pages) */
:root{
  --mp-primary:#1F3D30; --mp-primary-hover:#2E5A45; --mp-primary-050:#e9efe9;
  --cp-ink:#15211C; --cp-pine:#1F3D30; --cp-pine2:#2E5A45; --cp-fern:#4E8163;
  --cp-amber:#E08A2C; --cp-amber-soft:#F2C078; --cp-paper:#EFF1ED; --cp-card:#fff;
  --cp-mist:#E2E7E1; --cp-line:#CBD4CC; --cp-muted:#5C6A62; --cp-radius:13px;
  --cp-card-2:#F6F8F4; --fit-bg:#e4efe8; --fit-fg:#1c6b3f; --fit-line:#c7e0d1;
}
body{background:var(--cp-paper)}
.mp-btn-post{background:var(--cp-amber)!important;color:#3a2408!important}
.mp-listing__fav.is-on svg,.mp-listing__fav svg{stroke:var(--cp-pine)}

/* SEO intro lead under the category <h1> (crawlable context; honest, no fake counts) */
.mp-lead{font:400 14px/1.55 Inter,system-ui,-apple-system,sans-serif;color:var(--cp-muted);margin:0 0 18px;max-width:72ch;}
/* internal-link strip to per-type SEO landing pages */
.cp-landlinks{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 20px;}
.cp-landlinks .cll-t{font:600 12.5px/1 Inter,system-ui,sans-serif;color:var(--cp-muted);margin-right:2px;text-transform:uppercase;letter-spacing:.03em;}
.cp-landlinks a{display:inline-flex;padding:7px 13px;border:1px solid var(--cp-line,#CBD4CC);border-radius:999px;background:#fff;color:var(--cp-pine,#1F3D30);font:600 13px/1 Inter,system-ui,sans-serif;text-decoration:none;transition:border-color .15s,background .15s;}
.cp-landlinks a:hover{border-color:var(--cp-fern,#4E8163);background:#f2f6f2;}

/* ---- results toolbar ---- */
.lr-toolbar{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.lr-count{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--cp-ink)}
.lr-count b{color:var(--cp-pine)}
.lr-count span{font-weight:400;font-size:14px;color:var(--cp-muted);margin-left:8px}
.lr-spacer{margin-left:auto}
.lr-sort{height:42px;border:1px solid var(--cp-line);border-radius:10px;background:var(--cp-card);padding:0 36px 0 12px;font:inherit;font-size:14px;font-weight:500;color:var(--cp-ink);cursor:pointer}
.lr-sort:focus{outline:0;border-color:var(--cp-fern)}
.lr-viewtoggle{display:flex;background:var(--cp-card);border:1px solid var(--cp-line);border-radius:10px;padding:3px;gap:3px}
.lr-vt{width:40px;height:36px;border:0;background:none;border-radius:7px;cursor:pointer;display:grid;place-items:center;color:var(--cp-muted);transition:all .15s}
.lr-vt svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
.lr-vt.active{background:var(--cp-pine);color:#fff}
.lr-savesearch{display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 14px;border:1px solid var(--cp-line);border-radius:10px;background:var(--cp-card);color:var(--cp-pine);font:inherit;font-weight:600;font-size:13.5px;cursor:pointer}
.lr-savesearch svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none}
.lr-savesearch:hover{border-color:var(--cp-fern)}
.lr-filter-toggle{display:none}

/* ---- active filter chips ---- */
.lr-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.lr-chip{display:inline-flex;align-items:center;gap:7px;background:var(--cp-mist);border-radius:8px;padding:6px 8px 6px 12px;font-size:13px;font-weight:500;color:var(--cp-ink)}
.lr-chip a{display:grid;place-items:center;padding:2px;border-radius:4px;color:var(--cp-muted)}
.lr-chip a:hover{color:var(--cp-ink);background:rgba(0,0,0,.06)}
.lr-chip a svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.2;fill:none}
.lr-chip.clr{background:none;color:var(--cp-fern);font-weight:600;padding-left:4px}

/* ============ listing cards: shared card, two layouts ============ */
.lr-results{display:grid;gap:14px}
.lr-results.grid{grid-template-columns:repeat(3,1fr)}
.lr-results.list{grid-template-columns:1fr}
.lcard{background:var(--cp-card);border:1px solid var(--cp-line);border-radius:var(--cp-radius);overflow:hidden;transition:transform .16s cubic-bezier(.22,.61,.36,1),box-shadow .2s,border-color .2s;display:flex;color:inherit}
.lcard:hover{border-color:var(--cp-fern);box-shadow:0 16px 34px -24px rgba(21,33,28,.5)}
.lthumb{position:relative;background:linear-gradient(135deg,#d3dbd4,#e9ede8);flex-shrink:0;overflow:hidden}
.lthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lthumb .fav{position:absolute;top:9px;right:9px;width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.9);display:grid;place-items:center;cursor:pointer;border:0;z-index:2}
.lthumb .fav svg{width:16px;height:16px;stroke:var(--cp-pine);stroke-width:1.8;fill:none}
.lthumb .fav.is-on svg{fill:var(--cp-amber);stroke:var(--cp-amber)}
.lcond{position:absolute;top:9px;left:9px;font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:6px;z-index:2}
.lcond.new{background:var(--cp-pine);color:#fff}
.lcond.used{background:var(--cp-amber-soft);color:#5b3708}
.lcond.dmg{background:#b23b2e;color:#fff}
.lbody{display:flex;flex-direction:column;min-width:0;flex:1}
.lmain{padding:15px 16px;flex:1;min-width:0}
.fitflag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 9px;border-radius:6px;margin-bottom:10px}
.fitflag svg{width:13px;height:13px;stroke-width:2;fill:none}
.fitflag.confirmed{background:#e4efe8;color:#1c6b3f}.fitflag.confirmed svg{stroke:#1c6b3f}
.fitflag.universal{background:#eef0ee;color:var(--cp-muted)}.fitflag.universal svg{stroke:var(--cp-muted)}
.fitflag.check{background:#fbefd9;color:#8a5a12}.fitflag.check svg{stroke:#8a5a12}
.fitflag.seller{background:#ddeaf6;color:#2b5d8a}.fitflag.seller svg{stroke:#2b5d8a}   /* seller-declared fitment (audit H) */
.ltitle{font-family:"Archivo",system-ui,sans-serif;font-weight:600;font-size:15.5px;line-height:1.3;letter-spacing:-.01em;color:var(--cp-ink);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lpn{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;color:var(--cp-muted);margin-top:5px}
.lspecs{display:none;gap:14px;flex-wrap:wrap;margin-top:10px}
.lspecs span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--cp-muted)}
.lspecs svg{width:14px;height:14px;stroke:var(--cp-fern);stroke-width:1.7;fill:none}
/* Variant 6 datasheet — label->value rows under the title (visible in grid AND list) */
.lkv{margin-top:10px;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:12.5px;min-width:0}
.lkv dt{color:var(--cp-muted);white-space:nowrap}
.lkv dd{margin:0;color:var(--cp-ink);font-weight:500;text-align:right;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lseller{display:flex;align-items:center;gap:8px;margin-top:11px;font-size:12.5px;color:var(--cp-muted)}
.lseller .av{width:20px;height:20px;border-radius:50%;background:var(--cp-mist);display:grid;place-items:center;font-size:9.5px;font-weight:700;color:var(--cp-pine);flex-shrink:0}
.lseller .loc{display:flex;align-items:center;gap:4px}
.lseller .loc svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.8;fill:none}
.lseller .type{background:var(--cp-mist);border-radius:5px;padding:1px 7px;font-weight:600;font-size:11px;color:var(--cp-pine)}
.lfoot{padding:13px 16px;border-top:1px solid var(--cp-mist);display:flex;align-items:center;justify-content:space-between;gap:12px}
.lprice{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;font-size:19px;color:var(--cp-pine)}
.lbtn{height:40px;padding:0 16px;border-radius:9px;background:var(--cp-pine);color:#fff;font-weight:600;font-size:13.5px;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .2s,transform .15s}
.lbtn:hover{background:var(--cp-pine2);transform:translateY(-1px);color:#fff}
.lbtn svg{width:15px;height:15px;stroke:#fff;stroke-width:2;fill:none}

/* GRID mode: vertical card */
.lr-results.grid .lcard{flex-direction:column}
.lr-results.grid .lthumb{height:160px;width:100%}
/* LIST mode: horizontal row */
.lr-results.list .lcard{flex-direction:row}
.lr-results.list .lthumb{width:210px;min-height:158px}
.lr-results.list .lbody{flex-direction:row;align-items:stretch}
.lr-results.list .lmain{flex:1;padding:16px 20px;display:flex;flex-direction:column}
.lr-results.list .lspecs{display:flex}
.lr-results.list .lfoot{flex-direction:column;align-items:flex-end;justify-content:center;border-top:0;border-left:1px solid var(--cp-mist);min-width:180px;gap:12px;padding:16px 20px}
.lr-results.list .lbtn{width:100%;justify-content:center;height:44px}

.lr-empty{display:flex;flex-direction:column;align-items:center;gap:12px;background:var(--cp-card);border:1px solid var(--cp-line);border-radius:var(--cp-radius);padding:48px 40px;text-align:center;color:var(--cp-muted)}
.lr-empty svg{width:44px;height:44px;stroke:var(--cp-fern);stroke-width:1.6;fill:none}
.lr-empty .lr-empty-t{font-family:"Archivo",system-ui,sans-serif;font-weight:600;color:var(--cp-ink);font-size:15.5px}
.lr-empty .lr-empty-h{font-size:13.5px;color:var(--cp-muted);max-width:38ch;line-height:1.5}
.lr-empty .lr-empty-cta{margin-top:6px;height:42px;display:inline-flex;align-items:center;padding:0 18px;border-radius:10px;background:var(--cp-pine);color:#fff;font-weight:600;font-size:14px}
.lr-empty .lr-empty-cta:hover{background:var(--cp-pine2);color:#fff}

/* ---- EMPTY CATEGORY (owner bug report, DAY 31) ------------------------------------------
   228 of 383 categories hold zero adverts. They used to render the full 284px filter panel
   (measured 2062px tall, 37 chips) beside a 290px results column: 1772px of white space on a
   page with nothing to filter. ads_list.php now drops the panel, the rail advert and the three
   toolbar controls that would act on nothing, and marks the grid solo so the empty state owns
   the width. ⚠ Only when NO filter is set - a visitor who filtered themselves down to zero keeps
   the panel, or the filter could not be undone. */
.mp-lrp.mp-lrp--solo{grid-template-columns:minmax(0,1fr)}
/* ⚠ TWO classes on purpose. Written as a single `.mp-lrp--solo` it lost to
   `.mp-lrp{grid-template-columns:284px 1fr}` at the BOTTOM of this file — same specificity, later
   rule wins — and the empty state rendered 284px wide inside a 1170px page. Doubling the class
   makes it independent of where in the file either rule sits. */
/* the neighbours that DO have adverts, with their real counts */
.lr-empty-sib{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:4px}
.lr-empty .lr-sib{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--cp-line);border-radius:10px;background:var(--cp-card);color:var(--cp-ink);font-size:13.5px;font-weight:500}
.lr-empty .lr-sib:hover{border-color:var(--cp-fern);color:var(--cp-pine)}
.lr-empty .lr-sib b{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;font-weight:600;color:var(--cp-muted);background:var(--cp-mist);border-radius:6px;padding:2px 6px}
.lr-empty .lr-sib:hover b{color:var(--cp-pine)}

@media(max-width:1080px){.lr-results.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .lr-results.grid{grid-template-columns:1fr 1fr}
  .lr-results.list .lcard{flex-direction:column}
  .lr-results.list .lthumb{width:100%;height:150px}
  .lr-results.list .lbody{flex-direction:column}
  .lr-results.list .lfoot{flex-direction:row;align-items:center;justify-content:space-between;border-left:0;border-top:1px solid var(--cp-mist);min-width:0}
  .lr-results.list .lbtn{width:auto}
  .lr-results.list .lspecs{display:none}
}
@media(max-width:560px){.lr-results.grid{grid-template-columns:1fr}}
/* MOBILE FIX: the DAY-18 filter reskin set .mp-lrp{284px 1fr} without a mobile query, which overrode
   mp.css's mobile collapse -> the 284px sidebar squeezed results to ~43px. Restore the single-column
   layout + slide-up filter sheet at the same 768px breakpoint mp.css uses for the sheet. */
@media(max-width:768px){
  .lr-filter-toggle{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid var(--cp-line);border-radius:10px;background:var(--cp-card);font:inherit;font-weight:600;font-size:14px;color:var(--cp-pine);cursor:pointer}
  .lr-filter-toggle svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.9;fill:none}
}

/* keyboard focus ring (mouse focus stays clean; see theme.css) */
.lr-sort:focus-visible{outline:3px solid #E08A2C;outline-offset:2px}

/* ---- garage results: left filter sidebar (facets from the fitting parts) ---- */
.cp-vip .gr-wrap{display:grid;grid-template-columns:232px 1fr;gap:22px;align-items:start;margin-top:18px}
/* ⚠ `position` is DESKTOP-ONLY here. The panel also carries `mp-filters`, and
   mp.css:549 makes that `position:fixed` to become the mobile sheet — but this
   file loads after mp.css, so an unscoped `position:sticky` silently won and the
   sheet stayed in the page flow (measured: first result back down at 1203px). */
.gr-side{background:#fff;border:1px solid #CBD4CC;border-radius:14px;padding:16px}
@media(min-width:769px){ .gr-side{position:sticky;top:80px} }
.gr-fg{border-top:1px solid #E2E7E1;padding:12px 0 10px}
.gr-fg:first-of-type{border-top:0;padding-top:2px}
.gr-fg h4{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#5C6A62;margin:0 0 7px}
.gr-opt{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 9px;border-radius:8px;font-size:13.5px;color:#15211C;text-decoration:none;margin:1px 0;line-height:1.25}
.gr-opt:hover{background:#EFF1ED}
.gr-opt.is-on{background:#1F3D30;color:#fff}
.gr-opt .gr-c{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:#5C6A62;flex-shrink:0}
.gr-opt.is-on .gr-c{color:#bcd2c4}
.gr-price{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* the two boxes are now wrapped in the shared .rng so cp-range.js can find them;
   the slider, scale and summary each take a full row under the pair */
.gr-price .rng{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.gr-price .rng .rf{flex:0 1 auto;min-width:0}
.gr-price .cp-rs,
.gr-price .rs-scale,
.gr-price .rs-sum{flex:1 0 100%}
.gr-price input{width:62px;border:1px solid #CBD4CC;border-radius:8px;padding:6px 8px;font:inherit;font-size:13px;color:#15211C}
.gr-price input:focus-visible{outline:3px solid #E08A2C;outline-offset:1px;border-color:#4E8163}
.gr-price .gr-dash{color:#5C6A62}
.gr-price button{background:#1F3D30;color:#fff;border:0;border-radius:8px;padding:7px 12px;font:inherit;font-weight:600;font-size:13px;cursor:pointer}
.gr-price button:hover{background:#2E5A45}
/* "Parts that fit N" heading — was inheriting the global h2 (30px Inter), which is oversized and
   off-brand. Match the LRP result heading (.lr-count): Archivo 20px, pine accent on the count. */
.gr-main .sh-h{margin:0 0 16px;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:20px;letter-spacing:-.01em;color:var(--cp-ink)}
.gr-main .sh-h span{color:var(--cp-pine)}
/* 769–900: one column, and the sidebar stops sticking. Below 769 it is the
   mp-filters sheet instead, so `position` must NOT be touched there. */
@media(max-width:900px){.cp-vip .gr-wrap{grid-template-columns:1fr}}
@media(min-width:769px) and (max-width:900px){.gr-side{position:static}}

/* ===== featured / promoted listing (variant C accent card) — pinned + badged in the results grid ===== */
.lcard--promo{position:relative;border-color:var(--cp-amber-soft);box-shadow:0 14px 34px -24px rgba(224,138,44,.55)}
.lcard--promo::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--cp-amber),var(--cp-amber-soft));z-index:3}
.lcard--promo:hover{border-color:var(--cp-amber)}

/* ===== modern filter sidebar (custom dropdowns / ranges / chips — matches camperplaats-filters mockup) =====
   Scoped to .mp-filters so it only restyles the LRP filter aside; the positional-filter submit logic is
   unchanged (a hidden <input name="N"> carries the picked did, exactly like the old <select>). */
@media(min-width:769px){ .mp-filters{overflow:visible} }   /* let the dropdown menu overlay past the card (mobile sheet keeps its own overflow) */
/* container + grid to the accent mockup (284 sidebar, radius 16, no shadow) */
.mp-lrp{grid-template-columns:284px 1fr;gap:24px}
@media(max-width:768px){ .mp-lrp{grid-template-columns:1fr} }   /* mobile: collapse to one column (filters become the slide-up sheet); overrides the 284px sidebar above */
.mp-filters{border-radius:16px;box-shadow:none}
/* header: Filters title + count badge + Clear all */
.mp-filters .f-top{display:flex;align-items:center;gap:10px;padding:18px 20px 15px;border-bottom:0}
.mp-filters .f-top h2{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:17px;letter-spacing:-.01em;color:var(--cp-ink)}
.mp-filters .f-top .cnt{margin-left:auto;display:flex;align-items:center;gap:10px}
.mp-filters .f-top .badge{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;font-size:11px;background:var(--cp-pine);color:#fff;border-radius:20px;min-width:20px;height:20px;padding:0 6px;display:grid;place-items:center}
.mp-filters .f-top .clear{margin-left:0;font-size:12.5px;font-weight:600;color:var(--cp-fern);text-decoration:none;cursor:pointer}
.mp-filters .f-top .clear:hover{color:var(--cp-pine)}
.mp-filters .mp-filterform.f-body{padding:4px 20px 0}
/* accent-line group header: amber tick + uppercase label + rule + "N on" pill */
.mp-filters .grp{margin-bottom:0;padding:16px 0;border-top:1px solid var(--cp-mist)}
.mp-filters .grp:first-child{border-top:0;padding-top:6px}
.mp-filters .head{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.mp-filters .head .tick{width:4px;height:15px;border-radius:3px;background:var(--cp-amber);flex-shrink:0}
/* ⚠⚠ THE LABEL MUST WRAP, OR THE "N on" PILL IS PAINTED OUTSIDE THE PANEL (owner-reported).
   `.head` is a flex row of tick + label + rule + pill. `.rule` is `flex:1 1 0` so it collapses
   first, but a `white-space:nowrap` label has a min-content size equal to its full text and
   therefore CANNOT shrink — so the pill, which is also nowrap, was simply pushed past the 284px
   rail. Measured on /fr/…/vaste-gasdrukregelaars/ at 1280 AND 1440: the head needed 302px in a
   242px row and the pill's right edge landed 39px outside the panel (worst on that page 57px).
   ⚠ It was NOT a truncation: the pill never clipped ITSELF (scrollWidth == clientWidth), it was
   drawn outside the box — the same class of fault as the DAY-42B result-card location.
   ⚠ SCOPE, measured over the whole filter vocabulary at the real typography (the width left for a
   label once the pill is shown is 140/146/146/165px in nl/de/fr/en): 68 of 159 nl labels overflow,
   52 of 159 de, 82 of 161 fr, 38 of 208 en — worst `Couleur de lumière / température de couleur
   (Kelvin)` at 397px, i.e. 251px outside. So this fires on any group a visitor actually uses.
   ⚠ `overflow-wrap:anywhere` is the LAST resort, not the mechanism: with plain wrapping, 7 nl and
   10 de labels still have a single word wider than the rail (`Rohr-/Klemmdurchmesser (mm)` 199px
   in 146). Measured with it: min-content 0 over the limit in all four languages. It only breaks a
   word that cannot fit, so an ordinary label is untouched — the label is never truncated, because
   a clipped filter name reads exactly like a short one and hides WHICH filter it is. */
.mp-filters .head .gt{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--cp-pine);white-space:normal;overflow-wrap:anywhere}
.mp-filters .head .rule{flex:1;height:1px;background:var(--cp-line)}
/* ⚠ `flex:0 0 auto` states the intent: the count must never be squeezed to make room. It is a
   no-op today (nowrap already pins its min-content) and a guard if that ever changes. */
.mp-filters .head .gn{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;color:var(--fit-fg);background:var(--fit-bg);border:1px solid var(--fit-line);border-radius:20px;padding:2px 8px;white-space:nowrap;flex:0 0 auto;display:none}
.mp-filters .head .gn.show{display:inline-block}
/* legacy filter structure (used by the cross-category search sidebar) — keep its prior polish untouched */
.mp-filters .mp-filters__head:not(.f-top){font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:15.5px}
.mp-filters .mp-field:not(.grp)>label{display:block;font-size:12px;font-weight:600;color:var(--cp-ink);margin-bottom:6px}
/* equipment (advanced) — collapsible so the 6 equipment groups don't make the sidebar huge */
.mp-filters .mp-adv{border-top:1px solid var(--cp-mist)}
.mp-filters .mp-adv-toggle{width:100%;display:flex;align-items:center;gap:10px;padding:15px 0;background:none;border:0;cursor:pointer;font-family:inherit}
.mp-filters .mp-adv-toggle .tick{width:4px;height:15px;border-radius:3px;background:var(--cp-amber);flex-shrink:0}
.mp-filters .mp-adv-toggle .mp-adv-t{flex:1;text-align:left;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--cp-pine);white-space:nowrap}
.mp-filters .mp-adv-toggle .gn{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;font-weight:600;color:var(--fit-fg);background:var(--fit-bg);border:1px solid var(--fit-line);border-radius:20px;padding:2px 8px;white-space:nowrap;display:none}
.mp-filters .mp-adv-toggle .gn.show{display:inline-block}
.mp-filters .mp-adv-toggle .chev{width:16px;height:16px;stroke:var(--cp-muted);stroke-width:2;fill:none;transition:transform .2s;flex-shrink:0}
.mp-filters .mp-adv.open .mp-adv-toggle .chev{transform:rotate(180deg)}
.mp-filters .mp-adv-body{display:none}
.mp-filters .mp-adv.open .mp-adv-body{display:block;padding-bottom:2px}
.mp-filters .mp-adv-body .grp:first-child{border-top:0;padding-top:2px}

/* custom dropdown */
.mp-filters .dd{position:relative}
.mp-filters .dd-btn{width:100%;height:44px;border:1px solid var(--cp-line);border-radius:11px;background:var(--cp-paper);padding:0 12px;font-family:inherit;font-size:13.5px;color:var(--cp-muted);cursor:pointer;display:flex;align-items:center;gap:9px;text-align:left;transition:border-color .15s,background .15s}
.mp-filters .dd-btn:hover{border-color:var(--cp-fern)}
.mp-filters .dd-btn .val{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-filters .dd-btn .chev{width:15px;height:15px;stroke:var(--cp-muted);stroke-width:2;fill:none;flex-shrink:0;transition:transform .2s var(--cp-ease,cubic-bezier(.22,.61,.36,1))}
.mp-filters .dd.open .dd-btn{border-color:var(--cp-pine);background:#fff}
.mp-filters .dd.open .dd-btn .chev{transform:rotate(180deg)}
.mp-filters .dd-btn.set{border-color:var(--cp-pine);background:#fff;color:var(--cp-pine);font-weight:600}
.mp-filters .dd-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;background:var(--cp-card);border:1px solid var(--cp-line);border-radius:12px;box-shadow:0 20px 44px -22px rgba(21,33,28,.45);padding:6px;max-height:260px;overflow-y:auto;display:none;scrollbar-width:thin;scrollbar-color:var(--cp-fern) transparent}
/* thin, on-brand scrollbar (~half the native width, pine/amber system) for the filter dropdown menus */
.mp-filters .dd-menu::-webkit-scrollbar{width:7px}
.mp-filters .dd-menu::-webkit-scrollbar-track{background:transparent;margin:6px 0}
.mp-filters .dd-menu::-webkit-scrollbar-thumb{background:var(--cp-fern);border-radius:20px;min-height:36px}
.mp-filters .dd-menu::-webkit-scrollbar-thumb:hover{background:var(--cp-pine)}
.mp-filters .dd.open .dd-menu{display:block;animation:ddpop .16s var(--cp-ease,cubic-bezier(.22,.61,.36,1))}
@keyframes ddpop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.mp-filters .dd-search{display:flex;align-items:center;gap:8px;height:38px;margin:2px 2px 6px;border:1px solid var(--cp-line);border-radius:9px;background:var(--cp-paper);padding:0 11px;color:var(--cp-muted)}
.mp-filters .dd-search svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.9;fill:none}
.mp-filters .dd-search input{border:0;outline:0;background:none;font:inherit;font-size:13px;flex:1;color:var(--cp-ink)}
.mp-filters .dd-opt{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:9px;font-size:13.5px;color:#2c3a33;cursor:pointer;transition:background .12s}
.mp-filters .dd-opt:hover{background:var(--cp-paper)}
.mp-filters .dd-opt.sel{background:#eef4f0;color:var(--cp-pine);font-weight:600}
.mp-filters .dd-opt .tick{width:16px;height:16px;stroke:var(--cp-pine);stroke-width:2.4;fill:none;margin-left:auto;opacity:0;flex-shrink:0}
.mp-filters .dd-opt.sel .tick{opacity:1}
.mp-filters .dd-opt.hide{display:none}
.mp-filters .dd-empty{padding:14px;text-align:center;font-size:12.5px;color:var(--cp-muted);display:none}

/* range inputs (mono values, pine focus) */
.mp-filters .rng{display:flex;align-items:center;gap:8px}
.mp-filters .rng .rf{flex:1;position:relative}
.mp-filters .rng input{width:100%!important;height:44px;border:1px solid var(--cp-line)!important;border-radius:11px!important;background:var(--cp-paper);padding:0 10px!important;font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;font-size:12.5px;color:var(--cp-ink);transition:border-color .15s,background .15s}
.mp-filters .rng input:focus{outline:0;border-color:var(--cp-fern);background:#fff}
.mp-filters .rng input.set{border-color:var(--cp-pine);background:#fff}
.mp-filters .rng .unit{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--cp-muted);pointer-events:none}
.mp-filters .rng .d{color:var(--cp-muted);font-weight:600}
.mp-filters .rng .rf:has(.unit) input{padding-right:30px!important}

/* ---- dual min/max slider under the two boxes (built by cp-range.js) --------
   Two native range inputs stacked on one track: only the thumbs take pointer
   events, and the filled segment is drawn between them from the --a/--b custom
   properties the script sets. Colours are the portal's own — pine fill, mist
   track, the fitment green for the summary — so it reads as part of the filter
   panel rather than as a browser control.
   ⚠ The whole block only exists when the server supplied real bounds; a field
   without them keeps just its two boxes. */
.cp-rs{--a:0%;--b:100%;position:relative;height:34px;margin:12px 0 0;touch-action:none}
.cp-rs .rs-track,
.cp-rs .rs-fill{position:absolute;left:0;right:0;top:14px;height:6px;border-radius:999px}
.cp-rs .rs-track{background:var(--cp-mist);box-shadow:inset 0 0 0 1px rgba(21,33,28,.05)}
.cp-rs .rs-fill{left:var(--a);right:calc(100% - var(--b));background:var(--cp-pine)}
.cp-rs input[type=range]{
  position:absolute;inset:0;width:100%;height:34px;margin:0;padding:0;
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;outline:0;
}
.cp-rs input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent}
.cp-rs input[type=range]::-moz-range-track{height:6px;background:transparent}
.cp-rs input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;pointer-events:auto;cursor:grab;
  width:20px;height:20px;margin-top:-7px;border-radius:50%;
  border:3px solid var(--cp-pine);background:#fff;box-shadow:0 2px 8px rgba(21,33,28,.22);
}
.cp-rs input[type=range]::-moz-range-thumb{
  pointer-events:auto;cursor:grab;
  width:20px;height:20px;border-radius:50%;
  border:3px solid var(--cp-pine);background:#fff;box-shadow:0 2px 8px rgba(21,33,28,.22);
}
.cp-rs input[type=range]:active::-webkit-slider-thumb{cursor:grabbing}
.cp-rs input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px rgba(78,129,99,.28)}
.cp-rs input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px rgba(78,129,99,.28)}

.rs-scale{
  display:flex;justify-content:space-between;gap:8px;margin-top:-2px;
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10.5px;color:var(--cp-muted);
}
.rs-sum{
  margin-top:8px;padding:7px 10px;border-radius:9px;text-align:center;
  background:var(--fit-bg,#e4efe8);color:var(--cp-pine);
  font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11.5px;font-weight:600;
}
/* The summary keeps its filled pill at all times — the mockup shows it that
   way, and a box that only appears once you touch the slider is one the buyer
   never learns to look for. */
/* multi-select chips (native checkbox styled as a toggle pill with a check dot; :has drives active) */
.mp-filters .chiprow{display:flex;flex-wrap:wrap;gap:8px}
.mp-filters .chip{position:relative;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--cp-line);background:var(--cp-card);border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--cp-ink);cursor:pointer;user-select:none;transition:background .14s,border-color .14s,color .14s}
.mp-filters .chip:hover{border-color:var(--cp-fern)}
.mp-filters .chip input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none}
.mp-filters .chip .dot{width:14px;height:14px;border-radius:5px;border:1.5px solid var(--cp-line);display:grid;place-items:center;flex-shrink:0;transition:.14s}
.mp-filters .chip .dot svg{width:9px;height:9px;stroke:#fff;stroke-width:3;fill:none;opacity:0}
.mp-filters .chip:has(input:checked){background:var(--fit-bg);border-color:var(--fit-fg);color:var(--fit-fg)}
.mp-filters .chip:has(input:checked) .dot{background:var(--fit-fg);border-color:var(--fit-fg)}
.mp-filters .chip:has(input:checked) .dot svg{opacity:1}
.mp-filters .chip:has(input:focus-visible){outline:3px solid var(--cp-amber);outline-offset:2px}
/* LINK CHIPS (garage facets). The LRP chip is a multi-select checkbox; the garage
   picks one value at a time and each facet is its own URL, so there its chips are
   anchors. Same shape, same active fill — no check dot, because a tick would
   promise multi-select the panel does not offer. */
.mp-filters a.chip{text-decoration:none}
.mp-filters .chip.on{background:var(--fit-bg);border-color:var(--fit-fg);color:var(--fit-fg)}
.mp-filters .chip.on:hover{border-color:var(--fit-fg)}
.mp-filters .chip .cnt,
.mp-filters .dd-opt .cnt{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;font-weight:600;color:var(--cp-muted)}
.mp-filters .chip.on .cnt{color:var(--fit-fg)}
.mp-filters .dd-opt.sel .cnt{color:var(--cp-pine)}

/* footer bar (reset + show N results) — spans the card, border-top like the mockup */
.mp-filters .f-foot{display:flex;gap:10px;margin:8px -20px 0;padding:15px 20px;border-top:1px solid var(--cp-mist);background:var(--cp-card);border-radius:0 0 16px 16px}
.mp-filters .f-reset{flex:0 0 auto;height:44px;padding:0 16px;border-radius:11px;border:1px solid var(--cp-line);background:var(--cp-card);color:var(--cp-fern);font-weight:600;font-size:13.5px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;text-decoration:none}
.mp-filters .f-reset:hover{background:var(--cp-card-2)}
.mp-filters .f-show{flex:1;height:44px;border-radius:11px;background:var(--cp-pine);color:#fff;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:14px;border:0;cursor:pointer;transition:background .15s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.mp-filters .f-show:hover{background:var(--cp-pine2)}
.mp-filters .f-show .n{font-family:"JetBrains Mono",ui-monospace,monospace}
.promo-badge{position:absolute;top:9px;left:9px;z-index:3;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:var(--cp-amber);color:#3a2408;padding:4px 8px;border-radius:6px;box-shadow:0 2px 6px -2px rgba(58,36,8,.4)}
.promo-badge svg{width:12px;height:12px;stroke:#3a2408;stroke-width:2.2;fill:none}
.lcard--promo .lcond{top:38px}   /* drop the condition badge below the Uitgelicht badge */
/* "Uitgelicht" strip (category browse pages + empty-results states) */
.promo-strip{margin:4px 0 24px}
.promo-strip .ps-head{display:flex;align-items:center;gap:9px;font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:16px;color:var(--cp-ink);margin-bottom:13px}
.promo-strip .ps-head svg{width:17px;height:17px;stroke:var(--cp-amber);stroke-width:2;fill:none}
.lr-results.grid.promo-strip-grid{grid-template-columns:repeat(4,1fr)}   /* standard featured row = 4 wide */
@media(max-width:1080px){.lr-results.grid.promo-strip-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lr-results.grid.promo-strip-grid{grid-template-columns:1fr}}

/* seller city + country on the result card (.lseller suffix; audit G) */
.lseller .lloc{display:inline-flex;align-items:center;gap:4px;margin-left:8px;color:var(--muted,#5C6A62);font-size:12px;white-space:nowrap}
.lseller .lloc svg{width:12px;height:12px;stroke:currentColor;stroke-width:2;fill:none;flex:none}

/* ⚠⚠ DESKTOP GRID: THE CITY WAS BEING DRAWN OUTSIDE THE CARD (owner-reported, DAY 42).
   Measured at 1280 on a real grid card: `.lseller` needs **331px** of content and the 278px card
   gives it **244** — so the location's right edge landed **70px past the card's** and the card's
   own clip turned "Amsterdam, NL" into "Am…". It is not a truncation bug: `.lloc` never clipped
   ITSELF (scrollWidth == clientWidth), it was simply painted outside the box.
   ⚠ SCOPED TO GRID ON PURPOSE. The same row in LIST view needs 430px in 430px — it fits exactly,
     and the seller name is fully readable there. Applying this to list would delete a name that
     has room to be shown, which is a loss with nothing bought for it.
   ⚠ The name is VISUALLY hidden, not removed: the avatar's "RC" alone means nothing to a screen
     reader. Same pattern the project already uses for `.cp-pager .sr-only` and the `.astats`
     labels — it takes no space, so the 113px it was using goes to the city.
   ⚠ `margin-left:auto` is what pins the location to the right edge instead of letting it drift
     left against the badge — the owner's own note. It beats the `margin-left:8px` above on
     specificity (0,4,0 vs 0,2,0), so file order cannot decide it.
   ⚠⚠ ≥769px ONLY. The app layer positions `.lloc` absolutely on the price row (DAY 28b) and
      ellipsises `.snm` (app-mobile.css:1859/1897); the two never both apply. */
@media(min-width:769px){
  .lr-results.grid .lseller .snm{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .lr-results.grid .lseller .lloc{margin-left:auto}
}

/* ============================================================================
   PAGINATION (assets/js/cp-pager.js · camperplaats/pagination-desktop-mobile-app-spec.md)
   DAY 27. The results list had no pagination at all — the query fetched every
   matching ad. This is the desktop half: a result range plus a numbered nav of
   real links (§4). The mobile "Load more" half is shipped in the same markup and
   swapped in by app-mobile.css at ≤768px.
   ============================================================================ */
.cp-pager{margin:26px 0 8px}
.cp-pager .pg-more{display:none}                    /* mobile half — see app-mobile.css */
.cp-pager .pg-range{margin:0 0 12px;font-size:13.5px;color:var(--cp-muted);text-align:center}
.cp-pager .pg-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px}
.cp-pager .pg-num,.cp-pager .pg-ctl{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;height:44px;padding:0 12px;border:1px solid var(--cp-line);border-radius:11px;
  background:var(--cp-card);color:var(--cp-ink);font-weight:600;font-size:14px;text-decoration:none;
  transition:border-color .15s,background .15s,color .15s}
.cp-pager .pg-num{font-family:"JetBrains Mono",ui-monospace,monospace}
.cp-pager .pg-num:hover,.cp-pager .pg-ctl:hover{border-color:var(--cp-fern);color:var(--cp-pine)}
/* §4.5 current page: not a link, and marked by weight + fill, never by colour alone */
.cp-pager .pg-num.is-cur{background:var(--cp-pine);border-color:var(--cp-pine);color:#fff;font-weight:700;cursor:default}
/* §4.6 disabled controls stay in the DOM so the row never shifts */
.cp-pager .pg-ctl.is-off{opacity:.42;cursor:not-allowed}
.cp-pager .pg-ctl svg{width:17px;height:17px;flex-shrink:0}
.cp-pager .pg-gap{padding:0 2px;color:var(--cp-muted);user-select:none}
.cp-pager .pg-err{margin-top:10px;text-align:center;color:#b23b2e;font-size:13.5px}
.cp-pager .pg-skel,.cp-pager .pg-end{display:none}
.cp-pager .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}