.ccp *{box-sizing:border-box;margin:0;padding:0}
.ccp{
  /* House accent, not the retired WordPress coral: #e85d4a under white text was
     3.45:1, and the active sort pill — the one control that says which sort is on —
     was the worst of it. #c64502 is --color-button (4.94:1), #a93a02 its hover step. */
  --coral:#c64502; --coral-2:#a93a02; --coral-soft:rgba(198,69,2,.10);
  --gold:#c9a84c; --gold-h:#f0c040; --gold-soft:rgba(201,168,76,.14);
  /* --muted was #7a847f: 3.86:1 on white, 3.57:1 on --bg-3, and a grey, which the
     token file bans outright. It now IS --ink-2 (7.8:1); the size and weight the
     rules already carry are what keep those labels secondary. */
  --ink:#1f2a27; --ink-2:#485451; --muted:var(--ink-2);
  --hair:#ececea; --bg:#ffffff; --bg-2:#ffffff; --bg-3:#f5f6f8;
  /* the two night values are the house panel pair (--pg-night / --pg-night-2 in
     styles/ccp-pages.css). The plugin cannot reference that sheet — /inventory/ does
     not load it — but the sidebar promo has to sit beside the same near-black the
     rest of the site uses, not a green-black of its own. */
  --dark:#0e0c0d; --dark-2:#171415; --green:#1f7a52; --amber:#b08a1e;
  --sans:var(--font-poppins),'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --ease:cubic-bezier(.5,0,.1,1); --ease-out:cubic-bezier(.16,.84,.44,1);
  --r:18px; --r-sm:12px;
  --ccp-header-h:96px; /* space reserved for the site's fixed/transparent header — tweak in Customizer if needed */
  --sh-1:0 1px 2px rgba(20,30,25,.05),0 8px 18px rgba(20,30,25,.04);
  --sh-2:0 10px 30px rgba(20,30,25,.08),0 30px 60px rgba(20,30,25,.06);
  font-family:var(--sans);color:var(--ink);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;width:100%;overflow:hidden;
}
.ccp img{max-width:100%;display:block}
.ccp a{text-decoration:none;color:inherit}
.ccp .wrap{max-width:1280px;margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.ccp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:14px;line-height:1;cursor:pointer;border:none;border-radius:12px;padding:13px 20px;transition:transform .15s var(--ease),box-shadow .15s,background .2s,border-color .15s,color .15s}
.ccp .btn-primary{color:#fff;background:linear-gradient(135deg,var(--coral),var(--coral-2));box-shadow:0 8px 20px rgba(232,93,74,.3)}
.ccp .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,93,74,.4)}
.ccp .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--hair)}
.ccp .btn-ghost:hover{border-color:var(--coral);color:var(--coral)}
.ccp .btn svg{width:16px;height:16px}

/* ===== hero / search (light & readable — the top padding clears the fixed header
   so the title isn't hidden. Make your site header dark for the cleanest look.) ===== */
.ccp .top{position:relative;background:linear-gradient(165deg,#fff,var(--bg-2));border-bottom:1px solid var(--hair);padding:calc(var(--ccp-header-h) + 26px) 0 clamp(22px,3vw,30px);overflow:hidden}
.ccp .top::before{content:"";position:absolute;top:-150px;right:-110px;width:480px;height:480px;background:radial-gradient(circle,var(--coral-soft),transparent 70%)}
.ccp .top .wrap{position:relative;z-index:1}
/* The page title was the SMALLEST heading on this route: 23px at 320 against
   a 30px .sc-h2 below it and 17px body copy beside it, and 36px against a
   64px .sc-h2 at 1440 (UI_UX_AUDIT F285). This clamp beats .sc-h2's
   clamp(30px,5vw,64px) at every width — floor, slope and cap — so the
   hierarchy cannot invert again at some in-between viewport. */
.ccp .top h1{font-size:clamp(32px,5.2vw,66px);font-weight:900;letter-spacing:-1px;line-height:1.05}
.ccp .top h1 em{font-style:italic;color:var(--coral)}
.ccp .top p{font-size:14.5px;color:var(--ink-2);font-weight:500;margin-top:8px}
.ccp .search{margin-top:20px;display:flex;gap:12px;flex-wrap:wrap}
.ccp .sbox{flex:1;min-width:240px;position:relative}
.ccp .sbox>svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:18px;height:18px;fill:none;stroke:var(--muted);stroke-width:2}
.ccp .sbox input{width:100%;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--hair);border-radius:13px;padding:14px 16px 14px 44px;box-shadow:var(--sh-1)}
.ccp .sbox input:focus{outline:none;border-color:var(--coral)}
.ccp .sbox input::placeholder{color:var(--muted);font-weight:600}

/* concierge banner */
.ccp .pitch{display:flex;align-items:center;gap:10px;margin-top:18px;padding:12px 16px;border-radius:13px;background:linear-gradient(135deg,var(--coral-soft),rgba(201,168,76,.08));border:1px solid rgba(232,93,74,.18);font-size:14px;font-weight:700;color:var(--ink-2)}
.ccp .pitch b{color:var(--ink)}
.ccp .pitch svg{flex:none;width:18px;height:18px;fill:var(--coral);stroke:none}

/* ===== sort pills ===== */
.ccp .sortbar{margin-top:22px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.ccp .sortbar::-webkit-scrollbar{display:none}
.ccp .sortrail{display:inline-flex;align-items:center;gap:3px;padding:6px;background:var(--bg-2);border:1px solid var(--hair);border-radius:999px;box-shadow:var(--sh-1)}
.ccp .sortrail .lbl{display:inline-flex;align-items:center;gap:7px;flex:none;padding:0 11px 0 9px;font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.ccp .sortrail .lbl svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.ccp .sdiv{flex:none;width:1px;height:18px;background:var(--hair);margin-right:3px}
.ccp .pill{flex:none;display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink-2);background:transparent;border:none;border-radius:999px;padding:9px 16px;cursor:pointer;transition:color .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease);white-space:nowrap}
.ccp .pill:hover{color:var(--ink);background:#fff;box-shadow:var(--sh-1)}
.ccp .pill.on,.ccp .pill.on:hover{background:linear-gradient(135deg,var(--coral),var(--coral-2));color:#fff;box-shadow:0 6px 16px rgba(232,93,74,.32)}
.ccp .pill .ar{display:none;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease)}
.ccp .pill.on .ar{display:inline-flex}
.ccp .pill.up .ar{transform:rotate(180deg)}

/* ===== layout ===== */
.ccp .results{padding:clamp(22px,3vw,32px) 0 clamp(40px,5vw,60px)}
.ccp .toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.ccp .count{font-size:14.5px;font-weight:600;color:var(--ink-2)}
.ccp .count b{color:var(--ink);font-weight:900;font-size:18px}
.ccp .layout{display:grid;grid-template-columns:264px 1fr;gap:26px;align-items:start}

/* filters */
.ccp .filters{position:sticky;top:16px;background:#fff;border:1px solid var(--hair);border-radius:var(--r);box-shadow:var(--sh-1);overflow:hidden}
.ccp .f-top{display:flex;align-items:center;justify-content:space-between;padding:15px 18px;border-bottom:1px solid var(--hair)}
.ccp .f-top b{font-size:14px;font-weight:800}
.ccp .f-top-r{display:flex;align-items:center;gap:10px}
.ccp .f-clear{font-size:12px;font-weight:700;color:var(--coral);background:none;border:none;cursor:pointer;font-family:var(--sans);padding:6px 8px;margin:-6px -8px} /* padding, then a negative margin, so the tap target clears 24px without moving the label */
.ccp .f-close{display:none;width:30px;height:30px;border:none;background:var(--bg-3);border-radius:8px;cursor:pointer;place-items:center}
.ccp .f-close svg{width:14px;height:14px;fill:none;stroke:var(--ink-2);stroke-width:2}

/* condition segmented tabs */
.ccp .seg{display:flex;gap:4px;margin:14px 18px;padding:4px;background:var(--bg-3);border-radius:11px}
.ccp .seg button{flex:1;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--ink-2);background:none;border:none;border-radius:8px;padding:9px 4px;cursor:pointer;transition:all .15s var(--ease)}
.ccp .seg button .sc{font-size:10px;color:var(--muted);font-weight:700;margin-left:3px}
.ccp .seg button.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.ccp .seg button.on .sc{color:var(--coral)}

/* sidebar search */
.ccp .fsearch{margin:0 18px 14px;position:relative}
.ccp .fsearch svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;fill:none;stroke:var(--muted);stroke-width:2}
.ccp .fsearch input{width:100%;font-family:var(--sans);font-size:16px;font-weight:600;color:var(--ink);background:var(--bg-2);border:1.5px solid var(--hair);border-radius:10px;padding:11px 12px 11px 38px}
.ccp .fsearch input:focus{outline:none;border-color:var(--coral);background:#fff}

/* instant OTD */
.ccp .otd{display:flex;align-items:center;gap:10px;margin:0 18px 16px;padding:13px 15px;border-radius:12px;background:linear-gradient(135deg,var(--dark),var(--dark-2));color:#fff;cursor:pointer;transition:transform .15s var(--ease),box-shadow .15s;position:relative;overflow:hidden}
.ccp .otd::before{content:"";position:absolute;top:-30px;right:-20px;width:120px;height:120px;background:radial-gradient(circle,rgba(240,192,64,.2),transparent 70%)}
.ccp .otd:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.ccp .otd .ob{flex:none;width:32px;height:32px;border-radius:9px;background:rgba(240,192,64,.16);display:grid;place-items:center;position:relative}
.ccp .otd .ob svg{width:17px;height:17px;fill:var(--gold-h);stroke:none}
.ccp .otd .ot{position:relative}
.ccp .otd .ot b{display:block;font-size:13px;font-weight:800}
.ccp .otd .ot span{font-size:11px;color:rgba(255,255,255,.6);font-weight:600}

.ccp .fg{padding:6px 18px;border-top:1px solid var(--hair)}
.ccp .fg .fgh{display:flex;align-items:center;justify-content:space-between;width:100%;padding:13px 0;background:none;border:none;cursor:pointer;font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.ccp .fg .fgh svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2.2;transition:transform .2s var(--ease)}
.ccp .fg.closed .fgh svg{transform:rotate(-90deg)}
.ccp .fg .fgb{padding-bottom:12px;display:block}
.ccp .fg.closed .fgb{display:none}
/* 43 of these stack in the drawer. At 5px padding they were 32px tall with no gap
   at all, so every row's edge was the next row's edge and a mis-tap on a phone was
   the default outcome. 10px takes the row to ~42px and the hairline separates them. */
.ccp .opt{display:flex;align-items:center;gap:10px;padding:10px 2px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink-2)}
.ccp .opt + .opt{border-top:1px solid var(--hair)}
.ccp .opt:hover{color:var(--ink)}
.ccp .opt input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid #cfd4d2;border-radius:5px;cursor:pointer;flex:none;position:relative}
.ccp .opt input:checked{background:var(--coral);border-color:var(--coral)}
.ccp .opt input:checked::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ccp .opt .ct{margin-left:auto;font-size:12px;color:var(--muted);font-weight:600}
.ccp .f-apply{display:none;padding:14px 18px;border-top:1px solid var(--hair)}
.ccp .f-apply .btn{width:100%}

.ccp .filter-toggle{display:none;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:13.5px;color:var(--ink);background:#fff;border:1.5px solid var(--hair);border-radius:11px;padding:12px 16px;cursor:pointer}
.ccp .filter-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9}
.ccp .ft-badge{background:var(--coral);color:#fff;font-size:10px;font-weight:800;min-width:17px;height:17px;border-radius:999px;display:grid;place-items:center;padding:0 4px}
.ccp .overlay{display:none;position:fixed;inset:0;z-index:998;background:rgba(15,20,18,.5);opacity:0;visibility:hidden;transition:.3s}
.ccp .overlay.open{opacity:1;visibility:visible}
body.lock{overflow:hidden}

/* active filter chips */
.ccp .chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ccp .chips:empty{display:none}
.ccp .chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ink);background:var(--coral-soft);border:1px solid rgba(232,93,74,.25);border-radius:999px;padding:7px 8px 7px 13px;cursor:pointer;transition:background .15s}
.ccp .chip:hover{background:rgba(232,93,74,.18)}
.ccp .chip i{font-style:normal;color:var(--muted);font-weight:700;margin-right:-2px}
.ccp .chip .x{width:16px;height:16px;border-radius:50%;background:rgba(232,93,74,.2);display:grid;place-items:center;font-size:11px;line-height:1;color:var(--coral-2);font-weight:800}
.ccp .chip.reset{background:none;border:none;color:var(--coral);text-decoration:underline;padding:7px 4px}

/* ===== card grid (3 across on desktop) ===== */
.ccp .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ccp .empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted);font-weight:600;line-height:1.7}
.ccp .card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-1);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.ccp .card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:transparent}
.ccp .media{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(150deg,var(--tint,#2a3531),var(--tint2,#161c1a))}
.ccp .media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(10,14,12,.5),transparent 46%)}
.ccp .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s,transform .5s var(--ease)}
.ccp .media img.on{opacity:1}
.ccp .card:hover .media img.on{transform:scale(1.05)}
.ccp .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.ccp .ph svg{width:54px;height:54px;fill:none;stroke:rgba(255,255,255,.8);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.ccp .ph b{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.ccp .badge{position:absolute;top:12px;left:12px;z-index:2;padding:6px 11px;border-radius:8px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,var(--coral),var(--coral-2));box-shadow:0 2px 10px rgba(232,93,74,.4)}
.ccp .badge.green{background:linear-gradient(135deg,var(--green),#15603f)}
.ccp .badge.gold{background:linear-gradient(135deg,#d8b24e,#b8902e)}
.ccp .fav{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border:none;border-radius:50%;background:rgba(255,255,255,.92);backdrop-filter:blur(4px);display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(20,30,25,.18);transition:transform .15s var(--ease)}
.ccp .fav:hover{transform:scale(1.1)}
.ccp .fav svg{width:17px;height:17px;fill:none;stroke:var(--ink-2);stroke-width:2;transition:.15s}
.ccp .fav.on svg{fill:var(--coral);stroke:var(--coral)}
.ccp .color{position:absolute;bottom:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:5px 11px 5px 7px;border-radius:999px;background:rgba(15,20,18,.6);color:#fff;font-size:11px;font-weight:700;backdrop-filter:blur(4px)}
.ccp .color .dot{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.7)}
.ccp .promo{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,rgba(31,122,82,.94),rgba(21,96,63,.94));backdrop-filter:blur(2px);display:flex;align-items:center;gap:6px}
.ccp .promo svg{flex:none;width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.2}
.ccp .body{padding:16px 17px 17px;display:flex;flex-direction:column;flex:1}
.ccp .name{font-size:16.5px;font-weight:800;letter-spacing:-.3px;line-height:1.25;transition:color .2s;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.ccp .card:hover .name{color:var(--coral)}
.ccp .trim{font-size:12px;color:var(--muted);font-weight:600;margin-top:4px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em}
.ccp .stats{display:flex;align-items:center;margin-top:13px;padding-top:12px;border-top:1px solid var(--hair)}
.ccp .st{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;position:relative}
.ccp .st+.st::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:24px;background:var(--hair)}
.ccp .st svg{width:17px;height:17px;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ccp .st b{font-size:12.5px;font-weight:800;color:var(--ink)}
.ccp .st span{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ccp .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:14px;border-top:1px solid var(--hair)}
.ccp .pricetxt{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ccp .priceval{font-size:18px;font-weight:900;letter-spacing:-.5px;color:var(--ink)}
.ccp .pricesub{font-size:10.5px;font-weight:700;color:var(--muted)}
.ccp .fin{font-size:12.5px;font-weight:800;color:var(--green);display:flex;align-items:center;gap:5px}
.ccp .fin svg{width:14px;height:14px;fill:var(--green)}
.ccp .foot .btn{padding:11px 17px}

@media(max-width:1080px){
  .ccp .layout{grid-template-columns:1fr}
  .ccp .filter-toggle{display:inline-flex}
  .ccp .overlay{display:block}
  .ccp .f-close{display:grid}
  .ccp .f-apply{display:block}
  .ccp .filters{position:fixed;top:0;left:0;z-index:999;width:min(360px,88vw);height:100dvh;border-radius:0;transform:translateX(-100%);transition:transform .3s var(--ease);overflow-y:auto}
  .ccp .filters.open{transform:translateX(0)}
}
@media(max-width:900px){.ccp .grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:782px){.ccp{--ccp-header-h:70px}} /* mobile admin bar / smaller header */
@media(max-width:560px){.ccp .grid{grid-template-columns:1fr}.ccp .toolbar{flex-direction:column;align-items:stretch;gap:10px}}
@media(prefers-reduced-motion:no-preference){
  .ccp .card{opacity:0;transform:translateY(16px);animation:rise .55s var(--ease-out) forwards}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* ── responsive hardening — phones → 4K, no horizontal scroll ───────────────── */
.ccp{max-width:100vw}
.ccp img,.ccp svg{height:auto}
/* big desktops: 4-up cards so they don't get too wide */
@media(min-width:1500px){.ccp .wrap{max-width:1380px}} /* 3 cards across — wider cards, bigger images */
/* tablets: 2-up already at 900px; tidy the hero search */
@media(max-width:700px){
  .ccp .pitch{font-size:13px}
  .ccp .sbox input{font-size:16px}
}
/* small phones */
@media(max-width:420px){
  .ccp .card .foot{flex-wrap:wrap;gap:10px}
  .ccp .card .foot .btn{width:100%}
  .ccp .sortrail{gap:2px;padding:5px}
  .ccp .pill{padding:8px 13px;font-size:12.5px}
}

/* keep the hero title dark/visible even if the theme recolours h1 by inheritance */
.ccp .top h1{color:#1f2a27 !important}
.ccp .top h1 em{color:var(--coral) !important}