/* ==========================================================================
   CamperBay.nl — seller store (P2, rich). Loaded on seller/ pages alongside
   results.css (.lcard). Scoped under .cp-store. Pine token override recolours
   the shared header. Adapts to seller type (dismantler/dealer/private).
   ========================================================================== */
: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;
}
body{background:var(--cp-paper)}
.cp-store{max-width:1280px;margin:0 auto}
.cp-store a{color:inherit;text-decoration:none}
.cp-store .crumb{padding:16px 0 0;font-size:13px;color:var(--cp-muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cp-store .crumb a:hover{color:var(--cp-pine)}.cp-store .crumb .sep{opacity:.5}.cp-store .crumb .here{color:var(--cp-ink);font-weight:600}

/* banner */
.cp-store .banner{background:var(--cp-pine);border-radius:20px;margin-top:14px;padding:30px 34px;color:#EAF0EC;position:relative;overflow:hidden}
.cp-store .banner::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 7px,transparent 7px 15px);-webkit-mask-image:linear-gradient(250deg,#000,transparent 70%);mask-image:linear-gradient(250deg,#000,transparent 70%)}
.cp-store .banner .brow{position:relative;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.cp-store .storeav{width:88px;height:88px;border-radius:20px;background:#EAF0EC;color:var(--cp-pine);display:grid;place-items:center;font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:34px;flex-shrink:0;box-shadow:0 0 0 4px rgba(255,255,255,.12)}
.cp-store .storeid{min-width:0}
.cp-store .storeid .nm{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.cp-store .storeid h1{font-family:"Archivo",system-ui,sans-serif;font-weight:800;font-size:28px;letter-spacing:-.02em;color:#fff}
.cp-store .typebadge{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--cp-amber);color:#3a2408;padding:5px 11px;border-radius:7px}
.cp-store .verified{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#bfe0cd}
.cp-store .verified svg{width:15px;height:15px;stroke:#7fd0a0;stroke-width:2;fill:none}
.cp-store .storeid .meta{display:flex;align-items:center;gap:16px;margin-top:10px;color:#A9BBB0;font-size:13.5px;flex-wrap:wrap}
.cp-store .storeid .meta .star{color:var(--cp-amber-soft);font-weight:600;display:flex;align-items:center;gap:5px}
.cp-store .storeid .meta .star svg{width:14px;height:14px;fill:var(--cp-amber-soft);stroke:none}
.cp-store .storeid .meta .m{display:flex;align-items:center;gap:6px}
.cp-store .storeid .meta .m svg{width:14px;height:14px;stroke:currentColor;stroke-width:1.8;fill:none}
.cp-store .banner .actions{margin-left:auto;display:flex;gap:10px;flex-shrink:0}
.cp-store .b-follow{height:44px;padding:0 22px;border-radius:11px;background:var(--cp-amber);color:#3a2408;font-weight:700;font-family:"Archivo",system-ui,sans-serif;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:0;transition:transform .15s,filter .2s;text-decoration:none}
.cp-store .b-follow:hover{filter:brightness(1.05);transform:translateY(-1px);color:#3a2408}
.cp-store .b-follow.on{background:rgba(255,255,255,.12);color:#fff}
.cp-store .b-follow svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none}
.cp-store .b-msg{height:44px;padding:0 20px;border-radius:11px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;transition:background .2s;text-decoration:none}
.cp-store .b-msg:hover{background:rgba(255,255,255,.16);color:#fff}
.cp-store .b-msg svg{width:17px;height:17px;stroke:#fff;stroke-width:1.9;fill:none}
.cp-store .bstats{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12)}
.cp-store .bstat .n{font-family:"JetBrains Mono",ui-monospace,monospace;font-weight:600;font-size:21px;color:#fff}
.cp-store .bstat .l{font-size:12px;color:#A9BBB0;margin-top:3px}

/* subnav */
.cp-store .subnav{display:flex;gap:4px;border-bottom:1px solid var(--cp-line);margin-top:22px;flex-wrap:wrap}
.cp-store .snav{padding:14px 18px;font-weight:600;font-size:14.5px;color:var(--cp-muted);position:relative;display:flex;align-items:center;gap:8px}
.cp-store .snav .c{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;opacity:.7}
.cp-store .snav.on{color:var(--cp-pine)}
.cp-store .snav.on::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:3px;background:var(--cp-amber);border-radius:2px}
.cp-store .snav:hover{color:var(--cp-ink)}
/* focus: the AJAX subnav keeps a clicked <a> focused (no page reload wipes it), which showed the
   user-agent's dark focus box on mouse click. Suppress it for pointer focus, keep a branded ring for
   keyboard users (:focus-visible). Same for the banner Follow/Message buttons. */
.cp-store .snav:focus,.cp-store .b-follow:focus,.cp-store .b-msg:focus{outline:none}
.cp-store .snav:focus-visible{outline:2px solid var(--cp-amber);outline-offset:-3px;border-radius:8px}
.cp-store .b-follow:focus-visible,.cp-store .b-msg:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* shell */
.cp-store .shell{display:grid;grid-template-columns:1fr 300px;gap:28px;padding:24px 0 60px;align-items:start}
.cp-store .toolbar{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}
.cp-store .chips{display:flex;gap:8px;flex-wrap:wrap}
.cp-store .chip{font-weight:600;font-size:13px;padding:8px 14px;border-radius:9px;border:1px solid var(--cp-line);background:var(--cp-card);color:var(--cp-muted);display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:all .15s}
.cp-store .chip .cc{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;opacity:.7}
.cp-store .chip:hover{border-color:var(--cp-fern);color:var(--cp-ink)}
.cp-store .chip.on{background:var(--cp-pine);border-color:var(--cp-pine);color:#fff}
.cp-store .tspacer{margin-left:auto}
.cp-store .sortsel{height:40px;border:1px solid var(--cp-line);border-radius:10px;background:var(--cp-card);padding:0 36px 0 12px;font:inherit;font-size:13.5px;font-weight:500;color:var(--cp-ink);cursor:pointer}
.cp-store .viewtoggle{display:flex;background:var(--cp-card);border:1px solid var(--cp-line);border-radius:10px;padding:3px;gap:3px}
.cp-store .vt{width:38px;height:34px;border:0;background:none;border-radius:7px;cursor:pointer;display:grid;place-items:center;color:var(--cp-muted)}
.cp-store .vt svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.8;fill:none}
.cp-store .vt.active{background:var(--cp-pine);color:#fff}

/* aside */
.cp-store .aside{position:sticky;top:82px;display:flex;flex-direction:column;gap:16px}
.cp-store .acard{background:var(--cp-card);border:1px solid var(--cp-line);border-radius:16px;padding:20px}
.cp-store .acard h3{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:9px}
.cp-store .acard h3 svg{width:18px;height:18px;stroke:var(--cp-pine);stroke-width:1.8;fill:none}
.cp-store .acard p{font-size:13.5px;color:#3b4a43;line-height:1.6}
.cp-store .kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--cp-mist);font-size:13.5px}
.cp-store .kv:last-child{border-bottom:0}
.cp-store .kv .k{color:var(--cp-muted);display:flex;align-items:center;gap:8px}
.cp-store .kv .k svg{width:15px;height:15px;stroke:var(--cp-fern);stroke-width:1.7;fill:none}
.cp-store .kv .v{font-weight:600}
.cp-store .kv .v.brk{word-break:break-all;text-align:right}
.cp-store .trustline{display:flex;gap:10px;align-items:flex-start}
.cp-store .trustline+.trustline{margin-top:12px}
.cp-store .trustline svg{width:18px;height:18px;stroke:var(--cp-fern);stroke-width:1.7;fill:none;flex-shrink:0;margin-top:1px}
.cp-store .trustline .tt{font-weight:600;font-size:13.5px}
.cp-store .trustline .td{font-size:12.5px;color:var(--cp-muted);margin-top:1px}
.cp-store .rev{padding:12px 0;border-bottom:1px solid var(--cp-mist)}
.cp-store .rev:last-child{border-bottom:0;padding-bottom:0}
.cp-store .rev .rh{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.cp-store .rev .rstars{color:var(--cp-amber);display:flex;gap:1px;margin-left:auto}
.cp-store .rev .rstars svg{width:12px;height:12px;fill:var(--cp-amber);stroke:none}
.cp-store .rev .rstars svg.off{fill:#cbd4cc}
.cp-store .rev p{font-size:12.5px;color:#3b4a43;margin-top:6px;line-height:1.5}
.cp-store .seeall{margin-top:14px;font-size:13.5px;font-weight:600;color:var(--cp-pine);display:inline-flex;align-items:center;gap:7px}

/* reviews tab list */
.cp-store .revfull{background:var(--cp-card);border:1px solid var(--cp-line);border-radius:16px;padding:6px 22px}
.cp-store .revfull .rev{padding:16px 0}
.cp-store .revfull .rev p{font-size:13.5px}
.cp-store .abouttab{background:var(--cp-card);border:1px solid var(--cp-line);border-radius:16px;padding:24px;max-width:760px}
.cp-store .abouttab h2{font-family:"Archivo",system-ui,sans-serif;font-weight:700;font-size:19px;margin-bottom:12px}
.cp-store .abouttab p{color:#3b4a43;line-height:1.65;font-size:14.5px}
.cp-store .empty{background:var(--cp-card);border:1px solid var(--cp-line);border-radius:14px;padding:40px;text-align:center;color:var(--cp-muted)}

@media(max-width:1080px){.cp-store .bstats{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(max-width:900px){
  .cp-store .shell{grid-template-columns:1fr}
  .cp-store .aside{position:static;flex-direction:row;flex-wrap:wrap}
  .cp-store .aside .acard{flex:1;min-width:250px}
  .cp-store .banner .actions{margin-left:0;width:100%}
}
@media(max-width:560px){.cp-store .bstats{grid-template-columns:repeat(2,1fr)}.cp-store .storeid h1{font-size:22px}}